|
@@ -1,180 +1,264 @@
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
|
|
+import type { MenuEntity } from '@vben/types';
|
|
|
|
|
+
|
|
|
import { computed, ref } from 'vue';
|
|
import { computed, ref } from 'vue';
|
|
|
|
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
|
|
|
|
|
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
|
+
|
|
|
import { useVbenForm, z } from '#/adapter/form';
|
|
import { useVbenForm, z } from '#/adapter/form';
|
|
|
-// import { getCustomerDetailApi } from '#/api/customer-manage';
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ addMenuApi,
|
|
|
|
|
+ editMenuApi,
|
|
|
|
|
+ getMenuDetailApi,
|
|
|
|
|
+ getMenuListApi,
|
|
|
|
|
+} from '#/api/menu';
|
|
|
|
|
|
|
|
|
|
+const emit = defineEmits(['finish']);
|
|
|
const data = ref();
|
|
const data = ref();
|
|
|
|
|
+const formType = ref<'create' | 'detail' | 'edit'>('create');
|
|
|
|
|
+const parentMenus = ref<{ label: string; value: number }[]>([]);
|
|
|
|
|
+
|
|
|
|
|
+const titleMap = {
|
|
|
|
|
+ create: '新增菜单',
|
|
|
|
|
+ detail: '菜单详情',
|
|
|
|
|
+ edit: '编辑菜单',
|
|
|
|
|
+} as const;
|
|
|
|
|
|
|
|
-const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
|
|
|
|
|
|
|
+const getTitle = computed(() => titleMap[formType.value]);
|
|
|
|
|
+
|
|
|
|
|
+// 获取父级菜单列表
|
|
|
|
|
+async function fetchParentMenus() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await getMenuListApi({
|
|
|
|
|
+ pageindex: 1,
|
|
|
|
|
+ rows: 1000,
|
|
|
|
|
+ menu_type: 1, // 只获取目录类型的菜单作为父级
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (res && res.Data) {
|
|
|
|
|
+ parentMenus.value = res.Data.map((item: MenuEntity) => ({
|
|
|
|
|
+ label: item.menu_name,
|
|
|
|
|
+ value: item.menu_id,
|
|
|
|
|
+ }));
|
|
|
|
|
+ // 添加一个根菜单选项
|
|
|
|
|
+ parentMenus.value.unshift({ label: '根菜单', value: 0 });
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('获取父级菜单失败', error);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
const [BaseForm, baseFormApi] = useVbenForm({
|
|
const [BaseForm, baseFormApi] = useVbenForm({
|
|
|
showDefaultActions: false,
|
|
showDefaultActions: false,
|
|
|
// 所有表单项共用,可单独在表单内覆盖
|
|
// 所有表单项共用,可单独在表单内覆盖
|
|
|
commonConfig: {
|
|
commonConfig: {
|
|
|
- labelWidth: 120,
|
|
|
|
|
|
|
+ labelWidth: 130,
|
|
|
// 所有表单项
|
|
// 所有表单项
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
class: 'w-full',
|
|
class: 'w-full',
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
|
|
+ wrapperClass: 'grid-cols-1 lg:grid-cols-2',
|
|
|
schema: [
|
|
schema: [
|
|
|
- // { title: '用户名称', field: 'usersname' },
|
|
|
|
|
- // { title: '用户性质', field: 'usersnature' },
|
|
|
|
|
- // { title: '用户证件号码', field: 'usersidcardnumber' },
|
|
|
|
|
- // { title: '用户开户银行名称', field: 'usersbankname' },
|
|
|
|
|
- // { title: '用户开户银行账号', field: 'usersbanknumber' },
|
|
|
|
|
- // { title: '用户手机号', field: 'usersphone' },
|
|
|
|
|
- // { title: '用户邮箱', field: 'usersemail' },
|
|
|
|
|
- // { title: '用户地址', field: 'usersaddress' },
|
|
|
|
|
- // { title: '用户联系手机号', field: 'userscontactphone' },
|
|
|
|
|
- // { title: '用户联系邮箱', field: 'userscontactemail' },
|
|
|
|
|
- // { title: '用户联系地址', field: 'userscontactaddress' },
|
|
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'usersname',
|
|
|
|
|
- label: '用户名称',
|
|
|
|
|
|
|
+ fieldName: 'menu_name',
|
|
|
|
|
+ label: '菜单名称',
|
|
|
|
|
+ rules: z.string().min(1, '请输入菜单名称'),
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户名称',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入菜单名称',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户名称' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- component: 'Input',
|
|
|
|
|
- fieldName: 'usersnature',
|
|
|
|
|
- label: '用户性质',
|
|
|
|
|
|
|
+ component: 'Select',
|
|
|
|
|
+ fieldName: 'menu_type',
|
|
|
|
|
+ label: '菜单类型',
|
|
|
|
|
+ rules: z.number().min(1, '请选择菜单类型'),
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户性质',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请选择菜单类型',
|
|
|
|
|
+ options: [
|
|
|
|
|
+ { label: '目录', value: 1 },
|
|
|
|
|
+ { label: '菜单', value: 2 },
|
|
|
|
|
+ { label: '按钮', value: 3 },
|
|
|
|
|
+ { label: 'API接口', value: 4 },
|
|
|
|
|
+ ],
|
|
|
},
|
|
},
|
|
|
- rules: z.number().min(1, { message: '请输入用户性质' }),
|
|
|
|
|
},
|
|
},
|
|
|
|
|
+ // {
|
|
|
|
|
+ // component: 'Input',
|
|
|
|
|
+ // fieldName: 'menu_sort',
|
|
|
|
|
+ // label: '菜单分类',
|
|
|
|
|
+ // componentProps: {
|
|
|
|
|
+ // placeholder: '请输入菜单分类',
|
|
|
|
|
+ // },
|
|
|
|
|
+ // },
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'usersidcardnumber',
|
|
|
|
|
- label: '用户证件号码',
|
|
|
|
|
|
|
+ fieldName: 'menu_key',
|
|
|
|
|
+ label: '菜单标识',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户证件号码',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入菜单标识',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户证件号码' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- component: 'Input',
|
|
|
|
|
- fieldName: 'usersbankname',
|
|
|
|
|
- label: '用户开户银行名称',
|
|
|
|
|
|
|
+ component: 'Select',
|
|
|
|
|
+ fieldName: 'parent_id',
|
|
|
|
|
+ label: '父级菜单',
|
|
|
|
|
+ defaultValue: 0,
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户开户银行名称',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请选择父级菜单',
|
|
|
|
|
+ options: parentMenus,
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- component: 'Input',
|
|
|
|
|
- fieldName: 'usersbanknumber',
|
|
|
|
|
- label: '用户开户银行账号',
|
|
|
|
|
|
|
+ component: 'InputNumber',
|
|
|
|
|
+ fieldName: 'order_num',
|
|
|
|
|
+ label: '显示顺序',
|
|
|
|
|
+ defaultValue: 0,
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户开户银行账号',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入显示顺序',
|
|
|
|
|
+ min: 0,
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户开户银行账号' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'usersphone',
|
|
|
|
|
- label: '用户手机号',
|
|
|
|
|
|
|
+ fieldName: 'path',
|
|
|
|
|
+ label: '路径',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户手机号',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入路径',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户手机号' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'usersemail',
|
|
|
|
|
- label: '用户邮箱',
|
|
|
|
|
|
|
+ fieldName: 'component',
|
|
|
|
|
+ label: '组件',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户邮箱',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入组件',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户邮箱' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'usersaddress',
|
|
|
|
|
- label: '用户地址',
|
|
|
|
|
|
|
+ fieldName: 'icon',
|
|
|
|
|
+ label: '图标',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户地址',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入图标',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户地址' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'userscontactphone',
|
|
|
|
|
- label: '用户联系手机号',
|
|
|
|
|
|
|
+ fieldName: 'perms',
|
|
|
|
|
+ label: '权限标识',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户联系手机号',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ placeholder: '请输入权限标识',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户联系手机号' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- component: 'Input',
|
|
|
|
|
- fieldName: 'userscontactemail',
|
|
|
|
|
- label: '用户联系邮箱',
|
|
|
|
|
|
|
+ component: 'Switch',
|
|
|
|
|
+ fieldName: 'visible',
|
|
|
|
|
+ label: '菜单状态',
|
|
|
|
|
+ defaultValue: 0,
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户联系邮箱',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ activeValue: 0,
|
|
|
|
|
+ inactiveValue: 1,
|
|
|
|
|
+ activeText: '显示',
|
|
|
|
|
+ inactiveText: '隐藏',
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ component: 'Switch',
|
|
|
|
|
+ fieldName: 'no_cache',
|
|
|
|
|
+ label: '是否缓存',
|
|
|
|
|
+ defaultValue: 0,
|
|
|
|
|
+ componentProps: {
|
|
|
|
|
+ activeValue: 1,
|
|
|
|
|
+ inactiveValue: 0,
|
|
|
|
|
+ activeText: '是',
|
|
|
|
|
+ inactiveText: '否',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户联系邮箱' }),
|
|
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
component: 'Input',
|
|
component: 'Input',
|
|
|
- fieldName: 'userscontactaddress',
|
|
|
|
|
- label: '用户联系地址',
|
|
|
|
|
|
|
+ fieldName: 'remark',
|
|
|
|
|
+ label: '备注',
|
|
|
componentProps: {
|
|
componentProps: {
|
|
|
- placeholder: '请输入用户联系地址',
|
|
|
|
|
- allowClear: true,
|
|
|
|
|
|
|
+ type: 'textarea',
|
|
|
|
|
+ placeholder: '请输入备注',
|
|
|
|
|
+ rows: 3,
|
|
|
|
|
+ },
|
|
|
|
|
+ // @ts-ignore wrapperProps属性在运行时有效,但类型定义中缺失
|
|
|
|
|
+ wrapperProps: {
|
|
|
|
|
+ class: 'col-span-2',
|
|
|
},
|
|
},
|
|
|
- rules: z.string().min(1, { message: '请输入用户联系地址' }),
|
|
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
const [Modal, modalApi] = useVbenModal({
|
|
|
|
|
+ class: 'w-8/12',
|
|
|
onCancel() {
|
|
onCancel() {
|
|
|
modalApi.close();
|
|
modalApi.close();
|
|
|
},
|
|
},
|
|
|
async onConfirm() {
|
|
async onConfirm() {
|
|
|
// 校验输入的数据
|
|
// 校验输入的数据
|
|
|
|
|
+ const formValues = await baseFormApi.getValues();
|
|
|
const validate = await baseFormApi.validate();
|
|
const validate = await baseFormApi.validate();
|
|
|
if (!validate.valid) {
|
|
if (!validate.valid) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- modalApi.close();
|
|
|
|
|
- // const values = await baseFormApi.getValues();
|
|
|
|
|
|
|
+ try {
|
|
|
|
|
+ const apiMap = {
|
|
|
|
|
+ create: () => addMenuApi(formValues as unknown as MenuEntity),
|
|
|
|
|
+ edit: () =>
|
|
|
|
|
+ editMenuApi({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ 'menu_id.value': data.value.row.menu_id,
|
|
|
|
|
+ } as unknown as MenuEntity),
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
- // console.log(Object.keys(values));
|
|
|
|
|
|
|
+ if (formType.value === 'detail') {
|
|
|
|
|
+ modalApi.close();
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ await apiMap[formType.value]();
|
|
|
|
|
+ ElMessage.success('操作成功');
|
|
|
|
|
+ emit('finish');
|
|
|
|
|
+ modalApi.close();
|
|
|
|
|
+ } catch {}
|
|
|
},
|
|
},
|
|
|
async onOpenChange(isOpen) {
|
|
async onOpenChange(isOpen) {
|
|
|
if (isOpen) {
|
|
if (isOpen) {
|
|
|
data.value = modalApi.getData();
|
|
data.value = modalApi.getData();
|
|
|
|
|
|
|
|
- if (data.value.create) {
|
|
|
|
|
|
|
+ formType.value = data.value.formType;
|
|
|
|
|
+
|
|
|
|
|
+ // 获取父级菜单列表
|
|
|
|
|
+ await fetchParentMenus();
|
|
|
|
|
+
|
|
|
|
|
+ baseFormApi.setState({
|
|
|
|
|
+ commonConfig: { disabled: formType.value === 'detail' },
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (data.value.formType === 'create') {
|
|
|
|
|
+ // 新增时设置默认值
|
|
|
|
|
+ baseFormApi.setFieldValue('visible', 0);
|
|
|
|
|
+ baseFormApi.setFieldValue('no_cache', 0);
|
|
|
|
|
+ baseFormApi.setFieldValue('parent_id', 0);
|
|
|
|
|
+ baseFormApi.setFieldValue('order_num', 0);
|
|
|
|
|
+ baseFormApi.setFieldValue('menu_type', 1);
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- // modalApi.setState({ loading: true });
|
|
|
|
|
- // const detailData = await getCustomerDetailApi({
|
|
|
|
|
- // usersid: data.value.row.usersid,
|
|
|
|
|
- // });
|
|
|
|
|
- // baseFormApi.setValues(detailData);
|
|
|
|
|
|
|
+ modalApi.setState({ loading: true });
|
|
|
|
|
+ const detailData = await getMenuDetailApi({
|
|
|
|
|
+ menu_id: data.value.row.menu_id,
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ baseFormApi.setValues(detailData);
|
|
|
} catch {
|
|
} catch {
|
|
|
// console.log(error);
|
|
// console.log(error);
|
|
|
}
|
|
}
|