|
@@ -1,248 +0,0 @@
|
|
|
-/* eslint-disable */
|
|
|
-<script setup lang="ts">
|
|
|
-import { useAntdForm, useFormRules } from '@/hooks/common/form';
|
|
|
-import { $t } from '@/locales';
|
|
|
-import { fetchAddUser, fetchGetAllRoles, fetchGetdeptTreeList, fetchGetPostList, getDicts } from '@/service/api';
|
|
|
-import { computed, nextTick, reactive, ref, watch } from 'vue';
|
|
|
-defineOptions({
|
|
|
- name: 'UserOperateDrawer'
|
|
|
-});
|
|
|
-
|
|
|
-interface Props {
|
|
|
- /** the type of operation */
|
|
|
- operateType: AntDesign.TableOperateType;
|
|
|
- /** 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, resetFields } = useAntdForm();
|
|
|
-const { defaultRequiredRule, formRules } = useFormRules();
|
|
|
-
|
|
|
-const title = computed(() => {
|
|
|
- const titles: Record<AntDesign.TableOperateType, string> = {
|
|
|
- add: $t('page.manage.user.addUser'),
|
|
|
- edit: $t('page.manage.user.editUser')
|
|
|
- };
|
|
|
- return titles[props.operateType];
|
|
|
-});
|
|
|
-
|
|
|
-type Model = Pick<
|
|
|
- Api.SystemManage.User,
|
|
|
- 'username' | 'sex' | 'nickName' | 'phone' | 'email' | 'status' | 'deptId' | 'password' | 'postId' | 'roleId' | 'remark'
|
|
|
->;
|
|
|
-
|
|
|
-const model: Model = reactive(createDefaultModel());
|
|
|
-
|
|
|
-function createDefaultModel(): Model {
|
|
|
- return {
|
|
|
- username: '',
|
|
|
- sex: '',
|
|
|
- nickName: '',
|
|
|
- phone: '',
|
|
|
- email: '',
|
|
|
- status: '2',
|
|
|
- deptId: '',
|
|
|
- password: '',
|
|
|
- postId: '',
|
|
|
- roleId: '',
|
|
|
- remark: ''
|
|
|
- };
|
|
|
-}
|
|
|
-
|
|
|
-type RuleKey = Extract<keyof Model, 'username' | 'status'| 'nickName'| 'deptId' | 'password'| 'email' | 'phone'>;
|
|
|
-
|
|
|
-const rules: Record<RuleKey, App.Global.FormRule> = {
|
|
|
- username: defaultRequiredRule,
|
|
|
- nickName: defaultRequiredRule,
|
|
|
- deptId: defaultRequiredRule,
|
|
|
- password: defaultRequiredRule,
|
|
|
- phone: formRules.phone,
|
|
|
- email:formRules.email
|
|
|
-};
|
|
|
-
|
|
|
-/** the enabled role options */
|
|
|
-const roleOptions = ref<CommonType.Option<string>[]>([]);
|
|
|
-const userGenderOptions = ref<CommonType.Option<string>[]>([
|
|
|
- {label: "男", value: "0"},
|
|
|
- {label: "女", value: "1"},
|
|
|
- {label: "未知", value: "2"}
|
|
|
-]);
|
|
|
-const enableStatusOptions = ref<CommonType.Option<string>[]>([]);
|
|
|
-const postOptions = ref<CommonType.Option<string>[]>([]);
|
|
|
-const departOptions = ref<CommonType.Option<string>[]>([]);
|
|
|
-
|
|
|
-async function getSixOptions(){
|
|
|
- const { data } = await getDicts('sys_user_sex')
|
|
|
- userGenderOptions.value = data || []
|
|
|
-}
|
|
|
-async function getStatusOptions(){
|
|
|
- const { data } = await getDicts('sys_normal_disable')
|
|
|
- enableStatusOptions.value = data || []
|
|
|
-}
|
|
|
-async function getPostOptions(){
|
|
|
- const { data } = await fetchGetPostList({ pageSize: 1000 })
|
|
|
- const options = data?.list.map((item:any) => ({
|
|
|
- label: item.postName,
|
|
|
- value: item.postId,
|
|
|
- postCode: item.postCode
|
|
|
- }));
|
|
|
- postOptions.value = [...options] || []
|
|
|
-}
|
|
|
-async function getDeptTree(){
|
|
|
- const { data } = await fetchGetdeptTreeList()
|
|
|
- departOptions.value = data
|
|
|
-}
|
|
|
-
|
|
|
-async function getRoleOptions() {
|
|
|
- const { data } = await fetchGetAllRoles({ pageSize: 1000 });
|
|
|
- const options = data?.list.map((item:any) => ({
|
|
|
- label: item.roleName,
|
|
|
- value: item.roleId,
|
|
|
- status: item.status
|
|
|
- }));
|
|
|
- roleOptions.value = [...options];
|
|
|
-}
|
|
|
-
|
|
|
-async function handleInitModel() {
|
|
|
- Object.assign(model, createDefaultModel());
|
|
|
-
|
|
|
- if (props.operateType === 'edit' && props.rowData) {
|
|
|
- await nextTick();
|
|
|
- Object.assign(model, props.rowData);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function closeDrawer() {
|
|
|
- visible.value = false;
|
|
|
-}
|
|
|
-
|
|
|
-async function handleSubmit() {
|
|
|
- await validate();
|
|
|
- // request 新增method 是post 修改是put
|
|
|
- let method = ''
|
|
|
- if (props.operateType === 'add') {
|
|
|
- method = 'post'
|
|
|
- } else {
|
|
|
- method = 'put'
|
|
|
- }
|
|
|
- const res = await fetchAddUser(model, method)
|
|
|
- if (res.code === 200){
|
|
|
- window.$message?.success(res.msg);
|
|
|
- }
|
|
|
- closeDrawer();
|
|
|
- emit('submitted');
|
|
|
-}
|
|
|
-
|
|
|
-watch(visible, () => {
|
|
|
- if (visible.value) {
|
|
|
- handleInitModel();
|
|
|
- resetFields();
|
|
|
- getRoleOptions();
|
|
|
- getSixOptions()
|
|
|
- getStatusOptions()
|
|
|
- getPostOptions()
|
|
|
- getDeptTree()
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <AModal v-model:open="visible" :title="title" width="800px">
|
|
|
- <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ lg: 8, xs: 4 }" label-wrap class="pr-20px">
|
|
|
- <ARow wrap>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.nickName')" name="nickName">
|
|
|
- <AInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.deptId')" name="roleId">
|
|
|
- <ATreeSelect v-model:value="model.deptId" show-search :tree-data="departOptions"
|
|
|
- :fieldNames="{value: 'id', children: 'children', label: 'label'}"
|
|
|
- :placeholder="$t('page.manage.user.form.deptId')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- </ARow>
|
|
|
- <ARow wrap>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userPhone')" name="phone">
|
|
|
- <AInput v-model:value="model.phone" :placeholder="$t('page.manage.user.form.userPhone')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userEmail')" name="email">
|
|
|
- <AInput v-model:value="model.email" :placeholder="$t('page.manage.user.form.userEmail')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- </ARow>
|
|
|
- <ARow wrap>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userName')" name="username">
|
|
|
- <AInput v-model:value="model.username" :placeholder="$t('page.manage.user.form.userName')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24" v-if="props.operateType === 'add'">
|
|
|
- <AFormItem :label="$t('page.manage.user.password')" name="password" >
|
|
|
- <AInput v-model:value="model.password" :placeholder="$t('page.manage.user.form.password')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userGender')" name="sex">
|
|
|
- <ARadioGroup v-model:value="model.sex">
|
|
|
- <ARadio v-for="item in userGenderOptions" :key="item.value" :value="item.value">
|
|
|
- {{item.label }}
|
|
|
- </ARadio>
|
|
|
- </ARadioGroup>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userStatus')" name="status">
|
|
|
- <ARadioGroup v-model:value="model.status">
|
|
|
- <ARadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value">
|
|
|
- {{ item.label }}
|
|
|
- </ARadio>
|
|
|
- </ARadioGroup>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="12" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.postId')" name="postId">
|
|
|
- <ASelect v-model:value="model.postId" :options="postOptions"
|
|
|
- :placeholder="$t('page.manage.user.form.postId')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="12" :md="props.operateType === 'add'? 12: 24" :xs="24">
|
|
|
- <AFormItem :label="$t('page.manage.user.userRole')" name="roleId">
|
|
|
- <ASelect v-model:value="model.roleId" :options="roleOptions"
|
|
|
- :placeholder="$t('page.manage.user.form.userRole')" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- <ACol :span="24" :md="24" :xs="24">
|
|
|
- <AFormItem :label-col="{ lg: 4, xs: 2 }" :label="$t('page.manage.user.remark')" name="remark">
|
|
|
- <a-textarea v-model:value="model.remark" :placeholder="$t('page.manage.user.form.remark')"
|
|
|
- :auto-size="{ minRows: 2, maxRows: 5 }" allowClear/>
|
|
|
- </AFormItem>
|
|
|
- </ACol>
|
|
|
- </ARow>
|
|
|
- </AForm>
|
|
|
- <template #footer>
|
|
|
- <ASpace :size="16">
|
|
|
- <AButton @click="closeDrawer">{{ $t('common.cancel') }}</AButton>
|
|
|
- <AButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</AButton>
|
|
|
- </ASpace>
|
|
|
- </template>
|
|
|
- </AModal>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style scoped></style>
|