优化

package.json

@@ -9,7 +9,7 @@
 		"lint:eslint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.0.1-beta9",
+		"@cool-vue/crud": "^7.0.1-beta14",
 		"@element-plus/icons-vue": "^2.1.0",
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",

packages/crud/index.d.ts

@@ -329,6 +329,7 @@ declare namespace ClTable {
 		dict: DictOptions | Vue.Ref<DictOptions>;
 		dictFormatter: (values: DictOptions) => string;
 		dictColor: boolean;
+		dictSeparator: string;
 		buttons: OpButton | ((options: { scope: obj }) => OpButton);
 		align: "left" | "center" | "right";
 		label: string | Vue.Ref<string>;

packages/crud/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.0.1-beta11",
+	"version": "7.0.1-beta14",
 	"private": false,
 	"main": "./dist/index.umd.min.js",
 	"typings": "types/index.d.ts",
@@ -10,6 +10,7 @@
 		"dist": "tsc && yarn build --target lib --name index ./src/index.ts"
 	},
 	"dependencies": {
+		"@cool-vue/crud": "^7.0.1-beta14",
 		"array.prototype.flat": "^1.2.4",
 		"core-js": "^3.21.1",
 		"element-plus": "^2.3.9",

packages/crud/src/utils/parse.tsx

@@ -26,6 +26,9 @@ export function parseTableDict(value: any, item: ClTable.Column) {
 	// 选项列表
 	const options: DictOptions = cloneDeep(getValue(item.dict || []));
 
+	// 字符串分隔符
+	const separator = item.dictSeparator === undefined ? "," : item.dictSeparator;
+
 	// 设置颜色
 	if (item.dictColor) {
 		options.forEach((e, i) => {
@@ -36,22 +39,36 @@ export function parseTableDict(value: any, item: ClTable.Column) {
 	}
 
 	// 绑定值
-	const values = (isArray(value) ? value : [value]).filter(
+	let values = [];
-		(e) => e !== undefined && e !== null && e !== ""
+
-	);
+	// 格式化值
+	if (isArray(value)) {
+		values = value;
+	} else if (isString(value)) {
+		if (separator) {
+			values = value.split(separator);
+		} else {
+			values = [value];
+		}
+	} else {
+		values = [value];
+	}
 
 	// 返回值
-	const list = values.map((v) => {
+	const list = values
-		const d = deepFind(v, options) || { label: v, value: v };
+		.filter((e) => e !== undefined && e !== null && e !== "")
-		delete d.children;
+		.map((v) => {
+			const d = deepFind(v, options) || { label: v, value: v };
+			delete d.children;
 
-		return d;
+			return d;
-	});
+		});
 
-	// 是否格式化
+	// 格式化返回
 	if (item.dictFormatter) {
 		return item.dictFormatter(list);
 	} else {
+		// tag 返回
 		return list.map((e) => {
 			return h(
 				<el-tag disable-transitions effect="dark" style="margin: 2px; border: 0" />,

packages/crud/types/components/table/helper/index.d.ts

@@ -56,6 +56,7 @@ export declare function useTable(props: any): {
             };
             dictFormatter: (values: DictOptions) => string;
             dictColor: boolean;
+            dictSeparator: string;
             buttons: ((options: {
                 scope: obj;
             }) => ClTable.OpButton) | ("info" | "delete" | "edit" | `slot-${string}` | {

packages/crud/yarn.lock

@@ -961,6 +961,19 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@cool-vue/crud@^7.0.1-beta14":
+  version "7.0.1-beta14"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.1-beta14.tgz#5e6b28d67090fc36118cf3b79da2ccbe7db56266"
+  integrity sha512-/fM382tuvdS2xOVCfnBx/ZdltwJrKdmcXJcZufWf3y0SYv9TU/QSNB91vBJlxLvv2N3VabjeYgfn8TB86HT3gg==
+  dependencies:
+    array.prototype.flat "^1.2.4"
+    core-js "^3.21.1"
+    element-plus "^2.3.9"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    mitt "^3.0.1"
+    vue "^3.3.4"
+
 "@ctrl/tinycolor@^3.4.1":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"

src/modules/base/pages/main/components/slider.vue

@@ -43,6 +43,7 @@ const { app } = useBase();
 			font-weight: bold;
 			font-size: 26px;
 			margin-left: 10px;
+			line-height: 1;
 			white-space: nowrap;
 		}
 	}

src/modules/base/views/menu/index.vue

@@ -29,16 +29,32 @@
 					<cl-svg :name="scope.row.icon" size="16px" style="margin-top: 5px" />
 				</template>
 
-				<!-- 权限 -->
+				<!-- 是否显示 -->
-				<template #column-perms="{ scope }">
+				<template #column-isShow="{ scope }">
-					<el-tag
+					<cl-switch
-						v-for="(item, index) in scope.row.permList"
+						v-model="scope.row.isShow"
-						:key="index"
+						:active-value="true"
-						effect="plain"
+						:inactive-value="false"
-						size="small"
+						:scope="scope.row"
-						style="margin: 2px; letter-spacing: 0.5px"
+						:column="scope.column"
-						>{{ item }}</el-tag
+						v-if="scope.row.type != 2"
-					>
+					/>
+
+					<span v-else></span>
+				</template>
+
+				<!-- 图标 -->
+				<template #column-keepAlive="{ scope }">
+					<cl-switch
+						v-model="scope.row.keepAlive"
+						:active-value="true"
+						:inactive-value="false"
+						:scope="scope.row"
+						:column="scope.column"
+						v-if="scope.row.type == 1"
+					/>
+
+					<span v-else></span>
 				</template>
 
 				<!-- 路由 -->
@@ -49,15 +65,6 @@
 					<span v-else>{{ scope.row.router }}</span>
 				</template>
 
-				<!-- 路由缓存 -->
-				<template #column-keepAlive="{ scope }">
-					<el-icon v-if="scope.row.type == 1">
-						<check v-if="scope.row.keepAlive" />
-						<close v-else />
-					</el-icon>
-					<span v-else></span>
-				</template>
-
 				<!-- 行新增 -->
 				<template #slot-add="{ scope }">
 					<el-button
@@ -92,7 +99,6 @@
 </template>
 
 <script lang="ts" name="sys-menu" setup>
-import { Check, Close } from "@element-plus/icons-vue";
 import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
 import { deepTree } from "/@/cool/utils";
@@ -145,17 +151,7 @@ const Table = useTable({
 		{
 			prop: "isShow",
 			label: "是否显示",
-			width: 100,
+			width: 100
-			component: {
-				name: "cl-switch",
-				props: {
-					activeValue: true,
-					inactiveValue: false,
-					onChange() {
-						menu.get();
-					}
-				}
-			}
 		},
 		{
 			prop: "icon",
@@ -204,7 +200,8 @@ const Table = useTable({
 			prop: "perms",
 			label: "权限",
 			headerAlign: "center",
-			minWidth: 300
+			minWidth: 300,
+			dict: []
 		},
 		{
 			prop: "orderNum",
@@ -359,10 +356,6 @@ const Crud = useCrud(
 		service: service.base.sys.menu,
 		onRefresh(_, { render }) {
 			service.base.sys.menu.list().then((list) => {
-				list.map((e) => {
-					e.permList = e.perms ? e.perms.split(",") : [];
-				});
-
 				render(deepTree(list));
 				menu.get();
 			});

yarn.lock

@@ -282,10 +282,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@cool-vue/crud@^7.0.1-beta9":
+"@cool-vue/crud@^7.0.1-beta14":
-  version "7.0.1-beta9"
+  version "7.0.1-beta14"
-  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.1-beta9.tgz#caacb1eab03f48bc6789209242b198ebd06435f5"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.1-beta14.tgz#5e6b28d67090fc36118cf3b79da2ccbe7db56266"
-  integrity sha512-PnukV6Q1sPsXZS2li2BrmCDmYKJdqFumE/wA2kaSTOcrIgmjYmrS/oa2c3C5BKXrwDD9561kq0q8vsKBTpGQxQ==
+  integrity sha512-/fM382tuvdS2xOVCfnBx/ZdltwJrKdmcXJcZufWf3y0SYv9TU/QSNB91vBJlxLvv2N3VabjeYgfn8TB86HT3gg==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"