add basetable

src/components/base-table/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="base-table">
+		<el-table
+			:data="data"
+			style="width: 100%"
+			fit
+			border
+			:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
+			:max-height="maxHeight"
+		>
+			<!-- 表格头定义 -->
+			<el-table-column
+				v-for="(head, idx) in tableHeadConfigs"
+				:key="idx"
+				:type="head.type"
+				:index="head.index"
+				:label="head.label?head.label:head.name"
+				:prop="head.prop"
+				:width="head.width"
+				:min-width="head.minWidth"
+				:fixed="head.fixed"
+				:show-overflow-tooltip="true"
+				filter-placement="top"
+				:align="head.align"
+			>
+				<template slot-scope="scope">
+					<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
+					<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'BaseTable',
+	props: {
+    tableHeadConfigs: {
+      type: Array,
+      default: () => []
+    },
+		data: {
+			type: Array,
+			default: () => []
+		},
+    maxHeight: {
+      type: Number,
+      default: 500
+    }
+	},
+	filters: {
+		commonFilter: (source, filterType = a => a) => {
+			return filterType(source)
+		}
+	},
+	data () {
+    return {}
+  },
+	methods: {
+		handleSubEmitData(payload) {
+			this.$emit('operate-event', payload)
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipment.vue

@@ -51,6 +51,9 @@
 				</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"
@@ -66,10 +69,42 @@
 </template>
 
 <script>
+import BaseTable from '@/components/base-table'
 import AddOrUpdate from './equipment-add-or-update'
+
+const tableConfigs = [
+	{ prop: 'id', name: 'id' },
+	{ prop: 'code', name: '编码' },
+	{ prop: 'name', 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: '外部系统代码' }
+]
+
 export default {
 	data() {
 		return {
+			tableConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -83,7 +118,8 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
 		console.log('activated')