perf(views): 新增"账号管理"页面新增查询接口

src/views/user-manage/UserManage.vue

@@ -1,30 +1,47 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
+import dayjs, { Dayjs } from 'dayjs';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { getCharacterPageList } from '@/api';
+import { addAccount, getFindRolesByOrgIds } from '@/api';
 
-import type { Rule } from 'ant-design-vue/es/form';
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { Key } from 'ant-design-vue/es/table/interface';
-import type { CharacterPageItem } from '@/types';
+import type { AccountForm, CharacterPageItem, UserPageParams } from '@/types';
 
 const modalComponentRef = useTemplateRef('modalComponent');
 const { handleRequest } = useRequest();
 const accountKeys = ref<Key[]>([]);
-const accountPageParam = ref({
+const searchContent = ref<string>();
+const accountTerm = ref<[Dayjs, Dayjs]>();
+const orgId = ref<number>();
+const formRef = ref<FormInstance>();
+const accountPageParam = ref<UserPageParams>({
   pageIndex: 1,
   pageSize: 10,
+  userName: '',
+  mobile: '',
+  startTenancy: '',
+  endTenancy: '',
+  enabled: undefined,
+  orgId: 1,
+  roleId: undefined,
 });
 const accountTotal = ref<number>();
 const accountOpen = ref<boolean>(false);
 const checkOpen = ref<boolean>(false);
 const characterPageList = ref<CharacterPageItem[]>([]);
-const accountForm = ref({
-  name: '',
+const accountForm = ref<AccountForm>({
+  userName: '',
+  mobile: '',
+  password: '',
+  enabled: true,
+  roleId: undefined,
+  accountTerm: [dayjs(), dayjs()],
 });
 const accountList = ref([
   {
@@ -83,7 +100,12 @@ const accountColumns = [
   },
 ];
 const rules: Record<string, Rule[]> = {
-  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  userName: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  mobile: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  password: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  enabled: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  roleId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  accountTerm: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
 };
 const accountChange = (selectedRowKeys: Key[]) => {
   accountKeys.value = selectedRowKeys;
@@ -99,7 +121,7 @@ const addDelete = () => {
   }
   modalComponentRef.value?.showView();
 };
-const addAccount = () => {
+const addOpenAccount = () => {
   accountOpen.value = true;
 };
 const addCheck = () => {
@@ -108,21 +130,35 @@ const addCheck = () => {
 const addQuery = () => {};
 const addReset = () => {};
 const switchPages = () => {};
-const bindingAccount = () => {};
+const bindingAccount = () => {
+  formRef.value
+    ?.validate()
+    .then(() => {
+      handleRequest(async () => {
+        const { userName, mobile, password, enabled, roleId, accountTerm } = accountForm.value;
+        await addAccount({
+          userName,
+          mobile,
+          password,
+          roleId: roleId as number,
+          enabled: enabled ? '1' : '0',
+          startTenancy: accountTerm[0].format('YYYY-MM-DD'),
+          endTenancy: accountTerm[1].format('YYYY-MM-DD'),
+          orgId: orgId.value as number,
+        });
+        accountOpen.value = false;
+      });
+    })
+    .catch(() => {});
+};
 const bindingCheck = () => {};
 const clickOrganizationChange = (id: number) => {
-  console.log(id);
-};
-onMounted(() => {
+  orgId.value = id;
   handleRequest(async () => {
-    const { records } = await getCharacterPageList({
-      pageIndex: 1,
-      pageSize: 10,
-    });
-
-    characterPageList.value = records;
+    characterPageList.value = await getFindRolesByOrgIds([id]);
   });
-});
+};
+onMounted(() => {});
 </script>
 
 <template>
@@ -136,7 +172,7 @@ onMounted(() => {
             <span>删除</span>
           </AFlex>
         </AButton>
-        <AButton type="primary" class="icon-button button-monitoring" @click="addAccount">
+        <AButton type="primary" class="icon-button button-monitoring" @click="addOpenAccount">
           <AFlex align="center">
             <SvgIcon name="plus" />
             <span> 添加 </span>
@@ -150,32 +186,35 @@ onMounted(() => {
         <AFlex wrap="wrap" justify="space-between">
           <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">搜索</div>
-            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+            <AInput v-model:value="searchContent" class="input-width" placeholder="请输入手机号、姓名" />
           </AFlex>
           <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">角色</div>
 
             <ASelect
               class="input-width"
-              :field-names="{ label: 'group', value: 'id' }"
+              v-model:value="accountPageParam.roleId"
+              :options="characterPageList"
+              :field-names="{ label: 'roleName', value: 'id' }"
               :placeholder="t('common.plzSelect')"
             />
           </AFlex>
           <AFlex align="center" class="margin-bottom">
-            <div class="account-content-text">创建时间</div>
-            <ARangePicker class="input-width" :allow-clear="false" :separator="$t('common.to')" />
-          </AFlex>
-          <AFlex align="center" class="margin-bottom">
-            <div class="account-content-text">到期时间</div>
-            <ARangePicker class="input-width" :allow-clear="false" :separator="$t('common.to')" />
+            <div class="account-content-text">创建日期</div>
+            <ARangePicker
+              v-model:value="accountTerm"
+              class="input-width"
+              :allow-clear="false"
+              :separator="$t('common.to')"
+            />
           </AFlex>
+
           <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">状态</div>
-            <ASelect
-              class="input-width"
-              :field-names="{ label: 'group', value: 'id' }"
-              :placeholder="t('common.plzSelect')"
-            />
+            <ASelect class="input-width" v-model:value="accountPageParam.enabled" :placeholder="$t('common.plzSelect')">
+              <ASelectOption value="1">正常</ASelectOption>
+              <ASelectOption value="0">停用</ASelectOption>
+            </ASelect>
           </AFlex>
           <AFlex class="margin-bottom">
             <AButton type="primary" @click="addQuery"> 查询 </AButton>
@@ -236,27 +275,34 @@ onMounted(() => {
         class="form-style"
       >
         <AFlex :vertical="true">
-          <AFormItem label="姓名" name="name">
-            <AInput class="input-width" v-model:value="accountForm.name" placeholder="请输入" />
+          <AFormItem label="姓名" name="userName">
+            <AInput class="input-width" v-model:value="accountForm.userName" placeholder="请输入" />
           </AFormItem>
-          <AFormItem label="手机号" name="name">
-            <AInput class="input-width" v-model:value="accountForm.name" placeholder="请输入" />
+          <AFormItem label="手机号" name="mobile">
+            <AInput class="input-width" v-model:value="accountForm.mobile" placeholder="请输入" />
           </AFormItem>
-          <AFormItem label="角色" name="name">
+          <AFormItem label="角色" name="roleId">
             <ASelect
               class="input-width"
-              :field-names="{ label: 'groupName', value: 'id' }"
-              :placeholder="$t('common.plzSelect')"
+              v-model:value="accountForm.roleId"
+              :options="characterPageList"
+              :field-names="{ label: 'roleName', value: 'id' }"
+              :placeholder="t('common.plzSelect')"
             />
           </AFormItem>
-          <AFormItem label="到期时间">
-            <ADatePicker class="input-width" />
+          <AFormItem label="到期日期" name="accountTerm">
+            <ARangePicker
+              v-model:value="accountForm.accountTerm"
+              class="input-width"
+              :allow-clear="false"
+              :separator="$t('common.to')"
+            />
           </AFormItem>
-          <AFormItem label="密码" name="name">
-            <AInput class="input-width" v-model:value="accountForm.name" placeholder="默认密码8个0" />
+          <AFormItem label="密码" name="password">
+            <AInput class="input-width" v-model:value="accountForm.password" placeholder="默认密码8个0" />
           </AFormItem>
-          <AFormItem label="启用">
-            <ASwitch />
+          <AFormItem label="启用" name="enabled">
+            <ASwitch v-model:checked="accountForm.enabled" />
           </AFormItem>
         </AFlex>
       </AForm>