@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/organization/components/drawerOrganization.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getDictItemList } from '@/api/modules/configData';
+import { getRbacOrgInfo, postRbacOrgAddOrg, postRbacOrgUpdateOrg } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'OrganizationEdit',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入组织名称', trigger: 'blur' },
+    { max: 128, message: '长度不能超过128位', trigger: 'change' }],
+  code: [{ required: true, message: '请输入组织编码', trigger: 'blur' },
+    { max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  type: [{ required: true, message: '请输入组织类型', trigger: 'blur' }],
+  areaCode: [{ max: 16, message: '长度不能超过16位', trigger: 'change' }],
+  creditCode: [{ max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  contactPerson: [{ max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  contactMobile: [{ max: 20, message: '长度不能超过20位', trigger: 'change' }],
+};
+const state = reactive({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const typeOptions: Ref<{ label?: string, value?: string }[] | undefined> = ref([]);
+
+getDictItemList({ dictCode: 'orgType' }).then((res: API.ResponseDataListDictItemVo) => {
+  typeOptions.value = res.data?.map((e) => {
+    return {
+      label: e.dictLabel,
+      value: e.dictValue,
+    };
+  });
+});
+const form = ref<Partial<API.PubOrg & { parentName: string } >>({ parentId: '', enable: true });
+async function onOpen(key: ACTION, record?: API.PubOrg) {
+  setOpen(true);
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRbacOrgInfo({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+    }
+  }
+  else if (key === ACTION.ADDNEXT) {
+    form.value = {
+      parentName: record?.name,
+      parentId: record?.id,
+      enable: true,
+      district: false,
+    };
+  }
+  else {
+    form.value = {
+      parentId: '',
+      enable: true,
+      district: false,
+    };
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRbacOrgUpdateOrg : postRbacOrgAddOrg;
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    request(params)
+      .then((res: API.ResponseDataPubOrg) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit', { ...form.value });
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    enable: false,
+  };
+  setOpen(false);
+}
+
+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' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :label-wrap="true"
+    >
+      <a-form-item v-if="form.parentId !== '' && form.parentId !== '0'" label="所属上级">
+        {{ form.parentName }}
+      </a-form-item>
+      <a-form-item label="组织名称" name="name">
+        <a-input v-model:value="form.name" />
+      </a-form-item>
+      <a-form-item label="组织编码" name="code">
+        <a-input v-model:value="form.code" />
+      </a-form-item>
+      <a-form-item label="组织类型" name="type">
+        <a-select v-model:value="form.type" :options="typeOptions" />
+      </a-form-item>
+      <a-form-item label="是否行政区划">
+        <a-switch v-model:checked="form.district" />
+      </a-form-item>
+      <a-form-item v-if="form.district" label="行政区划编码" name="areaCode">
+        <a-input v-model:value="form.areaCode" />
+      </a-form-item>
+      <a-form-item label="是否启用">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+      <a-form-item label="排序">
+        <a-input-number v-model:value="form.sort" />
+      </a-form-item>
+      <a-form-item label="统一社会信用代码" name="creditCode">
+        <a-input v-model:value="form.creditCode" />
+      </a-form-item>
+      <a-form-item label="联系人" name="contactPerson">
+        <a-input v-model:value="form.contactPerson" />
+      </a-form-item>
+      <a-form-item label="联系方式" name="contactMobile">
+        <a-input v-model:value="form.contactMobile" />
+      </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/organization/components/drawerRole.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getRbacOrgRoleGetByOrgId, postRbacOrgRoleSaveOrgRole } from '@/api/modules/rbac';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import RoleSelect from './roleSelect.vue';
+
+defineOptions({
+  name: 'DrawerRole',
+});
+
+const emit = defineEmits(['submit']);
+
+const {
+  resourceModelRef,
+  selectedResources,
+  setSelectedResources,
+  openResourceModel,
+} = useAppAndResource();
+
+const rules: Record<string, Rule[]> = {
+  isInherit: [{ required: true, message: '请选择是否可继承', trigger: 'change' }],
+};
+
+const state = reactive<{ title: string, type: string }>({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.PubOrgRoleBo>>({ isInherit: '0' });
+const orgId = ref('');
+async function onOpen(record?: API.PubRoleResourceBo) {
+  orgId.value = record?.id || '';
+  const fv = await getRbacOrgRoleGetByOrgId({ orgId: orgId.value });
+  form.value = fv.data || {};
+  setOpen(true);
+}
+
+const [loading, setLoading] = useToggle(false);
+
+const roleModelRef = ref();
+function chooseRole() {
+  roleModelRef.value.open((form.value.roleList || []).map((item: API.PubRole) => item.id));
+}
+function onRoleSelected(data: API.PubRole[]) {
+  form.value.roleList = data;
+}
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const rIds = (form.value.roleList || []).map((item: API.PubRole) => {
+      // 在下拉框中选择之后，roleIds每一项的值会变成一个对象
+      if (typeof item === 'object' && item.id) {
+        return item.id;
+      }
+      // 若未更改过，其原始值是string，直接返回
+      return '';
+    });
+    postRbacOrgRoleSaveOrgRole({ orgId: orgId.value, roleIds: rIds.join(','), isInherit: form.value.isInherit || '0' })
+      .then((res) => {
+        if (res.success) {
+          message.success(`授权成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    isInherit: '0',
+  };
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="组织角色授权"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-align="left"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="是否可继承" name="name">
+        <a-switch v-model:checked="form.isInherit" checked-value="1" un-checked-value="0" />
+        <!-- <a-radio-group v-model:value="form.isInherit">
+          <a-radio value="1">
+            是
+          </a-radio>
+          <a-radio value="0">
+            否
+          </a-radio>
+        </a-radio-group> -->
+      </a-form-item>
+      <a-form-item label="基础角色权限" name="roleList">
+        <a-button type="primary" @click="chooseRole">
+          选择角色
+        </a-button>
+      </a-form-item>
+      <a-form-item v-show="form.roleList && form.roleList.length > 0" label="已选角色">
+        <div class="mt-2px">
+          <template v-for="ite in form.roleList" :key="ite.id">
+            <a-tooltip v-if="(ite?.name || '').length > 20" :title="ite.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${ite?.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]">
+              {{ ite.name }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+      <a-form-item v-show="form.inheritRoleList && form.inheritRoleList.length > 0" label="继承角色">
+        <div class="mt-2px">
+          <template v-for="ite in form.inheritRoleList" :key="ite.id">
+            <a-tooltip v-if="(ite?.name || '').length > 20" :title="ite.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${ite?.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]">
+              {{ ite.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>
+    <RoleSelect ref="roleModelRef" @select="onRoleSelected" />
+  </a-drawer>
+</template>

package/src/views/organization/components/roleSelect.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { getRbacPubRoleGroupGetAll, getRbacPubRoleGroupGetById, getRbacRoleRoleList } from '@/api/modules/rbac';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+
+defineOptions({
+  name: 'RoleSelect',
+});
+
+const emit = defineEmits(['select']);
+
+const loading = ref(false);
+const checkedKeys: Ref<string[]> = ref([]);
+const rightItems: Ref<API.PubRole[]> = ref([]);
+const roleData = ref<API.PubRole[]>([]);
+const searchContent = ref('');
+const open = defineModel<boolean>('open');
+const selectedGroupId = ref('');
+const roleGroupOptions = ref<API.PubRoleGroup[]>([]);
+const roleInGroup = ref<API.PubRole[]>([]);
+
+const setOpen = useToggle(open);
+watch(() => checkedKeys.value, (val) => {
+  rightItems.value = val.reduce((acc: API.PubRole[], ite: string) => {
+    const temp = roleData.value.find(item => item.id === ite) || {};
+    acc.push(temp);
+    return acc;
+  }, []);
+}, { deep: true });
+watch(() => selectedGroupId.value, (val) => {
+  changeGroup(val);
+});
+async function onOpen(ids: string[]) {
+  // 获取所有角色组
+  const groupRes = await getRbacPubRoleGroupGetAll({ name: '' });
+  roleGroupOptions.value = groupRes.data || [];
+  selectedGroupId.value = '';
+  await changeGroup('');
+  checkedKeys.value = [...ids];
+  setOpen(true);
+}
+
+function clearAllChecked() {
+  checkedKeys.value = [];
+}
+
+function handleCloseTag(removedTagId: string) {
+  const index = checkedKeys.value.findIndex(item => item === removedTagId);
+  if (index >= 0) {
+    checkedKeys.value.splice(index, 1);
+  }
+}
+
+function notifySelect() {
+  emit('select', rightItems.value);
+  setOpen(false);
+}
+
+function filterName(v: API.PubRole) {
+  return roleInGroup.value.findIndex(item => item.id === v.id) > -1 && v.name?.includes(searchContent.value);
+}
+
+// 切换角色组
+async function changeGroup(value: string | undefined) {
+  loading.value = true;
+  if (value) {
+    const res = await getRbacPubRoleGroupGetById({ id: value });
+    loading.value = false;
+    roleInGroup.value = res.data?.roles || [];
+  }
+  else {
+    const res = await getRbacRoleRoleList();
+    loading.value = false;
+    roleData.value = res.data || [];
+    // 获取两个数组交集
+    roleInGroup.value = [...roleData.value].filter(x => [...(res.data || [])].some(y => y.id === x.id));
+  }
+}
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    class="custom_modal"
+    title="角色选择"
+    :mask-closable="false"
+    :width="750"
+  >
+    <div class="h-340px border-1px border-solid flex flex-row border_color">
+      <div class="w-360px flex flex-col">
+        <div class="flex-1 overflow-hidden py-10px px-10px">
+          <a-input v-model:value="searchContent" placeholder="请输入" allow-clear>
+            <template #addonBefore>
+              <a-select v-model:value="selectedGroupId" style="width: 90px;">
+                <a-select-option value="">
+                  全部
+                </a-select-option>
+                <a-select-option v-for="item in roleGroupOptions" :key="item.id" :value="item.id">
+                  <a-tooltip :title="item.name">
+                    {{ item.name }}
+                  </a-tooltip>
+                </a-select-option>
+              </a-select>
+            </template>
+            <template #suffix>
+              <SearchOutlined />
+            </template>
+          </a-input>
+          <div class="overflow-y-auto overflow-x-hidden h-[calc(100%-30px)] mt-10px">
+            <a-spin v-if="loading" class="cent" />
+            <a-checkbox-group v-else v-model:value="checkedKeys" class="w-full">
+              <div v-for="ite in roleData" v-show="filterName(ite)" :key="ite.id" class="w-full py-10px bodb">
+                <a-checkbox :value="ite.id">
+                  <a-tooltip v-if="(ite.name || '').length > 22" :title="ite.name">
+                    {{ `${ite?.name?.slice(0, 22)}...` }}
+                  </a-tooltip>
+                  <span v-else>{{ ite.name }}</span>
+                </a-checkbox>
+              </div>
+            </a-checkbox-group>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-col border-solid border-0px border-l-1px border_color">
+        <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
+          <div class="">
+            已选角色
+          </div>
+          <div class="cursor-pointer text-[#165DFF]" @click="clearAllChecked">
+            清空
+          </div>
+        </div>
+        <div class="flex-1 p-10px overflow-auto">
+          <div v-for="item in rightItems" :key="item.id" class="inline-block mb-6px max-w-300px">
+            <a-tooltip v-if="(item.name || '').length > 20" :title="item.name">
+              <a-tag class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]" closable @close="handleCloseTag(item.id || '')">
+                {{ `${item?.name?.slice(0, 20)}...` }}
+              </a-tag>
+            </a-tooltip>
+            <a-tag
+              v-else
+              class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]"
+              closable
+              @close="handleCloseTag(item.id || '')"
+            >
+              {{ item.name }}
+            </a-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button @click="setOpen(false)">
+        取消
+      </a-button>
+      <a-button type="primary" @click="notifySelect">
+        确定
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.cent {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.border_color {
+  border-color: #e5e6eb;
+}
+
+[data-theme="dark"] {
+  .border_color {
+    border-color: rgb(253 253 253 / 12%);
+  }
+}
+
+.border_c {
+  border: 1px dashed #ccc;
+  border-radius: 10px;
+}
+
+:deep(.ant-dropdown-link) {
+  padding: 4px 6px;
+  font-size: 12px;
+  border-radius: 2px;
+  transform: scale(0.7);
+}
+</style>
+
+<style lang='scss' scoped>
+.custom_modal {
+  :deep(.ant-modal-content) {
+    padding: 0;
+    border-radius: 0;
+  }
+
+  :deep(.ant-modal-header) {
+    padding: 12px 16px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #e5e6eb;
+  }
+
+  :deep(.ant-modal-title) {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1d2129;
+  }
+
+  :deep(.ant-modal-body) {
+    padding: 16px;
+  }
+
+  .bodb {
+    border-bottom: 1px solid #e5e6eb;
+  }
+
+  :deep(.ant-modal-footer) {
+    padding: 16px;
+    border-top: 1px solid #e5e6eb;
+
+    .ant-btn {
+      border-radius: 2px;
+    }
+  }
+}
+
+:deep(.ant-tree-checkbox) {
+  margin-block-start: 0;
+  margin-inline-end: 2px;
+}
+
+:deep(.ant-tree-checkbox + span .ant-tree-iconEle) {
+  margin-right: 4px;
+}
+
+.custom_tag {
+  padding: 3px 8px;
+  border-width: 0;
+  border-radius: 2px;
+
+  :deep(.ant-tag-close-icon) {
+    color: rgb(22 93 255 / 60%);
+
+    &:hover {
+      color: #165dff;
+    }
+  }
+}
+</style>

package/src/views/organization/enum.ts

@@ -0,0 +1,26 @@
+export enum ACTION {
+  AUTHORIZE = '授权',
+  ADD = '新增',
+  ADDNEXT = '新增下级',
+  /** 详情 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+export enum RESOURCE_TYPE {
+  OWNER = '1',
+  ALL = '2',
+}
+export enum ENABLE_TYPE {
+  ON = 1,
+  OFF = 0,
+}
+export const kjOptions = [
+  { label: '仅自己', value: RESOURCE_TYPE.OWNER },
+  { label: '全部可见', value: RESOURCE_TYPE.ALL },
+];
+export const enableOptons = [
+  { label: '正常', value: ENABLE_TYPE.ON },
+  { label: '关闭', value: ENABLE_TYPE.OFF },
+];