AddOrUpdateConfig.md

@@ -2,82 +2,6 @@
 
 > 通过传入合理的配置项来使用 addOrUpdate Dialog
 
-## 用途
-
-通过给对话框传递配置项，并自动根据这些配置项来初始化对话框的功能
-
-## props
-
-- configs 对象
-
-```
-<my-dialog :configs="SomeConfigs" ... />
-
-
-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
@@ -155,7 +79,7 @@ const addOrUpdateConfigs = {
 }
 ```
 
-## 配置项解释
+## 配置项
 
 <br>
 
@@ -212,7 +136,6 @@ const addOrUpdateConfigs = {
 含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性”
 类型：object
 选项：
-
 - title, 内嵌表格的标题
 - url, 内嵌表格的数据地址
 - tableConfigs，内嵌表格的配置选项
@@ -231,14 +154,13 @@ const addOrUpdateConfigs = {
       - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
 
 ### extraComponents
-
 含义: 需要在对话框里使用的自定义组件列表
 类型: Array<object>
 对象选项：
-
+ - name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
-- name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
+ - hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
-- hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
+ - label
-- label
+ - fieldType: 设置该组件的数据将以什么数据类型形式来保存
-- fieldType: 设置该组件的数据将以什么数据类型形式来保存
+ - component: 组件
-- component: 组件
+ - props 传给组件的配置
-- props 传给组件的配置
+ 

src/components/base-dialog/AttrForm/index.vue

@@ -127,11 +127,18 @@ export default {
 		}
 	},
 	methods: {
+		/** filter tableConfigs */
 		filterTableConfigs() {
-			if (this.isDetail) {
+			// return this.tableConfigs.map(item => {
-				/** 如果是查看详情，就屏蔽操作列 */
+			// 	const {prop, name, filter} = item
-				return this.tableConfigs.filter(opt => opt.prop !== 'operations')
+			// 	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
+			// })
 			return this.tableConfigs
 		},
 		/** init dataform */

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)"
 							>
-								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label + Math.random()" :label="opt.label" :value="opt.value" />
+								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label+Math.random()" :label="opt.label" :value="opt.value" />
 							</el-select>
 							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-cascader
@@ -261,21 +261,6 @@ export default {
 					})
 				} // end if (item.api)
 
-				// 如果有 relatedField，就需要在当前item的数据加载后，刷新 relatedField 的列表
-				if (item.relatedField) {
-					this.$watch(
-						function() {
-							return this.dataForm[item.name]
-						},
-						function(val, old) {
-							if (val && val !== old) {
-								this.$emit('select-change', { name: item.name, id: val })
-							}
-						},
-						{ deep: true, immediate: true }
-					)
-				}
-
 				if (item.required) {
 					const requiredRule = {
 						required: true,
@@ -323,8 +308,7 @@ export default {
 			/** 检查是否需要额外的组件 */
 			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
-					// 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))
@@ -410,8 +394,7 @@ 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)
@@ -421,8 +404,7 @@ 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]
@@ -443,17 +425,12 @@ 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 })
 		},
 

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'

src/i18n/en.js

@@ -63,10 +63,6 @@ t.routes['质量检测类型'] = 'Quality Inpection Types'
 t.routes['质量检测信息'] = 'Quality Inpection Details'
 
 
-
-
-
-t.dictValueList = 'View Details'
 t.save = 'Save'
 t.add = 'Add'
 t.delete = 'Delete'
@@ -174,8 +170,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.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.upload2mPic = 'Image files only. File size cannot be larger than 2mb (2048kb)'
 
 t.factory = {}
 t.factory.title = 'Factory'

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.upload2m = '上传文件大小不要超过 2mb (2048kb)'
-t.hints.upload2mPic = '上传图片文件，且大小不要超过 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 = '设备绑定'

src/utils/request.js

@@ -9,7 +9,6 @@ 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

src/views/modules/monitoring/equipment.vue

@@ -11,15 +11,7 @@
 			</el-form-item>
 		</el-form>
 
-		<base-table
+		<base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
-			: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"
@@ -30,7 +22,7 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @select-change="handleDialogSelectChange" />
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
 	</div>
 </template>
 
@@ -62,8 +54,6 @@ 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'),
@@ -95,26 +85,6 @@ 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'),
@@ -293,46 +263,9 @@ 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({
@@ -410,13 +343,6 @@ 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':

src/views/modules/monitoring/qualityInspectionCurrent.vue

@@ -70,7 +70,6 @@ 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' },

src/views/modules/monitoring/workshopSectionDialog.vue

@@ -39,7 +39,7 @@
 			<section class="attr-form-section" v-if="dataForm.id">
 				<h3>
 					{{ $t('ws.eqbind') }}
-					<!-- <el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button> -->
+					<el-button type="text" v-if="!showAttrForm" @click="addEq">{{ $t('add') }}</el-button>
 				</h3>
 				<div class="table" v-if="!showAttrForm">
 					<base-table :page="page" :size="limit" :data="eqList" :table-head-configs="tableProps" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
@@ -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 { pick } from 'lodash/object'
-// import TableOperateComponent from '@/components/base-table/components/operationComponent'
+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'),
+		name: i18n.t('handle'),
-	// 	prop: 'operations',
+		prop: 'operations',
-	// 	fixed: 'right',
+		fixed: 'right',
-	// 	width: 180,
+		width: 180,
-	// 	subcomponent: TableOperateComponent,
+		subcomponent: TableOperateComponent,
-	// 	options: ['edit', 'delete']
+		options: ['edit', 'delete']
-	// }
+	}
 ]
 
 export default {

src/views/modules/sys/dict-type.vue

@@ -24,18 +24,16 @@
 			<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
 				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
 				<el-table-column prop="dictName" :label="$t('dict.dictName')" header-align="center" align="center"></el-table-column>
-				<el-table-column prop="dictType" :label="$t('dict.dictName')" header-align="center" align="center"></el-table-column>
+				<el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center">
-				<!-- <el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center">
 					<template slot-scope="scope">
 						<el-button type="text" @click="childHandle(scope.row)">{{ scope.row.dictType }}</el-button>
 					</template>
-				</el-table-column> -->
+				</el-table-column>
 				<el-table-column prop="sort" :label="$t('dict.sort')" sortable="custom" header-align="center" align="center"></el-table-column>
 				<el-table-column prop="remark" :label="$t('dict.remark')" header-align="center" align="center"></el-table-column>
 				<el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
-				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240">
+				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
 					<template slot-scope="scope">
-						<el-button type="text" size="small" @click="childHandle(scope.row)">{{ $t('dictValueList') }}</el-button>
 						<el-button v-if="$hasPermission('sys:dict:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
 						<el-button v-if="$hasPermission('sys:dict:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
 					</template>

vue.config.js

@@ -32,7 +32,7 @@ module.exports = {
         target: 'http://india.mes.picaiba.com/'
       },
       '/yd-monitor': {
-        target: 'http://192.168.1.18:8080/' // 开发地址
+        target: 'http://192.168.1.20:8080/' // 开发地址
       },
       '/ureport': {
         target: 'http://india.mes.picaiba.com/' // ureporter