kd-aiot-frontend-wms/src/views/warehouseManagement/outgoingManagement/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <!-- <PageHeader title="出库单详情"> </PageHeader> -->
      </div>

      <!-- <StatusStep :activeCode="infoData.verifyStatus" /> -->
      <div class="stepsStatus">
        <el-steps :active="active" align-center>
          <el-step title="创建"></el-step>
          <el-step title="待审核"></el-step>
          <el-step :title="stepsTitle" :status="stepsStatus"></el-step>
        </el-steps>
      </div>
      <div>
        <div class="content-detail">
          <header-title title="基本信息" size="16px"></header-title>

          <div class="mt20">
            <el-form label-width="110px">
              <el-col :span="8">
                <el-form-item label="出库单号">
                  <span>{{ infoData.bizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库物品类型">
                  <span>{{
                    infoData.bizType == 3
                      ? '物品'
                      : getDictValue('类型用途', infoData.assetType)
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库场景">
                  <span>{{ getSceneState(infoData.bizType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="infoData.bizType == 3">
                <el-form-item label="客户名称">
                  <span>{{ infoData.clientName }}</span>
                </el-form-item> </el-col
              ><el-col :span="8" v-if="infoData.bizType == 3">
                <el-form-item label="客户联系人">
                  <span>{{ infoData.clientUser }}</span>
                </el-form-item> </el-col
              ><el-col :span="8" v-if="infoData.bizType == 3">
                <el-form-item label="客户电话">
                  <span>{{ infoData.clientPhone }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  :label="infoData.bizType == 4 ? '领料单' : '来源单据'"
                >
                  <span>{{ infoData.sourceBizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="领料人">
                  <span>{{ infoData.fromUser }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="领料人联系方式">
                  <span>{{ infoData.fromUserPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库登记人">
                  <span>{{ infoData.extInfo?.createUserName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属部门">
                  <span>{{ infoData.extInfo?.deptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库时间">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <span>{{ stepsTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核人部门">
                  <span>{{ infoData.verifyDeptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核人">
                  <span>{{ infoData.verifyName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="备注">
                  <span>{{ infoData.remark }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </div>
        <div class="content-detail mt20">
          <header-title title="出库物品明细" size="16px"></header-title>

          <div class="mt20">
            <div class="mt10">
              <el-table
                ref="multipleTable"
                :data="warehousingMaterialList"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
              >
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column
                  label="编码"
                  prop="categoryCode"
                ></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>

                <el-table-column
                  v-for="(item, index) in tableHeader"
                  :key="index"
                  align="center"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <template slot-scope="{ row }">
                    <template v-if="item.formatter">{{
                      item.formatter(row)
                    }}</template>
                    <template v-else>{{ row[item.prop] }}</template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="批次号"
                  prop="batchNo"
                ></el-table-column>
                <el-table-column label="最小包装单元" width="120">
                  <template slot-scope="{ row }">
                    {{ row.minPackingCount }}{{ row.measuringUnit }}/{{
                      row.packingUnit
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="包装数量" prop="availableCountBase">
                  <template slot-scope="{ row }">
                    {{ row.packingCount }}{{ row.packingUnit }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="计量数量"
                  prop="count"
                ></el-table-column>
                <el-table-column
                  label="计量单位"
                  prop="measuringUnit"
                ></el-table-column>
                <el-table-column label="重量" prop="weight"></el-table-column>
                <el-table-column
                  label="重量单位"
                  prop="weightUnit"
                ></el-table-column>
                <el-table-column label="单价">
                  <template slot-scope="{ row }">
                    {{ row.price ? row.price : '-' }}元/{{ row.weightUnit }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="金额"
                  prop="totalMoney"
                ></el-table-column>
                <el-table-column
                  label="领料部门"
                  prop="position"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- ${
              infoData.bizType == 3
                ? '物品'
                : getDictValue('类型用途', infoData.assetType)
            }明细 -->
        <div class="mt20">
          <header-title :title="`出库包装明细`" size="16px"></header-title>
          <el-table
            ref="multipleTable"
            :data="materialCodeReqList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <!-- ${
                infoData.bizType == 3
                  ? '物品'
                  : getDictValue('类型用途', infoData.assetType)
              } -->
            <el-table-column
              :label="`编码`"
              prop="categoryCode"
            ></el-table-column>
            <el-table-column :label="`名称`" prop="name"></el-table-column>
            <el-table-column label="批次号" prop="batchNo"></el-table-column>
            <el-table-column
              label="包装编码"
              prop="code"
              width="80"
            ></el-table-column>
            <el-table-column label="包装数量" prop="packingCount" width="80">
              <template slot-scope="{ row }">
                {{ row.packingCount == 0 ? '0' : row.packingCount }}
              </template>
            </el-table-column>
            <el-table-column
              label="包装单位"
              prop="packingUnit"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="totalCount"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <!-- <el-table-column label="领料部门" prop=""></el-table-column> -->
            <el-table-column
              v-if="infoData.bizType == 2 || infoData.bizType == 1"
              label="物料代号"
              prop="materielCode"
            >
              <template slot-scope="{ row }">
                {{ row.materielCode }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="infoData.bizType == 2 || infoData.bizType == 1"
              label="客户代号"
              prop="clientCode"
            >
              <template slot-scope="{ row }">
                {{ row.clientCode }}
              </template>
            </el-table-column>
            <!-- v-if="infoData.bizType == 1" -->
            <el-table-column label="刻码" prop="engrave">
              <template slot-scope="{ row }">
                {{ row.engrave }}
              </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight">
              <template slot-scope="{ row }">
                {{ row.weight }}
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUtil">
              <template slot-scope="{ row }">
                {{ row.weightUtil }}
              </template>
            </el-table-column>

            <el-table-column label="日期" prop="createTime" width="200">
              <template slot="header" slot-scope="scope">
                <!-- {{ dateTypes != 1 ? '采购日期' : '生产日期' }} -->
                采购日期
              </template>
              <template slot-scope="{ row }">
                {{ row.createTime }}
              </template>
            </el-table-column>
            <el-table-column label="领料部门" prop="">
              <template slot-scope="{ row }">
                {{ row.position }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="转消耗" prop="">
              <template slot-scope="{ row }">
                <el-checkbox
                  disabled
                  v-model="row.isTransferAsset"
                ></el-checkbox>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="mt20">
          <header-title :title="`出库物料明细`" size="16px"></header-title>
          <el-table
            ref="multipleTable1"
            :data="metaList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="编码" prop="assetCode"> </el-table-column>
            <el-table-column label="名称" prop="assetName"> </el-table-column>
            <el-table-column label="批次号" prop="batchNo"> </el-table-column>
            <el-table-column label="物料编码" prop="no"> </el-table-column>
            <el-table-column label="计量数量" prop="">
              <template slot-scope="{ row }">1</template>
            </el-table-column>
            <el-table-column label="计量单位" prop="measuringUnit">
            </el-table-column>
            <el-table-column label="物料代号" prop="meterielCode">
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
            </el-table-column>
            <el-table-column label="刻码" prop="engrave"> </el-table-column>
            <el-table-column label="重量" prop="weight"> </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import StatusStep from '@/components/StatusStep/common.vue';
  // import { getInfo } from '@/api/stockManagement/outgoingManagement' '@/components/PageHeader'
  // import PageHeader from '@/components/PageHeader';
  import { tableHeader } from '../common';
  import { mapGetters, mapActions } from 'vuex';
  import outin from '@/api/warehouseManagement/outin';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

  import {
    materialType,
    warehousingType,
    useDict,
    useDictLabel,
    inputStatus,
    outputSceneState,
    auditStatus
  } from '@/utils/dict/index';
  import { getUser } from '@/api/system/user';
  export default {
    components: { StatusStep },
    data() {
      return {
        metaList: [],
        infoData: {},
        warehousingMaterialList: [],
        materialCodeReqList: [],
        tableData2: [],
        fromUserList: [],
        activeName: 'a',
        num: 1,
        stepsList: [
          { status: 'Done', nodeName: '创建' },
          { status: 'Done', nodeName: '暂存', time: '2023-01-06' },
          { status: 'Done', nodeName: '收货中' },
          { status: 'Processing', nodeName: '已收货' }
        ],
        list: [
          {
            name: '紧急',
            color: 'red'
          },
          {
            name: '重要',
            color: 'blue'
          },
          {
            name: '已催办',
            color: 'red'
          }
        ],
        stepsTitle: '已完成',
        stepsStatus: 'success',
        active: 0
      };
    },
    watch: {
      'infoData.verifyStatus': {
        immediate: true,
        handler(val) {
          if (val == 0) {
            this.active = 1;
            this.stepsTitle = '未审核';
            this.stepsStatus = 'wait';
          } else if (val == 1) {
            this.active = 2;
            this.stepsTitle = '审核中';
            this.stepsStatus = 'process';
          } else if (val == 2) {
            this.active = 2;
            this.stepsTitle = '审核通过';
            this.stepsStatus = 'success';
          } else if (val == 3) {
            this.active = 2;
            this.stepsTitle = '驳回';
            this.stepsStatus = 'error';
          }
        }
      }
    },
    computed: {
      ...mapGetters(['getDictValue']),
      tableHeader() {
        return tableHeader(this.infoData?.extInfo?.assetType);
      }
    },

    created() {
      this.getUser();
      this._getInfo();
      this.requestDict('类型用途');
    },
    methods: {
      getUserName(id) {
        let obj = this.fromUserList.find((x) => x.id == id);
        return obj && obj.name;
      },
      async getUser() {
        let res22 = await warehouseDefinition.getUserPage({
          groupId: 1,
          size: 9999,
          page: 1
        });
        this.fromUserList = res22.list;
      },
      // close() {
      //   finishPageTab(); // 关闭当前页签
      // },
      ...mapActions('dict', ['requestDict']),
      getMaterialType: useDictLabel(materialType),
      getInputStatus: useDictLabel(inputStatus),
      getWarehousingType: useDictLabel(warehousingType),
      getSceneState: useDictLabel(outputSceneState),
      getAuditStatus: useDictLabel(auditStatus),
      async _getInfo() {
        const res = await outin.getById(this.$route.query.id);
        console.log(res);
        this.infoData = {
          ...res,
          assetType: res.extInfo.assetType,
          fromUserPhone: res.fromUserPhone,
          verifyDeptName: res.extInfo.verifyDeptName
        };
        if (res) {
          // this.warehousingMaterialList = res.warehouseLedgerInfos.map(
          //   (item) => {
          //     item.selfSum = (item.warehouseLedgerDetails || []).reduce(
          //       (sum, pre) => {
          //         if (item.isUnpack) {
          //           return ++sum;
          //         }
          //         return sum + pre.measurementUnit;
          //       },
          //       0
          //     );

          //     return item;
          //   }
          // );
          this.warehousingMaterialList = res.outInDetailVOList;
          // this.materialCodeReqList =
          //   res.warehouseLedgerInfos.warehouseLedgerDetails;
          let arr = [];
          for (const key in res.outInDetailVOList) {
            for (const k in res.outInDetailVOList[key]
              .outInDetailRecordVOList) {
              arr.push({
                ...res.outInDetailVOList[key].outInDetailRecordVOList[k]
              });
            }
          }
          this.materialCodeReqList = arr;
          let arrs = [];
          for (const key in res.outInDetailVOList) {
            for (const j in res.outInDetailVOList[key]
              .outInDetailRecordVOList) {
              for (const k in res.outInDetailVOList[key]
                .outInDetailRecordVOList[j]
                .outInDetailRecordMaterialDetailVOList) {
                arrs.push({
                  ...res.outInDetailVOList[key].outInDetailRecordVOList[j]
                    .outInDetailRecordMaterialDetailVOList[k]
                });
              }
            }
          }
          this.metaList = arrs;
          // console.log('qwqwqw', arr);
          // res.warehouseLedgerInfos.ledgers;
          // .map((i) =>
          //   (i.outInDetailRecordVOList || []).map((item) => ({
          //     ...item,
          //     isUnpack: i.isUnpack
          //   }))
          // )
          // .flat();
        }
      },
      // 时间差计算
      difference(beginTime, endTime) {
        var dateBegin = new Date(beginTime);
        var dateEnd = new Date(endTime);
        var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
        var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
        var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);

        if (dayDiff == -1) {
          dayDiff = 0;
          hours = 0;
          minutes = 0;
        }

        return dayDiff + '天' + hours + '小时' + minutes + '分钟';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .stepsStatus {
    width: 40%;
    margin: 0 auto;
  }
  .p20 {
    padding: 20px;
  }
  .flex {
    display: flex;
  }
  .title {
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    span {
      font-size: 16px;
    }
    .col {
      padding-left: 40px;
      font-size: 14px;
      color: #aaaaaa;
    }
  }
  .degree {
    margin-right: 10px;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 23px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      width: 5px;
      height: 5px;
      border-radius: 100%;
      margin-right: 6px;
      background-color: #fff;
    }
  }
  .red {
    background-color: rgb(163, 0, 20);
  }
  .blue {
    background-color: #1989fa;
  }
  .createdInfo {
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .mt40 {
    margin-top: 40px;
  }

  .custSteps {
    margin-top: 20px;
    margin-left: 70px;
    .box {
      width: 158px;
      border: 1px solid #ccc;
      padding: 10px;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      font-size: 12px;
      color: #9e9e9e;
      .x {
        width: 20px;
        height: 15px;
        margin-right: 5px;
      }
      .q {
        background-color: #d0e4d5;
      }
      .b {
        background-color: #1989fa;
      }
      .g {
        background-color: #157a2c;
      }
      .r {
        background-color: #a30014;
      }
      .a {
        align-items: center;
        margin-bottom: 10px;
      }
      .mr10 {
        margin-right: 10px;
      }
      .mb0 {
        margin-bottom: 0;
      }
    }
    .stepsInfo {
      // flex: 1;
      width: 483px;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .executor {
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .result {
    justify-content: space-around;
  }
  .mr20 {
    margin-right: 20px;
  }
  .details {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .customSteps {
    margin-top: 40px;
    font-size: 14px;
    margin-left: 80px;
    .time {
      font-size: 12px;
      color: #6e6e6e;
      margin-right: 20px;
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #157a2c;
        position: absolute;
        right: -26px;
      }
    }
    .flex:last-child {
      .time {
        &::after {
          display: none;
        }
      }
    }
    .round {
      margin-right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #157a2c;
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 100%;
        transform: translate(-2px, -2px);
      }
    }
    .text {
      .info {
        margin-top: 10px;
        width: 955px;
        background-color: #f0f3f3;
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }
</style>