resource-admin/src/views/menu-manage/menu-operation.tsx

import {
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  NButton,
  NTreeSelect,
  useMessage,
  NRadioGroup,
  NRadio,
  NCascader,
  NGrid,
  NFormItemGi,
  NInputNumber,
  useDialog
} from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { sysMenuSave, sysMenuUpdate } from './api'
export default defineComponent({
  name: 'city-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    menuList: {
      type: Array,
      default: () => []
    },
    applyList: {
      type: Array as PropType<any>,
      default: () => []
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { emit }) {
    // parentId 上级菜单
    // path 路径
    // name 名称
    // component 组件名
    // icon 图标
    // type 菜单 | 按钮
    // permission 权限
    // parentPermission 高亮路径
    // sort 菜单排序
    // hidden 是否隐藏
    // linkPath 外链地址
    const forms = reactive({
      appId: null,
      parentId: null,
      type: 0,
      name: null,
      path: null,
      icon: null,
      component: null,
      permission: null,
      parentPermission: null,
      linkPath: null,
      sort: 0,
      hidden: 0
    })

    const menuList = ref<any[]>([{ id: '0', name: '根结点', isLeaf: true }, ...props.menuList])
    const btnLoading = ref(false)

    const formsRef = ref()
    const message = useMessage()

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        try {
          btnLoading.value = true

          if (props.type === 'add') {
            await sysMenuSave({
              ...forms
            })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await sysMenuUpdate({ ...forms, id: props.data.id })
            message.success('修改成功')
          }
          emit('close')
          emit('getList')
        } catch {}
        btnLoading.value = false
      })
    }

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.appId = data.appId
        forms.parentId = data.parentId
        forms.type = Number(data.type)
        forms.name = data.name
        forms.path = data.path
        forms.icon = data.icon
        forms.component = data.component
        forms.permission = data.permission
        forms.parentPermission = data.parentPermission
        forms.linkPath = data.linkPath
        forms.sort = data.sort
        forms.hidden = data.hidden
      }
    })

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100">
          <NGrid cols={2}>
            <NFormItemGi
              label="应用分类"
              path="appId"
              rule={[
                {
                  required: true,
                  message: '请选择应用分类'
                }
              ]}
            >
              <NCascader
                v-model:value={forms.appId}
                options={props.applyList}
                showPath={true}
                allowCheckingNotLoaded={false}
                checkStrategy="child"
                valueField="id"
                labelField="appName"
                childrenField="bizApps"
                placeholder="请选择应用分类"
                expandTrigger="hover"
                clearable
              ></NCascader>
            </NFormItemGi>
            <NFormItemGi
              label="上级菜单"
              path="parentId"
              rule={[
                {
                  required: true,
                  message: '请选择上级菜单'
                }
              ]}
            >
              <NTreeSelect
                v-model:value={forms.parentId}
                placeholder="请选择上级菜单"
                checkStrategy="parent"
                options={menuList.value}
                showPath={false}
                keyField="id"
                labelField="name"
                virtualScroll
              />
            </NFormItemGi>
            <NFormItemGi
              label="菜单类型"
              path="type"
              rule={[{ required: true, message: '请选择上级菜单' }]}
            >
              <NRadioGroup v-model:value={forms.type}>
                <NSpace>
                  <NRadio value={true}>菜单</NRadio>
                  <NRadio value={false}>按钮</NRadio>
                </NSpace>
              </NRadioGroup>
            </NFormItemGi>

            <NFormItemGi
              label="菜单名称"
              path="name"
              rule={[
                {
                  required: true,
                  message: '请输入菜单名称',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                v-model:value={forms.name}
                placeholder="请输入菜单名称"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItemGi>
            {forms.type === 0 && (
              <>
                <NFormItemGi
                  label="路由路径"
                  path="path"
                  rule={[
                    {
                      required: true,
                      message: '请输入路由路径',
                      trigger: ['blur', 'input']
                    }
                  ]}
                >
                  <NInput
                    v-model:value={forms.path}
                    placeholder="请输入路由路径"
                    clearable
                    maxlength={100}
                  ></NInput>
                </NFormItemGi>
                <NFormItemGi label="菜单图标" path="icon">
                  <NInput
                    v-model:value={forms.icon}
                    placeholder="请输入菜单图标"
                    clearable
                    maxlength={100}
                  ></NInput>
                </NFormItemGi>
                <NFormItemGi
                  label="组件名称"
                  path="component"
                  rule={[
                    {
                      required: true,
                      message: '请输入组件名称',
                      trigger: ['blur', 'input']
                    }
                  ]}
                >
                  <NInput
                    v-model:value={forms.component}
                    placeholder="请输入组件名称"
                    clearable
                    maxlength={100}
                  ></NInput>
                </NFormItemGi>
                <NFormItemGi label="链接地址" path="linkPath">
                  <NInput
                    v-model:value={forms.linkPath}
                    placeholder="外链/内嵌时链接地址（http://www.colexiu.com）"
                    clearable
                    maxlength={100}
                  ></NInput>
                </NFormItemGi>
                <NFormItemGi label="高亮路径" path="parentPermission">
                  <NInput
                    v-model:value={forms.parentPermission}
                    placeholder="子页面高亮路径"
                    clearable
                    maxlength={100}
                  ></NInput>
                </NFormItemGi>
              </>
            )}
            <NFormItemGi
              label="权限标识"
              path="permission"
              rule={[
                {
                  required: true,
                  message: '请输入权限标识',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                v-model:value={forms.permission}
                placeholder="请输入权限标识"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItemGi>
            <NFormItemGi label="菜单排序" path="sort">
              <NInputNumber
                v-model:value={forms.sort}
                placeholder="请输入菜单排序"
                clearable
              ></NInputNumber>
            </NFormItemGi>
            {forms.type === 0 && (
              <NFormItemGi label="是否隐藏" path="hidden">
                <NRadioGroup v-model:value={forms.hidden}>
                  <NSpace>
                    <NRadio value={1}>是</NRadio>
                    <NRadio value={0}>否</NRadio>
                  </NSpace>
                </NRadioGroup>
              </NFormItemGi>
            )}
          </NGrid>
        </NForm>

        <NSpace justify="end">
          <NButton type="default" onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton type="primary" onClick={() => onSubmit()} loading={btnLoading.value}>
            保存
          </NButton>
        </NSpace>
      </div>
    )
  }
})