选择企业组件修改；选择联系人组件；工作组项目页面；进度条组件

src/api/api.js

@@ -103,6 +103,9 @@ export const transitRESTful = {
   http: (url, parameter) => httpAction(getTransitURL(url), parameter),
 }
 
+// 通过企业名称获取该企业下的联系人
+const getContactsByCompany = (params) => getAction('/company/payContactsManagement/queryByCompany', params)
+
 export {
   addRole,
   editRole,
@@ -159,7 +162,8 @@ export {
   queryMyDepartTreeList,
   getUserNoticeInfo,
   getDictItemsFromCache,
-  resetUserPassword
+  resetUserPassword,
+  getContactsByCompany
 }
 
 

src/components/ProgressBar.vue

@@ -0,0 +1,80 @@
+<!--进度组件-->
+<template>
+  <div class="progress">
+    <!--    将全部付款和部分付款放入一个div中-->
+    <div class="full-and-partial"
+         :style="{width: (data.payInFull + data.partialPayment)/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}">
+      <div :style="{width: data.payInFull/(data.payInFull + data.partialPayment) * 100 + '%'}"
+           class="progress-item pay-in-full">
+        {{ data.payInFull }}
+      </div>
+      <div :style="{width: data.partialPayment/(data.payInFull + data.partialPayment) * 100 + '%'}"
+           class="progress-item partial-payment">
+        {{ data.partialPayment }}
+      </div>
+    </div>
+    <div :style="{width: data.nonPayment/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}"
+         class="progress-item non-payment">
+      {{ data.nonPayment }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    /**
+     * 进度字段，
+     * {
+     *   payInFull: 10, // 已付全款
+     *   partialPayment: 10, // 部分付款
+     *   nonPayment: 10, // 未付款
+     * }
+     */
+    data: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.progress {
+  border-radius: 10px;
+  background-color: rgb(232, 232, 232);
+  height: 20px;
+  width: 100%;
+  display: flex;
+}
+
+.full-and-partial {
+  background-color: rgb(0, 133, 192);
+  display: flex;
+  border-radius: 10px;
+}
+
+.progress-item {
+  border-radius: 10px;
+  color: white;
+  line-height: 20px;
+  text-align: center;
+}
+
+.pay-in-full {
+  background-color: rgb(7, 168, 161);
+}
+
+.partial-payment {
+  background-color: rgb(0, 133, 192);
+}
+
+.non-payment {
+  color: rgb(88,100,95);
+  background-color: rgb(232, 232, 232);
+}
+</style>

src/components/company/BusinessSelect.vue

@@ -75,6 +75,7 @@ export default {
         list: '/company/payCompanyManagement/list',
       },
       selectedCompany: {},
+      selectedRowKeys: [],
       columns: [
         {
           title: '序号',
@@ -116,6 +117,7 @@ export default {
     },
     onSelectChange(selectedRowKeys, selectionRows) {
       this.selectedCompany = selectionRows[0]
+      this.selectedRowKeys = selectedRowKeys
     }
   }
 }
@@ -123,10 +125,4 @@ export default {
 
 <style scoped lang="less">
 @import '~@assets/less/common.less';
-
-// 把表格单选样式改成实心圆
-/deep/ .ant-radio-input:focus + .ant-radio-inner {
-  background: #069f99;
-  border-radius: 100px;
-}
 </style>

src/components/company/CompanySelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="company-select">
     <a-input @click="chooseBusiness" :value="value[valueKey]" v-bind="$attrs"></a-input>
-    <business-select ref="businessSelect" @ok="handleOk"></business-select>
+    <business-select ref="businessSelect" @ok="handleOk" v-bind="$attrs"></business-select>
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
         return
       }
       this.$refs.businessSelect.visible = true
+      this.$refs.businessSelect.selectedRowKeys.push(this.value.id)
     },
     /**
      * 选中后抛出企业信息（id, companyName)

src/components/company/SelectContacts.vue

@@ -0,0 +1,99 @@
+<template>
+  <!--  在点击组件时获取联系人列表-->
+  <div>
+    <a-row>
+      <a-col :span="20">
+        <a-select :value="value" v-bind="$attrs" v-on="$listeners">
+          <a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="4" class="form-btn">
+        <a-button icon="plus" @click="addContacts"></a-button>
+      </a-col>
+    </a-row>
+    <contact-management-module ref="contactForm"
+                               is-company-disabled
+                               :selected-company="selectedCompany"
+                               v-on="$listeners">
+    </contact-management-module>
+  </div>
+</template>
+
+<script>
+import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
+import { getContactsByCompany } from '@api/api'
+
+export default {
+  name: 'SelectContacts',
+  components: { ContactManagementModule },
+  props: {
+    // 已选中的企业信息
+    selectedCompany: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    value: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      contactsList: [], // 该企业下联系人列表
+    }
+  },
+  watch: {
+    /**
+     * 选中企业发生变化时重新获取数据
+     */
+    selectedCompany: {
+      handler() {
+        this.getContactsList()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 获取联系人数据
+     */
+    getContactsList() {
+      if (this.selectedCompany) {
+        const params = {
+          companyName: this.selectedCompany.companyName
+        }
+        getContactsByCompany(params).then(res => {
+          this.contactsList = res.result
+        })
+      }
+    },
+    /**
+     * 新建联系人
+     */
+    addContacts() {
+      if (this.selectedCompany) {
+        this.$refs.contactForm.add()
+        this.$refs.contactForm.title = '新增'
+        this.$refs.contactForm.disableSubmit = false
+        return
+      }
+      this.$message.warn('请先选择来款企业再为该企业新建联系人')
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+.form-btn {
+  padding-top: 1px;
+  padding-left: 8px;
+}
+</style>

src/views/projectManagement/ConferenceMaintenance.vue

@@ -0,0 +1,123 @@
+<template>
+  <a-card>
+    <a-button @click="backWorkingGroupProject">返回</a-button>
+    <span>{{ workingGroupProject }}</span>
+    <!--    查询区域-->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="会议名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入会议名称" v-model="queryParam.workingGroupProject"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="8" :lg="12" :md="12" :sm="24">
+            <a-form-item label="会议时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-range-picker
+                  format="YYYY-MM-DD HH:mm:00"
+                  :show-time="{ format: 'HH:mm' }"
+                  v-model="queryParam.time"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="8" :lg="12" :md="12" :sm="24">
+            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-range-picker
+                  format="YYYY-MM-DD HH:mm:00"
+                  :show-time="{ format: 'HH:mm' }"
+                  v-model="queryParam.createTime"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-date show-type="year" date-format="YYYY" placeholder="请选择年份" v-model="queryParam.year"></j-date>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="已提醒" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-select placeholder="请选择已提醒"
+                        v-model="queryParam.remind"
+                        :maxLength='50'
+                        @change="e => {e.target.value = (e.target.value + '').trim()}">
+                <a-select-option v-for="item in list" :key="item.id" :value="item.id">{{ item.username }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--    /查询区域-->
+
+    <!--    操作按钮区域-->
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <a-button type="primary" icon="export" @click="handleExportXls('企业管理')">导出</a-button>
+      <a-button type="primary" icon="download" @click="downTemplate('企业管理导入模板')">下载模板</a-button>
+      <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
+    </div>
+    <!--    /操作按钮区域-end-->
+  </a-card>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import JDate from '@comp/jero/JDate'
+
+export default {
+  name: 'ConferenceMaintenance',
+  components: { JDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      workingGroupProject: '',
+      workingGroupProjectId: '',
+      list: [],
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: '',
+        importExcelUrl: '',
+        downTemplateUrl: ''
+      },
+    }
+  },
+  created() {
+    this.workingGroupProject = this.$route.query.workingGroupProject
+    this.workingGroupProjectId = this.$route.query.workingGroupProjectId
+  },
+  methods: {
+    backWorkingGroupProject() {
+      this.$router.push({
+        path: '/projectManagement/WorkingGroupProjectManagement'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>

src/views/projectManagement/WorkingGroupProjectManagement.vue

@@ -0,0 +1,201 @@
+<template>
+  <a-card :bordered="false">
+    <!--    查询区域-start -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="工作组项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入工作组项目" v-model="queryParam.workingGroupProject"></a-input>
+            </a-form-item>
+          </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>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-date show-type="year" date-format="YYYY" placeholder="请选择运行年份" v-model="queryParam.year"></j-date>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--    查询区域-end-->
+
+    <!--    操作按钮区域-->
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
+    </div>
+    <!--    操作按钮区域-end-->
+
+    <!--    table表格区域-->
+    <div>
+      <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :scroll="{x: 1000}"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" height="25px" alt=""
+               style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <j-ellipsis
+              @click.native="uploadFile(record.chargeNoticeFileId)"
+              style="color:#219AFF;cursor: pointer"
+              :value="text"
+              :length="20"/>
+        </template>
+
+        <!--        工作组名称-->
+        <template slot="projectName" slot-scope="text, record">
+          <div class="project-name">{{ text }}</div>
+        </template>
+
+        <!--        进度-->
+        <template slot="rateOfProgress" slot-scope="text, record">
+          <progress-bar :data="text"></progress-bar>
+        </template>
+
+        <template slot="text" slot-scope="text,record">
+          <j-ellipsis :value="text" :length="20"></j-ellipsis>
+        </template>
+
+        <span slot="action" class="action-span-cell" slot-scope="text, record">
+          <a @click="goConferenceMaintenance(record)">会议维护</a>
+          <a @click="handleEdit(record)">编辑</a>
+          <a @click="handleDelete(record.id)">删除</a>
+        </span>
+      </a-table>
+    </div>
+    <working-group-project-module ref="modalForm" @ok="modalFormOk"></working-group-project-module>
+  </a-card>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import JDate from '@comp/jero/JDate'
+import WorkingGroupProjectModule from '@views/projectManagement/modules/WorkingGroupProjectModule'
+import SelectPrincipal from '@comp/company/SelectPrincipal'
+import ProgressBar from '@comp/ProgressBar'
+
+export default {
+  name: 'WorkingGroupProjectManagement',
+  components: { JDate, WorkingGroupProjectModule, SelectPrincipal, ProgressBar },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: '',
+        importExcelUrl: '',
+        downTemplateUrl: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '工作组项目',
+          align: 'center',
+          dataIndex: 'workingGroupProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '负责人A',
+          align: 'center',
+          dataIndex: 'principalNameA'
+        }, {
+          title: '进度',
+          align: 'center',
+          dataIndex: 'post',
+          width: 250,
+          scopedSlots: { customRender: 'rateOfProgress' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 180,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workingGroupProject: '2021标准工作组',
+          post: {
+            payInFull: 10,
+            partialPayment: 8,
+            nonPayment: 12,
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    /**
+     * 会议维护
+     * @param record
+     */
+    goConferenceMaintenance(record) {
+      this.$router.push({
+        path: '/projectManagement/ConferenceMaintenance',
+        query: {
+          workingGroupProject: record.workingGroupProject,
+          workingGroupProjectId: record.id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+.project-name {
+  color: #069f99;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

src/views/projectManagement/modules/GeneralProjectModule.vue

@@ -31,12 +31,6 @@
             <select-principal placeholder="请选择负责人"
                               v-decorator="['principalId',validatorRules.principalId]"
                               :maxLength='50'></select-principal>
-<!--            <a-select placeholder="请选择负责人"-->
-<!--                      v-decorator="['principalId',validatorRules.principalId]"-->
-<!--                      :maxLength='50'-->
-<!--                      @change="e => {e.target.value = (e.target.value + '').trim()}">-->
-<!--              <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.username }}</a-select-option>-->
-<!--            </a-select>-->
           </a-form-item>
         </a-col>
       </a-row>
@@ -44,7 +38,7 @@
         <a-col :xl="12" :sm="24">
           <a-form-item label="来款企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <company-select placeholder="请选择来款企业"
-                            v-decorator="['chargeCompanyName',validatorRules.chargeCompanyName]"
+                            v-decorator="['chargeCompany',validatorRules.chargeCompany]"
                             @change="companyChange"
                             :maxLength='50'>
             </company-select>
@@ -60,36 +54,22 @@
       <a-row>
         <a-col :xl="12" :sm="24">
           <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-row>
-              <a-col :span="20">
-                <a-select placeholder="请选择联系人"
-                          v-decorator="['contactsId',validatorRules.contactsId]"
-                          :maxLength='50'
-                          @change="e => {e.target.value = (e.target.value + '').trim()}">
-                  <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.contactsName }}</a-select-option>
-                </a-select>
-              </a-col>
-              <a-col :span="4" class="form-btn">
-                <a-button icon="plus" @click="addContacts"></a-button>
-              </a-col>
-            </a-row>
+            <select-contacts :selected-company="selectedCompany"
+                             placeholder="请选择联系人"
+                             v-decorator="['contactsId',validatorRules.contactsId]"
+                             :maxLength='50'
+                             ref="selectContacts"
+                             @ok="addContactsOk"></select-contacts>
           </a-form-item>
         </a-col>
         <a-col :xl="12" :sm="24">
           <a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-row>
-              <a-col :span="20">
-                <a-select placeholder="请选择邮寄联系人"
-                          v-decorator="['mailContactsId',validatorRules.mailContactsId]"
-                          :maxLength='50'
-                          @change="e => {e.target.value = (e.target.value + '').trim()}">
-                  <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ item.mailContactsName }}</a-select-option>
-                </a-select>
-              </a-col>
-              <a-col :span="4" class="form-btn">
-                <a-button icon="plus" @click="addContacts"></a-button>
-              </a-col>
-            </a-row>
+            <select-contacts :selected-company="selectedCompany"
+                             placeholder="请选择邮寄联系人"
+                             v-decorator="['mailContactsId',validatorRules.mailContactsId]"
+                             :maxLength='50'
+                             ref="selectMailContacts"
+                             @ok="addContactsOk"></select-contacts>
           </a-form-item>
         </a-col>
       </a-row>
@@ -132,7 +112,7 @@
           </a-form-item>
         </a-col>
         <a-col :xl="12" :sm="24">
-          <a-form-item label="合同号" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="chargeWayType === 2">
+          <a-form-item label="合同号" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="chargeWayType === 2">
             <a-input placeholder="请输入合同号"
                      v-decorator="['contractNum',validatorRules.contractNum]"
                      :maxLength='50'
@@ -140,7 +120,7 @@
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-show="chargeWayType === 3">
+      <a-row v-if="chargeWayType === 3">
         <a-col :xl="12" :sm="24">
           <a-form-item label="收费通知号" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input placeholder="请输入收费通知号"
@@ -169,7 +149,6 @@
         </a-col>
       </a-row>
     </a-form>
-    <contact-management-module ref="contactForm" is-company-disabled :selected-company="selectedCompany"></contact-management-module>
   </j-modal>
 </template>
 
@@ -181,10 +160,11 @@ import JUpload from '@comp/jero/JUpload'
 import CompanySelect from '@comp/company/CompanySelect'
 import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
 import SelectPrincipal from '@comp/company/SelectPrincipal'
+import SelectContacts from '@comp/company/SelectContacts'
 
 export default {
   name: 'GeneralProjectModule',
-  components: { JDate, JUpload, CompanySelect, ContactManagementModule, SelectPrincipal },
+  components: { JDate, JUpload, CompanySelect, ContactManagementModule, SelectPrincipal, SelectContacts },
   data() {
     return {
       title: '操作',
@@ -219,7 +199,7 @@ export default {
         principalId: {
           rules: [{ required: true, message: '请选择负责人' }]
         },
-        chargeCompanyName: {
+        chargeCompany: {
           rules: [{ required: true, message: '请选择来款企业' }]
         },
         chargeUse: {
@@ -261,7 +241,7 @@ export default {
       this.model = Object.assign({}, record)
       this.visible = true
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.model, 'chargeProject', 'year', 'principalId', 'chargeCompanyName', 'chargeUse', 'contactsId', 'mailContactsId', 'receivableAmount', 'invoice', 'chargeWay', 'contractNum', 'chargeNoticeNo', 'remarks'))
+        this.form.setFieldsValue(pick(this.model, 'chargeProject', 'year', 'principalId', 'chargeCompany', 'chargeUse', 'contactsId', 'mailContactsId', 'receivableAmount', 'invoice', 'chargeWay', 'contractNum', 'chargeNoticeNo', 'remarks'))
       })
     },
     close() {
@@ -273,14 +253,14 @@ export default {
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
+          values.chargeCompanyName = values.chargeCompany.companyName
+          values.chargeCompanyId = values.chargeCompany.id
           let httpurl = ''
-          let method = ''
+          let method = 'post'
           if (!this.model.id) {
             httpurl += this.url.add
-            method = 'post'
           } else {
             httpurl += this.url.edit
-            method = 'put'
           }
           const formData = Object.assign(this.model, values)
           console.log('表单提交数据', formData)
@@ -308,25 +288,30 @@ export default {
     handlechargeWayChange(e) {
       this.chargeWayType = e.target.value
     },
+    /**
+     * 选中企业变化，将联系人的值清空
+     * @param value
+     */
     companyChange(value) {
+      console.log(1)
       this.selectedCompany = value
+      this.model.contactsId = undefined
+      this.model.mailContactsId = undefined
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'contactsId', 'mailContactsId'))
+      })
     },
-    addContacts() {
-      if (this.selectedCompany) {
-        this.$refs.contactForm.add()
-        this.$refs.contactForm.title = "新增";
-        this.$refs.contactForm.disableSubmit = false;
-        return
-      }
-      this.$message.warn('请先选择来款企业再为该企业新建联系人')
+    /**
+     * 在新增成功后重新获取联系人列表
+     */
+    addContactsOk() {
+      this.$refs.selectContacts.getContactsList()
+      this.$refs.selectMailContacts.getContactsList()
     }
   }
 }
 </script>
 
 <style scoped>
-.form-btn {
-  padding-top: 1px;
-  padding-left: 8px;
-}
+
 </style>

src/views/projectManagement/modules/WorkingGroupProjectModule.vue

@@ -0,0 +1,267 @@
+<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      switchFullscreen
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <span class="prompt-message">
+      说明：1.负责人A为该工作组的主负责人，负责人B为该工作组的辅助负责人。<br>
+      <span class="prompt-message-line2">2.设置本年应收款A和本年应收款B是为了区分工作组成员的价格。</span>
+    </span>
+    <a-form :form="form">
+      <a-row>
+        <a-col :span="24" >
+          <a-form-item label="工作组项目" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <a-input placeholder="请输入项目名称"
+                     v-decorator="['workingGroupProject',validatorRules.workingGroupProject]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-date show-type="year" date-format="YYYY" placeholder="请选择运行年份"
+                    v-decorator="['year',validatorRules.year]"></j-date>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="负责人A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <select-principal placeholder="请选择负责人A"
+                              v-decorator="['principalIdA',validatorRules.principalIdA]"
+                              :maxLength='50'
+                              @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'
+                              @change="e => {e.target.value = (e.target.value + '').trim()}"></select-principal>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="每年召开次数" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入每年召开次数"
+                     v-decorator="['convokeNum']"
+                     :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="运行周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入运行周期"
+                     v-decorator="['operationCycle']"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="本年应收款A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-row>
+              <a-col :span="20">
+                <a-input placeholder="请输入金额"
+                         v-decorator="['yearChargeA']"
+                         :maxLength='50'
+                         @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+              </a-col>
+              <a-col :span="4">元/人</a-col>
+            </a-row>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="收费通知号A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入收费通知号A"
+                     v-decorator="['chargeNoticeNoA']"
+                     :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">
+            <j-upload :number="1" file-type="word,pdf" v-decorator="['chargeNoticeAId']"
+                      :trigger-change="true"></j-upload>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="本年应收款B" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-row>
+              <a-col :span="20">
+                <a-input placeholder="请输入金额"
+                         v-decorator="['yearChargeB']"
+                         :maxLength='50'
+                         @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+              </a-col>
+              <a-col :span="4">元/人</a-col>
+            </a-row>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="收费通知号A" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入收费通知号A"
+                     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">
+            <j-upload :number="1" file-type="word,pdf" v-decorator="['chargeNoticeBId']"
+                      :trigger-change="true"></j-upload>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <a-form-item label="任务及目标" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <a-textarea
+                placeholder="请输入任务及目标"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                v-decorator="['missionAndObjectives']"
+                :maxLength='300'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <a-textarea
+                placeholder="请输入备注"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                v-decorator="['remarks']"
+                :maxLength='300'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { httpAction } from '@api/manage'
+import JUpload from '@comp/jero/JUpload'
+import JDate from '@comp/jero/JDate'
+import SelectPrincipal from '@comp/company/SelectPrincipal'
+
+export default {
+  name: 'WorkingGroupProjectModule',
+  components: { JUpload, JDate, SelectPrincipal },
+  data() {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 21 }
+      },
+      validatorRules: {
+        workingGroupProject: {
+          rules: [{ required: true, message: '请输入项目名称' }]
+        },
+        year: {
+          rules: [{ required: true, message: '请选择运行年份' }]
+        },
+        principalIdA: {
+          rules: [{ required: true, message: '请选择负责人A' }]
+        }
+      },
+      userList: [], // 用户列表
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.form.resetFields()
+      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', ''))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let httpurl = ''
+          let method = 'post'
+          if (!this.model.id) {
+            httpurl += this.url.add
+          } else {
+            httpurl += this.url.edit
+          }
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.prompt-message {
+  color: red;
+
+  &-line2 {
+    padding-left: 2.7rem;
+  }
+}
+</style>