@pubinfo/module-rbac 2.0.0-beta.9 → 2.0.0-rc.1

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

@@ -1,258 +0,0 @@
-<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>