feat: 后台用户增加弹窗修改用户信息

.vscode/settings.json

@@ -2,6 +2,7 @@
   "typescript.tsdk": "./node_modules/typescript/lib",
   "volar.tsPlugin": false,
   "volar.tsPluginStatus": false,
+  "typescript.validate.enable": false,
   //===========================================
   //============= Editor ======================
   //===========================================

src/api/sys/manager.ts

@@ -9,14 +9,16 @@ enum Api {
   GetGroupList = '/backstage/group/list',
   DeleteGroup = '/backstage/group/delete',
   AddGroup = '/backstage/group/add',
-  UpdateGroup = 'backstage/group/update'
+  UpdateGroup = 'backstage/group/update',
+  UpdateBackStageStaff = '/backstage/manager/update'
 }
 import {
   ManagerListGetResultModel,
   ManagerInfoGetResultModel,
   AddPermParams,
   PermGroupListResultModel,
-  UpdatePermParams
+  UpdatePermParams,
+  UpdateBackstageStaffParmas
 } from './model/managerModel'
 /**
  * @description 获取后台用户列表
@@ -84,3 +86,11 @@ export function updatePermGroup(params: UpdatePermParams) {
     params
   })
 }
+
+/** 编辑后台用户 */
+export function updateBackStageStaff(params: UpdateBackstageStaffParmas) {
+  return defHttp.post({
+    url: Api.UpdateBackStageStaff,
+    params
+  })
+}

src/api/sys/model/managerModel.ts

@@ -19,6 +19,19 @@ export type ManagerItem = {
   avatar: string
   createTime: string
 }
+
+export type UpdateBackstageStaffParmas = {
+  id: string
+  projectId: string
+  account: string
+  password: string
+  name: string
+  company: string
+  position: string
+  mobile: string
+  telephone: string
+  canLogin: number
+}
 export type AddPermParams = {
   name: string
   permission: string[]

src/store/modules/user.ts

@@ -19,12 +19,15 @@ import { loginApi, getXsrfToken, logoutApi, getAccountGroupList } from '/@/api/s
 import { useI18n } from '/@/hooks/web/useI18n'
 import { useMessage } from '/@/hooks/web/useMessage'
 import { router } from '/@/router'
+import { PermGroupItem } from '/@/api/sys/model/managerModel'
+import { getPermGroupList } from '/@/api/sys/manager'
 
 interface UserState {
   userInfo: Nullable<UserInfo>
   token?: string
   roleList: RoleEnum[]
   accountGroups: string[]
+  permGroups: PermGroupItem[]
 }
 
 export const useUserStore = defineStore({
@@ -36,7 +39,8 @@ export const useUserStore = defineStore({
     token: undefined,
     // roleList
     roleList: [],
-    accountGroups: []
+    accountGroups: [],
+    permGroups: []
   }),
   getters: {
     getUserInfo(): UserInfo {
@@ -50,6 +54,9 @@ export const useUserStore = defineStore({
     },
     getGroupList(): string[] {
       return this.accountGroups
+    },
+    getPermGroupList(): PermGroupItem[] {
+      return this.permGroups
     }
   },
   actions: {
@@ -68,6 +75,9 @@ export const useUserStore = defineStore({
     setGroupList(groupList: string[]) {
       this.accountGroups = groupList
     },
+    setPermGroupList(permList: PermGroupItem[]) {
+      this.permGroups = permList
+    },
     resetState() {
       this.userInfo = null
       this.token = ''
@@ -104,11 +114,30 @@ export const useUserStore = defineStore({
     async fetchGroupList() {
       try {
         const data = await getAccountGroupList()
-        this.setGroupList(data)
+        const accountGroups: any[] = []
+        for (const key in data) {
+          if (Object.prototype.hasOwnProperty.call(data, key)) {
+            const item = data[key]
+            if (item) {
+              accountGroups.push({ label: item, value: parseInt(key) })
+            }
+          }
+        }
+        this.setGroupList(accountGroups)
+      } catch (error) {
+        return null
+      }
+    },
+
+    async fetchPermGroupList() {
+      try {
+        const { items } = await getPermGroupList({ page: 1, pageSize: 100 })
+        this.setPermGroupList(items)
       } catch (error) {
         return null
       }
     },
+
     async getToken() {
       await getXsrfToken('234')
       const token = getToken() as string

src/views/dashboard/project-detail/components/account.vue

@@ -146,7 +146,7 @@
         {
           field: 'isAdmin',
           label: '特殊账号',
-          component: 'RadioGroup',
+          component: 'Switch',
           slot: 'role'
         }
       ])
@@ -194,9 +194,9 @@
         formElRef.value?.validate().then(async (values: any) => {
           try {
             if (formType.value === 0) {
-              await createProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? 1 : 0 })
+              await createProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? true : false })
             } else {
-              await updateProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? 1 : 0 })
+              await updateProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? true : false })
             }
           } finally {
             openModal(false)

src/views/manager/user/detail/index.vue

@@ -85,9 +85,6 @@
         await toggleManagerStatus({ id, canLogin: status })
       }
 
-      // watch(info, newVal => {
-      //   console.log(newVal)
-      // })
       function onChange(e: RadioChangeEvent) {
         try {
           submitManagerStatus(info.value?.id || '', e.target?.value || 0)

src/views/manager/user/list/index.vue

@@ -1,25 +1,135 @@
 <template>
-  <BasicTable @register="registerTable" />
+  <div>
+    <BasicTable @register="registerTable" />
+    <BasicModal @register="registerModal" title="修改后台用户" @ok="handleOnsubmit">
+      <BasicForm @register="registerForm" ref="formRef">
+        <template #canLogin="{ model, field }">
+          <a-radio-group v-model:value="model[field]" class="ml-4">
+            <a-radio-button :value="1">{{ model[field] === 1 ? '已开启' : '开启' }}</a-radio-button>
+            <a-radio-button :value="0">{{ model[field] === 0 ? '已禁止' : '禁止' }}</a-radio-button>
+          </a-radio-group>
+        </template>
+      </BasicForm>
+    </BasicModal>
+  </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { computed, defineComponent, nextTick, ref } from 'vue'
   import { BasicTable, useTable } from '/@/components/Table'
   import { getTableColumns } from './tableColumns'
-  import { useGo } from '/@/hooks/web/usePage'
-  import { getManagerList } from '/@/api/sys/manager'
+  import { getManagerList, updateBackStageStaff } from '/@/api/sys/manager'
+  import { BasicForm, FormActionType, useForm, FormSchema } from '/@/components/Form'
+  import { BasicModal, useModal } from '/@/components/Modal'
+  import { ManagerItem, PermGroupItem } from '/@/api/sys/model/managerModel'
+  import { Radio } from 'ant-design-vue'
+  import { useUserStore } from '/@/store/modules/user'
+  import { useMessage } from '/@/hooks/web/useMessage'
+
   export default defineComponent({
     name: 'ManagerList',
     components: {
-      BasicTable
+      BasicTable,
+      BasicForm,
+      BasicModal,
+      ARadioGroup: Radio.Group,
+      ARadioButton: Radio.Button
     },
     setup() {
-      const go = useGo()
-      const [registerTable] = useTable({
-        columns: getTableColumns((id: string) => go(`/manager/detail/${id}`)),
+      const { createMessage } = useMessage()
+      const formRef = ref<Nullable<FormActionType>>(null)
+      const userStore = useUserStore()
+      const permGroupList = computed<PermGroupItem[]>(() => userStore.getPermGroupList)
+      if (!permGroupList.value.length) {
+        userStore.fetchPermGroupList()
+      }
+      const schemas = computed<FormSchema[]>(() => [
+        {
+          field: 'id',
+          label: 'Id',
+          component: 'Input',
+          show: false
+        },
+        {
+          field: 'username',
+          label: '用户名(cld)',
+          required: true,
+          component: 'Input',
+          componentProps: {
+            disable: true
+          }
+        },
+        {
+          field: 'groupId',
+          label: '用户组',
+          component: 'Select',
+          required: true,
+          componentProps: {
+            options: permGroupList.value.map(item => ({ label: item.name, value: item.id }))
+          }
+        },
+        {
+          field: 'telephone',
+          label: '手机',
+          component: 'Input'
+        },
+        {
+          field: 'fixedphone',
+          label: '电话',
+          component: 'Input'
+        },
+        {
+          field: 'email',
+          label: '邮箱',
+          component: 'Input'
+        },
+        {
+          field: 'qq',
+          label: 'QQ',
+          component: 'Input'
+        },
+        {
+          field: 'position',
+          label: '职位',
+          component: 'Input'
+        },
+        {
+          field: 'canLogin',
+          label: '登录使用',
+          component: 'Switch',
+          required: true,
+          slot: 'canLogin'
+        }
+      ])
+      const [registerForm] = useForm({
+        schemas,
+        showActionButtonGroup: false
+      })
+      const [registerModal, { openModal }] = useModal()
+      async function handleOnEdit(item: ManagerItem) {
+        openModal()
+        await nextTick()
+        formRef.value?.setFieldsValue(item)
+      }
+      const [registerTable, { reload }] = useTable({
+        columns: getTableColumns((item: ManagerItem) => handleOnEdit(item)),
         canResize: true,
         api: getManagerList
       })
-      return { registerTable }
+
+      function handleOnsubmit() {
+        formRef.value?.validate().then(values => {
+          try {
+            updateBackStageStaff(values)
+            createMessage.success('更新成功')
+          } catch (error) {
+            return
+          } finally {
+            reload()
+            openModal(false)
+          }
+        })
+      }
+      return { registerTable, registerForm, registerModal, formRef, handleOnsubmit }
     }
   })
 </script>

src/views/manager/user/list/tableColumns.tsx

@@ -1,7 +1,8 @@
+import { ManagerItem } from '/@/api/sys/model/managerModel'
 import Icon from '/@/components/Icon'
 import { BasicColumn } from '/@/components/Table/src/types/table'
 import { formatToDateTime } from '/@/utils/dateUtil'
-export function getTableColumns(fn: (id: string) => void): BasicColumn[] {
+export function getTableColumns(fn: (item: ManagerItem) => void): BasicColumn[] {
   return [
     // {
     //   dataIndex: 'id',
@@ -33,11 +34,12 @@ export function getTableColumns(fn: (id: string) => void): BasicColumn[] {
     {
       dataIndex: 'opreate',
       title: '操作',
-      customRender: ({ record }) => (
-        <span class="text-[#007BFF] hover:text-[#005BB8] cursor-pointer">
-          <Icon icon="fluent:edit-32-filled" onClick={() => fn(record.id)}></Icon>
-        </span>
-      )
+      customRender: ({ record }) =>
+        !record.isAdmin && (
+          <span class="text-[#007BFF] hover:text-[#005BB8] cursor-pointer">
+            <Icon icon="fluent:edit-32-filled" onClick={() => fn(record)}></Icon>
+          </span>
+        )
     }
   ]
 }