kd-aiot-frontend-mes/src/views/pick/pickApply/components/addPick.vue

<template>
    <el-dialog
      title="新建领料单"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="80%"
    >
      <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"></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">
                <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="300"
              :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 }}
                </template>
              </el-table-column>
  
              <el-table-column label="类型"  prop="rootCategoryLevelId"  width="80">
                <template slot-scope="{ row, $index }">
                  <!-- <el-tag>{{ typeName[Number(row.rootCategoryLevelId)] }}</el-tag> -->
                </template>
              </el-table-column>
  
  
         
  
              <el-table-column label="编码" prop="assetCode">
                <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">
                <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"> </el-table-column>
              <el-table-column label="规格" prop="specification">
              </el-table-column>
              <el-table-column label="批次号" prop="batchNo"> </el-table-column>
  
              <el-table-column label="数量" prop="demandQuantity">
                <template slot-scope="{ row, $index }">
                  <el-form-item>
                    <el-input
                      v-model="row.demandQuantity"
                      @input="
                        row.demandQuantity > row.availableCountBase
                          ? (row.demandQuantity = row.availableCountBase)
                          : row.demandQuantity
                      "
                      size="mini"
                    >
                      <template slot="append">{{ row.unit }}</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="warehouseId">
                <template slot-scope="{ row, $index }">
                  <div
                    v-if="
                      Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                      row.isBom == 1
                    "
                  >
                    <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.warehouseId" placeholder="请选择" filterable>
                      <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="操作" fixed="right" 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" @click="save()">确 定</el-button>
      </template>
  
      <!-- <pickingList
        isType="pick"
        ref="pickingListRef"
        @allSelection="allSelection"
      ></pickingList> -->
    </el-dialog>
  </template>
  
  <script>
    // import pickingList from './pickingList.vue';
    import { workorderList, getCode } from '@/api/produce/workOrder';
    // import { typeName } from '../common.js';
    import { batchSave } from '@/api/produce/picking';
  
    export default {
      components: {
        // pickingList
      },
      props: {

      },
      data() {
        return {
          visible: true,
          workList: [],
          rules: {},
  
          pickCode: null,
          pickName: null,
  
        //   typeName,
  
          tableRules: {},

          workListIds: []
        };
      },
      computed: {
        taskObj() {
          return this.$store.state.user.taskObj;
        }
      },
  
      watch: {},
      methods: {
        getList() {
          let param = {
            ids: this.workListIds,
            taskId: this.taskObj.id
          };
          workorderList(param).then((res) => {
            let arr = res.map((e) => {
              e.pickList = [...e.bomDetailDTOS];
              e.bomDetailDTOS = [];
              return e;
            });
            this.workList = arr;
            this.getOrderCode();
            this.$forceUpdate();
          });
        },
  
        async getOrderCode() {
          this.pickCode = await getCode('pick_order_code');
        },
  
        removeItem(idx, index) {
          this.workList[idx].pickList.splice(index, 1);
        },
  
        handleClose() {
          this.$emit('close', false);
        },
  
        openPicking(id, item) {
          this.$refs.pickingListRef.open(id, item);
        },
  
        allSelection(id, list) {
          this.workList.forEach((e) => {
            if (e.id == id) {
              e.pickList = list;
              this.$forceUpdate();
            }
          });
        },
  
        save() {
          console.log(this.workList);
          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;
            delete m.id;
  
            return {
              ...m
            };
          });
  
          let param = {
            allPickList: _arr,
            pickName: this.pickName,
            pickCode: this.pickCode
          };
  
          batchSave(param).then((res) => {
            this.$message.success('领料成功');
            this.$emit('close', true);
          });
        }
      },
  
      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;
      }
    }
  </style>
  
  <style>
    :v-deep .el-form-item__error {
      bottom: -6px !important;
    }
  </style>