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

package/src/components/select/department-select/DepartmentTree.vue

@@ -0,0 +1,244 @@
+<script lang="ts">
+import { PamirsDepartment } 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 { useDepartmentTree } from './init';
+
+export default defineComponent({
+  name: 'DepartmentTree',
+  components: {
+    OioTree,
+    OioIcon,
+    OioCheckbox,
+    ARadio
+  },
+  props: {
+    searchValue: {
+      type: String
+    },
+    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<PamirsDepartment>>
+    },
+    domain: {
+      type: String
+    },
+    initCheckedKeys: {
+      type: Array as PropType<string[]>
+    },
+    checkedKeys: {
+      type: Array as PropType<string[]>
+    },
+    selectable: {
+      type: Boolean
+    }
+  },
+  emits: ['update:loading', 'update:checkedKeys', 'init', 'change'],
+  setup(props, { emit, expose }) {
+    const {
+      state,
+      filterData,
+      checkedAll,
+      halfCheckedAll,
+      init,
+      onUpdateExpandedKeys,
+      onCheckedAll,
+      onCheckedStrictly
+    } = useDepartmentTree({
+      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,
+      icon,
+
+      loading,
+      usingLoading,
+      selectMode,
+      showCheckedAll,
+      selectable,
+      onUpdateExpandedKeys,
+      onUpdateCheckedAll,
+      onUpdateChecked
+    } = this;
+    const mainClassName = 'oio-department-tree';
+    const treeProps: Record<string, unknown> = {
+      class: `${mainClassName} oio-scrollbar`,
+      data: filterData,
+      blockNode: true,
+      selectable: selectable || false,
+      expandedKeys: state.expandedKeys,
+      'onUpdate:expandedKeys': onUpdateExpandedKeys
+    };
+    if (usingLoading) {
+      treeProps.loading = loading;
+    }
+    const treeNode = createVNode(OioTree, treeProps, {
+      title: ({ title, key, dataRef }) => {
+        const nodes: VNode[] = [];
+        if (icon) {
+          nodes.push(
+            createVNode('div', { class: `${mainClassName}-node-title` }, [
+              createVNode(OioIcon, {
+                icon,
+                color: 'var(--oio-primary-color)'
+              }),
+              createVNode('span', {}, title)
+            ])
+          );
+        } else {
+          nodes.push(createVNode('div', { class: `${mainClassName}-node-title` }, [createVNode('span', {}, title)]));
+        }
+        if (selectMode === SelectMode.multiple) {
+          nodes.push(
+            createVNode(OioCheckbox, {
+              checked: dataRef.checked,
+              indeterminate: dataRef.halfChecked,
+              'onUpdate:checked': (val: boolean) => onUpdateChecked(dataRef, val)
+            })
+          );
+        } else if (selectMode === SelectMode.single) {
+          nodes.push(
+            createVNode(ARadio, {
+              class: 'oio-radio',
+              checked: key === state.checkedKeys[0],
+              'onUpdate:checked': (val: boolean) => onUpdateChecked(dataRef, key !== state.checkedKeys[0])
+            })
+          );
+        }
+        return [createVNode('div', { class: `${mainClassName}-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-department-tree,
+.oio-department-tree-wrapper {
+  .oio-department-tree-node {
+    display: flex;
+    justify-content: space-between;
+
+    .oio-department-tree-node-title {
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+    }
+
+    &.oio-department-tree-node-checked-all {
+      height: 28px;
+      padding: 0 4px 4px;
+    }
+  }
+}
+</style>

package/src/components/select/department-select/constant.ts

@@ -0,0 +1,10 @@
+export const dynamicParameterOptions = [
+  {
+    key: 'userDept',
+    label: '当前用户所处部门'
+  },
+  {
+    key: 'userDeptAndChildren',
+    label: '当前用户所处部门及下级部门'
+  }
+];

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

@@ -0,0 +1,3 @@
+export { default as DepartmentModal } from './DepartmentModal.vue';
+export { default as DepartmentSelect } from './DepartmentSelect.vue';
+export { default as DepartmentTree } from './DepartmentTree.vue';

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

@@ -0,0 +1,22 @@
+import { PamirsDepartment, PamirsDepartmentServiceToken } 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 DepartmentTreeInstance {
+  state: Ref<TreeState<PamirsDepartment>>;
+  filterData: ComputedRef<OioTreeNode<PamirsDepartment>[]>;
+  checkedAll: ComputedRef<boolean>;
+  halfCheckedAll: ComputedRef<boolean>;
+
+  init(options?: Partial<TreeInitOptions>): Promise<TreeState<PamirsDepartment>>;
+}
+
+export function useDepartmentTree(props?: TreeStateProps & { load?: TreeStateLoadFunction<PamirsDepartment> }) {
+  return useTreeState({
+    service: SPI.RawInstantiate(PamirsDepartmentServiceToken)!,
+    props,
+    load: props?.load
+  });
+}

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

@@ -0,0 +1,287 @@
+<script lang="ts">
+import {
+  OrganizationalStructureType,
+  PamirsDepartment,
+  PamirsDepartmentService,
+  PamirsEmployee,
+  PamirsEmployeeService,
+  QueryWrapper
+} from '@oinone/kunlun-engine';
+import { OioDivider, RSQLCondition, RSQLHelper, SelectMode } from '@oinone/kunlun-vue-ui-antd';
+import { computed, createVNode, defineComponent, PropType, Ref, ref } from 'vue';
+import { ListState, TreeState } from '../../quick-utils';
+import { OrganizationalStructureTree } from '../organizational-structure-tree';
+import EmployeeList from './EmployeeList.vue';
+import { EmployeeListInstance } from './init';
+
+export default defineComponent({
+  name: 'DepartmentEmployeeSelectPanel',
+  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>
+    },
+    initCheckedKeys: {
+      type: Array as PropType<string[]>
+    },
+    onInit: {
+      type: Function
+    },
+    domain: {
+      type: String
+    },
+    employeeCodes: {
+      type: Array as PropType<string[]>
+    },
+    departmentCodes: {
+      type: Array as PropType<string[]>
+    },
+    roleCodes: {
+      type: Array as PropType<string[]>
+    },
+    userEmployee: {
+      type: Boolean
+    },
+    userDept: {
+      type: Boolean
+    },
+    userDeptAndChildren: {
+      type: Boolean
+    }
+  },
+  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<{
+      departmentSelectedKeys: string[];
+    }>({
+      departmentSelectedKeys: []
+    });
+
+    const deptDomain = computed(() => {
+      const departmentCodes = props.departmentCodes || [];
+      if (departmentCodes.length) {
+        return RSQLCondition.wrapper().in('code', departmentCodes).toString();
+      }
+      return undefined;
+    });
+
+    const deptLoad = async (
+      res: TreeState<PamirsDepartment>,
+      service: PamirsDepartmentService,
+      queryWrapper: QueryWrapper
+    ) => {
+      return service.queryListByFilter({
+        departmentCodes: props.departmentCodes,
+        userDept: props.userDept,
+        userDeptAndChildren: props.userDeptAndChildren
+      });
+    };
+
+    const deptEmployeeLoad = (
+      res: ListState<PamirsEmployee>,
+      service: PamirsEmployeeService,
+      queryWrapper: QueryWrapper
+    ) => {
+      return service.queryListByFilter({
+        rsql: queryWrapper.rsql,
+        employeeCodes: props.employeeCodes,
+        departmentCodes: props.departmentCodes,
+        roleCodes: props.roleCodes,
+        userEmployee: props.userEmployee,
+        userDept: props.userDept,
+        userDeptAndChildren: props.userDeptAndChildren
+      });
+    };
+
+    const onDepartmentSelected = async ({ selectedKeys }: { selectedKeys: string[] }) => {
+      if (selectedKeys.length) {
+        const deptCode = selectedKeys[0].substring(OrganizationalStructureType.department.length + 1);
+        const rsql = RSQLCondition.wrapper()
+          .eq('departmentCode', deptCode)
+          .or((v) => v.eq('departmentList.code', deptCode))
+          .toString();
+        await $$searchEmployeeList(employeeListRef.value!, rsql);
+      } else {
+        await $$initEmployeeList(employeeListRef.value!);
+      }
+    };
+
+    const onDeploymentSelectedAllEmployee = () => {
+      onDepartmentSelected({ selectedKeys: [] });
+      currentState.value.departmentSelectedKeys = [];
+    };
+
+    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,
+      deptDomain,
+      deptLoad,
+      deptEmployeeLoad,
+      onDepartmentSelected,
+      onDeploymentSelectedAllEmployee
+    };
+  },
+  render() {
+    const {
+      $translate,
+      mode,
+      initCheckedKeys,
+      onInit,
+      domain,
+
+      state,
+      currentState,
+      deptDomain,
+      deptLoad,
+      deptEmployeeLoad,
+      onDepartmentSelected,
+      onDeploymentSelectedAllEmployee
+    } = this;
+    return createVNode('div', { class: 'oio-department-employee-selected-panel' }, [
+      createVNode('div', { class: 'oio-department-selected-wrapper oio-scrollbar' }, [
+        createVNode('div', { class: 'oio-department-selected-all-employee-node' }, [
+          createVNode(
+            'div',
+            {
+              class: [
+                'oio-department-selected-all-employee-node-content-wrapper',
+                !currentState.departmentSelectedKeys.length && 'oio-department-selected-all-employee-node-selected'
+              ],
+              onClick: onDeploymentSelectedAllEmployee
+            },
+            $translate('全部员工')
+          )
+        ]),
+        createVNode(OrganizationalStructureTree, {
+          autoInit: true,
+          domain: deptDomain,
+          load: deptLoad,
+          selectable: true,
+          selectedKeys: currentState.departmentSelectedKeys,
+          'onUpdate:selectedKeys': (val: string[]) => (currentState.departmentSelectedKeys = val),
+          onSelected: onDepartmentSelected
+        })
+      ]),
+      createVNode(OioDivider, { type: 'vertical' }),
+      createVNode(EmployeeList, {
+        ref: 'employeeListRef',
+        searchValue: state.searchValue,
+        selectMode: mode,
+        showCheckedAll: true,
+        loading: state.loading,
+        usingLoading: false,
+        autoInit: true,
+        load: deptEmployeeLoad,
+        domain,
+        initCheckedKeys,
+        checkedKeys: state.checkedKeys,
+        onInit,
+        'onUpdate:loading': (val: boolean) => (state.loading = val),
+        'onUpdate:checkedKeys': (keys: string[]) => (state.checkedKeys = keys)
+      })
+    ]);
+  }
+});
+</script>
+<style lang="scss">
+.oio-department-employee-selected-panel {
+  height: 400px;
+  position: relative;
+  display: flex;
+
+  .oio-department-selected-wrapper {
+    width: 50%;
+    flex-basis: 50%;
+    padding-right: 8px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .oio-department-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/EmployeeList.vue

@@ -0,0 +1,146 @@
+<script lang="ts">
+import { 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 { useEmployeeList } from './init';
+
+export default defineComponent({
+  name: 'EmployeeList',
+  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[]>
+    }
+  },
+  emits: ['update:loading', 'update:checkedKeys', 'init', 'change'],
+  setup(props, { emit, expose }) {
+    const { state, filterData, checkedAll, halfCheckedAll, init, search, onChecked, onCheckedAll } = useEmployeeList({
+      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<PamirsEmployee>, 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,
+      onUpdateChecked,
+      onUpdateCheckedAll
+    } = this;
+    return createVNode(OioList, {
+      class: 'oio-employee-list oio-scrollbar',
+      mode: selectMode,
+      list: filterData,
+      checkedKeys,
+      showIcon: true,
+      showCheckedAll,
+      checkedAll,
+      halfCheckedAll,
+      onChecked: onUpdateChecked,
+      'onUpdate:checkedAll': onUpdateCheckedAll
+    });
+  }
+});
+</script>