update 设备分组的抽屉

src/views/base/equipmentGroup/index.vue

@@ -40,6 +40,57 @@
 			@confirm="submitForm">
 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
 		</base-dialog>
+
+		<!-- 抽屉 详情 -->
+		<BasicDrawer
+			v-if="editVisible"
+			ref="drawer"
+			:mode="editMode"
+			:data-id="form.id"
+			:sections="[
+				{
+					name: '基本信息',
+					key: 'base',
+					rows: drawerBaseInfoRows,
+					url: '/base/equipment-group/get',
+					urlUpdate: '/base/equipment-group/update',
+					urlCreate: '/base/equipment-group/create',
+					queryParams: { id: form.id },
+				},
+				{
+					name: '属性列表',
+					key: 'attrs',
+					props: drawerListProps,
+					url: '/base/equipment-group-alarm/page',
+					urlCreate: '/base/equipment-group-alarm/create',
+					urlUpdate: '/base/equipment-group-alarm/update',
+					urlDelete: '/base/equipment-group-alarm/delete',
+					urlDetail: '/base/equipment-group-alarm/get',
+					queryParams: {
+						id: form.id,
+						pageNo: 1,
+						pageSize: 10,
+					},
+					tableBtn: [
+						this.$auth.hasPermi('base:equipment-group:update')
+							? {
+									type: 'edit',
+									btnName: '修改',
+							  }
+							: undefined,
+						this.$auth.hasPermi('base:equipment-group:delete')
+							? {
+									type: 'delete',
+									btnName: '删除',
+							  }
+							: undefined,
+					].filter((v) => v),
+					allowAdd: true,
+				},
+			]"
+			@refreshDataList="getList"
+			@cancel="editVisible = false"
+			@destroy="editVisible = false" />
 	</div>
 </template>
 
@@ -53,17 +104,27 @@ import {
 	exportEquipmentGroupExcel,
 } from '@/api/base/equipmentGroup';
 import moment from 'moment';
+import { publicFormatter } from '@/utils/dict';
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
-import { getAccessToken } from '@/utils/auth';
+// import { getAccessToken } from '@/utils/auth';
+import BasicDrawer from './components/BasicDrawer.vue';
 
 export default {
 	name: 'EquipmentGroup',
 	mixins: [basicPageMixin],
-	components: {},
+	components: { BasicDrawer },
 	data() {
 		return {
+			editVisible: false,
+			editMode: '',
 			searchBarKeys: ['name', 'code'],
 			tableBtn: [
+				this.$auth.hasPermi('base:equipment-group:update')
+					? {
+							type: 'detail',
+							btnName: '查看报警',
+					  }
+					: undefined,
 				this.$auth.hasPermi('base:equipment-group:update')
 					? {
 							type: 'edit',
@@ -88,33 +149,78 @@ export default {
 				{ prop: 'name', label: '设备分组名称' },
 				{ prop: 'code', label: '设备分组编码' },
 				{ prop: 'remark', label: '备注' },
-				{
-					_action: 'equipment-group-show-alert',
-					label: '报警',
-					subcomponent: {
-						props: ['injectData'],
-						render: function (h) {
-							const _this = this;
-							return h(
-								'el-button',
-								{
-									props: { type: 'text' },
-									on: {
-										click: function () {
-											console.log('inejctdata', _this.injectData);
-											_this.$emit('emitData', {
-												action: _this.injectData._action,
-												// value: _this.injectData.id,
-												value: _this.injectData,
-											});
-										},
-									},
-								},
-								'查看报警'
-							);
-						},
+				// {
+				// 	_action: 'equipment-group-show-alert',
+				// 	label: '报警',
+				// 	subcomponent: {
+				// 		props: ['injectData'],
+				// 		render: function (h) {
+				// 			const _this = this;
+				// 			return h(
+				// 				'el-button',
+				// 				{
+				// 					props: { type: 'text' },
+				// 					on: {
+				// 						click: function () {
+				// 							console.log('inejctdata', _this.injectData);
+				// 							_this.$emit('emitData', {
+				// 								action: _this.injectData._action,
+				// 								// value: _this.injectData.id,
+				// 								value: _this.injectData,
+				// 							});
+				// 						},
+				// 					},
+				// 				},
+				// 				'查看报警'
+				// 			);
+				// 		},
+				// 	},
+				// },
+			],
+			drawerBaseInfoRows: [
+				[
+					{
+						input: true,
+						label: '设备分组名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: this.editMode == 'detail', // some condition, like detail mode...
+						// }
 					},
+					{
+						input: true,
+						label: '设备分组编码',
+						prop: 'code',
+						// url: '/base/equipment/getCode',
+					}
+				]
+			],
+			drawerListProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 				},
+				{ width: 240, prop: 'code', label: '报警编码' },
+				{
+					width: 100,
+					prop: 'type',
+					label: '报警类型',
+					filter: (val) =>
+						val != null ? ['-', '字符型', '布尔型', '-'][val] : '-',
+				},
+				{
+					width: 90,
+					prop: 'grade',
+					label: '报警级别',
+					filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
+				},
+				{ width: 180, prop: 'alarmCode', label: '设备报警编码' },
+				{ width: 128, prop: 'plcParamName', label: '参数列名' },
+				{ width: 128, prop: 'alarmContent', label: '报警内容' },
 			],
 			searchBarFormConfig: [
 				{
@@ -299,6 +405,17 @@ export default {
 				});
 			});
 		},
+		handleDetail(row) {
+			const { id, code, name, createTime } = row;
+
+			// 打开抽屉
+			this.editMode = 'detail';
+			this.form.id = id;
+			this.editVisible = true;
+			this.$nextTick(() => {
+				this.$refs['drawer'].init();
+			});
+		},
 		/** 删除按钮操作 */
 		handleDelete(row) {
 			const id = row.id;