✨ feat: 修改条码生成逻辑

klp-ui/src/components/KLPService/RawMaterialSelect/index.vue

@@ -1,45 +1,111 @@
 <template>
-  <el-select
-    v-model="selected"
-    :placeholder="placeholder"
-    filterable
-    clearable
-    :loading="loading"
-    @change="onChange"
-    style="width: 100%"
-    :value-key="'rawMaterialId'"
-  >
-    <el-option
-      v-for="item in options"
-      :key="item.rawMaterialId"
-      :label="`${item.rawMaterialName}（${item.rawMaterialCode}）`"
-      :value="item.rawMaterialId"
-    >
-      <div class="option-label">
-        <span class="material-name">{{ item.rawMaterialName }}</span>
-        <span class="material-code">{{ item.rawMaterialCode }}</span>
+  <span>
+    <el-select v-model="selected" :placeholder="placeholder" filterable clearable :loading="loading" @change="onChange"
+      style="width: 100%" :value-key="'rawMaterialId'">
+      <template #empty>
+        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到原材料，点击添加</el-button>
+        <div v-else style="padding: 10px;">未搜索到原材料</div>
+      </template>
+      <el-option v-for="item in options" :key="item.rawMaterialId"
+        :label="`${item.rawMaterialName}（${item.rawMaterialCode}）`" :value="item.rawMaterialId">
+        <div class="option-label">
+          <span class="material-name">{{ item.rawMaterialName }}</span>
+          <span class="material-code">{{ item.rawMaterialCode }}</span>
+        </div>
+      </el-option>
+    </el-select>
+    <el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加原材料" width="700px" append-to-body>
+      <el-steps align-center :active="activeStep" finish-status="success">
+        <!-- 新增原材料的步骤 -->
+        <el-step title="创建原材料"></el-step>
+        <!-- 创建BOM的步骤 -->
+        <el-step title="填写BOM信息"></el-step>
+      </el-steps>
+
+      <el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="原材料编号" prop="productCode">
+              <el-input v-model="addForm.productCode" placeholder="请输入原材料编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="原材料名称" prop="productName">
+              <el-input v-model="addForm.productName" placeholder="请输入原材料名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="owner">
+              <el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="计量单位" prop="unit">
+              <el-input v-model="addForm.unit" placeholder="请输入计量单位" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div v-if="activeStep === 0" slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">创建原材料</el-button>
+        <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-option>
-  </el-select>
+
+      <BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
+    </el-dialog>
+  </span>
+
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import { addRawMaterial } from '@/api/wms/rawMaterial';
+import { BomPanel } from '@/components/KLPService/BomPanel/index.vue';
 
 export default {
   name: "RawMaterialSelect",
+  components: {
+    BomPanel
+  },
   props: {
     value: [String, null],
     placeholder: {
       type: String,
       default: "请选择原材料"
+    },
+    canAdd: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       options: [],
       selected: this.value,
-      loading: false
+      loading: false,
+      addForm: {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'raw'
+      },
+      addDialogVisible: false,
+      rules: {
+        productCode: [
+          { required: true, message: "原材料编号不能为空", trigger: "blur" }
+        ],
+        productName: [
+          { required: true, message: "原材料名称不能为空", trigger: "blur" }
+        ],
+        owner: [
+          { required: true, message: "负责人不能为空", trigger: "blur" }
+        ],
+      },
+      buttonLoading: false,
+      itemId: undefined,
+      activeStep: 0,
+      bomId: undefined,
     };
   },
   watch: {
@@ -61,6 +127,49 @@ export default {
       const rawMaterial = this.options.find(p => p.rawMaterialId === val);
       this.$emit('change', rawMaterial);
     },
+    add() {
+      this.addDialogVisible = true;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'raw'
+      };
+      this.bomId = undefined;
+      this.itemId = undefined;
+    },
+    handleBom(bom) {
+      this.bomId = bom.bomId;
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          // console.log(this.addForm);
+          addRawMaterial(this.addForm).then(res => {
+            this.$modal && this.$modal.msgSuccess("创建原材料成功");
+            this.$store.dispatch('category/getRawMaterialMap');
+            console.log(res);
+            this.itemId = res.rawMaterialId;
+            this.$emit('input', res.rawMaterialId);
+            this.activeStep = 1;
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    cancel() {
+      this.addDialogVisible = false;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'raw'
+      };
+    }
   }
 };
 </script>
@@ -71,10 +180,12 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .material-name {
   font-size: 14px;
   color: #333;
 }
+
 .material-code {
   font-size: 12px;
   color: #999;