add CKEditor & update dialog

package-lock.json

@@ -5283,6 +5283,19 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "ckeditor4-integrations-common": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ckeditor4-integrations-common/-/ckeditor4-integrations-common-1.0.0.tgz",
+      "integrity": "sha512-OAoQT/gYrHkg0qgzf6MS/rndYhq3SScLVQ3rtXQeuCE8ju7nFHg3qZ7WGA2XpFxcZzsMP6hhugXqdel5vbcC3g=="
+    },
+    "ckeditor4-vue": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ckeditor4-vue/-/ckeditor4-vue-2.1.1.tgz",
+      "integrity": "sha512-BBmpT1BYxOmaA+qy9+hvhG0tDYCGqFve1eDSol0ZNwWCm1hZvmPAke809AhkHFUjb834dbNRlTwH3c2qedjtkQ==",
+      "requires": {
+        "ckeditor4-integrations-common": "^1.0.0"
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.2",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "ckeditor4-vue": "^2.1.1",
     "core-js": "^3.6.5",
     "element-theme": "^2.0.1",
     "element-ui": "^2.15.7",

src/components/base-dialog/addOrUpdate/index.vue

@@ -4,7 +4,8 @@
 			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
 				<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
 				<el-row v-for="n in rows" :key="n" :gutter="20">
-					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
+					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="getSpan(n, c)">
+						<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
 						<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
 						<el-form-item
 							v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
@@ -44,9 +45,10 @@
 
 				<!-- extra components , like Markdown or RichEdit -->
 				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
-					<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
-						<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
-						<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
+					<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label" class="extra-components">
+						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
+						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
+						<component v-else :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files" />
 					</el-form-item>
 				</template>
 			</el-form>
@@ -244,26 +246,39 @@ export default {
 			/** 计算默认值 */
 			function calDefault(type) {
 				switch (type) {
-					case 'array': 
+					case 'array':
 						return []
 					// more case...
-					default: 
+					default:
 						return ''
 				}
 			}
 			/** 检查是否需要额外的组件 */
 			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
-					this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
+					if (Object.hasOwn(this.dataForm, [item.name])) {
+						console.log('有了!')
+						return
+					} else {
+						console.log('新建！')
+						this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
+					}
+
+					console.log('component: ', item.component)
 				})
 
 			/** 单独设置 id */
 			this.$set(this.dataForm, 'id', null)
+			console.log('mounted: this.dataForm', JSON.stringify(this.dataForm))
 		})
-		console.log("mounted: this.dataForm", JSON.stringify(this.dataForm))
 	},
 
 	methods: {
+		getSpan(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
+		},
+
 		getLabel(n, c) {
 			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
 			if (opt) {
@@ -327,18 +342,22 @@ export default {
 					if (this.shouldWait)
 						this.shouldWait.then(() => {
 							if (this.tempForm.length) {
-								console.log("create new, tempform", JSON.stringify(this.tempForm.length))
+								console.log('create new, tempform', JSON.stringify(this.tempForm.length))
 								this.tempForm.forEach(item => {
 									console.log('item data', item.data)
 									this.dataForm[item.name] = item.data
 								})
-								console.log("create new, dataform", JSON.stringify(this.dataForm))
+								console.log('create new, dataform', JSON.stringify(this.dataForm))
 							}
 						})
 				}
 			})
 		},
 
+		handleEditorReady(val) {
+			console.log('editor  rready..', val)
+		},
+
 		handleClick(btn) {
 			/** 提取url */
 			const urls = {}
@@ -354,6 +373,8 @@ export default {
 					/** 需要验证表单的操作 */
 					this.$refs['dataForm'].validate(valid => {
 						if (valid) {
+							console.log('before send: ', this.dataForm)
+
 							this.$http({
 								url: this.$http.adornUrl(urls[btn.name].url),
 								method: btn.name === 'save' ? 'POST' : 'PUT',
@@ -403,7 +424,11 @@ export default {
 
 		handleUploadListUpdate(filelist) {
 			// 此处需要参照‘设备类型’新增的接口，灵活地设置 dataForm
-			this.$set(this.dataForm, 'fileIds', filelist.map(item => item.id))
+			this.$set(
+				this.dataForm,
+				'fileIds',
+				filelist.map(item => item.id)
+			)
 			console.log('handleUploadListUpdate(): ', this.dataForm)
 		},
 

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
+				}
 			})
 		},
 		// 删除

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>