cool-admin框架前端使用-vue3版本，useUpsert使用

1. 设置组件input 状态不可编辑

设置组件input 状态不可编辑

在component的props添加 disabled: true

<script lang="ts" name="sg-domain" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
 
const { service } = useCool();
 
const Upsert = useUpsert({
	items: [
		{
			label: "会员",
			prop: "uid",
			required: true,
			component: { name: "el-select", options: [] }
		},
		{
			label: "订单号",
			prop: "unique",
			span: 12,
			required: true,
			component: {
				name: "el-input",
				props: {
					disabled: true,//不可编辑
				}
			}
		},
		
	],
 
});
 
</script>

效果：

2.不同字段，三级联动

<script lang="ts" name="sg-chat_count" setup>
 
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
 
const { service } = useCool();
const addressList = [
	{
		label: "广东省",
		value: "1",
		children: [
			{
				label: "广州市",
				value: "101",
				children: [
					{ label: "越秀", value: "1001" },
					{ label: "天河", value: "1002" },
					{ label: "萝岗", value: "1003" }
				]
			},
			{
				label: "深圳市",
				value: "102",
				children: [
					{ label: "宝安", value: "1004" },
					{ label: "龙岗", value: "1005" },
					{ label: "罗湖", value: "1006" }
				]
			},
			{
				label: "茂名市",
				value: "103",
				children: [
					{ label: "高州", value: "1007" },
					{ label: "化州", value: "1008" },
					{ label: "信宜", value: "1009" }
				]
			}
		]
	},
	{
		label: "河南省",
		value: "2",
		children: [
			{
				label: "郑州市",
				value: "104",
				children: [
					{ label: "中原区", value: "1010" },
					{ label: "二七区", value: "1011" },
					{ label: "金水区", value: "1012" }
				]
			},
			{
				label: "开封市",
				value: "105",
				children: [
					{ label: "龙亭区", value: "1013" },
					{ label: "鼓楼区", value: "1014" },
					{ label: "祥符区", value: "1015" }
				]
			},
			{
				label: "洛阳市",
				value: "106",
				children: [
					{ label: "老城区", value: "1016" },
					{ label: "西工区", value: "1017" },
					{ label: "涧西区", value: "1018" }
				]
			}
		]
	}
];
 
 
let address: any[] = [];
const filterList = (level: number, status: string) => {
	let resList;
	switch (level) {
		case 1:
			address[0] = status;
			address = address.slice(0, 1); //移除二级和三级
			Upsert.value?.setForm("two", ""); //清空表单值,有更好的写法,这里应该给二级的一个默认值,默认是当前一级下二级第一个值
			Upsert.value?.setForm("three", ""); //清空表单值,有更好的写法,这里应该给三级的一个默认值,默认是当前二级下三级第一个值
			resList = addressList.filter((item: any) => item.value == status)[0].children;
			break;
		case 2:
			address[1] = status;
			address = address.slice(0, 2); //移除三级
			Upsert.value?.setForm("three", ""); //清空表单值,有更好的写法,这里应该给三级的一个默认值,默认是当前二级下三级第一个值
			let t2 = addressList.filter((item: any) => item.value == address[0])[0].children;
			resList = t2.filter((item: any) => item.value == status)[0].children;
			break;
		case 3:
			address[2] = status;
			break;
		default:
			break;
	}
	return resList;
};
 
const change = (level: number, status: string, param?: string) => {
	const list: any = filterList(level, status);
	if (param) {
		Upsert.value?.setOptions(
			param,
			list.map((e: { label: any; value: any }) => {
				return {
					label: e.label || "",
					value: e.value
				};
			})
		);
	}
};
 
// cl-upsert 配置
const Upsert = useUpsert({
	items: [
		{
			label: "一级",
			prop: "one",
			span: 8,
			required: true,
			component: {
				name: "el-select",
				options: [],
				props: {
					onChange(status: any) {
						change(1, status, "two");
					}
				}
			}
		},
		{
			label: "二级",
			prop: "two",
			span: 8,
			required: true,
			component: {
				name: "el-select",
				options: [],
				props: {
					onChange(status: any) {
						change(2, status, "three");
					}
				}
			}
		},
		{
			label: "三级",
			prop: "three",
			span: 8,
			required: true,
			component: {
				name: "el-select",
				options: [],
				props: {
					onChange(status: any) {
						change(3, status);
					}
				}
			}
		},
		{
			label: "会员账号",
			prop: "uid",
			span: 12,
			required: true,
			component: { name: "el-select", options: [] }
		},
	
		
		{
			label: "状态",
			prop: "status",
			value: 1,
			component: {
				name: "el-radio-group",
				options: [
					{
						label: "正常",
						value: 1
					},
					{
						label: "禁用",
						value: 0
					}
				]
			}
		}
	],
	async onOpen() {
        //打开一级默认数据
		Upsert.value?.setOptions(
			"one",
			addressList.map((e: { label: any; value: any }) => {
				return {
					label: e.label || "",
					value: e.value
				};
			})
		);
 
	}
});

</script>

效果