add dashboard/account

frontend/vben/src/api/demo/model/systemModel.ts

@@ -23,14 +23,12 @@ export type MenuParams = {
 }
 
 export interface AccountListItem {
-  id: string
-  account: string
-  email: string
-  nickname: string
+  id: number
+  name: string
+  nick: string
   role: number
-  createTime: string
-  remark: string
-  status: number
+  date: string
+  desc: string
 }
 
 export interface DeptListItem {
@@ -52,12 +50,8 @@ export interface MenuListItem {
 }
 
 export interface RoleListItem {
-  id: string
   roleName: string
-  roleValue: string
-  status: number
-  orderNo: string
-  createTime: string
+  value: string
 }
 
 /**

frontend/vben/src/api/demo/system.ts

@@ -2,13 +2,14 @@ import {
   AccountParams,
   DeptListItem,
   MenuParams,
-  RoleParams,
+  // RoleParams,
   RolePageParams,
   MenuListGetResultModel,
   DeptListGetResultModel,
   AccountListGetResultModel,
   RolePageListGetResultModel,
-  RoleListGetResultModel,
+  // RoleListGetResultModel,
+  RoleListItem,
 } from './model/systemModel'
 import { defHttp } from '/@/utils/http/axios'
 
@@ -19,7 +20,7 @@ enum Api {
   setRoleStatus = '/system/setRoleStatus',
   MenuList = '/system/getMenuList',
   RolePageList = '/system/getRoleListByPage',
-  GetAllRoleList = '/system/getAllRoleList',
+  // GetAllRoleList = '/system/getAllRoleList',
 }
 
 export const getAccountList = (params: AccountParams) =>
@@ -34,8 +35,22 @@ export const getMenuList = (params?: MenuParams) =>
 export const getRoleListByPage = (params?: RolePageParams) =>
   defHttp.get<RolePageListGetResultModel>({ url: Api.RolePageList, params })
 
-export const getAllRoleList = (params?: RoleParams) =>
-  defHttp.get<RoleListGetResultModel>({ url: Api.GetAllRoleList, params })
+export const getAllRoleList = () => {
+  return [
+    {
+      roleName: '课程组长',
+      value: 'super',
+    },
+    {
+      roleName: '归档代理',
+      value: 'filemgr',
+    },
+    {
+      roleName: '课程组员',
+      value: 'user',
+    },
+  ] as RoleListItem[]
+}
 
 export const setRoleStatus = (id: number, status: string) =>
   defHttp.post({ url: Api.setRoleStatus, params: { id, status } })

frontend/vben/src/api/sys/model/userModel.ts

@@ -102,3 +102,12 @@ export interface GetUserInfoModel {
 export interface GetLoginSaltModel {
   salt: string
 }
+
+export interface GetUsersListModel {
+  id: number
+  name: string
+  nick: string
+  role: number
+  date: string
+  desc: string
+}

frontend/vben/src/api/sys/user.ts

@@ -11,6 +11,7 @@ import {
   ResetPasswordResultModel,
   RegisterResultModel,
   GetLoginSaltModel,
+  GetUsersListModel,
 } from './model/userModel'
 
 import { ErrorMessageMode } from '/#/axios'
@@ -26,8 +27,8 @@ enum Api {
   Register = '/register',
   GetUserInfo = '/getUserInfo',
   GetUsersCount = '/getUsersCount',
-  GetPermCode = '/getPermCode',
-  TestRetry = '/testRetry',
+  GetUsersList = '/getUsersList',
+  IsNameExist = '/isNameExist',
 }
 
 /**
@@ -141,23 +142,23 @@ export function getUsersCount() {
   return defHttp.get<number>({ url: Api.GetUsersCount }, { errorMessageMode: 'none' })
 }
 
-/*export function getPermCode() {
-  return defHttp.get<string[]>({ url: Api.GetPermCode })
-}*/
+/**
+ * @description: getUsersList
+ */
+export function getUsersList() {
+  return defHttp.get<GetUsersListModel[]>({ url: Api.GetUsersList }, { errorMessageMode: 'none' })
+}
+
+/**
+ * @description: isNameExist
+ */
+export function isNameExist(username: string) {
+  return defHttp.get<boolean>(
+    { url: Api.IsNameExist, params: { username } },
+    { errorMessageMode: 'none' },
+  )
+}
 
 export function doLogout() {
   return defHttp.get({ url: Api.Logout }, { errorMessageMode: 'none' })
 }
-
-/*export function testRetry() {
-  return defHttp.get(
-    { url: Api.TestRetry },
-    {
-      retryRequest: {
-        isOpenRetry: true,
-        count: 5,
-        waitTime: 1000,
-      },
-    },
-  )
-}*/

frontend/vben/src/locales/lang/zh-CN/routes/dashboard.ts

@@ -3,4 +3,5 @@ export default {
   about: '关于',
   workbench: '工作台',
   analysis: '分析页',
+  account: '用户管理',
 }

frontend/vben/src/router/menus/modules/dashboard.ts

@@ -11,6 +11,10 @@ const menu: MenuModule = {
         path: 'analysis',
         name: t('routes.dashboard.analysis'),
       },
+      {
+        path: 'account',
+        name: t('routes.dashboard.account'),
+      },
       {
         path: 'workbench',
         name: t('routes.dashboard.workbench'),

frontend/vben/src/router/routes/modules/dashboard.ts

@@ -25,6 +25,16 @@ const dashboard: AppRouteModule = {
         roles: [RoleEnum.SUPER],
       },
     },
+    {
+      path: 'account',
+      name: 'Account',
+      component: () => import('/@/views/dashboard/account/index.vue'),
+      meta: {
+        // affix: true,
+        title: t('routes.dashboard.account'),
+        roles: [RoleEnum.SUPER],
+      },
+    },
     {
       path: 'workbench',
       name: 'Workbench',

frontend/vben/src/views/dashboard/account/AccountModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { nameFormSchema } from './account.data'
+
+  export default defineComponent({
+    name: 'AccountModal',
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true)
+      const rowId = ref('')
+
+      const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+        labelWidth: 100,
+        baseColProps: { span: 24 },
+        schemas: nameFormSchema,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 23,
+        },
+      })
+
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        resetFields()
+        setModalProps({ confirmLoading: false })
+        isUpdate.value = !!data?.isUpdate
+
+        if (unref(isUpdate)) {
+          rowId.value = data.record.id
+          setFieldsValue({
+            ...data.record,
+          })
+        }
+
+        updateSchema([
+          {
+            field: 'pwd',
+            show: !unref(isUpdate),
+          },
+        ])
+      })
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'))
+
+      async function handleSubmit() {
+        try {
+          const values = await validate()
+          setModalProps({ confirmLoading: true })
+          // TODO custom api
+          console.log(values)
+          closeModal()
+          emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } })
+        } finally {
+          setModalProps({ confirmLoading: false })
+        }
+      }
+
+      return { registerModal, registerForm, getTitle, handleSubmit }
+    },
+  })
+</script>

frontend/vben/src/views/dashboard/account/account.data.ts

@@ -0,0 +1,118 @@
+import { isNameExist } from '/@/api/sys/user'
+import { BasicColumn } from '/@/components/Table'
+import { FormSchema } from '/@/components/Table'
+
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'nick',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'date',
+    width: 180,
+  },
+  {
+    title: '角色',
+    dataIndex: 'role',
+    width: 200,
+  },
+  {
+    title: '简介',
+    dataIndex: 'desc',
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'nick',
+    label: '昵称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+]
+
+export const nameFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '用户名',
+    component: 'Input',
+    helpMessage: ['不能输入带有admin的用户名'],
+    rules: [
+      {
+        required: true,
+        message: '请输入用户名',
+      },
+      {
+        validator(_, value) {
+          return new Promise((resolve, reject) => {
+            isNameExist(value)
+              .then((v) => {
+                if (v) resolve()
+                else reject('用户名已存在')
+              })
+              .catch((err) => {
+                reject(err.message || '验证失败')
+              })
+          })
+        },
+      },
+    ],
+  },
+  {
+    field: 'pwd',
+    label: '密码',
+    component: 'InputPassword',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: '角色',
+    field: 'role',
+    component: 'ApiSelect',
+    componentProps: {
+      api: () => {
+        return [
+          {
+            roleName: '课程组长',
+            value: 'super',
+          },
+          {
+            roleName: '归档代理',
+            value: 'filemgr',
+          },
+          {
+            roleName: '课程组员',
+            value: 'user',
+          },
+        ]
+      },
+      labelField: 'roleName',
+      valueField: 'value',
+    },
+    required: true,
+  },
+  {
+    field: 'nick',
+    label: '昵称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '简介',
+    field: 'desc',
+    component: 'InputTextArea',
+  },
+]

frontend/vben/src/views/dashboard/account/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate">新增账号</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                tooltip: '编辑用户资料',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '删除此账号',
+                popConfirm: {
+                  title:
+                    '为确保安全, 删除账号仅仅是禁止了登录, 必要情况下用户仍然可以通过忘记密码的方式找回账号',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <AccountModal @register="registerModal" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive } from 'vue'
+
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { getUsersList } from '/@/api/sys/user'
+  import { PageWrapper } from '/@/components/Page'
+
+  import { useModal } from '/@/components/Modal'
+  import AccountModal from './AccountModal.vue'
+
+  import { columns, searchFormSchema } from './account.data'
+
+  export default defineComponent({
+    name: 'AccountManagement',
+    components: { BasicTable, PageWrapper, AccountModal, TableAction },
+    setup() {
+      const [registerModal, { openModal }] = useModal()
+      const searchInfo = reactive<Recordable>({})
+      const [registerTable, { reload, updateTableDataRecord }] = useTable({
+        title: '账号列表',
+        api: getUsersList,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        handleSearchInfoFn(info) {
+          console.log('handleSearchInfoFn', info)
+          return info
+        },
+        actionColumn: {
+          width: 120,
+          title: '操作',
+          dataIndex: 'action',
+          // slots: { customRender: 'action' },
+        },
+      })
+
+      function handleCreate() {
+        openModal(true, {
+          isUpdate: false,
+        })
+      }
+
+      function handleEdit(record: Recordable) {
+        console.log(record)
+        openModal(true, {
+          record,
+          isUpdate: true,
+        })
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log(record)
+      }
+
+      function handleSuccess({ isUpdate, values }) {
+        if (isUpdate) {
+          // 演示不刷新表格直接更新内部数据。
+          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+          const result = updateTableDataRecord(values.id, values)
+          console.log(result)
+        } else {
+          reload()
+        }
+      }
+
+      function handleSelect(deptId = '') {
+        searchInfo.deptId = deptId
+        reload()
+      }
+
+      return {
+        registerTable,
+        registerModal,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+        handleSelect,
+        searchInfo,
+      }
+    },
+  })
+</script>

frontend/vben/src/views/dashboard/workbench/components/WorkbenchHeader.vue

@@ -36,8 +36,8 @@
   const userStore = useUserStore()
   const userinfo = computed(() => userStore.getUserInfo)
   const enterDays = computed(() => {
-    const date: Date = new Date(new Date().getTime() - userStore.getUserInfo.date * 1000)
-    return date.getDay()
+    const date: number = new Date().getTime() - userStore.getUserInfo.date * 1000
+    return (date / 1000 / 3600 / 24).toFixed(2)
   })
   const userscount = ref(0)
   getUsersCount().then((value: number) => {