feat: initial commit
This commit is contained in:
gin
@@ -0,0 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
import { MenuRequest } from "@/api/system/menu";
|
||||
import IconSelect from "@/components/ReIcon/src/Select.vue";
|
||||
|
||||
interface FormProps {
|
||||
formInline: MenuRequest;
|
||||
higherMenuOptions: any[];
|
||||
}
|
||||
|
||||
// TODO 为什么这里设置的rank: 1是不生效的,而hook那边定义的才能生效 到底需不需要 这个withDefaults
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
id: 0,
|
||||
parentId: 0,
|
||||
menuName: "",
|
||||
routerName: "",
|
||||
path: "",
|
||||
status: 1,
|
||||
isButton: undefined,
|
||||
permission: "",
|
||||
menuType: undefined,
|
||||
meta: {}
|
||||
}),
|
||||
higherMenuOptions: () => []
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const newFormInline = ref(props.formInline);
|
||||
const deptOptions = ref(props.higherMenuOptions);
|
||||
|
||||
const typeName = computed(() => {
|
||||
return newFormInline.value.isButton ? "按钮" : "菜单";
|
||||
});
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col>
|
||||
<el-form-item label="父菜单">
|
||||
<el-cascader
|
||||
class="w-full"
|
||||
v-model="newFormInline.parentId"
|
||||
:options="deptOptions"
|
||||
:props="{
|
||||
value: 'id',
|
||||
label: 'menuName',
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}"
|
||||
clearable
|
||||
placeholder="请选择父菜单（不选则为根目录菜单）"
|
||||
/>
|
||||
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
|
||||
<!-- <template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template> -->
|
||||
<!-- </el-cascader> -->
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group
|
||||
v-model="newFormInline.isButton"
|
||||
:disabled="newFormInline.id !== 0"
|
||||
>
|
||||
<el-radio :label="false">菜单</el-radio>
|
||||
<el-radio :label="true">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<template v-if="newFormInline.isButton === false">
|
||||
<re-col :value="24">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group
|
||||
v-model="newFormInline.menuType"
|
||||
:disabled="newFormInline.id !== 0"
|
||||
>
|
||||
<el-radio :label="1">页面</el-radio>
|
||||
<el-radio :label="2">目录</el-radio>
|
||||
<el-radio :label="3">内嵌Iframe</el-radio>
|
||||
<el-radio :label="4">外链跳转</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item :label="`${typeName}图标`" prop="meta.icon">
|
||||
<IconSelect v-model="newFormInline.meta.icon" />
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item :label="`${typeName}名称`" prop="menuName">
|
||||
<el-input
|
||||
v-model="newFormInline.menuName"
|
||||
clearable
|
||||
:placeholder="`请输入${typeName}名称`"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="权限标识" prop="permission">
|
||||
<template v-slot:label>
|
||||
<el-tooltip content="这是权限标识" placement="top">
|
||||
<span>权限标识</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="newFormInline.permission"
|
||||
clearable
|
||||
placeholder="请输入权限标识"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="newFormInline.isButton === false" :gutter="30">
|
||||
<template v-if="newFormInline.menuType == 1">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="页面路径" prop="path">
|
||||
<el-input
|
||||
v-model="newFormInline.path"
|
||||
clearable
|
||||
placeholder="请输入前端项目views文件内的页面路径"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12">
|
||||
<el-form-item label="组件名">
|
||||
<el-input
|
||||
v-model="newFormInline.routerName"
|
||||
clearable
|
||||
placeholder="请输入组件定义的name，defineOptions中的name"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
<template v-else-if="newFormInline.menuType == 2">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="路由地址" prop="path">
|
||||
<el-input
|
||||
v-model="newFormInline.path"
|
||||
clearable
|
||||
placeholder="请输入目录的路由地址以/开头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
<template v-else-if="newFormInline.menuType == 3">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="网站地址" prop="meta.frameSrc">
|
||||
<el-input
|
||||
v-model="newFormInline.meta.frameSrc"
|
||||
clearable
|
||||
placeholder="请输入外部网站地址或者内部网站相对地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
|
||||
<template v-else-if="newFormInline.menuType == 4">
|
||||
<re-col :value="24" :xs="24" :sm="24">
|
||||
<el-form-item label="网站地址" prop="routerName">
|
||||
<!-- 这里需要做拦截处理 -->
|
||||
<el-input
|
||||
v-model="newFormInline.routerName"
|
||||
clearable
|
||||
placeholder="请输入外部网站地址，必须以https://或者http://开头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</template>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="显示">
|
||||
<el-switch
|
||||
v-model="newFormInline.meta.showLink"
|
||||
inline-prompt
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-text="显示"
|
||||
inactive-text="隐藏"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.status"
|
||||
inline-prompt
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number
|
||||
v-model="newFormInline.meta.rank"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemMenu"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="菜单名称：" prop="menuName">
|
||||
<el-input
|
||||
v-model="searchFormParams.menuName"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="searchFormParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="菜单列表"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增菜单
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 32 }"
|
||||
align-whole="center"
|
||||
row-key="id"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
|
||||
import { message } from "@/utils/message";
|
||||
import { transferToStandardRouterData } from "./menuLogic";
|
||||
import {
|
||||
MenuDTO,
|
||||
MenuRequest,
|
||||
getMenuListApi,
|
||||
addMenuApi,
|
||||
deleteMenuApi,
|
||||
getMenuInfoApi,
|
||||
updateMenuApi,
|
||||
MenuDetailDTO
|
||||
} from "@/api/system/menu";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h, computed } from "vue";
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import { IconifyIconOnline } from "@/components/ReIcon";
|
||||
|
||||
export function useHook() {
|
||||
const searchFormParams = reactive({
|
||||
menuName: "",
|
||||
status: null
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const originalDataList = ref([]);
|
||||
const dataList = computed(() => {
|
||||
let filterDataList = [...originalDataList.value];
|
||||
if (!isAllEmpty(searchFormParams.menuName)) {
|
||||
// 前端搜索菜单名称
|
||||
filterDataList = filterDataList.filter((item: MenuDTO) =>
|
||||
item.menuName.includes(searchFormParams.menuName)
|
||||
);
|
||||
}
|
||||
if (!isAllEmpty(searchFormParams.status)) {
|
||||
// 前端搜索状态
|
||||
filterDataList = filterDataList.filter(
|
||||
(item: MenuDTO) => item.status === searchFormParams.status
|
||||
);
|
||||
}
|
||||
// 处理成树结构
|
||||
return [...handleTree(filterDataList)];
|
||||
});
|
||||
const loading = ref(true);
|
||||
const { tagStyle } = usePublicHooks();
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "菜单名称",
|
||||
prop: "menuName",
|
||||
width: 200,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "页面路径",
|
||||
prop: "path",
|
||||
minWidth: 170
|
||||
},
|
||||
{
|
||||
label: "路由名称",
|
||||
prop: "routerName",
|
||||
width: 160,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
label: "图标",
|
||||
prop: "row.icon",
|
||||
minWidth: 40,
|
||||
cellRenderer: ({ row }) => (
|
||||
<div class="flex justify-center">
|
||||
<IconifyIconOnline icon={row.icon} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(row.status)}>
|
||||
{row.status === 1 ? "启用" : "停用"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
prop: "isButton",
|
||||
minWidth: 100,
|
||||
formatter: ({ isButton }) => (isButton ? "按钮" : "菜单")
|
||||
},
|
||||
{
|
||||
label: "子类型",
|
||||
prop: "menuTypeStr",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "rank",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 200,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function resetForm(formEl) {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
|
||||
const { data } = await getMenuListApi({ isButton: null }).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
originalDataList.value = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试用例
|
||||
* 1.添加外链跳转菜单
|
||||
* 2.添加iframe菜单 外链+内链
|
||||
* 3.添加目录
|
||||
* 4.添加一级菜单
|
||||
* 5.添加按钮
|
||||
* 6.iframe和外链跳转不允许添加按钮
|
||||
* 7.只允许目录添加子菜单
|
||||
* 8.基于目录 测试以上1~5的步骤
|
||||
* @param row dialog表单数据
|
||||
* @param done
|
||||
*/
|
||||
async function handleAdd(row, done) {
|
||||
await addMenuApi(row).then(() => {
|
||||
message(`您新增了菜单:${row.menuName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试用例
|
||||
* 1.编辑页面/目录/iframe/外链/按钮的数据
|
||||
* 2.更换父级菜单
|
||||
* 3.不允许改变类型(会导致逻辑变复杂，比如改变类型需要考虑子节点)
|
||||
* @param row
|
||||
* @param done
|
||||
*/
|
||||
async function handleUpdate(row, done) {
|
||||
await updateMenuApi(row.id, row).then(() => {
|
||||
message(`您更新了菜单:${row.menuName}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 关闭弹框
|
||||
done();
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
async function openDialog(title = "新增", row?: MenuDTO) {
|
||||
// 下拉选项需要排除掉按钮
|
||||
const { data } = await getMenuListApi({ isButton: false });
|
||||
const optionTree = setDisabledForTreeOptions(handleTree(data), "status");
|
||||
|
||||
let meta = undefined;
|
||||
if (title === "编辑") {
|
||||
row = (await getMenuInfoApi(row.id + "")).data;
|
||||
meta = (row as MenuDetailDTO).meta;
|
||||
}
|
||||
|
||||
console.log(row);
|
||||
|
||||
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
|
||||
addDialog({
|
||||
title: `${title}菜单`,
|
||||
props: {
|
||||
formInline: {
|
||||
id: row?.id ?? 0,
|
||||
parentId: row?.parentId ?? 0,
|
||||
menuName: row?.menuName ?? "",
|
||||
routerName: row?.routerName ?? "",
|
||||
path: row?.path ?? "",
|
||||
isButton: row?.isButton,
|
||||
permission: row?.permission ?? "",
|
||||
menuType: row?.menuType ?? undefined,
|
||||
status: row?.status ?? 1,
|
||||
meta: meta ?? { rank: 0 }
|
||||
},
|
||||
higherMenuOptions: [...optionTree]
|
||||
},
|
||||
width: "60%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as MenuRequest;
|
||||
|
||||
// 将菜单的数据转换为标准的路由数据
|
||||
transferToStandardRouterData(curData, optionTree);
|
||||
|
||||
console.log(curData);
|
||||
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
handleAdd(curData, done);
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
handleUpdate(curData, done);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await deleteMenuApi(row.id).then(() => {
|
||||
message(`您删除了${row.menuName}`, { type: "success" });
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { isUrl } from "@pureadmin/utils";
|
||||
import { MenuRequest } from "@/api/system/menu";
|
||||
import { getNodeByUniqueId } from "@/utils/tree";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
/**
|
||||
* 因为动态路由的逻辑基本上完全依赖前端
|
||||
* 所以需要将菜单的数据转换为标准的路由数据
|
||||
* @param data
|
||||
* @param menuTree
|
||||
*/
|
||||
export function transferToStandardRouterData(data: MenuRequest, menuTree: any) {
|
||||
// 将菜单名称赋值给meta.title
|
||||
if (data.menuName && data.meta) {
|
||||
data.meta.title = data.menuName;
|
||||
}
|
||||
|
||||
// 如果是页面和目录的话 path如果没有/开头 就自动加上
|
||||
if (data.menuType == 1 || data.menuType == 2) {
|
||||
if (data.path && !data.path.startsWith("/")) {
|
||||
data.path = `/${data.path}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果当前菜单是父菜单的唯一节点 记得将当前菜单的showParent=true
|
||||
const parentMenu = getNodeByUniqueId(menuTree, data.parentId);
|
||||
// 按钮不需要显示父菜单
|
||||
if (parentMenu && !data.isButton) {
|
||||
if (!parentMenu.children || parentMenu.children.length === 0) {
|
||||
data.meta.showParent = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是内嵌iframe的话
|
||||
if (data.menuType == 3) {
|
||||
//检测meta.frameSrc是否是以Http/Https开头的 如果不是的话自动补全
|
||||
if (data.menuType == 3 && data.meta && data.meta.frameSrc) {
|
||||
if (!isUrl(data.meta.frameSrc)) {
|
||||
// 如果链接是/开头 则认为是内部链接, 打上内部链接标记即可
|
||||
if (data.meta.frameSrc.startsWith("/")) {
|
||||
data.meta.isFrameSrcInternal = true;
|
||||
} else {
|
||||
data.meta.frameSrc = `http://${data.meta.frameSrc}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const pinyinStr = CommonUtils.toPinyin(data.menuName);
|
||||
data.path = `/${pinyinStr}IframeLink`;
|
||||
data.routerName = `${pinyinStr}IframeRouter`;
|
||||
}
|
||||
|
||||
// 如果是外链跳转的话 需要自动设置他的path 按照外链跳转的规则 必须设置成/external
|
||||
// 详见https://github.com/pure-admin/vue-pure-admin/issues/664
|
||||
// 这里我们直接以菜单名转拼音的方式生成
|
||||
if (data.meta && data.menuType == 4) {
|
||||
if (!isUrl(data.routerName)) {
|
||||
data.routerName = `http://${data.routerName}`;
|
||||
}
|
||||
data.path = `/external`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { isPhone, isEmail } from "@pureadmin/utils";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error("请输入正确的手机号码格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback();
|
||||
} else if (!isEmail(value)) {
|
||||
callback(new Error("请输入正确的邮箱格式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
Reference in New Issue
Block a user