add CKEditor & update dialog

2022-08-16 14:07:33 +08:00
parent 51022a6e6d
commit 535004719c
5 changed files with 211 additions and 28 deletions
--- a/src/views/modules/monitoring/equipment.vue
+++ b/src/views/modules/monitoring/equipment.vue
@@ -6,12 +6,12 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
+				<el-button @click="test()">test</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
 			</el-form-item>
 		</el-form>

-		<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"
@@ -22,41 +22,123 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></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 './equipment-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+// import AddOrUpdate from './equipment-add-or-update'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import TableTextComponent from '@/components/base-table/components/detailComponent'
+import moment from 'moment'
+import CKEditor from 'ckeditor4-vue'

 const tableConfigs = [
 	{
 		type: 'index',
-		name: '序号',
-		more: {
-			index: function(index) {
-				return (index + 1) * 2
-			}
-		}
+		name: '序号'
+		// more: {
+		// 	index: function(index) {
+		// 		return (index + 1) * 2
+		// 	}
+		// }
 	},
-	{ prop: 'createTime', name: '添加时间' },
+	{ prop: 'createTime', name: '添加时间', filter: val => moment(val).format('YYYY-MM-DD HH:mm:ss') },
 	{ prop: 'name', name: '设备名称' },
 	{ prop: 'code', name: '设备编码' },
-	{ prop: 'equipmentTypeId', name: '设备类型' },
-	{ prop: 'groupId', name: '设备分组' },
+	{ prop: 'equipmentTypeName', name: '设备类型' },
+	{ prop: 'groupName', name: '设备分组' },
 	{ prop: 'enName', name: '英文名称' },
 	{ prop: 'abbr', name: '缩写' },
-	{ prop: 'details', name: '详情', subcomponent: TableTextComponent },
+	{ prop: 'details', name: '详情', subcomponent: TableTextComponent, actionName: 'view-detail' },
 	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]

+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipment',
+	fields: [
+		{ name: 'name', label: '设备名称' },
+		{ name: 'code', label: '设备编码' },
+		{ name: 'enName', label: '英文名称' },
+		{ name: 'abbr', label: '缩写' },
+		{ name: 'equipmentTypeId', label: '设备类型', type: 'select', options: [] },
+		{ name: 'groupId', label: '设备分组', required: true, type: 'select', options: [{ label: 1, value: 1 }] },
+		{ name: 'productionTime', label: '生产日期' },
+		{ name: 'enterTime', label: '进厂日期' },
+		{ name: 'tvalue', label: '设备TT值', required: true },
+		{ name: 'processingTime', label: '单件产品加工时间' },
+		{ name: 'manufacturer', label: '制造商' },
+		{ name: 'spec', label: '设备规格' },
+		{ name: 'remark', label: '备注 ', span: 24 }
+	],
+	// TODO: 富文本
+	// TODO: 设备资料上传
+	// TODO: 设备图片上传
+	extraComponents: [
+		{
+			name: 'description',
+			hasModel: true,
+			label: '功能描述',
+			fieldType: 'string',
+			component: CKEditor.component,
+			props: {
+				value: 'tests',
+				config: {
+					// ckeditor 的配置: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
+					// toolbar: [['Bold']]
+				}
+			}
+		},
+		{
+			name: 'files',
+			label: '上传资料',
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentTypeFile' },
+				buttonContent: '点击上传',
+				tip: '上传文件大小不要超过 2mb (2048kb)'
+			},
+			validators: {
+				size: () => {}, // 上传大小设置
+				image: () => {} // 上传图片认证
+			}
+		},
+		{
+			name: 'files',
+			label: '设备图片',
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentTypeImage' },
+				buttonContent: '点击上传',
+				tip: '上传文件大小不要超过 2mb (2048kb)'
+			},
+			validators: {
+				size: () => {}, // 上传大小设置
+				image: () => {} // 上传图片认证
+			}
+		}
+	],
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentGroup', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentGroup', permission: '', showOnEdit: true }
+	]
+}
+
 export default {
 	data() {
 		return {
 			tableConfigs,
+			addOrUpdateConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -115,11 +197,41 @@ export default {
 		selectionChangeHandle(val) {
 			this.dataListSelections = val
 		},
-		// 新增 / 修改
-		addOrUpdateHandle(id) {
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					// const { name, code } = this.dataList.find(item => item.id === id)
+					this.$router.push({
+						name: 'monitoring-equipmentAdd',
+						params: {
+							isdetail: true,
+							equipmentId: id
+						}
+					})
+					break
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		test() {
 			this.addOrUpdateVisible = true
 			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init(id)
+				this.$refs.addOrUpdate.init()
+			})
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			// this.addOrUpdateVisible = true
+			// this.$nextTick(() => {
+			// 	this.$refs.addOrUpdate.init(id)
+			// })
+			this.$router.push({
+				name: 'monitoring-equipmentAdd',
+				params: {
+					equipmentId: id
+				}
 			})
 		},
 		// 删除
--- a/src/views/modules/monitoring/equipmentAdd.vue
+++ b/src/views/modules/monitoring/equipmentAdd.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="equipment-add">
+		<h2>{{ $route.params.isdetail ? '查看详情' : $route.params.equipmentId ? '编辑' : '新增' }}</h2>
+		<p>id: {{ $route.params.equipmentId }}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'EquipmentAdd',
+	props: {},
+	data() {
+		return {}
+	},
+	watch: {
+		'$route.params': function(val, oldVal) {}
+	},
+	methods: {}
+}
+</script>
+
+<style scoped>
+.equipment-add {
+	background: #fff;
+	padding: 12px;
+	min-height: 50vh;
+}
+
+h2 {
+	margin: 8px 0;
+}
+</style>