97 lines
3.3 KiB
Vue
97 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import ReCol from '@/components/MyCol';
|
|
import { formRules } from '@/views/system/menu/utils/columns';
|
|
import IconSelect from '@/components/SelectIcon/Select.vue';
|
|
import Segmented from '@/components/Segmented';
|
|
import { menuTypeOptions } from '@/enums';
|
|
import { FormProps } from '@/views/system/menu/utils/types';
|
|
|
|
const props = withDefaults(defineProps<FormProps>(), {
|
|
formInline: () => ({}),
|
|
});
|
|
|
|
const ruleFormRef = ref();
|
|
const newFormInline = ref(props.formInline);
|
|
defineExpose({ menuFormRef: ruleFormRef });
|
|
</script>
|
|
|
|
<template>
|
|
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
|
|
<el-row :gutter="30">
|
|
<re-col>
|
|
<el-form-item label="菜单类型">
|
|
<Segmented v-model="newFormInline.menuType" :options="menuTypeOptions" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col>
|
|
<el-form-item label="上级菜单">
|
|
<el-cascader
|
|
v-model="newFormInline.parentId"
|
|
:options="newFormInline.higherMenuOptions"
|
|
:props="{ value: 'id', label: 'title', emitPath: false, checkStrictly: true }"
|
|
class="w-full"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择上级菜单"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<span>{{ data.title }}</span>
|
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
</template>
|
|
</el-cascader>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="菜单名称" prop="title">
|
|
<el-input v-model="newFormInline.title" clearable placeholder="请输入菜单名称" />
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="路由名称" prop="name">
|
|
<el-input v-model="newFormInline.name" clearable placeholder="请输入路由名称" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="路由路径" prop="path">
|
|
<el-input v-model="newFormInline.path" clearable placeholder="请输入路由路径" />
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col v-show="newFormInline.menuType === 0" :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="组件路径">
|
|
<el-input v-model="newFormInline.component" clearable placeholder="请输入组件路径" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item v-model="newFormInline.rank" label="菜单排序" prop="rank">
|
|
<el-input-number v-model="newFormInline.rank" :max="9999" :min="1" class="!w-full" controls-position="right" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="菜单图标" prop="icon">
|
|
<IconSelect :form-inline="newFormInline" class="w-full" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col v-show="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="链接地址" prop="frameSrc">
|
|
<el-input v-model="newFormInline.frameSrc" clearable placeholder="请输入 iframe 链接地址" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item label="是否显示">
|
|
<el-switch v-model="newFormInline.visible" active-text="开启" inactive-text="隐藏" inline-prompt style="
|
|
|
|
--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
|
|
</el-form-item>
|
|
</re-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|