产品类别排序

src/utils/common.js

@@ -51,7 +51,7 @@ export default {
   //获取字段列表
   getField(array,fun,props){
     var type = {
-      'Integer':'3',
+      'Array':'3',
       'DateTime':'2',
       'String':'1'
     }
@@ -82,6 +82,14 @@ export default {
       return arr;
     }
     return newArray
-  }
+  },
+
+  //获取表格数据
+  getColumnData(row,field,prop){
+    if(field.type == 'Array'){
 
+    }else{
+      return row[field.value] || '--'
+    }
+  }
 }

src/views/product/components/commodity/view/table.vue

@@ -19,12 +19,6 @@
             {{ scope.row[item.key] }}
           </div>
         </template>
-        <!-- <template slot-scope="scope">
-          <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
-            <el-link @click="handleItem(scope.row, item.key)">{{ scope.row[item.key] }}</el-link>
-          </div>
-          <div v-else v-html="getColumnData(scope.row, item.key)"></div>
-        </template> -->
       </el-table-column>
 
     </el-table>

src/views/product/components/index.vue

@@ -34,7 +34,7 @@
       </el-header>
       <el-main>
         <div style="height: 100%;">
-          <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @options="handleOption"></component>
+          <component :is="componentType" :tableData="tableData" :queryParams="queryParams"  @options="handleOption" @on-sort="handleSort"></component>
         </div>
       </el-main>
       <el-footer class="pagination">
@@ -66,6 +66,8 @@ export default {
     return {
       // 显示指定的子组件
       componentType: 'categoryTable',
+      //显示的栏位
+      columnList:[],
       //检索字段
       searchFiled: [
         {
@@ -106,6 +108,8 @@ export default {
         current: 1,
         size:10,
       },
+      //排序
+      sort:[],
       // 产品类别总数
       total: 0,
       // 产品类别数据
@@ -122,7 +126,7 @@ export default {
     //获取检索字段以及分组字段
     this.getColumn() 
     //获取检索字段以及分组字段
-    this.getFieldList()
+    // this.getFieldList()
     
   },
   methods: {
@@ -233,15 +237,39 @@ export default {
       let params = {
         ...this.queryParams,//分页信息
         searchQuery:str,//检索条件
-        orderDTOList: null,//排序
+        orderDTOList: this.sort,//排序
       }
       this.$api.queryProductCategory(params).then(response=>{
         if(response.code == 200){
-
           this.tableData = response.data.data
+          this.total = response.data.total
         }
       })
     },
+    //排序
+    handleSort({ column, prop, order, str }) {
+      this.sort=[]//如需要多个字段排序，则不需要清空
+      if (order == null) {
+        return;
+      }
+      var orderType = {
+        ascending: 0,
+        descending:1
+      }
+      var params = this.sort.find(item => {
+        return item.orderBy == prop
+      })
+      if (params) {
+        params.orderType = orderType[order]
+      } else {
+        params = {}
+        params.orderBy = prop
+        params.orderType = orderType[order]
+        this.sort.push(params)
+      }
+      this.queryParams.current = 1
+      this.getList()
+    },
     // 分页
     handleCurrentChange(val){
       this.queryParams.current = val
@@ -251,7 +279,22 @@ export default {
     changeGrouping(val) { },
     //获取检索条件检索
     search(val) {
-
+      let params = {}
+      if(val.length>0){
+        val.forEach(item => {
+          if (item.type == 3) {
+            params[item.value]=item.searchValue.map(itemValue => {
+              return itemValue.value
+            })
+          } else {
+            params[item.value]=item.searchValue.label
+          }
+        })
+      }
+      
+      this.searchOption = params
+      this.queryParams.current = 1
+      this.getList()
     },
   },
 }

src/views/product/components/view/categoryTable.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 产品类别表格 -->
   <div class="categoryTable height_100" v-DivHeight="getDivHeight">
-    <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-table-header" row-key="id" v-if="showTable" :maxHeight="tableHeight" @expand-change="handleExpand">
+    <el-table :data="tableData" style="width: 100%" header-row-class-name="custom-table-header" row-key="id" v-if="showTable" :maxHeight="tableHeight" @expand-change="handleExpand" @sort-change="sortChange">
       <el-table-column type="expand">
         <!-- 产品 -->
         <template slot-scope="scope">
@@ -10,17 +10,12 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="产品类别名称" prop="name">
+      <el-table-column v-for="item in column" :key="item.value" :prop="item.value" :label="item.name" align="center" sortable="custom">
         <template slot-scope="scope">
-          <div>
-            {{ scope.row.name?scope.row.name:'--' }}
+          <div v-if="['name'].includes(item.value)">
+            <el-link @click="handleItem(scope.row, item.value)">{{ scope.row[item.value] }}</el-link>
           </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="产品类别描述" prop="desc">
-        <template slot-scope="scope">
-          <div>
-            {{ scope.row.description?scope.row.description:'--' }}
+          <div v-else v-html="$commonJS.getColumnData(scope.row, item)">
           </div>
         </template>
       </el-table-column>
@@ -70,6 +65,37 @@ export default {
       default: () => {
         return {}
       }
+    },
+    column:{
+      default:()=>{
+        return [
+          {
+            value:'name',
+            type:'String',
+            name:'产品类别名称'
+          },
+          {
+            value:'licenseRate',
+            type:'String',
+            name:'许可费率'
+          },
+          {
+            value:'description',
+            type:'String',
+            name:'产品类别描述'
+          },
+          {
+            value:'createName',
+            type:'String',
+            name:'创建人'
+          },
+          {
+            value:'createTime',
+            type:'DataTime',
+            name:'创建时间'
+          },
+        ]
+      }
     }
   },
   data() {
@@ -140,7 +166,10 @@ export default {
       this.$emit('options', { val, row })
     },
     
-
+    // 排序
+    sortChange({ column, prop, order }) {
+        this.$emit('on-sort', { column, prop, order })
+    },
   },
 }
 </script>