商品详情

src/views/commodityManagement/commodityPriceList/components/addDialog.vue

@@ -26,6 +26,7 @@
               placeholder="请输入"
               v-model="form.goodsName"
               maxlength="50"
+              :disabled="type == 'view'"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -35,6 +36,7 @@
               :data="gList"
               placeholder="请选择商品分类"
               v-model="form.categoryLevelId"
+              :disabled="type == 'view'"
             />
           </el-form-item>
         </el-col>
@@ -49,7 +51,12 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="商品级别：" prop="level">
-            <el-select v-model="form.level" placeholder="请选择" width="100%">
+            <el-select
+              v-model="form.level"
+              placeholder="请选择"
+              width="100%"
+              :disabled="type == 'view'"
+            >
               <el-option
                 v-for="item in levelList"
                 :key="item.value"
@@ -71,7 +78,18 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="商品图片：">
-            <ImgUpload ref="imgUploadRef" v-model="imgs" />
+            <ImgUpload
+              ref="imgUploadRef"
+              v-model="imgs"
+              v-if="type != 'view'"
+            />
+            <el-image
+              v-if="type == 'view'&&imgs.length>0"
+              style="width: 100px; height: 100px"
+              fit="cover"
+              :src="imgs[0].url"
+              :preview-src-list="imgs.map(item=>item.url)"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -254,6 +272,7 @@
         imgs: [],
         title: '',
         visible: false,
+        type: '',
         fullscreen: false,
         form: copyObj(formDef),
         // 提交状态
@@ -287,14 +306,16 @@
       async open(type, row, contactCategoryId) {
         // this.$refs.inventoryTable.resetTable()
         this.form.categoryLevelId = contactCategoryId;
-        this.title = type === 'add' ? '新增' : '修改';
+        this.title =
+          type === 'add' ? '新增' : type === 'view' ? '详情' : '修改';
+        this.type = type;
         this.visible = true;
         if (type == 'add') {
           this.isUpdate = false;
         } else {
           this.isUpdate = true;
         }
-        if (type === 'editGoodsInfo') {
+        if (type != 'add') {
           this.getGoodsById(row.id);
         }
       },
@@ -316,8 +337,8 @@
         }
         console.log(this.imgs, 'this.imgs');
         this.form = res;
-        this.$refs.imgUploadRef.putValue(this.imgs);
-        this.$refs.inventoryTable.putTableList(res.goodsPriceList);
+        this.$refs.imgUploadRef?.putValue(this.imgs);
+        this.$refs.inventoryTable?.putTableList(res.goodsPriceList);
       },
 
       //查询商品分类
@@ -429,8 +450,8 @@
 
       cancel() {
         this.$nextTick(() => {
-          this.$refs.inventoryTable.putTableList([]);
-          this.$refs.imgUploadRef.putValue();
+          this.$refs.inventoryTable?.putTableList([]);
+          this.$refs.imgUploadRef?.putValue();
           this.imgs = [];
           // 重置表单验证状态
           // 关闭后，销毁所有的表单数据

src/views/commodityManagement/commodityPriceList/index.vue

@@ -112,13 +112,13 @@
               </el-form>
             </template>
             <!-- 列详情 -->
-            <template v-slot:name="{ row }">
+            <template v-slot:goodsName="{ row }">
               <el-link
                 type="primary"
                 :underline="false"
-                @click="openDetail(row)"
+                @click="openEdit('view',row)"
               >
-                {{ row.name }}</el-link
+                {{ row.goodsName }}</el-link
               >
             </template>
 
@@ -266,6 +266,7 @@
             prop: 'goodsName',
             label: '商品名称',
             align: 'center',
+            slot:'goodsName',
             showOverflowTooltip: true,
             width: 180
           },