feat(projects): page manage_user

2025-12-25 22:30:19 +08:00 · 2024-01-28 16:24:43 +08:00
parent a19f895cd9
commit 8a170eeebd
11 changed files with 703 additions and 52 deletions
--- a/src/views/manage/user/modules/user-operate-drawer.vue
+++ b/src/views/manage/user/modules/user-operate-drawer.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { fetchGetAllRoles } from '@/service/api';
+import { $t } from '@/locales';
+import { userGenderOptions, userStatusOptions } from '@/constants/business';
+
+defineOptions({
+  name: 'UserOperateDrawer'
+});
+
+/**
+ * the type of operation
+ *
+ * - add: add user
+ * - edit: edit user
+ */
+export type OperateType = 'add' | 'edit';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.User | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.user.addUser'),
+    edit: $t('page.manage.user.editUser')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemManage.User,
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'userStatus'
+>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    userName: '',
+    userGender: null,
+    nickName: '',
+    userPhone: '',
+    userEmail: '',
+    userRoles: [],
+    userStatus: null
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  userName: defaultRequiredRule,
+  userStatus: defaultRequiredRule
+};
+
+/** the enabled role options */
+const roleOptions = ref<CommonType.Option<string>[]>([]);
+
+async function getRoleOptions() {
+  const { error, data } = await fetchGetAllRoles();
+
+  if (!error) {
+    const options = data.map(item => ({
+      label: item.roleName,
+      value: item.roleCode
+    }));
+
+    // the mock data does not have the roleCode, so fill it
+    // if the real request, remove the following code
+    const userRoleOptions = model.userRoles.map(item => ({
+      label: item,
+      value: item
+    }));
+    // end
+
+    roleOptions.value = [...userRoleOptions, ...options];
+  }
+}
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+    getRoleOptions();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem :label="$t('page.manage.user.userName')" path="userName">
+          <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userGender')" path="userGender">
+          <NRadioGroup v-model:value="model.userGender">
+            <NRadio v-for="item in userGenderOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.nickName')" path="nickName">
+          <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userPhone')" path="userPhone">
+          <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userEmail')" path="email">
+          <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userStatus')" path="userStatus">
+          <NRadioGroup v-model:value="model.userStatus">
+            <NRadio v-for="item in userStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.user.userRole')" path="roles">
+          <NSelect
+            v-model:value="model.userRoles"
+            multiple
+            :options="roleOptions"
+            :placeholder="$t('page.manage.user.form.userRole')"
+          />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>