health.admin/src/components/RoleEdit.vue

<script setup lang="ts">
import type { RoleModel }                                                 from '@/model/system.model';
import { editRoleMethod, getRoleMenusMethod, roleMethod }                 from '@/request/api/system.api';
import { useRequest }                                                     from 'alova/client';
import { type VxeFormListeners, type VxeFormProps, type VxeTreeInstance } from 'vxe-pc-ui';


type FormModel = Partial<RoleModel>

const defaultModel = {};

const props = defineProps<{ data: FormModel }>();
const emits = defineEmits<{
  submit: [ data?: RoleModel ],
}>();

const menusRef = ref<VxeTreeInstance>();
const menus = shallowRef<any[]>([]);
const selected = ref<string[]>([]);
// @ts-ignore
const { loading: menusLoading } = useRequest(() => getRoleMenusMethod(props.data), { initialData: [] }).onSuccess(
  ({ data }) => {
    menus.value = data.menus;
    nextTick(() => {
      menusRef.value?.setAllExpandNode(true);
      selected.value = [ ...data.selected ];
    });

  });
const { loading, send: load } = useRequest(roleMethod, { immediate: false, initialData: props.data ?? defaultModel })
  .onSuccess(({ data }) => {
    formProps.data = { ...data };
  });
const { loading: submitting, send: submit } = useRequest(editRoleMethod, { immediate: false }).onSuccess(({ data }) => {
  emits('submit');
});

const formProps = reactive<VxeFormProps<FormModel>>({
  titleWidth: 100,
  titleAlign: 'right',
  titleColon: true,
  data: { ...props.data },
  items: [
    { field: 'roleName', title: '角色名', span: 24, itemRender: { name: 'VxeInput' } },
    {
      field: 'dataScope', title: '数据权限', span: 24, itemRender: {
        name: 'VxeRadioGroup',
        options: [
          { label: '本人', value: '5' },
          { label: '本机构', value: '4' },
        ],
      },
    },
    { field: 'menuIds', title: '菜单权限', span: 24, slots: { default: 'menus' } },
    { align: 'center', span: 24, slots: { default: 'active' } },
  ],
  rules: {
    roleName: [ { required: true, message: '请输入角色名' } ],
    dataScope: [ { required: true, message: '请选择数据权限' } ],
  },
});
const formEmits: VxeFormListeners<FormModel> = {
  submit({ data }) { submit({ roleSort: 0, status: 0, ...data, menuIds: selected.value }); },
  reset() { formProps.data = { ...props.data }; },
};

onBeforeMount(() => {
  if ( props.data?.roleId ) load(props.data);
});
</script>
<template>
  <vxe-form class-name="role-edit-form" v-bind="formProps" v-on="formEmits" :loading>
    <template #menus>
      <vxe-tree
        ref="menusRef" :data="menus" :loading="menusLoading"
        show-checkbox v-model:checkNodeKeys="selected"
        title-field="label" value-field="id" key-field="id"
      />
    </template>
    <template #active>
      <vxe-button type="submit" status="primary" content="提交" :loading="submitting"></vxe-button>
      <vxe-button type="reset" content="重置" :disabled="submitting"></vxe-button>
    </template>
  </vxe-form>
</template>
<style scoped lang="scss">
.role-edit-form {

  :deep(.vxe-tree) {
    max-height: 400px;
  }
}
</style>