[update] 财务管理模块前端页面，到账开票新增阶段接口对接

src/api/incomePaymentsApi.js

@@ -28,6 +28,8 @@ const queryUserByDepartId = (param) => getAction('/sys/user/listRoleAndDepart',
 const queryContactByName = (param) => getAction('/company/payContactsManagement/queryByName', param)
 // 通过id获取支出合同信息
 const getExpenditureContractById = (param) => getAction('/contract/paySpendingContract/queryById', param)
+// 添加来款阶段
+const addPaymentPhase = (param) => postAction('/paymentRecord/payPaymentRecord/addPhase', param)
 
 export {
 	getWorkingGroupById,
@@ -43,5 +45,6 @@ export {
   archiveRevenueContract,
   queryUserByDepartId,
   queryContactByName,
-  getExpenditureContractById
+  getExpenditureContractById,
+  addPaymentPhase
 }

src/assets/less/common.less

@@ -79,6 +79,7 @@
   text-align: left;
   color: #333333;
   display: flex;
+  align-items: center;
   position: relative;
 
   &-text {

src/views/financialManagement/arriveAndInvoicing/ArriveAndInvoivingList.vue

@@ -0,0 +1,242 @@
+<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">
+                <j-dict-select-tag v-model="queryParam.projectType" placeholder="请选择类型项目"
+                                   dictCode="project_type"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="项目负责人" :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">
+                <a-input placeholder="请输入项目名称" v-model="queryParam.chargeProject"></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">
+                <a-input placeholder="请输入来款单位" v-model="queryParam.chargeCompanyTemporaryName"></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.paymentDate"></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="export" @click="handleExportXls('到账开票')">导出</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="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="invoicing(record.id)">开票</a>
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+    <!--    来款阶段-->
+    <arrive-stage-module ref="arriveStage" @ok="modalFormOk" :project-id="selectProjectId"></arrive-stage-module>
+    <!--    开票阶段-->
+    <invoicing-stage-module ref="invoicingStage" @ok="modalFormOk"></invoicing-stage-module>
+    <project-detail-modal ref="projectDetail"></project-detail-modal>
+  </div>
+</template>
+
+<script>
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_financial.png'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+import StatusSlot from '../../../components/tools/StatusSlot'
+import ArriveStageModule from './modules/ArriveStageModule'
+import InvoicingStageModule from './modules/InvoicingStageModule'
+import SelectPrincipal from '../../../components/company/SelectPrincipal'
+import ProjectDetailModal from '../../../components/ProjectDetailModal'
+
+export default {
+  name: 'ArriveAndInvoivingList',
+  components: { PageHeaderTitle, JYearDate, StatusSlot, ArriveStageModule, InvoicingStageModule, SelectPrincipal, ProjectDetailModal },
+  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: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 180,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 200,
+          dataIndex: 'chargeCompanyTemporaryName',
+          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: 'pack',
+          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: '/paymentRecord/payPaymentRecord/mainList',
+        exportXlsUrl: ''
+      },
+      selectProjectId: null
+    }
+  },
+  methods: {
+    /**
+     * 来款
+     * @param id
+     */
+    incomePayment(id) {
+      this.selectProjectId = id
+      this.$refs.arriveStage.open()
+    },
+    /**
+     * 开票
+     * @param id
+     */
+    invoicing(id) {
+      console.log(id)
+      this.$refs.invoicingStage.open()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>

src/views/financialManagement/arriveAndInvoicing/modules/ArriveModule.vue

@@ -0,0 +1,142 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="保存"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="到账金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入到账金额"
+                   v-decorator="['amountReceived',validatorRules.amountReceived]"
+                   :maxLength='50'
+                   @change="e => e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()"></a-input>
+        </a-form-item>
+        <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-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <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-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { money } from '../../../../utils/validate'
+import JDate from '../../../../components/tools/JDate'
+import { addPaymentPhase } from '../../../../api/incomePaymentsApi'
+
+export default {
+  name: 'ArriveModule',
+  components: { JDate },
+  props: {
+    // 项目id
+    projectId: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      title: '来款信息',
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      validatorRules: {
+        amountReceived: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        paymentDate: {
+          rules: [{ required: true, message: '请选择来款日期' }],
+          validateTrigger: 'change'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'amountReceived', 'paymentDate', 'remark'))
+      })
+    },
+    handleOk() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          values.projectId = this.projectId
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          addPaymentPhase(formData).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warn(res.message)
+            }
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    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>

src/views/financialManagement/arriveAndInvoicing/modules/ArriveStageModule.vue

@@ -0,0 +1,199 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleAdd"
+    @cancel="handleCancel"
+    okText="添加阶段"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <div v-for="(item, index) in stageList" :key="index" class="stage-box">
+        <div class="title">
+          <div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
+          <img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
+        </div>
+        <a-row>
+          <a-col :span="12">
+            <div class="stage">
+              <div class="stage-title">到账金额：</div>
+              <div class="stage-content stage-content-money">{{ item.amountReceived }}</div>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="stage">
+              <div class="stage-title">来款日期：</div>
+              <div class="stage-content">{{ item.paymentDate }}</div>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <div class="stage">
+              <div class="stage-title stage-remark-title">备注：</div>
+              <div class="stage-content">{{ item.remark }}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+    <arrive-module ref="arriveModal" v-bind="$attrs" @ok="loadData"></arrive-module>
+  </j-modal>
+</template>
+
+<script>
+import ArriveModule from './ArriveModule'
+
+export default {
+  name: 'ArriveStageModule',
+  components: { ArriveModule },
+  data() {
+    return {
+      title: '来款阶段',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      // 阶段列表，用于循环展示阶段信息
+      stageList: [
+        {
+          amountReceived: 1000,
+          paymentDate: '2020-09-09',
+          remark: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
+        }, {
+          amountReceived: 2000,
+          paymentDate: '2020-09-08',
+          remark: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
+        }
+      ]
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  methods: {
+    handleAdd() {
+      this.$refs.arriveModal.title='添加阶段'
+      this.$refs.arriveModal.add()
+    },
+    handleEdit(record) {
+      this.$refs.arriveModal.title='编辑阶段'
+      this.$refs.arriveModal.edit(record)
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    loadData() {
+      // 匹配每一项的汉字序号
+      this.stageList.forEach((item, index) => {
+        item.chinaNumIndex = this.convertToChinaNum(index + 1)
+      })
+    },
+    //将数字（整数）转为汉字
+    convertToChinaNum(num) {
+      let arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九')
+      let arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿')//可继续追加更高位转换值
+      if (!num || isNaN(num)) {
+        return '零'
+      }
+      let english = num.toString().split('')
+      let result = ''
+      for (let i = 0; i < english.length; i++) {
+        let des_i = english.length - 1 - i//倒序排列设值
+        result = arr2[i] + result
+        let arr1_index = english[des_i]
+        result = arr1[arr1_index] + result
+      }
+      //将【零千、零百】换成【零】 【十零】换成【十】
+      result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
+      //合并中间多个零为一个零
+      result = result.replace(/零+/g, '零')
+      //将【零亿】换成【亿】【零万】换成【万】
+      result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
+      //将【亿万】换成【亿】
+      result = result.replace(/亿万/g, '亿')
+      //移除末尾的零
+      result = result.replace(/零+$/, '')
+      //将【零一十】换成【零十】
+      //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
+      //将【一十】换成【十】
+      result = result.replace(/^一十/g, '十')
+      return result
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.stage-box {
+  padding-bottom: 10px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+
+  &-text {
+    position: relative;
+    font-size: 16px;
+    font-family: NotoSansHans, NotoSansHans-DemiLight;
+    font-weight: 700;
+    color: #333333;
+    margin-right: 10px;
+  }
+
+  &-text::before {
+    position: absolute;
+    top: 4px;
+    left: -10px;
+    content: "";
+    height: 20px;
+    width: 2px;
+    background: #069f99;
+  }
+
+  img {
+    height: 13px;
+    cursor: pointer;
+  }
+}
+
+.stage {
+  display: flex;
+  padding-bottom: 10px;
+
+  &-title {
+    width: 20%;
+    flex-shrink: 0;
+    text-align: right;
+    font-size: 14px;
+    font-family: NotoSansHans, NotoSansHans-Light;
+    color: #4D4D4D;
+  }
+
+  &-remark-title {
+    width: 10%;
+  }
+
+  &-content {
+    padding-right: 20px;
+    word-break: break-all;
+    font-size: 14px;
+    font-family: NotoSansHans, NotoSansHans-Light;
+    color: #4D4D4D;
+
+    &-money {
+      color: #D40505;
+    }
+  }
+}
+</style>

src/views/financialManagement/arriveAndInvoicing/modules/InvoicingModule.vue

@@ -0,0 +1,128 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="保存"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <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-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-form-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-date placeholder="请选择开票日期"
+                  style="width: 100%;"
+                  v-decorator="['invoicingDate',validatorRules.invoicingDate]"
+                  :trigger-change="true"
+                  date-format="YYYY-MM-DD"/>
+        </a-form-item>
+        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <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-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import JDate from '../../../../components/tools/JDate'
+import pick from 'lodash.pick'
+import { money } from '../../../../utils/validate'
+
+export default {
+  name: 'InvoicingModule',
+  components: { JDate },
+  data() {
+    return {
+      title: '来款信息',
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      validatorRules: {
+        invoicingAmount: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        invoicingNum: {
+          rules: [{ required: true, message: '请输入开票号' }],
+          validateTrigger: 'blur'
+        },
+        invoicingDate: {
+          rules: [{ required: true, message: '请选择开票日期' }],
+          validateTrigger: 'change'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'invoicingAmount', 'invoicingNum', 'invoicingDate', 'remarks'))
+      })
+    },
+    handleOk() {
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    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>

src/views/financialManagement/arriveAndInvoicing/modules/InvoicingStageModule.vue

@@ -0,0 +1,207 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleAdd"
+    @cancel="handleCancel"
+    okText="添加阶段"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <div v-for="(item, index) in stageList" :key="index" class="stage-box">
+        <div class="title">
+          <div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
+          <img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
+        </div>
+        <a-row>
+          <a-col :span="8">
+            <div class="stage">
+              <div class="stage-title">开票金额：</div>
+              <div class="stage-content stage-content-money">{{ item.invoicingAmount }}</div>
+            </div>
+          </a-col>
+          <a-col :span="8">
+            <div class="stage">
+              <div class="stage-title">开票号：</div>
+              <div class="stage-content">{{ item.invoicingNum }}</div>
+            </div>
+          </a-col>
+          <a-col :span="8">
+            <div class="stage">
+              <div class="stage-title">开票日期：</div>
+              <div class="stage-content">{{ item.invoicingDate }}</div>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <div class="stage">
+              <div class="stage-title stage-remark-title">备注：</div>
+              <div class="stage-content">{{ item.remarks }}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+    <invoicing-module ref="invoicingModal"></invoicing-module>
+  </j-modal>
+</template>
+
+<script>
+import InvoicingModule from './InvoicingModule'
+
+export default {
+  name: 'InvoicingStageModule',
+  components: { InvoicingModule },
+  data() {
+    return {
+      title: '开票阶段',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      // 阶段列表，用于循环展示阶段信息
+      stageList: [
+        {
+          invoicingAmount: 1000,
+          invoicingNum: '1234465',
+          invoicingDate: '2020-09-09',
+          remarks: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
+        }, {
+          invoicingAmount: 2000,
+          invoicingNum: '1234465',
+          invoicingDate: '2020-09-08',
+          remarks: '这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!这是备注!'
+        }
+      ]
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  methods: {
+    handleAdd() {
+      this.$refs.invoicingModal.title = '添加阶段'
+      this.$refs.invoicingModal.add()
+    },
+    handleEdit(record) {
+      this.$refs.invoicingModal.title = '编辑阶段'
+      this.$refs.invoicingModal.edit(record)
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    loadData() {
+      // 匹配每一项的汉字序号
+      this.stageList.forEach((item, index) => {
+        item.chinaNumIndex = this.convertToChinaNum(index + 1)
+      })
+    },
+    //将数字（整数）转为汉字
+    convertToChinaNum(num) {
+      let arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九')
+      let arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿')//可继续追加更高位转换值
+      if (!num || isNaN(num)) {
+        return '零'
+      }
+      let english = num.toString().split('')
+      let result = ''
+      for (let i = 0; i < english.length; i++) {
+        let des_i = english.length - 1 - i//倒序排列设值
+        result = arr2[i] + result
+        let arr1_index = english[des_i]
+        result = arr1[arr1_index] + result
+      }
+      //将【零千、零百】换成【零】 【十零】换成【十】
+      result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
+      //合并中间多个零为一个零
+      result = result.replace(/零+/g, '零')
+      //将【零亿】换成【亿】【零万】换成【万】
+      result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
+      //将【亿万】换成【亿】
+      result = result.replace(/亿万/g, '亿')
+      //移除末尾的零
+      result = result.replace(/零+$/, '')
+      //将【零一十】换成【零十】
+      //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
+      //将【一十】换成【十】
+      result = result.replace(/^一十/g, '十')
+      return result
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.stage-box {
+  padding-bottom: 10px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+
+  &-text {
+    position: relative;
+    font-size: 16px;
+    font-family: NotoSansHans, NotoSansHans-DemiLight;
+    font-weight: 700;
+    color: #333333;
+    margin-right: 10px;
+  }
+
+  &-text::before {
+    position: absolute;
+    top: 4px;
+    left: -10px;
+    content: "";
+    height: 20px;
+    width: 2px;
+    background: #069f99;
+  }
+
+  img {
+    height: 13px;
+    cursor: pointer;
+  }
+}
+
+.stage {
+  display: flex;
+  padding-bottom: 10px;
+
+  &-title {
+    width: 30%;
+    flex-shrink: 0;
+    text-align: right;
+    font-size: 14px;
+    font-family: NotoSansHans, NotoSansHans-Light;
+    color: #4D4D4D;
+  }
+
+  &-remark-title {
+    width: 10%;
+  }
+
+  &-content {
+    padding-right: 20px;
+    word-break: break-all;
+    font-size: 14px;
+    font-family: NotoSansHans, NotoSansHans-Light;
+    color: #4D4D4D;
+
+    &-money {
+      color: #D40505;
+    }
+  }
+}
+</style>

src/views/financialManagement/dunning/DunningList.vue

@@ -0,0 +1,205 @@
+<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.chargeCompanyTemporaryName"></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">
+                <a-input placeholder="来款项目" v-model="queryParam.chargeProject"></a-input>
+              </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" @click="setTimedDunning">设置定时催款</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: 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>
+
+          <!--        打包、需要发票、到账、开票、邮寄状态-->
+          <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-card>
+    <dunning-set-time-module ref="setTimeModal" @ok="modalFormOk"></dunning-set-time-module>
+  </div>
+</template>
+
+<script>
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_financial.png'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import StatusSlot from '../../../components/tools/StatusSlot'
+import DunningSetTimeModule from './modules/DunningSetTimeModule'
+
+export default {
+  name: 'DunningList',
+  components: { PageHeaderTitle, StatusSlot, DunningSetTimeModule },
+  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: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 180,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 200,
+          dataIndex: 'chargeCompanyTemporaryName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '联系人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'contactsTemporaryName',
+          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: '催款时间',
+          align: 'center',
+          width: 140,
+          dataIndex: 'dunningTime',
+          scopedSlots: { customRender: 'text' }
+        },
+      ],
+      url: {
+        list: '',
+        exportXlsUrl: ''
+      }
+    }
+  },
+  methods: {
+    setTimedDunning() {
+      this.$refs.setTimeModal.open()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>

src/views/financialManagement/dunning/modules/DunningSetTimeModule.vue

@@ -0,0 +1,49 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="保存"
+    cancelText="关闭">
+    <a-calendar :fullscreen="false" v-model="setTimeDate"></a-calendar>
+  </j-modal>
+</template>
+
+<script>
+export default {
+  name: 'DunningSetTimeModule',
+  data() {
+    return {
+      title: '设置催款时间',
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      setTimeDate: null
+    }
+  },
+  methods: {
+    handleOk() {
+      console.log(this.setTimeDate)
+      this.$emit('ok')
+      this.close()
+    },
+    handleCancel() {
+      this.close()
+    },
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/packManagement/PackProjectMaintenance.vue

@@ -124,6 +124,10 @@
     <batch-income-payment-module ref="batchIncomePaymentModal" @ok="modalFormOk"></batch-income-payment-module>
     <!--    批量开票-->
     <batch-invoicing-module ref="batchInvoicingModal" @ok="modalFormOk"></batch-invoicing-module>
+    <!--    来款阶段-->
+    <arrive-stage-module ref="arriveStage" @ok="modalFormOk"></arrive-stage-module>
+    <!--    开票阶段-->
+    <invoicing-stage-module ref="invoicingStage" @ok="modalFormOk"></invoicing-stage-module>
   </div>
 </template>
 
@@ -136,6 +140,8 @@ import StatusSlot from '../../components/tools/StatusSlot'
 import PackProjectSelectProjectModule from './modules/PackProjectSelectProjectModule'
 import BatchIncomePaymentModule from './modules/BatchIncomePaymentModule'
 import BatchInvoicingModule from './modules/BatchInvoicingModule'
+import ArriveStageModule from '../financialManagement/arriveAndInvoicing/modules/ArriveStageModule'
+import InvoicingStageModule from '../financialManagement/arriveAndInvoicing/modules/InvoicingStageModule'
 
 export default {
   name: 'PackProjectMaintenance',
@@ -145,7 +151,9 @@ export default {
     StatusSlot,
     PackProjectSelectProjectModule,
     BatchIncomePaymentModule,
-    BatchInvoicingModule
+    BatchInvoicingModule,
+    ArriveStageModule,
+    InvoicingStageModule
   },
   mixins: [JeroListMixin],
   data() {
@@ -275,10 +283,16 @@ export default {
           dataIndex: 'action',
           align: 'center',
           fixed: 'right',
-          width: 160,
+          width: 180,
           scopedSlots: { customRender: 'action' }
         }
       ],
+      dataSource: [
+        {
+          id: 1,
+          chargeProject: 'asd'
+        }
+      ],
       url: {
         list: '',
         exportXlsUrl: ''
@@ -320,14 +334,24 @@ export default {
     batchInvoicing() {
       this.$refs.batchInvoicingModal.open()
     },
-    incomePayment() {
+    /**
-
+     * 来款
+     * @param id
+     */
+    incomePayment(id) {
+      console.log(id)
+      this.$refs.arriveStage.open()
     },
     cancelPack() {
 
     },
-    invoicing() {
+    /**
-
+     * 开票
+     * @param id
+     */
+    invoicing(id) {
+      console.log(id)
+      this.$refs.invoicingStage.open()
     }
   }
 }