gasInjection-project/src/views/system/menuModalApp/MenuDrawer.vue

<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="adaptiveWidth" :title="getTitle" @ok="handleSubmit">
      <BasicForm @register="registerForm" class="menuForm" />
    </BasicDrawer>
  </template>
  <script lang="ts" setup>
    import { ref, computed, unref, useAttrs } from 'vue';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { formSchema, ComponentTypes } from './menu.data';
    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
    import { list, saveOrUpdateMenu } from './menu.api';
    import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
    // 声明Emits
    const emit = defineEmits(['success', 'register']);
    const { adaptiveWidth } = useDrawerAdaptiveWidth();
    const attrs = useAttrs();
    const isUpdate = ref(true);
    const menuType = ref(0);
    const isButton = (type) => type === 2;
    const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
      labelCol: {
        md: { span: 4 },
        sm: { span: 6 },
      },
      wrapperCol: {
        md: { span: 20 },
        sm: { span: 18 },
      },
      schemas: formSchema,
      showActionButtonGroup: false,
    });
  
    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      await resetFields();
      setDrawerProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;
      menuType.value = data?.record?.menuType;
  
      //获取下拉树信息
      const treeData = await list({kind: 3});
      updateSchema([
        {
          field: 'parentId',
          componentProps: { treeData },
        },
        {
          field: 'name',
          label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称',
        },
        {
          field: 'url',
          required: !isButton(unref(menuType)),
          componentProps: {
            onChange: (e) => onUrlChange(e.target.value),
          },
        },
      ]);
  
      // 无论新增还是编辑，都可以设置表单值
      if (typeof data.record === 'object') {
        let values = { ...data.record };
        setFieldsValue(values);
        onUrlChange(values.url);
      }
      //禁用表单
      setProps({ disabled: !attrs.showFooter });
    });
    //获取弹窗标题
    const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
    //提交事件
    async function handleSubmit() {
      try {
        const values = await validate();
        // iframe兼容
        if (ComponentTypes.IFrame === values.component) {
          values.component = values.frameSrc;
        }
        setDrawerProps({ confirmLoading: true });
        //提交表单
        await saveOrUpdateMenu({...values, kind: 3}, unref(isUpdate));
        closeDrawer();
        emit('success');
      } finally {
        setDrawerProps({ confirmLoading: false });
      }
    }
  
    /** url 变化时，动态设置组件名称placeholder */
    function onUrlChange(url) {
      let placeholder = '';
      if (url != null && url != '') {
        if (url.startsWith('/')) {
          url = url.substring(1);
        }
        url = url.replaceAll('/', '-');
        // 特殊标记
        url = url.replaceAll(':', '@');
        placeholder = `${url}`;
      } else {
        placeholder = '请输入组件名称';
      }
      updateSchema([{ field: 'componentName', componentProps: { placeholder } }]);
    }
  </script>