量产申请、制作图片与颜色选择添加

src/components/ImageUpload/index.vue

@@ -118,7 +118,7 @@ export default {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
       if(findex > -1) {
         this.fileList.splice(findex, 1);
-        this.$emit("onRemoved", this.listToString(this.fileList));
+        this.$emit("onRemoved", this.listToString(this.fileList), this);
       }
     },
     // 上传成功回调
@@ -128,7 +128,7 @@ export default {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
         this.number = 0;
-        this.$emit("onUploaded", this.listToString(this.fileList));
+        this.$emit("onUploaded", this.listToString(this.fileList), this);
         this.$modal.closeLoading();
       }
     },

src/views/mes/pro/productionMake/productionMakeApply.vue

@@ -107,10 +107,8 @@
         align="center"
         prop="identifyingDate"
       />
-      <el-table-column label="印刷正面颜色" width="120" align="center" prop="printingFrontcolor" />
-      <el-table-column label="印刷背面颜色" width="120" align="center" prop="printingBackcolor" />
-      <el-table-column label="产品正面" width="120" align="center" prop="frontImg" />
-      <el-table-column label="产品背面" width="120" align="center" prop="backImg" />
+      <el-table-column label="印刷正面颜色" width="120" align="center" prop="printingFrontcolorName" />
+      <el-table-column label="印刷背面颜色" width="120" align="center" prop="printingBackcolorName" />
       <el-table-column label="测试标准" align="center" prop="testStandard" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column

src/views/mes/pro/productionMake/productionMakeInfo.vue

@@ -74,38 +74,45 @@
         <el-row>
           <el-col :md="8" :xs="12">
             <el-form-item label="印刷正面颜色" prop="printingFrontcolor">
-              <el-input v-model="form.printingFrontcolor" placeholder="请输入印刷正面颜色">
+              <el-input v-model="form.printingFrontcolorName"
+                        readonly
+                        placeholder="请输入印刷正面颜色">
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  @click="$refs['printingFrontcolorSelect'].showFlag = true"
+                ></el-button>
               </el-input>
+              <ColorSelect
+                ref="printingFrontcolorSelect"
+                @onSelected="onPrintingFrontcolorSelected"
+              >
+              </ColorSelect>
             </el-form-item>
           </el-col>
           <el-col :md="8" :xs="12">
             <el-form-item label="印刷背面颜色" prop="printingBackcolor">
               <el-input
-                v-model="form.printingBackcolor"
+                readonly
+                v-model="form.printingBackcolorName"
                 placeholder="请输入印刷背面颜色"
-              ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :md="8" :xs="12">
-            <el-form-item label="产品正面" prop="frontImg">
-              <el-input
-                v-model="form.frontImg"
-                placeholder="请选择产品正面"
-              ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :md="8" :xs="12">
-            <el-form-item label="产品背面" prop="backImg">
-              <el-input
-                v-model="form.backImg"
-                placeholder="请输入产品背面"
-              ></el-input>
+              >
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  @click="$refs['printingBackcolorSelect'].showFlag = true"
+                ></el-button>
+              </el-input>
+              <ColorSelect
+                ref="printingBackcolorSelect"
+                @onSelected="onPrintingBackcolorSelected"
+              >
+              </ColorSelect>
             </el-form-item>
           </el-col>
 
         </el-row>
 
-
         <el-row>
           <el-col :md="8" :xs="12">
             <el-form-item label="备注" prop="remark">
@@ -118,6 +125,19 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :md="8" :xs="12">
+            <el-form-item label="产品正面" prop="frontImg">
+              <ImageUpload :limit="1" :value="form.frontImg" fieldName="frontImg" :fileSize="5"
+                           @onUploaded="handleImgUploaded" @onRemoved="handleImgRemoved"></ImageUpload>
+            </el-form-item>
+          </el-col>
+          <el-col :md="8" :xs="12">
+            <el-form-item label="产品背面" prop="backImg">
+              <ImageUpload :limit="1" :value="form.backImg" fieldName="backImg" :fileSize="5" @onUploaded="handleImgUploaded" @onRemoved="handleImgRemoved"></ImageUpload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <el-tabs type="border-card" @tab-click="tabClick">
@@ -140,13 +160,14 @@ import ItemSelect from "@/components/itemSelect/single.vue";
 import RoutesProcessSelect from "@/components/routesProcessSelect/index.vue";
 import { listRouteprocess } from "@/api/mes/pro/routeprocess";
 import { closeOpenPage } from "@/plugins/tab";
+import ColorSelect from "@/components/colorSelect/index.vue";
 
 //新增方法的js
 import { listProductionMake, getProductionMake, delProductionMake, addProductionMake, updateProductionMake } from "@/api/mes/pro/productionMake";
 import { getProductionRequest } from "@/api/mes/pro/productionRequest";
 
 export default {
-  components: { ProogingBom, ProogingProcess, ItemSelect, RoutesProcessSelect },
+  components: { ProogingBom, ProogingProcess, ItemSelect, RoutesProcessSelect, ColorSelect },
   dicts: [],
   provide() {
     return {
@@ -184,8 +205,10 @@ export default {
         identifyingDate: null,
         printingFrontcolor: null,
         printingBackcolor: null,
-        shoeimg: null,
-        prototype: null,
+        printingFrontcolorName: null,
+        printingBackcolorName: null,
+        frontImg: null,
+        backImg: null,
         productionMakeStatus: null,
         createBy: null,
         createTime: null,
@@ -341,8 +364,10 @@ export default {
         identifyingDate: null,
         printingFrontcolor: null,
         printingBackcolor: null,
-        shoeimg: null,
-        prototype: null,
+        printingFrontcolorName: null,
+        printingBackcolorName: null,
+        frontImg: null,
+        backImg: null,
         createBy: null,
         createTime: null,
         updateBy: null,
@@ -352,6 +377,31 @@ export default {
       this.$refs["ProogingProcessRef"].resetState();
       this.gCode();
     },
+    onPrintingBackcolorSelected(obj) {
+      if (obj != undefined && obj != null) {
+        obj.forEach((element) => {
+          this.form.printingBackcolor = element.colorId;
+          this.form.printingBackcolorName = element.colorName;
+        });
+      }
+    },
+    onPrintingFrontcolorSelected(obj) {
+      if (obj != undefined && obj != null) {
+        obj.forEach((element) => {
+          this.form.printingFrontcolor = element.colorId;
+          this.form.printingFrontcolorName = element.colorName;
+        });
+      }
+    },
+    //图片上传成功
+    handleImgUploaded(imgUrl, obj){
+      this.form[obj.$attrs.fieldName] = imgUrl;
+    },
+    //图片移除
+    handleImgRemoved(imgUrl, obj){
+      this.form[obj.$attrs.fieldName] = null;
+    },
+
   },
 };
 </script>

src/views/mes/pro/productiorequest/requestInfoAdd.vue

@@ -150,14 +150,6 @@
             </el-form-item>
           </el-col>
 
-          <el-col :md="8" :xs="12">
-            <el-form-item label="鞋图" prop="shoeImg">
-              <el-input
-                v-model="form.shoeImg"
-                placeholder="请选鞋图"
-              ></el-input>
-            </el-form-item>
-          </el-col>
           <el-col :md="8" :xs="12">
             <el-form-item label="样品" prop="prototype">
               <el-input
@@ -179,6 +171,13 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :md="8" :xs="12">
+            <el-form-item label="鞋图" prop="shoeImg">
+              <ImageUpload :limit="1" :value="form.shoeImg" :fileSize="5" @onUploaded="handleImgUploaded" @onRemoved="handleImgRemoved"></ImageUpload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <el-tabs type="border-card" @tab-click="tabClick">
@@ -388,6 +387,14 @@
         this.$refs["ProogingProcessRef"].resetState();
         this.gCode();
       },
+      //图片上传成功
+      handleImgUploaded(imgUrl){
+        this.form.shoeImg = imgUrl;
+      },
+      //图片移除
+      handleImgRemoved(imgUrl){
+        this.form.shoeImg = null;
+      },
     },
   };
 </script>

src/views/mes/pro/productiorequest/requestInfoEdit.vue

@@ -158,14 +158,6 @@
             </el-form-item>
           </el-col>
 
-          <el-col :md="8" :xs="12">
-            <el-form-item label="鞋图" prop="shoeImg">
-              <el-input
-                v-model="form.shoeImg"
-                placeholder="请选鞋图"
-              ></el-input>
-            </el-form-item>
-          </el-col>
           <el-col :md="8" :xs="12">
             <el-form-item label="样品" prop="prototype">
               <el-input
@@ -188,6 +180,13 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :md="8" :xs="12">
+            <el-form-item label="鞋图" prop="shoeImg">
+              <ImageUpload :limit="1" :value="form.shoeImg" :fileSize="5" @onUploaded="handleImgUploaded" @onRemoved="handleImgRemoved"></ImageUpload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <el-tabs type="border-card" @tab-click="tabClick">
@@ -205,6 +204,7 @@
 <script>
 import { genCode } from "@/api/system/autocode/rule";
 import ProogingBom from "./components/ProogingBom.vue";
+import ImageUpload from "@/components/ImageUpload/index.vue"
 import ProogingProcess from "./components/ProogingProcess.vue";
 import ItemSelect from "@/components/itemSelect/single.vue";
 import FactorySelect from "@/components/FactorySelect/index.vue";
@@ -218,7 +218,7 @@ import {
 } from "@/api/mes/pro/productionRequest";
 
 export default {
-  components: { ProogingBom, ProogingProcess, ItemSelect, RoutesProcessSelect, FactorySelect },
+  components: { ProogingBom, ProogingProcess, ItemSelect, RoutesProcessSelect, FactorySelect, ImageUpload },
   dicts: [],
   provide() {
     return {
@@ -392,6 +392,14 @@ export default {
       this.$refs["ProogingBomRef"].resetState();
       this.$refs["ProogingProcessRef"].resetState();
     },
+    //图片上传成功
+    handleImgUploaded(imgUrl){
+      this.form.shoeImg = imgUrl;
+    },
+    //图片移除
+    handleImgRemoved(imgUrl){
+      this.form.shoeImg = null;
+    },
   },
 };
 </script>