From 904a4217bf766b6a0937395312f63ed1388064b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
<14103883+leaf-phos@user.noreply.gitee.com>
Date: Fri, 8 Nov 2024 15:50:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9E=8B=E5=8F=B7=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Business/Model/ModelSimpleSelect.vue | 4 +-
src/views/system/model/index.vue | 129 +++++++++++++-----
2 files changed, 100 insertions(+), 33 deletions(-)
diff --git a/src/components/Business/Model/ModelSimpleSelect.vue b/src/components/Business/Model/ModelSimpleSelect.vue
index ab923c1..fb63807 100644
--- a/src/components/Business/Model/ModelSimpleSelect.vue
+++ b/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: []
}
diff --git a/src/views/system/model/index.vue b/src/views/system/model/index.vue
index b105608..af6d41d 100644
--- a/src/views/system/model/index.vue
+++ b/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"/>
- <el-table-column label="名称" align="center" prop="modelName" />
- <el-table-column label="型号编码" align="center" prop="model" />
- <el-table-column label="产品ID" align="center" prop="productId" />
- <el-table-column label="型号功能" align="center" prop="tags" width="300">
- <dict-tag slot-scope="d" :value="d.row.tags" :options="dict.type.sm_model_tag"/>
- </el-table-column>
- <el-table-column label="图片" align="center" prop="picture" width="100">
- <template slot-scope="scope">
- <image-preview :src="scope.row.picture" :width="50" :height="50"/>
- </template>
- </el-table-column>
- <el-table-column label="产品介绍" align="center" prop="introduce" width="300"/>
- <el-table-column label="备注" align="center" prop="remark" width="300"/>
+ <template v-for="column of showColumns">
+ <el-table-column
+ :key="column.key"
+ :label="column.label"
+ :prop="column.key"
+ :align="column.align"
+ :min-width="column.minWidth"
+ :sort-orders="orderSorts"
+ :sortable="column.sortable"
+ :show-overflow-tooltip="column.overflow"
+ :width="column.width"
+ >
+ <template slot-scope="d">
+ <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-input v-model="form.modelName" placeholder="请输入型号名称" />
- </form-col>
- <form-col :span="span" label="型号编码" prop="model">
- <el-input v-model="form.model" placeholder="请输入型号编码"/>
- </form-col>
- <form-col :span="span" label="产品ID" prop="productId">
- <el-input v-model="form.productId" placeholder="请输入OneNet产品ID"/>
- </form-col>
- <form-col :span="span" label="SN前缀" prop="snPrefix">
- <el-input v-model="form.snPrefix" placeholder="请输入SN前缀"/>
- </form-col>
+ <el-col :span="span">
+ <el-row>
+ <form-col :span="24" label="名称" prop="modelName">
+ <el-input v-model="form.modelName" placeholder="请输入型号名称" />
+ </form-col>
+ <form-col :span="24" label="型号编码" prop="model">
+ <el-input v-model="form.model" placeholder="请输入型号编码"/>
+ </form-col>
+ <form-col :span="24" label="产品ID" prop="productId">
+ <el-input v-model="form.productId" placeholder="请输入OneNet产品ID"/>
+ </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");
},