型号排序

src/components/Business/Model/ModelSimpleSelect.vue

@@ -55,7 +55,9 @@ export default {
       loading: false,
       queryParams: {
         pageNum: 1,
-        pageSize: 100
+        pageSize: 100,
+        orderByColumn: 'sort',
+        isAsc: 'asc'
       },
       options: []
     }

src/views/system/model/index.vue

@@ -9,7 +9,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="型号" prop="model">
+      <el-form-item label="型号编码" prop="model">
         <el-input
           v-model="queryParams.model"
           placeholder="请输入型号"
@@ -63,25 +63,42 @@
           v-hasPermi="['system:model:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange"  :default-sort="defaultSort"  @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="ID" align="center" prop="modelId" width="80"/>
+      <template v-for="column of showColumns">
-      <el-table-column label="名称" align="center" prop="modelName" />
+        <el-table-column
-      <el-table-column label="型号编码" align="center" prop="model" />
+          :key="column.key"
-      <el-table-column label="产品ID" align="center" prop="productId" />
+          :label="column.label"
-      <el-table-column label="型号功能" align="center" prop="tags" width="300">
+          :prop="column.key"
-        <dict-tag slot-scope="d" :value="d.row.tags" :options="dict.type.sm_model_tag"/>
+          :align="column.align"
-      </el-table-column>
+          :min-width="column.minWidth"
-      <el-table-column label="图片" align="center" prop="picture" width="100">
+          :sort-orders="orderSorts"
-        <template slot-scope="scope">
+          :sortable="column.sortable"
-          <image-preview :src="scope.row.picture" :width="50" :height="50"/>
+          :show-overflow-tooltip="column.overflow"
-        </template>
+          :width="column.width"
-      </el-table-column>
+        >
-      <el-table-column label="产品介绍" align="center" prop="introduce"  width="300"/>
+          <template slot-scope="d">
-      <el-table-column label="备注" align="center" prop="remark"  width="300"/>
+            <template v-if="column.key === 'modelId'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'picture'">
+              <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
+            </template>
+            <template v-else-if="column.key === 'tags'">
+              <dict-tag :options="dict.type.sm_model_tag" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'serviceType'">
+              <dict-tag :options="dict.type.service_type" :value="d.row[column.key]"/>
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -117,18 +134,25 @@
           <form-col :span="span" label="图片" prop="picture">
             <image-upload v-model="form.picture" :limit="1"/>
           </form-col>
-          <form-col :span="span"  label="名称" prop="modelName">
+          <el-col :span="span">
-            <el-input v-model="form.modelName" placeholder="请输入型号名称" />
+            <el-row>
-          </form-col>
+              <form-col :span="24"  label="名称" prop="modelName">
-          <form-col :span="span"  label="型号编码" prop="model">
+                <el-input v-model="form.modelName" placeholder="请输入型号名称" />
-            <el-input v-model="form.model" placeholder="请输入型号编码"/>
+              </form-col>
-          </form-col>
+              <form-col :span="24"  label="型号编码" prop="model">
-          <form-col :span="span"  label="产品ID" prop="productId">
+                <el-input v-model="form.model" placeholder="请输入型号编码"/>
-            <el-input v-model="form.productId" placeholder="请输入OneNet产品ID"/>
+              </form-col>
-          </form-col>
+              <form-col :span="24"  label="产品ID" prop="productId">
-          <form-col :span="span"  label="SN前缀" prop="snPrefix">
+                <el-input v-model="form.productId" placeholder="请输入OneNet产品ID"/>
-            <el-input v-model="form.snPrefix" placeholder="请输入SN前缀"/>
+              </form-col>
-          </form-col>
+              <form-col :span="24"  label="SN前缀" prop="snPrefix">
+                <el-input v-model="form.snPrefix" placeholder="请输入SN前缀"/>
+              </form-col>
+              <form-col :span="24"  label="排序" prop="sort">
+                <el-input-number v-model="form.sort" placeholder="请输入排序" style="width: 100%"/>
+              </form-col>
+            </el-row>
+          </el-col>
           <form-col :span="span * 2"  label="型号功能" prop="tags">
             <el-checkbox-group v-model="form.tags">
               <el-checkbox v-for="option of dict.type.sm_model_tag" :label="option.value" :key="option.value">{{option.label}}</el-checkbox>
@@ -167,14 +191,38 @@
 
 <script>
 import {listModel, getModel, addModel, updateModel, logicDelModel} from "@/api/system/model";
-import { $serviceType } from '@/utils/mixins'
+import { $serviceType, $showColumns } from '@/utils/mixins'
+
+// 默认排序字段
+const defaultSort = {
+  prop: "sort",
+  order: "asc"
+}
 
 export default {
   name: "Model",
-  mixins: [$serviceType],
+  mixins: [$serviceType, $showColumns],
   dicts: ['sm_model_tag', 'service_type'],
   data() {
     return {
+      defaultSort,
+      // 字段列表
+      columns: [
+        {key: 'modelId', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'modelName', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'model', visible: true, label: '型号编码', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'productId', visible: true, label: '产品ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'introduce', visible: true, label: '产品介绍', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'remark', visible: false, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'tags', visible: true, label: '型号功能', minWidth: null, sortable: true, overflow: false, align: 'center', width: "300"},
+        {key: 'serviceType', visible: false, label: '默认服务费类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'serviceRate', visible: false, label: '默认服务费', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'snPrefix', visible: true, label: 'SN前缀', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
       span: 12,
       // 遮罩层
       loading: true,
@@ -198,6 +246,8 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
         modelName: null,
         model: null,
         idCode: null,
@@ -222,7 +272,10 @@ export default {
         ],
         productId: [
           { required: true, message: "OneNet产品ID不能为空", trigger: "blur" }
-        ]
+        ],
+        sort: [
+          { required: true, message: "排序不允许为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -235,6 +288,17 @@ export default {
     this.getList();
   },
   methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
     /** 查询型号列表列表 */
     getList() {
       this.loading = true;
@@ -267,6 +331,7 @@ export default {
         serviceType: "1",
         serviceRate: null,
         tags: [],
+        sort: 1,
       };
       this.resetForm("form");
     },