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

package/src/components/select/employee-select/RoleEmployeeSelectPanel.vue

@@ -0,0 +1,255 @@
+<script lang="ts">
+import { AuthRole, PamirsEmployee, PamirsEmployeeService, QueryWrapper } from '@oinone/kunlun-engine';
+import { OioDivider, OioListItem, RSQLCondition, RSQLHelper, SelectMode } from '@oinone/kunlun-vue-ui-antd';
+import { computed, createVNode, defineComponent, PropType, Ref, ref } from 'vue';
+import { ListState } from '../../quick-utils';
+import { RoleList } from '../role-select';
+import EmployeeList from './EmployeeList.vue';
+import { EmployeeListInstance } from './init';
+
+export default defineComponent({
+  name: 'RoleEmployeeSelectPanel',
+  components: {},
+  props: {
+    state: {
+      type: Object as PropType<{
+        loading: boolean;
+        searchValue: string;
+        checkedKeys: string[];
+      }>,
+      required: true
+    },
+    onUpdateState: {
+      type: Function as PropType<(key: string, value: unknown) => void>,
+      required: true
+    },
+    mode: {
+      type: String as PropType<SelectMode | keyof typeof SelectMode>
+    },
+    domain: {
+      type: String
+    },
+    roleCodes: {
+      type: Array as PropType<string[]>
+    },
+    onInit: {
+      type: Function
+    },
+    onUpdateCheckedKeys: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const employeeListRef: Ref<EmployeeListInstance | undefined> = ref();
+
+    const state = new Proxy(props.state, {
+      get(target, p, receiver) {
+        return Reflect.get(target, p, receiver);
+      },
+      set(target, p, value, receiver) {
+        props.onUpdateState(p as string, value);
+        return true;
+      }
+    });
+
+    const currentState = ref<{
+      roleSelectedKeys: string[];
+    }>({
+      roleSelectedKeys: []
+    });
+
+    const roleDomain = computed(() => {
+      const roleCodes = props.roleCodes || [];
+      if (roleCodes.length) {
+        return RSQLCondition.wrapper().in('code', roleCodes).toString();
+      }
+      return undefined;
+    });
+
+    const roleEmployeeLoad = (
+      res: ListState<PamirsEmployee>,
+      service: PamirsEmployeeService,
+      queryWrapper: QueryWrapper
+    ) => {
+      if (currentState.value.roleSelectedKeys.length) {
+        return service.queryListByFilter({
+          rsql: queryWrapper.rsql,
+          roleCodes: currentState.value.roleSelectedKeys
+        });
+      }
+      return service.queryListByFilter({
+        rsql: queryWrapper.rsql,
+        roleCodes: props.roleCodes
+      });
+    };
+
+    const onUpdateCheckedKeys = (checkedKeys: string[]) => {
+      if (props.onUpdateCheckedKeys) {
+        props.onUpdateCheckedKeys(checkedKeys);
+      } else {
+        state.checkedKeys = checkedKeys;
+      }
+    };
+
+    const onRoleSelected = async (item: OioListItem<AuthRole> | undefined, selected: boolean) => {
+      if (selected) {
+        await $$searchEmployeeList(employeeListRef.value!);
+      } else {
+        await $$initEmployeeList(employeeListRef.value!);
+      }
+    };
+
+    const onRoleSelectedAllEmployee = () => {
+      currentState.value.roleSelectedKeys = [];
+      onRoleSelected(undefined, false);
+    };
+
+    const $$initEmployeeList = async (instance: EmployeeListInstance, rsql?: string) => {
+      state.loading = true;
+      try {
+        return await instance.init({
+          rsql: RSQLHelper.concatByAnd(props.domain, rsql),
+          checkedKeys: state.checkedKeys
+        });
+      } finally {
+        state.loading = false;
+      }
+    };
+
+    const $$searchEmployeeList = async (instance: EmployeeListInstance, rsql?: string) => {
+      state.loading = true;
+      try {
+        return await instance.search({
+          rsql: RSQLHelper.concatByAnd(props.domain, rsql),
+          checkedKeys: state.checkedKeys
+        });
+      } finally {
+        state.loading = false;
+      }
+    };
+
+    return {
+      employeeListRef,
+      state,
+      currentState,
+      roleDomain,
+      roleEmployeeLoad,
+      onUpdateCheckedKeys,
+      onRoleSelected,
+      onRoleSelectedAllEmployee
+    };
+  },
+  render() {
+    const {
+      $translate,
+      mode,
+      domain,
+      state,
+      currentState,
+      roleDomain,
+      onInit,
+      onUpdateCheckedKeys,
+
+      roleEmployeeLoad,
+      onRoleSelected,
+      onRoleSelectedAllEmployee
+    } = this;
+    return createVNode('div', { class: 'oio-role-employee-selected-panel' }, [
+      createVNode('div', { class: 'oio-role-selected-wrapper oio-scrollbar' }, [
+        createVNode('div', { class: 'oio-role-selected-all-employee-node' }, [
+          createVNode(
+            'div',
+            {
+              class: [
+                'oio-role-selected-all-employee-node-content-wrapper',
+                !currentState.roleSelectedKeys.length && 'oio-role-selected-all-employee-node-selected'
+              ],
+              onClick: onRoleSelectedAllEmployee
+            },
+            $translate('全部员工')
+          )
+        ]),
+        createVNode(RoleList, {
+          autoInit: true,
+          domain: roleDomain,
+          selectable: true,
+          selectedKeys: currentState.roleSelectedKeys,
+          onSelected: onRoleSelected,
+          'onUpdate:selectedKeys': (val: string[]) => (currentState.roleSelectedKeys = val)
+        })
+      ]),
+      createVNode(OioDivider, { type: 'vertical' }),
+      createVNode(EmployeeList, {
+        ref: 'employeeListRef',
+        searchValue: state.searchValue,
+        selectMode: mode,
+        showCheckedAll: true,
+        loading: state.loading,
+        usingLoading: false,
+        autoInit: true,
+        load: roleEmployeeLoad,
+        domain,
+        initCheckedKeys: state.checkedKeys,
+        checkedKeys: state.checkedKeys,
+        onInit,
+        'onUpdate:loading': (val: boolean) => (state.loading = val),
+        'onUpdate:checkedKeys': onUpdateCheckedKeys
+      })
+    ]);
+  }
+});
+</script>
+<style lang="scss">
+.oio-role-employee-selected-panel {
+  height: 400px;
+  position: relative;
+  display: flex;
+
+  .oio-role-selected-wrapper {
+    width: 50%;
+    flex-basis: 50%;
+    padding-right: 8px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .oio-role-selected-all-employee-node {
+      line-height: 24px;
+      font-size: 14px;
+      color: var(--oio-text-color);
+      padding-bottom: 4px;
+
+      &-content-wrapper {
+        padding: 0 4px;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--oio-menu-hover-background-color);
+        }
+      }
+
+      &-selected {
+        background-color: rgba(var(--oio-primary-color-rgb), 0.1);
+      }
+    }
+
+    .oio-organizational-structure-tree {
+      flex: 1;
+    }
+  }
+
+  .oio-divider {
+    position: absolute;
+    height: 100%;
+    left: 50%;
+  }
+
+  .oio-employee-list {
+    width: 50%;
+    flex-basis: 50%;
+    padding-left: 8px;
+    overflow: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,3 @@
+export { default as EmployeeList } from './EmployeeList.vue';
+export { default as EmployeeModal } from './EmployeeModal.vue';
+export { default as EmployeeSelect } from './EmployeeSelect.vue';

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

@@ -0,0 +1,31 @@
+import { PamirsDepartment, PamirsEmployee, PamirsEmployeeServiceToken } 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 EmployeeListInstance {
+  state: Ref<TreeState<PamirsEmployee>>;
+  filterData: ComputedRef<OioTreeNode<PamirsEmployee>[]>;
+  checkedAll: ComputedRef<boolean>;
+  halfCheckedAll: ComputedRef<boolean>;
+
+  init(options?: Partial<ListInitOptions>): Promise<ListState<PamirsEmployee>>;
+
+  search(options?: Partial<ListInitOptions>): Promise<ListState<PamirsEmployee>>;
+}
+
+export function useEmployeeList(props?: ListStateProps & { load?: ListStateLoadFunction<PamirsDepartment> }) {
+  return useListState({
+    service: SPI.RawInstantiate(PamirsEmployeeServiceToken)!,
+    props,
+    load: props?.load
+  });
+}

package/src/components/select/index.ts

@@ -0,0 +1,6 @@
+export * from './base';
+export * from './company-select';
+export * from './department-select';
+export * from './employee-select';
+export * from './organizational-structure-tree';
+export * from './role-select';

package/src/components/select/organizational-structure-tree/OrganizationalStructureTree.vue

@@ -0,0 +1,262 @@
+<script lang="ts">
+import { OrganizationalStructureType, PamirsDepartment, PamirsOrganizationalStructure } from '@oinone/kunlun-engine';
+import { OioTreeNode } from '@oinone/kunlun-shared';
+import { OioCheckbox, OioIcon, OioTree, SelectMode } from '@oinone/kunlun-vue-ui-antd';
+import { Radio as ARadio } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, onMounted, PropType, VNode } from 'vue';
+import { TreeStateLoadFunction } from '../../quick-utils';
+import { useOrganizationalStructureTree } from './init';
+
+export default defineComponent({
+  name: 'OrganizationalStructureTree',
+  components: {
+    OioTree,
+    OioIcon,
+    OioCheckbox,
+    ARadio
+  },
+  props: {
+    searchValue: {
+      type: String
+    },
+    companyIcon: {
+      type: String,
+      default: 'oinone-company-outlined'
+    },
+    icon: {
+      type: String,
+      default: 'oinone-apartment-outlined'
+    },
+    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<TreeStateLoadFunction<PamirsOrganizationalStructure>>
+    },
+    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,
+      onUpdateExpandedKeys,
+      onCheckedAll,
+      onCheckedStrictly
+    } = useOrganizationalStructureTree({
+      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);
+      updateTreeData();
+    };
+
+    const onUpdateChecked = (node: OioTreeNode<PamirsDepartment>, checked: boolean) => {
+      onCheckedStrictly(node, checked);
+      updateTreeData();
+    };
+
+    const updateTreeData = () => {
+      state.data = [...state.data];
+      emit('update:checkedKeys', state.checkedKeys);
+      emit('change', {
+        nodes: state.checkedNodes,
+        checkedKeys: state.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
+    });
+
+    return {
+      state,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      onUpdateExpandedKeys,
+      onUpdateCheckedAll,
+      onUpdateChecked
+    };
+  },
+  render() {
+    const {
+      state,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      companyIcon,
+      icon,
+
+      loading,
+      usingLoading,
+      selectMode,
+      showCheckedAll,
+      selectable,
+      selectedKeys,
+      onUpdateExpandedKeys,
+      onUpdateCheckedAll,
+      onUpdateChecked
+    } = this;
+    const mainClassName = 'oio-organizational-structure-tree';
+    const treeProps: Record<string, unknown> = {
+      class: `${mainClassName} oio-scrollbar`,
+      data: filterData,
+      blockNode: true,
+      selectable: selectable || false,
+      selectedKeys,
+      'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val),
+      expandedKeys: state.expandedKeys,
+      'onUpdate:expandedKeys': onUpdateExpandedKeys
+    };
+    if (usingLoading) {
+      treeProps.loading = loading;
+    }
+    const treeNode = createVNode(OioTree, treeProps, {
+      title: ({ title, key, dataRef }) => {
+        const nodes: VNode[] = [];
+        const titleNodes: VNode[] = [];
+        if (dataRef.value.type === OrganizationalStructureType.company && companyIcon) {
+          titleNodes.push(
+            createVNode(OioIcon, {
+              icon: companyIcon,
+              color: 'var(--oio-primary-color)'
+            })
+          );
+        } else if (icon) {
+          titleNodes.push(
+            createVNode(OioIcon, {
+              icon,
+              color: 'var(--oio-primary-color)'
+            })
+          );
+        }
+        titleNodes.push(createVNode('span', {}, title));
+        nodes.push(createVNode('div', { class: `${mainClassName}-node-title` }, titleNodes));
+        if (selectMode === SelectMode.multiple) {
+          nodes.push(
+            createVNode(OioCheckbox, {
+              checked: dataRef.checked,
+              indeterminate: dataRef.halfChecked,
+              onClick: () => onUpdateChecked(dataRef, dataRef.checked !== true)
+            })
+          );
+        } else if (dataRef.selectable !== false && selectMode === SelectMode.single) {
+          nodes.push(
+            createVNode(ARadio, {
+              class: 'oio-radio',
+              checked: key === state.checkedKeys[0],
+              onClick: () => onUpdateChecked(dataRef, key !== state.checkedKeys[0])
+            })
+          );
+        }
+        return [
+          createVNode('div', { class: `${mainClassName}-node ${mainClassName}-${dataRef.value.type}-node` }, nodes)
+        ];
+      }
+    });
+    if (selectable) {
+      return treeNode;
+    }
+    if (!!filterData.length && selectMode === SelectMode.multiple && showCheckedAll) {
+      return createVNode('div', { class: `${mainClassName}-wrapper oio-scrollbar` }, [
+        createVNode('div', { class: `${mainClassName}-node ${mainClassName}-node-checked-all` }, [
+          createVNode('div', { class: `${mainClassName}-node-title` }, '全选'),
+          createVNode(OioCheckbox, {
+            checked: checkedAll,
+            indeterminate: halfCheckedAll,
+            'onUpdate:checked': onUpdateCheckedAll
+          })
+        ]),
+        treeNode
+      ]);
+    }
+    return treeNode;
+  }
+});
+</script>
+<style lang="scss">
+.oio-organizational-structure-tree,
+.oio-organizational-structure-tree-wrapper {
+  .oio-organizational-structure-tree-node {
+    display: flex;
+    justify-content: space-between;
+
+    .oio-organizational-structure-tree-node-title {
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+    }
+
+    &.oio-organizational-structure-tree-node-checked-all {
+      height: 28px;
+      padding: 0 4px 4px;
+    }
+  }
+}
+</style>

package/src/components/select/organizational-structure-tree/index.ts

@@ -0,0 +1 @@
+export { default as OrganizationalStructureTree } from './OrganizationalStructureTree.vue';

package/src/components/select/organizational-structure-tree/init.ts

@@ -0,0 +1,30 @@
+import {
+  PamirsDepartment,
+  PamirsOrganizationalStructure,
+  PamirsOrganizationalStructureServiceToken
+} from '@oinone/kunlun-engine';
+import { OioTreeNode } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { ComputedRef, Ref } from 'vue';
+import { TreeInitOptions, TreeState, TreeStateLoadFunction, TreeStateProps, useTreeState } from '../../quick-utils';
+
+export interface OrganizationalStructureTreeInstance {
+  state: Ref<TreeState<PamirsDepartment>>;
+  filterData: ComputedRef<OioTreeNode<PamirsOrganizationalStructure>[]>;
+  checkedAll: ComputedRef<boolean>;
+  halfCheckedAll: ComputedRef<boolean>;
+
+  init(options?: Partial<TreeInitOptions>): Promise<TreeState<PamirsOrganizationalStructure>>;
+}
+
+export function useOrganizationalStructureTree(
+  props?: TreeStateProps & {
+    load?: TreeStateLoadFunction<PamirsOrganizationalStructure>;
+  }
+) {
+  return useTreeState({
+    service: SPI.RawInstantiate(PamirsOrganizationalStructureServiceToken)!,
+    props,
+    load: props?.load
+  });
+}