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">
            <el-form-item>
              <el-form-item
                label="客户名称"
              >
                <el-select
                  clearable
                  v-model="customerName"
                  placeholder="请选择"
                  :filterable="true"
                >
                  <el-option
                    label="1"
                    value="1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
      
            <el-form-item>
              <el-dropdown
                ref="dropdownref"
                trigger="click"
                :hide-on-click="false"
                v-model="dropdownVisible"
                @keydown.enter.native.stop="search"
              >
                <div v-if="seekList.length > formLength">
                  <span class="el-dropdown-link">
                    更多选项<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <div class="padding">
                      <el-form label-position="left">
                        <el-form-item
                          v-for="(item, i) in deboListRow"
                          :key="i"
                          :inline="true"
                          label-position="left"
                        >
                          <el-form-item
                            :label-width="
                              item.labelWidth ? item.labelWidth : '90' + 'px'
                            "
                            :inline="true"
                            :label="item.label"
                          >
                            <div v-if="item.type == 'input'">
                              <el-input
                                clearable
                                v-model="defaultWhere[item.value]"
                                :placeholder="item.placeholder || '请输入内容'"
                                :style="{
                                  width: item.width ? item.width + 'px' : '220px'
                                }"
                                @keydown.enter.native="() => search()"
                                @keyup.enter.native="() => search()"
                              />
                            </div>
                            <div v-if="item.type == 'select'">
                              <el-select
                                clearable
                                v-model="defaultWhere[item.value]"
                                :multiple="item.multiple ? item.multiple : false"
                                :filterable="item.filterable ? item.filterable : true"
                                :placeholder="item.placeholder || '请输入内容'"
                                :style="{
                                  width: item.width ? item.width + 'px' : '220px'
                                }"
                                @visible-change="change"
                                @change="handerChange"
                              >
                                <el-option
                                  v-for="(op, i) in item.planList"
                                  :label="op.label"
                                  :value="op.value"
                                  :key="i"
                                ></el-option>
                              </el-select>
                            </div>
      
                            <div v-if="item.type == 'date'">
                              <el-date-picker
                                v-model="defaultWhere[item.value]"
                                @blur="change"
                                :type="item.dateType || 'daterange'"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{
                                  width: item.width ? item.width + 'px' : '220px'
                                }"
                              >
                              </el-date-picker>
                            </div>
                            <div v-if="item.type == 'DictSelection'">
                              <DictSelection
                                v-model="defaultWhere[item.value]"
                                :placeholder="item.placeholder || '请选择内容'"
                                :multiple="item.multiple ? item.multiple : false"
                                :style="{
                                  width: item.width ? item.width + 'px' : '220px'
                                }"
                                :dictName="item.dictName"
                              />
                            </div>
                            <div v-if="item.type == 'picker'">
                              <el-date-picker
                                v-model="defaultWhere[item.value]"
                                @blur="change"
                                value-format="yyyy-MM-dd"
                                :style="{
                                  width: item.width ? item.width + 'px' : '220px'
                                }"
                              >
                              </el-date-picker>
                            </div>
                          </el-form-item>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-dropdown-menu>
                </div>
              </el-dropdown>
            </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"
      >
        <!-- 表头工具栏 -->
        <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>
  </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';
  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      accountInfoDialog
    },
    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: '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'
          // }
        ]
      }
    },
    data() {
      return {
        currentIndex: null,
        accountInfoDialogFlag: false,
        currentRow: {},
        radio: null,
        shippingModeOp,
        transactionMethodsOp,
        selection: [],
        paymentStatus,
        paymentType,
        invoiceStatusOp
      };
    },
    created() {
      this.requestDict('结算方式');
    },
    methods: {
      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 }) {
        if (this.contactData.id) {
          where['contactId'] = this.contactData.id;
        }
        return receiptPaymentPlanPage({
          pageNum: page,
          size: limit,
          ...where,
          // 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>