kd-aiot-frontend-eom/src/views/saleManage/saleOrder/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"
    :maxable="true"
    :resizable="true"
    width="70%"
    :before-close="cancel"
  >

    <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'">
      <!--销售表单表单-->
      <sale-form :dataForm.sync="dataForm" :datasource.sync="datasource"
                 dialogType="view"></sale-form>
      <headerTitle title="对账明细" style="margin-top: 30px">
        <template v-slot>
          <el-row style="font-weight: 700; color: red">
            <span>订单总金额：</span>
            <span>{{ isNonDirectionalSale ? '--' : dataForm.orderTotalAmount || 0 }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>已对账金额：</span>
            <span>{{ dataForm.amountCompletePrice || 0 }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>未对账金额：</span>
            <span>{{ dataForm.amountUnCompletePrice || 0 }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>本次对账总金额：</span>
            <span>{{ dataForm.amountTotalPrice || 0 }}</span>
          </el-row>
        </template>
      </headerTitle>
      <!-- <recorpayTableList
        ref="recorpayListRef"
        :dataForm="dataForm"
        :recorpayList.sync="recorpayList"
        dialogType="view"
      ></recorpayTableList> -->
      <inventoryTable ref="inventoryTableref" :dataForm="dataForm" :datasource.sync="datasource" dialogType="view"></inventoryTable>
    </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 InventoryTable from "@/views/saleManage/saleOrder/accountstatement/components/inventoryTable.vue";
import saleForm from "@/views/saleManage/saleOrder/accountstatement/components/saleForm.vue";
import {accountstatementInfoAPI} from "@/api/saleManage/accountstatement";
import recorpayTableList from '@/views/saleManage/saleOrder/accountstatement/components/recorpayTableList.vue';

export default {
  props: ['detailDialogFlag'],
  components: {
    saleForm,
    InventoryTable,
    bpmDetail,recorpayTableList
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '对账单详情'},
        {key: 'bpm', name: '流程详情'}
      ],
      fullscreen:false,

      visible: false,
      form: {},
      dataForm: {},
      datasource: [],
      recorpayList:[],
      title: '详情',


    };
  },
  computed: {
    isNonDirectionalSale() {
      return this.datasource.some(item => item.orderCategory == 4);
    }
  },
  methods: {
    async open(dialogType, row, type = '') {
      console.log(row)
      this.form = row
      this.dialogType = dialogType
      this.dataForm.type = type
      let data = await accountstatementInfoAPI(row.id)


      this.datasource = data.orderList
      // this.recorpayList = data.recorpayList || [];
      data.orderTotalAmount = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.orderAmount * 100), 0) / 100;
      data.amountTotalPrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.statementAmount * 100), 0) / 100;
      data.amountCompletePrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.statementedAmount * 100), 0) / 100;
      data.amountUnCompletePrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.unStatementAmount * 100), 0) / 100;
      this.dataForm = data
      switch (this.dataForm.dateType) {
        case 1:
          this.dataForm.year = this.dataForm.dateValue
          break;
        case 2:
          //2023年-四季度
          let data = this.dataForm.dateValue.split('年-')
          this.dataForm.year = data[0]
          this.dataForm.quarter = data[1]
          break
        case 3:
          this.dataForm.month = this.dataForm.dateValue
          break
        default:
          this.dataForm.dateValue = ''
          this.dataForm.dateTimeRange = [this.dataForm.startDate, this.dataForm.endDate]
      }
    },
    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>