@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/components/select/role-select/RoleList.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+import { AuthRole, PamirsEmployee } from '@oinone/kunlun-engine';
+import { OioList, OioListItem, SelectMode } from '@oinone/kunlun-vue-ui-antd';
+import { computed, createVNode, defineComponent, onMounted, PropType } from 'vue';
+import { ListStateLoadFunction } from '../../quick-utils';
+import { useRoleList } from './init';
+
+export default defineComponent({
+  name: 'RoleList',
+  components: {},
+  props: {
+    searchValue: {
+      type: String
+    },
+    selectMode: {
+      type: String as PropType<SelectMode | keyof typeof SelectMode>
+    },
+    showCheckedAll: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    usingLoading: {
+      type: Boolean
+    },
+    autoInit: {
+      type: Boolean
+    },
+    load: {
+      type: Function as PropType<ListStateLoadFunction<PamirsEmployee>>
+    },
+    domain: {
+      type: String
+    },
+    initCheckedKeys: {
+      type: Array as PropType<string[]>
+    },
+    checkedKeys: {
+      type: Array as PropType<string[]>
+    },
+    selectable: {
+      type: Boolean
+    },
+    selectedKeys: {
+      type: Array as PropType<string[]>
+    }
+  },
+  emits: ['update:loading', 'update:checkedKeys', 'update:selectedKeys', 'init', 'change'],
+  setup(props, { emit, expose }) {
+    const { state, filterData, checkedAll, halfCheckedAll, init, search, onChecked, onCheckedAll } = useRoleList({
+      mode: props.selectMode,
+      getCheckedKeys: () => props.checkedKeys,
+      getSearchValue: () => props.searchValue,
+      load: props.load
+    });
+
+    const loading = computed({
+      get: () => {
+        if (props.loading == null) {
+          return state.loading;
+        }
+        return props.loading;
+      },
+      set: (value) => {
+        emit('update:loading', value);
+        state.loading = value;
+      }
+    });
+
+    const onUpdateCheckedAll = (checked: boolean) => {
+      onCheckedAll(filterData.value, checked);
+      updateListData();
+    };
+
+    const onUpdateChecked = (node: OioListItem<AuthRole>, checked: boolean) => {
+      onChecked(node, checked);
+      updateListData();
+    };
+
+    const updateListData = () => {
+      state.data = [...state.data];
+      const checkedKeys = state.submitCheckedKeys || state.checkedKeys;
+      const items = state.submitCheckedItems || state.checkedItems;
+      emit('update:checkedKeys', checkedKeys);
+      emit('change', {
+        items,
+        checkedKeys
+      });
+    };
+
+    if (props.autoInit) {
+      onMounted(async () => {
+        loading.value = true;
+        try {
+          const res = await init({
+            rsql: props.domain,
+            checkedKeys: props.initCheckedKeys || props.checkedKeys
+          });
+          emit('init', res);
+        } finally {
+          loading.value = false;
+        }
+      });
+    }
+
+    expose({
+      state,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      init,
+      search
+    });
+
+    return {
+      state,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      onUpdateCheckedAll,
+      onUpdateChecked
+    };
+  },
+  render() {
+    const {
+      selectMode,
+      showCheckedAll,
+      loading,
+      usingLoading,
+      checkedKeys,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      selectable,
+      selectedKeys,
+      onUpdateChecked,
+      onUpdateCheckedAll
+    } = this;
+    return createVNode(OioList, {
+      class: 'oio-role-list oio-scrollbar',
+      mode: selectMode,
+      list: filterData,
+      showIcon: true,
+
+      checkedKeys,
+      showCheckedAll,
+      checkedAll,
+      halfCheckedAll,
+      onChecked: onUpdateChecked,
+      'onUpdate:checkedAll': onUpdateCheckedAll,
+
+      selectable,
+      selectedKeys,
+      'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val)
+    });
+  }
+});
+</script>

package/src/components/select/role-select/RoleModal.vue

@@ -0,0 +1,357 @@
+<script lang="ts">
+import { AuthRole, AuthRoleService, QueryWrapper } from '@oinone/kunlun-engine';
+import {
+  CastHelper,
+  OioEmptyData,
+  OioInput,
+  OioInputSearch,
+  OioListItem,
+  OioModal,
+  OioModalProps,
+  OioSelectItem,
+  OioTab,
+  OioTabs,
+  PropRecordHelper,
+  SelectMode,
+  StringHelper
+} from '@oinone/kunlun-vue-ui-antd';
+import { computed, createVNode, defineComponent, PropType, reactive, VNode, watch } from 'vue';
+import { CheckedHelper, ListState } from '../../quick-utils';
+import { BaseSelect } from '../base';
+import RoleList from './RoleList.vue';
+
+interface BaseState {
+  init: boolean;
+  storage: Record<string, OioListItem<AuthRole>>;
+}
+
+interface State extends BaseState {
+  loading: boolean;
+  searchValue: string;
+  checkedKeys: string[];
+}
+
+export default defineComponent({
+  name: 'RoleModal',
+  components: {
+    OioInput,
+    OioModal,
+    OioTab,
+    OioTabs,
+    RoleList
+  },
+  props: {
+    ...OioModalProps,
+    mode: {
+      type: String as PropType<SelectMode | keyof typeof SelectMode>
+    },
+    selected: {
+      type: [Object, Array] as PropType<OioSelectItem<AuthRole> | OioSelectItem<AuthRole>[]>
+    },
+    allowClear: {
+      type: Boolean
+    },
+    domain: {
+      type: String
+    },
+    roleCodes: {
+      type: Array as PropType<string[]>
+    },
+    userRole: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const state: State = reactive({
+      init: false,
+      storage: {},
+      loading: false,
+      searchValue: '',
+      checkedKeys: []
+    });
+
+    const initCheckedKeys = computed(() => {
+      let checkedKeys: string[] = [];
+      if (props.selected != null) {
+        if (Array.isArray(props.selected)) {
+          checkedKeys = props.selected.map((v) => v.key);
+        } else {
+          checkedKeys = [props.selected.key];
+        }
+      }
+      return checkedKeys;
+    });
+
+    const selectedValues = computed(() => {
+      let checkedKeys: string[];
+      if (props.mode === SelectMode.single) {
+        const firstKey = state.checkedKeys[0];
+        if (firstKey) {
+          checkedKeys = [firstKey];
+        } else {
+          checkedKeys = [];
+        }
+      } else {
+        checkedKeys = state.checkedKeys;
+      }
+      const selectedItems: OioSelectItem<AuthRole>[] = [];
+      for (const checkedKey of checkedKeys) {
+        const item = state.storage[checkedKey];
+        if (!item) {
+          continue;
+        }
+        const { key, value, label, data } = item;
+        selectedItems.push({
+          key,
+          value,
+          label,
+          data
+        });
+      }
+      return selectedItems;
+    });
+
+    const enterCallback = () => {
+      if (props.mode === SelectMode.single) {
+        emit('change', selectedValues.value[0]?.data);
+      } else {
+        emit(
+          'change',
+          selectedValues.value.map((v) => v.data)
+        );
+      }
+      return true;
+    };
+
+    const onUpdateState = (key: string, value: unknown) => {
+      state[key] = value;
+    };
+
+    const roleLoad = (res: ListState<AuthRole>, service: AuthRoleService, queryWrapper: QueryWrapper) => {
+      return service.queryListByFilter({
+        rsql: queryWrapper.rsql,
+        roleCodes: props.roleCodes,
+        userRole: props.userRole
+      });
+    };
+
+    const onInit = (res: ListState<AuthRole>) => {
+      state.init = true;
+      state.storage = res.storage;
+      state.checkedKeys = res.checkedKeys;
+    };
+
+    const userRoleListState: BaseState = reactive({
+      init: false,
+      storage: {}
+    });
+
+    const userRoleLoad = (res: ListState<AuthRole>, service: AuthRoleService, queryWrapper: QueryWrapper) => {
+      return service.queryListByFilter({
+        rsql: queryWrapper.rsql,
+        userRole: true
+      });
+    };
+
+    const onInitUserRoleList = (res: ListState<AuthRole>) => {
+      userRoleListState.init = true;
+      userRoleListState.storage = res.storage;
+    };
+
+    const onUpdateCheckedKeysByUserRoleList = (checkedKeys: string[]) => {
+      state.checkedKeys = CheckedHelper.diffListCheckedKeys(
+        state.storage,
+        userRoleListState.storage,
+        state.checkedKeys,
+        checkedKeys
+      );
+    };
+
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          state.init = false;
+        }
+      }
+    );
+
+    return {
+      state,
+      selectedValues,
+      initCheckedKeys,
+      enterCallback,
+      onUpdateState,
+      roleLoad,
+      onInit,
+      userRoleLoad,
+      onInitUserRoleList,
+      onUpdateCheckedKeysByUserRoleList
+    };
+  },
+  render() {
+    const {
+      $translate,
+      mode,
+      allowClear,
+      domain,
+      roleCodes,
+      userRole,
+
+      state,
+      selectedValues,
+      initCheckedKeys,
+      enterCallback,
+      onUpdateState,
+      roleLoad,
+      onInit,
+      userRoleLoad,
+      onInitUserRoleList,
+      onUpdateCheckedKeysByUserRoleList
+    } = this;
+    return createVNode(
+      OioModal,
+      {
+        title: $translate('选择角色'),
+        width: '720px',
+        maskClosable: false,
+        ...PropRecordHelper.convert(OioModalProps, CastHelper.cast(this)),
+        wrapperClassName: StringHelper.append(['oio-role-modal', 'vxe-table--ignore-clear'], this.wrapperClassName),
+        destroyOnClose: true,
+        loading: state.loading,
+        enterCallback
+      },
+      {
+        default: () => {
+          if (state.init && !Object.keys(state.storage).length) {
+            return createVNode(OioEmptyData);
+          }
+          const tabs: { key: string; label: string }[] = [];
+          const vNodes: VNode[] = [];
+          tabs.push({
+            key: 'role',
+            label: '角色'
+          });
+          vNodes.push(
+            createVNode(RoleList, {
+              searchValue: state.searchValue,
+              selectMode: mode,
+              showCheckedAll: true,
+              loading: state.loading,
+              usingLoading: false,
+              autoInit: true,
+              load: roleLoad,
+              domain,
+              initCheckedKeys,
+              checkedKeys: state.checkedKeys,
+              onInit,
+              'onUpdate:loading': (val: boolean) => onUpdateState('loading', val),
+              'onUpdate:checkedKeys': (keys: string[]) => onUpdateState('checkedKeys', keys)
+            })
+          );
+          let showUserRole = userRole;
+          if (!roleCodes?.length) {
+            showUserRole = !userRole;
+          }
+          if (showUserRole) {
+            tabs.push({
+              key: 'user-role',
+              label: '当前角色'
+            });
+            vNodes.push(
+              createVNode(RoleList, {
+                searchValue: state.searchValue,
+                selectMode: mode,
+                showCheckedAll: true,
+                loading: state.loading,
+                usingLoading: false,
+                autoInit: true,
+                load: userRoleLoad,
+                domain,
+                initCheckedKeys: state.checkedKeys,
+                checkedKeys: state.checkedKeys,
+                onInit: onInitUserRoleList,
+                'onUpdate:loading': (val: boolean) => onUpdateState('loading', val),
+                'onUpdate:checkedKeys': onUpdateCheckedKeysByUserRoleList
+              })
+            );
+          }
+          const children: VNode[] = [];
+          if (vNodes.length === 1) {
+            children.push(vNodes[0]);
+          } else {
+            children.push(
+              createVNode(
+                OioTabs,
+                {},
+                {
+                  default: () =>
+                    tabs.map((v, i) => {
+                      return createVNode(
+                        OioTab,
+                        {
+                          key: v.key,
+                          tab: $translate(v.label)
+                        },
+                        {
+                          default: () => [vNodes[i]]
+                        }
+                      );
+                    })
+                }
+              )
+            );
+          }
+          return [
+            createVNode('div', { class: 'oio-role-modal-content' }, [
+              createVNode(BaseSelect, {
+                mode: SelectMode.multiple,
+                value: selectedValues,
+                allowClear,
+                placeholder: $translate('选择角色'),
+                allowArrow: false,
+                allowSearch: false,
+                notFoundContent: null,
+                change: (items: OioSelectItem[]) =>
+                  onUpdateState(
+                    'checkedKeys',
+                    items.map((v) => v.key)
+                  )
+              }),
+              createVNode(OioInputSearch, {
+                value: state.searchValue,
+                placeholder: $translate('搜索'),
+                allowClear: true,
+                'onUpdate:value': (val: string) => onUpdateState('searchValue', val)
+              }),
+              ...children
+            ])
+          ];
+        }
+      }
+    );
+  }
+});
+</script>
+<style lang="scss">
+.oio-role-modal {
+  .oio-role-modal-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    height: 100%;
+
+    & > .oio-role-list {
+      height: 400px;
+      overflow: auto;
+    }
+  }
+
+  .oio-tab-content {
+    height: 400px;
+    overflow: auto;
+  }
+}
+</style>

package/src/components/select/role-select/RoleSelect.vue

@@ -0,0 +1,146 @@
+<script lang="ts">
+import { AuthRole } from '@oinone/kunlun-engine';
+import { OioButton } from '@oinone/kunlun-vue-ui-antd';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { computed, createVNode, defineComponent, PropType, ref } from 'vue';
+import { DefaultSelect, DefaultSelectProps } from '../base';
+import RoleModal from './RoleModal.vue';
+
+export default defineComponent({
+  name: 'RoleSelect',
+  components: {
+    DefaultSelect,
+    RoleModal
+  },
+  inheritAttrs: false,
+  props: {
+    ...DefaultSelectProps,
+    domain: {
+      type: String
+    },
+    roleCodes: {
+      type: Array as PropType<string[]>
+    },
+    userRole: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const visible = ref(false);
+
+    const options = computed(() => {
+      if (!props.selected) {
+        return [];
+      }
+      if (Array.isArray(props.selected)) {
+        return props.selected;
+      }
+      return [props.selected];
+    });
+
+    const onUpdateVisible = (val: boolean) => {
+      visible.value = val;
+    };
+
+    const onShowModal = () => {
+      visible.value = true;
+    };
+
+    const onChange = (values: AuthRole | AuthRole[] | null | undefined) => {
+      props.change?.(values);
+      props.blur?.();
+    };
+
+    return {
+      visible,
+      options,
+      onUpdateVisible,
+      onShowModal,
+      onChange
+    };
+  },
+  render() {
+    const {
+      $translate,
+      $attrs,
+
+      mode,
+      selected,
+      options,
+      placeholder,
+      allowClear,
+      visible,
+      change,
+      focus,
+      blur,
+      onUpdateVisible,
+      onShowModal,
+      onChange,
+
+      domain,
+      roleCodes,
+      userRole
+    } = this;
+    const classNames = ['oio-role-select'];
+    const modal = createVNode(RoleModal, {
+      mode,
+      selected,
+      allowClear,
+      domain,
+      roleCodes,
+      userRole,
+      visible,
+      'onUpdate:visible': onUpdateVisible,
+      onChange
+    });
+    if (selected == null || (Array.isArray(selected) && !selected.length)) {
+      return createVNode('div', PropRecordHelper.collectionBasicProps($attrs, classNames), [
+        createVNode(
+          OioButton,
+          {
+            type: 'default',
+            block: true,
+            icon: 'oinone-plus-outlined',
+            onClick: onShowModal
+          },
+          {
+            default: () => {
+              return $translate('选择角色');
+            }
+          }
+        ),
+        modal
+      ]);
+    }
+    return createVNode('div', PropRecordHelper.collectionBasicProps($attrs, classNames), [
+      createVNode(
+        DefaultSelect,
+        {
+          mode,
+          selected,
+          initSelectedOptions: options,
+          options: null,
+          placeholder,
+          allowClear,
+          allowArrow: false,
+          allowSearch: false,
+          notFoundContent: null,
+          change,
+          focus,
+          blur
+        },
+        {
+          suffix: () => {
+            return createVNode(OioButton, {
+              icon: 'oinone-user-outlined',
+              onClick: onShowModal
+            });
+          }
+        }
+      ),
+      modal
+    ]);
+  }
+});
+</script>

package/src/components/select/role-select/index.ts

@@ -0,0 +1,3 @@
+export { default as RoleList } from './RoleList.vue';
+export { default as RoleModal } from './RoleModal.vue';
+export { default as RoleSelect } from './RoleSelect.vue';

package/src/components/select/role-select/init.ts

@@ -0,0 +1,29 @@
+import { AuthRole, AuthRoleServiceToken } from '@oinone/kunlun-engine';
+import { OioTreeNode } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { ComputedRef, Ref } from 'vue';
+import {
+  ListInitOptions,
+  ListState,
+  ListStateLoadFunction,
+  ListStateProps,
+  TreeState,
+  useListState
+} from '../../quick-utils';
+
+export interface RoleListInstance {
+  state: Ref<TreeState<AuthRole>>;
+  filterData: ComputedRef<OioTreeNode<AuthRole>[]>;
+  checkedAll: ComputedRef<boolean>;
+  halfCheckedAll: ComputedRef<boolean>;
+
+  init(options?: Partial<ListInitOptions>): Promise<ListState<AuthRole>>;
+}
+
+export function useRoleList(props?: ListStateProps & { load?: ListStateLoadFunction<AuthRole> }) {
+  return useListState({
+    service: SPI.RawInstantiate(AuthRoleServiceToken)!,
+    props,
+    load: props?.load
+  });
+}