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

@@ -1,11 +1,11 @@
 <template>
 	<div class="attr-form">
-		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail" @click="showAddAttr = true">添加</el-button></h3>
+		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail && !showAddAttr" @click="showAddAttr = true">添加</el-button></h3>
 		<div v-if="!showAddAttr">
 			<component
 				key="sub-table"
 				:is="require('../../base-table/index.vue').default"
-				:table-head-configs="tableConfigs"
+				:table-head-configs="filterTableConfigs()"
 				:data="dataList"
 				:max-height="500"
 				@operate-event="handleOperations"
@@ -23,16 +23,23 @@
 		</div>
 		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
 			<el-row>
-				<el-col :span="10" :offset="7">
+				<el-col>
-					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
+					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true" label-position="top">
-						<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
+						<el-row :gutter="20" style="padding: 0 24px;">
-							<el-input v-model="AttrForm[field.prop]" clearable />
+							<el-col :span="attrFormFields.length > 6 ? 6 : 12" v-for="field in attrFormFields" :key="field.prop + 'col'">
+								<el-form-item :key="field.prop" :prop="field.prop" :label="field.name" style="width: 100%">
+									<el-input v-if="field.formType === 'input' || !field.formType" v-model="AttrForm[field.prop]" placeholder="请填写" clearable />
+									<el-select v-if="field.formType === 'select'" v-model="AttrForm[field.prop]" clearable>
+										<el-option v-for="opt in field.formOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+									</el-select>
 									<!-- add more...  -->
 								</el-form-item>
+							</el-col>
+						</el-row>
 					</el-form>
 				</el-col>
 			</el-row>
-			<el-row style="text-align: center;">
+			<el-row style="text-align: right;">
 				<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
 				<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
 			</el-row>
@@ -114,6 +121,20 @@ 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
+			// })
+			return this.tableConfigs
+		},
 		/** init dataform */
 		initAttrForm() {
 			Object.entries(this.AttrForm).forEach(([key, value]) => {
@@ -255,3 +276,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.attr-form >>> .el-form .el-form-item__label {
+	padding: 0;
+}
+</style>

src/views/modules/monitoring/equipmentPlc.vue

@@ -35,28 +35,15 @@ import TableTextComponent from '@/components/base-table/components/detailCompone
 
 const tableConfigs = [
 	{ type: 'index', name: '序号' },
-	// { prop: 'id', name: 'id' },
-	// { "prop": "plcType", "name": "plc类型" },
 	{ prop: 'code', name: '编码' },
 	{ prop: 'name', name: '名称' },
 	{ prop: 'enName', name: '英文名称' },
 	{ prop: 'description', name: '描述' },
 	{ prop: 'barcode', name: 'plc条码' },
-	// { "prop": "controlType", "name": "链接方式，0 tcp，1 udp等" },
-	// { "prop": "monitor", "name": "是否监控 0 代表不监控, 1 代表监控" },
 	{ prop: 'collection', name: '是否采集', filter: val => ({ 0: '不采集', 1: '采集' }[val]) },
 	{ prop: 'ip', name: 'IP' },
 	{ prop: 'port', name: '端口号' },
-	// { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
 	{ prop: 'remark', name: '备注' },
-	// { prop: 'valid', name: '删除标志，是否有效:1 可用 0不可用' },
-	// { prop: 'creatorId', name: '创建人' },
-	// { prop: 'creatorName', name: '创建人姓名' },
-	// { prop: 'createTime', name: '添加时间' },
-	// { prop: 'updaterId', name: '更新人' },
-	// { prop: 'updaterName', name: '更新人姓名' },
-	// { prop: 'updateTime', name: '更新时间' },
-	// { prop: 'version', name: '版本号' },
 	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 

src/views/modules/monitoring/equipmentPlcConnect.vue

@@ -6,32 +6,12 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button v-if="$hasPermission('monitoring:equipmenplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+				<el-button v-if="$hasPermission('monitoring:equipmentplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
 			</el-form-item>
 		</el-form>
-		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+
-			<el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column>
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
-			<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column>
+
-			<el-table-column prop="plcId" header-align="center" align="center" label="plc表iD"> </el-table-column>
-			<el-table-column prop="equipmentId" header-align="center" align="center" label="设备表id"> </el-table-column>
-			<el-table-column prop="enabled" header-align="center" align="center" label="启用状态:0 、停用，1、启用"> </el-table-column>
-			<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-table-column>
-			<el-table-column prop="valid" header-align="center" align="center" label="删除标志，是否有效:1 可用 0不可用"> </el-table-column>
-			<el-table-column prop="creatorId" header-align="center" align="center" label="创建人"> </el-table-column>
-			<el-table-column prop="creatorName" header-align="center" align="center" label="创建人姓名"> </el-table-column>
-			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间"> </el-table-column>
-			<el-table-column prop="updaterId" header-align="center" align="center" label="更新人"> </el-table-column>
-			<el-table-column prop="updaterName" header-align="center" align="center" label="更新人姓名"> </el-table-column>
-			<el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"> </el-table-column>
-			<el-table-column prop="version" header-align="center" align="center" label="版本号"> </el-table-column>
-			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-					<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table> -->
-			<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -43,36 +23,104 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
 	</div>
 </template>
 
 <script>
-import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+// import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
-import TableTextComponent from '@/components/base-table/components/detailComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+import { dictFilter } from '@/utils/filters'
+// import axios from '@/utils/request.js'
 
 const tableConfigs = [
-  { "prop": "id", "name": "id" },
+	{ type: 'index', name: '序号' },
-  { "prop": "plcId", "name": "plc表iD" },
+	{ prop: 'lineName', name: '产线' },
-  { "prop": "equipmentId", "name": "设备表id" },
+	{ prop: 'sectionName', name: '工段' },
-  { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
+	{ prop: 'equName', name: '设备' },
-  { "prop": "remark", "name": "备注" },
+	{ prop: 'equCode', name: '设备编码' },
-  { "prop": "valid", "name": "删除标志，是否有效:1 可用 0不可用" },
+	{ prop: 'plcCode', name: 'PLC编码' },
-  { "prop": "creatorId", "name": "创建人" },
+	{ prop: 'plcName', name: 'PLC名称' },
-  { "prop": "creatorName", "name": "创建人姓名" },
+	{ prop: 'plcIp', name: 'PLC IP' },
-  { "prop": "createTime", "name": "添加时间" },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
-  { "prop": "updaterId", "name": "更新人" },
-  { "prop": "updaterName", "name": "更新人姓名" },
-  { "prop": "updateTime", "name": "更新时间" },
-  { "prop": "version", "name": "版本号" },		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
+const UnitDictTypeId = '1557173812109242370'
+const getUnitList = function() {
+	const dl = JSON.parse(localStorage.getItem('dictList'))[UnitDictTypeId] || []
+	return dl.map(item => ({ label: item.dictLabel, value: item.dictValue }))
+}
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentPlcConnect',
+	fields: [
+		{ name: 'equipmentId', label: '设备', required: true, type: 'select', options: [] },
+		{ name: 'plcId', label: 'PLC名称', required: true, type: 'select', options: [] }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: true }
+	],
+	subtable: {
+		title: 'PLC采集参数',
+		url: '/monitoring/equipmentPlcParam',
+		relatedField: 'plcConId',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			// { prop: 'plcConId', name: 'plc连接表ID' },
+			{ prop: 'paramCode', name: '参数编码', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramName', name: '参数名称', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramAddress', name: '参数地址', formField: true },
+			{ prop: 'unitDictValue', name: '单位', filter: dictFilter(UnitDictTypeId), formField: true, formType: 'select', formOptions: getUnitList() },
+			{ prop: 'minValue', name: '最小值', formField: true },
+			{ prop: 'maxValue', name: '最大值', formField: true },
+			{ prop: 'defaultValue', name: '参数设定标准值', formField: true },
+			{ prop: 'description', name: '描述', formField: true },
+			{
+				prop: 'enabled',
+				name: '启用状态',
+				filter: val => ['停用', '启用'][+val],
+				// filter: val => ({0:'停用', 1:'启用'}[+val]),
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '停用' },
+					{ value: 1, label: '启用' }
+				]
+			},
+			{ prop: 'remark', name: '备注', formField: true },
+			// { prop: 'createTime', name: '添加时间' },
+			{
+				prop: 'collection',
+				name: '是否采集',
+				filter: val => ['不采集', '采集'][+val],
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '不采集' },
+					{ value: 1, label: '采集' }
+				]
+			},
+			// { prop: 'collectionCycle', name: '采集周期（s） 暂不使用' },
+			// { prop: 'reportingCycle', name: '上报周期（s） 暂不使用' },
+			// { prop: 'reportingMethod', name: '上报方式 暂不使用' },
+			// { prop: 'reportingCode', name: '上报编码 暂不使用' },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	}
+}
 
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			addOrUpdateConfigs,
+			tableConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -86,12 +134,53 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
+		this.getEqList()
+		this.getPlcList()
 		this.getDataList()
 	},
 	methods: {
+		// 设备列表
+		getEqList() {
+			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 }) => {
+				const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId')
+				eqConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		// plc 列表
+		getPlcList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentPlc/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId')
+				plcConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentPlcParam.vue

@@ -7,7 +7,6 @@
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenplcparam:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
 			</el-form-item>
 		</el-form>
 		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
@@ -69,42 +68,31 @@ import TableOperateComponent from '@/components/base-table/components/operationC
 import TableTextComponent from '@/components/base-table/components/detailComponent'
 
 const tableConfigs = [
-  { "prop": "id", "name": "ID" },
+	{ type: 'index', name: '序号' },
-  { "prop": "plcConId", "name": "plc连接表ID" },
+	{ prop: 'plcConId', name: 'plc连接表ID' },
-  { "prop": "type", "name": "类型：status、data、constant" },
+	{ prop: 'paramCode', name: '参数编码' },
-  { "prop": "paramCode", "name": "参数编码" },
+	{ prop: 'paramName', name: '参数名称' },
-  { "prop": "paramName", "name": "参数名称" },
+	{ prop: 'paramAddress', name: '参数地址' },
-  { "prop": "paramAddress", "name": "参数地址，对应实时数据库表的列名" },
+	{ prop: 'unitDictValue', name: '单位' },
-  {
+	{ prop: 'minValue', name: '最小值' },
-    "prop": "valueType",
+	{ prop: 'maxValue', name: '最大值' },
-    "name": "参数值类型：int、long、boolean、string、list 暂不使用"
+	{ prop: 'defaultValue', name: '参数设定标准值' },
-  },
+	{ prop: 'description', name: '描述' },
-  { "prop": "unitDictValue", "name": "单位 关联数据字典表label_value" },
+	{ prop: 'enabled', name: '启用状态:0 、停用，1、启用' },
-  { "prop": "minValue", "name": "最小值" },
+	{ prop: 'remark', name: '备注' },
-  { "prop": "maxValue", "name": "最大值" },
+	// { prop: 'createTime', name: '添加时间' },
-  { "prop": "defaultValue", "name": "参数设定标准值" },
+	{ prop: 'collection', name: '0 代表不采集, 1 代表采集' },
-  { "prop": "description", "name": "描述" },
+	// { prop: 'collectionCycle', name: '采集周期（s） 暂不使用' },
-  { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
+	// { prop: 'reportingCycle', name: '上报周期（s） 暂不使用' },
-  { "prop": "remark", "name": "备注" },
+	// { prop: 'reportingMethod', name: '上报方式 暂不使用' },
-  { "prop": "valid", "name": "删除标志，是否有效:1 可用 0不可用" },
+	// { prop: 'reportingCode', name: '上报编码 暂不使用' },
-  { "prop": "creatorId", "name": "创建人" },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
-  { "prop": "creatorName", "name": "创建人姓名" },
-  { "prop": "createTime", "name": "添加时间" },
-  { "prop": "updaterId", "name": "更新人" },
-  { "prop": "updaterName", "name": "更新人姓名" },
-  { "prop": "updateTime", "name": "更新时间" },
-  { "prop": "version", "name": "版本号" },
-  { "prop": "collection", "name": "0 代表不采集, 1 代表采集" },
-  { "prop": "collectionCycle", "name": "采集周期（s） 暂不使用" },
-  { "prop": "reportingCycle", "name": "上报周期（s） 暂不使用" },
-  { "prop": "reportingMethod", "name": "上报方式 暂不使用" },
-  { "prop": "reportingCode", "name": "上报编码 暂不使用" },		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
-
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			tableConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -118,7 +106,8 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
 		this.getDataList()