DZ-MXWPP-WEB/apps/web-ele/src/views/system-manage/user-manage/index.vue

<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';
import type { RoleGroupEntity } from '@vben/types';

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { h, onMounted, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';
import {
  MdiDelete,
  MdiDetail,
  MdiEdit,
  MdiPasswordVerified,
} from '@vben/icons';

import { ElMessage, ElMessageBox, ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteAccountApi, getAccountWorkerListApi } from '#/api/account';
import { getRoleListApi } from '#/api/role';
import { $t } from '#/locales';

import ChangePasswordForm from './change-password-form.vue';
import AccountForm from './form.vue';

const changePasswordFormRef = ref<InstanceType<
  typeof ChangePasswordForm
> | null>(null);

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: true,
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  schema: [
    {
      component: 'Input',
      fieldName: 'accountname',
      label: '账号',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
    {
      component: 'Select',
      fieldName: 'accountstatus',
      label: '账号状态',
      componentProps: {
        placeholder: $t('ui.placeholder.select'),
        allowClear: true,
        options: [
          { label: '可用', value: 1 },
          { label: '不可用', value: 0 },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-5',
};

const gridOptions: VxeGridProps<any> = {
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    zoom: true,
  },
  height: 'auto',
  exportConfig: {},
  pagerConfig: {},
  rowConfig: {
    isHover: true,
  },
  stripe: true,

  proxyConfig: {
    response: {
      result: 'Data',
      total: 'Total',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await getAccountWorkerListApi({
          pageindex: page.currentPage,
          rows: page.pageSize,
          ...formValues,
        });
      },
    },
  },

  columns: [
    { title: '账号', field: 'accountname' },
    {
      title: '账号状态',
      field: 'accountstatus',
      slots: {
        default: ({ row }) => {
          const status = row.accountstatus;
          return h(
            ElTag,
            {
              type: status === 1 ? 'success' : 'danger',
              effect: 'dark',
              size: 'small',
              round: true,
            },
            () => (status === 1 ? '可用' : '不可用'),
          );
        },
      },
    },
    { title: '备注', field: 'accountbz', sortable: true },
    {
      title: '角色组',
      field: 'accountgrouplist',
      sortable: true,
      slots: {
        default: ({ row }) => {
          return formatRoleNames(row.accountgrouplist);
        },
      },
    },
    { title: '创建人', field: 'accountcreateuser', sortable: true },
    { title: '开通时间', field: 'accountcreatedate', sortable: true },
    // { title: '到期时间', field: 'accountenddate' },
    // { title: '更新时间', field: 'accountupdate' },
    // { title: '更新人', field: 'accountupuser' },
    { title: '关联职员', field: 'worker_xm', sortable: true },
    {
      title: '操作',
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      width: 180,
    },
  ],
};

const gridEvents: VxeGridListeners<any> = {
  cellDblclick: ({ row }) => {
    handleDetail(row);
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions,
  formOptions,
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  closeOnClickModal: false,
  closeOnPressEscape: false,
  connectedComponent: AccountForm,
});

// 角色数据映射
const roleMap = ref<Map<string, string>>(new Map());

// 获取角色列表并创建ID到名称的映射
async function fetchRoleList() {
  try {
    const res = await getRoleListApi({
      pageindex: 1,
      rows: 1000,
    });

    if (res && res.Data) {
      const map = new Map<string, string>();
      res.Data.filter((item: RoleGroupEntity) => item.available === 1).forEach(
        (item: RoleGroupEntity) => {
          map.set(item.id.toString(), item.title);
        },
      );
      roleMap.value = map;
    }
  } catch (error) {
    console.error('获取角色列表失败', error);
  }
}

// 将角色ID转换为角色名称
function formatRoleNames(roleIds: string): string {
  if (!roleIds) return '';

  const ids = roleIds.split(',').filter(Boolean);
  const names = ids.map((id) => roleMap.value.get(id) || id).filter(Boolean);

  return names.join(', ');
}

// 初始化时获取角色列表
onMounted(() => {
  fetchRoleList();
});

/* 创建 */
function handleCreate() {
  modalApi.setState({ showCancelButton: true });
  modalApi.setData({ formType: 'create' }).open();
}

/* 编辑 */
function handleEdit(row: any) {
  modalApi.setState({ showCancelButton: true });
  modalApi.setData({ formType: 'edit', row }).open();
}

/* 修改密码 */
function handleChangePassword(row: any) {
  changePasswordFormRef.value?.openModal(row);
}

/* 详情 */
function handleDetail(row: any) {
  modalApi.setState({ showCancelButton: false });
  modalApi.setData({ formType: 'detail', row }).open();
}

/* 删除 */
async function handleDelete(row: any) {
  try {
    await ElMessageBox.confirm('确认要删除该账号吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteAccountApi({ 'accountid.value': row.accountid });
    ElMessage.success('删除成功');
    gridApi.reload();
  } catch (error) {
    console.error(error);
  }
}

function handleFinish() {
  gridApi.reload();
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="账号列表">
      <template #toolbar-tools>
        <el-button type="primary" @click="handleCreate"> 新增 </el-button>
      </template>
      <template #action="{ row }">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="详情"
          placement="top"
        >
          <el-button
            round
            @click="() => handleDetail(row)"
            :icon="MdiDetail"
            class="!p-2"
          />
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="编辑"
          placement="top"
        >
          <el-button
            round
            @click="() => handleEdit(row)"
            :icon="MdiEdit"
            class="!p-2"
          />
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="修改密码"
          placement="top"
        >
          <el-button
            round
            @click="
              () =>
                handleChangePassword({
                  accountid: row.accountid,
                })
            "
            :icon="MdiPasswordVerified"
            class="!p-2"
          />
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="删除"
          placement="top"
        >
          <el-button
            round
            @click="() => handleDelete(row)"
            :icon="MdiDelete"
            class="!p-2"
          />
        </el-tooltip>
      </template>
    </Grid>
    <Modal @finish="handleFinish" />
    <ChangePasswordForm ref="changePasswordFormRef" @finish="handleFinish" />
  </Page>
</template>