src/components/base-table/components/detailComponent.js

@@ -0,0 +1,34 @@
+/**
+ * @Author: lb
+ * @CreateDate: 2022.8.8
+ * @Modifier: 
+ * @ModifiedDate: 
+ * 表格里的文本组件
+ * 一般用途：展示查看详情入口
+ */
+export default {
+  name: 'TableTextComponent',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // for i18n inject:
+      defaultText: '查看详情'
+    }
+  },
+  methods: {
+    emitClick() {
+      this.$emit('emitData', {
+        action: this.injectData.actionName || 'view-detail-action',
+        data: this.injectData.emitFullData ? this.injectData : { id: this.injectData.id }
+      })
+    }
+  },
+  render: function (h) {
+    return h('span', null, [h('el-button', { props: { type: 'text' }, style: { paddingLeft: 0 } }, this.injectData.buttonContent || this.defaultText)])
+  }
+}

src/components/base-table/components/operationComponent.js

@@ -0,0 +1,45 @@
+/**
+ * @Author: lb
+ * @CreateDate: 2022.8.8
+ * @Modifier: 
+ * @ModifiedDate: 
+ * 表格里的操作组件
+ * 一般用途：展示添加删除按钮
+ */
+export default {
+  name: 'TableOperations',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      btnTypes: {
+        add: 'primary',
+        delete: 'danger',
+        detail: 'info'
+        // add more...
+      },
+      colors: {
+        // add more...
+      },
+      text: {
+        // for i18n inject:
+        add: '添加'
+        // add more...
+      }
+    }
+  },
+  methods: {
+    // 发射事件
+  },
+  render: function (h) {
+    let btns = []
+    for (const optionStr of this.injectData.head?.options) {
+      btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
+    }
+    return h('span', null, btns)
+  }
+}

src/views/modules/monitoring/equipment.vue

@@ -71,46 +71,10 @@
 
 <script>
 import BaseTable from '@/components/base-table'
+import TableOperateComponent from '@/components/base-table/components/operationComponent'
+import TableTextComponent from '@/components/base-table/components/detailComponent'
 import AddOrUpdate from './equipment-add-or-update'
 
-const TableOperateComponent = {
-	name: 'TableOperations',
-	props: {
-		injectData: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	data() {
-		return {
-			btnTypes: {
-				add: 'primary',
-				delete: 'danger',
-				detail: 'info'
-				// add more...
-			},
-			colors: {
-				// add more...
-			},
-			text: {
-				// for i18n inject:
-				'add': '添加'
-				// add more...
-			}
-		}
-	},
-	methods: {
-		// 发射事件
-	},
-	render: function(h) {
-		let btns = []
-		for (const optionStr of this.injectData.head?.options) {
-			btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
-		}
-		return h('span', null, btns)
-	}
-}
-
 const tableConfigs = [
 	{
 		type: 'index',
@@ -121,32 +85,14 @@ const tableConfigs = [
 			}
 		}
 	},
-	{ prop: 'id', name: 'id' },
-	{ prop: 'code', name: '编码' },
+	{ prop: 'createTime', name: '添加时间' },
 	{ prop: 'name', name: '设备名称' },
+	{ prop: 'code', name: '设备编码' },
+	{ prop: 'equipmentTypeId', name: '设备类型' },
+	{ prop: 'groupId', name: '设备分组' },
 	{ prop: 'enName', name: '英文名称' },
 	{ prop: 'abbr', name: '缩写' },
-	{ prop: 'enterTime', name: '进厂日期' },
-	{ prop: 'productionTime', name: '生产日期' },
-	{ prop: 'equipmentTypeId', name: '设备类型，关联设备类型表' },
-	{ prop: 'groupId', name: '分组id （关联 T_EQUIPMENT_GROUP）' },
-	{ prop: 'dataType', name: '0:无类别，1:上片数据设备，2:下片数据设备' },
-	{ prop: 'tvalue', name: '每小时生产数量' },
-	{ prop: 'processingTime', name: '单件加工时间 s/件' },
-	{ prop: 'manufacturer', name: '制造商' },
-	{ prop: 'spec', name: '规格' },
-	{ prop: 'description', 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: 'externalCode', name: '外部系统代码' },
+	{ prop: 'details', name: '详情', subcomponent: TableTextComponent },
 	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['add', 'detail', 'delete'] }
 ]