@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/components/setItem.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import AnimationItem from './animation_item.vue';
+import HCheckList from './HCheckList.vue';
+
+defineOptions({
+  name: 'SetItem',
+});
+const props = withDefaults(
+  defineProps<{
+    name: string
+    descripe: string
+    type: string
+    open: boolean
+    activeStyle?: Val
+    styleOptions?: CheckOptions
+    lightAnimationData: string
+    darkAnimationData: string
+  }>(),
+  {
+    name: '',
+    descripe: '',
+    type: '',
+    open: false,
+    activeStyle: '',
+    styleOptions: () => { return []; },
+    lightAnimationData: '',
+    darkAnimationData: '',
+  },
+);
+
+const emit = defineEmits(['change']);
+
+type CheckOptions = {
+  label?: string | number
+  icon?: string
+  value: string | number
+  disabled?: boolean
+}[];
+
+type Val = Exclude<Settings.breadcrumb['style'] | Settings.menu['menuActiveStyle'] | Settings.tabbar['style'], undefined>;
+
+const setOpen = ref(props.open);
+const setActiveStyle = ref(props.activeStyle);
+const animateItem = ref();
+
+function play() {
+  if (animateItem.value) {
+    animateItem.value?.play();
+  }
+}
+
+function stop() {
+  if (animateItem.value) {
+    animateItem.value?.stop();
+  }
+}
+
+watch(() => setOpen.value, () => {
+  emit('change', setOpen.value);
+});
+
+watch(() => setActiveStyle.value, () => {
+  emit('change', setActiveStyle.value);
+});
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row items-center justify-between h-24px">
+      <div class="flex flex-row items-center">
+        <span class="text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">{{ props.name }}</span>
+        <a-tooltip v-if="props.descripe" :title="props.descripe">
+          <PubinfoIcon name="i-ri-question-line" class="text-[#4E5969] dark:text-[#C9CDD4]" />
+        </a-tooltip>
+      </div>
+
+      <a-switch
+        v-if="props.type === 'switch'"
+        v-model:checked="setOpen"
+        checked-children="开启"
+        un-checked-children="关闭"
+      />
+      <HCheckList
+        v-if="props.type === 'check'"
+        v-model="setActiveStyle"
+        class="custom_style h-24px"
+        :options="styleOptions"
+      />
+    </div>
+    <div
+      class="mt-[16px] item_ani flex-1 dark:bg-[#3a3e43]! dark:border-transparent!"
+      @mouseenter="play()"
+      @mouseleave="stop()"
+    >
+      <div class="h-full w-[75%] rounded-[8px] jb flex justify-center">
+        <AnimationItem
+          ref="animateItem"
+          :light-animation-data="props.lightAnimationData"
+          :dark-animation-data="props.darkAnimationData"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item_ani {
+  display: flex;
+  flex-direction: column;
+  place-items: center center;
+  padding-top: 26px;
+  background-color: var(--g-bg);
+  border: 1px solid var(--g-tabbar-tab-hover-bg);
+  border-radius: 8px;
+
+  .jb {
+    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+  }
+}
+
+.custom_style {
+  :deep(.text-sm) {
+    font-size: 12px;
+  }
+}
+</style>

package/src/views/data-permission/components/createAndEditDataPermission.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import type { ModelValue } from '@/components/OrgUserSelector/OrgSelector.vue';
+import type { SelectedResourceInfo } from '@/components/ResourceSelector/hooks/useAppAndResource';
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getRbacPubDataPermissionsGetById, postRbacPubDataPermissionsSave, postRbacPubDataPermissionsUpdate } from '@/api/modules/rbac';
+import GroupSelector from '@/components/GroupSelector/index.vue';
+import OrgSelector from '@/components/OrgUserSelector/OrgSelector.vue';
+import { RESOURCE_MODE } from '@/components/ResourceSelector/enum';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import ResourceSelector from '@/components/ResourceSelector/index.vue';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { DATA_PERMISSION_TYPE, dataPermissionOptionsAll } from '../enum';
+
+defineOptions({
+  name: 'CreateAndEditDataPermission',
+});
+
+const emit = defineEmits(['submit']);
+
+const resourceMode = RESOURCE_MODE.DATA_PERMISSION;
+const {
+  appList,
+  resourceModelRef,
+  selectedResources,
+  getAppList,
+  updateTreeDataAndResourceMap,
+  setSelectedResources,
+  updateSelectedResources,
+  clearSelectedResources,
+  openResourceModel,
+} = useAppAndResource(resourceMode);
+
+const dialogTitle = ref('');
+const defaultFormData = {
+  name: '',
+  type: '',
+  appId: '',
+  orgIds: [],
+  resourceIds: [],
+};
+const formRef = ref<FormExpose>();
+const rules: Record<string, Rule[]> = {
+  name: [
+    {
+      required: true,
+      message: '请输入数据权限名称',
+      trigger: ['blur', 'change'],
+    },
+  ],
+  type: [
+    {
+      required: true,
+      message: '请选择数据权限规则',
+      trigger: ['blur', 'change'],
+    },
+  ],
+  appId: [{ required: true, message: '请选择所属应用', trigger: ['blur', 'change'] }],
+  resourceIds: [{ type: 'array', required: true, message: '请选择资源', trigger: ['blur', 'change'] }],
+  orgIds: [{ type: 'array', required: true, message: '请选择部门', trigger: ['blur', 'change'] }],
+  groupIds: [{ type: 'array', required: true, message: '请选择群组', trigger: ['blur', 'change'] }],
+};
+const form = ref<API.shujuquanxianxinzenghuogengxinduixiang>({
+  ...defaultFormData,
+});
+const needOrg = computed(() => form.value.type === DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB || form.value.type === DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY);
+const needGroup = computed(() => form.value.type === DATA_PERMISSION_TYPE.CUSTOM_GROUP);
+
+const isEdit = ref(false);
+const [open, setOpen] = useToggle(false);
+
+// 部门相关
+const orgRef = ref();
+const selectedOrgs = ref<ModelValue[]>([]);
+
+// 群组相关
+const groupRef = ref();
+const selectedGroups = ref<API.PubGroup[]>([]);
+
+// 获取应用列表
+getAppList();
+
+async function onOpen(
+  title: string,
+  record?: API.shujuquanxianxinzenghuogengxinduixiang,
+) {
+  dialogTitle.value = title;
+  isEdit.value = false;
+  form.value = { ...defaultFormData };
+  clearSelectedResources();
+  clearSelectedOrgs();
+  clearSelectedGroups();
+
+  if (record) {
+    isEdit.value = true;
+
+    const res: API.ResponseDatashujuquanxianbianjiduixiang = await getRbacPubDataPermissionsGetById({ id: record?.id as string });
+    if (res.success && res.data) {
+      const { id, type, name, appId, orgs, resources, groups } = res.data;
+      form.value = {
+        id,
+        type,
+        appId,
+        name: name || '',
+        orgIds: orgs?.map((item: API.PubOrgBo) => item.id || ''),
+        resourceIds: resources?.map((item: API.PubResourceTreeBo) => item.id || ''),
+        groupIds: groups?.map((item: API.PubResourceTreeBo) => item.id || ''),
+      };
+
+      if (orgs && orgs.length) {
+        selectedOrgs.value = orgs.map((org) => {
+          return {
+            orgId: org.id,
+            orgName: org.name,
+          };
+        });
+      }
+
+      if (groups && groups.length) {
+        selectedGroups.value = groups.map((org) => {
+          return {
+            id: org.id,
+            name: org.name,
+            value: org.id,
+            label: org.name && org.name.length > 20 ? org.name.slice(0, 20) : org.name,
+          };
+        });
+      }
+
+      await updateTreeDataAndResourceMap(form.value.appId as string);
+      if (form.value.resourceIds) {
+        updateSelectedResources(form.value.resourceIds);
+      }
+    }
+  }
+
+  setOpen(true);
+}
+
+function changeApp(value: any) {
+  form.value.resourceIds = [];
+  selectedResources.value = [];
+
+  if (value) {
+    updateTreeDataAndResourceMap(value);
+  }
+}
+
+function chooseResource() {
+  formRef.value?.validateFields(['appId']).then(() => {
+    if (form.value.appId && form.value.resourceIds) {
+      openResourceModel(form.value.resourceIds);
+    }
+  }).catch(() => {});
+}
+
+function onResourceSelected(data: SelectedResourceInfo[]) {
+  setSelectedResources(data);
+  if (data && data.length) {
+    form.value.resourceIds = data.map(item => item.id);
+    formRef.value?.clearValidate(['resourceIds']);
+  }
+  else {
+    form.value.resourceIds = [];
+  }
+}
+
+function showOrg() {
+  if (orgRef.value) {
+    orgRef.value.open();
+  }
+}
+
+function showGroup() {
+  if (groupRef.value) {
+    groupRef.value.open(selectedGroups.value);
+  }
+}
+
+function clearSelectedOrgs() {
+  selectedOrgs.value = [];
+}
+
+function clearSelectedGroups() {
+  selectedGroups.value = [];
+}
+
+function onOrgSelected(orgs: ModelValue[]) {
+  selectedOrgs.value = orgs;
+  if (orgs.length) {
+    form.value.orgIds = orgs.map(org => org.orgId || '');
+    formRef.value?.clearValidate(['orgIds']);
+  }
+  else {
+    form.value.orgIds = [];
+  }
+}
+
+function onGroupSelect(groups: API.PubGroup[]) {
+  selectedGroups.value = groups;
+  if (groups.length) {
+    form.value.groupIds = groups.map(group => group.id || '');
+    formRef.value?.clearValidate(['groupIds']);
+  }
+  else {
+    form.value.groupIds = [];
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+
+    const submitFn = isEdit.value
+      ? postRbacPubDataPermissionsUpdate
+      : postRbacPubDataPermissionsSave;
+
+    const params: API.shujuquanxianxinzenghuogengxinduixiang = {
+      ...form.value,
+    };
+
+    if (!needOrg.value) {
+      delete params.orgIds;
+    }
+
+    if (!needGroup.value) {
+      delete params.groupIds;
+    }
+
+    submitFn(params)
+      .then((res: API.ResponseDataVoid) => {
+        if (res.success) {
+          message.success(`${dialogTitle.value}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${dialogTitle}数据权限`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <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="20" />
+      </a-form-item>
+      <a-form-item label="数据权限规则" name="type">
+        <a-select
+          v-model:value="form.type"
+          :options="dataPermissionOptionsAll"
+          placeholder="请选择"
+        />
+      </a-form-item>
+      <a-form-item label="所属应用" name="appId">
+        <a-select
+          v-model:value="form.appId"
+          :disabled="isEdit"
+          :options="appList"
+          @change="changeApp"
+        />
+      </a-form-item>
+      <a-form-item label="所属资源" name="resourceIds">
+        <a-button type="primary" @click="chooseResource">
+          编辑资源
+        </a-button>
+        <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-item v-if="needOrg" label="所属部门" name="orgIds">
+        <a-button type="primary" @click="showOrg">
+          编辑部门
+        </a-button>
+        <div class="pt-10px">
+          <template v-for="item in selectedOrgs" :key="item">
+            <a-tooltip v-if="item.orgName && item.orgName.length > 20" :title="item.orgName">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${item.orgName?.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.orgName }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+      <a-form-item v-if="needGroup" label="所属群组" name="groupIds">
+        <a-button type="primary" @click="showGroup">
+          编辑群组
+        </a-button>
+        <div class="pt-10px">
+          <template v-for="item in selectedGroups" :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>
+
+    <OrgSelector
+      ref="orgRef"
+      :model-value="selectedOrgs"
+      multiple
+      @submit="onOrgSelected"
+    />
+    <ResourceSelector ref="resourceModelRef" :mode="resourceMode" @select="onResourceSelected" />
+    <GroupSelector ref="groupRef" @select="onGroupSelect" />
+  </a-drawer>
+</template>

package/src/views/data-permission/enum.ts

@@ -0,0 +1,59 @@
+export enum ACTION {
+  ADD = '新增',
+  EDIT = '编辑',
+  VIEW = '查看',
+  REMOVE = '删除',
+}
+
+/** 数据权限类型 */
+export enum DATA_PERMISSION_TYPE {
+  /* 查看全部 */
+  ALL = '1',
+  /* 仅看自己 */
+  ONLY_SELF = '2',
+  /* 仅看所在部门 */
+  SELF_DEPT_ONLY = '3',
+  /* 仅看所在部门及子部门 */
+  SELF_DEPT_AND_SUB = '4',
+  /* 仅自选部门 */
+  CUSTOM_DEPT_ONLY = '5',
+  /* 自选部门及子部门 */
+  CUSTOM_DEPT_AND_SUB = '6',
+  /* 指定群组 */
+  CUSTOM_GROUP = '7',
+}
+
+export type dataPermissionType = DATA_PERMISSION_TYPE.ALL |
+  DATA_PERMISSION_TYPE.ONLY_SELF |
+  DATA_PERMISSION_TYPE.SELF_DEPT_ONLY |
+  DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB |
+  DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB |
+  DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY |
+  DATA_PERMISSION_TYPE.CUSTOM_GROUP;
+
+export const dataPermissionTypeLabel = {
+  [DATA_PERMISSION_TYPE.ALL]: '查看全部',
+  [DATA_PERMISSION_TYPE.ONLY_SELF]: '仅看自己',
+  [DATA_PERMISSION_TYPE.SELF_DEPT_ONLY]: '仅看所在部门',
+  [DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB]: '仅看所在部门及子部门',
+  [DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB]: '自选部门及子部门',
+  [DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY]: '仅自选部门',
+  [DATA_PERMISSION_TYPE.CUSTOM_GROUP]: '指定群组',
+};
+
+export const dataPermissionOptions = [
+  { label: '查看全部', value: DATA_PERMISSION_TYPE.ALL },
+  { label: '仅看自己', value: DATA_PERMISSION_TYPE.ONLY_SELF },
+  { label: '仅看所在部门', value: DATA_PERMISSION_TYPE.SELF_DEPT_ONLY },
+  { label: '仅看所在部门及子部门', value: DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB },
+];
+
+export const dataPermissionOptionsAll = [
+  { label: '查看全部', value: DATA_PERMISSION_TYPE.ALL },
+  { label: '仅看自己', value: DATA_PERMISSION_TYPE.ONLY_SELF },
+  { label: '仅看所在部门', value: DATA_PERMISSION_TYPE.SELF_DEPT_ONLY },
+  { label: '仅看所在部门及子部门', value: DATA_PERMISSION_TYPE.SELF_DEPT_AND_SUB },
+  { label: '自选部门及子部门', value: DATA_PERMISSION_TYPE.CUSTOM_DEPT_AND_SUB },
+  { label: '仅自选部门', value: DATA_PERMISSION_TYPE.CUSTOM_DEPT_ONLY },
+  { label: '指定群组', value: DATA_PERMISSION_TYPE.CUSTOM_GROUP },
+];