admin-web-template/src/views/system/user/index.vue

<script lang="ts" setup>
import { Dropdown, Menu, Space, Switch } from 'ant-design-vue'
import { DeleteOutlined, DownOutlined, PlusOutlined } from '@ant-design/icons-vue'
import UserFormModal from './UserFormModal.vue'
import { columns, searchFormSchema } from './data'
import { DeptTree } from './components'
import { useUserActions } from './composables/useUserActions'
import { useI18n } from '@/hooks/web/useI18n'
import { useModal } from '@/components/Modal'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { getUserList } from '@/api/system/user'
import type { SystemUser } from '@/api/system/user/types'
import { ImportModal } from '@/components/ImportModal'

// import { usePermission } from '@/hooks/web/usePermission'

defineOptions({ name: 'SystemUser' })

const { t } = useI18n()
const [registerModal, { openModal }] = useModal<SystemUser>()

// const { hasPermission } = usePermission()

const [registerTable, tableMethods] = useTable({
  api(params) {
    return getUserList({
      ...params,
      deptId: selectedDeptId,
    })
  },
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 80,
    schemas: searchFormSchema,
  },
  useSearchForm: true,
  bordered: true,
  canResize: false,
  rowSelection: {},
  actionColumn: {
    width: 140,
    title: t('common.action'),
    dataIndex: 'action',
    fixed: 'right',
    // auth: ['user_edit', 'user_delete'],
  },
})

let selectedDeptId: string
function onSelectedDept(id: string) {
  selectedDeptId = id
  tableMethods.setPagination({ current: 1 })
  tableMethods.reload()
}

const {
  handleDelete,
  resetPassword,
  unlockUser,
  handleExportUsers,
  registerImportModal,
  importModalProps,
  isImportCovered,
  openImportModal,
} = useUserActions(tableMethods)
</script>

<template>
  <div flex="~">
    <DeptTree my="12px" ml="12px" @select="onSelectedDept" />
    <div flex="1" w-0>
      <BasicTable :api="async () => ([] as SystemUser[])" @register="registerTable">
        <!-- v-if="hasPermission('user_add')" -->
        <template #tableTitle>
          <Space>
            <a-button type="primary" @click="openModal">
              <PlusOutlined />
              {{ t('action.create') }}
            </a-button>
            <a-button danger @click="handleDelete()">
              <DeleteOutlined />
              批量删除
            </a-button>
            <Dropdown>
              <template #overlay>
                <Menu>
                  <!-- <Menu.Item>
                    角色配置
                  </Menu.Item> -->
                  <Menu.Item @click="resetPassword">
                    密码重置
                  </Menu.Item>
                  <!-- <Menu.Item>
                    平台配置
                  </Menu.Item> -->
                  <Menu.Item @click="unlockUser">
                    帐号解封
                  </Menu.Item>
                  <Menu.Item @click="openImportModal()">
                    数据导入
                  </Menu.Item>
                  <Menu.Item @click="handleExportUsers">
                    数据导出
                  </Menu.Item>
                </Menu>
              </template>
              <a-button>
                更多操作
                <DownOutlined />
              </a-button>
            </Dropdown>
          </Space>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  icon: 'i-ant-design:edit-outlined',
                  label: t('action.edit'),
                  onClick: () => openModal(true, record),
                // auth: 'user_edit',
                },
                {
                  icon: 'i-ant-design:delete-outlined',
                  danger: true,
                  label: t('action.delete'),
                  // auth: 'user_delete',
                  popConfirm: {
                    title: t('common.delMessage'),
                    placement: 'left',
                    confirm: () => handleDelete(record.id),
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>

    <UserFormModal @register="registerModal" @success="tableMethods.reload()" />
    <ImportModal v-bind="importModalProps" @register="registerImportModal">
      <div>
        <span mr="10px">数据覆盖</span>
        <Switch v-model:checked="isImportCovered" :checked-value="1" :un-checked-value="0" />
      </div>
    </ImportModal>
  </div>
</template>