[update] 打包项目维护来款、开票修改

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

@@ -9,50 +9,51 @@
     @cancel="handleCancel"
     cancelText="关闭">
     <a-spin :spinning="confirmLoading">
-      <div v-for="(item, index) in stageList" :key="index" class="stage-box">
+      <template v-if="stageList.length > 0">
-        <div class="title">
+        <div v-for="(item, index) in stageList" :key="index" class="stage-box">
-          <div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
+          <div class="title">
-          <img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
+            <div class="title-text">第{{ item.chinaNumIndex }}阶段</div>
+            <img src="../../../../assets/imgs/icon/icon_edit.png" @click="handleEdit(item)">
+          </div>
+          <a-row>
+            <a-col :span="6">
+              <div class="stage">
+                <div class="stage-title">项目名称：</div>
+                <div class="stage-content">{{ item.projectName }}</div>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="stage">
+                <div class="stage-title">开票金额：</div>
+                <div class="stage-content stage-content-money">{{ item.invoiceAmount }}</div>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="stage">
+                <div class="stage-title">开票号：</div>
+                <div class="stage-content">{{ item.billNo }}</div>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="stage">
+                <div class="stage-title">开票日期：</div>
+                <div class="stage-content">{{ item.billDate }}</div>
+              </div>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col>
+              <div class="stage">
+                <div class="stage-title">备注：</div>
+                <div class="stage-content">{{ item.remark }}</div>
+              </div>
+            </a-col>
+          </a-row>
         </div>
-        <a-row>
+      </template>
-          <a-col :span="6">
+      <a-empty v-else></a-empty>
-            <div class="stage">
-              <div class="stage-title">项目名称：</div>
-              <div class="stage-content">{{ item.projectName }}</div>
-            </div>
-          </a-col>
-          <a-col :span="6">
-            <div class="stage">
-              <div class="stage-title">开票金额：</div>
-              <div class="stage-content stage-content-money">{{ item.invoiceAmount }}</div>
-            </div>
-          </a-col>
-          <a-col :span="6">
-            <div class="stage">
-              <div class="stage-title">开票号：</div>
-              <div class="stage-content">{{ item.billNo }}</div>
-            </div>
-          </a-col>
-          <a-col :span="6">
-            <div class="stage">
-              <div class="stage-title">开票日期：</div>
-              <div class="stage-content">{{ item.billDate }}</div>
-            </div>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col>
-            <div class="stage">
-              <div class="stage-title">备注：</div>
-              <div class="stage-content">{{ item.remark }}</div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
     </a-spin>
 
-    <!--    <a-empty v-else></a-empty>-->
-
     <template slot="footer">
       <a-button type="primary" @click="handleAdd">添加阶段</a-button>
     </template>
@@ -72,9 +73,7 @@ import { payBillList } from '../../../../api/incomePaymentsApi'
 export default {
   name: 'InvoicingStageModule',
   components: { InvoicingModule },
-  provide: {
+  provide: {},
-
-  },
   props: {
     // 项目id
     projectId: {
@@ -104,7 +103,7 @@ export default {
     // 弹窗显示时获取数据
     visible: {
       handler(value) {
-        if(value) {
+        if (value) {
           this.open()
         }
       }
@@ -175,7 +174,7 @@ export default {
       //将【一十】换成【十】
       result = result.replace(/^一十/g, '十')
       return result
-    },
+    }
   }
 }
 </script>

src/views/packManagement/PackProjectMaintenance.vue

@@ -108,9 +108,9 @@
           </template>
 
           <span slot="action" class="action-span-cell" slot-scope="text, record">
-            <a @click="incomePayment(record.id)">来款</a>
+            <a @click="incomePayment(record)" :disabled="Number(record.receivableAmount) === 0">来款</a>
             <a @click="cancelPack(record.id)">取消打包</a>
-            <a @click="invoicing(record.id)">开票</a>
+            <a @click="invoicing(record)" :disabled="record.needInvoice === 0 || Number(record.receivableAmount) === 0">开票</a>
           </span>
         </a-table>
       </div>
@@ -118,17 +118,40 @@
     </a-card>
 
     <!--    打包-->
-    <pack-project-select-project-module :visible.sync="selectPackProjectVisible"
+    <pack-project-select-project-module
-                                        :pack-id="companyDataById.id"
+      :visible.sync="selectPackProjectVisible"
-                                        @ok="modalFormOk"></pack-project-select-project-module>
+      :pack-id="companyDataById.id"
+      @ok="modalFormOk"></pack-project-select-project-module>
+
     <!--    批量来款-->
-    <batch-income-payment-module ref="batchIncomePaymentModal" @ok="modalFormOk"></batch-income-payment-module>
+    <batch-income-payment-module
+      ref="batchIncomePaymentModal"
+      :table-data="selectedProject"
+      :visible.sync="incomeVisible"
+      @ok="modalFormOk"></batch-income-payment-module>
+
     <!--    批量开票-->
-    <batch-invoicing-module ref="batchInvoicingModal" @ok="modalFormOk"></batch-invoicing-module>
+    <batch-invoicing-module
+      ref="batchInvoicingModal"
+      :selected-data="selectedProject"
+      :visible.sync="batchInvoicingVisible"
+      @ok="modalFormOk"></batch-invoicing-module>
+
     <!--    来款阶段-->
-    <arrive-stage-module ref="arriveStage" @ok="modalFormOk"></arrive-stage-module>
+    <arrive-stage-module
+      ref="arriveStage"
+      :project-id="selectProjectId"
+      :visible.sync="arriveStageVisible"
+      @ok="modalFormOk"></arrive-stage-module>
+
     <!--    开票阶段-->
-    <invoicing-stage-module ref="invoicingStage" @ok="modalFormOk"></invoicing-stage-module>
+    <invoicing-stage-module
+      ref="invoicingStage"
+      :visible.sync="invoicingStageVisible"
+      :project-id="selectProjectId"
+      :project-type="selectProjectType"
+      :project-name="selectProjectName"
+      @ok="modalFormOk"></invoicing-stage-module>
   </div>
 </template>
 
@@ -293,6 +316,15 @@ export default {
       ],
       disableMixinCreated: true,
       selectPackProjectVisible: false,
+      selectedProject: [], // 选中的项目
+      batchInvoicingVisible: false, // 批量开票对话框开启状态
+      incomeVisible: false, // 批量来款对话框开启状态
+      arriveStageVisible: false, // 来款阶段对话框开启状态
+      invoicingStageVisible: false, // 开票阶段对话框开启状态
+      selectProjectId: null, // 选中项目id
+      selectProjectType: null, // 选中项目类型
+      selectProjectName: null, // 选中项目名称
+      selectProjectChargeCompanyName: null, // 选中项目来款企业
       url: {
         list: '/pack/payPackCompanyProject/listAll',
         exportXlsUrl: '/pack/payPackCompanyProject/exportXls'
@@ -369,22 +401,39 @@ export default {
      * 批量来款
      */
     batchIncomePayment() {
-      this.$refs.batchIncomePaymentModal.open()
+      this.selectedProject = []
+      if (this.selectedRowKeys.length === 0) {
+        this.$message.warn('请选择至少一个项目')
+        return
+      }
+      this.getProjectListBySelectedKeys(this.selectedRowKeys, 'incomePayment').then(res => {
+        this.selectedProject = res
+        this.incomeVisible = true
+      }).catch(message => {
+        this.$message.warn(message)
+      }).finally(() => {
+        this.onClearSelected()
+      })
     },
     /**
      * 批量开票
      */
     batchInvoicing() {
-      this.$refs.batchInvoicingModal.open()
+      this.selectedProject = []
-    },
+      if (this.selectedRowKeys.length === 0) {
-    /**
+        this.$message.warn('请选择至少一个项目')
-     * 来款
+        return
-     * @param id
+      }
-     */
+      this.getProjectListBySelectedKeys(this.selectedRowKeys, 'invoic').then(res => {
-    incomePayment(id) {
+        this.selectedProject = res
-      console.log(id)
+        this.batchInvoicingVisible = true
-      this.$refs.arriveStage.open()
+      }).catch((message) => {
+        this.$message.warn(message)
+      }).finally(() => {
+        this.onClearSelected()
+      })
     },
+
     /**
      * 取消打包
      * @param id
@@ -416,12 +465,51 @@ export default {
       })
     },
     /**
-     * 开票
+     * 来款
-     * @param id
+     * @param record
      */
-    invoicing(id) {
+    incomePayment(record) {
-      console.log(id)
+      this.selectProjectId = record.id
-      this.$refs.invoicingStage.open()
+      this.arriveStageVisible = true
+    },
+    /**
+     * 开票
+     * @param record
+     */
+    invoicing(record) {
+      console.log(record)
+      this.selectProjectName = record.chargeProject
+      this.selectProjectId = record.id
+      this.selectProjectType = record.projectType
+      this.selectProjectChargeCompanyName = this.companyDataById.companyTemporaryName
+      this.invoicingStageVisible = true
+    },
+    /**
+     * 通过选中项目id获取数据，并进行相应提示
+     * @param selectedKeys
+     * @param operateType
+     * @returns {Promise<unknown>}
+     */
+    getProjectListBySelectedKeys(selectedKeys, operateType) {
+      return new Promise((resolve, reject) => {
+        let arr = []
+        arr = this.dataSource.filter(tt => selectedKeys.indexOf(tt.id) > -1)
+        // 开票
+        if (operateType === 'invoic') {
+          // 是否存在不需要发票的项目
+          if (arr.some(item => item.needInvoice === 0 || Number(item.receivableAmount) === 0)){
+            reject('存在不需要发票的项目！')
+          }
+        }
+        // 来款
+        if (operateType === 'incomePayment') {
+          // 是否存在应收金额为0的项目
+          if (arr.some(item => Number(item.receivableAmount) === 0)) {
+            reject('存在应收金额为0的项目！')
+          }
+        }
+        resolve(arr)
+      })
     }
   }
 }

src/views/packManagement/modules/BatchIncomePaymentModule.vue

@@ -42,12 +42,7 @@
           bordered
           rowKey="id"
           :columns="columns"
-
           :dataSource="dataSource"
-          :pagination="ipagination"
-          :loading="loading"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-          @change="handleTableChange"
           class="j-table-force-nowrap">
 
           <!--          输入-->
@@ -68,19 +63,36 @@
 </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],
+  props: {
+    // 选中的项目
+    tableData: {
+      type: Array,
+      required: false,
+      default: []
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.open()
+      }
+    }
+  },
   data() {
     return {
       title: '批量来款',
       width: 1000,
-      visible: false,
       confirmLoading: false,
       form: this.$form.createForm(this),
       labelCol: {
@@ -148,31 +160,8 @@ export default {
           scopedSlots: { customRender: 'input-text' }
         }
       ],
+      dataSource: [],
       inputIncomingAmount: null, // 输入的来款金额
-      dataSource: [
-        {
-          id: 1,
-          chargeProject: '项目名称',
-          receivableAmount: 100,
-          paidAmount: 50,
-          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
     }
   },
@@ -191,11 +180,12 @@ export default {
       this.close()
     },
     open() {
+      this.dataSource = this.tableData
+      console.log(this.dataSource)
       this.loadData()
-      this.visible = true
     },
     close() {
-      this.visible = false
+      this.$emit('update:visible', false)
     },
     /**
      * 来款金额输入失去焦点，进行金额分配
@@ -206,6 +196,7 @@ export default {
       this.inputIncomingAmount = Number(e.target.value)
       this.clearThisTimeAmount().then(() => {
         this.calculateThisTimeAmount()
+        this.$forceUpdate()
       })
     },
     /**

src/views/packManagement/modules/BatchInvoicingModule.vue

@@ -16,6 +16,7 @@
               <a-input placeholder="请输入开票金额"
                        v-decorator="['invoicingAmount',validatorRules.invoicingAmount]"
                        :maxLength='50'
+                       @blur="invoicingAmountBlur"
                        @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
             </a-form-item>
           </a-col>
@@ -40,18 +41,6 @@
             </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
@@ -61,13 +50,19 @@
         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>
 
+        <!--          输入-->
+        <template slot="input-text">
+          <a-input placeholder="请输入备注"
+                   v-decorator="['remark']"
+                   :maxLength='50'
+                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+        </template>
+
       </a-table>
     </a-spin>
   </j-modal>
@@ -80,11 +75,31 @@ import { money } from '../../../utils/validate'
 export default {
   name: 'BatchInvoicingModule',
   components: { JDate },
+  props: {
+    // 选中的项目信息
+    selectedData: {
+      type: Array,
+      required: false,
+      default: []
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  watch: {
+    visible(value) {
+      console.log(value)
+      if (value) {
+        this.open()
+      }
+    }
+  },
   data() {
     return {
       title: '批量开票',
       width: 1000,
-      visible: false,
       confirmLoading: false,
       form: this.$form.createForm(this),
       labelCol: {
@@ -118,10 +133,30 @@ export default {
           align: 'center',
           dataIndex: 'chargeProject',
           scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '已开票金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '本次开票金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'thisInvoicingAmount'
+        }, {
+          title: '备注',
+          align: 'center',
+          width: 200,
+          dataIndex: 'remark',
+          scopedSlots: { customRender: 'input-text' }
         }
       ],
       dataSource: [],
-      loading: false,
       validatorRules: {
         invoicingAmount: {
           rules: [{ required: true, validator: this.checkMoney }],
@@ -134,11 +169,69 @@ export default {
         invoicingTime: {
           rules: [{ required: true, message: '请选择开票时间' }],
           validateTrigger: 'blur'
-        },
+        }
-      }
+      },
+      inputInvoicingAmount: null, // 输入的开票金额
     }
   },
   methods: {
+    loadData() {
+      // 计算项目欠款信息
+      this.dataSource.forEach(item => {
+        item.amountOwed = Number(item.receivableAmount) - Number(item.paidAmount)
+      })
+      this.$forceUpdate()
+    },
+    /**
+     * blur时分配金额
+     */
+    invoicingAmountBlur(e) {
+      e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
+      this.inputInvoicingAmount = Number(e.target.value)
+      this.clearThisTimeAmount().then(() => {
+        this.calculateThisTimeAmount()
+        this.$forceUpdate()
+      })
+    },
+    /**
+     * 清空本次来款金额
+     * @returns {Promise<unknown>}
+     */
+    clearThisTimeAmount() {
+      return new Promise(resolve => {
+        this.dataSource.forEach(item => {
+          item.thisInvoicingAmount = null
+        })
+        resolve()
+      })
+    },
+    /**
+     * 计算此次来款信息
+     */
+    calculateThisTimeAmount() {
+      if (this.inputInvoicingAmount <= 0) {
+        this.$message.warn('请输入大于0的来款金额')
+        return
+      }
+      this.dataSource.forEach(item => {
+        // 当前项目欠款是否 >0
+        if (Number(item.amountOwed) > 0) {
+          // 输入的来款金额是否 >= 当前项目欠款
+          if (this.inputInvoicingAmount >= Number(item.amountOwed)) {
+            item.thisInvoicingAmount = Number(item.amountOwed)
+            this.inputInvoicingAmount -= Number(item.amountOwed)
+            // item.amountOwed = 0
+          } else {
+            // 输入的来款金额小于当前项目欠款且剩余的输入来款金额大于0，则将剩余全部来款算入当前项目的此次来款
+            if (this.inputInvoicingAmount > 0) {
+              item.thisInvoicingAmount = this.inputInvoicingAmount
+              // item.amountOwed = Number(item.amountOwed) - item.thisIncomingAmount
+              this.inputInvoicingAmount = 0
+            }
+          }
+        }
+      })
+    },
     handleOk() {
 
     },
@@ -146,10 +239,11 @@ export default {
       this.close()
     },
     open() {
-      this.visible = true
+      this.dataSource = this.selectedData
+      this.loadData()
     },
     close() {
-      this.visible = false
+      this.$emit('update:visible', false)
     },
     /**
      * 校验金额格式