src/views/modules/monitoring/equipmentPlc.vue

@@ -6,42 +6,11 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button v-if="$hasPermission('monitoring:equipmenplc:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
+				<el-button v-if="$hasPermission('monitoring:equipmentplc: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>
-			<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column>
-			<el-table-column prop="plcType" header-align="center" align="center" label="plc类型"> </el-table-column>
-			<el-table-column prop="code" header-align="center" align="center" label="编码"> </el-table-column>
-			<el-table-column prop="name" header-align="center" align="center" label="plc名称（ip+名称对应实时数据库表名）"> </el-table-column>
-			<el-table-column prop="enName" header-align="center" align="center" label="英文名称"> </el-table-column>
-			<el-table-column prop="description" header-align="center" align="center" label="描述"> </el-table-column>
-			<el-table-column prop="barcode" header-align="center" align="center" label="plc条码"> </el-table-column>
-			<el-table-column prop="controlType" header-align="center" align="center" label="链接方式，0 tcp，1 udp等"> </el-table-column>
-			<el-table-column prop="monitor" header-align="center" align="center" label="是否监控 0 代表不监控, 1 代表监控"> </el-table-column>
-			<el-table-column prop="collection" header-align="center" align="center" label="是否采集 0 代表不采集, 1 代表采集"> </el-table-column>
-			<el-table-column prop="ip" header-align="center" align="center" label="IP"> </el-table-column>
-			<el-table-column prop="port" header-align="center" align="center" label="端口号"> </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" />
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -53,46 +22,92 @@
 		>
 		</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 './equipmentPlc-add-or-update'
-
+// import AddOrUpdate from './equipmentPlc-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'
 
 const tableConfigs = [
-  { "prop": "id", "name": "id" },
-  { "prop": "plcType", "name": "plc类型" },
-  { "prop": "code", "name": "编码" },
-  { "prop": "name", "name": "plc名称（ip+名称对应实时数据库表名）" },
-  { "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": "是否采集 0 代表不采集, 1 代表采集" },
-  { "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'] }
+	{ 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'] }
 ]
 
+const addOrUpdateConfigs = {
+	type: 'dialog', // dialog | drawer | page
+	infoUrl: '/monitoring/equipmentPlc',
+	fields: [
+		{ name: 'name', required: true },
+		{ name: 'code', required: true },
+		{ name: 'enName', label: '英文名称' },
+		{
+			name: 'collection',
+			label: '是否采集',
+			required: true,
+			type: 'select',
+			options: [
+				{ label: '采集', value: 1 },
+				{ label: '不采集', value: 0 }
+			]
+		},
+		{ name: 'ip', label: 'IP', required: true, placeholder: '0.0.0.0' },
+		{ name: 'port', label: '端口', placeholder: '443' },
+		'description',
+		'remark',
+		{ name: 'barcode', label: 'plc条码', span: 24 }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlc', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlc', permission: '', showOnEdit: true }
+	]
+	// subtable: {
+	// 	// for i18n
+	// 	title: '动态属性',
+	// 	url: '/monitoring/productArrt',
+	// 	relatedField: 'productId',
+	// 	tableConfigs: [
+	// 		{ type: 'index', name: '序号' },
+	// 		{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+	// 		{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+	// 		{ prop: 'code', name: '属性值', formField: true },
+	// 		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	// 	]
+	// }
+}
 
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			tableConfigs,
+			addOrUpdateConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -106,12 +121,22 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
 		this.getDataList()
 	},
 	methods: {
+		//handleOperations
+		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/qualityInspectionRecord.vue

@@ -173,11 +173,13 @@ export default {
 					  })
 					: {}
 			}).then(({ data: res }) => {
+				if (this.addOrUpdateVisible) {
 					if (res.data.total === 0) {
 						this.$message.error('该产线没有工段')
 					} else {
 						this.$message.success(`该产线有 ${res.data.total} 条工段`)
 					}
+				}
 				const wsOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId')
 				if (wsOpt) {
 					wsOpt.options = res.data.list.map(item => ({ value: item.id, label: item.name })) || []