diff --git a/AddOrUpdateConfig.md b/AddOrUpdateConfig.md index ff0a2f8..8ad61ab 100644 --- a/AddOrUpdateConfig.md +++ b/AddOrUpdateConfig.md @@ -2,6 +2,82 @@ > 通过传入合理的配置项来使用 addOrUpdate Dialog +## 用途 + +通过给对话框传递配置项，并自动根据这些配置项来初始化对话框的功能 + +## props + +- configs 对象 + +``` + + + +type Operation = { + name: 'add' | 'edit' | 'detail' | 'delete' | ..., + url: string, /** 该操作需要的接口地址，如删除接口 */ + showAlways: boolean, + showOnEdit: boolean, + permission: string, + } + +type SubTableConfig = { + [_:string]: any, + title: string, /** 表格的名称 */ + url: string, /** 涉及的接口 */ + tableConfigs: { + [_:string]: any, + type?: 'index' | ..., + prop: string, + name: string, + rules?: any[], + fixed?: string, + width?: string, + subcomponent: VueComponent, + options: any[], + formField: boolean, /** 是否在新增编辑子表单里出现该字段 */ + }[], /** 表格prop配置数组，参考 components/base-table 组件和 element-ui 文档 */ + } + +type ExtraComponent = { + name: string, + label: string, + hasModel: boolean, /** 是否需要为该组件设置 v-model */ + component: VueComponent, /** 动态加载的 vue 组件 */ + props: { + [_:string]: string | object + extraParams?: { /** 上传组件使用 */ + typeCode: string + } + }[] + } + +type Field = { + [_:string]: string | boolean | object | object[], + name: string, + type?: 'input' | 'select' | ..., + options?: any[], /** 设置 type 为 select 时的选项数据 */ + label?: string, /** 没有时会用 name 替代 */ + placeholder?: string, /** 没有时会生成默认占位符 */ + api?: string, /** 如果有该字段，就自动从api地址获取数据并填充到对应的输入框里，一般为 getCode 的接口 */ + relatedField?: string, /** 关联字段，当设置此字段时，意味着需要在对话框组件上监听 select-change 事件，并当该字段数据被改变时刷新 relatedField 的列表，一般是像选择产线时更新工段列表这样的场景使用 */, + required?: boolean, /** 验证规则的简写，只需要限制必填项时，不需要其他验证规则时使用 */ + rules?: object[], /** 规则设置参考 element-ui 的表单验证配置 */ +} + +type Configs = { + type: 'dialog', + infoUrl: string, /** 编辑时获取信息的接口地址 */ + fields: Field[], + extraComponents?: ExtraComponent[], + subtable?: SubTableConfig[], + operations?: Operation[] +} + + +``` + ## 示例 ```js @@ -79,7 +155,7 @@ const addOrUpdateConfigs = { } ``` -## 配置项 +## 配置项解释
@@ -136,6 +212,7 @@ const addOrUpdateConfigs = { 含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性” 类型：object 选项： + - title, 内嵌表格的标题 - url, 内嵌表格的数据地址 - tableConfigs，内嵌表格的配置选项 @@ -154,13 +231,14 @@ const addOrUpdateConfigs = { - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件） ### extraComponents + 含义: 需要在对话框里使用的自定义组件列表 类型: Array 对象选项： - - name: 该组件对应的 dataForm 字段（需要参照后端文档来指定） - - hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联 - - label - - fieldType: 设置该组件的数据将以什么数据类型形式来保存 - - component: 组件 - - props 传给组件的配置 - \ No newline at end of file + +- name: 该组件对应的 dataForm 字段（需要参照后端文档来指定） +- hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联 +- label +- fieldType: 设置该组件的数据将以什么数据类型形式来保存 +- component: 组件 +- props 传给组件的配置 diff --git a/src/components/base-dialog/AttrForm/index.vue b/src/components/base-dialog/AttrForm/index.vue index 5e9f505..df52b4b 100644 --- a/src/components/base-dialog/AttrForm/index.vue +++ b/src/components/base-dialog/AttrForm/index.vue @@ -127,18 +127,11 @@ export default { } }, methods: { - /** filter tableConfigs */ filterTableConfigs() { - // return this.tableConfigs.map(item => { - // const {prop, name, filter} = item - // const newConfigs = {prop,name,filter} - // if (item.type) newConfigs.type = item.type - // if (item.fixed) newConfigs.fixed = item.fixed - // if (item.width) newConfigs.width = item.width - // if (item.subcomponent) newConfigs.subcomponent = item.subcomponent - // if (item.options) newConfigs.options = item.options - // return newConfigs - // }) + if (this.isDetail) { + /** 如果是查看详情，就屏蔽操作列 */ + return this.tableConfigs.filter(opt => opt.prop !== 'operations') + } return this.tableConfigs }, /** init dataform */ diff --git a/src/components/base-dialog/addOrUpdate/index.vue b/src/components/base-dialog/addOrUpdate/index.vue index c6639bd..3c71bd9 100644 --- a/src/components/base-dialog/addOrUpdate/index.vue +++ b/src/components/base-dialog/addOrUpdate/index.vue @@ -38,7 +38,7 @@ :disabled="isDetail" @change="emitSelectChange(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name, $event)" > - + { - if (Object.hasOwn(this.dataForm, [item.name])) { + // if (Object.hasOwn(this.dataForm, [item.name])) { + if (this.dataForm.hasOwnProperty(item.name)) { return } else { this.$set(this.dataForm, [item.name], calDefault(item.fieldType)) @@ -394,7 +410,8 @@ export default { this.dataForm.files.forEach(file => { // const fileName = file.fileUrl.split('/').pop() /** [1] 处理 fileList */ - if (Object.hasOwn(this.fileList, file.typeCode)) { + // if (Object.hasOwn(this.fileList, file.typeCode)) { + if (this.fileList.hasOwnProperty(file.typeCode)) { /** 已存在 */ // this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode }) this.fileList[file.typeCode].push(file) @@ -404,7 +421,8 @@ export default { } /** [2] 处理 fileForm */ - if (Object.hasOwn(this.fileForm, file.typeCode)) { + // if (Object.hasOwn(this.fileForm, file.typeCode)) { + if (this.fileForm.hasOwnProperty(file.typeCode)) { this.fileForm[file.typeCode].push(file.id) } else { this.fileForm[file.typeCode] = [file.id] @@ -425,12 +443,17 @@ export default { }) // console.log('create new, dataform', JSON.stringify(this.dataForm)) } + this.shouldWait = null }) } }) }, emitSelectChange(name, id) { + const currentField = this.configs.fields.find(item => item.name === name) + if (currentField.relatedField) { + this.dataForm[currentField.relatedField] = null + } this.$emit('select-change', { name, id }) }, diff --git a/src/components/base-upload/index.vue b/src/components/base-upload/index.vue index f05663e..d56b22f 100644 --- a/src/components/base-upload/index.vue +++ b/src/components/base-upload/index.vue @@ -58,14 +58,14 @@ export default { this.$watch('uploaderInjectFileList', function(val) { if (val && val.length) { - console.log('this.uploaderInjectFileList', this.uploaderInjectFileList) + // console.log('this.uploaderInjectFileList', this.uploaderInjectFileList) /** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */ this.fileList = val.map(item => { const name = item.fileUrl.split('/').pop() return { ...pick(item, ['id', 'fileName', 'typeCode']), name } }) } - console.log('fillist: ', this.fileList) + // console.log('fillist: ', this.fileList) }) // if (this.parentDataForm) { @@ -111,7 +111,7 @@ export default { /** 图片验证，由配置文件开启 */ validateImage(file) { - console.log('[*] 验证图片') + // console.log('[*] 验证图片') const isRightSize = file.size / 1024 / 1024 < 2 if (!isRightSize) { @@ -146,10 +146,10 @@ export default { responseType: 'blob' }).then(({ data: res }) => { const blob = new Blob([res]) - console.log('blob', blob) + // console.log('blob', blob) if ('download' in document.createElement('a')) { const alink = document.createElement('a') - console.log('filename: ', fileName) + // console.log('filename: ', fileName) alink.download = fileName alink.style.display = 'none' alink.target = '_blank' diff --git a/src/i18n/en.js b/src/i18n/en.js index 9386e26..c90a580 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -63,6 +63,10 @@ t.routes['质量检测类型'] = 'Quality Inpection Types' t.routes['质量检测信息'] = 'Quality Inpection Details' + + + +t.dictValueList = 'View Details' t.save = 'Save' t.add = 'Add' t.delete = 'Delete' @@ -170,8 +174,8 @@ t.hints.date = 'Please select date' t.hints.checktime = 'Please select inspection time' t.hints.number = 'Please input correct number' t.hints.addr = 'Please input address' -t.hints.upload2m = 'File size cannot be larger than 2mb (2048kb)' -t.hints.upload2mPic = 'Image files only. File size cannot be larger than 2mb (2048kb)' +t.hints.upload2m = 'File size cannot be larger than 2MB (2048KB)' +t.hints.upload2mPic = 'Image files only. File size cannot be larger than 2MB (2048KB)' t.factory = {} t.factory.title = 'Factory' diff --git a/src/i18n/zh-CN.js b/src/i18n/zh-CN.js index 185f19c..402ecce 100644 --- a/src/i18n/zh-CN.js +++ b/src/i18n/zh-CN.js @@ -66,7 +66,7 @@ t.routes['质量检测信息'] = '质量检测信息' - +t.dictValueList = '查看值列表' t.save = '保存' t.add = '新增' // 1 t.delete = '删除' // 1 @@ -175,8 +175,8 @@ t.hints.date = '请选择日期' t.hints.checktime = '请选择检测时间' t.hints.number = '请输入正确的数值' t.hints.addr = '请输入地址' -t.hints.upload2m = '上传文件大小不要超过 2mb (2048kb)' -t.hints.upload2mPic = '上传图片文件，且大小不要超过 2mb (2048kb)' +t.hints.upload2m = '上传文件大小不要超过 2MB (2048KB)' +t.hints.upload2mPic = '上传图片文件，且大小不要超过 2MB (2048KB)' t.factory = {} t.factory.title = '工厂' @@ -275,7 +275,7 @@ t.ws.code = '工段编码' t.ws.binded = '已绑定的设备' t.ws.unbind = '设备名称' t.ws.eqbindplaceholder = '选择一个设备进行绑定' -t.ws.sort = '排序' +t.ws.sort = '工段排序' t.ws.setorder = '请输入工段中设备的顺序' t.ws.bind = '绑定' t.ws.eqbind = '设备绑定' diff --git a/src/utils/request.js b/src/utils/request.js index d06a328..1424162 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -9,6 +9,7 @@ import merge from 'lodash/merge' const http = axios.create({ // baseURL: window.SITE_CONFIG['apiURL'], baseURL: '/api', + // baseURL: '/yd-monitor', // baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor', timeout: 1000 * 180, withCredentials: true diff --git a/src/views/modules/monitoring/equipment.vue b/src/views/modules/monitoring/equipment.vue index 153bc46..7176650 100644 --- a/src/views/modules/monitoring/equipment.vue +++ b/src/views/modules/monitoring/equipment.vue @@ -11,7 +11,15 @@ - + - + @@ -54,6 +62,8 @@ const tableConfigs = [ { prop: 'groupName', name: i18n.t('eq.group') }, { prop: 'enName', name: i18n.t('enname') }, { prop: 'abbr', name: i18n.t('abbr') }, + { prop: 'lineName', name: i18n.t('pl.title') }, + { prop: 'sectionName', name: i18n.t('ws.title') }, { prop: 'details', name: i18n.t('detail'), @@ -85,6 +95,26 @@ const addOrUpdateConfigs = { type: 'select', options: [] }, + { + name: 'lineId', + label: i18n.t('pl.title'), + required: true, + type: 'select', + options: [], + relatedField: 'sectionId' // 关联下面的id，在更换lineId时，会清空相应的sectionId选择结果 + }, + { + name: 'sectionId', + label: i18n.t('ws.title'), + required: true, + type: 'select', + options: [] + }, + { + name: 'sort', + label: i18n.t('ws.sort'), + rules: [{ type: 'number', message: i18n.t('hints.number'), transform: val => Number(val) }] + }, { name: 'groupId', label: i18n.t('eq.group'), @@ -263,9 +293,46 @@ export default { console.log('activated') this.getDataList() this.getGroupList() + this.getPlList() this.getTypeList() }, methods: { + // 获取产线列表，用于刷新工段列表 + getPlList() { + this.$http({ + url: this.$http.adornUrl('/monitoring/productionLine/list'), + method: 'get' + }).then(({ data: res }) => { + const plConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'lineId') + plConfig.options = + res.data?.map(item => ({ + value: item.id, + label: item.name + })) || [] + }) + }, + // 获取工段列表 + getWsList(id) { + let params = { + page: 1, + limit: 999 + } + if (id) { + params.lineId = id + } + this.$http({ + url: this.$http.adornUrl('/monitoring/workshopSection/page'), + method: 'get', + params: this.$http.adornParams(params) + }).then(({ data: res }) => { + const wsConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId') + wsConfig.options = + res.data?.list?.map(item => ({ + value: item.id, + label: item.name + })) || [] + }) + }, // 获取设备类型列表 getTypeList() { this.$http({ @@ -343,6 +410,13 @@ export default { selectionChangeHandle(val) { this.dataListSelections = val }, + // 对话框里的某个选择改变了 + handleDialogSelectChange({ name, id }) { + switch (name) { + case 'lineId': + this.getWsList(id) + } + }, handleOperations({ type, data: id }) { switch (type) { case 'view-detail': diff --git a/src/views/modules/monitoring/qualityInspectionCurrent.vue b/src/views/modules/monitoring/qualityInspectionCurrent.vue index 2c59361..82458fd 100644 --- a/src/views/modules/monitoring/qualityInspectionCurrent.vue +++ b/src/views/modules/monitoring/qualityInspectionCurrent.vue @@ -70,6 +70,7 @@ import * as echarts from 'echarts' const tableConfigStatic = [ { type: 'index', width: 100, name: i18n.t('index') }, + { name: i18n.t('pl.title'), prop: 'lineName' }, { name: i18n.t('inspect.inTotal'), prop: 'sumUp' }, { name: i18n.t('inspect.outTotal'), prop: 'sumDown' }, { name: i18n.t('inspect.checkTotal'), prop: 'sumCheck' }, diff --git a/src/views/modules/monitoring/workshopSectionDialog.vue b/src/views/modules/monitoring/workshopSectionDialog.vue index 71189aa..16b7ca5 100644 --- a/src/views/modules/monitoring/workshopSectionDialog.vue +++ b/src/views/modules/monitoring/workshopSectionDialog.vue @@ -39,7 +39,7 @@

{{ $t('ws.eqbind') }} - {{ $t('add') }} +

@@ -68,8 +68,8 @@ import i18n from '@/i18n' import BaseTable from '@/components/base-table' import SmallTitle from '@/components/small-title' -import { pick } from 'lodash/object' -import TableOperateComponent from '@/components/base-table/components/operationComponent' +// import { pick } from 'lodash/object' +// import TableOperateComponent from '@/components/base-table/components/operationComponent' import AttrForm from './workshopSectionDialogAttrForm.vue' import { calcMaxHeight } from '@/utils' const tableProps = [ @@ -79,14 +79,14 @@ const tableProps = [ }, { name: i18n.t('eq.name'), prop: 'equipmentName' }, { name: i18n.t('dept.sort'), prop: 'sort' }, - { - name: i18n.t('handle'), - prop: 'operations', - fixed: 'right', - width: 180, - subcomponent: TableOperateComponent, - options: ['edit', 'delete'] - } + // { + // name: i18n.t('handle'), + // prop: 'operations', + // fixed: 'right', + // width: 180, + // subcomponent: TableOperateComponent, + // options: ['edit', 'delete'] + // } ] export default { diff --git a/src/views/modules/sys/dict-type.vue b/src/views/modules/sys/dict-type.vue index 3213955..d6bb7e9 100644 --- a/src/views/modules/sys/dict-type.vue +++ b/src/views/modules/sys/dict-type.vue @@ -24,16 +24,18 @@ - + + - + diff --git a/vue.config.js b/vue.config.js index ddeec80..5ed4110 100644 --- a/vue.config.js +++ b/vue.config.js @@ -32,7 +32,7 @@ module.exports = { target: 'http://india.mes.picaiba.com/' }, '/yd-monitor': { - target: 'http://192.168.1.20:8080/' // 开发地址 + target: 'http://192.168.1.18:8080/' // 开发地址 }, '/ureport': { target: 'http://india.mes.picaiba.com/' // ureporter