标签模版开发

src/views/mes/pro/ItemTemplateMapping/index.vue

@@ -248,7 +248,7 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="模板" prop="templateId">
-              <el-select v-model="form.templateId" placeholder="请选择模板" style="width: 100%">
+              <el-select v-model="form.templateId" placeholder="请选择模板" style="width: 100%" @change="templateChange">
                 <el-option
                   v-for="item in templateOptions"
                   :key="item.id"
@@ -259,15 +259,12 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="图片预览" prop="filePath">
-              <ImageUpload
-                :limit="1"
-                :value="form.filePath"
-                fieldName="filePath"
-                :fileSize="5"
-                @onUploaded="handleImgUploaded"
-                @onRemoved="handleImgRemoved"
-              ></ImageUpload>
+            <el-form-item label="模版图片" prop="filePath">
+              <ImagePreview
+                :src="form.filePath"
+                width="100px"
+                height="100px"
+              ></ImagePreview>
             </el-form-item>
           </el-col>
         </el-row>
@@ -353,13 +350,11 @@ export default {
     this.getList()
   },
   methods: {
-    //图片上传成功
-    handleImgUploaded(imgUrl, obj) {
-      this.form[obj.$attrs.fieldName] = imgUrl;
-    },
-    //图片移除
-    handleImgRemoved(imgUrl, obj) {
-      this.form[obj.$attrs.fieldName] = null;
+    templateChange(){
+      const item = this.templateOptions.find(v => v.id === this.form.templateId)
+      if (item) {
+        this.form.filePath = item.filePath || ''
+      }
     },
     onItemSelected(obj) {
       if (obj != undefined && obj != null) {
@@ -469,6 +464,7 @@ export default {
       if(!row || !row.id) row = this.selectedRows[0]
       this.reset()
       this.form = row
+      this.templateChange()
       this.open = true
       this.title = '修改客户产品标签模板对照表'
     },

src/views/mes/report/index.vue

@@ -145,6 +145,17 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <el-form-item label="模版图片" prop="filePath">
+          <ImageUpload
+            :limit="1"
+            :value="form.filePath"
+            fieldName="filePath"
+            :fileSize="5"
+            @onUploaded="handleImgUploaded"
+            @onRemoved="handleImgRemoved"
+          ></ImageUpload>
+          <img src="" alt="">
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -219,6 +230,14 @@ export default {
     this.getList();
   },
   methods: {
+    //图片上传成功
+    handleImgUploaded(imgUrl, obj) {
+      this.form[obj.$attrs.fieldName] = imgUrl;
+    },
+    //图片移除
+    handleImgRemoved(imgUrl, obj) {
+      this.form[obj.$attrs.fieldName] = null;
+    },
     /** 查询模版管理列表 */
     getList() {
       this.loading = true;
@@ -240,6 +259,7 @@ export default {
     reset() {
       this.form = {
         id: null,
+        filePath: null,
         name: null,
         content: null,
         createTime: null,