优化动态组件数据管理页面

pages_plugs/system_uni/vk-components-dynamic.vue

@@ -28,7 +28,12 @@
 			@delete="deleteBtn"
 			@current-change="currentChange"
 			@selection-change="selectionChange"
-		></vk-data-table>
+		>
+			<!-- 排序值 -->
+			<template v-slot:sort="{ row, column, index }">
+				<el-input v-model="row.sort" size="mini" @change="sortChange($event, row)"/>
+			</template>
+		</vk-data-table>
 		<!-- 表格组件结束 -->
 
 		<!-- 添加或编辑的弹窗开始 -->
@@ -60,6 +65,17 @@ var that;													// 当前页面对象
 var vk = uni.vk;									// vk实例
 var originalForms = {}; 					// 表单初始化数据
 
+var typeData = [
+	{ value: "image", label: "图片" },
+	{ value: "swiper", label: "图片轮播" },
+	{ value: "grid-btn", label: "宫格按钮" },
+	{ value: "notice", label: "通知" },
+	{ value: "text", label: "文本" },
+	{ value: "rich-text", label: "富文本" },
+	{ value: "button", label: "按钮" },
+	{ value: "custom", label: "自定义" }
+];
+
 export default {
 	data() {
 		// 页面数据变量
@@ -74,10 +90,36 @@ export default {
 				action: "admin/system_uni/components-dynamic/sys/getList",
 				// 表格字段显示规则
 				columns: [
+					{ key: "sort", title: "排序值", type: "number", width: 100, sortable: "custom" },
 					{ key: "data_id", title: "组件数据id", type: "text", width: 200 },
 					{ key: "title", title: "数据标题", type: "text", width: 200 },
 					{ key: "description", title: "数据描述", type: "textarea" },
 					{ key: "data", title: "组件数据", type: "json", width: 200 },
+					{
+					  key: "show", title: "是否显示", type: "switch",
+					  activeValue: true,
+					  inactiveValue: false,
+					  width: 80,
+					  watch: (res) => {
+					    let { value, row, change } = res;
+					    vk.callFunction({
+					      url: "admin/system_uni/components-dynamic/sys/update",
+					      title: "请求中...",
+					      data: {
+					        _id: row._id,
+					        show: value
+					      },
+					      success: data => {
+					        change(value); // 这一步是让表格行内的开关改变显示状态
+					      }
+					    });
+					  }
+					},
+					{
+						key: "type", title: "type", type: "select", width: 120,
+						data: typeData
+					},
+					{ key: "name", title: "name", type: "text", width: 120 },
 					{ key: "_add_time", title: "添加时间", type: "time", width: 200 },
 					{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 }
 				],
@@ -94,15 +136,24 @@ export default {
 				formData: {},
 				// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
 				columns: [
-					{ key: "data_id", title: "组件数据ID", type: "text", mode: "%%" },
-					{ key: "title", title: "数据标题", type: "text", mode: "%%" },
-					{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 400, mode: "[]" }
+					{ key: "data_id", title: "组件数据ID", type: "text", width: 180, mode: "%%" },
+					{ key: "title", title: "数据标题", type: "text", width: 180, mode: "%%" },
+					{
+						key: "type", title: "type", type: "select", width: 160, mode: "=",
+						data: [
+							{ value: "", label: "全部" },
+							...typeData
+						]
+					},
+					{ key: "name", title: "name", type: "text", width: 160, mode: "%%" },
+					{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 380, mode: "[]" }
 				]
 			},
 			form1: {
 				// 表单请求数据，此处可以设置默认值
 				data: {
-
+					sort: 0,
+					show: true
 				},
 				// 表单属性
 				props: {
@@ -110,10 +161,19 @@ export default {
 					action: "",
 					// 表单字段显示规则
 					columns: [
+						{ key:"", title:"基础", type:"bar-title" },
 						{ key: "data_id", title: "组件数据id", type: "text", show: ["add"] },
 						{ key: "title", title: "数据标题", type: "text" },
 						{ key: "data", title: "组件数据", type: "json" },
-						{ key: "description", title: "数据描述", type: "textarea" }
+						{ key: "description", title: "数据描述", type: "textarea" },
+						{ key:"", title:"扩展", type:"bar-title" },
+						{ key: "sort", title: "排序值", type: "number" },
+						{ key: "show", title: "是否显示", type: "switch", activeValue: true, inactiveValue: false },
+						{
+							key: "type", title: "type", type: "select",
+							data: typeData
+						},
+						{ key: "name", title: "name", type: "text", tips:"同一页面可以设置相同的name" },
 					],
 					// 表单验证规则
 					rules: {
@@ -200,13 +260,22 @@ export default {
 					_id: item._id
 				}
 			});
-		}
-	},
-	watch: {
+		},
+		// 修改排序值
+		sortChange(sort, item){
+			vk.callFunction({
+				url: 'admin/system_uni/components-dynamic/sys/update',
+				data: {
+					_id: item._id,
+					sort: Number(sort)
+				},
+				success: (data) => {
 
+				}
+			});
+		},
 	},
-	// 过滤器
-	filters: {
+	watch: {
 
 	},
 	// 计算属性

uniCloud-aliyun/cloudfunctions/router/service/admin/system_uni/components-dynamic/sys/add.js

@@ -12,39 +12,47 @@ module.exports = {
 	 */
 	main: async (event) => {
 		let { data = {}, userInfo, util, filterResponse, originalParam } = event;
-		let { customUtil, uniID, config, pubFun, vk , db, _ } = util;
+		let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
 		let { uid } = data;
-		let res = { code : 0, msg : '' };
+		let res = { code: 0, msg: '' };
 		// 业务逻辑开始-----------------------------------------------------------
-		let { 
+		let {
 			data_id,
+			data: dynamicData,
 			title,
 			description,
-			data : components_dynamic_data
+			type,
+			sort = 0,
+			show = true,
+			name
 		} = data;
+
 		// 参数非空检测
-		if(vk.pubfn.isNullOne(data_id, data)){
-			return { code : -1, msg : '参数错误' };
-		}
+		if (vk.pubfn.isNull(data_id)) return { code: -1, msg: 'data_id不能为空' };
+
 		let dbName = "vk-components-dynamic";
 		// 检测key是否已存在
 		let num = await vk.baseDao.count({
-			dbName:dbName,
-			whereJson:{
+			dbName: dbName,
+			whereJson: {
 				data_id,
 			}
 		});
-		if(num > 0){
-			return { code : -1, msg : `组件数据id不能重复!` };
+		if (num > 0) {
+			return { code: -1, msg: `组件数据id不能重复!` };
 		}
 		// 执行数据库API请求
 		res.id = await vk.baseDao.add({
-			dbName:dbName,
-			dataJson:{
-				data: components_dynamic_data,
+			dbName,
+			dataJson: {
+				data: dynamicData,
 				data_id,
 				title,
-				description
+				description,
+				type,
+				sort,
+				show,
+				name
 			}
 		});
 		return res;

uniCloud-aliyun/cloudfunctions/router/service/admin/system_uni/components-dynamic/sys/update.js

@@ -13,38 +13,53 @@ module.exports = {
 	 */
 	main: async (event) => {
 		let { data = {}, userInfo, util, filterResponse, originalParam } = event;
-		let { customUtil, uniID, config, pubFun, vk , db, _ } = util;
+		let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
 		let { uid } = data;
-		let res = { code : 0, msg : '' };
+		let res = { code: 0, msg: '' };
 		// 业务逻辑开始-----------------------------------------------------------
-		let { data_id, title, _id, description} = data;
-		let components_dynamic_data = data.data;
+		let {
+			_id,
+			data_id,
+			data: dynamicData,
+			title,
+			description,
+			type,
+			sort,
+			show,
+			name
+		} = data;
+
 		// 参数非空检测
-		if(vk.pubfn.isNullOne(_id, data_id)){
-			return { code : -1, msg : '参数错误' };
-		}
+		if (vk.pubfn.isNull(_id)) return { code: -1, msg: 'id不能为空' };
+
 		let dbName = "vk-components-dynamic";
 
-		// 检测data_id是否已存在
-		let num = await vk.baseDao.count({
-			dbName:dbName,
-			whereJson:{
-				data_id,
-				_id : _.neq(_id)
+		if (vk.pubfn.isNotNull(data_id)) {
+			// 检测data_id是否已存在
+			let num = await vk.baseDao.count({
+				dbName,
+				whereJson: {
+					data_id,
+					_id: _.neq(_id)
+				}
+			});
+			if (num > 0) {
+				return { code: -1, msg: `组件数据id不能重复!` };
 			}
-		});
-		if(num > 0){
-			return { code : -1, msg : `组件数据id不能重复!` };
 		}
 		// 执行数据库API请求
-		res.num = await vk.baseDao.update({
-			dbName:dbName,
-			whereJson:{
-				_id
-			},
-			dataJson:{
-				data: components_dynamic_data,
-				data_id, title, description
+		res.num = await vk.baseDao.updateById({
+			dbName,
+			id: _id,
+			dataJson: {
+				data: dynamicData,
+				data_id,
+				title,
+				description,
+				type,
+				sort,
+				show,
+				name
 			}
 		});