kd-aiot-frontend-eom/src/views/financialManage/payableManage/components/paymentListDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="paymentListDialogFlag"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cache"
    :maxable="true"
    :resizable="true"
  >

    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      tool-class="ele-toolbar-form"
      cache-key="eomContactPageTable"
      :page-size="20" 
    >
      <!-- 操作 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-plus"
          v-if="canAddInvoice(row)"
          @click="done(row, 'view')"
        >
          新增发票
        </el-link>
      </template>
    </ele-pro-table>
    <detail-dialog1
      ref="detailDialogRef"
      v-if="detailDialogFlag1"
      :detail-dialog-flag1.sync="detailDialogFlag1"
      @done="done"
      :isPay="true"
  
    ></detail-dialog1>
    <div slot="footer">
      <el-button @click="cache">返回</el-button>
    </div>
  </ele-modal>
</template>
<script>
  import { finPayablePageListAPI } from '@/api/financialManage/payableManage';
  import detailDialog1 from './detailDialog1.vue';
  import { paymentStatus, invoiceStatusOp, transactionMethodsOp } from '@/enum/dict.js';
  import { reviewStatus } from '@/enum/dict';
  export default {
    name: 'collectionDialog',
    components: { detailDialog1 },
    computed: {
      columns() {
        // 当columnsVersion变化时会重新计算,用作更新列配置
        // const version = this.columnsVersion;
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            minWidth: 150,
            prop: 'code',
            label: '应收编码',
            align: 'center',
            // slot: 'code',
            showOverflowTooltip: true
          },
          {
            minWidth: 160,
            prop: 'receiptPlanOrderNo',
            label: '收款计划编码',
            align: 'center',
            slot: 'receiptPlanOrderNo',
            showOverflowTooltip: true
          },
          {
            minWidth: 160,
            prop: 'saleOrderNo',
            label: '订单编码',
            align: 'center',
            slot: 'saleOrderNo',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'contractCode',
            label: '合同编码',
            align: 'center',
            slot: 'contractCode',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'contractNo',
            label: '合同编号',
            align: 'center',
            slot: 'contractNo',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'contractName',
            label: '合同名称',
            align: 'center',
            slot: 'contactName',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'invoiceCode',
            label: '关联发票编码',
            slot: 'invoiceCode',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'invoiceNos',
            label: '发票号',
            align: 'center',
            slot: 'invoiceNos',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'customerNo',
            label: '客户编码',
            align: 'center',
            slot: 'customerNo',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'contactName',
            label: '客户名称',
            align: 'center',
            slot: 'contactName',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'paymentTypeName',
            label: '款项类型',
            align: 'center',
            slot: 'paymentTypeName',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'receivableTotalPrice',
            label: '应付金额',
            align: 'center',
            slot: 'receivableTotalPrice',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'receivedTotalPrice',
            label: '已付金额',
            align: 'center',
            slot: 'receivedTotalPrice',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'unreceiveTotalPrice',
            label: '未付金额',
            align: 'center',
            slot: 'unreceiveTotalPrice',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'invoiceAmount',
            label: '已开票金额',
            align: 'center',
            slot: 'invoiceAmount',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'unInvoiceAmount;',
            label: '未开票金额',
            align: 'center',
            slot: 'unInvoiceAmount;',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'receivableDate',
            label: '实际付款日期',
            slot: 'receivableDate',
            align: 'center',
            showOverflowTooltip: true
          },
          
        {
          minWidth: 120,
          prop: 'createUserName',
          label: '创建人',
          align: 'center',
          slot: 'createUserName',
          showOverflowTooltip: true
        },
        {
          minWidth: 120,
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          slot: 'createTime',
          showOverflowTooltip: true
        },
        {
            minWidth: 120,
            prop: 'accountingSubjectName',
            label: '会计科目',
            align: 'center',
            slot: 'accountingSubjectName',
            showOverflowTooltip: true
          },
          {
            prop: 'transactionMode',
            label: '交易方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200,
            formatter: (row) => {
              return this.transactionMethodsOp.find(item => item.value == row.transactionMode)?.label || '';
            }
          },
          {
            prop: 'invoiceStatus',
            label: '开票状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return this.invoiceStatusOp.find(item => item.value == cellValue)?.label || '';
            }
          },
          {
            minWidth: 100,
            prop: 'status',
            label: '付款状态',
            align: 'center',
            slot: 'status',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return this.paymentType.find((item) => item.value == cellValue)
                .label;
            }
          },
          {
            minWidth: 130,
            prop: 'remark',
            label: '备注',
            align: 'center',
            showOverflowTooltip: true
          },
        {
          prop: 'externalId',
          label: '是否推送',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          formatter: (_row, _column, cellValue) => {
            return _row.externalId? '已推送' : '未推送';
          }
        },
          {
            minWidth: 100,
            prop: 'approvalStatus',
            label: '审核状态',
            align: 'center',
            slot: 'approvalStatus',
            formatter: (_row, _column, cellValue) => {
              return reviewStatus[_row.approvalStatus];
            }
          },
          
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
      },
      canAddInvoice() {
        return function(row) {
          if (!row) return false;
          return [2].includes(row.approvalStatus) && row.transactionMode == 2 && row.invoiceStatus != 2 && row.unInvoiceAmount && +row.unInvoiceAmount > 0;
        };
      }
    },
    data() {
      return {
        title: '应付列表',
        transactionMethodsOp,
        detailDialogFlag1: false,
        paymentType,
        invoiceStatusOp,
        statusList: [
          {
            label: '未付款',
            value: 0
          },
          {
            label: '部分付款',
            value: 1
          },
          {
            label: '已付全款',
            value: 2
          }
        ],
      };
    },
    props: {
      paymentListDialogFlag: {
      type: Boolean,
      default: false,
    },
  },
    created() {},
    methods: {
      handleDetail(row = {}, type) {
        this.detailDialogFlag1 = true;
        this.$nextTick(() => {
          this.$refs.detailDialogRef.init(row.id);
        });
      },

      done(data){
        console.log(data,'data')

        this.$emit('receivableDone',[data])
        this.cache()
      },
      cache(){
        this.$emit('update:paymentListDialogFlag', false)
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return finPayablePageListAPI({
          pageNum: page,
          size: limit,
          approvalStatus:2,
          transactionMode:2,
          ...where
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>