✨ feat: 修改条码生成逻辑

klp-ui/src/components/KLPService/BomPanel/BomItem.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="属性名称" align="center" prop="attrKey" />
+      <el-table-column label="属性值" align="center" prop="attrValue" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改BOM 明细，存放属性–值对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="属性名称" prop="attrKey">
+          <el-input v-model="form.attrKey" placeholder="请输入属性名称" />
+        </el-form-item>
+        <el-form-item label="属性值" prop="attrValue">
+          <el-input v-model="form.attrValue" placeholder="请输入属性值" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/wms/bomItem";
+
+export default {
+  name: "BomItem",
+  dicts: ['common_swicth'],
+  props: {
+    bomId: [String, Number],
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // BOM 明细，存放属性–值表格数据
+      bomItemList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        isEnabled: undefined,
+      },
+      // 表单参数
+      form: {
+        bomId: this.bomId,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询BOM 明细，存放属性–值列表 */
+    getList() {
+      this.loading = true;
+      listBomItem(this.queryParams).then(response => {
+        this.bomItemList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: undefined,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.itemId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加BOM 明细，存放属性–值";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const itemId = row.itemId || this.ids
+      getBomItem(itemId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改BOM 明细，存放属性–值";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.itemId != null) {
+            updateBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const itemIds = row.itemId || this.ids;
+      this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delBomItem(itemIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        this.$store.dispatch('category/getBomMap');
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/bomItem/export', {
+        ...this.queryParams
+      }, `bomItem_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,243 @@
+<template>
+  <div class="bom-container">
+    <!-- 当没有传入id时显示创建按钮 -->
+    <div v-if="!id" class="create-bom">
+      <el-button 
+        type="primary"
+        :loading="createLoading"
+        :disabled="createLoading"
+        @click="handleCreate"
+        class="create-button"
+      >
+        <template v-if="!createLoading">
+          <i class="el-icon-plus"></i> 创建BOM
+        </template>
+        <template v-else>
+          创建中...
+        </template>
+      </el-button>
+    </div>
+
+    <!-- 当传入id时显示数据区域 -->
+    <div v-else class="bom-details">
+      <div v-if="loading" class="loading-indicator">
+        加载中...
+        <div class="spinner"></div>
+      </div>
+      
+      <div v-if="error" class="error-message">
+        加载失败: {{ error }}
+        <button @click="fetchData" class="retry-button">重试</button>
+      </div>
+
+      <div v-if="data && !loading">
+        <el-form label-width="100px">
+          <el-form-item label="BOM名称">
+            <el-input v-model="info.bomName" @blur="handleUpdateBom"/>
+          </el-form-item>
+          <el-form-item label="BOM编码">
+            <el-input v-model="info.bomCode" @blur="handleUpdateBom"/>
+          </el-form-item>
+        </el-form>
+        <BomItem :bomId="id" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addBom, updateBom, getBom } from '@/api/wms/bom';
+import { listBomItem } from '@/api/wms/bomItem';
+import { updateProduct } from '@/api/wms/product';
+import { updateRawMaterial } from '@/api/wms/rawMaterial';
+
+import BomItem from './BomItem.vue';
+
+export default {
+  props: {
+    id: [String, Number],   // 支持字符串或数字类型的ID
+    itemId: [String, Number],
+    type: String            // 可选类型参数
+  },
+  components: {
+    BomItem
+  },
+  data() {
+    return {
+      loading: false,
+      error: null,
+      data: null,
+      info: {},
+      createLoading: false,
+    };
+  },
+  watch: {
+    id: {
+      immediate: true, // 组件创建时立即执行
+      handler(newVal) {
+        if (newVal) {
+          console.log('侦听到变化')
+          this.fetchBomDetails();
+        } else {
+          // 没有ID时重置数据
+          this.data = null;
+          this.error = null;
+        }
+      }
+    }
+  },
+  methods: {
+    async fetchBomDetails() {
+      try {
+        this.loading = true;
+        this.error = null;
+        
+        // 实际项目中替换为真实API调用
+        const response = await listBomItem({
+          bomId: this.id
+        })
+        this.data = response.rows;
+
+        const response2 = await getBom(this.id)
+        this.info = response2.data;
+      } catch (err) {
+        this.error = err.message || '请求失败，请重试';
+        console.error('获取BOM详情失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    async handleCreate() {
+      // 防止重复点击
+      if (this.createLoading) return;
+      
+      try {
+        this.createLoading = true;
+        const bomResponse = await addBom({
+          bomName: (this.type == 'product' ? '产品BOM' : '原材料BOM') + new Date().getTime(),
+          bomCode: (this.type == 'product' ? 'P' : 'R') + new Date().getTime()
+        });
+        
+        this.$message.success('创建BOM成功');
+        const bomData = bomResponse.data;
+
+        // 根据类型更新产品/原材料
+        if (this.type == 'product' && this.itemId) {
+          await updateProduct({
+            productId: this.itemId,
+            bomId: bomData.bomId
+          });
+        } else if (this.type == 'raw_material' && this.itemId) {
+          await updateRawMaterial({
+            rawMaterialId: this.itemId,
+            bomId: bomData.bomId
+          });
+        }
+        this.$store.dispatch('category/getBomMap');
+        
+        // 触发事件
+        this.$emit('addBom', bomData);
+      } catch (error) {
+        console.error('创建失败:', error);
+        this.$message.error(`创建失败: ${error.message || '未知错误'}`);
+      } finally {
+        this.createLoading = false;
+      }
+    },
+    
+    handleUpdateBom() {
+      this.$message.warning('正在更新BOM...');
+      updateBom({
+        bomId: this.id,
+        bomName: this.info.bomName,
+        bomCode: this.info.bomCode
+      }).then(_ => {
+        this.$message.success('更新BOM成功');
+        this.$store.dispatch('category/getBomMap');
+      })
+    },
+
+    fetchData() {
+      // 重试获取数据
+      if (this.id) this.fetchBomDetails();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.create-bom {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.create-button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.create-button:hover {
+  background-color: #388E3C;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: #666;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.error-message {
+  padding: 20px;
+  background-color: #ffebee;
+  color: #d32f2f;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.retry-button {
+  padding: 8px 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 120px;
+}
+
+.bom-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border-left: 4px solid #2196F3;
+}
+
+.bom-info p {
+  margin: 10px 0;
+}
+</style>

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

@@ -1,30 +1,65 @@
 <template>
-  <el-select
-    v-model="selected"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    filterable
-    clearable
-    @change="onChange"
-    style="width: 100%"
-    :value-key="'productId'"
-  >
-    <el-option
-      v-for="item in productOptions"
-      :key="item.productId"
-      :label="`${item.productName}（${item.productCode}）`"
-      :value="item.productId"
-    >
-      <div class="option-label">
-        <span class="product-name">{{ item.productName }}</span>
-        <span class="product-code">{{ item.productCode }}</span>
+  <span>
+    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
+      @change="onChange" :value-key="'productId'">
+      <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 productOptions" :key="item.productId"
+        :label="`${item.productName}（${item.productCode}）`" :value="item.productId">
+        <div class="option-label">
+          <span class="product-name">{{ item.productName }}</span>
+          <span class="product-code">{{ item.productCode }}</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 { listProduct } from '@/api/wms/product';
+import { listProduct, addProduct } from '@/api/wms/product';
+import BomPanel from '../BomPanel/index.vue';
 
 export default {
   name: 'ProductSelect',
@@ -34,12 +69,42 @@ export default {
     placeholder: {
       type: String,
       default: '请选择产品'
-    }
+    },
+    canAdd: {
+      default: false,
+      type: Boolean
+    },
+  },
+  components: {
+    BomPanel
   },
   data() {
     return {
       productOptions: [],
-      selected: this.value
+      selected: this.value,
+      addForm: {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      },
+      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: {
@@ -63,6 +128,49 @@ export default {
       // 通过val找到item
       const product = this.productOptions.find(p => p.productId === val);
       this.$emit('change', product);
+    },
+    add() {
+      this.addDialogVisible = true;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      };
+      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);
+          addProduct(this.addForm).then(res => {
+            this.$modal && this.$modal.msgSuccess("创建产品成功");
+            this.getProductOptions();
+            console.log(res);
+            this.itemId = res.productId;
+            this.$emit('input', res.productId);
+            this.activeStep = 1;
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    cancel() {
+      this.addDialogVisible = false;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      };
     }
   }
 };
@@ -74,10 +182,12 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .product-name {
   font-size: 14px;
   color: #333;
 }
+
 .product-code {
   font-size: 12px;
   color: #999;

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;

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

@@ -1,45 +1,110 @@
 <template>
-  <el-select
-    v-model="selected"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    filterable
-    clearable
-    @change="onChange"
-    style="width: 100%"
-    :value-key="'productId'"
-  >
-    <el-option
-      v-for="item in productOptions"
-      :key="item.productId"
-      :label="`${item.productName}（${item.productCode}）`"
-      :value="item.productId"
-    >
-      <div class="option-label">
-        <span class="product-name">{{ item.productName }}</span>
-        <span class="product-code">{{ item.productCode }}</span>
+  <span>
+    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
+      @change="onChange" :value-key="'productId'">
+      <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 productOptions" :key="item.productId"
+        :label="`${item.productName}（${item.productCode}）`" :value="item.productId">
+        <div class="option-label">
+          <span class="product-name">{{ item.productName }}</span>
+          <span class="product-code">{{ item.productCode }}</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 { listProduct } from '@/api/wms/product';
+import { listProduct, addProduct } from '@/api/wms/product';
+import BomPanel from '../BomPanel/index.vue';
 
 export default {
-  name: 'SemiSelect',
+  name: 'ProductSelect',
   props: {
     value: [String, null],
     disabled: Boolean,
     placeholder: {
       type: String,
-      default: '请选择产品'
-    }
+      default: '请选择半成品'
+    },
+    canAdd: {
+      default: false,
+      type: Boolean
+    },
+  },
+  components: {
+    BomPanel
   },
   data() {
     return {
       productOptions: [],
-      selected: this.value
+      selected: this.value,
+      addForm: {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'semi'
+      },
+      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: {
@@ -63,6 +128,49 @@ export default {
       // 通过val找到item
       const product = this.productOptions.find(p => p.productId === val);
       this.$emit('change', product);
+    },
+    add() {
+      this.addDialogVisible = true;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'semi'
+      };
+      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);
+          addProduct(this.addForm).then(res => {
+            this.$modal && this.$modal.msgSuccess("创建半成品成功");
+            this.getProductOptions();
+            console.log(res);
+            this.itemId = res.productId;
+            this.$emit('input', res.productId);
+            this.activeStep = 1;
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    cancel() {
+      this.addDialogVisible = false;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'semi'
+      };
     }
   }
 };
@@ -74,10 +182,12 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .product-name {
   font-size: 14px;
   color: #333;
 }
+
 .product-code {
   font-size: 12px;
   color: #999;