[update] 支出合同接口联调;打包、打包成员维护页面;企业选择组件只读

2021-09-08 19:16:13 +08:00
parent 5372161e2f
commit dff860c5be
17 changed files with 1604 additions and 48 deletions
@@ -26,6 +26,8 @@ const archiveRevenueContract = (param) => postAction('contract/payIncomeContract
 const queryUserByDepartId = (param) => getAction('/sys/user/listRoleAndDepart', param)
 // 企业联系人新建重名校验
 const queryContactByName = (param) => getAction('/company/payContactsManagement/queryByName', param)
+// 通过id获取支出合同信息
+const getExpenditureContractById = (param) => getAction('/contract/paySpendingContract/queryById', param)

 export {
 	getWorkingGroupById,
@@ -40,5 +42,6 @@ export {
  getWorkingGroupListByNotCompany,
  archiveRevenueContract,
  queryUserByDepartId,
-  queryContactByName
+  queryContactByName,
+  getExpenditureContractById
 }
@@ -1,6 +1,6 @@
 <template>
  <div class="company-select">
-    <a-input @click="chooseBusiness" :value="value[valueKey]" v-bind="$attrs"></a-input>
+    <a-input @click="chooseBusiness" :value="value[valueKey]" v-bind="$attrs" :readOnly="true"></a-input>
    <business-select ref="businessSelect" @ok="handleOk" v-bind="$attrs"></business-select>
  </div>
 </template>
@@ -69,3 +69,12 @@ export function taxNo(s) {
 export function number(s) {
 	return /^[0-9]*$/.test(s)
 }
+
+/**
+ * 金额格式，小数点后两位
+ * @param s
+ * @returns {boolean}
+ */
+export function money(s) {
+  return /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/.test(s)
+}
@@ -53,8 +53,8 @@
                  @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="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-->
@@ -80,7 +80,7 @@
          </template>

          <span slot="action" class="action-span-cell" slot-scope="text, record">
-            <a @click="handleEdit(record)">编辑</a>
+            <a @click="handleEdit(record.id)">编辑</a>
            <a @click="handleDelete(record.id)">删除</a>
          </span>
        </a-table>
@@ -177,9 +177,9 @@ export default {
        list: '/contract/paySpendingContract/list',
        delete: '/contract/paySpendingContract/delete',
        deleteBatch: '/contract/paySpendingContract/deleteBatch',
-        exportXlsUrl: '',
-        importExcelUrl: '',
-        downTemplateUrl: ''
+        exportXlsUrl: '/contract/paySpendingContract/exportXls',
+        importExcelUrl: '/contract/paySpendingContract/importExcel',
+        downTemplateUrl: '/contract/paySpendingContract/downloadExcelModel'
      }
    }
  },
@@ -189,12 +189,11 @@ export default {
        path: '/contractManagement/RevenueContractModule'
      })
    },
-    handleEdit(id, contractNum) {
+    handleEdit(id) {
      this.$router.push({
        path: '/contractManagement/RevenueContractModule',
        query: {
-          contractId: id,
-          contractNum: contractNum
+          contractId: id
        }
      })
    }
@@ -33,7 +33,7 @@
                                  @change="handleSignedCompanyChange"></company-select>
                </a-form-item>
              </a-col>
-              <a-col :xxl="6" :xl="8" :sm="12">
+              <a-col :xxl="6" :xl="8" :sm="12" style="margin-bottom: 0">
                <a-form-item label="签订联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <select-contacts placeholder="请选择签订联系人"
                                   :selected-company="selectedCompany"
@@ -230,13 +230,13 @@

 <script>
 import PageHeaderTitle from '../../../../components/layouts/PageHeaderTitle'
-import { getRevenueContractById } from '../../../../api/incomePaymentsApi'
+import { getExpenditureContractById } from '../../../../api/incomePaymentsApi'
 import pick from 'lodash.pick'
 import InstallmentForm from '../../../../components/form/InstallmentForm'
 import CompanySelect from '../../../../components/company/CompanySelect'
 import SelectContacts from '../../../../components/company/SelectContacts'
 import SelectPrincipal from '../../../../components/company/SelectPrincipal'
-import { getAllUserList } from '../../../../api/api'
+import { duplicateCheck, getAllUserList } from '../../../../api/api'
 import { postAction } from '../../../../api/manage'
 import JDate from '../../../../components/tools/JDate'
 import JYearDate from '../../../../components/jero/JYearDate'
@@ -305,7 +305,7 @@ export default {
        },
        pack: {
          rules: [{ required: true, message: '请选择是否打包' }],
-          validateTrigger: 'blur'
+          validateTrigger: 'change'
        }
      },
      url: {
@@ -333,26 +333,29 @@ export default {
      const param = {
        id: id
      }
-      getRevenueContractById(param).then(res => {
-        let record
-        record = res.result
-        this.isSaved = true
-        record.signedCompany = {
-          id: record.signedCompanyId,
-          companyName: record.signedCompanyTemporaryName
+      getExpenditureContractById(param).then(res => {
+        if (res.success) {
+          let record
+          record = res.result
+          record.signedCompany = {
+            id: record.signedCompanyTemporaryId,
+            companyName: record.signedCompanyTemporaryName
+          }
+          this.selectedCompany = record.signedCompany
+          record.signedContactsId = record.signedContactsTemporaryId
+          this.selectedContact = {
+            id: record.signedContactsTemporaryId,
+            name: record.signedContactsTemporaryName
+          }
+          this.$refs.installmentForm.initInstallmentList(record.listInstallment)
+          this.model = Object.assign({}, record)
+          this.$nextTick(() => {
+            this.form.setFieldsValue(pick(this.model, 'contractNum', 'contractName', 'signedCompany', 'signedContactsId', 'opening', 'principalId', 'departmentName', 'contractAmount', 'rate', 'noTaxAmount', 'contractDate', 'terminationDate', 'contractTimePoints', 'accountsReceivableAmount', 'amountReceived', 'outstandingAmount', 'accountStatus', 'contractPaymentTimes', 'pack', 'packYear'))
+            this.confirmLoading = false
+          })
+        } else {
+          console.log(res.message)
        }
-        this.selectedCompany = record.signedCompany
-        record.signedContactsId = record.signedContactsTemporaryId
-        this.selectedContact = {
-          id: record.signedContactsTemporaryId,
-          name: record.signedContactsTemporaryName
-        }
-        this.$refs.installmentForm.initInstallmentList(record.listInstallment)
-        this.model = Object.assign({}, record)
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model, 'contractNum', 'contractName', 'signedCompany', 'signedContactsId', 'opening', 'principalId', 'departmentName', 'contractAmount', 'rate', 'noTaxAmount', 'contractDate', 'terminationDate', 'contractTimePoints', 'accountsReceivableAmount', 'amountReceived', 'outstandingAmount', 'accountStatus', 'contractPaymentTimes', 'pack', 'packYear'))
-          this.confirmLoading = false
-        })
      })
    },
    /**
@@ -382,8 +385,10 @@ export default {
                this.contractId = res.result.id
                this.edit(this.contractId)
                this.$message.success(res.message)
-                // 保存上方表单信息，（应该在表单验证完全正确时置为true）
-                this.isSaved = true
+                // 跳转至支出合同list页面
+                this.$router.push({
+                  path: '/contractManagement/ExpenditureContract'
+                })
              } else {
                this.$message.warning(res.message)
              }
@@ -402,6 +407,60 @@ export default {
    installmentFormOk(value) {
      this.installmentList = value.installmentList
    },
+    /**
+     * 合同编号唯一性校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkContractNum(rules, value, callback) {
+      if (value) {
+        if (!this.model.id) {
+          const params = {
+            confusionCode: 'pay_spending_contract_num',
+            fieldVal: value
+          }
+          duplicateCheck(params).then(res => {
+            if (res.success) {
+              callback()
+            } else {
+              callback('合同编号已存在')
+            }
+          })
+          return
+        }
+        callback()
+      } else {
+        callback('请输入合同编号')
+      }
+    },
+    /**
+     * 合同名称唯一性校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkContractName(rules, value, callback) {
+      if (value) {
+        if (!this.model.id) {
+          const params = {
+            confusionCode: 'pay_spending_contract_name',
+            fieldVal: value
+          }
+          duplicateCheck(params).then(res => {
+            if (res.success) {
+              callback()
+            } else {
+              callback('合同名称已存在')
+            }
+          })
+          return
+        }
+        callback()
+      } else {
+        callback('请输入合同名称')
+      }
+    },
    /**
     * 选中企业变化
     * @param value
@@ -275,7 +275,7 @@ export default {
     * @returns {string}
     */
    aduitClass(record) {
-      if (record.status === 2 || record.status === 4) {
+      if (record.chargeStatus === 1) {
        return 'aduit'
      }
      return ''
@@ -274,7 +274,7 @@ import SelectProjectModule from './SelectProjectModule'
 import pick from 'lodash.pick'
 import { getAllUserList } from '../../../../api/api'
 import { postAction } from '../../../../api/manage'
-import { getRevenueContractById } from '../../../../api/incomePaymentsApi'
+import { getRevenueContractById, queryUserByDepartId } from '../../../../api/incomePaymentsApi'
 import { duplicateCheck } from '../../../../api/api'
 import AssociatedProject from './AssociatedProject'
 import SelectMeetingProjectModule from './SelectMeetingProjectModule'
@@ -476,17 +476,18 @@ export default {
      selectedCompany: null, // 选中的企业
      installmentList: [],
      isSaved: false, // 是否保存上方数据
-      isPackage: false,
+      isPackage: false, // 是否打包，控制打包年份显隐
      accountsReceivableNum: null, // 输入的应收金额
      amountReceivedNum: null, // 输入的未收金额
      contractAmountNum: null, // 输入的签订合同总金额
      rateNum: null, // 输入的税率
-      selectedContact: null,
+      selectedContact: null, // 联系人回显
      associatedProjectLoading: false,
      contractId: '' // 收入合同id
    }
  },
  mounted() {
+    // 判断是编辑还是新增
    if (this.$route.query.hasOwnProperty.call(this.$route.query, 'revenueId')) {
      this.contractId = this.$route.query.revenueId
      this.edit(this.contractId)
@@ -505,21 +506,28 @@ export default {
      const param = {
        id: id
      }
+      // 通过id获取合同信息
      getRevenueContractById(param).then(res => {
        let record
        record = res.result
        this.isSaved = true
+        // 处理企业信息回显
        record.signedCompany = {
          id: record.signedCompanyId,
          companyName: record.signedCompanyTemporaryName
        }
        this.selectedCompany = record.signedCompany
+        // 处理联系人信息回显
        record.signedContactsId = record.signedContactsTemporaryId
        this.selectedContact = {
          id: record.signedContactsTemporaryId,
          name: record.signedContactsTemporaryName
        }
+        // 处理分期信息回显
        this.$refs.installmentForm.initInstallmentList(record.listInstallment)
+        // 获取应收金额和已收金额
+        this.accountsReceivableNum = record.accountsReceivableAmount
+        this.amountReceivedNum = record.amountReceived
        this.model = Object.assign({}, record)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'contractNum', 'contractName', 'signedCompany', 'signedContactsId', 'opening', 'principalId', 'departmentName', 'contractAmount', 'rate', 'noTaxAmount', 'contractDate', 'terminationDate', 'contractTimePoints', 'accountsReceivableAmount', 'amountReceived', 'outstandingAmount', 'accountStatus', 'contractPaymentTimes', 'pack', 'packYear'))
@@ -536,6 +544,7 @@ export default {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
+          // 分期信息存在时可以提交
          if (this.installmentList && this.installmentList.length > 0) {
            let formData = {}
            values.signedCompanyId = values.signedCompany.id
@@ -575,7 +584,7 @@ export default {
      this.installmentList = value.installmentList
    },
    /**
-     * 选中企业变化
+     * 选中企业变化, 清空已选联系人信息
     * @param value
     */
    handleSignedCompanyChange(value) {
@@ -667,10 +676,13 @@ export default {
    calculateOutstandingAmount() {
      if (this.accountsReceivableNum !== null && this.amountReceivedNum !== null) {
        this.model.outstandingAmount = Number(this.accountsReceivableNum) - Number(this.amountReceivedNum)
-        if (this.model.outstandingAmount === 0) {
+        // 未收金额 === 0，已付全款状态
+        if (this.model.outstandingAmount <= 0) {
          this.model.accountStatus = '3'
+          // 未收金额 > 0 且 未收金额 < 应收金额，部分付款状态
        } else if (this.model.outstandingAmount > 0 && this.model.outstandingAmount < Number(this.accountsReceivableNum)) {
          this.model.accountStatus = '2'
+          // 未收金额 === 应收金额，未付款状态
        } else if (this.model.outstandingAmount === Number(this.accountsReceivableNum)) {
          this.model.accountStatus = '1'
        }
@@ -746,11 +758,14 @@ export default {
    selectProjectTypeOk(type) {
      let title = ''
      switch (type) {
+        // 普通项目
        case 1:
          this.$refs.selectProjectModule.columns = generalProjectColumns
+          this.getUserDetailByUserId()
          this.$refs.selectProjectModule.filters = {
            chargeCompanyId: this.selectedCompany.id,
-            pack: this.model.pack
+            pack: this.model.pack,
+            // contractId: this.contractId
          }
          this.$refs.selectProjectModule.url.list = this.url.generalProjectList
          title = '普通项目列表'
@@ -759,8 +774,8 @@ export default {
          this.$refs.selectProjectModule.projectType = type
          this.$refs.selectProjectModule.title = title
          this.$refs.selectProjectModule.open()
-
          break
+        // 工作组项目
        case 2:
          this.$refs.selectProjectModule.columns = workingProjectColumns
          this.$refs.selectProjectModule.filters = {
@@ -774,9 +789,11 @@ export default {
          this.$refs.selectProjectModule.open()
          title = '工作组项目列表'
          break
+        // 会议项目
        case 3:
          this.$refs.selectMeetingProjectModule.open()
          break
+        // 会员项目
        case 4:
          this.$refs.selectMemberProjectModule.open()
          break
@@ -784,7 +801,17 @@ export default {


    },
-
+    /**
+     * 通过用户id获取用户信息
+     */
+    getUserDetailByUserId() {
+      let param = {
+        id: this.model.principalId
+      }
+      queryUserByDepartId(param).then(res => {
+        console.log(res)
+      })
+    },
    /**
     * 项目选中回调
     */
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
+    <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.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择打包年份" v-model="queryParam.packYear"></j-year-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" @click="searchReset" class="reset-button">重置</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-button type="primary" icon="export" @click="handleExportXls('企业管理')">导出</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: 1300}"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color" @click="toProjectMaintenance(record)"></j-ellipsis>
+          </template>
+
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+            <a @click="handleEdit(record)">编辑</a>
+            <a @click="handleDelete(record.id)">删除</a>
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+    <pack-company-module ref="modalForm" @ok="modalFormOk"></pack-company-module>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_pack_list.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import JYearDate from '../../components/jero/JYearDate'
+import { JeroListMixin } from '../../mixins/JeroListMixin'
+import PackCompanyModule from './modules/PackCompanyModule'
+
+export default {
+  name: 'PackCompanyList',
+  components: { PageHeaderTitle, JYearDate, PackCompanyModule },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '企业名称',
+          align: 'center',
+          width: 200,
+          dataIndex: 'companyTemporaryName',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '企业联系人',
+          align: 'center',
+          width: 180,
+          dataIndex: 'companyContactTemporaryName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '打包联系人',
+          align: 'center',
+          width: 200,
+          dataIndex: 'packContactTemporaryName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '打包费用总计',
+          align: 'center',
+          dataIndex: 'packChargeTotal'
+        }, {
+          title: '实际到账费用',
+          align: 'center',
+          dataIndex: 'receiptExpense'
+        }, {
+          title: '打包年份',
+          align: 'center',
+          width: 140,
+          dataIndex: 'packYear',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          companyTemporaryName: '企业名称'
+        }
+      ],
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: ''
+      }
+    }
+  },
+  methods: {
+    /**
+     * 跳转至打包企业维护页面
+     * 路由参数---打包企业的id
+     * @param record
+     */
+    toProjectMaintenance(record) {
+      this.$router.push({
+        path: '/packManagement/PackProjectMaintenance',
+        query: {
+          packCompanyId: record.id,
+          packCompanyName: record.companyTemporaryName
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>
@@ -0,0 +1,376 @@
+<template>
+  <div>
+    <page-header-title :is-level-one="false" :img-for-icon="IconImg"
+                       :level-two-title="$route.query.packCompanyName"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--      企业信息-->
+      <div class="part-title">
+        <div class="part-title-text">企业信息</div>
+      </div>
+      <div class="company-detail">
+        <div class="company-detail-item company-detail-item-small"
+             v-for="(item, index) in companyDataField"
+             :key="index">
+          <div class="company-detail-item-title">{{ item.title }}：</div>
+          <div class="company-detail-item-content">{{ companyDataById[item.dataIndex] }}</div>
+        </div>
+        <div class="company-detail-item">
+          <div class="company-detail-item-title">打包费用说明：</div>
+          <div class="company-detail-item-content">{{ companyDataById.packChargeRemark }}</div>
+        </div>
+        <div class="company-detail-item">
+          <div class="company-detail-item-title">备注：</div>
+          <div class="company-detail-item-content">{{ companyDataById.remark }}</div>
+        </div>
+      </div>
+      <!--      /企业信息-->
+
+      <a-divider></a-divider>
+
+      <!--      项目信息-->
+      <div class="part-title">
+        <div class="part-title-text">项目信息</div>
+      </div>
+
+      <!--    查询区域-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.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.packYear"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择打包年份" v-model="queryParam.packYear"></j-year-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" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--      /查询区域-->
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="plus" @click="handlePack">打包</a-button>
+        <a-button type="danger" icon="close-circle" @click="batchCancelPack">批量取消打包</a-button>
+        <a-button type="primary" icon="pay-circle" @click="batchIncomePayment">批量来款</a-button>
+        <a-button type="primary" icon="file-text" @click="batchInvoicing">批量开票</a-button>
+        <a-button type="primary" icon="export" @click="handleExportXls('企业管理')">导出</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="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color" @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <!--        打包、需要发票、到账、开票、邮寄状态-->
+          <template slot="status" slot-scope="text,record">
+            <status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
+          </template>
+
+          <template slot="status-pack" slot-scope="text,record">
+            <status-slot :statu-obj="record" :status-no="text"></status-slot>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+            <a @click="incomePayment(record.id)">来款</a>
+            <a @click="cancelPack(record.id)">取消打包</a>
+            <a @click="invoicing(record.id)">开票</a>
+          </span>
+        </a-table>
+      </div>
+      <!--      /项目信息-->
+    </a-card>
+
+    <!--    打包-->
+    <pack-project-select-project-module ref="selectPackProjectModal"
+                                        @ok="modalFormOk"></pack-project-select-project-module>
+    <!--    批量来款-->
+    <batch-income-payment-module ref="batchIncomePaymentModal" @ok="modalFormOk"></batch-income-payment-module>
+    <!--    批量开票-->
+    <batch-invoicing-module ref="batchInvoicingModal" @ok="modalFormOk"></batch-invoicing-module>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_pack_project_maintenance.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../mixins/JeroListMixin'
+import JYearDate from '../../components/jero/JYearDate'
+import StatusSlot from '../../components/tools/StatusSlot'
+import PackProjectSelectProjectModule from './modules/PackProjectSelectProjectModule'
+import BatchIncomePaymentModule from './modules/BatchIncomePaymentModule'
+import BatchInvoicingModule from './modules/BatchInvoicingModule'
+
+export default {
+  name: 'PackProjectMaintenance',
+  components: {
+    PageHeaderTitle,
+    JYearDate,
+    StatusSlot,
+    PackProjectSelectProjectModule,
+    BatchIncomePaymentModule,
+    BatchInvoicingModule
+  },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      companyDataField: [
+        {
+          title: '企业名称',
+          dataIndex: 'companyTemporaryName'
+        }, {
+          title: '企业联系人',
+          dataIndex: 'companyContactTemporaryName'
+        }, {
+          title: '手机号',
+          dataIndex: 'phone'
+        }, {
+          title: '邮箱',
+          dataIndex: 'mail'
+        }, {
+          title: '打包费用总计',
+          dataIndex: 'packChargeTotal'
+        }, {
+          title: '实际到账费用',
+          dataIndex: 'receiptExpense'
+        }, {
+          title: '已开票金额',
+          dataIndex: ''
+        }, {
+          title: '已来款未开票金额',
+          dataIndex: ''
+        }, {
+          title: '打包年份',
+          dataIndex: 'packYear'
+        }
+      ], // 企业信息名称字段对应
+      companyDataById: {}, // 通过id获取的企业信息
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '打包项目名称',
+          align: 'center',
+          width: 200,
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '企业联系人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'contactsTemporaryName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '联系人电话',
+          align: 'center',
+          width: 200,
+          dataIndex: 'phone',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '联系人邮箱',
+          align: 'center',
+          width: 200,
+          dataIndex: 'email',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '打包',
+          align: 'center',
+          width: 80,
+          dataIndex: 'pack',
+          scopedSlots: { customRender: 'status-pack' }
+        }, {
+          title: '需要发票',
+          align: 'center',
+          width: 80,
+          dataIndex: 'needInvoice',
+          scopedSlots: { customRender: 'status-pack' }
+        }, {
+          title: '到账',
+          align: 'center',
+          width: 80,
+          dataIndex: 'inAccount',
+          scopedSlots: { customRender: 'status' }
+        }, {
+          title: '开票',
+          align: 'center',
+          width: 80,
+          dataIndex: 'makeInvoice',
+          scopedSlots: { customRender: 'status' }
+        }, {
+          title: '邮寄',
+          align: 'center',
+          width: 80,
+          dataIndex: 'mail',
+          scopedSlots: { customRender: 'status' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '',
+        exportXlsUrl: ''
+      }
+    }
+  },
+  methods: {
+    /**
+     * 添加打包项目
+     */
+    handlePack() {
+      this.$refs.selectPackProjectModal.open()
+    },
+    /**
+     * 批量取消打包
+     */
+    batchCancelPack() {
+      if (this.selectedRowKeys.length === 0) {
+        this.$message.warn('请至少选中一个项目')
+        return
+      }
+      this.$confirm({
+        title: '确认取消打包',
+        content: '确定要取消选中项目的打包状态吗?',
+        onOk: function () {
+          console.log('批量取消打包')
+        }
+      })
+    },
+    /**
+     * 批量来款
+     */
+    batchIncomePayment() {
+      this.$refs.batchIncomePaymentModal.open()
+    },
+    /**
+     * 批量开票
+     */
+    batchInvoicing() {
+      this.$refs.batchInvoicingModal.open()
+    },
+    incomePayment() {
+
+    },
+    cancelPack() {
+
+    },
+    invoicing() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+.company-detail {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 20px;
+
+  &-item-small {
+    width: 33.3% !important;
+  }
+
+  &-item {
+    display: flex;
+    padding: 5px 5px;
+    width: 100%;
+    font-size: 14px;
+
+    &-title {
+      flex-shrink: 0;
+      color: #999999;
+    }
+
+    &-content {
+      word-break: break-all;
+      color: #2F3133;
+    }
+
+    &-filename {
+      cursor: pointer;
+      color: #069f99;
+    }
+  }
+}
+
+.ant-divider-horizontal {
+  height: 1px;
+  background-color: #F2F2F2;
+  margin: 15px 0px;
+}
+</style>
@@ -0,0 +1,265 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="来款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入来款金额"
+                       v-decorator="['incomingAmount', validatorRules.incomingAmount]"
+                       :maxLength='50'
+                       @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"
+                       @blur="incomingAmountBlur"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="来款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-date placeholder="请选择来款日期"
+                      style="width: 100%;"
+                      v-decorator="['paymentDate', validatorRules.paymentDate]"
+                      :trigger-change="true"
+                      date-format="YYYY-MM-DD"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!--      /查询区域-->
+
+      <!--      表格区域-->
+      <div>
+        <!--        :scroll="{x: 1000}"-->
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+
+          <!--          输入-->
+          <template slot="input-text">
+            <a-input placeholder="请输入备注"
+                     v-decorator="['remark']"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+        </a-table>
+      </div>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JDate from '../../../components/tools/JDate'
+import { money } from '../../../utils/validate'
+
+export default {
+  name: 'BatchIncomePaymentModule',
+  components: { JDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      title: '批量来款',
+      width: 1000,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      url: {
+        list: ''
+      },
+      validatorRules: {
+        incomingAmount: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        paymentDate: {
+          rules: [{ required: true, message: '请选择来款日期' }],
+          validateTrigger: 'change'
+        }
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '项目名称',
+          align: 'center',
+          // width: 200,
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '欠款金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'amountOwed'
+        }, {
+          title: '本次来款金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'thisIncomingAmount'
+        }, {
+          title: '备注',
+          align: 'center',
+          width: 200,
+          dataIndex: 'remark',
+          scopedSlots: { customRender: 'input-text' }
+        }
+      ],
+      inputIncomingAmount: null, // 输入的来款金额
+      dataSource: [
+        {
+          id: 1,
+          chargeProject: '项目名称',
+          receivableAmount: 100,
+          paidAmount: 0,
+          thisIncomingAmount: null,
+          remark: ''
+        }, {
+          id: 2,
+          chargeProject: '项目名称2',
+          receivableAmount: 200,
+          paidAmount: 0,
+          thisIncomingAmount: null,
+          remark: ''
+        }, {
+          id: 3,
+          chargeProject: '项目名称3',
+          receivableAmount: 5000,
+          paidAmount: 0,
+          thisIncomingAmount: null,
+          remark: ''
+        }
+      ],
+      disableMixinCreated: true
+    }
+  },
+  methods: {
+    loadData() {
+      // 计算项目欠款信息
+      this.dataSource.forEach(item => {
+        item.amountOwed = Number(item.receivableAmount) - Number(item.paidAmount)
+      })
+      this.$forceUpdate()
+    },
+    handleOk() {
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.loadData()
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    incomingAmountBlur(e) {
+      e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
+      this.inputIncomingAmount = Number(e.target.value)
+      this.clearThisTimeAmount().then(() => {
+        this.calculateThisTimeAmount()
+      })
+    },
+    clearThisTimeAmount() {
+      return new Promise(resolve => {
+        this.dataSource.forEach(item => {
+          item.thisIncomingAmount = null
+        })
+        resolve()
+      })
+    },
+    /**
+     * 计算此次来款信息
+     */
+    calculateThisTimeAmount() {
+      if (this.inputIncomingAmount <= 0) {
+        this.$message.warn('请输入大于0的来款金额')
+        return
+      }
+      this.dataSource.forEach(item => {
+        // 当前项目欠款是否 >0
+        if (Number(item.amountOwed) > 0) {
+          // 输入的来款金额是否 >= 当前项目欠款
+          if (this.inputIncomingAmount >= Number(item.amountOwed)) {
+            item.thisIncomingAmount = Number(item.amountOwed)
+            this.inputIncomingAmount -= Number(item.amountOwed)
+            // item.amountOwed = 0
+          } else {
+            // 输入的来款金额小于当前项目欠款且剩余的输入来款金额大于0，则将剩余全部来款算入当前项目的此次来款
+            if (this.inputIncomingAmount > 0) {
+              item.thisIncomingAmount = this.inputIncomingAmount
+              // item.amountOwed = Number(item.amountOwed) - item.thisIncomingAmount
+              this.inputIncomingAmount = 0
+            }
+          }
+        }
+      })
+    }
+    ,
+    /**
+     * 校验金额格式
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMoney(rules, value, callback) {
+      if (value) {
+        if (money(value)) {
+          callback()
+          return
+        }
+        callback('请输入正确格式的金额')
+      }
+      callback('请输入来款金额')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,176 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入开票金额"
+                       v-decorator="['invoicingAmount',validatorRules.invoicingAmount]"
+                       :maxLength='50'
+                       @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="开票号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入开票号"
+                       v-decorator="['invoicingNum', validatorRules.invoicingNum]"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="开票时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-date placeholder="请选择开票时间"
+                      style="width: 100%;"
+                      v-decorator="['invoicingTime', validatorRules.invoicingTime]"
+                      :trigger-change="true"
+                      v-bind="$attrs"
+                      date-format="YYYY-MM-DD"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <a-textarea
+                placeholder="请输入备注"
+                v-decorator="['remarks']"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                :maxLength='200'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :loading="loading"
+        class="j-table-force-nowrap">
+
+        <template slot="text" slot-scope="text">
+          <j-ellipsis :value="text" :length="18"></j-ellipsis>
+        </template>
+
+      </a-table>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import JDate from '../../../components/tools/JDate'
+import { money } from '../../../utils/validate'
+
+export default {
+  name: 'BatchInvoicingModule',
+  components: { JDate },
+  data() {
+    return {
+      title: '批量开票',
+      width: 1000,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      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 }
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '打包项目名称',
+          align: 'center',
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }
+      ],
+      dataSource: [],
+      loading: false,
+      validatorRules: {
+        invoicingAmount: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        invoicingNum: {
+          rules: [{ required: true, message: '请输入开票号' }],
+          validateTrigger: 'blur'
+        },
+        invoicingTime: {
+          rules: [{ required: true, message: '请选择开票时间' }],
+          validateTrigger: 'blur'
+        },
+      }
+    }
+  },
+  methods: {
+    handleOk() {
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    /**
+     * 校验金额格式
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMoney(rules, value, callback) {
+      if (value) {
+        if (money(value)) {
+          callback()
+          return
+        }
+        callback('请输入正确格式的金额')
+      }
+      callback('请输入开票金额')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,266 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <company-select
+                placeholder="请选择企业"
+                v-decorator="['company', validatorRules.company]"
+                @change="handleCompanyChange">
+              </company-select>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="企业联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <select-contacts
+                :selected-company="selectedCompany"
+                placeholder="请选择企业联系人"
+                v-decorator="['companyContactId', validatorRules.companyContactId]"
+                @change="handleContactChange">
+              </select-contacts>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-year-date
+                style="width:100%"
+                placeholder="请选择打包年份"
+                v-decorator="['packYear',validatorRules.packYear]">
+              </j-year-date>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="打包费用总计" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入打包费用总计"
+                       v-decorator="['packChargeTotal',validatorRules.packChargeTotal]"
+                       :maxLength='50'
+                       @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="打包联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <select-contacts
+                :selected-company="selectedCompany"
+                placeholder="请选择打包联系人"
+                v-decorator="['packContactId', validatorRules.packContactId]">
+              </select-contacts>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <a-form-item label="打包费用说明" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <a-textarea
+                placeholder="请输入打包费用说明"
+                v-decorator="['packChargeRemark']"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                :maxLength='200'
+                @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="请输入备注"
+                v-decorator="['remark']"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                :maxLength='200'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { postAction } from '../../../api/manage'
+import CompanySelect from '../../../components/company/CompanySelect'
+import SelectContacts from '../../../components/company/SelectContacts'
+import JYearDate from '../../../components/jero/JYearDate'
+import { money } from '../../../utils/validate'
+
+export default {
+  name: 'PackCompanyModule',
+  components: { CompanySelect, SelectContacts, JYearDate },
+  data() {
+    return {
+      title: '操作',
+      width: 900,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      url: {
+        add: '',
+        edit: ''
+      },
+      selectedCompany: null,
+      validatorRules: {
+        packChargeTotal: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        company: {
+          rules: [{ required: true, validator: this.checkCompany }],
+          validateTrigger: 'change'
+        },
+        companyContactId: {
+          rules: [{ required: true, message: '请选择企业联系人' }],
+          validateTrigger: 'change'
+        },
+        packYear: {
+          rules: [{ required: true, message: '请选择打包年份' }],
+          validateTrigger: 'change'
+        },
+        packContactId: {
+          rules: [{ required: true, message: '请选择打包联系人' }],
+          validateTrigger: 'change'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.form.resetFields()
+      record.company = {
+        id: record.companyTemporaryId,
+        companyName: record.companyTemporaryName
+      }
+      record.companyContactId = record.companyContactTemporaryId
+      record.packContactId = record.packContactTemporaryId
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'company', 'companyContactId', 'packYear', 'packChargeTotal', 'packContactId', 'packChargeRemark', 'remark'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          values.companyId = values.company.id
+          that.confirmLoading = true
+          let httpurl = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+          } else {
+            httpurl += this.url.edit
+          }
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          postAction(httpurl, formData).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()
+    },
+    /**
+     * 选择企业变化
+     * @param value
+     */
+    handleCompanyChange(value) {
+      this.selectedCompany = value
+    },
+    /**
+     * 企业联系人变化，打包联系人默认为企业联系人，打包联系人未选择时进行回显
+     * @param value
+     */
+    handleContactChange(value) {
+      console.log(Object.values(this.form.getFieldValue(['packContactId'])).indexOf(undefined) !== -1)
+      if (Object.values(this.form.getFieldValue(['packContactId'])).indexOf(undefined) !== -1) {
+        this.model.packContactId = value
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model, 'packContactId'))
+        })
+      }
+    },
+    /**
+     * 校验金额格式
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMoney(rules, value, callback) {
+      if (value) {
+        if (money(value)) {
+          callback()
+          return
+        }
+        callback('请输入正确格式的金额')
+      }
+      callback('请输入打包费用总计')
+    },
+    /**
+     * 企业必填校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkCompany(rules, value, callback) {
+      if (value.id && value.companyName) {
+        callback()
+        return
+      }
+      callback('请选择企业')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,188 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="8" :lg="9" :md="10" :sm="24">
+              <a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入项目名称" v-model="queryParam.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="8" :lg="9" :md="10" :sm="24">
+              <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.year"></j-year-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" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--      /查询区域-->
+
+      <!--      表格区域-->
+      <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="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color" @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <!--        打包、需要发票、到账、开票、邮寄状态-->
+          <template slot="status" slot-scope="text,record">
+            <status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
+          </template>
+
+          <template slot="status-pack" slot-scope="text,record">
+            <status-slot :statu-obj="record" :status-no="text"></status-slot>
+          </template>
+        </a-table>
+      </div>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+import StatusSlot from '../../../components/tools/StatusSlot'
+
+export default {
+  name: 'PackProjectSelectProjectModule',
+  components: { JYearDate, StatusSlot },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      title: '添加打包项目',
+      width: 1000,
+      visible: false,
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url:{
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '项目名称',
+          align: 'center',
+          width: 200,
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 180,
+          dataIndex: 'chargeUse',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '需要发票',
+          align: 'center',
+          width: 80,
+          dataIndex: 'needInvoice',
+          scopedSlots: { customRender: 'status-pack' }
+        }, {
+          title: '到账',
+          align: 'center',
+          width: 80,
+          dataIndex: 'inAccount',
+          scopedSlots: { customRender: 'status' }
+        }, {
+          title: '开票',
+          align: 'center',
+          width: 80,
+          dataIndex: 'makeInvoice',
+          scopedSlots: { customRender: 'status' }
+        }, {
+          title: '邮寄',
+          align: 'center',
+          width: 80,
+          dataIndex: 'mail',
+          scopedSlots: { customRender: 'status' }
+        }
+      ]
+    }
+  },
+  methods: {
+    handleOk() {
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>
@@ -31,6 +31,8 @@
      </a-spin>
      <!--    /工作组信息区域-->

+      <a-divider></a-divider>
+
      <!--    查询区域-->
      <div class="part-title">
        <div class="part-title-text">成员信息</div>
@@ -416,10 +418,10 @@ export default {
 <style scoped lang="less">
@import '~@assets/less/common.less';

-.divider {
+.ant-divider-horizontal {
  height: 1px;
-  background-color: #cccccc;
-  margin: 15px -24px;
+  background-color: #F2F2F2;
+  margin: 15px 0px;
 }

 .work-group-detail {
@@ -299,6 +299,8 @@ export default {
          companyName: record.chargeCompanyTemporaryName
        }
      }
+      record.contactsId = record.contactsTemporaryId
+      record.mailContactsId = record.mailContactsTemporaryId
      // 回显选中的企业
      this.selectedCompany = record.chargeCompany
      this.form.resetFields()