From 5444236348f095d168bd3983d27b0a0f1e34817f Mon Sep 17 00:00:00 2001
From: "841322557@qq.com" <841322557@qq.com>
Date: Tue, 28 May 2024 17:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3listSelect=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=EF=BC=8C=E6=A0=BC=E5=BC=8F=E5=8C=96=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E5=90=8E=E7=9A=84=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListSelect/src/ListSelectModal.vue        | 314 +++++++++---------
 1 file changed, 158 insertions(+), 156 deletions(-)

diff --git a/src/components/ListSelect/src/ListSelectModal.vue b/src/components/ListSelect/src/ListSelectModal.vue
index 30b7fc3..e6f9cd3 100644
--- a/src/components/ListSelect/src/ListSelectModal.vue
+++ b/src/components/ListSelect/src/ListSelectModal.vue
@@ -67,9 +67,8 @@
           >
             <span
               :title="
-                item[props.config.itemName] + (props.config.isShowCode !== false
-                  ? ' (' + item[props.config.itemCode] + ')'
-                  : '')
+                item[props.config.itemName] +
+                (props.config.isShowCode !== false ? ' (' + item[props.config.itemCode] + ')' : '')
               "
             >
               {{ item[props.config?.itemName] }}
@@ -85,193 +84,196 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { defineComponent, ref, CSSProperties, computed, shallowRef } from 'vue';
-  import { Row, Col, Tag } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { BasicTree } from '/@/components/Tree';
-  import { Icon } from '/@/components/Icon';
-  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
-  import { BasicTable, useTable, BasicTableProps, TableRowSelection } from '/@/components/Table';
-  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
-  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
-  import { dynamicImport } from '/@/router/helper/routeHelper';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { defineComponent, ref, CSSProperties, computed, shallowRef } from 'vue';
+import { Row, Col, Tag } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { BasicTree } from '/@/components/Tree';
+import { Icon } from '/@/components/Icon';
+import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+import { BasicTable, useTable, BasicTableProps, TableRowSelection } from '/@/components/Table';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { dynamicImport } from '/@/router/helper/routeHelper';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-  const ARow = Row;
-  const ACol = Col;
+const ARow = Row;
+const ACol = Col;
 
-  const { t } = useI18n();
+const { t } = useI18n();
 
-  const props = defineProps({
-    config: { type: Object as PropType<any> },
-    checkbox: { type: Boolean },
-  });
+const props = defineProps({
+  config: { type: Object as PropType<any> },
+  checkbox: { type: Boolean },
+});
 
-  const emit = defineEmits(['select', 'register']);
+const emit = defineEmits(['select', 'register']);
 
-  const treeHeight = ref(400);
-  const tableHeight = ref(400);
-  const getTreeStyle = computed((): CSSProperties => {
-    return {
-      height: `${treeHeight.value}px`,
-      minHeight: `${treeHeight.value}px`,
-    };
-  });
-  function calcTreeHeight() {
-    let height = document.documentElement.clientHeight;
-    treeHeight.value = height - 280;
-    tableHeight.value = height - 380;
-  }
-  useWindowSizeFn(calcTreeHeight, 280);
-  onMountedOrActivated(calcTreeHeight);
-
-  const selectList = ref<Recordable[]>([]);
-
-  type Key = string | number;
-  const selectedRowKeys = ref<Key[]>([]);
-  const initialize = ref<boolean>(false);
-
-  const rowSelection: TableRowSelection = {
-    type: props.checkbox ? 'checkbox' : 'radio',
-    columnWidth: props.checkbox ? undefined : 0,
-    selectedRowKeys: selectedRowKeys as unknown as Key[],
-    onChange: (_selectedRowKeys: Key[], selectedRows: Recordable[]) => {
-      if (!initialize.value) return; // 首次加载不更新状态，会将初始值清空
-      selectedRowKeys.value = _selectedRowKeys;
-      selectList.value = selectedRows;
-    },
+const treeHeight = ref(400);
+const tableHeight = ref(400);
+const getTreeStyle = computed((): CSSProperties => {
+  return {
+    height: `${treeHeight.value}px`,
+    minHeight: `${treeHeight.value}px`,
   };
+});
+function calcTreeHeight() {
+  let height = document.documentElement.clientHeight;
+  treeHeight.value = height - 280;
+  tableHeight.value = height - 380;
+}
+useWindowSizeFn(calcTreeHeight, 280);
+onMountedOrActivated(calcTreeHeight);
 
-  const tableProps: BasicTableProps = {
-    showTableSetting: false,
-    useSearchForm: true,
-    canResize: true,
-    resizeHeightOffset: 100,
-    rowSelection,
-    clearSelectedOnReload: false,
-    ...props.config?.tableProps,
-    afterFetch: () => {
-      initialize.value = true;
-    },
-  };
+const selectList = ref<Recordable[]>([]);
+
+type Key = string | number;
+const selectedRowKeys = ref<Key[]>([]);
+const initialize = ref<boolean>(false);
 
-  const [registerTable, tableAction] = useTable(tableProps);
+const rowSelection: TableRowSelection = {
+  type: props.checkbox ? 'checkbox' : 'radio',
+  columnWidth: props.checkbox ? undefined : 0,
+  selectedRowKeys: selectedRowKeys as unknown as Key[],
+  onChange: (_selectedRowKeys: Key[], selectedRows: Recordable[]) => {
+    if (!initialize.value) return; // 首次加载不更新状态，会将初始值清空
+    selectedRowKeys.value = _selectedRowKeys;
+    selectList.value = selectedRows;
+  },
+};
 
-  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
-    //setModalProps({ loading: true });
-    //console.log(data);
-    selectList.value = data.selectList;
-    selectedRowKeys.value = selectList.value.map((e) => e[props.config.itemCode]);
-    if (data.queryParams) {
-      const params = Object.assign(tableAction.getForm().getFieldsValue(), data.queryParams);
-      await tableAction.getForm().setFieldsValue(params);
+const tableProps: BasicTableProps = {
+  showTableSetting: false,
+  useSearchForm: true,
+  canResize: true,
+  resizeHeightOffset: 100,
+  rowSelection,
+  clearSelectedOnReload: false,
+  ...props.config?.tableProps,
+  afterFetch: (data: any[]) => {
+    initialize.value = true;
+    if (props.config?.tableProps?.afterFetch) {
+      return props.config?.tableProps?.afterFetch(data);
     }
-    setModalProps({ loading: false });
-  });
+  },
+};
 
-  const [registerInputModal, inputAction] = useModal();
-  const inputFormComponent = shallowRef<Nullable<any>>(null);
-  const inputFormOpen = ref<Boolean>(false);
+const [registerTable, tableAction] = useTable(tableProps);
 
-  function handleInputForm() {
-    let component: ReturnType<typeof defineComponent>;
-    const imp = dynamicImport(props.config.newButtonComp);
-    if (imp) component = createAsyncComponent(imp);
-    if (component) {
-      inputFormComponent.value = component;
-      inputAction.setModalData({});
-      inputFormOpen.value = true;
-    }
+const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+  //setModalProps({ loading: true });
+  //console.log(data);
+  selectList.value = data.selectList;
+  selectedRowKeys.value = selectList.value.map((e) => e[props.config.itemCode]);
+  if (data.queryParams) {
+    const params = Object.assign(tableAction.getForm().getFieldsValue(), data.queryParams);
+    await tableAction.getForm().setFieldsValue(params);
   }
+  setModalProps({ loading: false });
+});
 
-  function handleSuccess() {
-    tableAction.reload();
-  }
+const [registerInputModal, inputAction] = useModal();
+const inputFormComponent = shallowRef<Nullable<any>>(null);
+const inputFormOpen = ref<Boolean>(false);
 
-  // const rowClick = (record: Recordable) => {
-  //   if (!props.checkbox) {
-  //     selectList.value = [record];
-  //   }
-  // };
+function handleInputForm() {
+  let component: ReturnType<typeof defineComponent>;
+  const imp = dynamicImport(props.config.newButtonComp);
+  if (imp) component = createAsyncComponent(imp);
+  if (component) {
+    inputFormComponent.value = component;
+    inputAction.setModalData({});
+    inputFormOpen.value = true;
+  }
+}
 
-  const rowDbClick = (record: Recordable) => {
-    // rowClick(record);
-    if (!props.checkbox) {
-      emit('select', [record]);
-      closeModal();
-    }
-  };
+function handleSuccess() {
+  tableAction.reload();
+}
 
-  const closeTag = (index: number) => {
-    selectList.value.splice(index, 1);
-  };
+// const rowClick = (record: Recordable) => {
+//   if (!props.checkbox) {
+//     selectList.value = [record];
+//   }
+// };
 
-  const handleSubmit = () => {
-    emit('select', selectList.value);
+const rowDbClick = (record: Recordable) => {
+  // rowClick(record);
+  if (!props.checkbox) {
+    emit('select', [record]);
     closeModal();
-  };
-
-  async function handleTreeSelect(keys: string[]) {
-    const values = {};
-    values[props.config.treeTableFieldName] = keys[0];
-    await tableAction.getForm().setFieldsValue(values);
-    await tableAction.reload();
   }
+};
+
+const closeTag = (index: number) => {
+  selectList.value.splice(index, 1);
+};
+
+const handleSubmit = () => {
+  emit('select', selectList.value);
+  closeModal();
+};
+
+async function handleTreeSelect(keys: string[]) {
+  const values = {};
+  values[props.config.treeTableFieldName] = keys[0];
+  await tableAction.getForm().setFieldsValue(values);
+  await tableAction.reload();
+}
 </script>
 <style lang="less">
-  .jeesite-listselect-table {
-    .ant-table-wrapper {
-      .ant-table {
-        td {
-          cursor: pointer;
-        }
+.jeesite-listselect-table {
+  .ant-table-wrapper {
+    .ant-table {
+      td {
+        cursor: pointer;
       }
     }
-    &.jeesite-basic-table-form-container {
-      .ant-form.jeesite-basic-form {
-        border-top: 0 !important;
-      }
+  }
+  &.jeesite-basic-table-form-container {
+    .ant-form.jeesite-basic-form {
+      border-top: 0 !important;
     }
   }
-  .jeesite-listselect {
-    .ant-modal.jeesite-basic-modal {
-      .ant-modal {
-        &-body {
-          > .scrollbar {
-            .scrollbar__wrap {
-              margin-top: 0;
-              margin-bottom: 0;
-            }
+}
+.jeesite-listselect {
+  .ant-modal.jeesite-basic-modal {
+    .ant-modal {
+      &-body {
+        > .scrollbar {
+          .scrollbar__wrap {
+            margin-top: 0;
+            margin-bottom: 0;
           }
         }
       }
     }
-    .basic-tree-header {
-      padding: 15px 0 4px;
-      border: 0;
-    }
-    &-tags {
-      overflow: auto;
+  }
+  .basic-tree-header {
+    padding: 15px 0 4px;
+    border: 0;
+  }
+  &-tags {
+    overflow: auto;
 
-      .ant-tag {
-        margin: 4px 0 0 0;
-        padding: 0 4px;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
+    .ant-tag {
+      margin: 4px 0 0 0;
+      padding: 0 4px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
 
-        span {
-          overflow: hidden;
-          white-space: nowrap;
-          cursor: default;
-        }
+      span {
+        overflow: hidden;
+        white-space: nowrap;
+        cursor: default;
+      }
 
-        .anticon {
-          margin-left: 4px !important;
-          height: 20px;
-          cursor: pointer;
-        }
+      .anticon {
+        margin-left: 4px !important;
+        height: 20px;
+        cursor: pointer;
       }
     }
   }
+}
 </style>
-- 
Gitee