@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/user/components/OrgAndPosition.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { getRbacPostList } from '@/api/modules/rbac';
+import { useRequest } from 'alova/client';
+import { Form as AForm, Modal, theme } from 'ant-design-vue';
+
+defineOptions({
+  name: 'OrgAndPosition',
+});
+
+const modelValue = defineModel<Form['userOrgList']>({ default: [] });
+
+const { token } = theme.useToken();
+const { onFieldChange } = AForm.useInjectFormItemContext();
+
+watch(() => modelValue.value, () => {
+  onFieldChange();
+}, { deep: true });
+
+const { data: positionOptions } = useRequest(
+  params => getRbacPostList(params, {
+    transform(data) {
+      return data.data ?? [];
+    },
+  }),
+  { initialData: [] },
+);
+
+function uniqOrgValidator(_: unknown, value: string) {
+  const number = modelValue.value?.filter(item => item.orgId === value)?.length ?? 0;
+  if (number > 1) {
+    return Promise.reject(new Error('请勿重复选择组织'));
+  }
+  return Promise.resolve();
+}
+
+function onUniqCurrent(index: number) {
+  modelValue.value = modelValue.value?.map((e, i) => {
+    return {
+      ...e,
+      main: index === i,
+    };
+  });
+}
+
+function onAdd() {
+  modelValue.value?.push({
+    orgId: null,
+    positionList: [],
+    main: false,
+  } as any);
+}
+
+function onRemove(index: number) {
+  Modal.confirm({
+    title: '删除',
+    content: '确定要删除吗？',
+    zIndex: 4000,
+    onOk() {
+      modelValue.value?.splice(index, 1);
+    },
+  });
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <a-card
+      v-for="(item, index) in modelValue"
+      :key="index"
+      size="small"
+      :body-style="{ padding: '16px' }"
+    >
+      <template #title>
+        <div class="flex items-center space-x-1">
+          <PubinfoIcon v-if="item.main" name="org-main" class="text-2xl" />
+          <PubinfoIcon v-else name="org-unmain" class="text-2xl" />
+          <div :style="item.main ? { color: token.colorPrimary } : null" class="font-normal">
+            {{ `组织${index + 1}` }}
+          </div>
+        </div>
+      </template>
+      <template #extra>
+        <a-button
+          v-if="!item.main && modelValue && modelValue?.length > 1"
+          type="link"
+          danger
+          @click="onRemove(index)"
+        >
+          删除
+        </a-button>
+      </template>
+      <a-form-item
+        label="所属组织"
+        :name="['userOrgList', index, 'orgId']"
+        :label-col="{ span: 6 }"
+        :rules="[
+          { required: true, message: '所属组织不能为空' },
+          { validator: uniqOrgValidator, trigger: 'change' },
+        ]"
+      >
+        <OrgSelector
+          :model-value="item.orgId ? [{ orgId: item.orgId, orgName: item.orgName }] : []"
+          @submit="(orgs) => {
+            const org = orgs?.[0];
+            item.orgId = org?.orgId;
+            item.orgName = org?.orgName;
+          }"
+        >
+          <template #trigger>
+            <div class="flex items-center overflow-hidden">
+              <a-tooltip :title="item.orgName">
+                <span v-if="item.orgName" class="mr-2 truncate">{{ item.orgName }}</span>
+              </a-tooltip>
+              <a-button type="primary" size="small">
+                选择组织
+              </a-button>
+            </div>
+          </template>
+        </OrgSelector>
+      </a-form-item>
+
+      <a-form-item
+        label="所属岗位"
+        :name="['userOrgList', index, 'positionList']"
+        :label-col="{ span: 6 }"
+      >
+        <a-select
+          v-model:value="item.positionList"
+          label-in-value
+          :field-names="{ label: 'name', value: 'id' }"
+          :options="positionOptions"
+          allow-clear
+          mode="multiple"
+          placeholder="请选择所属岗位"
+        />
+      </a-form-item>
+
+      <a-form-item
+        label="主要组织"
+        :name="['userOrgList', index, 'main']"
+        :label-col="{ span: 6 }"
+      >
+        <a-switch
+          v-model:checked="item.main"
+          :disabled="item.main"
+          @change="onUniqCurrent(index)"
+        />
+      </a-form-item>
+    </a-card>
+
+    <a-button type="primary" @click="onAdd">
+      添加组织
+    </a-button>
+  </div>
+</template>

package/src/views/user/components/UserAuthorization.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import type { AuthItem } from '../interface';
+import { getRbacPubDataPermissionsDataPermissionList, getRbacPubRoleGroupGetAll, postRbacPubDataPermissionsGetUserOrgDataPermissionList, postRbacUserGrantUserRoleAndDatPermission } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message, theme } from 'ant-design-vue';
+import RoleSelect from './roleSelect.vue';
+
+defineOptions({
+  name: 'UserAuthorization',
+});
+
+const props = defineProps<{ userId: string }>();
+
+const emit = defineEmits(['submit']);
+
+interface FormData {
+  authList: AuthItem[]
+}
+
+const { token } = theme.useToken();
+const [open, setOpen] = useToggle(false);
+const [loading, setLoading] = useToggle(false);
+
+const formRef = ref<FormExpose>();
+const form = ref<FormData>({
+  authList: [],
+});
+
+const roleGroupOptions = ref<API.PubRole[]>([]);
+const dataPermissionOptions = ref<API.shujuquanxianshituduixiang[]>([]);
+
+function getOptionData() {
+  // 数据权限不分页列表
+  getRbacPubDataPermissionsDataPermissionList().then((res) => {
+    if (res.data && res.data.length) {
+      dataPermissionOptions.value = res.data;
+    }
+  });
+
+  // 角色组列表
+  getRbacPubRoleGroupGetAll({ name: '' }).then((res) => {
+    if (res.data && res.data.length) {
+      roleGroupOptions.value = res.data;
+    }
+  });
+}
+// 获取授权数据
+function getAuthData() {
+  if (!props.userId) {
+    return;
+  }
+
+  // 清空之前数据
+  form.value.authList = [];
+
+  postRbacPubDataPermissionsGetUserOrgDataPermissionList({ userId: props.userId }).then((res) => {
+    if (res.data && res.data.userOrgPermissionBos && res.data.userOrgPermissionBos.length) {
+      form.value.authList = res.data.userOrgPermissionBos.map((item) => {
+        const { orgId = '', orgName = '', main = false, dataPermissionsList, roleList, orgRoleList } = item;
+        const o: AuthItem = {
+          userId: props.userId,
+          orgId,
+          orgName,
+          main,
+          roleList,
+          orgRoleList,
+        };
+        if (dataPermissionsList && dataPermissionsList.length) {
+          o.dataPermissionIds = dataPermissionsList.map((dp) => {
+            return {
+              value: dp.dataPermissionId,
+              label: dp.dataPermissionName,
+            };
+          });
+        }
+        return o;
+      });
+    }
+  });
+}
+
+async function onOpen() {
+  await nextTick();
+  setOpen(true);
+  getAuthData();
+}
+
+function onClose() {
+  setOpen(false);
+}
+function onSubmit() {
+  if (!loading) {
+    return;
+  }
+
+  setLoading(true);
+
+  formRef.value?.validate().then(() => {
+    const data: any[] = form.value.authList.map((item) => {
+      const { dataPermissionIds = [], roleList = [], orgId, userId } = item;
+      const rIds = (roleList || []).map((item: API.PubRole) => {
+        // 在下拉框中选择之后，roleIds每一项的值会变成一个对象
+        if (typeof item === 'object' && item.id) {
+          return item.id;
+        }
+        // 若未更改过，其原始值是string，直接返回
+        return item;
+      });
+      const dpIds = dataPermissionIds.map(item => item.value);
+      return {
+        orgId,
+        userId,
+        roleIds: rIds,
+        dataPermissionIds: dpIds,
+      };
+    });
+
+    postRbacUserGrantUserRoleAndDatPermission(data).then((res) => {
+      if (res.success) {
+        message.success('授权成功');
+        emit('submit');
+        onClose();
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  });
+}
+
+onMounted(() => {
+  // 获取选项数据列表
+  getOptionData();
+});
+
+const roleModelRef = ref();
+const selectindex = ref<number>(0);
+function chooseRole(index: number) {
+  selectindex.value = index;
+  roleModelRef.value.open((form.value.authList[selectindex.value].roleList || []).map((item: API.PubRole) => item.id));
+}
+function onRoleSelected(data: API.PubRole[]) {
+  form.value.authList[selectindex.value].roleList = data;
+}
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="授权"
+    placement="right"
+    :width="520"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="{ span: 4 }"
+    >
+      <a-card
+        v-for="(item, index) in form.authList"
+        :key="index"
+        size="small"
+        :body-style="{ padding: '16px' }"
+        class="auth-card"
+      >
+        <template #title>
+          <div class="flex items-center justify-between">
+            <div flex items-center>
+              <PubinfoIcon v-if="item.main" name="org-main" class="text-2xl" />
+              <PubinfoIcon v-else name="org-unmain" class="text-2xl" />
+              <div :style="item.main ? { color: token.colorPrimary, fontWeight: 'bold' } : {}" class="font-normal">
+                {{ `组织${index + 1}` }}
+              </div>
+            </div>
+            <div v-if="item.main" :style="{ color: token.colorPrimary, fontWeight: 'bold' }">
+              主组织
+            </div>
+          </div>
+        </template>
+
+        <a-form-item label="组织名称" :label-col="{ span: 5 }">
+          <span>{{ item.orgName }}</span>
+        </a-form-item>
+        <a-form-item
+          label="数据权限"
+          :name="['authList', index, 'dataPermissionIds']"
+          :label-col="{ span: 5 }"
+        >
+          <a-select
+            v-model:value="item.dataPermissionIds"
+            label-in-value
+            :field-names="{ label: 'name', value: 'id' }"
+            :options="dataPermissionOptions"
+            allow-clear
+            mode="multiple"
+            placeholder="请选择"
+          />
+        </a-form-item>
+        <a-form-item label="用户自选角色" :label-col="{ span: 5 }" name="roleList">
+          <a-button type="primary" @click="chooseRole(index)">
+            编辑角色
+          </a-button>
+          <div class="pt-10px max-h-150px overflow-auto">
+            <template v-for="ite in item.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 label="组织基础角色" :label-col="{ span: 5 }" name="roleList">
+          <div class="max-h-150px overflow-auto">
+            <template v-for="ite in item.orgRoleList" :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-card>
+    </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>
+    <RoleSelect ref="roleModelRef" @select="onRoleSelected" />
+  </a-drawer>
+</template>
+
+<style scoped lang="scss">
+.auth-card {
+  margin-top: 12px;
+
+  &:first-of-type {
+    margin-top: 3px;
+  }
+}
+</style>

package/src/views/user/components/UserEdit.vue

@@ -0,0 +1,267 @@
+<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, CurrentOrg, Data, EditForm, Form } from '../interface';
+import { getRbacUserInfo, postRbacUserPubUserAdd, postRbacUserUserUpdateV2 } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { cloneDeep, isEmpty } from 'lodash-es';
+import { ACTION } from '../enum';
+import OrgAndPosition from './OrgAndPosition.vue';
+
+defineOptions({
+  name: 'UserEdit',
+});
+
+const props = defineProps<{ currentOrg?: CurrentOrg }>();
+const emit = defineEmits(['submit']);
+
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<Form>>({});
+const state = reactive<{
+  title: string
+  record: Data
+  initData: Partial<Form>
+}>({
+  title: '',
+  record: {},
+  initData: {
+    sex: '0',
+    enable: true,
+    userOrgList: [{ main: true, positionList: [] }],
+  },
+});
+
+function loginNameValidator(_: unknown, value: string) {
+  const reg = /^[A-Z!@#$%^&*0-9]+$/i;
+  if (!value || reg.test(value)) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('只能包含字母、数字和特殊字符!@#$%^&*'));
+}
+
+function phoneValidator(_: unknown, value: string) {
+  const reg = /^1(3\d|4[014-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
+  if (reg.test(value) || isEmpty(value)) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('请输入正确的手机号'));
+}
+
+function emailValidator(_: unknown, value: string) {
+  const reg = /^([a-z0-9])(\w|-)+@[a-z0-9]+\.([a-z]{2,4})$/i;
+  if (reg.test(value) || isEmpty(value)) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('请输入正确的邮箱地址'));
+}
+
+function idCardValidator(_: unknown, value: string) {
+  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}([\dX])$)/i;
+  if (reg.test(value) || isEmpty(value)) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('请输入正确的身份证号码'));
+}
+
+const rules: Record<string, Rule[]> = {
+  loginName: [
+    { required: true, message: '请输入登录账号', trigger: ['blur', 'change'] },
+    { min: 4, max: 64, message: '登录账号需要在4位到64位之间', trigger: 'change' },
+    { validator: loginNameValidator, trigger: 'change' },
+  ],
+  realName: [
+    { required: true, message: '请输入真实姓名', trigger: 'blur' },
+    { min: 2, max: 128, message: '真实姓名需要在2位到128位之间', trigger: 'change' },
+  ],
+  userOrgList: [
+    { type: 'array', required: true, message: '请选择所属组织' },
+  ],
+  mobile: [
+    { validator: phoneValidator, trigger: 'change' },
+  ],
+  email: [
+    { validator: emailValidator, trigger: 'change' },
+    { max: 32, message: '邮箱不能超过32位', trigger: 'change' },
+  ],
+  idCard: [
+    { validator: idCardValidator, trigger: 'change' },
+  ],
+};
+
+async function onOpen(key: ACTION, record?: Form) {
+  state.title = key;
+  form.value = cloneDeep(state.initData);
+  form.value.userOrgList![0].orgId = props.currentOrg?.orgId;
+  form.value.userOrgList![0].orgName = props.currentOrg?.orgName;
+  setOpen(true);
+
+  if (key === ACTION.EDIT) {
+    const res = await getRbacUserInfo({ id: record?.id as string });
+    if (res.success) {
+      const { userOrgList = [], ...rest } = res?.data ?? {};
+      form.value = {
+        ...rest,
+        userOrgList: userOrgList?.map((item) => {
+          return {
+            ...item,
+            roleList: item.roles?.map(role => ({ value: role.roleId!, label: role.roleName! })) ?? [],
+            positionList: item.posts?.map(post => ({ value: post.postId!, label: post.postName! })) ?? [],
+          };
+        }),
+      };
+    }
+  }
+}
+
+const sexOptions = [
+  { label: '未知', value: '0' },
+  { label: '男', value: '1' },
+  { label: '女', value: '2' },
+];
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    const { userOrgList = [], ...rest } = form.value;
+    const params = {
+      ...rest,
+      orgRoles: userOrgList.map((item) => {
+        const { orgId, main } = item;
+        return {
+          orgId,
+          main,
+        };
+      }),
+      posts: userOrgList.map((item) => {
+        const { orgId, positionList = [] } = item;
+        return {
+          orgId,
+          postIds: positionList.map(post => post.value),
+        };
+      }),
+    };
+    const promise = state.title === ACTION.ADD
+      ? postRbacUserPubUserAdd(params as AddForm)
+      : postRbacUserUserUpdateV2(params as EditForm);
+    setLoading(true);
+    promise
+      .then((res) => {
+        if (res?.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="state.title"
+    placement="right"
+    :width="520"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="登录账号" name="loginName">
+        <div v-if="state.title === ACTION.EDIT">
+          {{ form.loginName }}
+        </div>
+        <a-input
+          v-else
+          v-model:value="form.loginName"
+          :maxlength="64"
+          placeholder="请输入登录账号"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="realName">
+        <a-input
+          v-model:value="form.realName"
+          :maxlength="128"
+          placeholder="请输入真实姓名"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="手机号" name="mobile">
+        <a-input
+          v-model:value="form.mobile"
+          :maxlength="14"
+          placeholder="请输入手机号"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="性别" name="sex">
+        <a-radio-group v-model:value="form.sex" :options="sexOptions" />
+      </a-form-item>
+      <a-form-item label="邮箱" name="email">
+        <a-input
+          v-model:value="form.email"
+          :maxlength="32"
+          placeholder="请输入邮箱"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="身份证" name="idCard">
+        <a-input
+          v-model:value="form.idCard"
+          :maxlength="18"
+          placeholder="请输入身份证"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="是否启用" name="enable">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+      <a-form-item label="地址" name="address">
+        <a-textarea
+          v-model:value="form.address"
+          :maxlength="200"
+          :auto-size="{ minRows: 2 }"
+          placeholder="请输入地址"
+          allow-clear
+          show-count
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :maxlength="255"
+          :auto-size="{ minRows: 2 }"
+          placeholder="请输入描述"
+          allow-clear
+          show-count
+        />
+      </a-form-item>
+      <a-form-item label="所属组织" name="userOrgList">
+        <OrgAndPosition v-model="form.userOrgList" />
+      </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>