签报弹框

src/components/common/deptListModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="registerModal" width="65%" :title="getTitle" @ok="handleSubmit"
+      @visible-change="handleVisibleChange" >
+        <BasicTable @register="registerTable" class="deptListModal"></BasicTable>
+    </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 { getDept, } from '/@/api/approve/Appro';
+
+    const { t } = useI18n();
+    const codeFormSchema: FormSchema[] = [
+      {
+        field: 'name',
+        label: '组织名称',
+        component: 'Input',
+      },
+      {
+        field: 'code',
+        label: '组织编码',
+        component: 'Input',
+      },
+    ];
+
+    const columns: BasicColumn[] = [
+     {
+        dataIndex: 'name',
+        title: '组织名称',
+        align: 'left',
+        sorter: true,
+      },
+
+      {
+        dataIndex: 'code',
+        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 props = defineProps({
+      selectType: { type: String, default: 'radio' },
+    
+    });
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+
+        setModalProps({ confirmLoading: false });
+
+        isUpdate.value = !!data?.isUpdate;
+    });
+
+    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload  }] = useTable({
+        title: t('部门列表'),
+        api: getDept,
+        columns,
+  
+        bordered: true,
+        pagination: true,
+        canResize: false,
+        formConfig: {
+          labelCol:{span: 9, offSet:10},
+          schemas: codeFormSchema,
+          showResetButton: true,
+        },
+        showIndexColumn: false,
+        immediate: false, // 设置为不立即调用
+        beforeFetch: (params) => {
+          console.log(params, 'params')
+          return { ...params};
+        },
+        rowSelection: {
+          type: props.selectType,
+          onChange: onSelectChange
+        },
+    });
+    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 >
+ .deptListModal .basicCol{
+    position: inherit !important;
+    top: 0;
+  }
+</style>

src/components/common/deptUserModal.vue

@@ -0,0 +1,149 @@
+<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>