ct-component-plus 0.0.42 → 0.0.43

package/packages/components/page/src/page.vue

@@ -1,382 +1,382 @@
-<script>
-import {
-  h,
-  reactive,
-  inject,
-  ref,
-  computed,
-  resolveComponent,
-  provide,
-  nextTick,
-} from "vue";
-import { useNamespace } from "../../../hooks";
-import SearchBox from "../../search-box";
-import TableBox from "../../table";
-import CtEmpty from "../../empty";
-import CtPagination from "../../pagination";
-import CtLoading from "../../loading";
-import TableTitle from "./modules/TableTitle.vue";
-import { isFunction } from "../../../utils";
-export default {
-  name: "PageComponent",
-  props: {
-    searchApi: {
-      type: String,
-      default: "",
-    },
-    needInit: {
-      type: Boolean,
-      default: true,
-    },
-    searchConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    pageSize: Number,
-    tableHandleList: {
-      type: Array,
-      default: () => {
-        return ["sort", "download"];
-      },
-    },
-    searchProps: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    tableProps: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    loadProps: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    paginationProps: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    cbs: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    pageProps: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  setup(props, { emit, slots, expose }) {
-    const baseDao = inject("$ctBaseDao");
-    const serviceConfig = inject("$ctServiceConfig");
-    const searchMethod =
-      props.searchConfig.method || serviceConfig.defaultMethod || "post";
-    const downlaodMethod =
-      props.searchConfig.downlaodMethod ||
-      serviceConfig.defaultDownlaodMethod ||
-      "handlerDownload";
-    const state = reactive({
-      total: 0,
-      pageSize: props.pageSize,
-      pageNo: 1,
-      sortObj: {},
-      searchParams: {},
-      pageLoading: false,
-      downloadLoading: false,
-      pageError: false,
-    });
-    const downloadLoading = ref(false);
-    provide("downloadLoading", downloadLoading);
-    const getSelfSlots = (name) => {
-      if (!name) return null;
-      const key = `_${name}-`;
-      const res = {};
-      Object.keys(slots).forEach((slotName) => {
-        if (slotName.startsWith(key)) {
-          res[slotName.replace(key, "")] = slots[slotName];
-        }
-      });
-      return res;
-    };
-    // searchBox逻辑
-    const searchRef = ref(null);
-    const doSearch = (params) => {
-      state.searchParams = params;
-      state.pageNo = 1;
-      getPageData();
-    };
-    const setTableProps = (data) => {
-      const { total, tableData, columnData, list } = data;
-      state.total = total || 0;
-      if (columnData) {
-        tableProps.columnData = columnData;
-      }
-      tableProps.tableData = tableData || list || [];
-    };
-    const getPageData = async (download = false) => {
-      let dataP = {
-        ...state.searchParams,
-      };
-      if (state.sortObj?.order && state.sortObj?.prop) {
-        dataP.sortObj = state.sortObj;
-      }
-      if (props.pageSize) {
-        dataP.pageSize = props.pageSize;
-        dataP.pageNo = state.pageNo;
-      }
-      state.pageError = false;
-      state.pageLoading = true;
-      if (isFunction(props.cbs.doSearch)) {
-        const res = await props.cbs.doSearch(dataP);
-        if (res) {
-          if (Array.isArray(res)) {
-            tableProps.tableData = res;
-          } else if (typeof res === "object") {
-            setTableProps(res);
-          }
-        }
-        state.pageLoading = false;
-        return;
-      }
-      if (isFunction(props.cbs.beforeSearch)) {
-        const paramsHandle = await props.cbs.beforeSearch(dataP);
-        if (paramsHandle === false) return;
-        dataP = paramsHandle || dataP;
-      }
-      if (download) {
-        dataP.download = true;
-        if (isFunction(props.cbs.doDownload)) {
-          await props.cbs.doDownload(dataP);
-        } else {
-          try {
-            await baseDao[downlaodMethod](props.searchApi, dataP);
-          } catch (error) {
-            console.error(error);
-          }
-        }
-        state.pageLoading = false;
-        return;
-      }
-      await baseDao[searchMethod](props.searchApi, dataP)
-        .then(async (res) => {
-          let data = res || {};
-          if (isFunction(props.cbs.afterSearch)) {
-            const dataHandle = await props.cbs.afterSearch(data);
-            if (dataHandle) data = dataHandle;
-          }
-          setTableProps(data);
-        })
-        .catch(() => {
-          state.pageError = true;
-        });
-      state.pageLoading = false;
-    };
-
-    const tableTitleRef = ref(null);
-    // tableBox逻辑
-    const tableRef = ref(null);
-    const paginationRef = ref(null);
-    const tableProps = reactive({
-      columnData: props.tableProps.columnData || [],
-      tableData: [
-        // { index: 1, result: 3, status: "暂未处理" },
-        // { index: 2, result: 0, status: "无需处理" },
-        // { index: 3, result: 3, status: "处理中" },
-        // { index: 4, result: 0, status: "处理完成" },
-      ],
-    });
-    const sortList = computed(() => {
-      const tableSortList = props.tableProps.columnData.filter((item) => {
-        return item.sortable;
-      });
-      return tableSortList || [];
-    });
-    const changeSort = (val) => {
-      state.pageNo = 1;
-      state.sortObj = val;
-      getPageData();
-    };
-    const changePageNo = (val) => {
-      state.pageNo = val;
-      getPageData();
-    };
-    const doDownload = async () => {
-      downloadLoading.value = true;
-      try {
-        await getPageData(true);
-      } catch (error) {}
-      await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve();
-        }, 3000);
-      });
-      downloadLoading.value = false;
-    };
-    const clickSearch = () => {
-      if (searchRef.value && isFunction(searchRef.value.doSearch)) {
-        searchRef.value.doSearch();
-      } else {
-        doSearch({});
-      }
-    };
-    if (props.needInit) {
-      nextTick(() => {
-        clickSearch();
-      });
-    }
-    const ns = useNamespace("page-component");
-    console.log(slots);
-    expose({
-      searchMethod,
-      searchRef,
-      tableTitleRef,
-      tableRef,
-      paginationRef,
-      doSearch,
-      clickSearch,
-      getPageData,
-      changePageNo,
-      changeSort,
-      state,
-    });
-    return () =>
-      h("div", { class: ns.b() }, [
-        h("div", { class: ns.e("container") }, [
-          h("div", { class: ns.e("header") }, [
-            slots.header
-              ? slots.header()
-              : h("div", { class: ns.em("header", "default") }, [
-                  slots["header-before"] ? slots["header-before"]() : null,
-                  h("div", { class: ns.e("search") }, [
-                    h(
-                      SearchBox,
-                      {
-                        onDoSearch: doSearch,
-                        ...props.searchProps,
-                        ref: searchRef,
-                      },
-                      { ...getSelfSlots("search") }
-                    ),
-                  ]),
-                  slots["header-after"] ? slots["header-after"]() : null,
-                ]),
-          ]),
-          h("div", { class: ns.e("content") }, [
-            slots.content
-              ? slots.content()
-              : h("div", { class: ns.em("content", "default") }, [
-                  state.pageError
-                    ? h(CtEmpty, {
-                        class: ns.e("error-empty"),
-                        innerText:
-                          props.pageProps?.pageErrorText || "接口请求错误",
-                      })
-                    : h(
-                        CtLoading,
-                        { "is-load": state.pageLoading, ...props.loadProps },
-                        {
-                          default: () => [
-                            slots["content-before"]
-                              ? slots["content-before"]()
-                              : null,
-                            slots["table-top"]
-                              ? slots["table-top"]()
-                              : h(
-                                  TableTitle,
-                                  {
-                                    total: state.total,
-                                    pageSize: state.pageSize,
-                                    handleList: props.tableHandleList,
-                                    sortList: sortList.value,
-                                    sortObj: state.sortObj,
-                                    "onUpdate:sortObj": (val) => {
-                                      state.sortObj = val;
-                                    },
-                                    onChangeSort: changeSort,
-                                    onDownload: doDownload,
-                                    ref: tableTitleRef,
-                                  },
-                                  {
-                                    "table-title": slots["table-title"],
-                                    "table-desc": slots["table-desc"],
-                                    "table-handle": slots["table-handle"],
-                                    "table-handle-before":
-                                      slots["table-handle-before"],
-                                    "table-handle-after":
-                                      slots["table-handle-after"],
-                                  }
-                                ),
-                            h("div", { class: ns.e("table") }, [
-                              h(
-                                TableBox,
-                                {
-                                  "table-props": tableProps,
-                                  ...props.tableProps,
-                                  ref: tableRef,
-                                },
-                                { ...getSelfSlots("table") }
-                              ),
-                              h(CtPagination, {
-                                class: ns.e("pagination"),
-                                pageSize: state.pageSize,
-                                total: state.total,
-                                "current-page": state.pageNo,
-                                "onUpdate:current-page": changePageNo,
-                                ...props.paginationProps,
-                                ref: paginationRef,
-                              }),
-                            ]),
-                            slots["content-after"]
-                              ? slots["content-after"]()
-                              : null,
-                          ],
-                        }
-                      ),
-                ]),
-          ]),
-          slots.default ? slots.default() : null,
-        ]),
-      ]);
-  },
-};
-</script>
-<style lang="less">
-.ct-page-component {
-  --content-spacing-horizontal: 20px;
-  &__header {
-    background-color: #fff;
-    padding: var(--content-spacing-horizontal);
-    margin-bottom: 16px;
-    border-radius: var(--ct-border-radius);
-    .ct-search-box {
-      margin-bottom: 0;
-    }
-  }
-  &__content {
-    background-color: #fff;
-    padding: 0 var(--content-spacing-horizontal)
-      var(--content-spacing-horizontal);
-    border-radius: var(--ct-border-radius);
-    .ct-table-box {
-      margin-bottom: 0;
-    }
-  }
-  &__pagination {
-    justify-content: flex-end;
-    margin-top: 15px;
-    margin-bottom: 0;
-  }
-}
-</style>
+<script>
+import {
+  h,
+  reactive,
+  inject,
+  ref,
+  computed,
+  resolveComponent,
+  provide,
+  nextTick,
+} from "vue";
+import { useNamespace } from "../../../hooks";
+import SearchBox from "../../search-box";
+import TableBox from "../../table";
+import CtEmpty from "../../empty";
+import CtPagination from "../../pagination";
+import CtLoading from "../../loading";
+import TableTitle from "./modules/TableTitle.vue";
+import { isFunction } from "../../../utils";
+export default {
+  name: "PageComponent",
+  props: {
+    searchApi: {
+      type: String,
+      default: "",
+    },
+    needInit: {
+      type: Boolean,
+      default: true,
+    },
+    searchConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    pageSize: Number,
+    tableHandleList: {
+      type: Array,
+      default: () => {
+        return ["sort", "download"];
+      },
+    },
+    searchProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    tableProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    loadProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    paginationProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    cbs: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    pageProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  setup(props, { emit, slots, expose }) {
+    const baseDao = inject("$ctBaseDao");
+    const serviceConfig = inject("$ctServiceConfig");
+    const searchMethod =
+      props.searchConfig.method || serviceConfig.defaultMethod || "post";
+    const downlaodMethod =
+      props.searchConfig.downlaodMethod ||
+      serviceConfig.defaultDownlaodMethod ||
+      "handlerDownload";
+    const state = reactive({
+      total: 0,
+      pageSize: props.pageSize,
+      pageNo: 1,
+      sortObj: {},
+      searchParams: {},
+      pageLoading: false,
+      downloadLoading: false,
+      pageError: false,
+    });
+    const downloadLoading = ref(false);
+    provide("downloadLoading", downloadLoading);
+    const getSelfSlots = (name) => {
+      if (!name) return null;
+      const key = `_${name}-`;
+      const res = {};
+      Object.keys(slots).forEach((slotName) => {
+        if (slotName.startsWith(key)) {
+          res[slotName.replace(key, "")] = slots[slotName];
+        }
+      });
+      return res;
+    };
+    // searchBox逻辑
+    const searchRef = ref(null);
+    const doSearch = (params) => {
+      state.searchParams = params;
+      state.pageNo = 1;
+      getPageData();
+    };
+    const setTableProps = (data) => {
+      const { total, tableData, columnData, list } = data;
+      state.total = total || 0;
+      if (columnData) {
+        tableProps.columnData = columnData;
+      }
+      tableProps.tableData = tableData || list || [];
+    };
+    const getPageData = async (download = false) => {
+      let dataP = {
+        ...state.searchParams,
+      };
+      if (state.sortObj?.order && state.sortObj?.prop) {
+        dataP.sortObj = state.sortObj;
+      }
+      if (props.pageSize) {
+        dataP.pageSize = props.pageSize;
+        dataP.pageNo = state.pageNo;
+      }
+      state.pageError = false;
+      state.pageLoading = true;
+      if (isFunction(props.cbs.doSearch)) {
+        const res = await props.cbs.doSearch(dataP);
+        if (res) {
+          if (Array.isArray(res)) {
+            tableProps.tableData = res;
+          } else if (typeof res === "object") {
+            setTableProps(res);
+          }
+        }
+        state.pageLoading = false;
+        return;
+      }
+      if (isFunction(props.cbs.beforeSearch)) {
+        const paramsHandle = await props.cbs.beforeSearch(dataP);
+        if (paramsHandle === false) return;
+        dataP = paramsHandle || dataP;
+      }
+      if (download) {
+        dataP.download = true;
+        if (isFunction(props.cbs.doDownload)) {
+          await props.cbs.doDownload(dataP);
+        } else {
+          try {
+            await baseDao[downlaodMethod](props.searchApi, dataP);
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        state.pageLoading = false;
+        return;
+      }
+      await baseDao[searchMethod](props.searchApi, dataP)
+        .then(async (res) => {
+          let data = res || {};
+          if (isFunction(props.cbs.afterSearch)) {
+            const dataHandle = await props.cbs.afterSearch(data);
+            if (dataHandle) data = dataHandle;
+          }
+          setTableProps(data);
+        })
+        .catch(() => {
+          state.pageError = true;
+        });
+      state.pageLoading = false;
+    };
+
+    const tableTitleRef = ref(null);
+    // tableBox逻辑
+    const tableRef = ref(null);
+    const paginationRef = ref(null);
+    const tableProps = reactive({
+      columnData: props.tableProps.columnData || [],
+      tableData: [
+        // { index: 1, result: 3, status: "暂未处理" },
+        // { index: 2, result: 0, status: "无需处理" },
+        // { index: 3, result: 3, status: "处理中" },
+        // { index: 4, result: 0, status: "处理完成" },
+      ],
+    });
+    const sortList = computed(() => {
+      const tableSortList = props.tableProps.columnData.filter((item) => {
+        return item.sortable;
+      });
+      return tableSortList || [];
+    });
+    const changeSort = (val) => {
+      state.pageNo = 1;
+      state.sortObj = val;
+      getPageData();
+    };
+    const changePageNo = (val) => {
+      state.pageNo = val;
+      getPageData();
+    };
+    const doDownload = async () => {
+      downloadLoading.value = true;
+      try {
+        await getPageData(true);
+      } catch (error) {}
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 3000);
+      });
+      downloadLoading.value = false;
+    };
+    const clickSearch = () => {
+      if (searchRef.value && isFunction(searchRef.value.doSearch)) {
+        searchRef.value.doSearch();
+      } else {
+        doSearch({});
+      }
+    };
+    if (props.needInit) {
+      nextTick(() => {
+        clickSearch();
+      });
+    }
+    const ns = useNamespace("page-component");
+    console.log(slots);
+    expose({
+      searchMethod,
+      searchRef,
+      tableTitleRef,
+      tableRef,
+      paginationRef,
+      doSearch,
+      clickSearch,
+      getPageData,
+      changePageNo,
+      changeSort,
+      state,
+    });
+    return () =>
+      h("div", { class: ns.b() }, [
+        h("div", { class: ns.e("container") }, [
+          h("div", { class: ns.e("header") }, [
+            slots.header
+              ? slots.header()
+              : h("div", { class: ns.em("header", "default") }, [
+                  slots["header-before"] ? slots["header-before"]() : null,
+                  h("div", { class: ns.e("search") }, [
+                    h(
+                      SearchBox,
+                      {
+                        onDoSearch: doSearch,
+                        ...props.searchProps,
+                        ref: searchRef,
+                      },
+                      { ...getSelfSlots("search") }
+                    ),
+                  ]),
+                  slots["header-after"] ? slots["header-after"]() : null,
+                ]),
+          ]),
+          h("div", { class: ns.e("content") }, [
+            slots.content
+              ? slots.content()
+              : h("div", { class: ns.em("content", "default") }, [
+                  state.pageError
+                    ? h(CtEmpty, {
+                        class: ns.e("error-empty"),
+                        innerText:
+                          props.pageProps?.pageErrorText || "接口请求错误",
+                      })
+                    : h(
+                        CtLoading,
+                        { "is-load": state.pageLoading, ...props.loadProps },
+                        {
+                          default: () => [
+                            slots["content-before"]
+                              ? slots["content-before"]()
+                              : null,
+                            slots["table-top"]
+                              ? slots["table-top"]()
+                              : h(
+                                  TableTitle,
+                                  {
+                                    total: state.total,
+                                    pageSize: state.pageSize,
+                                    handleList: props.tableHandleList,
+                                    sortList: sortList.value,
+                                    sortObj: state.sortObj,
+                                    "onUpdate:sortObj": (val) => {
+                                      state.sortObj = val;
+                                    },
+                                    onChangeSort: changeSort,
+                                    onDownload: doDownload,
+                                    ref: tableTitleRef,
+                                  },
+                                  {
+                                    "table-title": slots["table-title"],
+                                    "table-desc": slots["table-desc"],
+                                    "table-handle": slots["table-handle"],
+                                    "table-handle-before":
+                                      slots["table-handle-before"],
+                                    "table-handle-after":
+                                      slots["table-handle-after"],
+                                  }
+                                ),
+                            h("div", { class: ns.e("table") }, [
+                              h(
+                                TableBox,
+                                {
+                                  "table-props": tableProps,
+                                  ...props.tableProps,
+                                  ref: tableRef,
+                                },
+                                { ...getSelfSlots("table") }
+                              ),
+                              h(CtPagination, {
+                                class: ns.e("pagination"),
+                                pageSize: state.pageSize,
+                                total: state.total,
+                                "current-page": state.pageNo,
+                                "onUpdate:current-page": changePageNo,
+                                ...props.paginationProps,
+                                ref: paginationRef,
+                              }),
+                            ]),
+                            slots["content-after"]
+                              ? slots["content-after"]()
+                              : null,
+                          ],
+                        }
+                      ),
+                ]),
+          ]),
+          slots.default ? slots.default() : null,
+        ]),
+      ]);
+  },
+};
+</script>
+<style lang="less">
+.ct-page-component {
+  --content-spacing-horizontal: 20px;
+  &__header {
+    background-color: #fff;
+    padding: var(--content-spacing-horizontal);
+    margin-bottom: 16px;
+    border-radius: var(--ct-border-radius);
+    .ct-search-box {
+      margin-bottom: 0;
+    }
+  }
+  &__content {
+    background-color: #fff;
+    padding: 0 var(--content-spacing-horizontal)
+      var(--content-spacing-horizontal);
+    border-radius: var(--ct-border-radius);
+    .ct-table-box {
+      margin-bottom: 0;
+    }
+  }
+  &__pagination {
+    justify-content: flex-end;
+    margin-top: 15px;
+    margin-bottom: 0;
+  }
+}
+</style>