Selaa lähdekoodia

fix:1.商品管理的图片显示为完整的地址。

suwenjiang 1 viikko sitten
vanhempi
commit
5fc05e41a8

+ 0 - 1
src/views/goods/cate/index.vue

@@ -205,7 +205,6 @@
               </el-upload>
             </el-form-item>
           </el-col>
-          {{ form.logo }}
           <p class="form-tips">(提示:点击图片修改,建议尺寸:128 x 128)</p>
         </el-row>
         <el-row>

+ 2 - 1
src/views/goods/goods/goodsForm.vue

@@ -432,7 +432,8 @@ export default {
           app.uploadFiles = []
           if (images && images.length > 0) {
             images.forEach(function (url) {
-              app.uploadFiles.push({ url: imagePath + url })
+              // app.uploadFiles.push({ url: imagePath + url })
+              app.uploadFiles.push({ url })
             })
           }
 

+ 107 - 68
src/views/goods/goods/index.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" class="main-search" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      class="main-search"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="商品名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入商品名称"
           clearable
-          style="width: 240px;"
+          style="width: 240px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -17,12 +25,22 @@
           clearable
           style="width: 180px"
         >
-          <el-option :key="0" label="公共商品" v-if="!storeId" :value="0"/>
-          <el-option v-for="storeInfo in storeOptions" :key="storeInfo.id" :label="storeInfo.name" :value="storeInfo.id"/>
+          <el-option :key="0" label="公共商品" v-if="!storeId" :value="0" />
+          <el-option
+            v-for="storeInfo in storeOptions"
+            :key="storeInfo.id"
+            :label="storeInfo.name"
+            :value="storeInfo.id"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="商品分类" prop="cateId">
-        <el-select class="input" v-model="queryParams.cateId" clearable placeholder="请选择商品分类">
+        <el-select
+          class="input"
+          v-model="queryParams.cateId"
+          clearable
+          placeholder="请选择商品分类"
+        >
           <el-option
             v-for="item in cateList"
             :key="item.id"
@@ -58,8 +76,8 @@
           clearable
           style="width: 120px"
         >
-          <el-option key="Y" label="单规格" value="Y"/>
-          <el-option key="N" label="多规格" value="N"/>
+          <el-option key="Y" label="单规格" value="Y" />
+          <el-option key="N" label="多规格" value="N" />
         </el-select>
       </el-form-item>
       <el-form-item label="上架状态" prop="status">
@@ -69,8 +87,8 @@
           clearable
           style="width: 120px"
         >
-          <el-option key="A" label="上架" value="A"/>
-          <el-option key="N" label="下架" value="N"/>
+          <el-option key="A" label="上架" value="A" />
+          <el-option key="N" label="下架" value="N" />
         </el-select>
       </el-form-item>
       <el-form-item label="库存状态" prop="stock">
@@ -80,12 +98,14 @@
           clearable
           style="width: 120px"
         >
-          <el-option key="Y" label="有库存" value="Y"/>
-          <el-option key="N" label="无库存" value="N"/>
+          <el-option key="Y" label="有库存" value="Y" />
+          <el-option key="N" label="无库存" value="N" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
+          搜索
+        </el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
@@ -94,26 +114,35 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['goods:goods:add']"
-        >新增</el-button>
+        >
+          新增
+        </el-button>
       </el-form-item>
     </el-form>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column label="ID" prop="id" width="50"/>
+    <el-table
+      ref="tables"
+      v-loading="loading"
+      :data="list"
+      @selection-change="handleSelectionChange"
+      :default-sort="defaultSort"
+      @sort-change="handleSortChange"
+    >
+      <el-table-column label="ID" prop="id" width="100" />
       <el-table-column label="所属店铺" align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.storeInfo">{{ scope.row.storeInfo.name }}</span>
           <span v-else>公共所有</span>
         </template>
       </el-table-column>
-      <el-table-column label="商品名称" align="center" min-width="300" prop="name" />
+      <el-table-column label="商品名称" align="center" min-width="200" prop="name" />
       <el-table-column label="主图" align="center" width="100">
         <template slot-scope="scope">
-           <img class="list-img" :src="scope.row.logo">
+          <img class="list-img" :src="scope.row.logo" />
         </template>
       </el-table-column>
       <!-- <el-table-column label="商品条码" align="center" prop="goodsNo" width="140"/> -->
-      <el-table-column label="剩余库存" align="center" prop="stock" width="100"/>
+      <el-table-column label="剩余库存" align="center" prop="stock" width="100" />
       <el-table-column label="所属分类" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.cateInfo.name }}</span>
@@ -145,7 +174,7 @@
           <span>{{ parseTime(scope.row.updateTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="120" fixed='right'>
+      <el-table-column label="操作" align="center" width="120" fixed="right">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -154,7 +183,9 @@
             v-hasPermi="['goods:goods:edit']"
             @click="handleUpdate(scope.row)"
             v-if="storeId == scope.row.storeId || storeId == 0"
-          >编辑</el-button>
+          >
+            编辑
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -162,13 +193,15 @@
             v-hasPermi="['goods:goods:edit']"
             v-if="storeId == scope.row.storeId || storeId == 0"
             @click="handleDelete(scope.row)"
-          >删除</el-button>
+          >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.page"
       :limit.sync="queryParams.pageSize"
@@ -178,9 +211,9 @@
 </template>
 
 <script>
-import { getGoodsList, updateGoodsStatus } from "@/api/goods";
+import { getGoodsList, updateGoodsStatus } from '@/api/goods'
 export default {
-  name: "GoodsIndex",
+  name: 'GoodsIndex',
   data() {
     return {
       storeId: this.$store.getters.storeId,
@@ -205,9 +238,9 @@ export default {
       // 是否显示弹出层
       open: false,
       // 默认排序
-      defaultSort: {prop: 'sort', order: 'descending'},
+      defaultSort: { prop: 'sort', order: 'descending' },
       // 表单参数
-      form: { id: '', name: '', logo: '', sort: 0, status: "A" },
+      form: { id: '', name: '', logo: '', sort: 0, status: 'A' },
       // 上传地址
       uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
       // 隐藏上传
@@ -229,90 +262,96 @@ export default {
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "名称不能为空", trigger: "blur" },
+          { required: true, message: '名称不能为空', trigger: 'blur' },
           { min: 2, max: 200, message: '名称长度必须介于2 和 200 之间', trigger: 'blur' }
         ],
-        logo: [{ required: true, message: "请上传图片", trigger: "blur" }]
+        logo: [{ required: true, message: '请上传图片', trigger: 'blur' }]
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     // 查询商品列表
     getList() {
-      this.loading = true;
-      getGoodsList(this.queryParams).then( response => {
-          this.list = response.data.paginationResponse.content;
-          this.total = response.data.paginationResponse.totalElements;
-          this.typeOptions = response.data.typeList;
-          this.storeOptions = response.data.storeList;
-          this.cateList = response.data.cateList;
-          this.loading = false;
-        }
-      );
+      this.loading = true
+      getGoodsList(this.queryParams).then((response) => {
+        this.list = response.data.paginationResponse.content
+        this.total = response.data.paginationResponse.totalElements
+        this.typeOptions = response.data.typeList
+        this.storeOptions = response.data.storeList
+        this.cateList = response.data.cateList
+        this.loading = false
+      })
     },
     // 搜索按钮操作
     handleQuery() {
-      this.queryParams.page = 1;
-      this.getList();
+      this.queryParams.page = 1
+      this.getList()
     },
     // 重置按钮操作
     resetQuery() {
-      this.resetForm("queryForm");
+      this.resetForm('queryForm')
       this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
-      this.handleQuery();
+      this.handleQuery()
     },
     // 状态修改
     handleStatusChange(row) {
-      let text = row.status == "A" ? "上架" : "下架";
-      this.$modal.confirm('确认要' + text + '"' + row.name + '"吗?').then(function() {
-        return updateGoodsStatus(row.id, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "N" ? "A" : "N";
-      });
+      let text = row.status == 'A' ? '上架' : '下架'
+      this.$modal
+        .confirm('确认要' + text + '"' + row.name + '"吗?')
+        .then(function () {
+          return updateGoodsStatus(row.id, row.status)
+        })
+        .then(() => {
+          this.$modal.msgSuccess(text + '成功')
+        })
+        .catch(function () {
+          row.status = row.status === 'N' ? 'A' : 'N'
+        })
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
+      this.ids = selection.map((item) => item.id)
       this.multiple = !selection.length
     },
     // 排序触发事件
     handleSortChange(column, prop, order) {
-      this.queryParams.orderByColumn = column.prop;
-      this.queryParams.isAsc = column.order;
-      this.getList();
+      this.queryParams.orderByColumn = column.prop
+      this.queryParams.isAsc = column.order
+      this.getList()
     },
     // 新增按钮操作
     handleAdd() {
-      this.$router.push( { path: '/goods/goods/add' } )
+      this.$router.push({ path: '/goods/goods/add' })
     },
     // 修改按钮操作
     handleUpdate(row) {
-      this.$router.push( { path: '/goods/goods/edit?goodsId=' + row.id } )
+      this.$router.push({ path: '/goods/goods/edit?goodsId=' + row.id })
     },
     // 删除按钮操作
     handleDelete(row) {
       const name = row.name
-      this.$modal.confirm('是否确认删除商品"' + name + '"?').then(function() {
-        return updateGoodsStatus(row.id, 'D');
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除商品"' + name + '"?')
+        .then(function () {
+          return updateGoodsStatus(row.id, 'D')
+        })
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
     },
-    handleUploadSuccess (file) {
+    handleUploadSuccess(file) {
       this.form.logo = file.data.fileName
     },
-    handleRemove (file, fileList) {
+    handleRemove(file, fileList) {
       setTimeout(() => {
         this.hideUpload = fileList.length > 0
       }, 520)
     }
   }
-};
+}
 </script>
-