<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" @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" :dataForm="form" :rows="rows" /> </base-dialog> </div> </template> <script> import { createEquipmentBindGroup, updateEquipmentBindGroup, deleteEquipmentBindGroup, getEquipmentBindGroup, getEquipmentBindGroupPage, exportEquipmentBindGroupExcel, } from '@/api/base/equipmentBindGroup'; import { getEquipmentGroupPage } from '@/api/base/equipmentGroup'; import moment from 'moment'; import basicPageMixin from '@/mixins/lb/basicPageMixin'; export default { name: 'EquipmentBindGroup', components: {}, mixins: [basicPageMixin], data() { return { searchBarKeys: ['groupId', 'equipmentName'], tableBtn: [ this.$auth.hasPermi('base:equipment-bind-group:update') ? { type: 'edit', btnName: '修改', } : undefined, this.$auth.hasPermi('base:equipment-bind-group: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: 'equipmentName', label: '设备', align: 'center' }, { prop: 'groupName', label: '分组', align: 'center' }, { _action: 'equipment-bind-group-show-alert', label: '分组报警', align: 'center', subcomponent: { props: ['injectData'], render: function (h) { const _this = this; return h( 'el-button', { props: { type: 'text', size: 'mini' }, on: { click: function () { console.log('inejctdata', _this.injectData); _this.$emit('emitData', { action: _this.injectData._action, value: _this.injectData, }); }, }, }, '查看报警' ); }, }, }, ], searchBarFormConfig: [ { type: 'select', label: '分组', placeholder: '请选择分组', param: 'groupId', filterable: true, selectOptions: [], }, { type: 'input', label: '设备', placeholder: '请输入设备', param: 'equipmentName', }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, { type: 'separate', }, { type: this.$auth.hasPermi('base:equipment-bind-group:create') ? 'button' : '', btnName: '新增', name: 'add', plain: true, color: 'success', }, // { // type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '', // btnName: '导出', // name: 'export', // color: 'warning', // }, ], rows: [ [ { select: true, label: '设备', url: '/base/equipment/page?pageNo=1&pageSize=100', prop: 'equipmentId', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], }, ], [ { select: true, label: '报警分组', url: '/base/equipment-group/listAll', // 根据产线获取 // depends: '__product_line', // 依赖产线获取数据 // depends: 'productionLineId', prop: 'groupId', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], }, ], ], // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNo: 1, pageSize: 10, equipmentName: null, groupId: null, }, // 表单参数 form: {}, // 表单校验 rules: {}, }; }, created() { this.getList(); getEquipmentGroupPage({ pageNo: 1, pageSize: 100 }).then((res) => { this.searchBarFormConfig[0].selectOptions = res.data.list; }); }, methods: { /** 覆盖 handleEmitFun 的默认实现 */ handleEmitFun({ action, value }) { const { groupId: equipmentGroupId, groupName: equipmentGroupName, groupCode: equipmentGroupCode, } = value; switch (action) { case 'equipment-bind-group-show-alert': // this.$router.push({ path: '/equipment/base/equipment-group-alarm' }); this.$router.push({ name: 'EquipmentGroupAlarm', params: { equipmentGroupId, equipmentGroupCode, equipmentGroupName, }, }); break; } }, /** 查询列表 */ getList() { this.loading = true; _// 执行查询 getEquipmentBindGroupPage(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, equipmentId: undefined, groupId: 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; getEquipmentBindGroup(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) { updateEquipmentBindGroup(this.form).then((response) => { this.$modal.msgSuccess('修改成功'); this.open = false; this.getList(); }); return; } // 添加的提交 createEquipmentBindGroup(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 deleteEquipmentBindGroup(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 exportEquipmentBindGroupExcel(params); }) .then((response) => { this.$download.excel(response, '设备与分组绑定.xls'); this.exportLoading = false; }) .catch(() => {}); }, }, }; </script>