kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoiceConfirm/components/detailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :append-to-body="true"

    :close-on-click-modal="false"
    width="70%"
    @close="cancel"
  >
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="handleTag(item.key)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div v-if="activeComp==='main'">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <headerTitle title="发货信息"></headerTitle>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="客户名称："
              prop="contactName">
              <el-input v-model="form.contactName" disabled></el-input>
            </el-form-item>
            <el-form-item
              label="客户联系人："
              prop="linkName">
              <el-input v-model="form.linkName" disabled></el-input>
            </el-form-item>
            <el-form-item
              label="客户电话："
              prop="linkPhone">
              <el-input v-model="form.linkPhone" disabled></el-input>
            </el-form-item>

            <el-form-item
              label="客户地址："
              prop="partaAddress">
              <el-input v-model="form.partaAddress" disabled></el-input>
            </el-form-item>
            <el-form-item
              label="计价方式：">
              <el-select v-model="form.pricingWay" disabled style="width: 100%">
                <el-option label="按数量计费" :value="1"></el-option>
                <el-option label="按重量计费" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="发货附件："
              prop="sendFiles">
              <fileMain v-model="form.sendFiles" type="view"></fileMain>
              <!--            <div v-if="detailData.sendFiles && detailData.sendFiles?.length">-->
              <!--              <el-link-->
              <!--                v-for="link in detailData.sendFiles"-->
              <!--                :key="link.id"-->
              <!--                type="primary"-->
              <!--                :underline="false"-->
              <!--                @click="downloadFile(link)"-->
              <!--              >-->
              <!--                {{ link.name }}</el-link-->
              <!--              >-->
              <!--            </div>-->
            </el-form-item>
            <el-form-item
              label="回执附件："
              prop="sendFiles"
            >
              <fileMain v-model="form.repliedFiles" type="view"></fileMain>
              <!--            <div v-if="detailData.repliedFiles && detailData.repliedFiles?.length">-->
              <!--              <el-link-->
              <!--                v-for="link in detailData.repliedFiles"-->
              <!--                :key="link.id"-->
              <!--                type="primary"-->
              <!--                :underline="false"-->
              <!--                @click="downloadFile(link)">-->
              <!--                {{ link.name }}</el-link>-->
              <!--            </div>-->
            </el-form-item>

          </el-col>

          <el-col :span="12">
            <!-- <el-form-item label="车辆名称" >
              <el-input disabled v-model="form.deviceName"/>
            </el-form-item>
            <el-form-item
              label="车牌号："
              prop="carNo">
              <el-input v-model="form.carNo" disabled></el-input>
            </el-form-item> -->
            <el-form-item
              label="发货确认单编码："
              prop="entrustedCode">
              <el-input v-model="form.docNo" disabled></el-input>
            </el-form-item>
<!--            <el-form-item-->
<!--              label="受托收货单编码："-->
<!--              prop="entrustedCode">-->
<!--              <el-input v-model="form.entrustedCode" disabled></el-input>-->
<!--            </el-form-item>-->
            <el-form-item
              label="发货单编码："
              prop="docNo">
              <el-input v-model="form.sendNo" disabled></el-input>
            </el-form-item>
<!--            <el-form-item prop="orderNo" label="订单编码：">-->
<!--              <el-input v-model="form.orderNo" disabled></el-input>-->
<!--            </el-form-item>-->
            <el-form-item prop="replied" label="是否回执：">
              <el-select v-model="form.replied" disabled style="width: 100%">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="审核状态："
              prop="reviewStatus">
              <el-select v-model="form.reviewStatus" disabled style="width: 100%">
                <el-option v-for="item in reviewStatusEnum" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="制单人："
              prop="makerName">
              <el-input v-model="form.makerName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs type="border-card">
        <el-tab-pane label="产品清单">
          <ele-pro-table
            ref="table"
            :needPage="false"
            :columns="competAnalysisListcolumns"
            :toolkit="[]"
            :datasource="detailData.productList"
            row-key="id"
          >
            <!-- <template v-slot:toolbar>
              <div class="headbox">
              <span class="amount">总计：{{detailData.totalAmount}}元</span>
              <span class="amount">应付金额：{{detailData.payAmount}}元</span>
            </div>
            </template> -->
            <template v-slot:technicalDrawings="{ row }">
              <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
                <el-link
                  v-for="link in row.technicalDrawings"
                  :key="link.id"
                  type="primary"
                  :underline="false"
                  @click="downloadFile(link)"
                >
                  {{ link.name }}
                </el-link
                >
              </div>
            </template>
<!--            <template v-slot:packagingStrength="scope">-->
<!--              <DictSelection disabled dict-name="包装强度"-->
<!--                             v-model="scope.row.extField.packagingStrength"></DictSelection>-->
<!--            </template>-->
<!--            <template v-slot:packagingDensity="scope">-->
<!--              <DictSelection disabled dict-name="包装密度"-->
<!--                             v-model="scope.row.extField.packagingDensity"></DictSelection>-->
<!--            </template>-->
            <template v-slot:stockLedger="scope">
              <el-popover
                placement="right"
                width="60%"
                trigger="hover">
                <ele-pro-table :ref="'childrenTable'+scope.$index"
                               row-key="id"
                               max-height="300px"
                               :needPage="false"
                               :columns="childrenColumns"
                               :toolkit="[]"
                               :datasource="scope.row.sendProductDetail"
                               cache-key="stockLedgerRoleTable" class="time-form">
                </ele-pro-table>
                <el-button type="text" slot="reference">明细</el-button>

              </el-popover>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="托盘清单">
          <palletTable ref="palletTableRef" type="view"></palletTable>
        </el-tab-pane>
        <el-tab-pane label="装载叉车信息">
          <stowageTable ref="stowageTableRef" dialog-type="view"></stowageTable>
        </el-tab-pane>
        <el-tab-pane label="运输清单">
          <taskInfoTable ref="taskInfoTableRef" dialog-type="view"></taskInfoTable>
        </el-tab-pane>
      </el-tabs>
    </div>

    <bpmDetail v-if="activeComp==='bpm'&&form.processInstanceId" :id="form.processInstanceId"></bpmDetail>
<!--    <out-bound-details v-if="activeComp==='store'" ref="innerBoundDetailsRef"></out-bound-details>-->
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import {reviewStatusEnum} from '@/enum/dict';
import {copyObj} from '@/utils/util';
import {getSendSaleOrderrecordDetailSplit} from '@/api/saleManage/saleordersendrecord';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import outBoundDetails from "@/BIZComponents/outdetails.vue";
import taskInfoTable from "@/views/saleManage/saleOrder/invoice/components/taskInfoTable.vue";
import stowageTable from "@/views/saleManage/saleOrder/invoice/components/stowageTable.vue";
import getDynamicsColumns from "@/mixins/getDynamicsColumns";
import fileMain from "@/components/addDoc/index.vue";
import PalletTable from "@/views/saleManage/saleOrder/invoice/components/palletTable.vue";
import {getSendSaleOrderConfirmDetail, getSendSaleOrderConfirmDetailSplit} from "@/api/saleManage/invoiceConfirm";


export default {
  mixins: [dictMixins, getDynamicsColumns],
  components: {
    PalletTable,
    fileMain,
    taskInfoTable,
    outBoundDetails,
    bpmDetail, stowageTable
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '发货确认单详情'},
        {key: 'bpm', name: '流程详情'},
        // {key: 'store', name: '出库单详情'},
      ],
      reviewStatusEnum,
      visible: false,
      outboundDetailsDialogFlag: false,
      detailId: '',
      title: '详情',
      row: {},
      activeName: 'base',
      form: {
        orderFiles: []
      },
      rules: {},
      detailData: {},
      childrenColumns: [
        {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left',
        },
        {
          minWidth: 100,
          prop: 'code',
          label: '编码',
          align: 'center',
        },
        {
          minWidth: 140,
          prop: 'barcodes',
          label: '发货条码',
          align: 'center',
        },
        {
          minWidth: 100,
          prop: 'engrave',
          label: '刻码',
          align: 'center',
        }
      ],

    };
  },
  computed: {
    competAnalysisListcolumns() {
      return [
        {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },
        {
          width: 200,
          prop: 'productName',
          label: '名称',
          slot: 'productName',
          align: 'center',
        },
        {
          width: 120,
          prop: 'productCode',
          label: '编码',
          slot: 'productCode',
          align: 'center',
        },
        {
          width: 200,
          prop: 'productCategoryName',
          label: '类型',
          slot: 'productCategoryName',
          align: 'center',
        },
        {
          width: 160,
          prop: 'productBrand',
          label: '牌号',
          slot: 'productBrand',
          align: 'center',
        },
        {
          width: 160,
          prop: 'batchNo',
          label: '批次号',
          slot: 'batchNo',
          align: 'center',
        },
        {
          width: 120,
          prop: 'modelType',
          label: '型号',
          slot: 'modelType',
          align: 'center',
        },
        {
          width: 120,
          prop: 'specification',
          label: '规格',
          slot: 'specification',
          align: 'center',
        },

        {
          width: 200,
          prop: 'customerMark',
          label: '客户代号',
          slot: 'customerMark',
          align: 'center',
        },
        {
          width: 200,
          prop: 'warehouseName',
          label: '仓库名称',
          slot: 'warehouseName',
          align: 'center',
        },
        {
          width: 100,
          prop: 'stockLedger',
          label: '发货明细',
          slot: 'stockLedger',
          align: 'center'
        },

        {
          width: 120,
          prop: 'totalCount',
          label: '数量',
          slot: 'totalCount',
          align: 'center',
        },
        {
          width: 120,
          prop: 'measuringUnit',
          label: '计量单位',
          slot: 'measuringUnit',
          align: 'center',
        },
        {
          width: 120,
          prop: 'singleWeight',
          label: '单重',
          slot: 'singleWeight',
          align: "center"
        },
        {
          width: 100,
          prop: 'receiveTotalWeight',
          label: '收货总重',
          slot: 'receiveTotalWeight',
          align: "center"
        },
        {
          width: 200,
          prop: 'sendTotalWeight',
          label: '发货总重',
          slot: 'sendTotalWeight',
          align: "center",
          headerSlot: 'headerTotalCount'
        },

        {
          width: 100,
          prop: 'increaseTotalWeight',
          label: '增重重量',
          slot: 'increaseTotalWeight',
          align: "center"
        },
        {
          width: 100,
          prop: 'weightUnit',
          label: '重量单位',
          slot: 'weightUnit',
          align: "center"
        },
        {
          width: 160,
          prop: 'singlePrice',
          label: '单价',
          slot: 'singlePrice',
          align: 'center',
        },
        {
          width: 160,
          prop: 'discountSinglePrice',
          label: '折后单价',
          slot: 'discountSinglePrice',
          align: 'center'
        },
        {
          width: 120,
          prop: 'totalPrice',
          label: '合计',
          slot: 'totalPrice',
          align: 'center'
        },
        {
          width: 120,
          prop: 'discountTotalPrice',
          label: '折后合计',
          slot: 'discountTotalPrice',
          align: 'center'
        },
        //...this.dynamicsColumns,
        {
          width: 120,
          prop: 'deliveryDays',
          label: '交期(天)',
          slot: 'deliveryDays',
          align: 'center',
        },
        {
          width: 200,
          prop: 'guaranteePeriod',
          label: '质保期',
          slot: 'guaranteePeriod',
          formatter: (_row, _column, cellValue) => {
            return (_row.guaranteePeriod || '') + (_row.guaranteePeriodUnitName|| '');
          },
          align: 'center',
        },
        // {
        //   width: 120,
        //   prop: 'guaranteePeriodUnitCode',
        //   label: '',
        //   slot: 'guaranteePeriodUnitCode'
        // },
        {
          width: 120,
          prop: 'technicalAnswerName',
          label: '技术答疑人',
          slot: 'technicalAnswerName',
          align: 'center',
        },
        {
          width: 220,
          prop: 'technicalParams',
          label: '技术参数',
          slot: 'technicalParams',
          align: 'center',
        },
        {
          width: 240,
          prop: 'technicalDrawings',
          label: '技术图纸',
          slot: 'technicalDrawings',
          formatter: (_row, _column, cellValue) => {
            return (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName;
          },
          align: 'center',
        },
        {
          width: 220,
          prop: 'remark',
          label: '备注',
          slot: 'remark',
          align: 'center',
        }
      ]
    }
  },
  methods: {
    async open(row) {
      this.form = row;
      this.visible = true;
      await this.getDetailData(row.id);
      this.detailId = row.id;
    },
    handleTag(val) {
      this.activeComp = val
      if (val == 'store') {
        this.$nextTick(() => {
          this.$refs.innerBoundDetailsRef._getInfo(this.form.docNo);
        })
      }
    },
    cancel() {
      this.$nextTick(() => {
        // 关闭后，销毁所有的表单数据
        (this.form = copyObj(this.formDef)),
          (this.otherForm = copyObj(this.otherFormDef)),
          (this.tableBankData = []);
        this.tableLinkData = [];
        this.visible = false;
      });
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    async getDetailData(id) {
      this.loading = true;
      const data = await getSendSaleOrderConfirmDetail(id);
      this.loading = false;
      if (data) {
        this.form = data;
        this.detailData = data;
        this.$refs.taskInfoTableRef && this.$refs.taskInfoTableRef.putTableValue(data.logisticTrakListNoteVOList)
        this.$refs.stowageTableRef && this.$refs.stowageTableRef.putTableValue(data.carList)
        this.$refs.palletTableRef && this.$refs.palletTableRef.putTableValue(data.trayList);
        this.form.pricingWay = data?.saleOrder?.pricingWay
      }
    }
  }
};
</script>

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

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

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