perf(views): 完善"账号管理"页面基本逻辑

src/views/user-manage/UserManage.vue

@@ -1,8 +1,128 @@
 <script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue';
+import { message } from 'ant-design-vue';
+
+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 type { Rule } from 'ant-design-vue/es/form';
+import type { Key } from 'ant-design-vue/es/table/interface';
+import type { CharacterPageItem } from '@/types';
 
-const addDelete = () => {};
-const addAccount = () => {};
+const modalComponentRef = useTemplateRef('modalComponent');
+const { handleRequest } = useRequest();
+const accountKeys = ref<Key[]>([]);
+const accountPageParam = ref({
+  pageIndex: 1,
+  pageSize: 10,
+});
+const accountTotal = ref<number>();
+const accountOpen = ref<boolean>(false);
+const checkOpen = ref<boolean>(false);
+const characterPageList = ref<CharacterPageItem[]>([]);
+const accountForm = ref({
+  name: '',
+});
+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 accountColumns = [
+  {
+    title: '手机号',
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    ellipsis: true,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'deviceName1',
+    key: 'deviceName1',
+    ellipsis: true,
+  },
+  {
+    title: '角色',
+    dataIndex: 'deviceName2',
+    key: 'deviceName2',
+    ellipsis: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'deviceName3',
+    key: 'deviceName3',
+    ellipsis: true,
+  },
+  {
+    title: '到期时间',
+    dataIndex: 'deviceName4',
+    key: 'deviceName4',
+    ellipsis: true,
+  },
+  {
+    title: '状态',
+    dataIndex: 'deviceName5',
+    key: 'deviceName5',
+    ellipsis: true,
+  },
+];
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+const accountChange = (selectedRowKeys: Key[]) => {
+  accountKeys.value = selectedRowKeys;
+};
+const confirm = () => {
+  handleRequest(async () => {
+    modalComponentRef.value?.hideView();
+  });
+};
+const addDelete = () => {
+  if (accountKeys.value.length === 0) {
+    return message.warning(t('deviceList.pleaseSelectItemDelete'));
+  }
+  modalComponentRef.value?.showView();
+};
+const addAccount = () => {
+  accountOpen.value = true;
+};
+const addCheck = () => {
+  checkOpen.value = true;
+};
+const addQuery = () => {};
+const addReset = () => {};
+const switchPages = () => {};
+const bindingAccount = () => {};
+const bindingCheck = () => {};
+const clickOrganizationChange = (id: number) => {
+  console.log(id);
+};
+onMounted(() => {
+  handleRequest(async () => {
+    const { records } = await getCharacterPageList({
+      pageIndex: 1,
+      pageSize: 10,
+    });
+
+    characterPageList.value = records;
+  });
+});
 </script>
 
 <template>
@@ -25,36 +145,249 @@ const addAccount = () => {};
       </div>
     </AFlex>
     <AFlex>
-      <OrganizationalStructure />
+      <OrganizationalStructure @change="clickOrganizationChange" />
       <div class="account-content">
         <AFlex wrap="wrap" justify="space-between">
-          <AFlex align="center">
+          <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">搜索</div>
             <AInput class="input-width" placeholder="请输入手机号、姓名" />
           </AFlex>
-          <AFlex align="center">
+          <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">角色</div>
-            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+
+            <ASelect
+              class="input-width"
+              :field-names="{ label: 'group', value: 'id' }"
+              :placeholder="t('common.plzSelect')"
+            />
           </AFlex>
-          <AFlex align="center">
+          <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">创建时间</div>
-            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+            <ARangePicker class="input-width" :allow-clear="false" :separator="$t('common.to')" />
           </AFlex>
-          <AFlex align="center">
+          <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">到期时间</div>
-            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+            <ARangePicker class="input-width" :allow-clear="false" :separator="$t('common.to')" />
           </AFlex>
-          <AFlex align="center">
+          <AFlex align="center" class="margin-bottom">
             <div class="account-content-text">状态</div>
-            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+            <ASelect
+              class="input-width"
+              :field-names="{ label: 'group', value: 'id' }"
+              :placeholder="t('common.plzSelect')"
+            />
+          </AFlex>
+          <AFlex class="margin-bottom">
+            <AButton type="primary" @click="addQuery"> 查询 </AButton>
+            <AButton class="default-button margin-left" @click="addReset"> 重置 </AButton>
           </AFlex>
         </AFlex>
+        <ATable
+          :row-selection="{
+            type: 'checkbox',
+            selectedRowKeys: accountKeys,
+            onChange: accountChange,
+          }"
+          row-key="id"
+          :columns="accountColumns"
+          :data-source="accountList"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'deviceName'">
+              <div @click="addCheck" class="mobile-phone">{{ record.deviceName }}</div>
+            </template>
+            <template v-if="column.key === 'deviceName5'">
+              <div v-if="record.deviceName5 == 1" class="tag-style success">启用中</div>
+              <div v-else class="tag-style default">停用</div>
+            </template>
+          </template>
+        </ATable>
+        <br />
+        <br />
+        <AFlex justify="flex-end" class="footer">
+          <APagination
+            v-model:current="accountPageParam.pageIndex"
+            v-model:page-size="accountPageParam.pageSize"
+            :total="accountTotal"
+            :show-size-changer="true"
+            @change="switchPages"
+            show-quick-jumper
+            :show-total="(total) => $t('common.pageTotal', { total })"
+          />
+        </AFlex>
       </div>
     </AFlex>
+    <AModal
+      v-model:open="accountOpen"
+      title="添加"
+      width="460px"
+      :footer="null"
+      :mask-closable="false"
+      :keyboard="false"
+    >
+      <AForm
+        ref="formRef"
+        :colon="false"
+        label-align="left"
+        :model="accountForm"
+        :rules="rules"
+        :label-col="{ span: 5 }"
+        class="form-style"
+      >
+        <AFlex :vertical="true">
+          <AFormItem label="姓名" name="name">
+            <AInput class="input-width" v-model:value="accountForm.name" placeholder="请输入" />
+          </AFormItem>
+          <AFormItem label="手机号" name="name">
+            <AInput class="input-width" v-model:value="accountForm.name" placeholder="请输入" />
+          </AFormItem>
+          <AFormItem label="角色" name="name">
+            <ASelect
+              class="input-width"
+              :field-names="{ label: 'groupName', value: 'id' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="到期时间">
+            <ADatePicker class="input-width" />
+          </AFormItem>
+          <AFormItem label="密码" name="name">
+            <AInput class="input-width" v-model:value="accountForm.name" placeholder="默认密码8个0" />
+          </AFormItem>
+          <AFormItem label="启用">
+            <ASwitch />
+          </AFormItem>
+        </AFlex>
+      </AForm>
+
+      <AFlex justify="flex-end">
+        <AButton class="button-style" type="primary" ghost @click="accountOpen = false">{{
+          $t('common.cancel')
+        }}</AButton>
+        <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')"
+      :description-text="t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.check-div {
+  margin-top: 24px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666;
+  text-align: justify;
+}
+
+.check-text {
+  color: #333;
+}
+
+.check-div > div {
+  margin-bottom: 16px;
+}
+
+.check-div .margin-top {
+  margin-bottom: 24px;
+}
+
+.mobile-phone {
+  color: var(--antd-color-primary-hover);
+  cursor: pointer;
+}
+
+.form-style {
+  margin-top: 24px;
+}
+
+.button-style {
+  width: 76px;
+  margin-left: 16px;
+}
+
+.default {
+  width: 40px;
+  color: #666;
+  background: #f8f8f8;
+  border: 1px solid #e5e5e5;
+}
+
+.success {
+  width: 52px;
+  color: #52c41a;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+}
+
+.tag-style {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.margin-left {
+  margin-left: 12px;
+}
+
+.margin-bottom {
+  margin-bottom: 16px;
+}
+
 .input-width {
   width: 256px;
 }
@@ -72,7 +405,7 @@ const addAccount = () => {};
 
 .account-content {
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 80px);
   padding: 24px;
   background: #fff;
   border-radius: 16px;