From 9ef0774e577cecde53bc7538ad1252870b168de0 Mon Sep 17 00:00:00 2001
From: wxy <you@example.com>
Date: Tue, 7 May 2024 13:49:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/info/index.vue | 152 ++++++++++++++++++++++---------
 1 file changed, 109 insertions(+), 43 deletions(-)

diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 8ec8a64..f313b6c 100644
--- a/src/views/product/info/index.vue
+++ b/src/views/product/info/index.vue
@@ -68,8 +68,16 @@
       <el-table-column label="商品描述" align="center" prop="productDesc" />
       <el-table-column label="商品类型" align="center" prop="type" />
       <el-table-column label="冗余字段" align="center" prop="typeIds" />
-      <el-table-column label="商品主图" align="center" prop="img" />
-      <el-table-column label="商品轮播图" align="center" prop="carouselImages" />
+      <el-table-column label="商品主图" align="center" prop="img">
+          <template slot-scope="scope">
+            <img :src="scope.row.img" alt="加载失败" width="80px" height="80px"/>
+          </template>
+      </el-table-column>
+      <el-table-column label="商品轮播图" align="center" prop="carouselImages" >
+        <template slot-scope="scope">
+          <img :src="scope.row.carouselImages" alt="加载失败" width="80px" height="80px"/>
+        </template>
+      </el-table-column>
       <el-table-column label="商品评论数" align="center" prop="commentCount" />
       <el-table-column label="商品收藏人气" align="center" prop="collectCount" />
       <el-table-column label="品牌信息" align="center" prop="brand" />
@@ -77,7 +85,6 @@
       <el-table-column label="单位" align="center" prop="unit" />
       <el-table-column label="搜索关键字" align="center" prop="keywords" />
       <el-table-column label="规格信息" align="center" prop="ruleId" />
-      <el-table-column label="乐观锁" align="center" prop="revision" />
       <el-table-column label="0：添加商品信息 1：添加规格信息 2：添加描述信息" align="center" prop="step" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -108,48 +115,62 @@
     />
 
     <!-- 添加或修改商品信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="商品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
-        </el-form-item>
-        <el-form-item label="商品描述" prop="productDesc">
-          <el-input v-model="form.productDesc" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="冗余字段" prop="typeIds">
-          <el-input v-model="form.typeIds" placeholder="请输入冗余字段" />
-        </el-form-item>
-        <el-form-item label="商品主图" prop="img">
-          <el-input v-model="form.img" placeholder="请输入商品主图" />
-        </el-form-item>
-        <el-form-item label="商品轮播图" prop="carouselImages">
-          <el-input v-model="form.carouselImages" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="商品评论数" prop="commentCount">
-          <el-input v-model="form.commentCount" placeholder="请输入商品评论数" />
-        </el-form-item>
-        <el-form-item label="商品收藏人气" prop="collectCount">
-          <el-input v-model="form.collectCount" placeholder="请输入商品收藏人气" />
-        </el-form-item>
-        <el-form-item label="品牌信息" prop="brand">
-          <el-input v-model="form.brand" placeholder="请输入品牌信息" />
-        </el-form-item>
-        <el-form-item label="单位" prop="unit">
-          <el-input v-model="form.unit" placeholder="请输入单位" />
-        </el-form-item>
-        <el-form-item label="搜索关键字" prop="keywords">
-          <el-input v-model="form.keywords" placeholder="请输入搜索关键字" />
-        </el-form-item>
-        <el-form-item label="规格信息" prop="ruleId">
-          <el-input v-model="form.ruleId" placeholder="请输入规格信息" />
-        </el-form-item>
-        <el-form-item label="乐观锁" prop="revision">
-          <el-input v-model="form.revision" placeholder="请输入乐观锁" />
-        </el-form-item>
-        <el-form-item label="0：添加商品信息 1：添加规格信息 2：添加描述信息" prop="step">
-          <el-input v-model="form.step" placeholder="请输入0：添加商品信息 1：添加规格信息 2：添加描述信息" />
-        </el-form-item>
+        <el-steps :active="active" finish-status="success">
+          <el-step title="添加商品信息"> </el-step>
+          <el-step title="添加规格信息"></el-step>
+          <el-step title="添加描述信息"></el-step>
+        </el-steps>
+        <div v-show="active==0">
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <el-form-item label="商品名称" prop="name">
+                  <el-input v-model="form.name" placeholder="请输入商品名称" />
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <el-form-item label="单位" prop="unit">
+                  <el-input v-model="form.unit" placeholder="请输入单位" />
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="grid-content bg-purple">
+                <el-form-item label="品牌信息" prop="brandId">
+                  <el-select v-model="form.brand" placeholder="请选择品牌" clearable>
+                    <el-option v-for="item in brandList" :label="item.name" :value="item.id" :key="item.id"></el-option>
+                  </el-select>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-form-item label="商品主图" prop="img">
+            <image-upload v-model="form.img" placeholder="请输入商品主图" :limit="1" :is-show-tip="false"/>
+          </el-form-item>
+          <el-form-item label="商品轮播图" prop="carouselImages">
+            <image-upload v-model="form.carouselImages" placeholder="请输入内容" :limit="1" :is-show-tip="false"/>
+          </el-form-item>
+        </div>
+        <div v-show="active==1">
+          <el-form-item label="规格信息" prop="ruleId">
+            <el-select v-model="form.ruleId" placeholder="请选择规格" clearable>
+              <el-option v-for="item in rule" :label="item.ruleName" :value="item.id" :key="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <div v-show="active==2">
+          <el-form-item label="商品描述" prop="productDesc">
+              <el-input v-model="form.productDesc" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+        </div>
       </el-form>
+      <el-button style="margin-top: 12px;" @click="step" :disabled="active <1">上一步</el-button>
+      <el-button style="margin-top: 12px;" @click="next" :disabled="active >= 2">下一步</el-button>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -160,11 +181,20 @@
 
 <script>
 import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
+import ImageUpload from "@/components/ImageUpload"
+import { listBrand } from "@/api/product/brand"
+import { listRule } from "@/api/product/rule"
+
+import log from "@/views/monitor/job/log.vue";
 
 export default {
+  components:{ImageUpload},
   name: "Info",
   data() {
     return {
+      active: 0,
+      rule: [],
+      brandList:[],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -177,8 +207,14 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      brandName: null,
+      ruleName: null,
       // 商品信息表格数据
       infoList: [],
+
+      //商品品牌名称
+      name: null,
+
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -194,13 +230,42 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        // brandId: [
+        //   { required: true, message: "商品品牌不能为空", trigger: "blur" }
+        // ]
       }
     };
   },
   created() {
     this.getList();
+    this.initBrandListInfo();
   },
   methods: {
+    /**查询商品规格**/
+    getRule() {
+      listRule(this.name).then(
+        response => {
+          this.rule = response.data
+        }
+      )
+    },
+    /**查询品牌表**/
+    initBrandListInfo() {
+      let  params = {
+        status: 0
+      };
+      listBrand(params).then(res =>{
+        if(200 == res.code){
+          this.brandList = res.data.list;
+        }
+      });
+    },
+    step() {
+      this.active--;
+    },
+    next() {
+      this.active++;
+    },
     /** 查询商品信息列表 */
     getList() {
       this.loading = true;
@@ -232,6 +297,7 @@ export default {
         unit: null,
         keywords: null,
         ruleId: null,
+        brandId: null,
         revision: null,
         createBy: null,
         createTime: null,