kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/accountstatement/components/detailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <el-card shadow="never">
      <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"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <div v-show="activeComp === 'main'">
      <!--采购对账单信息-->
      <purchase-form
        :dataForm.sync="dataForm"
        :datasource.sync="datasource"
        dialogType="view"
      ></purchase-form>

      <headerTitle title="应付信息" style="margin-top: 30px"></headerTitle>
      <payables-info
        :dataForm.sync="dataForm"
        :payablesList="payablesList"
        :dialogType="dialogType"
        ref="payablesInfoRef"
      ></payables-info>

      <headerTitle title="对账明细" style="margin-top: 30px"></headerTitle>
      <account-detail-table
        ref="accountDetailTableRef"
        :datasource.sync="datasource"
        :dialogType="dialogType"
        :queryDimension="dataForm.queryDimension"
        @totalChange="handleTotalChange"
        @countChange="handleCountChange"
        @statementAmountChange="handleStatementAmountChange"
      ></account-detail-table>
    </div>

    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>

    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import { accountstatementInfoAPI } from '@/api/saleManage/accountstatement';
  import purchaseForm from './purchaseForm.vue';
  import payablesInfo from './payablesInfo.vue';
  import AccountDetailTable from '@/views/saleManage/saleOrder/accountstatement/components/accountDetailTable.vue';

  export default {
    props: ['detailDialogFlag'],
    components: {
      purchaseForm,
      payablesInfo,
      AccountDetailTable,
      bpmDetail
    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '对账单详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        visible: false,
        form: {},
        dataForm: {},
        datasource: [],
        payablesList: [],
        statPayable: null,
        dialogType: 'view',
        title: '详情',
        fullscreen: false
      };
    },
    methods: {
      async open(dialogType, row, type = '') {
        this.form = row;
        this.dialogType = dialogType;
        this.dataForm.type = type;
        let data = await accountstatementInfoAPI(row.id);
        this.datasource = data.productList || [];
        this.payablesList =
          (data.statPayable && data.statPayable.statPayableDetailList) || [];
        // 保存查询到的完整 statPayable 对象，提交时回填使用（详情页只读，但保留字段方便编辑场景扩展）
        this.statPayable = data.statPayable || null;
        this.dataForm = {
          ...this.dataForm,
          ...data
        };
        switch (this.dataForm.dateType) {
          case 1:
            this.dataForm.year = this.dataForm.dateValue;
            break;
          case 2:
            //2023年-四季度
            let dateArr = this.dataForm.dateValue.split('年-');
            this.dataForm.year = dateArr[0];
            this.dataForm.quarter = dateArr[1];
            break;
          case 3:
            this.dataForm.month = this.dataForm.dateValue;
            break;
          default:
            this.dataForm.dateValue = '';
            this.dataForm.dateTimeRange = [
              this.dataForm.startDate,
              this.dataForm.endDate
            ];
        }
      },
      handleTotalChange(total) {
        this.dataForm.amountTotalPrice = total;
      },
      handleCountChange(count) {
        this.dataForm.totalStatementCount = count;
      },
      // 对账明细按采购单号汇总本次对账金额，同步到应付信息对应行
      handleStatementAmountChange(summaryMap) {
        if (this.$refs.payablesInfoRef) {
          this.$refs.payablesInfoRef.syncStatementAmount(summaryMap);
        }
      },
      cancel() {
        this.$emit('update:detailDialogFlag', false);
      }
    }
  };
</script>

<style scoped lang="scss">
  .ele-dialog-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .none {
    display: none;
  }

  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
  ::v-deep.el-divider {
    margin: 10px;
    font-weight: bold;
  }
</style>