finish dashboard/account

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

@@ -39,6 +39,15 @@ export interface SetUserInfoParams {
   avtr: string
 }
 
+/**
+ * @description: Set Others' Info interface parameters
+ */
+export interface SetOthersInfoParams {
+  id: number
+  nick: string
+  desc: string
+}
+
 /**
  * @description: Register interface parameters
  */

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

@@ -7,6 +7,7 @@ import {
   SetPasswordParams,
   SetContactParams,
   SetUserInfoParams,
+  SetOthersInfoParams,
   RegisterParams,
   ResetPasswordResultModel,
   RegisterResultModel,
@@ -108,6 +109,21 @@ export function setUserInfoApi(params: SetUserInfoParams, mode: ErrorMessageMode
   )
 }
 
+/**
+ * @description: set userinfo api, borrowing the ResetPasswordResultModel as they're the same
+ */
+export function setOthersInfoApi(params: SetOthersInfoParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<ResetPasswordResultModel>(
+    {
+      url: Api.SetUserInfo,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
 /**
  * @description: register api
  */
@@ -166,7 +182,7 @@ export function doLogout() {
 }
 
 export const setRole = (id: number, role: number) =>
-  defHttp.post({ url: Api.SetRole, params: { id, role } }, { errorMessageMode: 'none' })
+  defHttp.post({ url: Api.SetRole, params: { id, role } })
 
 export const disableUser = (id: number, stat: boolean) =>
   defHttp.post({ url: Api.DisableUser, params: { id, stat } }, { errorMessageMode: 'none' })

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

@@ -1,65 +1,26 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+  <BasicModal v-bind="$attrs" @register="registerModal" title="编辑账号" @ok="handleSubmit">
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue'
+  import { defineComponent, ref } from 'vue'
   import { BasicModal, useModalInner } from '/@/components/Modal'
   import { BasicForm, useForm } from '/@/components/Form/index'
-  import { isNameExist } from '/@/api/sys/user'
+  import { setOthersInfoApi, setRole } from '/@/api/sys/user'
+  import { useUserStore } from '/@/store/modules/user'
 
   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({
+      const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
         labelWidth: 100,
         baseColProps: { span: 24 },
         schemas: [
-          {
-            field: 'name',
-            label: '用户名',
-            component: 'Input',
-            ifShow: () => {
-              return !unref(isUpdate)
-            },
-            rules: [
-              {
-                required: true,
-                message: '请输入用户名',
-              },
-              {
-                validator(_, value) {
-                  return new Promise((resolve, reject) => {
-                    if (unref(isUpdate)) {
-                      resolve()
-                      return
-                    }
-                    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',
@@ -107,39 +68,31 @@
       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),
-          },
-        ])
+        rowId.value = data.record.id
+        setFieldsValue({
+          ...data.record,
+        })
       })
 
-      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 } })
+          await setOthersInfoApi({ id: Number(rowId.value), nick: values.nick, desc: values.desc })
+          if (useUserStore().getUserInfo.userId != Number(rowId.value))
+            await setRole(
+              Number(rowId.value),
+              { 课程组长: 1, 归档代理: 2, 课程组员: 3 }[values.role],
+            )
+          emit('success', { values: { ...values, id: rowId.value } })
         } finally {
           setModalProps({ confirmLoading: false })
         }
       }
 
-      return { registerModal, registerForm, getTitle, handleSubmit }
+      return { registerModal, registerForm, handleSubmit }
     },
   })
 </script>

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

@@ -1,5 +1,4 @@
 import { BasicColumn } from '/@/components/Table'
-import { FormSchema } from '/@/components/Table'
 import { h } from 'vue'
 import { Switch } from 'ant-design-vue'
 import { useMessage } from '/@/hooks/web/useMessage'
@@ -67,18 +66,3 @@ export const columns: BasicColumn[] = [
     dataIndex: 'desc',
   },
 ]
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '用户名',
-    component: 'Input',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'nick',
-    label: '昵称',
-    component: 'Input',
-    colProps: { span: 8 },
-  },
-]

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

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