页面上方标题组件；普通项目管理和工作组项目管理接口联调

src/components/ProgressBar.vue

@@ -1,23 +1,26 @@
 <!--进度组件-->
 <template>
-  <div class="progress">
+  <div>
+    <div class="progress" v-if="(data.allPayment + data.partPayment + data.notPayment) !== 0">
       <!--    将全部付款和部分付款放入一个div中-->
       <div class="full-and-partial"
-         :style="{width: (data.payInFull + data.partialPayment)/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}">
+           :style="{width: (data.allPayment + data.partPayment)/(data.allPayment + data.partPayment + data.notPayment) * 100 + '%'}">
-      <div :style="{width: data.payInFull/(data.payInFull + data.partialPayment) * 100 + '%'}"
+        <div :style="{width: data.allPayment/(data.allPayment + data.partPayment) * 100 + '%'}"
              class="progress-item pay-in-full">
-        {{ data.payInFull }}
+          {{ data.allPayment }}
         </div>
-      <div :style="{width: data.partialPayment/(data.payInFull + data.partialPayment) * 100 + '%'}"
+        <div :style="{width: data.partPayment/(data.allPayment + data.partPayment) * 100 + '%'}"
              class="progress-item partial-payment">
-        {{ data.partialPayment }}
+          {{ data.partPayment }}
         </div>
       </div>
-    <div :style="{width: data.nonPayment/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}"
+      <div :style="{width: data.notPayment/(data.allPayment + data.partPayment + data.notPayment) * 100 + '%'}"
            class="progress-item non-payment">
-      {{ data.nonPayment }}
+        {{ data.notPayment }}
       </div>
     </div>
+    <div class="progress progress-null" v-else>0</div>
+  </div>
 </template>
 
 <script>
@@ -27,9 +30,9 @@ export default {
     /**
      * 进度字段，
      * {
-     *   payInFull: 10, // 已付全款
+     *   allPayment: 10, // 已付全款
-     *   partialPayment: 10, // 部分付款
+     *   partPayment: 10, // 部分付款
-     *   nonPayment: 10, // 未付款
+     *   notPayment: 10, // 未付款
      * }
      */
     data: {
@@ -46,35 +49,42 @@ export default {
 <style scoped lang="less">
 .progress {
   border-radius: 10px;
-  background-color: rgb(232, 232, 232);
+  background: #e8e8e8;
   height: 20px;
   width: 100%;
   display: flex;
+
+  &-null {
+    justify-content: center;
+  }
 }
 
 .full-and-partial {
-  background-color: rgb(0, 133, 192);
+  background: linear-gradient(0deg,#0075a9 0%, #008dcc 100%);
   display: flex;
   border-radius: 10px;
+  box-sizing: border-box;
 }
 
 .progress-item {
+  height: 20px;
   border-radius: 10px;
   color: white;
   line-height: 20px;
   text-align: center;
+  box-sizing: border-box;
 }
 
 .pay-in-full {
-  background-color: rgb(7, 168, 161);
+  background: linear-gradient(0deg,#069f99 0%, #07b1aa 100%);
 }
 
 .partial-payment {
-  background-color: rgb(0, 133, 192);
+  background: linear-gradient(0deg,#0075a9 0%, #008dcc 100%);
 }
 
 .non-payment {
-  color: rgb(88,100,95);
+  color: #57635e;
-  background-color: rgb(232, 232, 232);
+  background: #e8e8e8;
 }
 </style>

src/components/company/SelectContacts.vue

@@ -8,7 +8,8 @@
                   v-on="$listeners"
                   show-search
                   option-filter-prop="children"
-                  :filter-option="filterOption">
+                  :filter-option="filterOption"
+                  @dropdownVisibleChange="handleDropdownOpen">
           <a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
         </a-select>
       </a-col>
@@ -40,6 +41,14 @@ export default {
         return {}
       }
     },
+    // 编辑时回显的数据, 需要id，name两个字段
+    initfContacts: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
     value: {
       type: String,
       required: false,
@@ -49,13 +58,12 @@ export default {
   data() {
     return {
       contactsList: [], // 该企业下联系人列表
+      isFirstOpen: true, // 编辑状态下是否为第一次打开
     }
   },
   created() {
     // 编辑 第一次不回显的问题
-    if(this.selectedCompany!== null && this.selectedCompany.hasOwnProperty('id')){
     this.getContactsList()
-    }
   },
   watch: {
     /**
@@ -66,6 +74,15 @@ export default {
         this.getContactsList()
       },
       deep: true
+    },
+    /**
+     * 编辑联系人变化
+     */
+    initfContacts: {
+      handler() {
+        this.isFirstOpen = true
+      },
+      deep: true
     }
   },
   methods: {
@@ -73,12 +90,15 @@ export default {
      * 获取联系人数据
      */
     getContactsList() {
-      if (this.selectedCompany) {
+      if (this.selectedCompany && this.selectedCompany.hasOwnProperty('id')) {
         const params = {
           companyId: this.selectedCompany.id
         }
         getContactsByCompany(params).then(res => {
           this.contactsList = res.result
+          if (this.initfContacts && this.initfContacts.hasOwnProperty('id')) {
+            this.contactsList.push(this.initfContacts)
+          }
         })
       }
     },
@@ -99,6 +119,17 @@ export default {
       return (
           option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       );
+    },
+    handleDropdownOpen() {
+      if (this.isFirstOpen && this.initfContacts && this.initfContacts.hasOwnProperty('id')) {
+        this.contactsList.forEach((item, index) => {
+          if (item.id === this.initfContacts.id) {
+            this.$emit('change', undefined)
+            this.contactsList.splice(index, 1)
+          }
+        })
+        this.isFirstOpen = false
+      }
     }
   },
   model: {

src/components/company/SelectPrincipal.vue

@@ -5,7 +5,7 @@
             show-search
             option-filter-prop="children"
             :filter-option="filterOption">
-    <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ `${item.username}(${item.orgCodeTxt})` }}</a-select-option>
+    <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ `${item.realname}(${item.orgCodeTxt})` }}</a-select-option>
   </a-select>
 </template>
 

src/components/layouts/PageHeaderTitle.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="page-header">
+    <!--    页面-->
+    <template v-if="isLevelOne">
+      <img :src="imgForIcon" class="page-header-icon">
+      <span class="page-header-title">{{ $route.meta.title }}</span>
+    </template>
+    <!--    需要有返回操作的页面-->
+    <template v-else>
+      <img :src="IconBack" class="page-header-icon page-header-icon-back" @click="backPage">
+      <span class="page-header-title">{{ levelTwoTitle }}</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import IconBack from '@/assets/imgs/icon/icon_back.png'
+
+export default {
+  name: 'PageHeaderTitle',
+  props: {
+    // 是否为一级菜单
+    isLevelOne: {
+      type: Boolean,
+      default: true
+    },
+    // 图标图片
+    imgForIcon: {
+      type: String,
+      default: ''
+    },
+    // 有返回页面的标题
+    levelTwoTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      IconBack
+    }
+  },
+  methods: {
+    backPage() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.page-header {
+  height: 60px;
+  background: #ffffff;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+
+  &-icon {
+    height: 20px;
+    max-width: 30px;
+  }
+
+  &-icon-back {
+    cursor: pointer;
+  }
+
+  &-title {
+    margin-left: 10px;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    color: #666666;
+  }
+}
+</style>

src/views/businessManagement/BusinessManagement.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!--    查询区域-start -->
       <div class="table-page-search-wrapper">
@@ -60,16 +62,19 @@
       </div>
       <business-management-module ref="modalForm" @ok="modalFormOk"></business-management-module>
     </a-card>
+  </div>
 </template>
 
 <script>
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JEllipsis from '@comp/jero/JEllipsis'
 import BusinessManagementModule from './modules/BusinessManagementModule'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_company_management.png'
 
 export default {
   name: 'BusinessManagement',
-  components: { JEllipsis, BusinessManagementModule },
+  components: { JEllipsis, BusinessManagementModule, PageHeaderTitle },
   mixins: [JeroListMixin],
   computed: {
     importExcelUrl: function(){
@@ -78,6 +83,7 @@ export default {
   },
   data() {
     return {
+      IconImg,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }

src/views/businessManagement/ContactManagement.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!--    查询区域-start -->
       <div class="table-page-search-wrapper">
@@ -70,15 +72,18 @@
       </div>
       <contact-management-module ref="modalForm" @ok="modalFormOk"></contact-management-module>
     </a-card>
+  </div>
 </template>
 
 <script>
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import ContactManagementModule from './modules/ContactManagementModule'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_company_management.png'
 
 export default {
   name: 'ContactManagement',
-  components: { ContactManagementModule },
+  components: { ContactManagementModule, PageHeaderTitle },
   mixins: [JeroListMixin],
   computed: {
     importExcelUrl: function(){
@@ -87,6 +92,7 @@ export default {
   },
   data() {
     return {
+      IconImg,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }

src/views/projectManagement/GeneralProjectManagement.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconProjectManagement"></page-header-title>
     <a-card :bordered="false">
       <!--    查询区域-start -->
       <div class="table-page-search-wrapper">
@@ -101,6 +103,7 @@
       <general-project-module ref="modalForm" @ok="modalFormOk"></general-project-module>
       <project-detail-modal ref="projectDetail"></project-detail-modal>
     </a-card>
+  </div>
 </template>
 
 <script>
@@ -110,19 +113,21 @@ import GeneralProjectModule from './modules/GeneralProjectModule'
 import SelectPrincipal from '@comp/company/SelectPrincipal'
 import ProjectDetailModal from '@comp/ProjectDetailModal'
 import StatusSlot from '@comp/tools/StatusSlot'
-
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconProjectManagement from '@/assets/imgs/icon/icon_project_management.png'
 
 export default {
   name: 'GeneralProjectManagement',
-  components: { JYearDate, GeneralProjectModule, SelectPrincipal, ProjectDetailModal, StatusSlot },
+  components: { JYearDate, GeneralProjectModule, SelectPrincipal, ProjectDetailModal, StatusSlot, PageHeaderTitle },
   mixins: [JeroListMixin],
   computed: {
-    importExcelUrl: function(){
+    importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
-    },
+    }
   },
   data() {
     return {
+      IconProjectManagement,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }
@@ -231,8 +236,7 @@ export default {
     /*
     * 打开项目详情模态框
     * */
-    openDetailModal(record){
+    openDetailModal(record) {
-      console.log(record)
       const basicInfo = {
         principalName: record.principalName,
         receivableAmount: record.receivableAmount,
@@ -240,7 +244,7 @@ export default {
       }
       this.$refs.basicInfo = basicInfo
       this.$refs.projectDetail.open(record)
-    },
+    }
   }
 }
 </script>

src/views/projectManagement/MemberUnitMaintenance.vue

@@ -1,13 +1,7 @@
 <template>
+  <div>
+    <page-header-title :is-level-one="false" :level-two-title="workingGroupProject"></page-header-title>
     <a-card :bordered="false">
-    <!--    标题区域-->
-    <div class="title">
-      <a-icon type="left" :style="{ fontSize: '22px' }" @click="backWorkingGroupProject"></a-icon>
-      <span class="title-text">{{ workingGroupProject }}</span>
-    </div>
-    <div class="divider"></div>
-    <!--    /标题区域-->
-
       <!--    工作组信息区域-->
       <div class="work-group-detail">
         <div class="work-group-detail-item work-group-detail-item-small" v-for="item in detailTitleList"
@@ -82,9 +76,9 @@
             class="j-table-force-nowrap">
 
           <!--        工作组名称-->
-<!--        <template slot="projectName" slot-scope="text, record">-->
+          <!--        <template slot="projectName" slot-scope="text, record">-->
-<!--          <div class="project-name" @click="goMemberUnitMaintenance(record)">{{ text }}</div>-->
+          <!--          <div class="project-name" @click="goMemberUnitMaintenance(record)">{{ text }}</div>-->
-<!--        </template>-->
+          <!--        </template>-->
 
           <template slot="text" slot-scope="text,record">
             <j-ellipsis :value="text" :length="20"></j-ellipsis>
@@ -98,20 +92,22 @@
         </a-table>
       </div>
     </a-card>
+  </div>
 </template>
 
 <script>
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JYearDate from '@comp/jero/JYearDate'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
 
 export default {
   name: 'MemberUnitMaintenance',
-  components: { JYearDate },
+  components: { JYearDate, PageHeaderTitle },
   mixins: [JeroListMixin],
   computed: {
     importExcelUrl: function () {
       return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
-    },
+    }
   },
   data() {
     return {
@@ -193,12 +189,12 @@ export default {
           title: '应收金额',
           align: 'center',
           dataIndex: '',
-          width: 180,
+          width: 180
         }, {
           title: '实收金额',
           align: 'center',
           dataIndex: '',
-          width: 180,
+          width: 180
         }, {
           title: '打包',
           align: 'center',
@@ -233,7 +229,7 @@ export default {
           width: 180,
           scopedSlots: { customRender: 'action' }
         }
-      ],
+      ]
     }
   },
   created() {

src/views/projectManagement/WorkingGroupProjectManagement.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconWorkingGruop"></page-header-title>
     <a-card :bordered="false">
       <!--    查询区域-start -->
       <div class="table-page-search-wrapper">
@@ -11,7 +13,7 @@
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="负责人A" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <select-principal placeholder="请选择负责人" v-model="queryParam.principalId"></select-principal>
+                <select-principal placeholder="请选择负责人" v-model="queryParam.principalIdA"></select-principal>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -94,6 +96,7 @@
       <!--    /table表格区域-->
       <working-group-project-module ref="modalForm" @ok="modalFormOk"></working-group-project-module>
     </a-card>
+  </div>
 </template>
 
 <script>
@@ -102,13 +105,16 @@ import JYearDate from '@comp/jero/JYearDate'
 import WorkingGroupProjectModule from '@views/projectManagement/modules/WorkingGroupProjectModule'
 import SelectPrincipal from '@comp/company/SelectPrincipal'
 import ProgressBar from '@comp/ProgressBar'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import IconWorkingGruop from '@/assets/imgs/icon/icon_working_group.png'
 
 export default {
   name: 'WorkingGroupProjectManagement',
-  components: { JYearDate, WorkingGroupProjectModule, SelectPrincipal, ProgressBar },
+  components: { JYearDate, WorkingGroupProjectModule, SelectPrincipal, ProgressBar, PageHeaderTitle },
   mixins: [JeroListMixin],
   data() {
     return {
+      IconWorkingGruop,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }
@@ -118,12 +124,9 @@ export default {
         sm: { span: 10 }
       },
       url: {
-        list: '',
+        list: '/project/payWorkingGroup/list',
-        delete: '',
+        delete: '/project/payWorkingGroup/delete',
-        deleteBatch: '',
+        deleteBatch: '/project/payWorkingGroup/deleteBatch'
-        exportXlsUrl: '',
-        importExcelUrl: '',
-        downTemplateUrl: ''
       },
       columns: [
         {
@@ -147,7 +150,7 @@ export default {
         }, {
           title: '进度',
           align: 'center',
-          dataIndex: 'post',
+          dataIndex: 'obj',
           width: 250,
           scopedSlots: { customRender: 'rateOfProgress' }
         }, {
@@ -225,14 +228,14 @@ export default {
   }
 
   &-color {
-    width: 15px;
+    width: 13px;
-    height: 15px;
+    height: 13px;
     margin-right: 5px;
     border-radius: 2px;
   }
 
   &-pay-in-full {
-    background-color: rgb(7, 168, 161);
+    background: linear-gradient(0deg, #069f99 0%, #07b0a9 100%);
   }
 
   &-partial-payment {

src/views/projectManagement/modules/WorkingGroupProjectModule.vue

@@ -36,16 +36,14 @@
           <a-form-item label="负责人A" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <select-principal placeholder="请选择负责人A"
                               v-decorator="['principalIdA',validatorRules.principalIdA]"
-                              :maxLength='50'
+                              :maxLength='50'></select-principal>
-                              @change="e => {e.target.value = (e.target.value + '').trim()}"></select-principal>
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label="负责人B" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <select-principal placeholder="请选择负责人B"
                               v-decorator="['principalIdB',validatorRules.principalIdB]"
-                              :maxLength='50'
+                              :maxLength='50'></select-principal>
-                              @change="e => {e.target.value = (e.target.value + '').trim()}"></select-principal>
           </a-form-item>
         </a-col>
       </a-row>
@@ -93,7 +91,8 @@
         </a-col>
         <a-col :span="12">
           <a-form-item label="收费通知A" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <j-upload :number="1" file-type="word,pdf" v-decorator="['chargeNoticeAId']"
+            <j-upload file-type="pdf" file-type-error-message="请上传收费通知" :multiple="false" :number="1" :return-id="true"
+                      bizPath="payment" v-decorator="['chargeNoticeAId']"
                       :trigger-change="true"></j-upload>
           </a-form-item>
         </a-col>
@@ -115,16 +114,17 @@
       </a-row>
       <a-row>
         <a-col :span="12">
-          <a-form-item label="收费通知号A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-form-item label="收费通知号B" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="请输入收费通知号A"
+            <a-input placeholder="请输入收费通知号B"
                      v-decorator="['chargeNoticeNoB']"
                      :maxLength='50'
                      @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item label="收费通知A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-form-item label="收费通知B" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <j-upload :number="1" file-type="word,pdf" v-decorator="['chargeNoticeBId']"
+            <j-upload file-type="pdf" file-type-error-message="请上传收费通知" :multiple="false" :number="1" :return-id="true"
+                      bizPath="payment" v-decorator="['chargeNoticeBId']"
                       :trigger-change="true"></j-upload>
           </a-form-item>
         </a-col>
@@ -205,7 +205,10 @@ export default {
           validateTrigger: 'blur'
         }
       },
-      userList: [], // 用户列表
+      url: {
+        add: '/project/payWorkingGroup/add',
+        edit: '/project/payWorkingGroup/edit'
+      }
     }
   },
   methods: {
@@ -217,7 +220,7 @@ export default {
       this.model = Object.assign({}, record)
       this.visible = true
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.model, 'workingGroupProject', 'year', 'principalIdA', 'principalIdB', 'convokeNum', 'operationCycle', 'yearChargeA', 'chargeNoticeNoA', 'chargeNoticeAId', ''))
+        this.form.setFieldsValue(pick(this.model, 'workingGroupProject', 'year', 'principalIdA', 'principalIdB', 'convokeNum', 'operationCycle', 'yearChargeA', 'chargeNoticeNoA', 'chargeNoticeAId', 'yearChargeB', 'chargeNoticeNoB', 'chargeNoticeBId', 'missionAndObjectives', 'remarks'))
       })
     },
     close() {
@@ -236,6 +239,8 @@ export default {
           } else {
             httpurl += this.url.edit
           }
+          values.yearChargeA = values.yearChargeA ? Number(values.yearChargeA) : null
+          values.yearChargeB = values.yearChargeB ? Number(values.yearChargeB) : null
           const formData = Object.assign(this.model, values)
           console.log('表单提交数据', formData)
           httpAction(httpurl, formData, method).then((res) => {