1

src/components/makeBOM/index.vue

@@ -53,8 +53,19 @@
             </el-table-column>
             <el-table-column label="颜色" width="120">
               <template #default="{ row, $index }">
-                <el-form-item :prop="'bomSpecList.' + $index + '.colour'" style="width: 100%">
-                  <el-input v-model="row.colour" placeholder="请输入颜色" @change="calculatePrice(row)" />
+                <el-form-item :prop="'bomSpecList.' + $index + '.colourOne'" :rules="rules.colourOne" style="width: 100%">
+                  <el-select v-model="row.colourOne" placeholder="颜色" style="width: 100%" @change="changeColour(row)">
+                    <el-option v-for="item in useUserStore().allDict['bom_colour']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
+                  </el-select>
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="颜色" width="120" v-if="formData.data.chromatophore != 10">
+              <template #default="{ row, $index }">
+                <el-form-item :prop="'bomSpecList.' + $index + '.colourTwo'" :rules="rules.colourTwo" style="width: 100%">
+                  <el-select v-model="row.colourTwo" placeholder="颜色" style="width: 100%" @change="changeColour(row)">
+                    <el-option v-for="item in useUserStore().allDict['bom_colour']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
+                  </el-select>
                 </el-form-item>
               </template>
             </el-table-column>
@@ -221,6 +232,7 @@
 import byForm from "/src/components/byForm/index";
 import { ElMessage } from "element-plus";
 import Editor from "/src/components/Editor/index.vue";
+import { nextTick } from "vue";
 
 const { proxy } = getCurrentInstance();
 const emit = defineEmits(["clickCancel"]);
@@ -410,6 +422,8 @@ const rules = ref({
   bomClassifyId: [{ required: true, message: "请选择类目", trigger: "change" }],
   name: [{ required: true, message: "请输入品名", trigger: "blur" }],
   code: [{ required: true, message: "请输入品号", trigger: "blur" }],
+  colourTwo: [{ required: true, message: "请选择颜色", trigger: "change" }],
+  colourOne: [{ required: true, message: "请选择颜色", trigger: "change" }],
 });
 const classifyList = ref([]);
 const getBomClassify = () => {
@@ -531,29 +545,48 @@ onMounted(() => {
   formOption.disabled = props.detailStatus;
   if (props.rowData && props.rowData.id) {
     proxy.post("/bom/detail", { id: props.rowData.id }).then((res) => {
-      for (var text in res) {
-        formData.data[text] = res[text];
-      }
-      if (!props.detailStatus) {
-        editor.value.changeHtml(formData.data.detailText);
-      }
-      let list = [props.rowData.id];
       if (res.bomSpecList && res.bomSpecList.length > 0) {
-        list = list.concat(res.bomSpecList.map((item) => item.id));
-      }
-      proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
-        if (fileObj) {
-          if (fileObj[props.rowData.id] && fileObj[props.rowData.id].length > 0) {
-            formData.data.mainImgFile = fileObj[props.rowData.id][0];
+        res.bomSpecList = res.bomSpecList.map((item) => {
+          if (item.colour.includes("+")) {
+            return {
+              ...item,
+              colourOne: item.colour.split("+")[0],
+              colourTwo: item.colour.split("+")[1],
+            };
+          } else {
+            return {
+              ...item,
+              colourOne: item.colour,
+            };
           }
-          if (formData.data.bomSpecList && formData.data.bomSpecList.length > 0) {
-            for (let i = 0; i < formData.data.bomSpecList.length; i++) {
-              if (fileObj[formData.data.bomSpecList[i].id] && fileObj[formData.data.bomSpecList[i].id].length > 0) {
-                formData.data.bomSpecList[i].imgFile = fileObj[formData.data.bomSpecList[i].id][0];
+        });
+      }
+      nextTick(() => {
+        for (var text in res) {
+          formData.data[text] = res[text];
+        }
+        console.log(proxy.deepClone(formData.data));
+        if (!props.detailStatus) {
+          editor.value.changeHtml(formData.data.detailText);
+        }
+        let list = [props.rowData.id];
+        if (res.bomSpecList && res.bomSpecList.length > 0) {
+          list = list.concat(res.bomSpecList.map((item) => item.id));
+        }
+        proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
+          if (fileObj) {
+            if (fileObj[props.rowData.id] && fileObj[props.rowData.id].length > 0) {
+              formData.data.mainImgFile = fileObj[props.rowData.id][0];
+            }
+            if (formData.data.bomSpecList && formData.data.bomSpecList.length > 0) {
+              for (let i = 0; i < formData.data.bomSpecList.length; i++) {
+                if (fileObj[formData.data.bomSpecList[i].id] && fileObj[formData.data.bomSpecList[i].id].length > 0) {
+                  formData.data.bomSpecList[i].imgFile = fileObj[formData.data.bomSpecList[i].id][0];
+                }
               }
             }
           }
-        }
+        });
       });
     });
   }
@@ -602,6 +635,15 @@ const calculatePrice = (item) => {
       });
   }
 };
+const changeColour = (item) => {
+  nextTick(() => {
+    if (item.colourOne && item.colourTwo) {
+      item.colour = item.colourOne + "+" + item.colourTwo;
+    } else {
+      item.colour = item.colourOne ? item.colourOne : item.colourTwo;
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -658,4 +700,7 @@ const calculatePrice = (item) => {
   text-align: center;
   border: 1px dashed var(--el-border-color);
 }
+::v-deep(.el-table .cell) {
+  padding: 0 4px;
+}
 </style>