|
|
@@ -0,0 +1,385 @@ |
|
|
|
<!-- |
|
|
|
filename: TableConfig.vue |
|
|
|
author: liubin |
|
|
|
date: 2023-10-30 10:09:03 |
|
|
|
description: |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<SearchBar |
|
|
|
:formConfigs="searchBarFormConfig" |
|
|
|
ref="search-bar" |
|
|
|
@headBtnClick="handleSearchBarBtnClick" /> |
|
|
|
|
|
|
|
<!-- 列表 --> |
|
|
|
<base-table |
|
|
|
:table-props="tableProps" |
|
|
|
:page="queryParams.pageNo" |
|
|
|
:limit="queryParams.pageSize" |
|
|
|
:table-data="list" |
|
|
|
ref="pageTable" |
|
|
|
@emitFun="handleEmitFun"> |
|
|
|
<method-btn |
|
|
|
v-if="tableBtn.length" |
|
|
|
slot="handleBtn" |
|
|
|
label="操作" |
|
|
|
:method-list="tableBtn" |
|
|
|
@clickBtn="handleTableBtnClick" /> |
|
|
|
</base-table> |
|
|
|
|
|
|
|
<!-- 分页组件 --> |
|
|
|
<pagination |
|
|
|
v-show="total > 0" |
|
|
|
:total="total" |
|
|
|
:page.sync="queryParams.pageNo" |
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
@pagination="getList" /> |
|
|
|
|
|
|
|
<!-- 对话框(添加 / 修改) --> |
|
|
|
<base-dialog |
|
|
|
:dialogTitle="title" |
|
|
|
:dialogVisible="open" |
|
|
|
width="700px" |
|
|
|
@close="cancel" |
|
|
|
@cancel="cancel" |
|
|
|
@confirm="submitForm"> |
|
|
|
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> |
|
|
|
</base-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
createEquipmentPlc, |
|
|
|
updateEquipmentPlc, |
|
|
|
deleteEquipmentPlc, |
|
|
|
getEquipmentPlc, |
|
|
|
getEquipmentPlcPage, |
|
|
|
exportEquipmentPlcExcel, |
|
|
|
} from '@/api/base/equipmentPlc'; |
|
|
|
import moment from 'moment'; |
|
|
|
import basicPageMixin from '@/mixins/lb/basicPageMixin'; |
|
|
|
|
|
|
|
const switchBtn = { |
|
|
|
name: 'SwitchBtn', |
|
|
|
props: ['injectData'], |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
active() { |
|
|
|
return +this.injectData[this.injectData.prop] == 1 ? true : false; |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: {}, |
|
|
|
render: function (h) { |
|
|
|
return h( |
|
|
|
'el-switch', |
|
|
|
{ |
|
|
|
props: { |
|
|
|
value: this.active, |
|
|
|
}, |
|
|
|
on: { |
|
|
|
change: (newVal) => { |
|
|
|
this.$emit('emitData', { |
|
|
|
action: 'update-collect', |
|
|
|
payload: { |
|
|
|
...this.injectData, |
|
|
|
collection: newVal ? 1 : 0, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
null |
|
|
|
); |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'EquipmentPlc', |
|
|
|
mixins: [basicPageMixin], |
|
|
|
components: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableKey: Math.random(), |
|
|
|
searchBarKeys: ['name', 'plcTableName'], |
|
|
|
tableBtn: [ |
|
|
|
this.$auth.hasPermi('equipment:realtime-table-config:update') |
|
|
|
? { |
|
|
|
type: 'edit', |
|
|
|
btnName: '修改', |
|
|
|
} |
|
|
|
: undefined, |
|
|
|
this.$auth.hasPermi('equipment:realtime-table-config:delete') |
|
|
|
? { |
|
|
|
type: 'delete', |
|
|
|
btnName: '删除', |
|
|
|
} |
|
|
|
: undefined, |
|
|
|
].filter((v) => v), |
|
|
|
tableProps: [ |
|
|
|
// { |
|
|
|
// prop: 'createTime', |
|
|
|
// label: '添加时间', |
|
|
|
// fixed: true, |
|
|
|
// width: 180, |
|
|
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), |
|
|
|
// }, |
|
|
|
{ prop: 'code', label: '编码' }, |
|
|
|
{ prop: 'plcTableName', label: '关联表名' }, |
|
|
|
{ prop: 'name', label: '标识名称' }, |
|
|
|
{ prop: 'enName', label: '英文名称' }, |
|
|
|
{ |
|
|
|
prop: 'collection', |
|
|
|
label: '是否采集', |
|
|
|
subcomponent: switchBtn, |
|
|
|
}, |
|
|
|
{ prop: 'description', label: '描述' }, |
|
|
|
], |
|
|
|
searchBarFormConfig: [ |
|
|
|
{ |
|
|
|
type: 'input', |
|
|
|
label: '表名', |
|
|
|
placeholder: '请输入表名', |
|
|
|
param: 'plcTableName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'input', |
|
|
|
label: '标识', |
|
|
|
placeholder: '请输入标识', |
|
|
|
param: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: '查询', |
|
|
|
name: 'search', |
|
|
|
color: 'primary', |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'separate', |
|
|
|
}, |
|
|
|
{ |
|
|
|
// type: this.$auth.hasPermi('equipment:realtime-table-config:create') |
|
|
|
// ? 'button' |
|
|
|
// : '', |
|
|
|
type: 'button', |
|
|
|
btnName: '新增', |
|
|
|
name: 'add', |
|
|
|
plain: true, |
|
|
|
color: 'success', |
|
|
|
}, |
|
|
|
// { |
|
|
|
// type: this.$auth.hasPermi('equipment:realtime-table-config:export') ? 'button' : '', |
|
|
|
// btnName: '导出', |
|
|
|
// name: 'export', |
|
|
|
// color: 'warning', |
|
|
|
// }, |
|
|
|
], |
|
|
|
rows: [ |
|
|
|
[ |
|
|
|
{ |
|
|
|
input: true, |
|
|
|
label: '关联表名', |
|
|
|
prop: 'plcTableName', |
|
|
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], |
|
|
|
// bind: { |
|
|
|
// disabled: true, // some condition, like detail mode... |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
input: true, |
|
|
|
label: '编码', |
|
|
|
prop: 'code', |
|
|
|
url: '/base/equipment-group/getCode', |
|
|
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], |
|
|
|
}, |
|
|
|
], |
|
|
|
[ |
|
|
|
{ |
|
|
|
input: true, |
|
|
|
label: '标识', |
|
|
|
prop: 'name', |
|
|
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], |
|
|
|
// bind: { |
|
|
|
// disabled: true, // some condition, like detail mode... |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
input: true, |
|
|
|
label: '英文名', |
|
|
|
prop: 'enName', |
|
|
|
}, |
|
|
|
], |
|
|
|
[ |
|
|
|
{ |
|
|
|
switch: true, |
|
|
|
label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集 |
|
|
|
prop: 'collection', |
|
|
|
bind: { |
|
|
|
'active-value': 1, |
|
|
|
'inactive-value': 0, |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
[ |
|
|
|
{ |
|
|
|
textarea: true, |
|
|
|
label: '描述', |
|
|
|
prop: 'description', |
|
|
|
bind: { |
|
|
|
placeholder: '请输入备注', |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
// 是否显示弹出 |
|
|
|
open: false, |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
plcTableName: null, |
|
|
|
name: null, |
|
|
|
}, |
|
|
|
// 表单参数 |
|
|
|
form: {}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
/** 覆盖 handleEmitFun 的默认实现 */ |
|
|
|
handleEmitFun({ action, payload }) { |
|
|
|
switch (action) { |
|
|
|
case 'update-collect': |
|
|
|
this.reset(); |
|
|
|
const tempForm = {}; |
|
|
|
Object.keys(this.form).forEach((key) => { |
|
|
|
tempForm[key] = payload[key]; |
|
|
|
}); |
|
|
|
updateEquipmentPlc(tempForm).then((response) => { |
|
|
|
this.$modal.msgSuccess('修改成功'); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 查询列表 */ |
|
|
|
getList() { |
|
|
|
this.loading = true; |
|
|
|
// 执行查询 |
|
|
|
getEquipmentPlcPage(this.queryParams).then((response) => { |
|
|
|
this.list = response.data.list; |
|
|
|
this.total = response.data.total; |
|
|
|
this.loading = false; |
|
|
|
// this.tableKey = Math.random(); // method 1 |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 取消按钮 */ |
|
|
|
cancel() { |
|
|
|
this.open = false; |
|
|
|
this.reset(); |
|
|
|
}, |
|
|
|
/** 表单重置 */ |
|
|
|
reset() { |
|
|
|
this.form = { |
|
|
|
id: undefined, |
|
|
|
plcTableName: undefined, |
|
|
|
code: undefined, |
|
|
|
name: undefined, |
|
|
|
enName: undefined, |
|
|
|
description: undefined, |
|
|
|
collection: undefined, |
|
|
|
}; |
|
|
|
this.resetForm('form'); |
|
|
|
}, |
|
|
|
/** 搜索按钮操作 */ |
|
|
|
handleQuery() { |
|
|
|
this.queryParams.pageNo = 1; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
/** 重置按钮操作 */ |
|
|
|
resetQuery() { |
|
|
|
this.resetForm('queryForm'); |
|
|
|
this.handleQuery(); |
|
|
|
}, |
|
|
|
/** 新增按钮操作 */ |
|
|
|
handleAdd() { |
|
|
|
this.reset(); |
|
|
|
this.open = true; |
|
|
|
this.title = '添加实时数据采集配置'; |
|
|
|
}, |
|
|
|
/** 修改按钮操作 */ |
|
|
|
handleUpdate(row) { |
|
|
|
this.reset(); |
|
|
|
const id = row.id; |
|
|
|
getEquipmentPlc(id).then((response) => { |
|
|
|
this.form = response.data; |
|
|
|
this.open = true; |
|
|
|
this.title = '修改实时数据采集配置'; |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 提交按钮 */ |
|
|
|
submitForm() { |
|
|
|
this.$refs['form'].validate((valid) => { |
|
|
|
if (!valid) { |
|
|
|
return; |
|
|
|
} |
|
|
|
// 修改的提交 |
|
|
|
if (this.form.id != null) { |
|
|
|
updateEquipmentPlc(this.form).then((response) => { |
|
|
|
this.$modal.msgSuccess('修改成功'); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 添加的提交 |
|
|
|
createEquipmentPlc(this.form).then((response) => { |
|
|
|
this.$modal.msgSuccess('新增成功'); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 删除按钮操作 */ |
|
|
|
handleDelete(row) { |
|
|
|
const id = row.id; |
|
|
|
this.$modal |
|
|
|
.confirm('是否确认删除实时数据采集配置编号为"' + id + '"的数据项?') |
|
|
|
.then(function () { |
|
|
|
return deleteEquipmentPlc(id); |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
this.getList(); |
|
|
|
this.$modal.msgSuccess('删除成功'); |
|
|
|
}) |
|
|
|
.catch(() => {}); |
|
|
|
}, |
|
|
|
/** 导出按钮操作 */ |
|
|
|
handleExport() { |
|
|
|
// 处理查询参数 |
|
|
|
let params = { ...this.queryParams }; |
|
|
|
params.pageNo = undefined; |
|
|
|
params.pageSize = undefined; |
|
|
|
this.$modal |
|
|
|
.confirm('是否确认导出所有实时数据采集配置数据项?') |
|
|
|
.then(() => { |
|
|
|
this.exportLoading = true; |
|
|
|
return exportEquipmentPlcExcel(params); |
|
|
|
}) |
|
|
|
.then((response) => { |
|
|
|
this.$download.excel(response, '实时数据采集配置.xls'); |
|
|
|
this.exportLoading = false; |
|
|
|
}) |
|
|
|
.catch(() => {}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |