feat(产品详情): 新增产品图片上传功能及中药属性字段

src/components/upload/imgUploadNew.vue

@@ -0,0 +1,101 @@
+<template>
+  <ele-image-upload
+    v-model="images"
+    :limit="9"
+    :drag="true"
+    :multiple="true"
+    :upload-handler="uploadHandler"
+    :beforeUpload="beforeUpload"
+    @upload="onUpload"
+    :remove-handler="removeHandler"
+  >
+  </ele-image-upload>
+</template>
+
+<script>
+  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import { uploadFile } from '@/api/system/file/index';
+
+  export default {
+    components: { EleImageUpload },
+    props: {
+      // 所属模块
+      module: {
+        type: String,
+        default: 'main'
+      },
+      // 限制数量
+      limit: {
+        type: Number,
+        default: -1
+      },
+      value: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {
+        images: []
+      };
+    },
+
+    methods: {
+      beforeUpload() {},
+      /* 上传事件 */
+      async uploadHandler(file) {
+        const item = {
+          file,
+          uid: file.uid,
+          name: file.name,
+          progress: 0,
+          status: null
+        };
+        if (!file.type.startsWith('image')) {
+          this.$message.error('只能选择图片');
+          return;
+        }
+        // if (file.size / 1024 / 1024 > 2) {
+        //   this.$message.error('大小不能超过 2MB');
+        //   return;
+        // }
+        await this.onUpload(item);
+        this.$emit('input', [...this.images]);
+      },
+      removeHandler(item) {
+        // item 即点击删除对应的 item 数据
+        console.log('item:', item);
+        // 这里你可以弹可询问弹窗, 需要删除数据可以这样写:
+        this.images = this.images.filter((d) => d.id !== item.id);
+        this.$emit('input', [...this.images]);
+
+      },
+      /* 上传 item */
+      async onUpload(item) {
+        // 模拟上传
+        item.status = 'uploading';
+        item.progress = 20;
+
+        const res = await uploadFile({
+          module: this.module,
+          multiPartFile: item.file
+        });
+        if (res.data) {
+          item.url = res.data.url;
+          item.id = res.data.id;
+          item.progress = 100;
+          item.status = 'done';
+          this.images.push(item);
+        }
+      },
+
+      putValue(item) {
+        if (item) {
+          this.images = item;
+        } else {
+          this.images = [];
+        }
+      }
+    }
+  };
+</script>

src/views/material/product/detail.vue

@@ -442,6 +442,23 @@
               </template>
             </el-form-item>
           </el-col>
+          <template v-if="industryAttribute != 2">
+            <el-col :span="8">
+              <el-form-item label="性味与归经">
+                <el-input v-model="form.propertiesChannelTropism" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="功能与主治">
+                <el-input v-model="form.actionsAndUses" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="用法与用量">
+                <el-input v-model="form.usageAndDosage" />
+              </el-form-item>
+            </el-col>
+          </template>
           <el-col :span="8" v-if="clientEnvironmentId == 5">
             <el-form-item label="需要序列号">
               <el-radio-group v-model="form.extTagField.needProductSequence">
@@ -455,6 +472,14 @@
               <el-input v-model="form.iotProductKey" />
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-form-item label="产品图片">
+              <ImgUpload
+                ref="imgUploadRef"
+                v-model="form.imgUrl"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
     </el-card>
@@ -559,6 +584,7 @@
   import { parameterGetByCode } from '@/api/system/dictionary/index.js';
   import GetCodeDialog from '@/components/addDoc/getCode.vue';
   import { getCode, listCode } from '@/components/addDoc/api/index.js';
+  import ImgUpload from '@/components/upload/imgUploadNew.vue';
   const defCategoryQms = [
     {
       categoryId: '',
@@ -634,7 +660,8 @@
       RemarkInfo,
       CategoryDialog,
       // CodeDialog,
-      GetCodeDialog
+      GetCodeDialog,
+      ImgUpload
     },
     data() {
       return {
@@ -642,6 +669,7 @@
         produceTypeList,
         packagingSpecificationList: [],
         loading: false,
+        productImgs: [],
         measureTypeList: [
           {
             label: '数量',
@@ -687,6 +715,10 @@
         form: {
           categoryLevelGroupName: '',
           iotProductKey: '',
+          imgUrl: [],
+          propertiesChannelTropism: '',
+          usageAndDosage: '',
+          actionsAndUses: '',
           componentAttribute: [],
           categoryLevelName: '',
           isConsumable: 0,
@@ -852,7 +884,17 @@
         },
         deep: true,
         immediate: true
-      }
+      },
+      // 同步图片id到表单模型（用于保存）
+      // productImgs: {
+      //   handler(val) {
+      //     this.form.imgurl = val
+      //       .map((img) => img.id)
+      //       .filter(Boolean)
+      //       .join(',');
+      //   },
+      //   immediate: true
+      // },
     },
     computed: {
       clientEnvironmentId() {
@@ -962,6 +1004,17 @@
         }
       });
 
+      // 行业属性  0：通用行业；1：生物医药行业；2：电线电缆行业；
+      parameterGetByCode({
+        code: 'industry_attribute'
+      }).then((res) => {
+        console.log(res.value, '77777');
+        if (res.value) {
+          console.log(res, '33333333');
+          this.industryAttribute = res.value
+        }
+      });
+
       //新增
 
       this.$set(
@@ -1176,11 +1229,18 @@
           if (info.category.modelKey) {
             info.category.modelKey = info.category.modelKey.split(',');
           }
+          if(info.category.imgUrl && info.category.imgUrl.length > 0){
+            info.category.imgUrl = info.category.imgUrl.map((item) => ({
+              ...item,
+              status: 'done'
+            }));
+          }
         } catch (error) {}
 
         this.form = {
           ...info.category
         };
+        
         this.remarkform.remark = info.category.remark;
         this.remarkform.remarkAttach = info.category.remarkAttach;
         // if (this.form.measuringUnit && this.form.packingUnit) {
@@ -1197,6 +1257,11 @@
           this.form.createTime = null;
         }
 
+        // 回显上传组件
+        this.$nextTick(() => {
+          this.$refs.imgUploadRef?.putValue(this.form.imgUrl);
+        });
+
         this.$forceUpdate();
       },
       // 判断字段类型并赋值
@@ -1292,12 +1357,12 @@
           });
         });
       },
-      // levelChange(val) {
-      //   this.$refs.qualityRefs?.forEach((item) => {
-      //     item.levelChange(val);
-      //     // console.log(item)
-      //   });
-      // },
+      levelChange(val) {
+        // this.$refs.qualityRefs?.forEach((item) => {
+        //   item.levelChange(val);
+        //   // console.log(item)
+        // });
+      },
       // 确定分类
       async confirmCategory(node, title, PathInfo, ruleCode) {
         this.categoryLevelPathId = PathInfo.categoryLevelPathId.split(',')[0];