@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/tenant/components/TenantEdit.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import type { AddForm, EditForm, Form, RecordData } from '../interface';
+import { getRbacResourceTenantAddResourceTree, getRbacTenantPubTenantInfo, postRbacTenantPubTenantAdd, postRbacTenantPubTenantUpdate } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+
+defineOptions({
+  name: 'TenantEdit',
+});
+
+const emit = defineEmits(['submit']);
+
+enum ACTION {
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+const rules: Record<string, Rule[]> = {
+  name: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+    { min: 2, max: 32, message: '租户名称长度不能少于2位，不能超过32位', trigger: 'change' },
+  ],
+  tenantCode: [
+    { required: true, message: '请输入编码', trigger: 'blur' },
+    { min: 2, max: 64, message: '租户编码长度不能少于2位，不能超过64位', trigger: 'change' },
+  ],
+  pubUserAdmin: [
+    { required: true, message: '请输入租户管理员', trigger: 'blur' },
+    { min: 2, max: 32, message: '租户管理员长度不能少于2位，不能超过32位', trigger: 'change' },
+  ],
+  resourceIds: [
+    { type: 'array', required: true, message: '请选择所属资源', trigger: 'change' },
+  ],
+};
+
+const state = reactive<{
+  title: string
+  record: RecordData
+  initData: Partial<Form>
+}>({
+  title: '',
+  record: {},
+  initData: {
+    enable: true,
+  },
+});
+
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<Form>>({ enable: true });
+
+async function onOpen(key: ACTION, record?: RecordData) {
+  state.title = key;
+  form.value = cloneDeep(state.initData);
+
+  if (key === ACTION.EDIT) {
+    const res = await getRbacTenantPubTenantInfo({ id: record!.id! });
+    if (res.success) {
+      const { tenantStartTime, tenantEndTime, ...rest } = res?.data ?? {};
+      form.value = {
+        ...rest,
+        tenantTime: [tenantStartTime, tenantEndTime],
+      };
+    }
+  }
+
+  setOpen(true);
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRbacTenantPubTenantUpdate : postRbacTenantPubTenantAdd;
+  formRef.value?.validate().then(() => {
+    const { tenantTime, resourceIds = [], ...rest } = form.value;
+    const params: AddForm | EditForm = {
+      ...rest,
+      tenantStartTime: tenantTime?.[0],
+      tenantEndTime: tenantTime?.[1],
+      pubTenantResourcelist: resourceIds.map(resourceId => ({ resourceId })),
+    };
+
+    setLoading(true);
+    request(params)
+      .then((res) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+const resourceRef = ref();
+const resourceTree = ref<API.PubResourceTreeBo[]>([]);
+const selectedResources = computed(() => {
+  return form.value.resourceIds?.map((id) => {
+    const item = toList(resourceTree.value).find(item => item.id === id);
+    return { name: item?.name ?? '' };
+  }) ?? [];
+});
+
+function onOpenResource() {
+  const selectedIds = form.value.resourceIds ?? [];
+  const tree = resourceTree.value;
+  const treeMap = toList(tree).reduce((map, item) => {
+    map[item.id as string] = item.name;
+    return map;
+  }, {} as any);
+
+  resourceRef.value.open(selectedIds, tree, treeMap);
+}
+
+function onSelectResource(selected: Array<{ id: string, name: string }> = []) {
+  form.value.resourceIds = selected.map(item => item.id);
+}
+
+function getTenantResourceList() {
+  getRbacResourceTenantAddResourceTree().then((res) => {
+    if (res.success) {
+      resourceTree.value = res.data ?? [];
+    }
+  });
+}
+
+function toList<T extends { children?: T[] }>(tree: T[]) {
+  const list = cloneDeep(tree);
+  for (let i = 0; i < list.length; i++) {
+    if (!list[i].children) {
+      continue;
+    }
+    list.splice(i + 1, 0, ...list[i].children as T[]);
+    list[i].children = undefined;
+  }
+  return list;
+}
+
+onMounted(() => {
+  getTenantResourceList();
+});
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}租户`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+    >
+      <a-form-item label="租户名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="32" placeholder="请输入租户名称" />
+      </a-form-item>
+
+      <a-form-item label="租户编码" name="tenantCode">
+        <a-input v-model:value="form.tenantCode" :disabled="state.title === ACTION.EDIT" :maxlength="64" placeholder="请输入租户编码" />
+      </a-form-item>
+
+      <a-form-item label="开始至到期时间" name="tenantTime">
+        <a-range-picker v-model:value="form.tenantTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+      </a-form-item>
+
+      <a-form-item label="二级域名" name="subDomain">
+        <a-input v-model:value="form.subDomain" :maxlength="64" placeholder="请输入二级域名" />
+      </a-form-item>
+
+      <a-form-item label="租户管理员" name="pubUserAdmin">
+        <a-input v-model:value="form.pubUserAdmin" :disabled="state.title === ACTION.EDIT" :maxlength="32" placeholder="请输入租户管理员" />
+      </a-form-item>
+
+      <a-form-item label="是否启用">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+
+      <a-form-item label="所属资源" name="resourceIds">
+        <a-button type="primary" @click="onOpenResource()">
+          选择资源
+        </a-button>
+        （已选{{ form.resourceIds?.length ?? 0 }}条数据）
+        <ResourceSelector ref="resourceRef" @select="onSelectResource" />
+
+        <div class="pt-10px">
+          <template v-for="item in selectedResources" :key="item">
+            <a-tooltip v-if="item.name?.length > 20" :title="item.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${item.name?.slice(0, 20)}...` }}
+              </span>
+            </a-tooltip>
+            <span v-else class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+              {{ item.name }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="setOpen(false)">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/tenant/index.vue

@@ -0,0 +1,192 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { RecordData } from './interface';
+import { getRbacTenantPubTenantDelete, postRbacTenantPubTenantPage } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import TenantEdit from './components/TenantEdit.vue';
+
+defineOptions({
+  name: 'Tenant',
+});
+
+enum ACTION {
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerRef = ref();
+
+function getTableData() {
+  tableRef.value.reload();
+}
+
+function formatDate(date?: string) {
+  return date ? dayjs(date).format('YYYY-MM-DD') : null;
+}
+
+async function request(params: any) {
+  const { current, pageSize, tenantStartTime, tenantEndTime, ...rest } = params;
+  const res = await postRbacTenantPubTenantPage({
+    currentPage: current,
+    pageSize,
+    tenantStartTime: formatDate(tenantStartTime?.[0]),
+    tenantStartTimeEnd: formatDate(tenantStartTime?.[1]),
+    tenantEndTimeStart: formatDate(tenantEndTime?.[0]),
+    tenantEndTimeEnd: formatDate(tenantEndTime?.[1]),
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns: ProColumns<RecordData> = [
+  {
+    valueType: 'a-input',
+    minWidth: 200,
+    title: '租户名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入租户名称',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    minWidth: 200,
+    title: '租户编码',
+    dataIndex: 'tenantCode',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入租户编码',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-range-picker',
+    minWidth: 200,
+    title: '开始时间',
+    dataIndex: 'tenantStartTime',
+    ellipsis: true,
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-range-picker',
+    minWidth: 200,
+    title: '到期时间',
+    dataIndex: 'tenantEndTime',
+    ellipsis: true,
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+  {
+    minWidth: 200,
+    title: '二级域名',
+    dataIndex: 'subDomain',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '状态',
+    dataIndex: 'enable',
+    customRender: ({ text }: { text: boolean }) => {
+      return (
+        text
+          ? <Badge status="success" text="正常" />
+          : <Badge status="error" text="关闭" />
+      );
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'tenant_edit',
+        'tenant_remove',
+      ]);
+    },
+  },
+];
+function onAction(key: string, record?: RecordData) {
+  switch (key) {
+    case ACTION.EDIT:
+      drawerRef.value.open(key, record);
+      break;
+    case ACTION.ADD:
+      drawerRef.value.open(key);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该租户吗？',
+        onOk() {
+          getRbacTenantPubTenantDelete({ id: record?.id as string }).then((res) => {
+            if (res.success) {
+              message.success('删除成功');
+              getTableData();
+            }
+          });
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    py-10px
+    px-10px
+    w-full
+    h-full
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1100 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'tenant_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a v-auth="'tenant_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, record)">
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <span v-auth="'tenant_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <TenantEdit ref="drawerRef" @submit="getTableData()" />
+  </div>
+</template>

package/src/views/tenant/interface.ts

@@ -0,0 +1,4 @@
+export type Form = API.PubTenantBo & { tenantTime?: [any, any] };
+export type AddForm = API.PubTenantDto;
+export type EditForm = API.PubTenantDto;
+export type RecordData = API.PubTenant;