浏览代码

2024.05.28
- 商品分组页修复商品对话框选中清除bug;

zweiqin 1 年之前
父节点
当前提交
9ffe25dd06
共有 1 个文件被更改,包括 28 次插入13 次删除
  1. 28 13
      src/views/commodity/commodityList/components/EditModal.vue

+ 28 - 13
src/views/commodity/commodityList/components/EditModal.vue

@@ -41,7 +41,7 @@
         </el-button>
       </div>
 
-      <el-dialog title="手动添加商品" :visible.sync="isShowManualAdd" width="900px" top="50px" append-to-body>
+      <el-dialog class="product-dialog" title="手动添加商品" :visible.sync="isShowManualAdd" width="900px" top="50px" append-to-body>
         <div class="filter-container" style="display: flex;align-items: center;flex-wrap: wrap;">
           <el-input
             v-model="listQuery.search" clearable size="mini" class="filter-item"
@@ -75,7 +75,7 @@
           <el-button
             size="mini" class="filter-item" type="primary" icon="el-icon-search"
             style="margin-left: 10px;"
-            @click="getInfo(formData.shopGroupId)"
+            @click="initList()"
           >
             查找
           </el-button>
@@ -86,28 +86,33 @@
             重置
           </el-button>
         </div>
-        <div>
+        <div style="position: relative;padding: 0 0 10px;">
           <el-table
             ref="multipleTable" :data="productDataList" border
             :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-            max-height="550" @selection-change="(e) => multipleSelection = e"
+            @selection-change="(e) => multipleSelection = e"
           >
             <el-table-column type="selection" width="55" />
-            <el-table-column label="产品主图" width="220" align="center">
-              <template slot-scope="scope">
-                <img height="80" width="80" :src="scope.row.image" alt srcset>
+            <el-table-column label="产品主图" width="220" align="center" prop="image">
+              <template slot-scope="{ row }">
+                <el-image
+                  v-if="row.image" lazy :src="common.seamingImgUrl(row.image)"
+                  style="width:80px; height:80px" fit="cover"
+                  :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+                />
+                <span v-else>--</span>
               </template>
             </el-table-column>
             <el-table-column prop="productName" label="产品名称" width="220" align="center" />
             <el-table-column prop="originalPrice" label="价格(元)" align="center" show-overflow-tooltip />
             <el-table-column prop="stockNumber" label="库存(件)" align="center" show-overflow-tooltip />
           </el-table>
-          <div>
+          <div style="position: sticky;bottom: -5px;z-index: 1;padding: 10px;background-color: #eeeeee;">
             <el-pagination
-              :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]"
+              :current-page="listQuery.page" :page-sizes="[50, 100, 200, 500, 1000]"
               :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productTotal"
-              @size-change="(val) => ((listQuery.pageSize = val) && getInfo(formData.shopGroupId))"
-              @current-change="(val) => ((listQuery.page = val) && getInfo(formData.shopGroupId))"
+              @size-change="(val) => ((listQuery.pageSize = val) && initList())"
+              @current-change="(val) => ((listQuery.page = val) && initList())"
             />
             <span slot="footer">
               <el-button type="primary" @click="handleSaveIdList">确 定</el-button>
@@ -162,7 +167,7 @@ export default {
         minPrice: null, // 价格最小值
         minStock: null, // 库存数量最小值
         page: 1, // 当前页
-        pageSize: 10, // 每页记录数
+        pageSize: 50, // 每页记录数
         search: '' // 搜索字段
       },
       multipleSelection: []
@@ -173,9 +178,11 @@ export default {
       this.visible = false
     },
     async initList() {
+      const loading = this.$loading({ text: '加载中' })
       const res = await getGroupList(this.listQuery)
       this.productTotal = res.data.total
       this.productDataList = res.data.list
+      loading.close()
     },
     handleOpen(params = {}) {
       this.modalOptions.title = params.shopGroupId ? '编辑分组' : '添加分组'
@@ -267,6 +274,9 @@ export default {
       this.multipleSelection = []
       this.selectedGroupId = data.shopGroupId
       this.isShowManualAdd = true
+      this.$nextTick(() => {
+        this.$refs.multipleTable.clearSelection()
+      })
     },
     clearData() {
       this.listQuery = {
@@ -278,7 +288,7 @@ export default {
         pageSize: 10, // 每页记录数
         search: '' // 搜索字段
       }
-      this.getInfo(this.formData.shopGroupId)
+      this.initList()
     },
 
     handleSaveIdList() {
@@ -337,4 +347,9 @@ export default {
 		}
 	}
 }
+.product-dialog {
+	::v-deep .el-dialog__body {
+		padding: 30px 20px 0;
+	}
+}
 </style>