add dashboard/account

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) => {