配合后端 app_module.icon(YschIcons 图标名,非必填): - 表格在「模块名称」后加「图标」列,有值时预览 SvgIcon 并显示图标名原文,无值显示占位 - 新增/编辑弹窗在「模块路径」后加一行「模块图标」输入框(clearable,非必填) - 回显、新增/子模块初始值、两处提交参数均已带上 icon;空串归一为不下发该字段, 后端 edit 逐字段整体赋值,故清空图标可生效
This commit is contained in:
@@ -29,6 +29,10 @@
|
|||||||
<FormItem label="模块路径:" prop="path">
|
<FormItem label="模块路径:" prop="path">
|
||||||
<Input placeholder="请输入模块路径" v-model="form.path" />
|
<Input placeholder="请输入模块路径" v-model="form.path" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
<FormItem label="模块图标:" prop="icon">
|
||||||
|
<Input placeholder="选填,YschIcons 图标名(如 notice-list);留空则不下发图标"
|
||||||
|
v-model="form.icon" clearable />
|
||||||
|
</FormItem>
|
||||||
<FormItem label="自定义ID:" prop="customId">
|
<FormItem label="自定义ID:" prop="customId">
|
||||||
<InputNumber :style="{ width: '100%' }" placeholder="请输入自定义ID" v-model="form.customId" />
|
<InputNumber :style="{ width: '100%' }" placeholder="请输入自定义ID" v-model="form.customId" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@@ -91,6 +95,24 @@ const flatData = computed(() => flattenTree(moduleList.value));
|
|||||||
/* ---------------- 表格列 ---------------- */
|
/* ---------------- 表格列 ---------------- */
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: "模块名称", key: "name", minWidth: 260, slot: "name" },
|
{ title: "模块名称", key: "name", minWidth: 260, slot: "name" },
|
||||||
|
{
|
||||||
|
title: "图标",
|
||||||
|
key: "icon",
|
||||||
|
width: 170,
|
||||||
|
align: "center",
|
||||||
|
render: (h: any, { row }: any) => {
|
||||||
|
if (!row.icon) return h("span", { style: { color: "#c5c8ce" } }, "-");
|
||||||
|
return h("div", {
|
||||||
|
style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "6px" },
|
||||||
|
title: row.icon,
|
||||||
|
}, [
|
||||||
|
h(SvgIcon, { name: row.icon, size: 16 }),
|
||||||
|
h("span", {
|
||||||
|
style: { maxWidth: "110px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
|
||||||
|
}, row.icon),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
{ title: "ID", key: "customId", width: 120, align: "center", render: (h: any, { row }: any) => h("span", row.customId || "-") },
|
{ title: "ID", key: "customId", width: 120, align: "center", render: (h: any, { row }: any) => h("span", row.customId || "-") },
|
||||||
{ title: "路径", key: "path", minWidth: 200, render: (h: any, { row }: any) => h("span", row.path || "-") },
|
{ title: "路径", key: "path", minWidth: 200, render: (h: any, { row }: any) => h("span", row.path || "-") },
|
||||||
{ title: "排序号", key: "sortNo", width: 100, align: "center", render: (h: any, { row }: any) => h("span", row.sortNo ?? "-") },
|
{ title: "排序号", key: "sortNo", width: 100, align: "center", render: (h: any, { row }: any) => h("span", row.sortNo ?? "-") },
|
||||||
@@ -123,6 +145,7 @@ const form = ref<{
|
|||||||
id: number | null;
|
id: number | null;
|
||||||
name: string;
|
name: string;
|
||||||
path: string;
|
path: string;
|
||||||
|
icon: string;
|
||||||
customId: number | null;
|
customId: number | null;
|
||||||
parentId: number | null;
|
parentId: number | null;
|
||||||
sortNo: number | null;
|
sortNo: number | null;
|
||||||
@@ -130,6 +153,7 @@ const form = ref<{
|
|||||||
id: null,
|
id: null,
|
||||||
name: '',
|
name: '',
|
||||||
path: '',
|
path: '',
|
||||||
|
icon: '',
|
||||||
customId: null,
|
customId: null,
|
||||||
parentId: null,
|
parentId: null,
|
||||||
sortNo: null,
|
sortNo: null,
|
||||||
@@ -177,6 +201,7 @@ function openEditModal(item: any) {
|
|||||||
f.id = item?.id ?? null;
|
f.id = item?.id ?? null;
|
||||||
f.name = item?.name || '';
|
f.name = item?.name || '';
|
||||||
f.path = item?.path || '';
|
f.path = item?.path || '';
|
||||||
|
f.icon = item?.icon || '';
|
||||||
f.customId = item?.customId != null ? Number(item.customId) : null;
|
f.customId = item?.customId != null ? Number(item.customId) : null;
|
||||||
f.parentId = item?.parentId ?? null;
|
f.parentId = item?.parentId ?? null;
|
||||||
f.sortNo = item?.sortNo != null ? Number(item.sortNo) : null;
|
f.sortNo = item?.sortNo != null ? Number(item.sortNo) : null;
|
||||||
@@ -189,13 +214,13 @@ function openEditModal(item: any) {
|
|||||||
/* ---------------- 新增模块 ---------------- */
|
/* ---------------- 新增模块 ---------------- */
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
openingIsChild.value = false;
|
openingIsChild.value = false;
|
||||||
openEditModal({ id: null, name: '', path: '', customId: null, parentId: null, sortNo: null });
|
openEditModal({ id: null, name: '', path: '', icon: '', customId: null, parentId: null, sortNo: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------- 新增子模块 ---------------- */
|
/* ---------------- 新增子模块 ---------------- */
|
||||||
function handleAddChild(parent: any) {
|
function handleAddChild(parent: any) {
|
||||||
openingIsChild.value = true;
|
openingIsChild.value = true;
|
||||||
openEditModal({ id: null, name: '', path: '', customId: null, parentId: parent.id, sortNo: null });
|
openEditModal({ id: null, name: '', path: '', icon: '', customId: null, parentId: parent.id, sortNo: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------- 编辑 ---------------- */
|
/* ---------------- 编辑 ---------------- */
|
||||||
@@ -240,6 +265,7 @@ async function onRawSave() {
|
|||||||
appId: appId.value,
|
appId: appId.value,
|
||||||
name: form.value.name,
|
name: form.value.name,
|
||||||
path: form.value.path,
|
path: form.value.path,
|
||||||
|
icon: form.value.icon?.trim() || undefined,
|
||||||
customId: form.value.customId == null ? '' : String(form.value.customId),
|
customId: form.value.customId == null ? '' : String(form.value.customId),
|
||||||
parentId: form.value.parentId ?? undefined,
|
parentId: form.value.parentId ?? undefined,
|
||||||
sortNo: form.value.sortNo == null ? undefined : Number(form.value.sortNo),
|
sortNo: form.value.sortNo == null ? undefined : Number(form.value.sortNo),
|
||||||
@@ -253,6 +279,8 @@ async function onRawSave() {
|
|||||||
appId: appId.value,
|
appId: appId.value,
|
||||||
name: form.value.name,
|
name: form.value.name,
|
||||||
path: form.value.path,
|
path: form.value.path,
|
||||||
|
// 后端 edit 逐字段整体赋值,字段缺省即置空 → 清空图标能生效
|
||||||
|
icon: form.value.icon?.trim() || undefined,
|
||||||
customId: form.value.customId == null ? '' : String(form.value.customId),
|
customId: form.value.customId == null ? '' : String(form.value.customId),
|
||||||
parentId: form.value.parentId ?? undefined,
|
parentId: form.value.parentId ?? undefined,
|
||||||
sortNo: form.value.sortNo == null ? undefined : Number(form.value.sortNo),
|
sortNo: form.value.sortNo == null ? undefined : Number(form.value.sortNo),
|
||||||
|
|||||||
Reference in New Issue
Block a user