商品选择组件优化

src/api/ecw/product.js

@@ -59,6 +59,15 @@ export function getProductList(params) {
   })
 }
 
+// 返回简洁的商品列表
+export function getSimpleProductList(params) {
+  return request({
+    url: '/ecw/product/simpleList',
+    method: 'get',
+    params
+  })
+}
+
 // 获得产品分页
 export function getProductPage(query) {
   return request({

src/components/ProductsSelector/index.vue

@@ -12,18 +12,17 @@
           <el-input v-model="queryParams.titleZh" :placeholder="$t('产品关键字')" style="width:120px" clearable  :disabled="loading"/>
           <el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>
 
-          <div v-if="showAll">
-            <el-checkbox :label="$t('全选') + `(${total > 500 ? $t('最多500') : $t('{total}个', {total})})`" @change="toggleAll" :disabled="isAllProduct || loading"></el-checkbox>
-            <el-checkbox :label="$t('全选库内商品(共{cnt}个)', {cnt: allTotal})" v-model="isAllProduct" :disabled="loading"></el-checkbox>
-						<el-checkbox v-if="showFiltered && enableFiltered" :label="$t('根据商品搜索结果(共{cnt}个)', {cnt: total})" v-model="isAllFiltered" :disabled="loading"></el-checkbox>
+          <div>
+            <el-checkbox :label="$t('全选') + `(${$t('{total}个', {total})})`" @change="toggleAll" :disabled="isAllProduct || loading"></el-checkbox>
           </div>
         </div>
         <div class="list">
-          <div class="item" v-for="item in list" :key="item.id">
+          <div class="item" v-for="item in currentList" :key="item.id">
             <el-checkbox @change="toggleCheck(item, $event)" :value="ids.indexOf(item.id) > -1" :disabled="isAllProduct" /> {{item.titleZh}}
             <div>{{item.titleEn}}</div>
           </div>
         </div>
+				<el-pagination :total="list.length"  :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="leftPage = $event" layout="prev, pager, next, total, sizes" :current-page="leftPage" />
       </el-card>
     </div>
     <div class="flex-1 ml-10">
@@ -34,17 +33,18 @@
           <el-button :disabled="!choosedList.length" type="text" @click="clearAll">{{$t('全部清除')}}</el-button>
         </div>
         <div class="list">
-          <div class="item" v-for="(choosed) in choosedList" :key="choosed.id" :data-data="JSON.stringify(choosed)">
+          <div class="item" v-for="(choosed) in selectedList" :key="choosed.id" :data-data="JSON.stringify(choosed)">
             <el-link class="el-icon-delete" @click="remove(choosed)" :disabled="isAllProduct"/> {{choosed.titleZh}}
             <div>{{choosed.titleEn}}</div>
           </div>
         </div>
+				<el-pagination :total="choosedList.length" :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="rightPage = $event" layout="prev, pager, next, total, sizes" :current-page="rightPage" />
       </el-card>
     </div>
   </div>
 </template>
 <script>
-import {getProductPage, getProductList, getProductIds} from '@/api/ecw/product'
+import {getProductPage, getProductList, getProductIds, getSimpleProductList} from '@/api/ecw/product'
 import { getProductTypeList } from '@/api/ecw/productType'
 import { getProductAttrList } from '@/api/ecw/productAttr'
 
@@ -67,11 +67,10 @@ export default {
       list: [],
       page: 1,
       pages: 1,
-      total: 0, // 当前筛选条件的商品总数
       allTotal: 0, // 全库商品总数
       queryParams: {
         pageNo: 1,
-        pageSize: 500,
+        pageSize: 10000,
         attrId: null,
         titleZh: null,
         typeId: null
@@ -80,12 +79,21 @@ export default {
       typeList: [],
       attrList: [],
       isAllProduct: false,
-      isAllFiltered: false, // 是否全部搜索结果
+      //isAllFiltered: false, // 是否全部搜索结果
       // 是否显示搜索结果勾选，有筛选条件才显示
-      showFiltered: false
+      showFiltered: false,
+      // 左侧页码
+      leftPage: 1,
+      // 右侧页码
+      rightPage: 1,
+      // 页大小
+      pageSize: 100
     }
   },
   computed: {
+    total(){
+      return this.list.length
+    },
     ids: {
       get() {
         let arr = []
@@ -97,6 +105,14 @@ export default {
       set(v) {
 
       }
+    },
+    // 左侧当前显示的列表
+    currentList(){
+      return this.list.slice((this.leftPage - 1) * this.pageSize, this.leftPage * this.pageSize)
+    },
+    // 已勾选的显示列表
+    selectedList(){
+      return this.choosedList.slice((this.rightPage - 1) * this.pageSize, this.rightPage * this.pageSize)
     }
   },
   watch: {
@@ -122,27 +138,28 @@ export default {
       this.isAllProduct = isall
     }
   },
-  created() {
+  async created() {
     getProductTypeList().then(res => this.typeList = res.data)
     getProductAttrList().then(res => this.attrList = res.data)
-    this.reLoad()
+    await this.reLoad()
     this.ids = this.defaultIds //数据回显
     this.isAllProduct = this.isall
     // 如果有默认商品则获取内容供回显
     if(this.defaultIds.length){
-      this.loadDefaultProds()
+      this.setDefaultChooseProds()
+      //this.loadDefaultProds()
     }
 
     // 获取全库商品总数
-    getProductPage({pageNo: 1, pageSize: 1}).then(res => {
+    /*getProductPage({pageNo: 1, pageSize: 1}).then(res => {
       this.allTotal = res.data.total
-    })
+    })*/
   },
   methods: {
     /* setAllProduct(status){
       this.isAllProduct = true
     }, */
-    loadDefaultProds(){
+    /*loadDefaultProds(){
       if(!this.defaultIds || !this.defaultIds.length){
         return false
       }
@@ -151,16 +168,24 @@ export default {
           this.choose(item)
         })
       })
+    },*/
+    //  设置默认选中的商品
+    setDefaultChooseProds(){
+      this.list.forEach(item => {
+        if(this.defaultIds.indexOf(item.id) > -1){
+          this.choose(item)
+        }
+      })
     },
     toggleAll(status){
       this.list.forEach(item => {
         this.toggleCheck(item, status)
       })
     },
-    reLoad() {
+    async reLoad() {
       this.queryParams.page = 1
       this.list = []
-      this.getList()
+      await this.getList()
     },
     loadNextPage() {
       if (this.page >= this.pages) {
@@ -169,19 +194,11 @@ export default {
       this.queryParams.page++
       this.getList()
     },
-    getList() {
+    async getList() {
       this.loading = true
-      getProductPage(this.queryParams).then(res => {
-        this.list = res.data.list //.concat(res.data.list || [])
-        this.page = res.data.page
-        this.pages = res.data.pages
-        this.total = res.data.total
-
-        // 必须在搜索之后才显示勾选，这个时候才有数量
-        this.showFiltered = !!this.queryParams.attrId || !!this.queryParams.titleZh || !!this.queryParams.typeId
-      }).finally(() => {
-        this.loading = false
-      })
+      let res = await getSimpleProductList(this.queryParams)
+      this.loading = false
+      this.list = res.data
     },
     // 获得指定条件的商品的全部ID
     getFilteredIds(){