health.admin/src/components/UserEdit.vue

<script setup lang="ts">
import { type UserModel }                                           from '@/model/system.model';
import { branchMethod, editUserMethod, rolesAllMethod, userMethod } from '@/request/api/system.api';
import { useRequest }                                               from 'alova/client';
import { type VxeFormListeners, type VxeFormProps }                 from 'vxe-pc-ui';


type FormModel = Partial<UserModel>

const defaultModel = {};

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

const { data: branch, loading: branchLoading } = useRequest(branchMethod);
const { data: roles, loading: rolesLoading } = useRequest(rolesAllMethod);
const { loading, send: load } = useRequest(userMethod, { immediate: false, initialData: props.data ?? defaultModel })
  .onSuccess(({ data }) => {
    formProps.data = { ...data };
  });
const { loading: submitting, send: submit } = useRequest(editUserMethod, { immediate: false })
  .onSuccess(({ data }) => {
    emits('submit');
  });

const formProps = reactive<VxeFormProps<FormModel>>({
  titleWidth: 120,
  titleAlign: 'right',
  titleColon: true,
  titleAsterisk: true,
  data: { ...props.data },
  items: [
    { field: 'userName', title: '系统账号', span: 24, itemRender: { name: 'VxeInput' } },
    {
      field: 'password',
      title: '密码',
      span: 24,
      itemRender: { name: 'VxeInput', props: { type: 'password' } },
      visible: !props.data?.userId,
    },
    {
      field: 'roleIds', title: '角色', span: 24, itemRender: {
        name: 'VxeSelect', props: {
          multiple: true, clearable: true,
          loading: computed(() => rolesLoading.value),
          options: computed(() => roles.value),
          optionProps: { label: 'roleName', value: 'roleId' },
        },
      },
    },
    { field: 'nickName', title: '姓名', span: 24, itemRender: { name: 'VxeInput' } },
    {
      field: 'deptId', title: '医院 / 科室', span: 24, itemRender: {
        name: 'VxeTreeSelect',
        props: {
          loading: computed(() => branchLoading.value),
          options: computed(() => branch.value),
          optionProps: { value: 'id' },
        },
      },
    },
    { field: 'jobnumber', title: '工号', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'phonenumber', title: '手机号码', span: 24, itemRender: { name: 'VxeInput', props: { maxlength: 11 } } },
    { align: 'center', span: 24, slots: { default: 'active' } },
  ],
  rules: {
    userName: [
      { required: true, message: '请输入系统账号' },
    ],
    password: [
      { required: !props.data?.userId, validator: 'ValidPassword' },
    ],
    roleIds: [
      { required: true, message: '请选择角色' },
    ],
    nickName: [
      { required: true, message: '请输入姓名' },
    ],
    deptId: [
      { required: true, message: '请选择医院 / 科室' },
    ],
    jobnumber: [
      { required: true, message: '请输入工号' },
    ],
    phonenumber: [
      { required: true, validator: 'ValidMobile' },
    ],
  },
});
const formEmits: VxeFormListeners<FormModel> = {
  submit({ data }) { submit(data); },
  reset() { formProps.data = { ...props.data }; },
};

onBeforeMount(() => {
  if ( props.data?.userId ) load(props.data);
});
</script>
<template>
  <vxe-form v-bind="formProps" v-on="formEmits" :loading>
    <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"></style>