@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/dictionary/itemlist.vue

@@ -0,0 +1,164 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { deleteDictItemDeleteById, postDictItemPage } from '@/api/modules/configData';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import drawerDictionaryItem from './components/drawerDictionaryItem.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'DictionaryItem',
+});
+const { auth } = useAuth();
+const tableRef = ref();
+const DrawerDictionaryItemRef = ref();
+
+const columns: ProColumns<API.DictItemVo> = [
+  {
+    minWidth: 100,
+    title: '字典项标签名',
+    dataIndex: 'dictLabel',
+    ellipsis: true,
+  },
+  {
+    minWidth: 100,
+    title: '字典项值',
+    dataIndex: 'dictValue',
+    ellipsis: true,
+  },
+  {
+    minWidth: 200,
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+  {
+    width: 80,
+    minWidth: 60,
+    title: '排序',
+    dataIndex: 'sort',
+  },
+  {
+    width: 100,
+    minWidth: 80,
+    title: '是否启用',
+    dataIndex: 'enable',
+    customRender({ text }: { text: boolean }) {
+      return (
+        text
+          ? <Badge status="success" text="启用" />
+          : <Badge status="error" text="禁用" />
+      );
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 160,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'dictionary_data_remove',
+        'dictionary_data_edit',
+      ]);
+    },
+  },
+];
+
+const state = reactive({
+  code: '',
+  name: '',
+});
+const route = useRoute();
+onMounted(() => {
+  state.code = route.query.code as string;
+});
+
+function onAction(key: string, record?: API.DictItemVo): void {
+  switch (key) {
+    case ACTION.ADD:
+      DrawerDictionaryItemRef.value.open(key, state.code);
+      break;
+    case ACTION.EDIT:
+      DrawerDictionaryItemRef.value.open(key, state.code, record);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该字典数据吗？',
+        onOk() {
+          deleteDictItemDeleteById({ id: record?.id as string }).then((res: API.ResponseDataVoid) => {
+            if (res.success) {
+              message.success('删除成功');
+              getDictData();
+            }
+          });
+        },
+      });
+      break;
+  }
+}
+
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postDictItemPage({
+    currentPage: current,
+    pageSize,
+    code: route.query.code,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getDictData() {
+  tableRef.value.reload();
+}
+</script>
+
+<template>
+  <div
+    p-20px
+    w-full
+    h-full
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :search="false"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1040 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'dictionary_data_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="'dictionary_data_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, record)">
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <a v-auth="'dictionary_data_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>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+
+    <drawerDictionaryItem
+      ref="DrawerDictionaryItemRef"
+      @submit="getDictData()"
+    />
+  </div>
+</template>

package/src/views/group/components/drawerGroup.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getGroupDetailById, postGroupSaveOrUpdate } from '@/api/modules/assist';
+import { selectOrg, selectUser } from '@/components/OrgUserSelector';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION, GROUP_TYPE, useOptions } from '../enum';
+
+defineOptions({
+  name: 'DrawerGroup',
+});
+
+const emit = defineEmits(['submit']);
+
+const state = reactive({
+  title: '',
+  type: '',
+});
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入群组名称', trigger: 'blur' },
+    { max: 128, message: '长度不能超过128位', trigger: 'change' }],
+  remark: [{ max: 250, message: '长度不能超过250位', trigger: ['blur', 'change'] }],
+  viewScope: [{ required: true, message: '请选择使用范围', trigger: ['blur', 'change'] }],
+  pubGroupMemberList: [{ required: true, message: '请选择群组成员', trigger: ['blur', 'change'] }],
+};
+
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+
+type Member = API.PubGroupMemberDto;
+
+const form = ref<API.PubGroupBo & { pubGroupMemberList?: Member[] }>({});
+const memberList = computed(() => {
+  return form.value?.pubGroupMemberList?.map((item) => {
+    return {
+      ...item,
+      name: state.type === GROUP_TYPE.ORG ? item.orgName : item.userName,
+    };
+  });
+});
+
+async function onOpen(key: ACTION, type: string, record?: API.PubGroup) {
+  setOpen(true);
+  state.title = key;
+  state.type = type;
+  form.value = {};
+
+  if (key === ACTION.EDIT) {
+    const res = await getGroupDetailById({ id: record?.id as string });
+    if (res.success) {
+      form.value = res?.data ?? {};
+    }
+  }
+}
+
+function chooseMember() {
+  if (state.type === GROUP_TYPE.ORG) {
+    selectOrg({
+      modelValue: form.value.pubGroupMemberList ?? [],
+      multiple: true,
+      onSubmit(selected = []) {
+        form.value.pubGroupMemberList = selected;
+      },
+    });
+  }
+
+  if (state.type === GROUP_TYPE.PER) {
+    selectUser({
+      modelValue: form.value.pubGroupMemberList ?? [],
+      multiple: true,
+      onSubmit(selected = []) {
+        form.value.pubGroupMemberList = selected;
+      },
+    });
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const { pubGroupMemberList = [], ...rest } = form.value;
+    const params: any = {
+      ...rest,
+      type: state.type,
+      pubGroupMemberList: pubGroupMemberList?.map((e) => {
+        return {
+          orgId: e?.orgId,
+          userId: e?.userId,
+        };
+      }),
+    };
+    delete params.createTime;
+    delete params.updateTime;
+    postGroupSaveOrUpdate(params)
+      .then((res: API.ResponseData) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}${state.type === GROUP_TYPE.ORG ? '组织' : '人员'}群组`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :label-wrap="true"
+    >
+      <a-form-item label="群组名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="128" />
+      </a-form-item>
+      <a-form-item label="群组描述" name="remark">
+        <a-textarea
+          v-model:value="form.remark"
+          :maxlength="250"
+          show-count
+        />
+      </a-form-item>
+      <a-form-item label="群组使用范围" name="viewScope">
+        <a-select v-model:value="form.viewScope" :options="useOptions" placeholder="本部门/本部门及子部门/全部" />
+      </a-form-item>
+      <a-form-item label="群组成员" name="pubGroupMemberList">
+        <a-button type="primary" @click="chooseMember">
+          编辑成员
+        </a-button>
+        <div class="pt-10px">
+          <template v-for="item in memberList" :key="item">
+            <a-tooltip v-if="item.name && 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="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/group/enum.ts

@@ -0,0 +1,25 @@
+export enum ACTION {
+  /** 新增 */
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+export enum GROUP_USE_TYPE {
+  OWNER = '1',
+  PARENT = '2',
+  ALL = '3',
+}
+
+export const useOptions = [
+  { label: '本部门', value: GROUP_USE_TYPE.OWNER },
+  { label: '本部门及子部门', value: GROUP_USE_TYPE.PARENT },
+  { label: '全部', value: GROUP_USE_TYPE.ALL },
+];
+
+export enum GROUP_TYPE {
+  ORG = '1',
+  PER = '2',
+}

package/src/views/group/index.vue

@@ -0,0 +1,207 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { deleteGroupDeleteById, postGroupFindPage } from '@/api/modules/assist';
+import { ProTable } from '@pubinfo/pro-components';
+import { message, Modal } from 'ant-design-vue';
+import DrawerGroup from './components/drawerGroup.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'GroupManage',
+});
+
+const query = ref<{ type: string }>({ type: '1' });
+const data = ref<API.PubGroup[]>([]);
+
+const tableRef = ref<typeof ProTable>();
+const drawerGroupRef = ref<InstanceType<typeof DrawerGroup>>();
+
+function getGroupData() {
+  tableRef.value?.reload();
+}
+
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postGroupFindPage({
+    currentPage: current,
+    pageSize,
+    ...rest,
+    type: query.value.type,
+  });
+
+  return {
+    success: true,
+    data: res.data?.records ?? [],
+    total: res.data?.total,
+  };
+}
+
+const columns: ProColumns<API.PubGroup> = [
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    minWidth: 200,
+    title: '群组名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入群组名称',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '群组描述',
+    dataIndex: 'remark',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '群组使用范围',
+    dataIndex: 'viewScope',
+    customRender: ({ text }) => {
+      if (text === '1') {
+        return '本部门';
+      }
+      else if (text === '2') {
+        return '本部门及子部门';
+      }
+      else {
+        return '全部';
+      }
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '最后一次编辑时间',
+    dataIndex: 'updateTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '编辑人',
+    dataIndex: 'updatedUserName',
+  },
+  {
+    hideInSearch: true,
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+  },
+];
+
+function changeType() {
+  tableRef.value?.reload();
+}
+
+function onAction(key: string, type: string, record?: API.PubGroup): void {
+  switch (key) {
+    case ACTION.EDIT:
+      drawerGroupRef.value?.open(key, type, record);
+      break;
+    case ACTION.ADD:
+      drawerGroupRef.value?.open(key, type);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该群组吗？',
+        onOk() {
+          deleteGroupDeleteById({ id: record?.id as string })
+            .then(({ success }) => {
+              if (success) {
+                message.success('删除成功');
+                getGroupData();
+              }
+            });
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    py-10px
+    px-10px
+    w-full
+    h-full
+  >
+    <div
+      h-full
+      w-full
+      bg-white
+      rounded-8px
+      class="dark:bg-[#141414]"
+    >
+      <a-tabs v-model:active-key="query.type" class="tabs_custom" @change="changeType">
+        <a-tab-pane key="1" tab="组织群组" />
+        <a-tab-pane key="2" tab="人员群组" />
+      </a-tabs>
+
+      <div style="height: calc(100% - 48px);">
+        <ProTable
+          ref="tableRef"
+          row-key="id"
+          :request="request"
+          :columns="columns"
+          :data-source="data"
+          auto-height
+          :scroll="{ x: 1100 }"
+        >
+          <template #toolbar>
+            <a-button type="primary" @click="onAction(ACTION.ADD, query.type)">
+              <PlusCircleOutlined />
+              {{ ACTION.ADD }}
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'action'">
+              <a-space>
+                <a class="flex items-center" @click="onAction(ACTION.EDIT, query.type, record)">
+                  <PubinfoIcon name="edit" class="text-base" />
+                  <span class="ml-4px">{{ ACTION.EDIT }}</span>
+                </a>
+                <span
+                  class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
+                  @click="onAction(ACTION.REMOVE, query.type, record)"
+                >
+                  <PubinfoIcon name="remove" class="text-base" />
+                  <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+                </span>
+              </a-space>
+            </template>
+          </template>
+        </ProTable>
+      </div>
+    </div>
+    <DrawerGroup ref="drawerGroupRef" @submit="getGroupData()" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box_sh {
+  box-shadow:
+    0 1px 2px 0 rgb(0 0 0 / 3%),
+    0 1px 6px -1px rgb(0 0 0 / 2%),
+    0 2px 4px 0 rgb(0 0 0 / 2%);
+}
+
+.tabs_custom {
+  height: 46px;
+
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+
+    .ant-tabs-nav-list {
+      padding-left: 16px;
+    }
+  }
+}
+</style>