kd-aiot-frontend-eom/src/BIZComponents/outboundDetailsDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="outboundDetailsDialogFlag"
    :title="title"
    append-to-body
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <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" >
              <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.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.fromUser }}</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 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.measuringUnit }}
                </template>
              </el-table-column>
              <el-table-column label="金额" prop="totalMoney"></el-table-column>
              <el-table-column label="领料部门" prop="llbm"></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%"
          @selection-change="selectionChange2"
          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.llbm }}
            </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>
  </ele-modal>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import { getOutInBySourceBizNoAPI } from '@/api/saleManage/returnGoods';
  import { deepClone } from '@/utils';

  export default {
    props: {
      outboundDetailsDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        title: '出库单信息',
        selectionChangeList: [],
        selectionChangeList2: [],
        selectionChangeList3: [],
        metaList: [],
        rows: {},
        infoData: {},
        warehousingMaterialList: [],
        materialCodeReqList: [],
        tableData2: [],
        fromUserList: [],

        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: {},
    computed: {
      ...mapGetters(['getDictValue'])
      // tableHeader() {
      //   return tableHeader(this.infoData?.extInfo?.assetType);
      // }
    },

    created() {
      //
      // this.getUser();
      // this._getInfo();
      // this.requestDict('类型用途');
    },
    methods: {
      async init(row = {}) {
        this.rows = row;
        const data = await getOutInBySourceBizNoAPI(row.sendNo);
        this.infoData = deepClone(data);
        //出库物料明细
        this.warehousingMaterialList = this.infoData?.outInDetailVOList || [];
        //出库包装明细
        if (this.warehousingMaterialList.length) {
          this.materialCodeReqList = [];
          this.warehousingMaterialList.forEach((item) => {
            if (item.outInDetailRecordVOList?.length) {
              item.outInDetailRecordVOList = item.outInDetailRecordVOList.map(
                (i) => {
                  return {
                    ...i,
                    outInCode: this.infoData.bizNo,
                    outInId: item.outInId,
                    measurementCount: i.totalCount,
                    outboundDetailId: i.id,
                    outboundType: 1,
                    packageCount: i.packingCount,
                    packingUnit: i.packingUnit,
                    weight: i.weight,
                    specification: item.specification,
                    name: i.name,
                    carveCode: i.engrave,
                    categoryCode: i.categoryCode,
                    id: ''
                  };
                }
              );
              this.materialCodeReqList.push(...item.outInDetailRecordVOList);
            }
          });
          //出库物料明细
          if (this.materialCodeReqList.length) {
            this.metaList = [];
            this.materialCodeReqList.forEach((item) => {
              if (item.outInDetailRecordMaterialDetailVOList?.length) {
                item.outInDetailRecordMaterialDetailVOList =
                  item.outInDetailRecordMaterialDetailVOList.map((i) => {
                    return {
                      ...i,
                      outInId: item.outInId,
                      outInCode: item.outInCode,
                      measurementCount: 1,
                      outboundDetailId: i.id,
                      outboundType: 2,
                      packageCount: i.packingCount,
                      packingUnit: i.packingUnit,
                      weight: i.weight,
                      weightUtil: i.weightUnit,
                      specification: item.specification,
                      categoryCode: i.assetCode,
                      carveCode: i.engrave,
                      name: i.assetName,
                      id: ''
                    };
                  });
                this.metaList.push(
                  ...item.outInDetailRecordMaterialDetailVOList
                );
              }
            });
          }
        }
      },
      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;
      },
      // selectionChange(val){
      //   this.selectionChangeList = val
      // },
      selectionChange2(val) {
        this.selectionChangeList2 = val;
      },
      selectionChange3(val) {
        this.selectionChangeList3 = val;
      },
      handleSave() {
        if (
          !this.selectionChangeList2.length &&
          !this.selectionChangeList3.length
        )
          return this.$message.warning('请选择物品！');
        let params = [
          ...this.selectionChangeList2,
          ...this.selectionChangeList3
        ];
        this.$emit('saveDate', params);
        this.cancel();
      },
      cancel() {
        this.$emit('update:outboundDetailsDialogFlag', false);
      },
      ...mapActions('dict', ['requestDict'])
    }
  };
</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>