@oinone/kunlun-vue-admin-base 6.4.9 → 7.2.0

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { AuthRole, PamirsEmployee, PamirsEmployeeService, QueryWrapper } from '@oinone/kunlun-engine';
+import { type AuthRole, type PamirsEmployee, type 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 { computed, createVNode, defineComponent, type PropType, type Ref, ref } from 'vue';
+import type { ListState } from '../../quick-utils';
 import { RoleList } from '../role-select';
 import EmployeeList from './EmployeeList.vue';
-import { EmployeeListInstance } from './init';
+import type { EmployeeListInstance } from './init';
 
 export default defineComponent({
   name: 'RoleEmployeeSelectPanel',
@@ -26,6 +26,12 @@ export default defineComponent({
     mode: {
       type: String as PropType<SelectMode | keyof typeof SelectMode>
     },
+    model: {
+      type: String
+    },
+    employeeModel: {
+      type: String
+    },
     domain: {
       type: String
     },
@@ -73,11 +79,13 @@ export default defineComponent({
     ) => {
       if (currentState.value.roleSelectedKeys.length) {
         return service.queryListByFilter({
+          model: props.employeeModel,
           rsql: queryWrapper.rsql,
           roleCodes: currentState.value.roleSelectedKeys
         });
       }
       return service.queryListByFilter({
+        model: props.employeeModel,
         rsql: queryWrapper.rsql,
         roleCodes: props.roleCodes
       });
@@ -108,6 +116,7 @@ export default defineComponent({
       state.loading = true;
       try {
         return await instance.init({
+          model: props.employeeModel,
           rsql: RSQLHelper.concatByAnd(props.domain, rsql),
           checkedKeys: state.checkedKeys
         });
@@ -120,6 +129,7 @@ export default defineComponent({
       state.loading = true;
       try {
         return await instance.search({
+          model: props.employeeModel,
           rsql: RSQLHelper.concatByAnd(props.domain, rsql),
           checkedKeys: state.checkedKeys
         });
@@ -143,6 +153,8 @@ export default defineComponent({
     const {
       $translate,
       mode,
+      model,
+      employeeModel,
       domain,
       state,
       currentState,
@@ -171,6 +183,7 @@ export default defineComponent({
         ]),
         createVNode(RoleList, {
           autoInit: true,
+          model,
           domain: roleDomain,
           selectable: true,
           selectedKeys: currentState.roleSelectedKeys,
@@ -188,6 +201,7 @@ export default defineComponent({
         usingLoading: false,
         autoInit: true,
         load: roleEmployeeLoad,
+        model: employeeModel,
         domain,
         initCheckedKeys: state.checkedKeys,
         checkedKeys: state.checkedKeys,

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

@@ -1,13 +1,13 @@
-import { PamirsDepartment, PamirsEmployee, PamirsEmployeeServiceToken } from '@oinone/kunlun-engine';
-import { OioTreeNode } from '@oinone/kunlun-shared';
+import { type PamirsDepartment, type PamirsEmployee, PamirsEmployeeServiceToken } from '@oinone/kunlun-engine';
+import type { OioTreeNode } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import {
-  ListInitOptions,
-  ListState,
-  ListStateLoadFunction,
-  ListStateProps,
-  TreeState,
+  type ListInitOptions,
+  type ListState,
+  type ListStateLoadFunction,
+  type ListStateProps,
+  type TreeState,
   useListState
 } from '../../quick-utils';
 

package/src/components/select/index.ts

@@ -2,5 +2,7 @@ export * from './base';
 export * from './company-select';
 export * from './department-select';
 export * from './employee-select';
+export * from './modal-select';
 export * from './organizational-structure-tree';
+export * from './table-select';
 export * from './role-select';

package/src/components/select/modal-select/ModalSelect.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="oio-modal-select-wrapper">
+    <DefaultSelect v-bind="selectProps" />
+    <oio-modal v-bind="modalProps">
+      <oio-input-search
+        :value="searchValue"
+        :placeholder="$translate('搜索')"
+        allow-clear
+        @update:value="onUpdateSearchValue"
+      />
+      <oio-table v-bind="tableProps">
+        <oio-column v-if="checkbox" type="checkbox" width="50" />
+        <oio-column v-else type="radio" width="50" />
+        <oio-column v-for="column in tableSelectColumns" :key="column.key" v-bind="column" />
+      </oio-table>
+    </oio-modal>
+  </div>
+</template>
+<script lang="ts">
+import { ActiveRecordExtendKeys, ActiveRecords } from '@oinone/kunlun-engine';
+import { CheckedChangeEvent, OioColumn, OioTable, RadioChangeEvent } from '@oinone/kunlun-vue-ui';
+import { OioInputSearch, OioModal, PropRecordHelper, SelectMode, StringHelper } from '@oinone/kunlun-vue-ui-antd';
+import { WritableComputedRef } from '@vue/reactivity';
+import { debounce } from 'lodash-es';
+import { computed, defineComponent, nextTick, reactive, ref, Ref } from 'vue';
+import { DefaultSelect, DefaultSelectProps } from '../base';
+import { DefaultTableSelectProps } from '../table-select';
+
+interface State {
+  visible: boolean;
+  records?: ActiveRecords | null;
+}
+
+export default defineComponent({
+  components: {
+    DefaultSelect,
+    OioModal,
+    OioTable,
+    OioColumn,
+    OioInputSearch
+  },
+  inheritAttrs: false,
+  props: {
+    ...DefaultTableSelectProps,
+    title: {
+      type: String
+    }
+  },
+  setup(props, { attrs, emit }) {
+    const state: State = reactive({
+      visible: false
+    });
+
+    const tableData = computed(() => props.options?.map((v) => v.data) || []);
+
+    const checkRowKey = computed(() => {
+      if (props.selected == null) {
+        return null;
+      }
+      if (checkbox.value) {
+        let keys: string[];
+        if (Array.isArray(props.selected)) {
+          keys = props.selected.map((v) => v.data[ActiveRecordExtendKeys.DRAFT_ID]);
+        } else {
+          keys = [props.selected.data[ActiveRecordExtendKeys.DRAFT_ID]];
+        }
+        return keys;
+      }
+      if (Array.isArray(props.selected)) {
+        return props.selected[0]?.data[ActiveRecordExtendKeys.DRAFT_ID];
+      }
+      return props.selected.data[ActiveRecordExtendKeys.DRAFT_ID];
+    });
+
+    const checkbox = computed(() => {
+      return props.mode === SelectMode.multiple;
+    });
+
+    const selectProps = computed(() => {
+      return {
+        ...PropRecordHelper.convert(DefaultSelectProps, props),
+        ...PropRecordHelper.collectionBasicProps(attrs, ['oio-modal-select']),
+        mode: props.mode,
+        selected: props.selected,
+        initSelectedOptions: props.options,
+        options: null,
+        allowArrow: false,
+        allowSearch: false,
+        notFoundContent: null,
+        loadMoreLoading: null,
+        onClick: () => {
+          searchValue.value = undefined;
+          state.records = null;
+          state.visible = true;
+        }
+      };
+    });
+
+    const modalProps = computed(() => {
+      return {
+        class: 'oio-modal-select-modal',
+        wrapperClassName: StringHelper.append(['oio-modal-select-modal-wrapper vxe-table--ignore-clear']),
+        width: '720px',
+        title: props.title,
+        maskClosable: false,
+        destroyOnClose: true,
+        visible: state.visible,
+        'onUpdate:visible': (val: boolean) => (state.visible = val),
+        onEnter: () => {
+          props.change?.(state.records);
+        }
+      };
+    });
+
+    const tableProps = computed(() => {
+      const value: Record<string, unknown> = {
+        class: 'oio-modal-select-table',
+        size: 'small',
+        showOverflow: true,
+        autoResize: true,
+        stripe: true,
+        border: true,
+        height: props.tableHeight || '300px',
+        data: tableData.value,
+        loading: props.loadMoreLoading,
+        rowConfig: { isCurrent: false, isHover: true, keyField: ActiveRecordExtendKeys.DRAFT_ID },
+        onScroll
+      };
+      if (checkbox.value) {
+        value.checkboxConfig = { highlight: true, checkRowKeys: checkRowKey.value };
+        value.onCheckedChange = onCheckedChange;
+        value.onCheckedAllChange = onCheckedAllChange;
+      } else {
+        value.radioConfig = { highlight: true, checkRowKey: checkRowKey.value };
+        value.onRadioChange = onRadioChange;
+      }
+      return value;
+    });
+
+    const onCheckedChange = (event: CheckedChangeEvent) => {
+      const { records } = event;
+      if (records.length) {
+        state.records = records;
+      } else {
+        state.records = null;
+      }
+    };
+
+    const onCheckedAllChange = (event: CheckedChangeEvent) => {
+      const { checked, records } = event;
+      if (checked) {
+        state.records = records;
+      } else {
+        state.records = null;
+      }
+    };
+
+    const onRadioChange = (event: RadioChangeEvent) => {
+      const { newRecord } = event;
+      state.records = newRecord;
+    };
+
+    /**
+     * 当 vxe-table 加载数据数量过多，scrollHeight 达到一定高度时，会出现 bodyHeight === scrollHeight 参数异常的问题
+     * 此参数用于保留第一次滚动的有效值
+     */
+    let bodyHeight: number | undefined;
+
+    const onScroll = (e: { scrollHeight: number; scrollTop: number; bodyHeight: number }) => {
+      const { scrollHeight, scrollTop } = e;
+      if (bodyHeight == null) {
+        bodyHeight = e.bodyHeight;
+      }
+      if (scrollHeight - scrollTop - 1 <= bodyHeight) {
+        if (props.loadCompleted) {
+          return;
+        }
+        nextTick(() => props.loadMore?.());
+      }
+    };
+
+    const $$searchValue: Ref<string | undefined> = ref();
+    const searchValue: WritableComputedRef<string | undefined> = computed({
+      get() {
+        if (props.searchValue === undefined) {
+          return $$searchValue.value;
+        }
+        return props.searchValue;
+      },
+      set(val) {
+        $$searchValue.value = val;
+        emit('update:search-value', val);
+        props.onUpdateSearchValue?.(val);
+      }
+    });
+
+    const onUpdateSearchValue = (keyword: string) => {
+      searchValue.value = keyword;
+      onSearch(keyword);
+    };
+
+    const onSearch = debounce(async (keyword: string) => {
+      await props.search?.(keyword);
+    }, 300);
+
+    return {
+      state,
+      selectProps,
+      modalProps,
+      tableProps,
+      checkbox,
+      onUpdateSearchValue
+    };
+  }
+});
+</script>

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

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

package/src/components/select/modal-select/style/index.scss

@@ -0,0 +1,5 @@
+.oio-modal-select-modal-wrapper {
+  .ant-modal-body > .oio-input-search {
+    margin-bottom: var(--oio-margin-md);
+  }
+}

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

@@ -1,10 +1,17 @@
 <script lang="ts">
-import { OrganizationalStructureType, PamirsDepartment, PamirsOrganizationalStructure } from '@oinone/kunlun-engine';
-import { OioTreeNode } from '@oinone/kunlun-shared';
+import {
+  OrganizationalStructureType,
+  type PamirsDepartment,
+  type PamirsOrganizationalStructure,
+  type PamirsOrganizationalStructureService,
+  type QueryWrapper,
+  translateValueByKey
+} from '@oinone/kunlun-engine';
+import type { 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 { computed, createVNode, defineComponent, onMounted, type PropType, type VNode } from 'vue';
+import type { TreeState, TreeStateLoadFunction } from '../../quick-utils';
 import { useOrganizationalStructureTree } from './init';
 
 export default defineComponent({
@@ -45,6 +52,12 @@ export default defineComponent({
     load: {
       type: Function as PropType<TreeStateLoadFunction<PamirsOrganizationalStructure>>
     },
+    model: {
+      type: String
+    },
+    companyModel: {
+      type: String
+    },
     domain: {
       type: String
     },
@@ -63,6 +76,18 @@ export default defineComponent({
   },
   emits: ['update:loading', 'update:checkedKeys', 'update:selectedKeys', 'init', 'change'],
   setup(props, { emit, expose }) {
+    const defaultLoadFunction = ((
+      res: TreeState<PamirsOrganizationalStructure>,
+      service: PamirsOrganizationalStructureService,
+      queryWrapper: QueryWrapper
+    ) => {
+      return service.queryListByFilter({
+        model: props.model,
+        companyModel: props.companyModel,
+        rsql: queryWrapper.rsql
+      });
+    }) as TreeStateLoadFunction<PamirsOrganizationalStructure>;
+
     const {
       state,
       filterData,
@@ -76,7 +101,7 @@ export default defineComponent({
       mode: props.selectMode,
       getCheckedKeys: () => props.checkedKeys,
       getSearchValue: () => props.searchValue,
-      load: props.load
+      load: props.load || defaultLoadFunction
     });
 
     const loading = computed({
@@ -102,6 +127,14 @@ export default defineComponent({
       updateTreeData();
     };
 
+    const onSelected = ({ node }: { node: OioTreeNode<PamirsDepartment> }) => {
+      if (props.selectMode === SelectMode.multiple) {
+        onUpdateChecked(node, node.checked !== true);
+      } else if (node.selectable !== false && props.selectMode === SelectMode.single) {
+        onUpdateChecked(node, node.key !== state.checkedKeys[0]);
+      }
+    };
+
     const updateTreeData = () => {
       state.data = [...state.data];
       emit('update:checkedKeys', state.checkedKeys);
@@ -116,6 +149,7 @@ export default defineComponent({
         loading.value = true;
         try {
           const res = await init({
+            model: props.model,
             rsql: props.domain,
             checkedKeys: props.initCheckedKeys || props.checkedKeys
           });
@@ -141,7 +175,8 @@ export default defineComponent({
       halfCheckedAll,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
-      onUpdateChecked
+      onUpdateChecked,
+      onSelected
     };
   },
   render() {
@@ -159,6 +194,7 @@ export default defineComponent({
       showCheckedAll,
       selectable,
       selectedKeys,
+      onSelected,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
       onUpdateChecked
@@ -171,6 +207,7 @@ export default defineComponent({
       selectable: selectable || false,
       selectedKeys,
       'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val),
+      onSelected,
       expandedKeys: state.expandedKeys,
       'onUpdate:expandedKeys': onUpdateExpandedKeys
     };
@@ -226,7 +263,7 @@ export default defineComponent({
     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('div', { class: `${mainClassName}-node-title` }, translateValueByKey('全选')),
           createVNode(OioCheckbox, {
             checked: checkedAll,
             indeterminate: halfCheckedAll,

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

@@ -1,12 +1,18 @@
 import {
-  PamirsDepartment,
-  PamirsOrganizationalStructure,
+  type PamirsDepartment,
+  type PamirsOrganizationalStructure,
   PamirsOrganizationalStructureServiceToken
 } from '@oinone/kunlun-engine';
-import { OioTreeNode } from '@oinone/kunlun-shared';
+import type { 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';
+import type { ComputedRef, Ref } from 'vue';
+import {
+  type TreeInitOptions,
+  type TreeState,
+  type TreeStateLoadFunction,
+  type TreeStateProps,
+  useTreeState
+} from '../../quick-utils';
 
 export interface OrganizationalStructureTreeInstance {
   state: Ref<TreeState<PamirsDepartment>>;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { AuthRole, PamirsEmployee } from '@oinone/kunlun-engine';
+import type { 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 { computed, createVNode, defineComponent, onMounted, type PropType } from 'vue';
+import type { ListStateLoadFunction } from '../../quick-utils';
 import { useRoleList } from './init';
 
 export default defineComponent({
@@ -30,6 +30,9 @@ export default defineComponent({
     load: {
       type: Function as PropType<ListStateLoadFunction<PamirsEmployee>>
     },
+    model: {
+      type: String
+    },
     domain: {
       type: String
     },

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { AuthRole, AuthRoleService, QueryWrapper } from '@oinone/kunlun-engine';
+import { type AuthRole, type AuthRoleService, QueryWrapper } from '@oinone/kunlun-engine';
 import {
   CastHelper,
   OioEmptyData,
@@ -15,8 +15,8 @@ import {
   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 { computed, createVNode, defineComponent, type PropType, reactive, type VNode, watch } from 'vue';
+import { CheckedHelper, type ListState, type ListStateLoadFunction } from '../../quick-utils';
 import { BaseSelect } from '../base';
 import RoleList from './RoleList.vue';
 
@@ -51,6 +51,9 @@ export default defineComponent({
     allowClear: {
       type: Boolean
     },
+    model: {
+      type: String
+    },
     domain: {
       type: String
     },
@@ -60,6 +63,12 @@ export default defineComponent({
     userRole: {
       type: Boolean,
       default: undefined
+    },
+    roleLoad: {
+      type: Function as PropType<ListStateLoadFunction<AuthRole>>
+    },
+    userRoleLoad: {
+      type: Function as PropType<ListStateLoadFunction<AuthRole>>
     }
   },
   emits: ['change'],
@@ -130,7 +139,11 @@ export default defineComponent({
     };
 
     const roleLoad = (res: ListState<AuthRole>, service: AuthRoleService, queryWrapper: QueryWrapper) => {
+      if (props.roleLoad) {
+        return props.roleLoad(res, service, queryWrapper);
+      }
       return service.queryListByFilter({
+        model: props.model,
         rsql: queryWrapper.rsql,
         roleCodes: props.roleCodes,
         userRole: props.userRole
@@ -149,7 +162,11 @@ export default defineComponent({
     });
 
     const userRoleLoad = (res: ListState<AuthRole>, service: AuthRoleService, queryWrapper: QueryWrapper) => {
+      if (props.userRoleLoad) {
+        return props.userRoleLoad(res, service, queryWrapper);
+      }
       return service.queryListByFilter({
+        model: props.model,
         rsql: queryWrapper.rsql,
         userRole: true
       });
@@ -194,6 +211,7 @@ export default defineComponent({
   render() {
     const {
       $translate,
+      title,
       mode,
       allowClear,
       domain,
@@ -214,7 +232,7 @@ export default defineComponent({
     return createVNode(
       OioModal,
       {
-        title: $translate('选择角色'),
+        title: $translate(title || '选择角色'),
         width: '720px',
         maskClosable: false,
         ...PropRecordHelper.convert(OioModalProps, CastHelper.cast(this)),
@@ -252,8 +270,8 @@ export default defineComponent({
             })
           );
           let showUserRole = userRole;
-          if (!roleCodes?.length) {
-            showUserRole = !userRole;
+          if (!roleCodes?.length && userRole !== false) {
+            showUserRole = false;
           }
           if (showUserRole) {
             tabs.push({

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { AuthRole } from '@oinone/kunlun-engine';
+import type { 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 { computed, createVNode, defineComponent, type PropType, ref } from 'vue';
 import { DefaultSelect, DefaultSelectProps } from '../base';
 import RoleModal from './RoleModal.vue';
 
@@ -15,6 +15,9 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...DefaultSelectProps,
+    roleModel: {
+      type: String
+    },
     domain: {
       type: String
     },
@@ -78,6 +81,7 @@ export default defineComponent({
       onShowModal,
       onChange,
 
+      roleModel,
       domain,
       roleCodes,
       userRole
@@ -87,6 +91,7 @@ export default defineComponent({
       mode,
       selected,
       allowClear,
+      model: roleModel,
       domain,
       roleCodes,
       userRole,

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

@@ -1,13 +1,13 @@
-import { AuthRole, AuthRoleServiceToken } from '@oinone/kunlun-engine';
-import { OioTreeNode } from '@oinone/kunlun-shared';
+import { type AuthRole, AuthRoleServiceToken } from '@oinone/kunlun-engine';
+import type { OioTreeNode } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import {
-  ListInitOptions,
-  ListState,
-  ListStateLoadFunction,
-  ListStateProps,
-  TreeState,
+  type ListInitOptions,
+  type ListState,
+  type ListStateLoadFunction,
+  type ListStateProps,
+  type TreeState,
   useListState
 } from '../../quick-utils';