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

2021-09-08 19:16:13 +08:00
parent 5372161e2f
commit dff860c5be
17 changed files with 1604 additions and 48 deletions
@@ -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>