kd-aiot-frontend-mes/src/views/produce/components/picking/index.vue

<template>
  <ele-modal
    title="新建领料单"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :maxable="true"
    :close-on-press-escape="false"
    id="formId"
    append-to-body
    width="80%"
    @update:fullscreen="fullscreen"
    :fullscreen="isFullscreen"
    :height="dialogDynamicHeight"
  >
    <el-form>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="领料单编号" prop="pickCode" label-width="90px">
            <el-input v-model="pickCode" disabled=""></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="领料单名称" prop="pickName" label-width="90px">
            <el-input v-model="pickName" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-for="(item, idx) in workList" :key="idx">
      <el-form
        :ref="`formRef${idx}`"
        :model="{ pickList: item }"
        :rules="tableRules"
        size="mini"
        label-position="left"
      >
        <div class="tableZ_box">
          <div class="row">
            <div class="col">
              <div class="name">生产工单号</div>
              <div class="content">{{ item.code }}</div>
            </div>
            <div class="col">
              <div class="name">产品编码</div>
              <div class="content">{{ item.productCode }}</div>
            </div>
            <div class="col">
              <div class="name">产品名称</div>
              <div class="content">{{ item.productName }}</div>
            </div>
            <!-- <div class="col">
              <div class="name">批次号</div>
              <div class="content">{{ item.batchNo }}</div>
            </div> -->
            <div class="col pd6" v-if="clientEnvironmentId != 21">
              <el-button
                type="primary"
                size="mini"
                @click="openPicking(item.id, item)"
                >新增</el-button
              >
            </div>
          </div>
        </div>

        <div>
          <el-table
            :ref="`tableRef${idx}`"
            class="table_content"
            :max-height="tabalHeight"
            :data="item.pickList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border
          >
            <el-table-column label="序号" type="index" width="60">
              <template slot-scope="{ row, $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>

            <el-table-column label="类型" prop="rootCategoryLevelId" width="80">
              <template slot-scope="{ row, $index }">
                <el-tag size="mini">{{
                  typeName[Number(row.rootCategoryLevelId)]
                }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              label="编码"
              prop="assetCode"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                <span
                  v-if="
                    Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                    row.isBom == 1
                  "
                  style="color: #faad14"
                >
                  {{ row.categoryCode }}
                </span>
                <span>
                  {{
                    row.rootCategoryLevelId == 4 ? row.codeNumber : row.code
                  }}</span
                >
              </template>
            </el-table-column>

            <el-table-column label="名称" prop="name" show-overflow-tooltip>
              <template slot-scope="{ row, $index }">
                <span
                  v-if="
                    Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                    row.isBom == 1
                  "
                >
                  {{ row.categoryName }}
                </span>
                <span> {{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="型号"
              prop="modelType"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column label="批次号" prop="batchNo"> </el-table-column> -->

            <el-table-column label="数量" prop="demandQuantity" width="140">
              <template slot-scope="{ row, $index }">
                <el-form-item>
                  <el-input
                    v-model="row.demandQuantity"
                    @input="changeInput(row, $index)"
                    size="mini"
                    style="width: 120px"
                  >
                    <template slot="append">{{ row.measuringUnit }}</template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <!-- <el-table-column label="计量库存数量" prop="availableCountBase">
              <template slot-scope="{ row, $index }">
                {{ row.availableCountBase }} {{ row.measuringUnit }}
              </template>
            </el-table-column> -->

            <el-table-column
              label="计量库存数量"
              prop="availableCountBase"
              width="220"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                <div v-for="it of row.warehouseList">
                  <span
                    v-if="it.availableCountBase != '0'"
                    @click="chooseInventoryData(row, it, $index)"
                    style="cursor: pointer"
                    >{{ it.name ? it.name : it.warehouse_name }}库存数：<span
                      style="color: green"
                      >{{ it.availableCountBase }}</span
                    >{{ row.measuringUnit }}</span
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column label="领料仓库" prop="warehouseId" width="180">
              <template slot-scope="{ row, $index }">
                <div
                  v-if="
                    Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                    row.isBom == 1
                  "
                >
                  <el-select
                    v-model="row.warehouseIdList"
                    placeholder="请选择"
                    filterable
                    multiple
                    @change="changeWarehouse(row, $index)"
                  >
                    <el-option
                      v-for="item in row.warehouseList"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div v-else-if="clientEnvironmentId == 21">
                  <el-select
                    v-model="row.warehouseId"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option
                      v-for="item in row.warehouseList"
                      :label="item.name"
                      :value="item.id"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>

                <div v-else>
                  <el-select
                    v-model="row.warehouseIdList"
                    placeholder="请选择"
                    filterable
                    multiple
                  >
                    <el-option
                      v-for="item in row.warehouseLists"
                      :label="item.warehouse_name"
                      :value="item.warehouse_id"
                      :key="item.warehouse_id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              label="领料信息"
              prop="warehousePick"
              width="340"
              show-overflow-tooltip
            >
              <template slot-scope="{ $index, row }">
                <div
                  v-for="it of row.warehousePick"
                  :key="it.id"
                  style="display: flex; flex-direction: row"
                >
                  <span>{{ it.warehouseName }}</span
                  >，批次号：{{ it.batchNo }}，出库数：<span
                    style="color: green"
                    >{{ it.demandQuantity }}</span
                  >
                  {{ row.measuringUnit }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="100px">
              <template slot-scope="{ $index, row }">
                <el-link type="danger" @click="removeItem(idx, $index)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <template slot="footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button
        size="mini"
        type="primary"
        :loading="loadingBtn"
        @click="save()"
        >确 定</el-button
      >
    </template>

    <pickingList
      isType="pick"
      ref="pickingListRef"
      @allSelection="allSelection"
    ></pickingList>

    <AssetsDialog
      ref="assetsRef"
      :treeIds="treeId"
      @detailData="detailData"
    ></AssetsDialog>
  </ele-modal>
</template>

<script>
  import pickingList from './pickingList.vue';
  import {
    workorderList,
    getCode,
    getInventoryTotal,
    znworkorderList
  } from '@/api/produce/workOrder';
  import { typeName } from '../common.js';
  import { batchSave, znfindVoucherList } from '@/api/produce/picking';
  import AssetsDialog from './AssetsDialog.vue';

  export default {
    components: {
      pickingList,
      AssetsDialog
    },
    props: {
      workListIds: {
        type: Array,
        default() {
          return [];
        }
      }
    },

    data() {
      return {
        visible: true,
        workList: [],
        rules: {},

        pickCode: null,
        pickName: null,

        typeName,

        tableRules: {},
        loadingBtn: false,
        contentStyleObj: {
          height: ''
        },
        isFullscreen: false,
        tabalHeight: 300,
        treeId: []
        // warehouseIdList: []
      };
    },
    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      dialogDynamicHeight() {
        if (this.isFullscreen) {
          // 全屏时，高度为窗口高度
          console.log(window.innerHeight + 'px', '全屏高度');
          this.tabalHeight = window.innerHeight - 200;
          return window.innerHeight + 'px';
        } else {
          this.tabalHeight = 300;
          return '500px';
        }
      }
    },

    watch: {},
    methods: {
      getList() {
        let param = {
          ids: this.workListIds,
          taskId: this.taskObj.id
        };
        console.log('1111122222', this.clientEnvironmentId);
        if (this.clientEnvironmentId == 21) {
          znworkorderList(param).then((res) => {
            let arr = res.map((e) => {
              e.bomDetailDTOS.map((d) => {
                e.warehouseId =
                  d.warehouseList.length > 0 ? d.warehouseList[0].id : '';
              });
              e.pickList = [...e.bomDetailDTOS];
              e.bomDetailDTOS = [];
              return e;
            });
            this.pickName = res[0].productName + '领料';

            arr[0].pickList.forEach((it) => {
              it.warehouseIdList = [];
              it.warehouseIdList.push(it.warehouseId);

              it.warehouseList.forEach((i) => {
                i.warehouse_name = i.name;
                i.warehouse_id = i.id;
              });
            });

            // arr.bomDetailDTOS.map(v=>{
            //   this.getInventoryTotalFn(v.id)
            // })

            // getInventoryTotal
            // this.workList = arr;
            this.$set(this, 'workList', arr);

            this.getOrderCode();
            this.$forceUpdate();
          });
        } else {
          workorderList(param).then((res) => {
            let arr = res.map((e) => {
              e.bomDetailDTOS.map((d) => {
                e.warehouseId =
                  d.warehouseList.length > 0 ? d.warehouseList[0].id : '';
                // this.getInventoryTotalFn([d.categoryCode])
              });
              e.pickList = [...e.bomDetailDTOS];
              e.bomDetailDTOS = [];
              return e;
            });
            this.pickName = res[0].productName + '领料';

            arr[0].pickList.forEach((it) => {
              it.warehouseIdList = [];
              it.warehouseIdList.push(it.warehouseId);

              it.warehouseList.forEach((i) => {
                i.warehouse_name = i.name;
                i.warehouse_id = i.id;
              });
            });

            console.log(arr, 'e.pickList');

            // arr.bomDetailDTOS.map(v=>{
            //   this.getInventoryTotalFn(v.id)
            // })

            // getInventoryTotal
            // this.workList = arr;
            this.$set(this, 'workList', arr);

            this.getOrderCode();
            // this.getInventoryTotalFn();
            this.$forceUpdate();
          });
        }
      },

      changeWarehouse(item, index) {
        // const data = [];
        // if (item.warehouseIdList.length != 0) {
        //   item.warehouseIdList.forEach((it) => {
        //     const chooseData = item.warehouseList.find((item) => item.id == it);
        //     data.push(chooseData);
        //   });
        // }
        // const pickData = [...data];
        // if (data.length != 0) {
        //   const totalNum = data.reduce((acc, pro) => {
        //     return pro.availableCountBase
        //       ? acc + Number(pro.availableCountBase)
        //       : acc;
        //   }, 0);
        //   this.$set(
        //     this.workList[0].pickList[index],
        //     'availableCountBase',
        //     totalNum
        //   );
        //   this.$set(
        //     this.workList[0].pickList[index],
        //     'warehousePick',
        //     pickData
        //   );
        //   console.log(this.workList[0], 'this.workList[0]');
        //   this.$forceUpdate();
        // } else {
        //   this.$set(this.workList[0].pickList[index], 'warehousePick', []);
        //   this.$set(this.workList[0].pickList[index], 'availableCountBase', 0);
        //   this.$set(this.workList[0].pickList[index], 'demandQuantity', 0);
        // }
      },

      changeInput(item, index) {
        if (Number(item.demandQuantity) >= Number(item.availableCountBase)) {
          this.$set(
            this.workList[0].pickList[index],
            'demandQuantity',
            Number(item.availableCountBase)
          );
          const idsList = [];
          item.warehouseList.forEach((it) => {
            idsList.push(it.warehouse_id);
          });
          this.$set(
            this.workList[0].pickList[index],
            'warehouseIdList',
            idsList
          );
        } else if (!Number(item.demandQuantity)) {
          this.$set(this.workList[0].pickList[index], 'warehouseIdList', []);
        } else {
          const idsList = [];
          let totalNum = 0;
          // item.warehouseList.forEach((it) => {
          //   if(Number(it.availableCountBase))
          // });
          for (let i = 0; i < item.warehouseList.length; i++) {
            totalNum += Number(item.warehouseList[i].availableCountBase);

            if (Number(item.demandQuantity) > totalNum) {
              idsList.push(item.warehouseList[i].warehouse_id);
            } else {
              idsList.push(item.warehouseList[i].warehouse_id);
              break;
            }
          }

          this.$set(
            this.workList[0].pickList[index],
            'warehouseIdList',
            idsList
          );
        }

        console.log(item);
      },

      detailData(data, dimension, index) {
        const itemData = [];
        data.forEach((it) => {
          itemData.push({
            batchNo: it.batchNo,
            demandQuantity: it.measureQuantity,
            warehouseId: it.warehouseId,
            warehouseName: it.warehouseName
          });
        });

        const listData = [];

        if (this.workList[0].pickList[index].warehousePick) {
          this.workList[0].pickList[index].warehousePick.forEach((it) => {
            listData.push(it);
          });
        }

        itemData.forEach((it) => {
          listData.push(it);
        });

        const warehouseIdList = [];
        listData.forEach((it) => {
          warehouseIdList.push(it.warehouseId);
        });

        const uniqueArr = Array.from(new Set(warehouseIdList));

        this.$set(this.workList[0].pickList[index], 'warehousePick', listData);
        this.$set(
          this.workList[0].pickList[index],
          'warehouseIdList',
          uniqueArr
        );

        const total = this.workList[0].pickList[index].warehousePick.reduce(
          (acc, pro) => {
            return pro.demandQuantity ? acc + Number(pro.demandQuantity) : acc;
          },
          0
        );

        this.$set(this.workList[0].pickList[index], 'demandQuantity', total);

        this.$forceUpdate();
      },

      warehouseChangeNum(item, index) {
        item.warehousePick.forEach((it) => {
          if (Number(it.demandQuantity) > Number(it.availableCountBase)) {
            it.demandQuantity = it.availableCountBase;
          }

          const totalNum = item.warehousePick.reduce((acc, pro) => {
            return pro.demandQuantity ? acc + Number(pro.demandQuantity) : acc;
          }, 0);

          this.$set(
            this.workList[0].pickList[index],
            'demandQuantity',
            totalNum
          );
        });
      },

      async getInventoryTotalFn(id) {
        let ids = [];
        this.workList.map((item) => {
          item.pickList.map((pitem) => {
            ids.push(pitem.categoryCode);
          });
        });

        if (ids.length == 0) {
          return;
        }

        const res = await getInventoryTotal(ids);
        res.map((ritem) => {
          this.workList.map((item) => {
            item.pickList.map((pitem) => {
              if (pitem.categoryCode == ritem.code) {
                pitem.availableCountBase = ritem.availableCountBase;
              }
            });
          });
        });
        console.log('cashasisasa', res);
      },

      async getOrderCode() {
        this.pickCode = await getCode('pick_order_code');
      },

      removeItem(idx, index) {
        this.workList[idx].pickList.splice(index, 1);
      },

      handleClose() {
        this.loadingBtn = false;
        this.$emit('close', false);
      },

      openPicking(id, item) {
        this.$refs.pickingListRef.open(id, item, '选择列表');
      },

      chooseInventoryData(item, warehouseItem, index) {
        console.log(item, warehouseItem, index, '111111');
        this.treeId.push(item.rootCategoryLevelId);
        this.$refs.assetsRef.open(item, warehouseItem, index);
      },

      allSelection(id, list) {
        list.forEach((item) => {
          item.warehouseList = item.warehouseList
            ? item.warehouseList
            : item.warehouseLists;
        });

        // list.forEach((it) => {
        //   if (it.warehouseList.length != 0) {
        //     if (!it.warehouseIdList) {
        //       it.warehouseIdList = [];
        //       it.warehouseIdList.push(it.warehouseList[0].warehouse_id);
        //     }
        //   }
        // });

        this.workList.forEach((e) => {
          if (e.id == id) {
            e.pickList = list;
            this.$forceUpdate();
          }
        });
      },

      save() {
        if (this.workList.length > 0) {
          let bol;
          let _i;
          bol = this.workList.every((e, i) => {
            _i = i;
            return (
              Object.prototype.hasOwnProperty.call(e, 'pickList') &&
              e.pickList.length > 0
            );
          });

          if (!bol) {
            this.$message.warning(
              `生成工单${this.workList[_i].code}领料不能为空`
            );
            return false;
          }
        }

        if (this.workList.length > 0) {
          let name;
          let bol2;
          let _i;

          this.workList.forEach((e, i) => {
            _i = i;
            console.log(e.pickList);
            bol2 = e.pickList.every((y) => {
              name = y.name;
              return (
                Object.prototype.hasOwnProperty.call(y, 'demandQuantity') &&
                Number(y.demandQuantity) > 0
              );
            });
          });

          if (!bol2) {
            this.$message.warning(
              `${this.workList[_i].code}的${name}数量不能为空`
            );
            return false;
          }
        }

        let _arr = [];
        _arr = this.workList.map((m) => {
          m.instanceList = [];
          m.bomDetailDTOSList = [];
          m.pickList.forEach((e) => {
            if (
              Object.prototype.hasOwnProperty.call(e, 'isBom') &&
              e.isBom == 1
            ) {
              m.bomDetailDTOSList.push(e);
            } else {
              m.instanceList.push(e);
            }
          });

          m.workOrderId = m.id;

          return {
            ...m
          };
        });
        this.loadingBtn = true;

        // _arr.forEach((item) => {
        //   item.pickList.forEach((it) => {
        //     const warehousePick = [];
        //     if (it.warehouseIdList.length != 0) {
        //       it.warehouseIdList.forEach((i) => {
        //         const data = it.warehouseList.find((ii) => ii.id == i);
        //         if (data) {
        //           warehousePick.push({
        //             availableCountBase: data.availableCountBase,
        //             demandQuantity: data.demandQuantity,
        //             warehouseId: data.id
        //           });
        //         }
        //       });
        //     }
        //     it.warehousePick = warehousePick;
        //   });
        // });
        console.log(_arr, '_arr');
        // return;

        // if (this.clientEnvironmentId == 21) {
        //   let param = {
        //     workOrderId: this.workListIds[0],
        //     pickingCode: this.pickCode
        //   };
        //   znfindVoucherList(param).then((res) => {
        //     this.loadingBtn = false;
        //     this.$message.success('领料成功');
        //   });
        // }
        let param = {
          allPickList: _arr,
          pickName: this.pickName,
          pickCode: this.pickCode
        };
        batchSave(param)
          .then((res) => {
            this.loadingBtn = false;
            this.$message.success('领料成功');
            this.$emit('close', true);
          })
          .catch((err) => {
            this.loadingBtn = false;
          });
      },

      fullscreen() {
        this.isFullscreen = !this.isFullscreen;
      }
    },

    created() {
      this.getList();
    }
  };
</script>

<style lang="scss" scoped>
  .table_content {
    margin-bottom: 10px;
  }

  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }

  ::v-deep .pick-input.el-input--medium .el-input__inner {
    height: 22px;
    line-height: 22px;
  }

  // ::v-deep .el-select__tags {
  //   flex-wrap: nowrap;
  //   overflow: auto;
  // }

  // ::v-deep .el-select__tags-text {
  //   max-width: 90px;
  // }

  // ::v-deep .el-select__tags::-webkit-scrollbar {
  //   height: 2px !important;
  // }
</style>

<style>
  /* :v-deep .el-form-item__error {
    bottom: -6px !important;
  } */
</style>