feat(permission): 添加权限管理模块

- 添加权限模块的增删改查

src/api/list.ts

@@ -14,8 +14,8 @@ export interface Pageable {
 }
 
 export interface ListParams<Record> {
-  current: number;
+  page: number;
-  pageSize: number;
+  size: number;
 }
 
 export interface ListRes<Record> {

src/api/permission.ts

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import { ListParams, queryList } from '@/api/list';
+
+export interface PermissionCreateRecord {
+  title: string;
+  code: string;
+  remark: string;
+}
+export interface PermissionRecord extends PermissionCreateRecord {
+  id: number | undefined;
+}
+
+export function create(data: PermissionCreateRecord) {
+  return axios.post(`/api/permission`, data);
+}
+
+export function update(data: PermissionRecord) {
+  return axios.patch(`/api/permission/${data.id}`, data);
+}
+
+export function getDetail(id: number) {
+  return axios.get<PermissionRecord>(`/api/permission/${id}`);
+}
+
+export function remove(id: number) {
+  return axios.delete(`/api/permission/${id}`);
+}
+
+export function queryPermissions(
+  params?: ListParams<Partial<PermissionRecord>>
+) {
+  return queryList<PermissionRecord>(`/api/permission`, params);
+}

src/api/user.ts

@@ -42,7 +42,7 @@ export interface SelfRecord {
   remark: string;
 }
 
-export interface UserRecord extends CreateRecord{
+export interface UserRecord extends CreateRecord {
   id: number;
 }
 

src/router/routes/modules/system.ts

@@ -12,6 +12,16 @@ const SYSTEM: AppRouteRecordRaw = {
     order: 9,
   },
   children: [
+    {
+      path: 'permission',
+      name: 'Permission',
+      component: () => import('@/views/system/permission/index.vue'),
+      meta: {
+        locale: 'menu.system.permission',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
     {
       path: 'user',
       name: 'User',

src/views/system/permission/components/permission-edit.vue

@@ -0,0 +1,116 @@
+<template>
+  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    {{ modalTitle }}
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px' }"
+    @click="handleClick"
+  >
+    {{ modalTitle }}
+  </a-button>
+  <a-modal
+    width="600px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '500px' }">
+      <a-form-item
+        field="title"
+        label="权限名"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '权限名不能为空' }]"
+      >
+        <a-input v-model="formData.title" />
+      </a-form-item>
+      <a-form-item
+        field="code"
+        label="权限编码"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '权限编码不能为空' }]"
+      >
+        <a-input v-model="formData.code" />
+      </a-form-item>
+      <a-form-item field="remark" label="备注">
+        <a-textarea v-model="formData.remark" placeholder="权限备注" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, PropType, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import {
+    PermissionCreateRecord,
+    PermissionRecord,
+    create, update
+  } from "@/api/permission";
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<PermissionRecord>,
+    },
+    isCreate: Boolean,
+  });
+
+  const modalTitle = computed(() => {
+    return props.isCreate ? '新增' : '编辑';
+  });
+
+  const { visible, setVisible } = useVisible(false);
+
+  const createEditRef = ref<FormInstance>();
+
+  const formData = ref<PermissionRecord>({
+    id: undefined,
+    title: '',
+    code: '',
+    remark: '',
+    ...props.prem,
+  });
+
+  const emit = defineEmits(['refresh']);
+  const handleClick = () => {
+    console.log(formData);
+    setVisible(true);
+  };
+  const handleSubmit = async () => {
+    const valid = await createEditRef.value?.validate();
+    if (!valid) {
+      if (props.isCreate) {
+        const res = await create(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+        createEditRef.value?.resetFields();
+      } else {
+        const res = await update(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+      }
+      emit('refresh');
+      setVisible(false);
+    }
+  };
+  const handleCancel = async () => {
+    createEditRef.value?.resetFields();
+    setVisible(false);
+  };
+</script>
+
+<style scoped></style>

src/views/system/permission/index.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.system', 'menu.system.permission']" />
+    <a-card class="general-card" :title="$t('menu.list.searchTable')">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-item field="title" label="权限名称">
+                  <a-input
+                    v-model="formModel.title"
+                    placeholder="请输入权限名称"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item field="code" label="权限编码">
+                  <a-input
+                    v-model="formModel.code"
+                    placeholder="请输入权限编码"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              {{ $t('searchTable.form.search') }}
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              {{ $t('searchTable.form.reset') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <PermissionEdit
+              ref="createRef"
+              :is-create="true"
+              @refresh="search"
+            />
+            <a-upload action="/">
+              <template #upload-button>
+                <a-button>
+                  {{ $t('searchTable.operation.import') }}
+                </a-button>
+              </template>
+            </a-upload>
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-button>
+            <template #icon>
+              <icon-download />
+            </template>
+            {{ $t('searchTable.operation.download') }}
+          </a-button>
+          <a-tooltip :content="$t('searchTable.actions.refresh')">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip :content="$t('searchTable.actions.density')">
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+          <a-tooltip :content="$t('searchTable.actions.columnSetting')">
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="pagination"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        @page-change="onPageChange"
+      >
+        <template #enableState="{ record }">
+          <span v-if="record.enableState === '启用'" class="circle pass"></span>
+          <span v-else class="circle"></span>
+          {{ record.enableState }}
+        </template>
+        <template #operations="{ record }">
+          <PermissionEdit
+            ref="editRef"
+            :prem="record"
+            :is-create="false"
+            @refresh="search"
+          />
+          <a-popconfirm
+            content="确认删除此用户?"
+            type="error"
+            @ok="handleDelete(record)"
+          >
+            <a-button type="outline" size="small" status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, reactive, watch, nextTick } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import useLoading from '@/hooks/loading';
+  import { PermissionRecord, queryPermissions, remove } from '@/api/permission';
+  import { Pagination } from '@/types/global';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import cloneDeep from 'lodash/cloneDeep';
+  import Sortable from 'sortablejs';
+  import { Message } from '@arco-design/web-vue';
+  import { ListParams } from '@/api/list';
+  import PermissionEdit from './components/permission-edit.vue';
+
+  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+  type Column = TableColumnData & { checked?: true };
+
+  const generateFormModel = () => {
+    return {
+      title: '',
+      code: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const { t } = useI18n();
+  const renderData = ref<PermissionRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const cloneColumns = ref<Column[]>([]);
+  const showColumns = ref<Column[]>([]);
+  const size = ref<SizeProps>('medium');
+
+  const basePagination: Pagination = {
+    current: 1,
+    pageSize: 10,
+  };
+  const pagination = reactive({
+    ...basePagination,
+  });
+  const densityList = computed(() => [
+    {
+      name: t('searchTable.size.mini'),
+      value: 'mini',
+    },
+    {
+      name: t('searchTable.size.small'),
+      value: 'small',
+    },
+    {
+      name: t('searchTable.size.medium'),
+      value: 'medium',
+    },
+    {
+      name: t('searchTable.size.large'),
+      value: 'large',
+    },
+  ]);
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: t('searchTable.columns.index'),
+      dataIndex: 'id',
+      slotName: 'index',
+      width: 80,
+    },
+    {
+      title: '权限名称',
+      dataIndex: 'title',
+    },
+    {
+      title: '权限编码',
+      dataIndex: 'code',
+    },
+    {
+      title: t('searchTable.columns.operations'),
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+  const fetchData = async (
+    params: ListParams<PermissionRecord> = { page: 0, size: 10 }
+  ) => {
+    setLoading(true);
+    try {
+      const res = await queryPermissions(params);
+      const { data } = res;
+      renderData.value = data.content;
+      pagination.current = data.pageable.pageNumber + 1;
+      pagination.total = data.totalElements;
+      pagination.pageSize = data.size;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const search = () => {
+    const { current, pageSize } = basePagination;
+    fetchData({
+      page: current - 1,
+      size: pageSize,
+      ...formModel.value,
+    } as unknown as ListParams<PermissionRecord>);
+  };
+  const onPageChange = (current: number) => {
+    fetchData({
+      page: current - 1,
+      size: pagination.pageSize,
+    });
+  };
+
+  fetchData();
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  const handleSelectDensity = (
+    val: string | number | Record<string, any> | undefined,
+    e: Event
+  ) => {
+    size.value = val as SizeProps;
+  };
+
+  const handleChange = (
+    checked: boolean | (string | boolean | number)[],
+    column: Column,
+    index: number
+  ) => {
+    if (!checked) {
+      cloneColumns.value = showColumns.value.filter(
+        (item) => item.dataIndex !== column.dataIndex
+      );
+    } else {
+      cloneColumns.value.splice(index, 0, column);
+    }
+  };
+
+  const exchangeArray = <T extends Array<any>>(
+    array: T,
+    beforeIdx: number,
+    newIdx: number,
+    isDeep = false
+  ): T => {
+    const newArray = isDeep ? cloneDeep(array) : array;
+    if (beforeIdx > -1 && newIdx > -1) {
+      // 先替换后面的，然后拿到替换的结果替换前面的
+      newArray.splice(
+        beforeIdx,
+        1,
+        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
+      );
+    }
+    return newArray;
+  };
+
+  const popupVisibleChange = (val: boolean) => {
+    if (val) {
+      nextTick(() => {
+        const el = document.getElementById('tableSetting') as HTMLElement;
+        const sortable = new Sortable(el, {
+          onEnd(e: any) {
+            const { oldIndex, newIndex } = e;
+            exchangeArray(cloneColumns.value, oldIndex, newIndex);
+            exchangeArray(showColumns.value, oldIndex, newIndex);
+          },
+        });
+      });
+    }
+  };
+  const handleDelete = async (record: PermissionRecord) => {
+    const res = await remove(record.id);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      search();
+    }
+  };
+
+  watch(
+    () => columns.value,
+    (val) => {
+      cloneColumns.value = cloneDeep(val);
+      cloneColumns.value.forEach((item, index) => {
+        item.checked = true;
+      });
+      showColumns.value = cloneDeep(cloneColumns.value);
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Permission',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/system/role/components/role-edit.vue

@@ -0,0 +1,96 @@
+<template>
+  <a-button type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-modal
+    width="600px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>新建角色</template>
+    <a-form ref="userCreateRef" :model="createData" :style="{ width: '500px' }">
+      <a-form-item
+        field="name"
+        label="角色名"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '角色名不能为空' }]"
+      >
+        <a-input v-model="createData.name" />
+      </a-form-item>
+      <a-form-item
+        field="permissions"
+        label="权限"
+        :rules="[{ type: 'array', minLength: 1, message: '请至少选择一个' }]"
+        :validate-trigger="['change']"
+      >
+        <a-checkbox-group
+          v-for="i in permOptions"
+          :key="i.id"
+          v-model="createData.roles"
+          direction="vertical"
+        >
+          <a-checkbox :value="i">{{ i.name }}</a-checkbox>
+        </a-checkbox-group>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { queryRoles } from '@/api/role';
+  import { CreateRecord, create } from '@/api/user';
+  import { ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import { computedAsync } from '@vueuse/core';
+  import { listDepts, queryDepts } from '@/api/dept';
+
+  const { visible, setVisible } = useVisible(false);
+
+  const userCreateRef = ref<FormInstance>();
+
+  const createData = ref<CreateRecord>({
+    username: '',
+    name: '',
+    phone: '',
+    email: '',
+    enableState: '',
+    dept: undefined,
+    roles: [],
+  });
+
+  const permOptions = computedAsync(async () => {
+    // const res = await queryPermissions();
+    // return res.data.content;
+  });
+
+  const emit = defineEmits(['refresh']);
+  const handleClick = () => {
+    setVisible(true);
+  };
+  const handleSubmit = async () => {
+    const valid = await userCreateRef.value?.validate();
+    if (!valid) {
+      const res = await create(createData.value);
+      if (res.status === 200) {
+        Message.success({
+          content: '新增成功',
+          duration: 5 * 1000,
+        });
+      }
+      emit('refresh');
+      userCreateRef.value?.resetFields();
+      setVisible(false);
+    }
+  };
+  const handleCancel = async () => {
+    userCreateRef.value?.resetFields();
+    setVisible(false);
+  };
+</script>
+
+<style scoped></style>

src/views/system/role/index.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.system', 'menu.system.role']" />
+    <a-card class="general-card" :title="$t('menu.list.searchTable')">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-item field="name" label="角色名称">
+                  <a-input
+                    v-model="formModel.name"
+                    placeholder="请输入角色名称"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              {{ $t('searchTable.form.search') }}
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              {{ $t('searchTable.form.reset') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 0" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <UserCreate ref="createUserRef" @refresh="search" />
+            <a-upload action="/">
+              <template #upload-button>
+                <a-button>
+                  {{ $t('searchTable.operation.import') }}
+                </a-button>
+              </template>
+            </a-upload>
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-button>
+            <template #icon>
+              <icon-download />
+            </template>
+            {{ $t('searchTable.operation.download') }}
+          </a-button>
+          <a-tooltip :content="$t('searchTable.actions.refresh')">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip :content="$t('searchTable.actions.density')">
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+          <a-tooltip :content="$t('searchTable.actions.columnSetting')">
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="pagination"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        @page-change="onPageChange"
+      >
+        <template #enableState="{ record }">
+          <span v-if="record.enableState === '启用'" class="circle pass"></span>
+          <span v-else class="circle"></span>
+          {{ record.enableState }}
+        </template>
+        <template #operations="{ record }">
+          <UserEdit ref="editUserRef" :user="record" @refresh="search" />
+          <a-popconfirm
+            content="确认删除此用户?"
+            type="error"
+            @ok="handleDelete(record)"
+          >
+            <a-button type="outline" size="small" status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, reactive, watch, nextTick } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import useLoading from '@/hooks/loading';
+  import { queryUserList, remove, UserRecord, UserParams } from '@/api/user';
+  import { Pagination } from '@/types/global';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import cloneDeep from 'lodash/cloneDeep';
+  import Sortable from 'sortablejs';
+  import { Message } from '@arco-design/web-vue';
+
+  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+  type Column = TableColumnData & { checked?: true };
+
+  const generateFormModel = () => {
+    return {
+      id: '',
+      name: '',
+      phone: '',
+      email: '',
+      createdTime: [],
+      enableState: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const { t } = useI18n();
+  const renderData = ref<UserRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const cloneColumns = ref<Column[]>([]);
+  const showColumns = ref<Column[]>([]);
+  const size = ref<SizeProps>('medium');
+
+  const basePagination: Pagination = {
+    current: 1,
+    pageSize: 10,
+  };
+  const pagination = reactive({
+    ...basePagination,
+  });
+  const densityList = computed(() => [
+    {
+      name: t('searchTable.size.mini'),
+      value: 'mini',
+    },
+    {
+      name: t('searchTable.size.small'),
+      value: 'small',
+    },
+    {
+      name: t('searchTable.size.medium'),
+      value: 'medium',
+    },
+    {
+      name: t('searchTable.size.large'),
+      value: 'large',
+    },
+  ]);
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: t('searchTable.columns.index'),
+      dataIndex: 'id',
+      slotName: 'index',
+      width: 80,
+    },
+    {
+      title: t('searchTable.columns.name'),
+      dataIndex: 'username',
+    },
+    {
+      title: '用户昵称',
+      dataIndex: 'name',
+    },
+    {
+      title: t('searchTable.columns.phone'),
+      dataIndex: 'phone',
+      slotName: 'phone',
+    },
+    {
+      title: t('searchTable.columns.email'),
+      dataIndex: 'email',
+      slotName: 'email',
+    },
+    {
+      title: t('searchTable.columns.enableState'),
+      dataIndex: 'enableState',
+      slotName: 'enableState',
+    },
+    {
+      title: t('searchTable.columns.operations'),
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+  const statusOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '启用',
+      value: '启用',
+    },
+    {
+      label: '停用',
+      value: '停用',
+    },
+  ]);
+  const fetchData = async (
+    params: UserParams = { current: 1, pageSize: 10 }
+  ) => {
+    setLoading(true);
+    try {
+      const res = await queryUserList(params);
+      const { data } = res;
+      renderData.value = data.content;
+      pagination.current = data.pageable.pageNumber + 1;
+      pagination.total = data.totalElements;
+      pagination.pageSize = data.size;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const search = () => {
+    fetchData({
+      ...basePagination,
+      ...formModel.value,
+    } as unknown as UserParams);
+  };
+  const onPageChange = (current: number) => {
+    fetchData({ ...basePagination, current });
+  };
+
+  fetchData();
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  const handleSelectDensity = (
+    val: string | number | Record<string, any> | undefined,
+    e: Event
+  ) => {
+    size.value = val as SizeProps;
+  };
+
+  const handleChange = (
+    checked: boolean | (string | boolean | number)[],
+    column: Column,
+    index: number
+  ) => {
+    if (!checked) {
+      cloneColumns.value = showColumns.value.filter(
+        (item) => item.dataIndex !== column.dataIndex
+      );
+    } else {
+      cloneColumns.value.splice(index, 0, column);
+    }
+  };
+
+  const exchangeArray = <T extends Array<any>>(
+    array: T,
+    beforeIdx: number,
+    newIdx: number,
+    isDeep = false
+  ): T => {
+    const newArray = isDeep ? cloneDeep(array) : array;
+    if (beforeIdx > -1 && newIdx > -1) {
+      // 先替换后面的，然后拿到替换的结果替换前面的
+      newArray.splice(
+        beforeIdx,
+        1,
+        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
+      );
+    }
+    return newArray;
+  };
+
+  const popupVisibleChange = (val: boolean) => {
+    if (val) {
+      nextTick(() => {
+        const el = document.getElementById('tableSetting') as HTMLElement;
+        const sortable = new Sortable(el, {
+          onEnd(e: any) {
+            const { oldIndex, newIndex } = e;
+            exchangeArray(cloneColumns.value, oldIndex, newIndex);
+            exchangeArray(showColumns.value, oldIndex, newIndex);
+          },
+        });
+      });
+    }
+  };
+  const handleDelete = async (record: UserRecord) => {
+    const res = await remove(record.id);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      search();
+    }
+  };
+
+  watch(
+    () => columns.value,
+    (val) => {
+      cloneColumns.value = cloneDeep(val);
+      cloneColumns.value.forEach((item, index) => {
+        item.checked = true;
+      });
+      showColumns.value = cloneDeep(cloneColumns.value);
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'User',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/system/user/components/user-create.vue

@@ -56,7 +56,7 @@
         />
       </a-form-item>
       <a-form-item
-        field="role"
+        field="roles"
         label="角色"
         :rules="[{ type: 'array', minLength: 1, message: '请至少选择一个' }]"
         :validate-trigger="['change', 'input']"
@@ -127,12 +127,12 @@
         });
       }
       emit('refresh');
-      await userCreateRef.value?.resetFields();
+      userCreateRef.value?.resetFields();
       setVisible(false);
     }
   };
   const handleCancel = async () => {
-    await userCreateRef.value?.resetFields();
+    userCreateRef.value?.resetFields();
     setVisible(false);
   };
 </script>

src/views/system/user/components/user-edit.vue

@@ -15,7 +15,7 @@
       :style="{ width: '360px' }"
     >
       <a-form-item
-        field="name"
+        field="username"
         label="用户名"
         :validate-trigger="['change', 'input']"
         :rules="[{ required: true, message: '用户名不能为空' }]"
@@ -87,13 +87,10 @@
     }
   };
   const handleCancel = async () => {
-    await userEditRef.value?.resetFields();
+    userEditRef.value?.resetFields();
     setVisible(false);
   };
 
-  // defineExpose({
-  //   handleEdit,
-  // });
 </script>
 
 <style scoped lang="less"></style>

src/views/system/user/index.vue

@@ -278,8 +278,8 @@
       value: '启用',
     },
     {
-      label: '禁用',
+      label: '停用',
-      value: '禁用',
+      value: '停用',
     },
   ]);
   const fetchData = async (

src/views/system/user/locale/zh-CN.ts

@@ -1,4 +1,7 @@
 export default {
+  'menu.system.permission': '权限管理',
+  'menu.system.role': '角色管理',
+  'menu.system.dept': '部门管理',
   'menu.system.user': '用户管理',
   'menu.list.searchTable': '查询表格',
   'searchTable.form.number': '集合编号',

src/views/user/setting/components/basic-information.vue

@@ -84,7 +84,7 @@
   import { FormInstance } from '@arco-design/web-vue/es/form';
   import { UserState } from '@/store/modules/user/types';
   import { selfUpdate } from '@/api/user';
-  import { Message } from "@arco-design/web-vue";
+  import { Message } from '@arco-design/web-vue';
 
   const userStore = useUserStore();
 

src/views/user/setting/components/password-reset.vue

@@ -51,6 +51,7 @@
   import { FormInstance } from '@arco-design/web-vue/es/form';
   import { PasswordReSetModel, resetPassword } from '@/api/user';
   import { Message } from '@arco-design/web-vue';
+  import useUser from "@/hooks/user";
 
   const { t } = useI18n();
 
@@ -59,7 +60,6 @@
     newPassword: '',
     confirmPassword: '',
   });
-
   const checkEquals = (
     value: string | undefined,
     callback: (error?: string) => void
@@ -71,16 +71,20 @@
     }
   };
 
+  const user = useUser();
   const validate = async () => {
     const vali = await formRef.value?.validate();
     if (!vali) {
       // do some thing
       // you also can use html-type to submit
       const res = await resetPassword(formData.value);
+      if (res.status === 200) {
         Message.success({
           content: res.data,
           duration: 5 * 1000,
         });
+        await user.logout();
+      }
     }
   };
   const reset = async () => {

yarn.lock

@@ -1289,6 +1289,15 @@ archive-type@^4.0.0:
   dependencies:
     file-type "^4.2.0"
 
+arco-design-pro-vue@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/arco-design-pro-vue/-/arco-design-pro-vue-2.7.2.tgz#0f18e7b6761450c87a68d6c2cf23c42bffdecf81"
+  integrity sha512-a7FriKhuMCjqEgIXfh5jXxyZ3D7IFaHbu9p4u4dzDnp+aWnwDaROGr987IEZKvI9+5cFz41I5JMLfvKyEZ2JwQ==
+  dependencies:
+    fs-extra "^10.0.0"
+    minimist "^1.2.5"
+    prettier "^2.5.1"
+
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
@@ -6275,9 +6284,9 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.7.1:
+prettier@^2.5.1, prettier@^2.7.1:
   version "2.8.8"
-  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 process-nextick-args@~2.0.0: