调整 crud 部分写法

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "5.8.1",
+	"version": "5.9.0",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",
@@ -11,7 +11,7 @@
 	"dependencies": {
 		"@codemirror/lang-javascript": "^6.0.1",
 		"@codemirror/theme-one-dark": "^6.0.0",
-		"@cool-vue/crud": "^5.4.0",
+		"@cool-vue/crud": "^5.5.4",
 		"@element-plus/icons-vue": "^2.0.6",
 		"@vueuse/core": "^9.1.0",
 		"@wangeditor/editor": "^5.1.14",

src/modules/base/components/editor/wang.vue

@@ -136,7 +136,9 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .cl-editor-wang {
 	border: 1px solid var(--el-border-color);
+	border-radius: var(--el-border-radius-base);
 	box-sizing: border-box;
+	overflow: hidden;
 
 	:deep(.w-e-toolbar) {
 		border-bottom: 1px solid var(--el-border-color);

src/modules/base/views/components/dept/check.vue

@@ -14,7 +14,6 @@
 					label: 'name',
 					children: 'children'
 				}"
-				:default-checked-keys="checked"
 				:filter-node-method="filterNode"
 				:check-strictly="checkStrictly"
 				@check="onCheckChange"
@@ -24,10 +23,10 @@
 </template>
 
 <script lang="ts" name="dept-check" setup>
-import { onMounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { deepTree } from "/@/cool/utils";
-import { ElMessage } from "element-plus";
 import { useCool } from "/@/cool";
+import { useUpsert } from "@cool-vue/crud";
 
 const props = defineProps({
 	modelValue: {
@@ -45,23 +44,15 @@ const { service } = useCool();
 const Tree = ref();
 
 // 树形列表
-const list = ref<any[]>([]);
-
-// 已选列表
-const checked = ref();
+const list = ref();
 
 // 关键字搜素
 const keyword = ref("");
 
 // 刷新树形列表
-function refresh() {
-	service.base.sys.department
-		.list()
-		.then((res) => {
+async function refresh() {
+	return service.base.sys.department.list().then((res) => {
 		list.value = deepTree(res);
-		})
-		.catch((err) => {
-			ElMessage.error(err.message);
 	});
 }
 
@@ -81,16 +72,11 @@ watch(keyword, (val: string) => {
 	Tree.value.filter(val);
 });
 
-// 监听值
-watch(
-	() => props.modelValue,
-	(val) => {
-		checked.value = val || [];
+useUpsert({
+	async onOpened() {
+		await refresh();
+		Tree.value.setCheckedKeys(props.modelValue || []);
 	}
-);
-
-onMounted(() => {
-	refresh();
 });
 </script>
 

src/modules/base/views/components/menu/check.vue

@@ -12,7 +12,6 @@
 					label: 'name',
 					children: 'children'
 				}"
-				:default-checked-keys="checked"
 				:filter-node-method="filterNode"
 				@check="onCheckChange"
 			/>
@@ -21,10 +20,10 @@
 </template>
 
 <script lang="ts" name="menu-check" setup>
-import { onMounted, ref, watch } from "vue";
-import { ElMessage } from "element-plus";
+import { ref, watch } from "vue";
 import { deepTree } from "/@/cool/utils";
 import { useCool } from "/@/cool";
+import { useUpsert } from "@cool-vue/crud";
 
 const props = defineProps({
 	modelValue: {
@@ -37,27 +36,19 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { service } = useCool();
 
-// 树形列表
-const list = ref<any[]>([]);
+// el-tree 组件
+const Tree = ref();
 
-// 已选列表
-const checked = ref<any[]>([]);
+// 树形列表
+const list = ref();
 
 // 搜索关键字
 const keyword = ref("");
 
-// el-tree 组件
-const Tree = ref();
-
 // 刷新列表
-function refresh() {
-	service.base.sys.menu
-		.list()
-		.then((res) => {
+async function refresh() {
+	return service.base.sys.menu.list().then((res) => {
 		list.value = deepTree(res);
-		})
-		.catch((err) => {
-			ElMessage.error(err.message);
 	});
 }
 
@@ -77,16 +68,13 @@ watch(keyword, (val: string) => {
 	Tree.value.filter(val);
 });
 
-// 刷新监听
-watch(
-	() => props.modelValue,
-	(val) => {
-		checked.value = (val || []).filter((e) => Tree.value.getNode(e)?.isLeaf);
+useUpsert({
+	async onOpened() {
+		await refresh();
+		Tree.value.setCheckedKeys(
+			(props.modelValue || []).filter((e) => Tree.value.getNode(e)?.isLeaf)
+		);
 	}
-);
-
-onMounted(() => {
-	refresh();
 });
 </script>
 

src/modules/base/views/param.vue

@@ -114,24 +114,21 @@ const Upsert = useUpsert({
 			prop: "name",
 			label: "名称",
 			span: 12,
+			required: true,
 			component: {
 				name: "el-input"
-			},
-			required: true
+			}
 		},
 		{
 			prop: "keyName",
 			label: "keyName",
 			span: 12,
+			required: true,
 			component: {
 				name: "el-input",
 				props: {
 					placeholder: "请输入Key"
 				}
-			},
-			rules: {
-				required: true,
-				message: "Key不能为空"
 			}
 		},
 		{
@@ -155,14 +152,14 @@ const Upsert = useUpsert({
 		}
 	],
 
-	onOpened(isEdit, data) {
+	onOpened(data) {
 		tab.index = null;
 
 		nextTick(() => {
-			if (isEdit) {
-				tab.index = /<*>/g.test(data.data) ? 1 : 0;
-			} else {
+			if (Upsert.value?.mode == "add") {
 				tab.index = 1;
+			} else {
+				tab.index = /<*>/g.test(data.data) ? 1 : 0;
 			}
 		});
 	}

src/modules/base/views/role.vue

@@ -103,19 +103,26 @@ const Upsert = useUpsert({
 		},
 		{
 			label: "数据权限",
+			prop: "relevance",
+			flex: false,
+			component: {
+				name: "slot-relevance"
+			}
+		},
+		{
+			label: "",
 			prop: "departmentIdList",
 			value: [],
 			component: {
 				vm: DeptCheck,
-				props: {}
-			},
-			append: {
-				name: "slot-relevance"
+				style: {
+					marginTop: "-10px"
+				}
 			}
 		}
 	],
 
-	onOpened(_, data) {
+	onOpened(data) {
 		onRelevanceChange(data.relevance || 0);
 	}
 });

src/modules/base/views/user.vue

@@ -214,11 +214,12 @@ const Upsert = useUpsert({
 				name: "el-input"
 			}
 		},
-		{
+		() => {
+			return {
 				prop: "password",
 				label: "密码",
 				span: 12,
-			required: true,
+				required: Upsert.value?.mode == "add",
 				component: {
 					name: "el-input",
 					props: {
@@ -232,6 +233,7 @@ const Upsert = useUpsert({
 						message: "密码长度在 6 到 16 个字符"
 					}
 				]
+			};
 		},
 		{
 			prop: "roleIdList",
@@ -294,14 +296,14 @@ const Upsert = useUpsert({
 		}
 	],
 
-	onSubmit(_, data, { next }) {
+	onSubmit(data, { next }) {
 		next({
 			...data,
 			departmentId: selects.dept?.id
 		});
 	},
 
-	async onOpen(isEdit) {
+	async onOpen() {
 		const list = await service.base.sys.role.list();
 
 		// 设置权限列表
@@ -314,15 +316,6 @@ const Upsert = useUpsert({
 				};
 			})
 		);
-
-		// 编辑密码不必填
-		if (isEdit) {
-			Upsert.value?.setData("password", {
-				rules: {
-					required: false
-				}
-			});
-		}
 	}
 });
 

src/modules/demo/views/crud.vue

@@ -119,13 +119,13 @@ const Upsert = useUpsert({
 		// done({ name: "🐑" });
 		// close();
 	},
-	onSubmit(isEdit, data, { next }) {
-		console.log(isEdit, data);
+	onSubmit(data, { next }) {
+		console.log(data);
 		next(data);
 		// Upsert.value?.close();
 	},
-	onOpen(isEdit, data) {
-		console.log(isEdit, data);
+	onOpen(data) {
+		console.log(data);
 	},
 	onClose(done) {
 		console.log("onclose");

src/modules/dict/store/dict.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { computed, reactive } from "vue";
+import { computed, reactive, toRaw } from "vue";
 import { isDev, service } from "/@/cool";
 
 declare interface Data {
@@ -36,7 +36,9 @@ export const useDictStore = defineStore("dict", () => {
 				Object.assign(data, d);
 
 				if (isDev) {
-					console.log("字典数据", data);
+					console.group("字典数据");
+					console.log(toRaw(data));
+					console.groupEnd();
 				}
 
 				return data;

yarn.lock

@@ -1052,10 +1052,10 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@cool-vue/crud@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.4.0.tgz#2c174c9184ad7bd34fb4faf981e3406d3ef05bf0"
-  integrity sha512-7su1XhOMaRZbwbmVb9UOxxsyUB5bug7BRtu3Gpz/2sOVkolCsJJBqDqF8K5wiLmx1/ZXtjbzK797AywoMIpzyA==
+"@cool-vue/crud@^5.5.4":
+  version "5.5.4"
+  resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.5.4.tgz#f6874c46fa76494a9255249d64656ab9f22c7554"
+  integrity sha512-Z5s+OL/DQiFfKmhSns6g84MdVKlnatLnlGXFFJr9Y/WpCsbnLzdjIQsA7YKNzVGWuKVCPxc2Zd18QjYwWu97WA==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"