@@ -58,6 +58,7 @@ | |||
"js-beautify": "1.13.0", | |||
"jsencrypt": "3.3.1", | |||
"min-dash": "3.5.2", | |||
"mockjs": "^1.1.0", | |||
"moment": "^2.29.4", | |||
"nprogress": "0.2.0", | |||
"qrcode.vue": "^1.7.0", | |||
@@ -63,6 +63,12 @@ | |||
{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }} | |||
</div> | |||
</el-upload> | |||
<el-switch | |||
v-if="col.switch" | |||
v-model="form[col.prop]" | |||
active-color="#0b58ff" | |||
inactive-color="#e1e1e1" | |||
v-bind="col.bind"></el-switch> | |||
<component | |||
v-if="col.subcomponent" | |||
:key="col.key" | |||
@@ -229,7 +235,7 @@ export default { | |||
})) | |||
); | |||
} else if (opt.input) { | |||
console.log('setting code: ', response.data) | |||
console.log('setting code: ', response.data); | |||
// 处理输入框数据 | |||
this.form[opt.prop] = response.data; | |||
} | |||
@@ -1,233 +1,373 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<SearchBar | |||
:formConfigs="searchBarFormConfig" | |||
ref="search-bar" | |||
@headBtnClick="handleSearchBarBtnClick" /> | |||
<!-- 搜索工作栏 --> | |||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||
<el-form-item label="实时关联表实际名称" prop="plcTableName"> | |||
<el-input v-model="queryParams.plcTableName" placeholder="请输入实时关联表实际名称" clearable @keyup.enter.native="handleQuery"/> | |||
</el-form-item> | |||
<el-form-item label="标识名称" prop="name"> | |||
<el-input v-model="queryParams.name" placeholder="请输入标识名称" clearable @keyup.enter.native="handleQuery"/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> | |||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> | |||
</el-form-item> | |||
</el-form> | |||
<!-- 列表 --> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-data="list" | |||
@emitFun="handleEmitFun"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleTableBtnClick" /> | |||
</base-table> | |||
<!-- 操作工具栏 --> | |||
<el-row :gutter="10" class="mb8"> | |||
<el-col :span="1.5"> | |||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" | |||
v-hasPermi="['base:equipment-plc:create']">新增</el-button> | |||
</el-col> | |||
<el-col :span="1.5"> | |||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" | |||
v-hasPermi="['base:equipment-plc:export']">导出</el-button> | |||
</el-col> | |||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||
</el-row> | |||
<!-- 分页组件 --> | |||
<pagination | |||
v-show="total > 0" | |||
:total="total" | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
@pagination="getList" /> | |||
<!-- 列表 --> | |||
<el-table v-loading="loading" :data="list"> | |||
<el-table-column label="id" align="center" prop="id" /> | |||
<el-table-column label="实时关联表实际名称" align="center" prop="plcTableName" /> | |||
<el-table-column label="关联表编码" align="center" prop="code" /> | |||
<el-table-column label="标识名称" align="center" prop="name" /> | |||
<el-table-column label="英文标识名称" align="center" prop="enName" /> | |||
<el-table-column label="描述" align="center" prop="description" /> | |||
<el-table-column label="是否采集 0 代表不采集, 1 代表采集" align="center" prop="collection" /> | |||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> | |||
<template v-slot="scope"> | |||
<span>{{ parseTime(scope.row.createTime) }}</span> | |||
</template> | |||
</el-table-column> | |||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||
<template v-slot="scope"> | |||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" | |||
v-hasPermi="['base:equipment-plc:update']">修改</el-button> | |||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" | |||
v-hasPermi="['base:equipment-plc:delete']">删除</el-button> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
<!-- 分页组件 --> | |||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" | |||
@pagination="getList"/> | |||
<!-- 对话框(添加 / 修改) --> | |||
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body> | |||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||
<el-form-item label="实时关联表实际名称" prop="plcTableName"> | |||
<el-input v-model="form.plcTableName" placeholder="请输入实时关联表实际名称" /> | |||
</el-form-item> | |||
<el-form-item label="关联表编码" prop="code"> | |||
<el-input v-model="form.code" placeholder="请输入关联表编码" /> | |||
</el-form-item> | |||
<el-form-item label="标识名称" prop="name"> | |||
<el-input v-model="form.name" placeholder="请输入标识名称" /> | |||
</el-form-item> | |||
<el-form-item label="英文标识名称" prop="enName"> | |||
<el-input v-model="form.enName" placeholder="请输入英文标识名称" /> | |||
</el-form-item> | |||
<el-form-item label="描述" prop="description"> | |||
<el-input v-model="form.description" placeholder="请输入描述" /> | |||
</el-form-item> | |||
<el-form-item label="是否采集 0 代表不采集, 1 代表采集" prop="collection"> | |||
<el-input v-model="form.collection" placeholder="请输入是否采集 0 代表不采集, 1 代表采集" /> | |||
</el-form-item> | |||
</el-form> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||
<el-button @click="cancel">取 消</el-button> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
<!-- 对话框(添加 / 修改) --> | |||
<base-dialog | |||
:dialogTitle="title" | |||
:dialogVisible="open" | |||
width="700px" | |||
@close="cancel" | |||
@cancel="cancel" | |||
@confirm="submitForm"> | |||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { createEquipmentPlc, updateEquipmentPlc, deleteEquipmentPlc, getEquipmentPlc, getEquipmentPlcPage, exportEquipmentPlcExcel } from "@/api/base/equipmentPlc"; | |||
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 { | |||
active: +this.injectData[this.injectData.prop] == 1 ? true : false, | |||
}; | |||
}, | |||
methods: {}, | |||
render: function (h) { | |||
return h( | |||
'el-switch', | |||
{ | |||
props: { | |||
value: this.active, | |||
}, | |||
on: { | |||
change: (newVal) => { | |||
this.active = !this.active; | |||
console.log('changed emit', newVal); | |||
this.$emit('emitData', { | |||
action: 'update-collect', | |||
payload: { | |||
...this.injectData, | |||
collection: newVal ? 1 : 0, | |||
}, | |||
}); | |||
}, | |||
}, | |||
}, | |||
null | |||
); | |||
}, | |||
}; | |||
export default { | |||
name: "EquipmentPlc", | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
// 遮罩层 | |||
loading: true, | |||
// 导出遮罩层 | |||
exportLoading: false, | |||
// 显示搜索条件 | |||
showSearch: true, | |||
// 总条数 | |||
total: 0, | |||
// 实时数据采集配置列表 | |||
list: [], | |||
// 弹出层标题 | |||
title: "", | |||
// 是否显示弹出层 | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
plcTableName: null, | |||
name: null, | |||
}, | |||
// 表单参数 | |||
form: {}, | |||
// 表单校验 | |||
rules: { | |||
plcTableName: [{ required: true, message: "实时关联表实际名称不能为空", trigger: "blur" }], | |||
} | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
// 执行查询 | |||
getEquipmentPlcPage(this.queryParams).then(response => { | |||
this.list = response.data.list; | |||
this.total = response.data.total; | |||
this.loading = false; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
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(() => {}); | |||
} | |||
} | |||
name: 'EquipmentPlc', | |||
mixins: [basicPageMixin], | |||
components: {}, | |||
data() { | |||
return { | |||
searchBarKeys: ['name', 'plcTableName'], | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:equipment-plc:update') | |||
? { | |||
type: 'edit', | |||
btnName: '修改', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:equipment-plc: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: '编码', align: 'center' }, | |||
{ prop: 'plcTableName', label: '关联表名', align: 'center' }, | |||
{ prop: 'name', label: '标识名称', align: 'center' }, | |||
{ prop: 'enName', label: '英文名称', align: 'center' }, | |||
{ | |||
prop: 'collection', | |||
label: '是否采集', | |||
align: 'center', | |||
subcomponent: switchBtn, | |||
}, | |||
{ prop: 'description', label: '描述', align: 'center' }, | |||
], | |||
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('base:equipment-plc:create') | |||
// ? 'button' | |||
// : '', | |||
type: 'button', | |||
btnName: '新增', | |||
name: 'add', | |||
plain: true, | |||
color: 'success', | |||
}, | |||
// { | |||
// type: this.$auth.hasPermi('base:equipment-plc: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', | |||
}, | |||
], | |||
[ | |||
{ | |||
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, | |||
}, | |||
}, | |||
], | |||
[ | |||
{ | |||
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; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
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> |
@@ -0,0 +1,78 @@ | |||
import Mock from 'mockjs'; | |||
const baseURL = 'http://192.168.1.49:48080/admin-api'; | |||
Mock.setup({ | |||
timeout: 200, | |||
}); | |||
// @database | |||
const list = Mock.mock({ | |||
'data|1-10': [ | |||
{ | |||
'id|+1': 1, | |||
productionLine: (options) => { | |||
// console.log('otpsion', options.context.currentContext); | |||
return `EQ${options.context.currentContext.id}`; | |||
}, | |||
workshopSection: ({ context: { currentContext } }) => | |||
`EQ${currentContext.id}_WS${Mock.Random.integer(1, 10)}`, | |||
equipmentName: ({ context: { currentContext } }) => | |||
`设备${currentContext.id}`, | |||
equipmentCode: ({ context: { currentContext } }) => | |||
`${currentContext.equipmentName}_Code`, | |||
plcCode: ({ context: { currentContext } }) => | |||
`PLC_TABLE_CODE_${currentContext.id}`, | |||
plcTableName: ({ context: { currentContext } }) => | |||
`PLC_TABLE_${currentContext.id}`, | |||
plcName: ({ context: { currentContext } }) => `PLC_${currentContext.id}`, | |||
'bindingParameters|1-10': 1, | |||
}, | |||
], | |||
}); | |||
// @page | |||
Mock.mock( | |||
RegExp(baseURL + '/base/equipment-plc-connect/page' + '.*'), | |||
'get', | |||
(options) => { | |||
console.log('[Mock url]', options.url, list); | |||
return { | |||
code: 0, | |||
data: { | |||
list: list.data, | |||
total: list.data.length, | |||
}, | |||
}; | |||
} | |||
); | |||
// @create | |||
Mock.mock(baseURL + '/base/equipment-plc-connect/create', 'post', (options) => { | |||
console.log('options', options); | |||
const { url, type, body } = options; | |||
const newItem = JSON.parse(body); | |||
list.data.push(newItem); | |||
return { | |||
code: 0, | |||
data: null, | |||
msg: 'success', | |||
}; | |||
}); | |||
// @update | |||
Mock.mock( | |||
baseURL + '/admin-api/base/equipment-plc-connect/update', | |||
'put', | |||
(options) => { | |||
const { url, type, body } = options; | |||
const { id } = JSON.parse(body); | |||
const newItem = list.data.find((item) => item.id == id); | |||
newItem = { ...newItem, ...JSON.parse(body) }; | |||
return { | |||
code: 0, | |||
msg: 'success', | |||
data: null, | |||
}; | |||
} | |||
); |
@@ -1,209 +1,349 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<SearchBar | |||
:formConfigs="searchBarFormConfig" | |||
ref="search-bar" | |||
@headBtnClick="handleSearchBarBtnClick" /> | |||
<!-- 搜索工作栏 --> | |||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||
<el-form-item label="plc表iD" prop="plcId"> | |||
<el-input v-model="queryParams.plcId" placeholder="请输入plc表iD" clearable @keyup.enter.native="handleQuery"/> | |||
</el-form-item> | |||
<el-form-item label="设备表id" prop="equipmentId"> | |||
<el-input v-model="queryParams.equipmentId" placeholder="请输入设备表id" clearable @keyup.enter.native="handleQuery"/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> | |||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> | |||
</el-form-item> | |||
</el-form> | |||
<!-- 列表 --> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-data="list" | |||
@emitFun="handleEmitFun"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleTableBtnClick" /> | |||
</base-table> | |||
<!-- 操作工具栏 --> | |||
<el-row :gutter="10" class="mb8"> | |||
<el-col :span="1.5"> | |||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" | |||
v-hasPermi="['base:equipment-plc-connect:create']">新增</el-button> | |||
</el-col> | |||
<el-col :span="1.5"> | |||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" | |||
v-hasPermi="['base:equipment-plc-connect:export']">导出</el-button> | |||
</el-col> | |||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||
</el-row> | |||
<!-- 分页组件 --> | |||
<pagination | |||
v-show="total > 0" | |||
:total="total" | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
@pagination="getList" /> | |||
<!-- 列表 --> | |||
<el-table v-loading="loading" :data="list"> | |||
<el-table-column label="id" align="center" prop="id" /> | |||
<el-table-column label="plc表iD" align="center" prop="plcId" /> | |||
<el-table-column label="设备表id" align="center" prop="equipmentId" /> | |||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||
<template v-slot="scope"> | |||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" | |||
v-hasPermi="['base:equipment-plc-connect:update']">修改</el-button> | |||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" | |||
v-hasPermi="['base:equipment-plc-connect:delete']">删除</el-button> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
<!-- 分页组件 --> | |||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" | |||
@pagination="getList"/> | |||
<!-- 对话框(添加 / 修改) --> | |||
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body> | |||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||
<el-form-item label="plc表iD" prop="plcId"> | |||
<el-input v-model="form.plcId" placeholder="请输入plc表iD" /> | |||
</el-form-item> | |||
<el-form-item label="设备表id" prop="equipmentId"> | |||
<el-input v-model="form.equipmentId" placeholder="请输入设备表id" /> | |||
</el-form-item> | |||
</el-form> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||
<el-button @click="cancel">取 消</el-button> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
<!-- 对话框(添加 / 修改) --> | |||
<base-dialog | |||
:dialogTitle="title" | |||
:dialogVisible="open" | |||
width="700px" | |||
@close="cancel" | |||
@cancel="cancel" | |||
@confirm="submitForm"> | |||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { createEquipmentPlcConnect, updateEquipmentPlcConnect, deleteEquipmentPlcConnect, getEquipmentPlcConnect, getEquipmentPlcConnectPage, exportEquipmentPlcConnectExcel } from "@/api/base/equipmentPlcConnect"; | |||
import { | |||
createEquipmentPlcConnect, | |||
updateEquipmentPlcConnect, | |||
deleteEquipmentPlcConnect, | |||
getEquipmentPlcConnect, | |||
getEquipmentPlcConnectPage, | |||
exportEquipmentPlcConnectExcel, | |||
} from '@/api/base/equipmentPlcConnect'; | |||
import moment from 'moment'; | |||
import basicPageMixin from '@/mixins/lb/basicPageMixin'; | |||
// import './http'; | |||
export default { | |||
name: "EquipmentPlcConnect", | |||
components: { | |||
}, | |||
data() { | |||
return { | |||
// 遮罩层 | |||
loading: true, | |||
// 导出遮罩层 | |||
exportLoading: false, | |||
// 显示搜索条件 | |||
showSearch: true, | |||
// 总条数 | |||
total: 0, | |||
// 设备与实时采集关系表(一对多)列表 | |||
list: [], | |||
// 弹出层标题 | |||
title: "", | |||
// 是否显示弹出层 | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
plcId: null, | |||
equipmentId: null, | |||
}, | |||
// 表单参数 | |||
form: {}, | |||
// 表单校验 | |||
rules: { | |||
plcId: [{ required: true, message: "plc表iD不能为空", trigger: "blur" }], | |||
equipmentId: [{ required: true, message: "设备表id不能为空", trigger: "blur" }], | |||
} | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
// 执行查询 | |||
getEquipmentPlcConnectPage(this.queryParams).then(response => { | |||
this.list = response.data.list; | |||
this.total = response.data.total; | |||
this.loading = false; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
cancel() { | |||
this.open = false; | |||
this.reset(); | |||
}, | |||
/** 表单重置 */ | |||
reset() { | |||
this.form = { | |||
id: undefined, | |||
plcId: undefined, | |||
equipmentId: 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; | |||
getEquipmentPlcConnect(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) { | |||
updateEquipmentPlcConnect(this.form).then(response => { | |||
this.$modal.msgSuccess("修改成功"); | |||
this.open = false; | |||
this.getList(); | |||
}); | |||
return; | |||
} | |||
// 添加的提交 | |||
createEquipmentPlcConnect(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 deleteEquipmentPlcConnect(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 exportEquipmentPlcConnectExcel(params); | |||
}).then(response => { | |||
this.$download.excel(response, '设备与实时采集关系表(一对多).xls'); | |||
this.exportLoading = false; | |||
}).catch(() => {}); | |||
} | |||
} | |||
name: 'EquipmentPlcConnect', | |||
mixins: [basicPageMixin], | |||
components: {}, | |||
data() { | |||
return { | |||
searchBarKeys: ['name', 'plcTableName'], | |||
// tableBtn: [ | |||
// this.$auth.hasPermi('base:equipment-plc:update') | |||
// ? { | |||
// type: 'edit', | |||
// btnName: '修改', | |||
// } | |||
// : undefined, | |||
// this.$auth.hasPermi('base:equipment-plc:delete') | |||
// ? { | |||
// type: 'delete', | |||
// btnName: '删除', | |||
// } | |||
// : undefined, | |||
// ].filter((v) => v), | |||
tableBtn: [ | |||
{ | |||
type: 'edit', | |||
btnName: '修改', | |||
}, | |||
// { | |||
// type: 'params-bind', | |||
// btnName: '参数绑定', | |||
// }, | |||
{ | |||
type: 'delete', | |||
btnName: '删除', | |||
}, | |||
], | |||
tableProps: [ | |||
// { | |||
// prop: 'createTime', | |||
// label: '添加时间', | |||
// fixed: true, | |||
// width: 180, | |||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
// }, | |||
{ prop: 'productionLine', label: '产线', align: 'center' }, | |||
{ prop: 'workshopSection', label: '工段', align: 'center' }, | |||
{ prop: 'equipmentName', label: '设备名', align: 'center' }, | |||
{ prop: 'equipmentCode', label: '设备编码', align: 'center' }, | |||
{ prop: 'plcCode', label: '关联表编码', align: 'center' }, | |||
{ prop: 'plcTableName', label: '关联表名', align: 'center' }, | |||
{ prop: 'plcName', label: '标识名称', align: 'center' }, | |||
{ prop: 'bindingParameters', label: '绑定参数数量', align: 'center' }, | |||
{ | |||
_action: 'params-bind', | |||
label: '查看绑定', | |||
align: 'center', | |||
subcomponent: { | |||
props: ['injectData'], | |||
render: function (h) { | |||
const _this = this; | |||
return h( | |||
'el-button', | |||
{ | |||
props: { type: 'text' }, | |||
on: { | |||
click: function () { | |||
console.log('inejctdata', _this.injectData); | |||
_this.$emit('emitData', { | |||
action: _this.injectData._action, | |||
payload: _this.injectData, | |||
}); | |||
}, | |||
}, | |||
}, | |||
'查看绑定' | |||
); | |||
}, | |||
}, | |||
}, | |||
], | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'input', | |||
label: '设备名', | |||
placeholder: '请输入设备名', | |||
param: 'equipmentId', | |||
}, | |||
{ | |||
type: 'input', | |||
label: '编码', | |||
placeholder: '请输入编码', | |||
param: 'plcId', | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
// type: this.$auth.hasPermi('base:equipment-plc:create') | |||
// ? 'button' | |||
// : '', | |||
type: 'button', | |||
btnName: '新增', | |||
name: 'add', | |||
plain: true, | |||
color: 'success', | |||
}, | |||
// { | |||
// type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '', | |||
// btnName: '导出', | |||
// name: 'export', | |||
// color: 'warning', | |||
// }, | |||
], | |||
rows: [ | |||
[ | |||
{ | |||
select: true, | |||
label: '关联表名', | |||
prop: 'plcId', | |||
url: '/base/equipment-plc/listAll', | |||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
[ | |||
{ | |||
select: true, | |||
label: '设备', | |||
prop: 'equipmentId', | |||
url: '/base/equipment/page?pageNo=1&pageSize=99', | |||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
], | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
plcId: null, | |||
equipmentId: null, | |||
}, | |||
// 表单参数 | |||
form: {}, | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
/** 覆盖 handleEmitFun 的默认实现 */ | |||
handleEmitFun({ action, payload }) { | |||
switch (action) { | |||
case 'params-bind': | |||
this.reset(); | |||
const { | |||
id, | |||
equipmentName, | |||
equipmentId, | |||
plcId, | |||
plcName, | |||
plcTableName, | |||
} = payload; | |||
// console.log('Cha看绑定参数弹窗', id, equipmentName, plcTableName); | |||
this.$router.push({ | |||
name: 'EquipmentPlcParam', | |||
params: { | |||
id, | |||
equipmentName, | |||
plcTableName, | |||
}, | |||
}); | |||
break; | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
// 执行查询 | |||
getEquipmentPlcConnectPage(this.queryParams).then((response) => { | |||
this.list = response.data.list; | |||
this.total = response.data.total; | |||
this.loading = false; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
cancel() { | |||
this.open = false; | |||
this.reset(); | |||
}, | |||
/** 表单重置 */ | |||
reset() { | |||
this.form = { | |||
id: undefined, | |||
plcId: undefined, | |||
equipmentId: 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; | |||
getEquipmentPlcConnect(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) { | |||
updateEquipmentPlcConnect(this.form).then((response) => { | |||
this.$modal.msgSuccess('修改成功'); | |||
this.open = false; | |||
this.getList(); | |||
}); | |||
return; | |||
} | |||
// 添加的提交 | |||
createEquipmentPlcConnect(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 deleteEquipmentPlcConnect(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 exportEquipmentPlcConnectExcel(params); | |||
}) | |||
.then((response) => { | |||
this.$download.excel(response, '设备与实时采集关系表(一对多).xls'); | |||
this.exportLoading = false; | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,255 +1,450 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<SearchBar | |||
:formConfigs="searchBarFormConfig" | |||
ref="search-bar" | |||
@headBtnClick="handleSearchBarBtnClick" /> | |||
<!-- 搜索工作栏 --> | |||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||
<el-form-item label="实时数采表id" prop="connectId"> | |||
<el-input v-model="queryParams.connectId" placeholder="请输入实时数采表id" clearable @keyup.enter.native="handleQuery"/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> | |||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> | |||
</el-form-item> | |||
</el-form> | |||
<!-- 列表 --> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-data="list" | |||
@emitFun="handleEmitFun"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleTableBtnClick" /> | |||
</base-table> | |||
<!-- 操作工具栏 --> | |||
<el-row :gutter="10" class="mb8"> | |||
<el-col :span="1.5"> | |||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" | |||
v-hasPermi="['base:equipment-plc-param:create']">新增</el-button> | |||
</el-col> | |||
<el-col :span="1.5"> | |||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" | |||
v-hasPermi="['base:equipment-plc-param:export']">导出</el-button> | |||
</el-col> | |||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||
</el-row> | |||
<!-- 分页组件 --> | |||
<pagination | |||
v-show="total > 0" | |||
:total="total" | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
@pagination="getList" /> | |||
<!-- 列表 --> | |||
<el-table v-loading="loading" :data="list"> | |||
<el-table-column label="ID" align="center" prop="id" /> | |||
<el-table-column label="实时数采表id" align="center" prop="connectId" /> | |||
<el-table-column label="plc实际的列名(参数列名)" align="center" prop="plcParamName" /> | |||
<el-table-column label="参数名称" align="center" prop="name" /> | |||
<el-table-column label="单位 关联数据字典表label_value" align="center" prop="unit"> | |||
<template v-slot="scope"> | |||
<dict-tag :type="DICT_TYPE.UNIT_DICT" :value="scope.row.unit" /> | |||
</template> | |||
</el-table-column> | |||
<el-table-column label="最小值 数值型可用" align="center" prop="minValue" /> | |||
<el-table-column label="最大值 数值型可用" align="center" prop="maxValue" /> | |||
<el-table-column label="参数设定标准值" align="center" prop="defaultValue" /> | |||
<el-table-column label="0 代表不采集, 1 代表采集" align="center" prop="collection" /> | |||
<el-table-column label="描述" align="center" prop="description" /> | |||
<el-table-column label="备注" align="center" prop="remark" /> | |||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||
<template v-slot="scope"> | |||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" | |||
v-hasPermi="['base:equipment-plc-param:update']">修改</el-button> | |||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" | |||
v-hasPermi="['base:equipment-plc-param:delete']">删除</el-button> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
<!-- 分页组件 --> | |||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" | |||
@pagination="getList"/> | |||
<!-- 对话框(添加 / 修改) --> | |||
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body> | |||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||
<el-form-item label="实时数采表id" prop="connectId"> | |||
<el-input v-model="form.connectId" placeholder="请输入实时数采表id" /> | |||
</el-form-item> | |||
<el-form-item label="plc实际的列名(参数列名)" prop="plcParamName"> | |||
<el-input v-model="form.plcParamName" placeholder="请输入plc实际的列名(参数列名)" /> | |||
</el-form-item> | |||
<el-form-item label="参数名称" prop="name"> | |||
<el-input v-model="form.name" placeholder="请输入参数名称" /> | |||
</el-form-item> | |||
<el-form-item label="单位 关联数据字典表label_value" prop="unit"> | |||
<el-select v-model="form.unit" placeholder="请选择单位 关联数据字典表label_value"> | |||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.UNIT_DICT)" | |||
:key="dict.value" :label="dict.label" :value="dict.value" /> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="最小值 数值型可用" prop="minValue"> | |||
<el-input v-model="form.minValue" placeholder="请输入最小值 数值型可用" /> | |||
</el-form-item> | |||
<el-form-item label="最大值 数值型可用" prop="maxValue"> | |||
<el-input v-model="form.maxValue" placeholder="请输入最大值 数值型可用" /> | |||
</el-form-item> | |||
<el-form-item label="参数设定标准值" prop="defaultValue"> | |||
<el-input v-model="form.defaultValue" placeholder="请输入参数设定标准值" /> | |||
</el-form-item> | |||
<el-form-item label="0 代表不采集, 1 代表采集" prop="collection"> | |||
<el-input v-model="form.collection" placeholder="请输入0 代表不采集, 1 代表采集" /> | |||
</el-form-item> | |||
<el-form-item label="描述"> | |||
<editor v-model="form.description" :min-height="192"/> | |||
</el-form-item> | |||
<el-form-item label="备注" prop="remark"> | |||
<el-input v-model="form.remark" placeholder="请输入备注" /> | |||
</el-form-item> | |||
</el-form> | |||
<div slot="footer" class="dialog-footer"> | |||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||
<el-button @click="cancel">取 消</el-button> | |||
</div> | |||
</el-dialog> | |||
</div> | |||
<!-- 对话框(添加 / 修改) --> | |||
<base-dialog | |||
:dialogTitle="title" | |||
:dialogVisible="open" | |||
width="700px" | |||
@close="cancel" | |||
@cancel="cancel" | |||
@confirm="submitForm"> | |||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { createEquipmentPlcParam, updateEquipmentPlcParam, deleteEquipmentPlcParam, getEquipmentPlcParam, getEquipmentPlcParamPage, exportEquipmentPlcParamExcel } from "@/api/base/equipmentPlcParam"; | |||
import Editor from '@/components/Editor'; | |||
import { | |||
createEquipmentPlcParam, | |||
updateEquipmentPlcParam, | |||
deleteEquipmentPlcParam, | |||
getEquipmentPlcParam, | |||
getEquipmentPlcParamPage, | |||
exportEquipmentPlcParamExcel, | |||
} from '@/api/base/equipmentPlcParam'; | |||
import moment from 'moment'; | |||
import basicPageMixin from '@/mixins/lb/basicPageMixin'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
export default { | |||
name: "EquipmentPlcParam", | |||
components: { | |||
Editor | |||
}, | |||
data() { | |||
return { | |||
// 遮罩层 | |||
loading: true, | |||
// 导出遮罩层 | |||
exportLoading: false, | |||
// 显示搜索条件 | |||
showSearch: true, | |||
// 总条数 | |||
total: 0, | |||
// 设备数采详情列表 | |||
list: [], | |||
// 弹出层标题 | |||
title: "", | |||
// 是否显示弹出层 | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
connectId: null, | |||
}, | |||
// 表单参数 | |||
form: {}, | |||
// 表单校验 | |||
rules: { | |||
connectId: [{ required: true, message: "实时数采表id不能为空", trigger: "blur" }], | |||
plcParamName: [{ required: true, message: "plc实际的列名(参数列名)不能为空", trigger: "blur" }], | |||
name: [{ required: true, message: "参数名称不能为空", trigger: "blur" }], | |||
} | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
// 执行查询 | |||
getEquipmentPlcParamPage(this.queryParams).then(response => { | |||
this.list = response.data.list; | |||
this.total = response.data.total; | |||
this.loading = false; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
cancel() { | |||
this.open = false; | |||
this.reset(); | |||
}, | |||
/** 表单重置 */ | |||
reset() { | |||
this.form = { | |||
id: undefined, | |||
connectId: undefined, | |||
plcParamName: undefined, | |||
name: undefined, | |||
unit: undefined, | |||
minValue: undefined, | |||
maxValue: undefined, | |||
defaultValue: undefined, | |||
collection: undefined, | |||
description: undefined, | |||
remark: 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; | |||
getEquipmentPlcParam(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) { | |||
updateEquipmentPlcParam(this.form).then(response => { | |||
this.$modal.msgSuccess("修改成功"); | |||
this.open = false; | |||
this.getList(); | |||
}); | |||
return; | |||
} | |||
// 添加的提交 | |||
createEquipmentPlcParam(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 deleteEquipmentPlcParam(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 exportEquipmentPlcParamExcel(params); | |||
}).then(response => { | |||
this.$download.excel(response, '设备数采详情.xls'); | |||
this.exportLoading = false; | |||
}).catch(() => {}); | |||
} | |||
} | |||
name: 'EquipmentPlcParam', | |||
mixins: [basicPageMixin], | |||
data() { | |||
return { | |||
tableProps: [ | |||
// { | |||
// prop: 'createTime', | |||
// label: '添加时间', | |||
// fixed: true, | |||
// width: 180, | |||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
// }, | |||
{ prop: 'plcParamName', label: '参数列名', align: 'center' }, | |||
{ prop: 'name', label: '参数名称', align: 'center' }, | |||
{ | |||
prop: 'unit', | |||
label: '单位', | |||
align: 'center', | |||
filter: publicFormatter('unit_dict'), | |||
}, | |||
{ | |||
prop: 'collection', | |||
label: '是否采集', | |||
align: 'center', | |||
filter: (val) => (val != null ? ['否', '是'][val] : '-'), | |||
}, | |||
{ prop: 'minValue', label: '最小值', align: 'center' }, | |||
{ prop: 'maxValue', label: '最大值', align: 'center' }, | |||
{ prop: 'defaultValue', label: '标准值', align: 'center' }, | |||
{ prop: 'description', label: '描述', align: 'center' }, | |||
{ prop: 'remark', label: '备注', align: 'center' }, | |||
// { | |||
// _action: 'params-bind', | |||
// label: '查看绑定', | |||
// align: 'center', | |||
// subcomponent: { | |||
// props: ['injectData'], | |||
// render: function (h) { | |||
// const _this = this; | |||
// return h( | |||
// 'el-button', | |||
// { | |||
// props: { type: 'text' }, | |||
// on: { | |||
// click: function () { | |||
// console.log('inejctdata', _this.injectData); | |||
// _this.$emit('emitData', { | |||
// action: _this.injectData._action, | |||
// payload: _this.injectData, | |||
// }); | |||
// }, | |||
// }, | |||
// }, | |||
// '查看绑定' | |||
// ); | |||
// }, | |||
// }, | |||
// }, | |||
], | |||
rows: [ | |||
[ | |||
{ | |||
input: true, | |||
label: '参数列名', | |||
prop: 'plcParamName', | |||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
{ | |||
input: true, | |||
label: '参数名称', | |||
prop: 'name', | |||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
[ | |||
{ | |||
select: true, | |||
label: '单位', | |||
prop: 'unit', | |||
options: this.getDictDatas(this.DICT_TYPE.UNIT_DICT), | |||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
{ | |||
switch: true, | |||
label: '是否采集', | |||
prop: 'collection', | |||
bind: { | |||
'active-value': 1, | |||
'inactive-value': 0, | |||
}, | |||
}, | |||
], | |||
[ | |||
{ | |||
input: true, | |||
label: '最小值', | |||
prop: 'minValue', | |||
rules: [ | |||
{ | |||
type: 'number', | |||
message: '请输入正确的数字', | |||
trigger: 'blur', | |||
transform: (val) => Number(val), | |||
}, | |||
], | |||
}, | |||
{ | |||
input: true, | |||
label: '最大值', | |||
prop: 'maxValue', | |||
rules: [ | |||
{ | |||
type: 'number', | |||
message: '请输入正确的数字', | |||
trigger: 'blur', | |||
transform: (val) => Number(val), | |||
}, | |||
], | |||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
[ | |||
{ | |||
input: true, | |||
label: '标准值', | |||
prop: 'defaultValue', | |||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
{ | |||
input: true, | |||
label: '描述', | |||
prop: 'description', | |||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
[ | |||
{ | |||
input: true, | |||
label: '备注', | |||
prop: 'remark', | |||
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }], | |||
}, | |||
], | |||
], | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
connectId: null, | |||
}, | |||
// 表单参数 | |||
form: {}, | |||
connectId: null, | |||
equipmentName: '', | |||
plcTableName: '', | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'input', | |||
label: '设备名', | |||
disabled: true, | |||
param: 'equipmentName', | |||
defaultSelect: '', | |||
}, | |||
{ | |||
type: 'input', | |||
label: '关联表名', | |||
disabled: true, | |||
param: 'plcName', | |||
defaultSelect: '', | |||
}, | |||
{ | |||
type: | |||
this.$auth.hasPermi('base:equipment-plc-param:create') && | |||
!this.isDetailPage | |||
? 'button' | |||
: '', | |||
btnName: '新增', | |||
name: 'add', | |||
plain: true, | |||
color: 'success', | |||
}, | |||
], | |||
}; | |||
}, | |||
computed: { | |||
isDetailPage() { | |||
return this.$route.params.detail === true; | |||
}, | |||
tableBtn() { | |||
return [ | |||
this.$auth.hasPermi('base:equipment-plc-param:update') && | |||
!this.isDetailPage | |||
? { | |||
type: 'edit', | |||
btnName: '修改', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:equipment-plc-param:delete') && | |||
!this.isDetailPage | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v); | |||
}, | |||
// searchBarFormConfig() { | |||
// console.log( | |||
// 'ers', | |||
// JSON.stringify({ eid: this.equipmentName, plc: this.plcTableName }) | |||
// ); | |||
// return [ | |||
// { | |||
// type: 'input', | |||
// label: '设备名', | |||
// disabled: true, | |||
// param: 'equipmentName', | |||
// defaultSelect: this.equipmentName, | |||
// }, | |||
// { | |||
// type: 'input', | |||
// label: '关联表名', | |||
// disabled: true, | |||
// param: 'plcName', | |||
// defaultSelect: this.plcTableName, | |||
// }, | |||
// { | |||
// type: | |||
// this.$auth.hasPermi('base:equipment-plc-param:create') && | |||
// !this.isDetailPage | |||
// ? 'button' | |||
// : '', | |||
// btnName: '新增', | |||
// name: 'add', | |||
// plain: true, | |||
// color: 'success', | |||
// }, | |||
// ]; | |||
// }, | |||
}, | |||
activated() { | |||
console.log('activated,,,'); | |||
// 设置顶部搜索栏信息 | |||
const { equipmentName, id: connectId, plcTableName } = this.$route.params; | |||
// this.equipmentName = equipmentName; | |||
// this.plcTableName = plcTableName; | |||
this.setSearchBarFormValue('equipmentName', equipmentName); | |||
this.setSearchBarFormValue('plcName', plcTableName); | |||
this.queryParams.connectId = connectId; | |||
// if (!equipmentGroupId) this.getList(); // 拦截 | |||
this.getList(); | |||
}, | |||
deactivated() { | |||
console.log('deactivated,,,'); | |||
this.setSearchBarFormValue('equipmentName', ''); | |||
this.setSearchBarFormValue('plcName', ''); | |||
// this.equipmentName = null; | |||
// this.plcTableName = null; | |||
this.queryParams.connectId = null; | |||
}, | |||
methods: { | |||
/** 设置 searchBarForm 的默认值 - 用得比较少 */ | |||
setSearchBarFormValue(param, value) { | |||
this.searchBarFormConfig.forEach((config) => { | |||
if (config.param == param) { | |||
config.defaultSelect = value; | |||
} | |||
}); | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
// 执行查询 | |||
getEquipmentPlcParamPage(this.queryParams).then((response) => { | |||
this.list = response.data.list; | |||
this.total = response.data.total; | |||
this.loading = false; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
cancel() { | |||
this.open = false; | |||
this.reset(); | |||
}, | |||
/** 表单重置 */ | |||
reset() { | |||
this.form = { | |||
id: undefined, | |||
connectId: undefined, | |||
plcParamName: undefined, | |||
name: undefined, | |||
unit: undefined, | |||
minValue: undefined, | |||
maxValue: undefined, | |||
defaultValue: undefined, | |||
collection: undefined, | |||
description: undefined, | |||
remark: 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; | |||
getEquipmentPlcParam(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) { | |||
updateEquipmentPlcParam({ | |||
...this.form, | |||
connectId: this.queryParams.connectId, | |||
}).then((response) => { | |||
this.$modal.msgSuccess('修改成功'); | |||
this.open = false; | |||
this.getList(); | |||
}); | |||
return; | |||
} | |||
// 添加的提交 | |||
createEquipmentPlcParam({ | |||
...this.form, | |||
connectId: this.queryParams.connectId, | |||
}).then((response) => { | |||
this.$modal.msgSuccess('新增成功'); | |||
this.open = false; | |||
this.getList(); | |||
}); | |||
}); | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
const id = row.id; | |||
this.$modal | |||
.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?') | |||
.then(function () { | |||
return deleteEquipmentPlcParam(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 exportEquipmentPlcParamExcel(params); | |||
}) | |||
.then((response) => { | |||
this.$download.excel(response, '设备数采详情.xls'); | |||
this.exportLoading = false; | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -3059,6 +3059,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: | |||
dependencies: | |||
delayed-stream "~1.0.0" | |||
commander@*: | |||
version "11.0.0" | |||
resolved "https://registry.npmmirror.com/commander/-/commander-11.0.0.tgz#43e19c25dbedc8256203538e8d7e9346877a6f67" | |||
integrity sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ== | |||
commander@2.17.x: | |||
version "2.17.1" | |||
resolved "https://registry.npmmirror.com/commander/-/commander-2.17.1.tgz" | |||
@@ -6826,6 +6831,13 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: | |||
resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz" | |||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== | |||
mockjs@^1.1.0: | |||
version "1.1.0" | |||
resolved "https://registry.npmmirror.com/mockjs/-/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06" | |||
integrity sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ== | |||
dependencies: | |||
commander "*" | |||
moddle-xml@^9.0.6: | |||
version "9.0.6" | |||
resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz" | |||