<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" @close="cancel" @cancel="cancel" @confirm="submitForm"> <DialogForm v-if="open" key="index-dialog-form" ref="form" :dataForm="form" :rows="rows" /> </base-dialog> <!-- 设备 详情 - 编辑 --> <EquipmentDrawer v-if="editVisible" ref="drawer" :mode="editMode" :data-id="form.id" :sections="[ { name: '基本信息', key: 'base', rows: rows, url: '/base/equipment/get', urlUpdate: '/base/equipment/update', urlCreate: '/base/equipment/create', queryParams: { id: form.id }, }, { name: '属性列表', key: 'attrs', props: drawerListProps, url: '/base/equipment-attr/page', urlCreate: '/base/equipment-attr/create', urlUpdate: '/base/equipment-attr/update', urlDelete: '/base/equipment-attr/delete', urlDetail: '/base/equipment-attr/get', queryParams: { equipmentId: form.id, pageNo: 1, pageSize: 10, }, tableBtn: [ this.$auth.hasPermi('base:equipment-attr:update') ? { type: 'edit', btnName: '修改', } : undefined, this.$auth.hasPermi('base:equipment-attr:delete') ? { type: 'delete', btnName: '删除', } : undefined, ].filter((v) => v), allowAdd: true, }, ]" @refreshDataList="getList" @cancel="editVisible = false" @destroy="editVisible = false" /> </div> </template> <script> import moment from 'moment'; import basicPageMixin from '@/mixins/lb/basicPageMixin'; import { getAccessToken } from '@/utils/auth'; import EquipmentPics from './components/EquipmentPics'; import EquipmentAssets from './components/EquipmentAssets'; import EquipmentDrawer from './components/EquipmentDrawer'; import { createEquipment, updateEquipment, deleteEquipment, getEquipment, getEquipmentPage, exportEquipmentExcel, } from '@/api/base/equipment'; import Editor from '@/components/Editor'; export default { name: 'Equipment', components: { Editor, EquipmentDrawer, }, mixins: [basicPageMixin], data() { return { searchBarKeys: ['name', 'code'], tableBtn: [ this.$auth.hasPermi('base:equipment:update') ? { type: 'edit', btnName: '修改', } : undefined, this.$auth.hasPermi('base:equipment: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: 'name', label: '设备名称', align: 'center' }, { prop: 'code', label: '检测编码', align: 'center' }, { prop: 'equipmentType', label: '设备类型', align: 'center' }, { prop: 'enName', label: '英文名称', align: 'center' }, { prop: 'abbr', label: '缩写', align: 'center' }, { action: 'show-detail', 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.id, }); }, }, }, '查看详情' ); }, }, }, ], searchBarFormConfig: [ { type: 'input', label: '名称', placeholder: '请输入设备名称', param: 'name', }, { type: 'input', label: '编码', placeholder: '请输入设备编码', param: 'code', }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, { type: 'separate', }, { type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '', btnName: '新增', name: 'add', plain: true, color: 'success', }, { type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '', btnName: '导出', name: 'export', color: 'warning', }, ], rows: [ [ { input: true, label: '设备名称', prop: 'name', rules: [{ required: true, message: '不能为空', trigger: 'blur' }], // bind: { // disabled: this.editMode == 'detail', // some condition, like detail mode... // } }, { input: true, label: '设备编码', prop: 'code', url: '/base/equipment/getCode', }, ], [ { input: true, label: '英文名称', prop: 'enName', // rules: [{ required: true, message: '不能为空', trigger: 'blur' }], // bind: { // disabled: true, // some condition, like detail mode... // } }, { input: true, label: '缩写', prop: 'abbr', // rules: [{ required: true, message: '不能为空', trigger: 'blur' }], // bind: { // disabled: true, // some condition, like detail mode... // } }, ], [ { select: true, label: '设备类型', prop: 'equipmentTypeId', url: '/base/equipment-type/page?pageNo=1&pageSize=100', }, // { // select: true, // label: '设备分组', // prop: 'groupId', // url: '/base/equipment-group/page?pageNo=1&pageSize=100', // }, { input: true, label: '备注', prop: 'remark' }, ], [ { datetime: true, label: '生产日期', prop: 'productionTime', }, { datetime: true, label: '进厂日期', prop: 'enterTime', }, ], [ { input: true, prop: 'tvalue', label: '设备TT值', rules: [ { required: true, message: '不能为空', trigger: 'blur' }, { type: 'number', message: '请输入正确的数字值', trigger: 'blur', transform: (val) => Number(val), }, ], }, { input: true, label: '产品加工时间', prop: 'processingTime', rules: [ { type: 'number', message: '请输入正确的数字值', trigger: 'blur', transform: (val) => Number(val), }, ], }, ], [ { input: true, label: '制造商', // rules: [{ required: true, message: '不能为空', trigger: 'blur' }], prop: 'manufacturer', }, { input: true, label: '设备规格', prop: 'spec', }, ], [ { textarea: true, label: '功能描述', // rules: [{ required: true, message: '不能为空', trigger: 'blur' }], prop: 'description', }, ], [ { upload: true, label: '上传资料', prop: 'uploadFiles', url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 bind: { headers: { Authorization: 'Bearer ' + getAccessToken() }, 'show-file-list': false, }, }, ], [ { diy: true, key: 'eq-assets', label: '设备资料', prop: 'fileNames', subcomponent: EquipmentAssets, }, ], [ { diy: true, key: 'eq-pics', label: '设备图片', prop: 'fileUrls', subcomponent: EquipmentPics, pictures: async () => { // some async request return []; }, }, ], ], editVisible: false, editMode: 'edit', // 'edit', 'detail' // drawer 里的设备属性列表配置项 drawerListProps: [ { prop: 'createTime', label: '添加时间', fixed: true, width: 180, filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), }, { prop: 'name', label: '属性名称', align: 'center' }, { prop: 'value', label: '属性值', align: 'center' }, ], // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNo: 1, pageSize: 10, code: '', name: '', }, // 表单参数 form: { id: null, }, }; }, created() { this.getList(); }, methods: { /** 查询列表 */ getList() { this.loading = true; // 执行查询 getEquipmentPage(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, code: undefined, name: undefined, enName: undefined, abbr: undefined, enterTime: undefined, productionTime: undefined, equipmentTypeId: undefined, groupId: undefined, tvalue: undefined, processingTime: undefined, manufacturer: undefined, spec: undefined, description: undefined, remark: undefined, }; this.resetForm('form'); }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = '添加设备'; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id; getEquipment(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) { updateEquipment(this.form).then((response) => { this.$modal.msgSuccess('修改成功'); this.open = false; this.getList(); }); return; } // 添加的提交 createEquipment(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 deleteEquipment(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 exportEquipmentExcel(params); }) .then((response) => { this.$download.excel(response, '设备.xls'); this.exportLoading = false; }) .catch(() => {}); }, // 查看详情 viewDetail(id) { this.reset(); this.editMode = 'detail'; this.form.id = id; this.editVisible = true; this.$nextTick(() => { this.$refs['drawer'].init(); }); }, // overwrite basicPageMixin 里的 处理表格按钮 方法 handleTableBtnClick({ data, type }) { console.log('[handleTableBtnClick]', data, type); switch (type) { case 'edit': this.reset(); this.editMode = 'edit'; this.form.id = data.id; this.editVisible = true; this.$nextTick(() => { this.$refs['drawer'].init(); }); break; case 'delete': this.handleDelete(data); break; } }, }, }; </script>