kd-aiot-frontend-eom/src/views/financialManage/paymentPlan/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
              style="height: 42px; line-height: 38px"
            >
              <!-- <el-badge :value="toDoReminder[item.reminder] || 0" class="item"> -->
                {{ item.name }}
              <!-- </el-badge> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="main" style="padding: 0 10px">
        <div v-if="activeComp == 'paymentPlan'">
          <div class="ele-border-lighter form-content" v-loading="loading">
            <search-table @search="reload"></search-table>

            <!-- 数据表格 -->
            <ele-pro-table
              ref="table"
              :columns="columns"
              :datasource="datasource"
              height="calc(100vh - 365px)"
              style="margin-bottom: 10px"
              full-height="calc(100vh - 116px)"
              tool-class="ele-toolbar-form"
              :selection.sync="selection"
              :page-size="20"
              @columns-change="handleColumnChange"
              :cache-key="cacheKeyUrl"
            >
              <!-- 表头工具栏 -->
              <template v-slot:toolbar>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  class="ele-btn-icon"
                  @click="openEdit('add')"
                >
                  合并开票
                </el-button>
              </template>

              <!-- 查看详情列 -->
              <template v-slot:detailNo="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="openDetail(row, 'detailNo')"
                >
                  {{ row.detailNo }}
                </el-link>
              </template>
              <template v-slot:sourceOrderNo="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="openDetail(row, 'sourceOrderNo')"
                >
                  {{ row.sourceOrderNo }}
                </el-link>
              </template>
              
              <template v-slot:contractNo="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="openDetail(row, 'contractNo')"
                >
                  {{ row.contractNo }}
                </el-link>
              </template>
              <!-- <template v-slot:invoiceOrderNo="{ row }">
                              <el-link
                                type="primary"
                                :underline="false"
                                @click="openDetail(row, 'invoiceOrderNo')"
                              >
                                {{ row.invoiceOrderNo }}
                              </el-link>
                            </template> -->
              <template v-slot:relatedReceivableOrderNo="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="openDetail(row, 'relatedReceivableOrderNo')"
                >
                  {{ row.relatedReceivableOrderNo }}
                </el-link>
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-edit"
                  v-if="
                    (isNeed_process_is_close &&
                      [0, 3].includes(row.orderStatus)) ||
                    !isNeed_process_is_close
                  "
                  @click="openEdit('edit', row)"
                >
                  修改
                </el-link>
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-plus"
                  @click="saleOrderSubmit(row)"
                  v-if="
                    isNeed_process_is_close && [0, 3].includes(row.orderStatus)
                  "
                >
                  提交
                </el-link>
                <el-popconfirm
                  class="ele-action"
                  title="确定要删除此信息吗？"
                  v-if="
                    (isNeed_process_is_close &&
                      [0, 3].includes(row.orderStatus)) ||
                    !isNeed_process_is_close
                  "
                  @confirm="remove([row.id])"
                >
                  <template v-slot:reference>
                    <el-link
                      type="danger"
                      :underline="false"
                      icon="el-icon-delete"
                    >
                      删除
                    </el-link>
                  </template>
                </el-popconfirm>
      
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-plus"
                  v-if="row.invoiceStatus != 2"
                  @click="openEdit('add', row)"
                >
                  新增发票
                </el-link>
              </template>
            </ele-pro-table>
          </div>
        </div>
      </div>
    </el-card>
    <detailDialog ref="detailDialogRef" menu="purchase"></detailDialog>
    <contractr-detail ref="contractDetailRef"></contractr-detail>
    <purchasingDetail ref="purchasingDetailRef"></purchasingDetail>


    <!-- 开票 -->
    <addOrEditDialogNew
      ref="addOrEditDialogNewRef"
      :add-or-edit-dialog-flag.sync="addOrEditDialogNewFlag"
      v-if="addOrEditDialogNewFlag"
      :isEditType="false"
      @reload="reload"
    />

    <payableOrderDetailDialog ref="payableOrderDetailDialogRef" v-if="payableOrderDetailDialogFlag" :detail-dialog-flag.sync="payableOrderDetailDialogFlag"></payableOrderDetailDialog>
  </div>
</template>

<script>
import searchTable from './components/searchTable.vue';
import detailDialog from '@/views/financialManage/collectionPlan/components/detailDialog.vue';
import contractrDetail from '@/views/contractManage/contractBook/components/detailDialog.vue';
import purchasingDetail from '@/views/purchasingManage/purchaseOrder/components/detailDialog.vue';
import dictMixins from '@/mixins/dictMixins';
import tabMixins from '@/mixins/tableColumnsMixin';
  import { receiptPaymentPlanPage } from '@/api/financialManage/payAndCollectPlan';
  import { shippingModePurchaseOp, transactionMethodsOp, paymentTypeOp, paymentType, invoiceStatusOp } from '@/enum/dict.js';
import addOrEditDialogNew from '@/views/financialManage/invoiceManage/components/addOrEditDialogNew.vue'
import invoiceDetailDialog from '@/views/financialManage/invoiceManage/components/detailDialog.vue';
import payableOrderDetailDialog from '@/views/financialManage/payableManage/components/detailDialog.vue';

export default {
  mixins: [dictMixins, tabMixins],
  components: {
    searchTable,
    contractrDetail,
    purchasingDetail,
    detailDialog,
    addOrEditDialogNew,
    invoiceDetailDialog,
    payableOrderDetailDialog,
  },
  data() {
    return {
      activeComp: 'paymentPlan',
      payableOrderDetailDialogFlag: false,
      addOrEditDialogNewFlag: false,
      shippingModePurchaseOp,
      transactionMethodsOp,
      paymentTypeOp,
      paymentType,
      invoiceStatusOp,
      tabOptions: [
        { key: 'paymentPlan', name: '付款计划管理', reminder: 'purchaseOrderNum' },
      ],

      selection: [], //单选中集合
      loading: false, // 加载状态
      addOrEditDialogFlag: false,
      addOrEditDialogFlag1: false,
      params: {},

      groupName: '',
      columns: [
        {
          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: '付款计划编码',
          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,
          slot: 'contractNo',
          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,
          slot: 'invoiceOrderNo',
          showOverflowTooltip: true,
          minWidth: 200,
        },
        {
          prop: 'invoiceNos',
          label: '发票号',
          align: 'center',
          sortable: true,
          slot: 'invoiceNos',
          showOverflowTooltip: true,
          minWidth: 200,
        },
        {
          prop: 'relatedReceivableOrderNo',
          label: '关联应付编码',
          align: 'center',
          slot: 'relatedReceivableOrderNo',
          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: '采购方名称',
          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.shippingModePurchaseOp.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,
          formatter: (row) => {
            return this.paymentTypeOp.find(item => item.value == row.paymentType)?.label || '';
          }
        },
        {
          prop: 'moneyName',
          label: '款项名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'paymentRatio',
          label: '比例',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140,
          formatter: (row) => {
            return row.paymentRatio + '%';
          }
        },
        {
          prop: 'planPaymentAmount',
          label: '计划付款金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'planPaymentDate',
          label: '计划付款日期',
          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: '是否生成应付款项',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          formatter: (_row, _column, cellValue) => {
            return cellValue == 1 ? '是' : '否';
          }
        },
        {
          prop: 'receivableAmount',
          label: '应付金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'receivedAmount',
          label: '已付款金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },
        {
          prop: 'actualReceivablePaymentDate',
          label: '实际付款日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },
        {
          prop: 'deliveryStatus',
          label: '收货状态',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            let options = [
              { 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: 'paymentStatus',
          label: '付款状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return this.paymentType.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: 'overdueStatus',
          label: '逾期状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return _row.overdueStatus == 1 ? '逾期中' : '未逾期';
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 260,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ],
      cacheKeyUrl: 'eos-5f2ac512-purchaseOrder-paymentPlan',
    };
  },
  computed: {},
  created() {
    this.requestDict('结算方式');
    this.requestDict('客户状态');

  },
  beforeDestroy() {
   
  },
  methods: {
    /* 表格数据源 1：销售订单、2：采购订单 */
    datasource({ page, limit, where, order }) {
      this.params = {
        pageNum: page,
        size: limit,
        sourceType: 2,
        ...where
      };
      return receiptPaymentPlanPage(this.params);
    },

    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where });
    },

    //新增编辑
    //新增编辑
    openEdit(type, row) {
      const select = []
      if(row) {
        select.push(row)
      } else {
        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);
        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
        }
        select.push(...this.selection)
      }
      this.addOrEditDialogNewFlag = true;
        this.$nextTick(() => {
          this.$refs.addOrEditDialogNewRef.createInvoice1(select, '2', 7);
        });
      
      // this.$refs.addOrEditDialogNewRef.$refs.form &&
      //   this.$refs.addOrEditDialogNewRef.$refs.form.clearValidate();
    },
    //查看合同详情
    openDetail(row, type) {
      if(type == 'detailNo') {
        this.$refs.detailDialogRef.open(row, type);
      } else if(type == 'sourceOrderNo') {
        const params = {
          id: row.sourceOrderId
        }
        this.$refs.purchasingDetailRef.open(params);
      } else if(type == 'contractNo') {
        const params = {
          id: row.contractId
        }
        this.$refs.contractDetailRef.open(params);
      } else if(type == 'invoiceOrderNo') {
        const params = {
          id: row.invoiceId
        }
        this.detailDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.invoiceDetailDialogRef.init(params, 'view');
        });
      } else if(type == 'relatedReceivableOrderNo') {
        this.payableOrderDetailDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.payableOrderDetailDialogRef.init(row.relatedReceivableOrderId, 'view');
        });
      }
      
    },
  }
};
</script>

<style lang="scss" scoped>
:deep .el-card__body {
  padding: 0;
}

:deep(.el-link--inner) {
  margin-left: 0px !important;
}

.sys-organization-list {
  height: calc(100vh - 264px);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  overflow: auto;
}

.sys-organization-list :deep(.el-tree-node__content) {
  height: 40px;

  & > .el-tree-node__expand-icon {
    margin-left: 10px;
  }
}

.switch_left ul .active {
  border-top: 4px solid var(--color-primary);
  color: var(--color-primary-5);
}

.switch {
  padding-bottom: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--color-primary-5);
}

.el-icon-arrow-down {
  font-size: 12px;
}
:deep(.el-badge__content.is-fixed) {
  top: 4px;
}
</style>