<template> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)"> <el-form-item> <el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button> <el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> <el-button v-if="$hasPermission('monitoring:equipment:export')" @click="exportHandle()">{{ $t('export') }}</el-button> </el-form-item> </el-form> <base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" /> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" /> </div> </template> <script> import i18n from '@/i18n' import AddOrUpdate from '@/components/base-dialog/addOrUpdate' // import AddOrUpdate from './equipment-add-or-update' import BaseTable from '@/components/base-table' import TableOperateComponent from '@/components/base-table/components/operationComponent' import TableTextComponent from '@/components/base-table/components/detailComponent' import CKEditor from 'ckeditor4-vue' import { calcMaxHeight } from '@/utils' import { timeFilter } from '@/utils/filters' import Cookies from 'js-cookie' const tableConfigs = [ { type: 'index', name: i18n.t('index') }, { prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter }, { prop: 'name', name: i18n.t('eq.name') }, { prop: 'code', name: i18n.t('eq.code') }, { prop: 'equipmentTypeName', name: i18n.t('eq.type') }, { prop: 'groupName', name: i18n.t('eq.group') }, { prop: 'enName', name: i18n.t('enname') }, { prop: 'abbr', name: i18n.t('abbr') }, { prop: 'sectionName', name: i18n.t('ws.title') }, { prop: 'details', name: i18n.t('detail'), subcomponent: TableTextComponent, actionName: 'view-detail' }, { prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] } ] const addOrUpdateConfigs = { type: 'dialog', infoUrl: '/monitoring/equipment', fields: [ { name: 'name', label: i18n.t('eq.name'), required: true }, { name: 'code', label: i18n.t('eq.code'), api: '/monitoring/equipment/getCode' }, { name: 'enName', label: i18n.t('enname') }, { name: 'abbr', label: i18n.t('abbr') }, { name: 'equipmentTypeId', label: i18n.t('eq.type'), required: true, type: 'select', options: [] }, { name: 'sectionId', label: i18n.t('ws.title'), required: true, type: 'select', options: [] }, { name: 'sort', label: i18n.t('ws.sort') }, { name: 'groupId', label: i18n.t('eq.group'), required: true, type: 'select', options: [] }, { name: 'productionTime', label: i18n.t('produceTime'), type: 'date', props: { 'type': 'date', // element-ui 的配置 'placeholder': i18n.t('hints.date'), 'value-format': 'yyyy-MM-ddTHH:mm:ss', 'style': { width: '100%' } } }, { name: 'enterTime', label: i18n.t('enterTime'), type: 'date', props: { 'type': 'date', // element-ui 的配置 'placeholder': i18n.t('hints.date'), 'value-format': 'yyyy-MM-ddTHH:mm:ss', 'style': { width: '100%' } } }, { name: 'tvalue', label: i18n.t('eq.tvalue'), required: true, rules: [ { type: 'number', message: i18n.t('hints.number'), trigger: 'blur', transform: val => Number(val) } ] }, { name: 'processingTime', label: i18n.t('eq.processingTime'), rules: [ { type: 'number', message: i18n.t('hints.number'), trigger: 'blur', transform: val => Number(val) } ] }, { name: 'manufacturer', label: i18n.t('manufacturer') }, { name: 'spec', label: i18n.t('eq.grade') }, { name: 'dataType', label: i18n.t('eq.dtype'), required: true, type: 'select', options: [ { value: 0, label: i18n.t('eq.dtypenone') }, { value: 1, label: i18n.t('eq.dtypeinput') }, { value: 2, label: i18n.t('eq.dtypeoutput') } ] }, { name: 'remark', label: i18n.t('remark') } ], extraComponents: [ { name: 'description', hasModel: true, label: i18n.t('desc'), fieldType: 'string', component: CKEditor.component, props: { // value: 'tests', config: { // ckeditor 的配置: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html // toolbar: [['Bold']] language: Cookies.get('language') || 'en' } } }, { name: 'files', label: i18n.t('upload.title'), fieldType: 'array', component: () => import('@/components/base-upload'), props: { // 上传组件需要的 props url: '/monitoring/attachment/uploadFileFormData', extraParams: { typeCode: 'EquipmentInfoFile' }, buttonContent: i18n.t('upload.button'), tip: i18n.t('hints.upload2m') } }, { name: 'files', label: i18n.t('eq.image'), fieldType: 'array', component: () => import('@/components/base-upload'), props: { // 上传组件需要的 props url: '/monitoring/attachment/uploadFileFormData', extraParams: { typeCode: 'EquipmentInfoImage' }, buttonContent: i18n.t('upload.button'), tip: i18n.t('hints.upload2mPic') } } ], subtable: { title: i18n.t('eq.viewattr'), url: '/monitoring/equipmentAttr', relatedField: 'equipmentId', tableConfigs: [ { type: 'index', width: 100, name: i18n.t('index') }, { prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter }, { prop: 'attrName', name: i18n.t('attrName'), formField: true }, { prop: 'attrValue', name: i18n.t('attrValue'), formField: true }, { prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] } ] }, operations: [ { name: 'cancel', showAlways: true }, { name: 'save', url: '/monitoring/equipment', permission: 'monitoring:equipment:save', showOnEdit: false }, { name: 'update', url: '/monitoring/equipment', permission: 'monitoring:equipment:update', showOnEdit: true } ] } export default { data() { return { calcMaxHeight, tableConfigs, addOrUpdateConfigs, dataForm: { key: '' }, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false } }, components: { AddOrUpdate, BaseTable }, activated() { console.log('activated') this.getDataList() this.getGroupList() this.getWsList() this.getTypeList() }, methods: { // 获取工段列表 getWsList() { this.$http({ url: this.$http.adornUrl('/monitoring/workshopSection/list'), method: 'get' }).then(({ data : res }) => { const wsConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId') wsConfig.options = res.data?.map(item => ({ value: item.id, label: item.name })) || [] }) }, // 获取设备类型列表 getTypeList() { this.$http({ url: this.$http.adornUrl('/monitoring/equipmentType/page'), method: 'get', params: this.$http.adornParams({ // page: this.pageIndex, // limit: this.pageSize, // key: this.dataForm.key }) }).then(({ data }) => { const eqTypeConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentTypeId') eqTypeConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || [] }) }, // 获取设备分组列表 getGroupList() { this.$http({ url: this.$http.adornUrl('/monitoring/equipmentGroup/page'), method: 'get', params: this.$http.adornParams({ // page: this.pageIndex, // limit: this.pageSize, // key: this.dataForm.key }) }).then(({ data }) => { const groupConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'groupId') groupConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || [] }) }, // 获取数据列表 getDataList() { this.dataListLoading = true this.$http({ url: this.$http.adornUrl('/monitoring/equipment/page'), method: 'get', params: this.$http.adornParams({ page: this.pageIndex, limit: this.pageSize, key: this.dataForm.key }) }).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.data.list // this.dataList = new Array(20).fill('1') // console.log('data list', this.dataList) this.totalPage = data.data.total } else { this.dataList = [] this.totalPage = 0 } this.dataListLoading = false }) }, // 每页数 sizeChangeHandle(val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页 currentChangeHandle(val) { this.pageIndex = val this.getDataList() }, // 多选 selectionChangeHandle(val) { this.dataListSelections = val }, handleOperations({ type, data: id }) { switch (type) { case 'view-detail': // const { name, code } = this.dataList.find(item => item.id === id) // this.$router.push({ // name: 'monitoring-equipmentAdd', // params: { // isdetail: true, // equipmentId: id // } // }) // break return this.addOrUpdateHandle(id, true) case 'edit': return this.addOrUpdateHandle(id) case 'delete': return this.deleteHandle(id) } }, exportHandle() { // this.$http.get(this.$http.adornUrl('/monitoring/equipment/export')).then(({ data: res }) => { this.$http({ url: this.$http.adornUrl('/monitoring/equipment/export'), method: 'get', responseType: 'blob' }).then(res => { let fileName = 'equipment-list.xls' if (res.headers['content-disposition']) { const contentDisposition = res.headers['content-disposition'] fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9) } fileName = decodeURIComponent(fileName) const blob = new Blob([res.data]) if ('download' in document.createElement('a')) { const alink = document.createElement('a') alink.download = fileName alink.style.display = 'none' alink.target = '_blank' alink.href = URL.createObjectURL(blob) document.body.appendChild(alink) alink.click() URL.revokeObjectURL(alink.href) document.body.removeChild(alink) } else { navigator.msSaveBlob(blob, fileName) } }) }, // 新增 / 修改 addOrUpdateHandle(id, isdetail = false) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id, isdetail) }) // this.$router.push({ // name: 'monitoring-equipmentAdd', // params: { // equipmentId: id // } // }) }, // 删除 deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.id }) this.$confirm(`${i18n.t('prompt.info', { handle: id ? i18n.t('delete').toLowerCase() : i18n.t('deleteBatch').toLowerCase() })}`, i18n.t('prompt.title'), { confirmButtonText: i18n.t('confirm'), cancelButtonText: i18n.t('cancel'), type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('/monitoring/equipment'), method: 'delete', data: this.$http.adornData(ids, false, 'raw') }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: i18n.t('prompt.success'), type: 'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }) } } } </script>