kd-aiot-frontend-wt/src/views/bpm/handleTask/components/purchaseOrder/invoice/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="80%"
    :before-close="cancel">
    <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.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-->
              <!--                align="center"-->
              <!--                type="selection"-->
              <!--                width="55">-->
              <!--              </el-table-column>-->
              <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
            align="center"
            type="selection"
            v-if="!metaList.length"
            :selectable="(row)=>row.categoryCode==rows.productCode"
            width="55">
          </el-table-column>
          <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 class="mt20">
        <header-title :title="`出库物料明细`" size="16px"></header-title>
        <el-table
          ref="multipleTable1"
          :data="metaList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="selectionChange3"
          stripe
          :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
        >
          <el-table-column
            :selectable="(row)=>row.assetCode==rows.productCode"
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <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>

    <div slot="footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button type="info" @click="cancel">关闭</el-button>
    </div>

  </ele-modal>

</template>

<script>

// import { getInfo } from '@/api/stockManagement/outgoingManagement' '@/components/PageHeader'
// import PageHeader from '@/components/PageHeader';
// import { tableHeader } from '../common';
import {mapGetters, mapActions} from 'vuex';
//import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

// import {
//   materialType,
//   warehousingType,
//   useDict,
//   useDictLabel,
//   inputStatus,
//   outputSceneState,
//   auditStatus
// } from '@/utils/dict/index';
import {getUser} from '@/api/system/user';
import { getOutInBySourceBizNo } from '@/api/classifyManage/index';
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 getOutInBySourceBizNo(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
      console.log(this.selectionChangeList2);
    },
    selectionChange3(val) {
      this.selectionChangeList3 = val
      console.log(this.selectionChangeList3);
    },
    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>