型号排序
This commit is contained in:
磷叶
parent
685ed1e477
commit
904a4217bf
|
|
@ -55,7 +55,9 @@ export default {
|
|||
loading: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
pageSize: 100,
|
||||
orderByColumn: 'sort',
|
||||
isAsc: 'asc'
|
||||
},
|
||||
options: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user