kd-aiot-frontend-eom/src/views/financialManage/receivableManage/components/receivableDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="receivableDialogFlag"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
    :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="[2].includes(row.approvalStatus)"
          @click="handleDetail(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 { finReceivablePageListAPI } from '@/api/financialManage/receivableManage';
  import detailDialog1 from './detailDialog1.vue';
  export default {
    name: 'collectionDialog',
    components: { detailDialog1 },
    computed: {
      columns() {
        return [
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            minWidth: 130,
            prop: 'code',
            label: '应收编码',
            align: 'center',
            slot: 'code',
            showOverflowTooltip: true
          },

          {
            minWidth: 130,
            prop: 'contactName',
            label: '单位名称',
            align: 'center',
            slot: 'contactName',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'receivableDate',
            label: '应收日期',
            slot: 'receivableDate',
            align: 'center',
            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: 'sourceCode',
            label: '来源编码',
            align: 'center',
            slot: 'sourceCode',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'accountingSubjectName',
            label: '会计科目',
            align: 'center',
            slot: 'accountingSubjectName',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'status',
            label: '收款状态',
            align: 'center',
            slot: 'status',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return this.statusList.find((item) => item.value === cellValue)
                .label;
            }
          },
          {
            minWidth: 130,
            prop: 'remark',
            label: '备注',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            slot: 'createTime',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            slot: 'createTime',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
      }
    },
    data() {
      return {
        detailDialogFlag1: false,
        statusList: [
          {
            label: '未收款',
            value: 0
          },
          {
            label: '部分收款',
            value: 1
          },
          {
            label: '已收全款',
            value: 2
          }
        ]
      };
    },
    props: {
      receivableDialogFlag: {
      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:receivableDialogFlag', false)
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return finReceivablePageListAPI({
          pageNum: page,
          size: limit,
          // approvalStatus:2,
          ...where
        });
      }
    }
  };
</script>
<style scoped lang="scss"></style>