kd-aiot-frontend-eom/src/views/financialManage/invoiceManage/components/collectionPlanDialog.vue

<template>
  <el-dialog
    :title="type == 2 ? '选择付款计划' : '选择收款计划'"
    custom-class="ele-dialog-form long-dialog-form"
    :visible.sync="collectionPlanDialogFlag"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-card shadow="never">
      <div>
        <el-form label-width="90px" :inline="true" ref="form" :rules="rules" labelWidth="120px" :model="searchForm">
            <el-form-item
              :label="type == 2 ? '供应商名称' : '客户名称'"
              prop="customerName"
            >
              <el-input
                clearable
                v-model="searchForm.customerName"
                @click.native="handParent"
                placeholder="请选择"
                readonly
              />
            </el-form-item>
            <el-form-item
              :label="type == 2 ? '购买方名称' : '销售方名称'"
              prop="initiatorId"
            >
              <el-select
                style="width: 100%"
                v-model="searchForm.initiatorId"
                placeholder="请选择"
                @change="getEnterprise()"
              >
                <el-option
                  v-for="item in enterprisePage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="交易方式"
              prop="transactionMode"
            >
              <el-select
                style="width: 100%"
                v-model="searchForm.transactionMode"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in transactionMethodsOp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="search"
              >
                查询
              </el-button>
              <!-- <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
                >重置</el-button
              > -->
            </el-form-item>
          </el-form>
      </div>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        row-key="id"
        height="calc(100vh - 500px)"
        class="dict-table"
        :selection.sync="selection"
        @columns-change="handleColumnChange"
        :initLoad="false"
      >
        <!-- 表头工具栏 -->
        <template v-slot:action="{ row }">
          <el-button size="mini" type="text" @click="handleSelect(row)"
            >对账明细</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>

    <div slot="footer">
      <el-button size="small" type="primary" @click="handleSelect">
        选择
      </el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
    <!-- 对账明细   -->
    <accountInfoDialog
      ref="accountInfoDialogRef"
      v-if="accountInfoDialogFlag"
      :account-info-dialog-flag.sync="accountInfoDialogFlag"
      @getAccountInfo="getAccountInfo"
    ></accountInfoDialog>
    <!-- 客户 -->
    <customerList ref="curtomerRef" @changeParent="changeParent"></customerList>
    <!-- 供应商 -->
    <supplierList
      ref="supplierRef"
      @changeParent="changeParent"
      :classType="2"
    ></supplierList>
  </el-dialog>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import accountInfoDialog from './accountInfoDialog.vue';
  import { shippingModeOp, transactionMethodsOp, paymentStatus, paymentType, invoiceStatusOp } from '@/enum/dict.js';
  import { receiptPaymentPlanPage } from '@/api/financialManage/payAndCollectPlan';
  import customerList from '@/views/saleManage/contact/components/parentList.vue';
  import supplierList from '@/views/purchasingManage/supplierManage/components/parentList.vue';
  import { enterprisePage } from '@/api/contractManage/contractBook';
  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      accountInfoDialog,
      customerList,
      supplierList
    },
    props: {
      form: {
        type: Object,
        default: () => {
          return {};
        }
      },
      type: {
        type: String,
        default: '1'
      },
      collectionPlanDialogFlag: {
        default: false,
        type: Boolean
      },
      contactData: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'detailNo',
            label: this.type == 2 ? '付款计划编码' : '收款计划编码',
            align: 'center',
            sortable: true,
            slot: 'detailNo',
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'sourceOrderNo',
            label: '订单编码',
            align: 'center',
            sortable: true,
            slot: 'sourceOrderNo',
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'sourceOrderType',
            label: '订单类型',
            align: 'center',
            sortable: true,
            showOverflowTooltip: true,
            minWidth: 200,
            formatter: (row) => {
              return row.sourceOrderType == 2 ? '采购订单' : '销售订单';
            }
          },
          {
            prop: 'contractNo',
            label: '合同编码',
            align: 'center',
            sortable: true,
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'contractCode',
            label: '合同编号',
            align: 'center',
            sortable: true,
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'contractName',
            label: '合同名称',
            align: 'center',
            sortable: true,
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'invoiceOrderNo',
            label: '发票号',
            align: 'center',
            sortable: true,
            showOverflowTooltip: true,
            minWidth: 200,
          },
          {
            prop: 'relatedReceivableOrderNo',
            label: this.type == 2 ? '关联应付编码' : '关联应收编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'customerCode',
            label: '客户编号',
            align: 'center',
            slot: 'customerCode',
            showOverflowTooltip: true,
            minWidth: 250
          },
          {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
          prop: 'initiatorName',
          label: this.type == 2 ? '购买方名称':'销售方名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200
        },
          {
            prop: 'settlementMode',
            label: '结算方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140,
            formatter: (row) => {
              return this.getDictValue('结算方式', row.settlementMode);
            }
          },
          {
            prop: 'transactionMode',
            label: '交易方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200,
            formatter: (row) => {
              return this.transactionMethodsOp.find(item => item.value == row.transactionMode)?.label || '';
            }
          },
          {
            prop: 'deliveryMode',
            label: '发货模式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            formatter: (row) => {
              return this.shippingModeOp.find(item => item.value == row.deliveryMode)?.label || '';
            }
          },

          {
            prop: 'issueNumber',
            label: '期数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'paymentType',
            label: '款项类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'moneyName',
            label: '款项名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'paymentRatio',
            label: '比例',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'planPaymentAmount',
            label: this.type == 2 ? '计划付款金额' : '计划收款金额',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'planPaymentDate',
            label: this.type == 2 ? '计划付款日期' : '计划收款日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },

          {
            prop: 'isInvoice',
            label: '是否已开票',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? '是' : '否';
            }
          },
          {
            prop: 'invoiceAmount',
            label: '已开票金额',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'invoiceDate',
            label: '开票日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'isGenerateReceivablePayment',
            label: this.type == 2 ? '是否生成应付款项' : '是否生成应收款项',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            formatter: (_row, _column, cellValue) => {
              return cellValue == 1 ? '是' : '否';
            }
          },
          {
            prop: 'receivableAmount',
            label: this.type == 2 ? '应付金额' : '应收金额',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'receivedAmount',
            label: this.type == 2 ? '已付款金额' : '已收款金额',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 170
          },
          {
            prop: 'actualReceivablePaymentDate',
            label: this.type == 2 ? '实际付款日期' : '实际收款日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 170
          },
          {
            prop: 'deliveryStatus',
            label: this.type == 2 ? '收货状态' : '发货状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              let options = this.menu === 'purchase' ? [
                { value: 0, label: '待收货' },
                { value: 1, label: '部分收货' },
                { value: 2, label: '全部收货' }
              ] : [
                { value: 0, label: '待发货' },
                { value: 1, label: '部分发货' },
                { value: 2, label: '全部发货' }
              ];
              return options.find(item => item.value == cellValue)?.label || '';
            },
            minWidth: 120
          },
          {
            prop: 'reconciliationStatus',
            label: '对账状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              let options = [
                { value: 0, label: '未对账' },
                { value: 1, label: '部分对账' },
                { value: 2, label: '全部对账' }
              ];
              return options.find(item => item.value == cellValue)?.label || '';
            }
          },
          {
            prop: 'invoiceStatus',
            label: '开票状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return this.invoiceStatusOp.find(item => item.value == cellValue)?.label || '';
            }
          },
          {
            prop: 'paymentStatus',
            label: this.type == 2 ? '付款状态' : '收款状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              let options = this.menu === 'purchase' ? this.paymentType : this.paymentStatus;
              return options.find(item => item.value == cellValue)?.label || '';
            }
          },
          {
            prop: 'overdueStatus',
            label: '逾期状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return _row.overdueStatus == 1 ? '逾期中' : '未逾期';
            }
          },
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 180,
          //   align: 'center',
          //   resizable: false,
          //   slot: 'action',
          //   showOverflowTooltip: true,
          //   fixed: 'right'
          // }
        ]
      },
      rules() {
        return {
          initiatorId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          customerName: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          transactionMode: [
            { required: true, message: '请选择', trigger: 'blur' }
          ]
        }
      },
    },
    data() {
      return {
        enterprisePage: [],
        searchForm: {
          initiatorId: '',
          customerId: '',
          customerName: '',
          transactionMode: 1
        },
        currentIndex: null,
        accountInfoDialogFlag: false,
        currentRow: {},
        radio: null,
        shippingModeOp,
        transactionMethodsOp,
        selection: [],
        paymentStatus,
        paymentType,
        invoiceStatusOp
      };
    },
    created() {
      this.requestDict('结算方式');
      this.getEnterprisePage();
    },
    methods: {
      handParent() {
        let item = {
          id: this.searchForm.customerId
        };
        if (this.type == 2) {
          this.$refs.supplierRef.open(item);
        } else {
          this.$refs.curtomerRef.open(item);
        }
      },
      search() {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return this.$message.warning('请选择查询条件');
          this.reload(this.searchForm);
        });
      },
      reset() {
        this.searchForm = {
          initiatorId: '',
          customerId: '',
          customerName: '',
          transactionMode: 1
        };
        this.reload(this.searchForm);
      },
      changeParent(item) {
        this.searchForm.customerName = item.name;
        this.searchForm.customerId = item.id;
      },
      getEnterprisePage() {
        enterprisePage({
          pageNum: 1,
          size: 100
        }).then((res) => {
          this.enterprisePage = [];
          this.enterprisePage.push(...res.list);
          this.searchForm.initiatorId = this.enterprisePage[0].id;
          this.reload(this.searchForm);
        });
      },
      getEnterprise(val) {
        let data = this.enterprisePage.find(
          (item) => item.id == val
        );
        // this.searchForm.customerName = data.name;
        // this.searchForm.initiatorId = data.id;
      },
      init(item = {}, currentIndex = '') {
        this.currentIndex = currentIndex;
        // if (item.id) {
        //   this.radio = item.id;
        // }
      },
      getAccountInfo(item) {
        this.currentRow.children = item;
        this.$emit('getAccountData', this.currentRow);
        this.handleClose();
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return receiptPaymentPlanPage({
          pageNum: page,
          size: limit,
          ...where,
          invoiceStatus: '0,1',
          // reviewStatus: 2,
          sourceType: this.type
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ pageNum: 1, where: where });
      },
      handleSelect(row, index) {
        if(this.selection.length == 0) {
          this.$message({
            message: '请选择计划',
            type: 'warning'
          });
          return;
        }

        let customerIds = this.selection.map((item) => item.customerId);
        let initiatorIds = this.selection.map((item) => item.initiatorId);
        let invoiceStatus = this.selection.map((item) => item.invoiceStatus);
        console.log(customerIds, initiatorIds);
        let flag = false
        // if(this.type == 2) {
        //   this.selection.forEach(item => {
        //     if(item.transactionMode == 2 && item.paymentStatus == 0) {
        //       console.log('selection', item);
        //       flag = true
        //     }
        //   })
        // }
        
        console.log(customerIds, initiatorIds, flag);
        // if(flag) {
        //   this.$message.warning('先款后票的计划需要付款后再开票！');
        //   return
        // }
        if(invoiceStatus.includes(2)) {
          this.$message.warning('请选择未开票的计划！');
          return
        }
        if(this.selection.length == 0 || new Set(customerIds).size != 1 || new Set(initiatorIds).size != 1) {
          this.$message.warning('请选择相同客户和销售方的计划！');
          return
        }

        this.$emit('getPlanData', this.selection)
        this.handleClose()
        // this.currentRow = row;
        // this.accountInfoDialogFlag = true;
        // this.$nextTick(() => {
        //   this.$refs.accountInfoDialogRef.init(row, index);
        // });
      },
      handleClose() {
        this.$emit('update:collectionPlanDialogFlag', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }
</style>