216 lines
9.0 KiB
Vue
216 lines
9.0 KiB
Vue
<template>
|
|
<div class="content-view">
|
|
<div class="table-head-tool">
|
|
<Button type="primary" @click="showAddWarp">新增配置</Button>
|
|
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
|
<FormItem :label-width="20" class="flex">
|
|
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
|
:placeholder="seachTypePlaceholder">
|
|
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
|
</Select>
|
|
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
|
placeholder="请输入关键字" @on-search="query(1)" />
|
|
</FormItem>
|
|
<FormItem label="配置分类">
|
|
<Select v-model="gridOption.param.seachOption.category" style="width: 120px" clearable @on-change="query(1)">
|
|
<Option value="system">系统配置</Option>
|
|
<Option value="ai">AI服务</Option>
|
|
<Option value="mqtt">MQTT</Option>
|
|
<Option value="schedule">调度</Option>
|
|
<Option value="platform">平台</Option>
|
|
</Select>
|
|
</FormItem>
|
|
<FormItem label="状态">
|
|
<Select v-model="gridOption.param.seachOption.isActive" style="width: 120px" clearable @on-change="query(1)">
|
|
<Option :value="true">启用</Option>
|
|
<Option :value="false">禁用</Option>
|
|
</Select>
|
|
</FormItem>
|
|
<FormItem>
|
|
<Button type="primary" @click="query(1)">查询</Button>
|
|
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
|
<Button type="default" @click="exportCsv">导出</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</div>
|
|
<div class="table-body">
|
|
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
|
@changePage="query"></tables>
|
|
</div>
|
|
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"></editModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import systemConfigServer from '@/api/system/system_config_server.js'
|
|
|
|
export default {
|
|
data() {
|
|
let rules = {}
|
|
rules["configKey"] = [{ required: true, message: '请填写配置键', trigger: 'blur' }]
|
|
rules["configValue"] = [{ required: true, message: '请填写配置值', trigger: 'blur' }]
|
|
rules["configName"] = [{ required: true, message: '请填写配置名称', trigger: 'blur' }]
|
|
|
|
return {
|
|
seachTypes: [
|
|
{ key: 'configKey', value: '配置键' },
|
|
{ key: 'configName', value: '配置名称' }
|
|
],
|
|
gridOption: {
|
|
param: {
|
|
seachOption: {
|
|
key: 'configKey',
|
|
value: '',
|
|
category: null,
|
|
isActive: null
|
|
},
|
|
pageOption: {
|
|
page: 1,
|
|
pageSize: 20
|
|
}
|
|
},
|
|
data: [],
|
|
rules: rules
|
|
},
|
|
listColumns: [
|
|
{ title: 'ID', key: 'id', minWidth: 80 },
|
|
{ title: '配置键', key: 'configKey', minWidth: 200 },
|
|
{ title: '配置名称', key: 'configName', minWidth: 150 },
|
|
{
|
|
title: '配置分类',
|
|
key: 'category',
|
|
minWidth: 100,
|
|
render: (h, params) => {
|
|
const categoryMap = {
|
|
'system': { text: '系统配置', color: 'blue' },
|
|
'ai': { text: 'AI服务', color: 'purple' },
|
|
'mqtt': { text: 'MQTT', color: 'green' },
|
|
'schedule': { text: '调度', color: 'orange' },
|
|
'platform': { text: '平台', color: 'cyan' }
|
|
}
|
|
const category = categoryMap[params.row.category] || { text: params.row.category, color: 'default' }
|
|
return h('Tag', { props: { color: category.color } }, category.text)
|
|
}
|
|
},
|
|
{ title: '配置值', key: 'configValue', minWidth: 200 },
|
|
{
|
|
title: '状态',
|
|
key: 'isActive',
|
|
minWidth: 100,
|
|
render: (h, params) => {
|
|
return h('Tag', {
|
|
props: { color: params.row.isActive ? 'success' : 'default' }
|
|
}, params.row.isActive ? '启用' : '禁用')
|
|
}
|
|
},
|
|
{ title: '描述', key: 'description', minWidth: 200 },
|
|
{ title: '更新时间', key: 'last_modify_time', minWidth: 150 },
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 200,
|
|
type: 'template',
|
|
render: (h, params) => {
|
|
let btns = [
|
|
{
|
|
title: '编辑',
|
|
type: 'primary',
|
|
click: () => {
|
|
this.showEditWarp(params.row)
|
|
},
|
|
},
|
|
{
|
|
title: '删除',
|
|
type: 'error',
|
|
click: () => {
|
|
this.delConfirm(params.row)
|
|
},
|
|
},
|
|
]
|
|
return window.framework.uiTool.getBtn(h, btns)
|
|
},
|
|
}
|
|
],
|
|
editColumns: [
|
|
{ title: '配置键', key: 'configKey', type: 'text', required: true },
|
|
{ title: '配置名称', key: 'configName', type: 'text', required: true },
|
|
{ title: '配置分类', key: 'category', type: 'select', options: [
|
|
{ value: 'system', label: '系统配置' },
|
|
{ value: 'ai', label: 'AI服务' },
|
|
{ value: 'mqtt', label: 'MQTT' },
|
|
{ value: 'schedule', label: '调度' },
|
|
{ value: 'platform', label: '平台' }
|
|
]},
|
|
{ title: '配置值', key: 'configValue', type: 'textarea', required: true },
|
|
{ title: '默认值', key: 'defaultValue', type: 'text' },
|
|
{ title: '数据类型', key: 'valueType', type: 'select', options: [
|
|
{ value: 'string', label: '字符串' },
|
|
{ value: 'number', label: '数字' },
|
|
{ value: 'boolean', label: '布尔值' },
|
|
{ value: 'json', label: 'JSON对象' }
|
|
]},
|
|
{ title: '描述', key: 'description', type: 'textarea' },
|
|
{ title: '状态', key: 'isActive', type: 'switch' }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.query(1)
|
|
},
|
|
methods: {
|
|
query(page) {
|
|
this.gridOption.param.pageOption.page = page
|
|
systemConfigServer.page(this.gridOption.param).then(res => {
|
|
this.gridOption.data = res.data.rows
|
|
this.gridOption.param.pageOption.total = res.data.count
|
|
})
|
|
},
|
|
showAddWarp() {
|
|
this.$refs.editModal.showModal()
|
|
},
|
|
showEditWarp(row) {
|
|
this.$refs.editModal.showModal(row)
|
|
},
|
|
delConfirm(row) {
|
|
window.framework.uiTool.delConfirm(async () => {
|
|
await systemConfigServer.del(row)
|
|
this.$Message.success('删除成功！')
|
|
this.query(1)
|
|
})
|
|
},
|
|
exportCsv() {
|
|
systemConfigServer.exportCsv(this.gridOption.param).then(res => {
|
|
window.framework.funTool.downloadFile(res, '系统配置.csv')
|
|
})
|
|
},
|
|
resetQuery() {
|
|
this.gridOption.param.seachOption = {
|
|
key: 'configKey',
|
|
value: '',
|
|
category: null,
|
|
isActive: null
|
|
}
|
|
this.query(1)
|
|
}
|
|
},
|
|
computed: {
|
|
seachTypePlaceholder() {
|
|
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key)
|
|
return selected ? selected.value : '请选择搜索类型'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|