perf(views): 编写"账号管理"页面编辑，删除，查询等功能

src/views/user-manage/UserManage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
 import dayjs, { Dayjs } from 'dayjs';
 
@@ -7,19 +7,21 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { addAccount, getFindRolesByOrgIds } from '@/api';
+import { addAccount, batchDeleteAccount, getFindRolesByOrgIds, getUserPageList, updateAccount } from '@/api';
 
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { Key } from 'ant-design-vue/es/table/interface';
-import type { AccountForm, CharacterPageItem, UserPageParams } from '@/types';
+import type { AccountForm, CharacterPageItem, UserPageItem, UserPageParams } from '@/types';
 
 const modalComponentRef = useTemplateRef('modalComponent');
 const { handleRequest } = useRequest();
 const accountKeys = ref<Key[]>([]);
-const searchContent = ref<string>();
+const searchContent = ref<string>('');
 const accountTerm = ref<[Dayjs, Dayjs]>();
 const orgId = ref<number>();
 const formRef = ref<FormInstance>();
+const titleAccount = ref<boolean>(true);
+const accountId = ref<number>(0);
 const accountPageParam = ref<UserPageParams>({
   pageIndex: 1,
   pageSize: 10,
@@ -28,12 +30,11 @@ const accountPageParam = ref<UserPageParams>({
   startTenancy: '',
   endTenancy: '',
   enabled: undefined,
-  orgId: 1,
+  orgId: undefined,
   roleId: undefined,
 });
 const accountTotal = ref<number>();
 const accountOpen = ref<boolean>(false);
-const checkOpen = ref<boolean>(false);
 const characterPageList = ref<CharacterPageItem[]>([]);
 const accountForm = ref<AccountForm>({
   userName: '',
@@ -41,77 +42,76 @@ const accountForm = ref<AccountForm>({
   password: '',
   enabled: true,
   roleId: undefined,
-  accountTerm: [dayjs(), dayjs()],
+  accountTerm: undefined,
 });
-const accountList = ref([
-  {
-    deviceName: '15972030052',
-    deviceName1: '王某某',
-    deviceName2: '管理员',
-    deviceName3: '2024-12-31 23:12:00',
-    deviceName4: '2024-12-31 23:12:00',
-    deviceName5: 1,
-  },
-  {
-    deviceName: '15872040051',
-    deviceName1: '李某某',
-    deviceName2: '操作工',
-    deviceName3: '2024-12-31 23:12:00',
-    deviceName4: '2024-12-31 23:12:00',
-    deviceName5: 0,
-  },
-]);
+const accountList = ref<UserPageItem[]>([]);
 const accountColumns = [
   {
     title: '手机号',
-    dataIndex: 'deviceName',
-    key: 'deviceName',
+    dataIndex: 'mobile',
+    key: 'mobile',
     ellipsis: true,
   },
   {
     title: '姓名',
-    dataIndex: 'deviceName1',
-    key: 'deviceName1',
+    dataIndex: 'userName',
+    key: 'userName',
     ellipsis: true,
   },
   {
     title: '角色',
-    dataIndex: 'deviceName2',
-    key: 'deviceName2',
+    dataIndex: 'roleName',
+    key: 'roleName',
     ellipsis: true,
   },
   {
-    title: '创建时间',
-    dataIndex: 'deviceName3',
-    key: 'deviceName3',
+    title: '创建日期',
+    dataIndex: 'startTenancy',
+    key: 'startTenancy',
     ellipsis: true,
   },
   {
-    title: '到期时间',
-    dataIndex: 'deviceName4',
-    key: 'deviceName4',
+    title: '到期日期',
+    dataIndex: 'endTenancy',
+    key: 'endTenancy',
     ellipsis: true,
   },
   {
     title: '状态',
-    dataIndex: 'deviceName5',
-    key: 'deviceName5',
+    dataIndex: 'enabled',
+    key: 'enabled',
     ellipsis: true,
   },
 ];
 const rules: Record<string, Rule[]> = {
   userName: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  mobile: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  mobile: [
+    { required: true, message: t('common.cannotEmpty'), trigger: 'change' },
+    {
+      validator: (_rule: unknown, value: string) => {
+        if (!isValidPhone(value)) {
+          return Promise.reject('手机号格式错误');
+        }
+        return Promise.resolve();
+      },
+    },
+  ],
   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 isValidPhone = (phone: string): boolean => {
+  return /^1[3-9]\d{9}$/.test(phone);
+};
 const accountChange = (selectedRowKeys: Key[]) => {
   accountKeys.value = selectedRowKeys;
 };
 const confirm = () => {
   handleRequest(async () => {
+    await batchDeleteAccount(accountKeys.value as number[]);
+    getUserList();
     modalComponentRef.value?.hideView();
   });
 };
@@ -123,12 +123,62 @@ const addDelete = () => {
 };
 const addOpenAccount = () => {
   accountOpen.value = true;
+  titleAccount.value = true;
+};
+const addCheck = (item: UserPageItem) => {
+  accountOpen.value = true;
+  titleAccount.value = false;
+
+  const { userName, mobile, roleId, enabled, startTenancy, endTenancy, id } = item;
+  accountId.value = id;
+  Object.assign(accountForm.value, {
+    userName,
+    mobile,
+    roleId,
+    password: '',
+    enabled: enabled === 1 ? true : false,
+    accountTerm: [dayjs(startTenancy, 'YYYY-MM-DD'), dayjs(endTenancy, 'YYYY-MM-DD')],
+  });
+};
+const addQuery = () => {
+  if (accountTerm.value) {
+    accountPageParam.value.startTenancy = accountTerm.value[0].format('YYYY-MM-DD');
+    accountPageParam.value.endTenancy = accountTerm.value[1].format('YYYY-MM-DD');
+  } else {
+    accountPageParam.value.startTenancy = '';
+    accountPageParam.value.endTenancy = '';
+  }
+  console.log(searchContent.value);
+  accountPageParam.value.mobile = searchContent.value;
+  accountPageParam.value.userName = searchContent.value;
+  accountPageParam.value.pageIndex = 1;
+  getUserList();
 };
-const addCheck = () => {
-  checkOpen.value = true;
+
+const resetItem = () => {
+  searchContent.value = '';
+  accountTerm.value = undefined;
+  accountPageParam.value.startTenancy = '';
+  accountPageParam.value.endTenancy = '';
+  accountPageParam.value.pageIndex = 1;
+  accountPageParam.value.enabled = undefined;
+  accountPageParam.value.roleId = undefined;
+  getUserList();
+};
+
+const handleClose = () => {
+  accountForm.value = {
+    userName: '',
+    mobile: '',
+    password: '',
+    enabled: true,
+    roleId: undefined,
+    accountTerm: undefined,
+  };
+};
+const addReset = () => {
+  resetItem();
 };
-const addQuery = () => {};
-const addReset = () => {};
 const switchPages = () => {};
 const bindingAccount = () => {
   formRef.value
@@ -136,29 +186,60 @@ const bindingAccount = () => {
     .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,
-        });
+        if (titleAccount.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,
+          });
+        } else {
+          await updateAccount({
+            id: accountId.value,
+            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,
+          });
+        }
+        getUserList();
+
         accountOpen.value = false;
       });
     })
     .catch(() => {});
 };
-const bindingCheck = () => {};
+
 const clickOrganizationChange = (id: number) => {
   orgId.value = id;
+  searchContent.value = '';
+  accountTerm.value = undefined;
+  accountPageParam.value.startTenancy = '';
+  accountPageParam.value.endTenancy = '';
   handleRequest(async () => {
     characterPageList.value = await getFindRolesByOrgIds([id]);
+    getUserList();
+  });
+};
+
+const getUserList = () => {
+  handleRequest(async () => {
+    accountPageParam.value.orgId = orgId.value;
+    accountPageParam.value.mobile = searchContent.value;
+    accountPageParam.value.userName = searchContent.value;
+    const { records, total } = await getUserPageList(accountPageParam.value);
+    accountList.value = records;
+    accountTotal.value = total;
   });
 };
-onMounted(() => {});
 </script>
 
 <template>
@@ -197,6 +278,7 @@ onMounted(() => {});
               :options="characterPageList"
               :field-names="{ label: 'roleName', value: 'id' }"
               :placeholder="t('common.plzSelect')"
+              :allow-clear="true"
             />
           </AFlex>
           <AFlex align="center" class="margin-bottom">
@@ -204,22 +286,27 @@ onMounted(() => {});
             <ARangePicker
               v-model:value="accountTerm"
               class="input-width"
-              :allow-clear="false"
+              :allow-clear="true"
               :separator="$t('common.to')"
             />
           </AFlex>
 
           <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">状态</div>
-            <ASelect class="input-width" v-model:value="accountPageParam.enabled" :placeholder="$t('common.plzSelect')">
+            <ASelect
+              class="input-width"
+              v-model:value="accountPageParam.enabled"
+              :placeholder="$t('common.plzSelect')"
+              :allow-clear="true"
+            >
               <ASelectOption value="1">正常</ASelectOption>
               <ASelectOption value="0">停用</ASelectOption>
             </ASelect>
           </AFlex>
-          <AFlex class="margin-bottom">
-            <AButton type="primary" @click="addQuery"> 查询 </AButton>
-            <AButton class="default-button margin-left" @click="addReset"> 重置 </AButton>
-          </AFlex>
+        </AFlex>
+        <AFlex class="margin-bottom" justify="flex-end">
+          <AButton type="primary" @click="addQuery"> 查询 </AButton>
+          <AButton class="default-button margin-left" @click="addReset"> 重置 </AButton>
         </AFlex>
         <ATable
           :row-selection="{
@@ -233,11 +320,11 @@ onMounted(() => {});
           :pagination="false"
         >
           <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'deviceName'">
-              <div @click="addCheck" class="mobile-phone">{{ record.deviceName }}</div>
+            <template v-if="column.key === 'mobile'">
+              <div @click="addCheck(record as UserPageItem)" class="mobile-phone">{{ record.mobile }}</div>
             </template>
-            <template v-if="column.key === 'deviceName5'">
-              <div v-if="record.deviceName5 == 1" class="tag-style success">启用中</div>
+            <template v-if="column.key === 'enabled'">
+              <div v-if="record.enabled == 1" class="tag-style success">启用中</div>
               <div v-else class="tag-style default">停用</div>
             </template>
           </template>
@@ -259,11 +346,12 @@ onMounted(() => {});
     </AFlex>
     <AModal
       v-model:open="accountOpen"
-      title="添加"
+      :title="titleAccount ? '添加' : '编辑'"
       width="460px"
       :footer="null"
       :mask-closable="false"
       :keyboard="false"
+      :after-close="handleClose"
     >
       <AForm
         ref="formRef"
@@ -279,7 +367,7 @@ onMounted(() => {});
             <AInput class="input-width" v-model:value="accountForm.userName" placeholder="请输入" />
           </AFormItem>
           <AFormItem label="手机号" name="mobile">
-            <AInput class="input-width" v-model:value="accountForm.mobile" placeholder="请输入" />
+            <AInputNumber class="input-width" v-model:value="accountForm.mobile" placeholder="请输入" />
           </AFormItem>
           <AFormItem label="角色" name="roleId">
             <ASelect
@@ -314,47 +402,6 @@ onMounted(() => {});
         <AButton class="button-style" type="primary" @click="bindingAccount">{{ $t('common.save') }}</AButton>
       </AFlex>
     </AModal>
-    <AModal
-      v-model:open="checkOpen"
-      title="用户详情"
-      width="460px"
-      :footer="null"
-      :mask-closable="false"
-      :keyboard="false"
-    >
-      <div class="check-div">
-        <AFlex>
-          <div>姓名：</div>
-          <div class="check-text">王某某</div>
-        </AFlex>
-        <AFlex>
-          <div>手机号：</div>
-          <div class="check-text">15622321170</div>
-        </AFlex>
-        <AFlex>
-          <div>角色：</div>
-          <div class="check-text">管理员</div>
-        </AFlex>
-        <AFlex>
-          <div>到期时间：</div>
-          <div class="check-text">2026-10-24</div>
-        </AFlex>
-        <AFlex>
-          <div>密码：</div>
-          <div class="check-text">00000000</div>
-        </AFlex>
-        <AFlex class="margin-top">
-          <div>启用：</div>
-          <ASwitch />
-        </AFlex>
-      </div>
-      <AFlex justify="flex-end">
-        <AButton class="button-style" type="primary" ghost @click="checkOpen = false">{{
-          $t('common.cancel')
-        }}</AButton>
-        <AButton class="button-style" type="primary" @click="bindingCheck">{{ $t('common.save') }}</AButton>
-      </AFlex>
-    </AModal>
     <ConfirmModal
       ref="modalComponent"
       :title="t('common.deleteConfirmation')"