web/apps/web-baicai/src/views/system/tenant/index.vue

<script lang="ts" setup>
import { useAccess } from '@vben/access';
import { Page, useVbenModal } from '@vben/common-ui';
import { More } from '@vben/icons';

import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter';
import { TenantApi } from '#/api';

import FormEdit from './components/edit.vue';
import { gridOptions, searchFormOptions } from './data.config';

const { hasAccessByCodes } = useAccess();

const [Grid, { reload }] = useVbenVxeGrid({
  formOptions: searchFormOptions,
  gridOptions,
});

const [FormEditModal, formEditApi] = useVbenModal({
  connectedComponent: FormEdit,
});

const handleCreateDb = (id: number) => {
  Modal.confirm({
    iconType: 'info',
    title: '提示',
    content: `确定创建/更新租户数据库?`,
    cancelText: `关闭`,
    onOk: async () => {
      await TenantApi.createDb(id);
      message.success('创建/更新租户数据库成功');
    },
  });
};

const handleDelete = (id: number) => {
  Modal.confirm({
    iconType: 'info',
    title: '删除提示',
    content: `确定要删除选择的记录吗?`,
    cancelText: `关闭`,
    onOk: async () => {
      await TenantApi.deleteDetail(id);
      message.success('数据删除成功');
      reload();
    },
  });
};

const handleEdit = (record: any, isUpdate: boolean) => {
  formEditApi.setData({
    isUpdate,
    baseData: { id: record.id },
  });

  formEditApi.open();
};

const handelSuccess = () => {
  reload();
};
</script>

<template>
  <Page auto-content-height>
    <FormEditModal :close-on-click-modal="false" @success="handelSuccess" />
    <Grid>
      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          v-access:code="'tenant:add'"
          @click="() => handleEdit({}, false)"
        >
          新增租户
        </Button>
      </template>
      <template #action="{ row }">
        <div class="flex">
          <Button
            :disabled="
              !hasAccessByCodes(['tenant:createDb']) || row.tenantType === 0
            "
            type="link"
            @click="() => handleCreateDb(row.id)"
          >
            创建库
          </Button>
          <Button
            :disabled="!hasAccessByCodes(['tenant:edit'])"
            danger
            type="link"
            @click="() => handleEdit(row, true)"
          >
            修改
          </Button>
          <Dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <More class="size-4" />
            </a>
            <template #overlay>
              <Menu>
                <Menu.Item
                  key="0"
                  :disabled="!hasAccessByCodes(['tenant:resetPwd'])"
                >
                  <a href="#">重置密码</a>
                </Menu.Item>
                <Menu.Item
                  key="1"
                  :disabled="!hasAccessByCodes(['tenant:delete'])"
                  @click="() => handleDelete(row.id)"
                >
                  <a href="#">删除</a>
                </Menu.Item>
              </Menu>
            </template>
          </Dropdown>
        </div>
      </template>
    </Grid>
  </Page>
</template>