geg-gas-web/src/components/common/deptUserModal.vue

<template>
 
 <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="70%"  :title="getTitle" @ok="handleSubmit" @visible-change="handleVisibleChange" >
      <div style="display: flex;">

        <div class="w-1/3 xl:w-1/3 overflow-hidden bg-white" :style="{ 'border-right': '1px solid #e5e7eb' }">
          <BasicTree :title="t('组织列表')" ref="asyncTreeRef" search toolbar :clickRowToExpand="true" expandOnSearch :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
        </div>
        <BasicTable @register="registerTable" class="deptUserModal w-2/3 xl:w-2/3"></BasicTable>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
    import { ref, computed, unref, nextTick  } from 'vue';
    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { getLngCustomerPage} from '/@/api/sales/Customer';
    import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
    import { getDept, getUser } from '/@/api/approve/Appro';
    

    const { t } = useI18n();
    const codeFormSchema: FormSchema[] = [
      {
        field: 'userName',
        label: '用户名',
        component: 'Input',
      },
    ];
    const treeData = ref<TreeItem[]>([]);
    const columns: BasicColumn[] = [
      {
        dataIndex: 'name',
        title: '姓名',
        align: 'left',
        sorter: true,
      },
     {
        dataIndex: 'genderDesc',
        title: '性别',
        align: 'left',
        sorter: true,
      },

      {
        dataIndex: 'mobile',
        title: '手机号',
        align: 'left',
        sorter: true,
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        align: 'left',
        sorter: true,
      },
    ];

    const emit = defineEmits(['success', 'register']);

    const { notification } = useMessage();
    const isUpdate = ref(true);
    const rowId = ref('');
    const selectedKeys = ref<string[]>([]);
    const selectedValues = ref([]);
    const deptId = ref()
    const props = defineProps({
      selectType: { type: String, default: 'radio' },
    
    });
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        fetch()
        setModalProps({ confirmLoading: false });

        isUpdate.value = !!data?.isUpdate;
    });

    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload  }] = useTable({
        title: t('客户列表'),
        api: getUser,
        columns,
  
        bordered: true,
        pagination: true,
        canResize: false,
        formConfig: {
          labelCol:{span: 9, offSet:10},
          schemas: codeFormSchema,
          showResetButton: true,
        },
        immediate: false, // 设置为不立即调用
        beforeFetch: (params) => {
          return { ...params, deptId: deptId.value};
        },
        rowSelection: {
          type: props.selectType,
          onChange: onSelectChange
        },
    });
    const handleSelect = (val) => {
      deptId.value = val[0]
      reload({ searchInfo: { deptId: deptId.value } });
    }
    async function fetch() {
        treeData.value = (await getDept()) as unknown as TreeItem[];
    }
    const handleVisibleChange = (visible: boolean) => {
      if (visible) {
        nextTick(() => {
          // reload();
        });
      }
    };
    function onSelectChange(rowKeys: string[], e) {
      selectedKeys.value = rowKeys;
      selectedValues.value = e
    }
    const getTitle = computed(() => (!unref(isUpdate) ? t('选择用户') : t('')));

    async function handleSubmit() {
      if (!selectedValues.value.length) {
        notification.warning({
          message: t('提示'),
          description: t('请选择用户')
        });
        return
      }
      closeModal();
      emit('success', selectedValues.value);
    }
</script>
<style >
 .deptUserModal .basicCol{
    position: inherit !important;
    top: 0;
  }
</style>