admin/src/pages/user/index.vue

<script setup lang="ts">

import RegularPage from '@/components/RegularPage.vue'
import { onMounted, ref } from 'vue'
import { useSearchable } from '@/composables/useSearchable'
import type { User, UserSearchFilter } from '@/model/user'
import { searchUsers } from '@/api/user'
import type { BaseTableColumns } from 'tdesign-vue-next'
import RoleSettingDialog from '@/pages/user/components/RoleSettingDialog.vue'


const {
  data,
  loading,
  pagination,
  onPageChange,
  fetchData
} = useSearchable<UserSearchFilter, User>(searchUsers)

const columns: BaseTableColumns = [
  {
    title: '用户编号',
    colKey: 'id',
    width: 100,
  },
  {
    title: '用户名',
    colKey: 'name',
    width: 100,
  },
  {
    title: '角色',
    colKey: 'roles',
    width: 100,
  },
  {
    title: '操作',
    colKey: 'operation',
    width: 100,
  },
]

onMounted(fetchData)

const roleSettingDialogVisible = ref(false)

const selectUser = ref<User | null>(null)

const showRoleSettingDialog = (user: User) => {
  selectUser.value = user
  roleSettingDialogVisible.value = true
}

const handleRoleSettingSuccess = () => {
  fetchData()
  roleSettingDialogVisible.value = false
}
</script>

<template>
  <RegularPage title="用户管理">
    <template #action-area>
      <TButton>创建用户</TButton>
    </template>
    <template #search-area>
      <TForm label-align="left" label-width="80px">
        <TRow :gutter="[64, 32]">
          <TCol :span="3">
            <TFormItem label="用户编号">
              <TInput placeholder="请输入需要搜索的用户姓名"></TInput>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TFormItem label="用户名">
              <TInput placeholder="请输入需要搜索的用户姓名"></TInput>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TFormItem label="手机号码">
              <TInput placeholder="请输入需要搜索的用户姓名"></TInput>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TFormItem label="手机号码">
              <TInput placeholder="请输入需要搜索的用户姓名"></TInput>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TFormItem label="角色">
              <TSelect placeholder="请选择角色"></TSelect>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TFormItem label="平台">
              <TSelect placeholder="请选择平台"></TSelect>
            </TFormItem>
          </TCol>
          <TCol :span="3">
            <TSpace>
              <TButton>搜索</TButton>
              <TButton theme="default">重置</TButton>
            </TSpace>
          </TCol>
        </TRow>
      </TForm>
    </template>
    <TTable
      :loading="loading"
      row-key="index"
      :data="data"
      :columns="columns"
      cell-empty-content="-"
      :pagination="{ total: pagination.total, current: pagination.page, pageSize: pagination.size, onChange: onPageChange }"

    >
      <template #roles="{row}">
        <TSpace>
          <TTag v-for="role in row.roles" :key="role.id" theme="success" variant="light">{{ role.label }}</TTag>
        </TSpace>
      </template>
      <template #operation="{row}">
        <TSpace :size="1">
          <TButton variant="text" size="small" theme="primary">编辑</TButton>
          <TButton variant="text" size="small" theme="primary">设置平台</TButton>
          <TButton variant="text" size="small" theme="primary" @click="() => showRoleSettingDialog(row)">设置角色</TButton>
        </TSpace>
      </template>
    </TTable>
    <RoleSettingDialog v-model:visible="roleSettingDialogVisible" :user="selectUser" @cancel="roleSettingDialogVisible = false" @success="handleRoleSettingSuccess"></RoleSettingDialog>
  </RegularPage>
</template>

<style scoped>

</style>