ct-component-plus 0.0.21 → 0.0.23

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
     "packages"
   ],
-  "exports": {
-    ".": {
-      "import": "./packages/components/index.js"
-    }
-  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/packages/components/date-picker/src/date-picker.vue

@@ -38,7 +38,6 @@ const showValue = computed({
           val = props.addTimestamp(val);
         } else if (isArray(val)) {
           if (isArray(props.addTimestamp)) {
-            console.log(val);
             val = val.map((item, index) => {
               if (!item) return item;
               return +props.addTimestamp[index] + item;

package/packages/components/index.js

@@ -18,6 +18,7 @@ import dialog from "./dialog";
 import messageBox from './message-box';
 import CtMessage from './message';
 
+import CtLoading from './loading';
 import CtPage from './page';
 
 import ElementPlus from 'element-plus'
@@ -46,6 +47,7 @@ const components = [
   dialog,
   messageBox,
   CtMessage,
+  CtLoading,
   CtPage
 ]
 

package/packages/components/loading/index.js

@@ -0,0 +1,8 @@
+import CtLoading from "./src/CtLoading.vue";
+
+/* istanbul ignore next */
+CtLoading.install = function (Vue) {
+  Vue.component('CtLoading', CtLoading);
+};
+
+export default CtLoading;

package/packages/components/loading/src/CtLoading.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ct-loading">
+    <div class="ct-loading__main" v-show="showLoad">
+      <component :is="componentMap[type]" :is-load="isLoad"></component>
+    </div>
+    <!-- 默认插槽，放置显示内容 -->
+    <div v-show="!showLoad" class="slot-content">
+      <slot> </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import beating from "./beating.vue";
+import spinner from "./spinner.vue";
+import CircleProgress from "./progress.vue";
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "beating", //beating,spinner,progress
+    },
+    isLoad: {
+      type: Boolean,
+    },
+    delay: {
+      type: [String, Number],
+      default: 500,
+    },
+  },
+  components: {
+    beating,
+    spinner,
+    CircleProgress,
+  },
+  data() {
+    return {
+      showLoad: false,
+      componentMap: {
+        beating: "beating",
+        spinner: "spinner",
+        progress: "CircleProgress",
+      },
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+  watch: {
+    isLoad: {
+      handler(val) {
+        if (val) {
+          this.showLoad = val;
+        } else {
+          if (this.type == "progress") {
+            setTimeout(() => {
+              this.showLoad = val;
+            }, Number(this.delay));
+          } else {
+            this.showLoad = val;
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+<style scoped lang='less'>
+.ct-loading {
+  width: 100%;
+  min-height: 200px;
+  position: relative;
+}
+</style>

package/packages/components/loading/src/beating.vue

@@ -0,0 +1,72 @@
+<template>
+  <!-- 跳动加载特效 -->
+  <div class="ct-loading__beating">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.ct-loading__beating {
+  width: 40px;
+  height: 45px;
+  text-align: center;
+  font-size: 10px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 10px;
+}
+
+.ct-loading__beating > div {
+  background-color: var(--ct-color-primary, #2e65fd);
+  opacity: 0.8;
+  height: 100%;
+  width: 4px;
+  border-radius: 10px;
+  display: inline-block;
+  margin: 0 2px;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+
+  &:nth-child(2) {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  &:nth-child(3) {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+
+  &:nth-child(4) {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+
+  &:nth-child(5) {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+}
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
+</style>

package/packages/components/loading/src/progress.vue

@@ -0,0 +1,121 @@
+<template>
+  <svg class="ct-loading__progress" width="100" height="100">
+    <circle
+      cx="50"
+      cy="50"
+      r="45"
+      stroke="#F5F7FA"
+      stroke-width="6"
+      fill="none"
+    ></circle>
+    <circle
+      cx="50"
+      cy="50"
+      r="45"
+      :stroke="color"
+      class="circle"
+      id="ct-loading__progress"
+    ></circle>
+    <text x="50" y="55" fill="#141617" text-anchor="middle">
+      <tspan class="text">{{ currentPercentage }}</tspan>
+      <tspan class="percent">%</tspan>
+    </text>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CircleProgress",
+  props: {
+    color: {
+      default: "#2E65FD",
+    },
+    isLoad: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      currentPercentage: 0,
+      progressLen: 282.6,
+      circleDom: null,
+      interval: null,
+    };
+  },
+  created() {},
+  mounted() {
+    this.circleDom = document.querySelector("#ct-loading__progress");
+  },
+  methods: {
+    setPercent(dom, num) {
+      if (num > 100) return;
+      dom.style["stroke-dashoffset"] =
+        this.progressLen - (this.progressLen / 100) * num;
+    },
+  },
+  watch: {
+    isLoad: {
+      handler(val) {
+        if (val) {
+          this.currentPercentage = 0;
+          this.interval = setInterval(() => {
+            if (this.currentPercentage <= 60) {
+              this.currentPercentage += Math.floor(Math.random() * 5 + 5);
+            } else {
+              this.currentPercentage += Math.floor(Math.random() * 5);
+            }
+            if (this.currentPercentage >= 99) this.currentPercentage = 99;
+          }, 250);
+        } else {
+          this.currentPercentage = 100;
+        }
+      },
+      immediate: true,
+    },
+    currentPercentage(val) {
+      this.setPercent(this.circleDom, val);
+      if (val == 100) {
+        clearInterval(this.interval);
+      }
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+};
+</script>
+<style scoped lang='less'>
+.ct-loading__progress {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  .circle {
+    fill: none;
+    stroke-width: 6;
+    stroke-dasharray: 282.6;
+    stroke-dashoffset: 282.6;
+    //animation: circle 3s infinite;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    transform-box: fill-box;
+    transition: all 0.5s;
+  }
+  @keyframes circle {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .text,
+  .percent {
+    font-weight: 500;
+  }
+  text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

package/packages/components/loading/src/spinner.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="ct-loading__spinner">
+    <img src="../../../assets/img/icon_load_circle.png" alt="" />
+    <slot name="text"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang='less'>
+.ct-loading__spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  img {
+    width: 40px;
+    transform-origin: center;
+    animation: rotate 2s infinite linear;
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div type="border" class="download-button" @click="download">
+    <ct-icon name="download2_line"></ct-icon>
+    <span>下载</span>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, watch, unref } from "vue";
+const downloadLoading = inject("downloadLoading", false);
+watch(
+  () => downloadLoading,
+  (val) => {
+    console.log("watch", val);
+  }
+);
+const emit = defineEmits(["download"]);
+const download = () => {
+  console.log("download", unref(downloadLoading));
+  if (unref(downloadLoading)) return;
+  emit("download");
+};
+</script>
+<style lang='less' scoped>
+.download-button {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,148 @@
+<template>
+  <div :class="[ns.b()]">
+    <div :class="[ns.e('container')]">
+      <div :class="[ns.e('left')]">
+        <slot name="table-title">
+          <ct-icon
+            :class="[ns.e('total-icon')]"
+            name="content-search_line"
+          ></ct-icon>
+          <span>查询结果：</span>
+          <span>共{{ total }}条记录</span>
+          <span>，每页显示{{ pageSize }}条</span>
+          <slot name="table-desc"></slot>
+        </slot>
+      </div>
+      <div :class="[ns.e('right')]">
+        <slot name="table-handle">
+          <slot name="table-handle-before"></slot>
+          <div :class="[ns.e('handle')]">
+            <div
+              :class="[ns.e('handle-item'), ns.is(item, true)]"
+              v-for="(item, index) in handleList"
+              :key="index"
+            >
+              <component
+                v-if="handleItemShow(item)"
+                :is="getHandleComponent(item)"
+                v-bind="handleOptionsBind(item)"
+                v-model:sortObj="modelSort"
+                @download="download"
+              />
+            </div>
+          </div>
+          <slot name="table-handle-after"></slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, ref, computed } from "vue";
+import { useNamespace } from "../../../../hooks";
+import DownloadButton from "./DownloadButton.vue";
+import TableSort from "../../../table/src/TableSort.vue";
+const props = defineProps({
+  total: Number,
+  pageSize: Number,
+  handleList: {
+    type: Array,
+    default: () => {
+      return ["sort", "download"];
+    },
+  },
+  sortList: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  sortObj: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(["update:sortObj", "changeSort", "download"]);
+const ns = useNamespace("page-table-title");
+const modelSort = computed({
+  get() {
+    return props.sortObj;
+  },
+  set(val) {
+    emit("update:sortObj", val);
+    if (val.prop && val.order) {
+      emit("changeSort", val);
+    }
+  },
+});
+const getHandleComponent = (type) => {
+  const componentMap = {
+    sort: TableSort,
+    download: DownloadButton,
+  };
+  return componentMap[type] || "div";
+};
+const handleOptionsBind = (item) => {
+  if (item === "sort") {
+    return { sortList: props.sortList };
+  }
+  return {};
+};
+const download = () => {
+  emit("download");
+};
+const handleItemShow = (item) => {
+  if (item === "sort") {
+    return props.sortList.length > 0;
+  }
+  return true;
+};
+onMounted(() => {});
+</script>
+<style lang='less' scoped>
+.ct-page-table-title {
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    background-color: #fff;
+  }
+  &__left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  &__total-icon {
+    margin-right: 8px;
+  }
+  &__handle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    &-item {
+      &:not(:last-child) {
+        margin-right: 12px;
+      }
+      display: inline-flex;
+      align-items: center;
+      height: 28px;
+      padding: 0 9px;
+      color: var(--ct-color-primary);
+      border: 1px solid var(--ct-color-primary);
+      border-radius: 3px;
+      background-color: #fff;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--ct-color-primary-bg);
+      }
+      :deep(.ct-icon) {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,14 +1,92 @@
 <script>
-import { h, reactive, resolveComponent } from "vue";
+import {
+  h,
+  reactive,
+  inject,
+  ref,
+  computed,
+  resolveComponent,
+  provide,
+} from "vue";
 import { useNamespace } from "../../../hooks";
 import SearchBox from "../../search-box";
-import tableBox from "../../table";
+import TableBox from "../../table";
+import CtPagination from "../../pagination";
+import CtLoading from "../../loading";
+import TableTitle from "./modules/TableTitle.vue";
+import { isFunction } from "../../../utils";
 export default {
   name: "PageComponent",
-  props: {},
-  setup(props, { emit, slots }) {
+  props: {
+    searchApi: {
+      type: String,
+      default: "",
+    },
+    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 {};
+      },
+    },
+  },
+  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,
+    });
+    const downloadLoading = ref(false);
+    provide("downloadLoading", downloadLoading);
     const getSelfSlots = (name) => {
-      console.log(slots);
       if (!name) return null;
       const key = `_${name}-`;
       const res = {};
@@ -19,13 +97,67 @@ export default {
       });
       return res;
     };
+    // searchBox逻辑
+    const searchRef = ref(null);
+    const doSearch = (params) => {
+      console.log("doSearch", params);
+      state.searchParams = params;
+      state.pageNo = 1;
+      getPageData();
+    };
+    const getPageData = async (download = false) => {
+      let dataP = {
+        ...state.searchParams,
+      };
+      if (props.pageSize) {
+        dataP.pageSize = props.pageSize;
+        dataP.pageNo = state.pageNo;
+      }
+      state.pageLoading = true;
+      if (isFunction(props.cbs.doSearch)) {
+        await props.cbs.doSearch(dataP);
+        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) {
+        if (isFunction(props.cbs.doDownload)) {
+          await props.cbs.doDownload(dataP);
+        } else {
+          await baseDao[downlaodMethod](props.searchApi, dataP);
+        }
+        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;
+          }
+          const { total, tableData, columnData, list } = data;
+          state.total = total || 0;
+          if (columnData) {
+            tableProps.columnData = columnData;
+          }
+          tableProps.tableData = tableData || list || [];
+        })
+        .finally(() => {
+          state.pageLoading = false;
+        });
+      state.pageLoading = false;
+    };
+
+    const tableTitleRef = ref(null);
+    // tableBox逻辑
+    const tableRef = ref(null);
+    const paginationRef = ref(null);
     const tableProps = reactive({
-      columnData: [
-        { label: "序号", value: "index" },
-        { label: "校验结果", value: "result" },
-        { label: "处理状态", value: "status" },
-        { label: "操作", value: "id" },
-      ],
+      columnData: props.tableProps.columnData || [],
       tableData: [
         { index: 1, result: 3, status: "暂未处理" },
         { index: 2, result: 0, status: "无需处理" },
@@ -33,46 +165,157 @@ export default {
         { 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) => {
+      console.log("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 tableDom = h(
-      tableBox,
-      {
-        "table-props": tableProps,
-      },
-      { ...getSelfSlots("table") }
-    );
-    const searchDom = h(
-      SearchBox,
-      {
-        "search-list": [],
-        "have-reset": true,
-      },
-      { ...slots }
-    );
     const ns = useNamespace("page-component");
+    expose({
+      searchMethod,
+      searchRef,
+      tableTitleRef,
+      tableRef,
+      paginationRef,
+      doSearch,
+      getPageData,
+      changePageNo,
+      changeSort,
+    });
     return () =>
       h("div", { class: ns.b() }, [
         h("div", { class: ns.e("container") }, [
           h("div", { class: ns.e("header") }, [
-            h(
-              "div",
-              slots.header
-                ? slots.header()
-                : h("div", { class: ns.em("header", "default") }, [
-                    slots.headerBefore ? slots.headerBefore() : null,
-                    h("div", { class: ns.e("header-search") }, [searchDom]),
-                    slots.headerAfter ? slots.headerAfter() : null,
-                  ])
-            ),
-            // h('ct-search-box', {
-            //   searchList: searchList,
-            //   haveReset: true,
-            //   onDoSearch: doSearch
-            // })
+            slots.header
+              ? slots.header()
+              : h("div", { class: ns.em("header", "default") }, [
+                  slots.headerBefore ? slots.headerBefore() : null,
+                  h("div", { class: ns.e("search") }, [
+                    h(
+                      SearchBox,
+                      {
+                        onDoSearch: doSearch,
+                        ...props.searchProps,
+                        ref: searchRef,
+                      },
+                      { ...getSelfSlots("search") }
+                    ),
+                  ]),
+                  slots.headerAfter ? slots.headerAfter() : null,
+                ]),
+          ]),
+          h("div", { class: ns.e("content") }, [
+            slots.content
+              ? slots.content()
+              : h("div", { class: ns.em("content", "default") }, [
+                  h(
+                    CtLoading,
+                    { "is-load": state.pageLoading, ...props.loadProps },
+                    {
+                      default: () => [
+                        slots.contentBefore ? slots.contentBefore() : null,
+                        slots.tableTop
+                          ? slots.tableTitle()
+                          : 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,
+                              },
+                              {
+                                tableTitle: slots.tableTitle,
+                                tableDesc: slots.tableDesc,
+                              }
+                            ),
+                        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.contentAfter ? slots.contentAfter() : null,
+                      ],
+                    }
+                  ),
+                ]),
           ]),
-          h("div", { class: ns.e("content") }, [tableDom]),
         ]),
       ]);
   },
 };
-</script>
+</script>
+<style lang='less' scoped>
+.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);
+    :deep(.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);
+    :deep(.ct-table-box) {
+      margin-bottom: 0;
+    }
+  }
+  &__pagination {
+    justify-content: flex-end;
+    margin-top: 15px;
+    margin-bottom: 0;
+  }
+}
+</style>

package/packages/components/search-box/src/search-box.vue

@@ -114,8 +114,12 @@ const componentAll = computed(() => {
   };
   return componentMap;
 });
+const buriedParams = ref({});
 const handleBuriedParams = (params) => {
-  console.log(params);
+  const key = params.value;
+  if (key) {
+    buriedParams.value[key] = params;
+  }
 };
 const getComponentProps = (item) => {
   const bpKey = toFirstUpperCase(buriedParamsKey);
@@ -164,6 +168,7 @@ defineExpose({
   searchParamsCurrent,
   componentAll: componentAll.value,
   getComponent,
+  buriedParams,
 });
 onMounted(() => {});
 </script>

package/packages/components/select/src/select.vue

@@ -92,7 +92,7 @@ const showOptions = computed(() => {
 });
 const valueModel = computed({
   get() {
-    return props.modelValue || (props.multiple ? [] : "");
+    return props.modelValue || (props.multiple ? [] : props.modelValue);
   },
   set(newValue) {
     emit("update:modelValue", newValue);
@@ -303,6 +303,9 @@ defineExpose({
     }
   }
   &__popper {
+    &.is-multiple {
+      min-width: 140px;
+    }
     .el-select-dropdown__wrap {
       max-height: unset;
     }

package/packages/components/table/src/index.js

@@ -24,7 +24,7 @@ export const tableProps = {
       return []
     }
   },
-  isMultiSelect: {
+  isMultiSelect: {//是否开启多选
     type: Boolean,
     default: false
   },
@@ -32,8 +32,16 @@ export const tableProps = {
     type: Array,
     default: [],
   },
+  multiSelectAttr: {
+    type: Object,
+    default: () => {
+      return {
+        width:'88'
+      }
+    }
+  },
   teleportDom: {
-    type: String,
+    type:[String, Node],
   },
   defaultSort: {
     type: Object,

package/packages/components/table/src/table.vue

@@ -1,21 +1,17 @@
 <template>
   <div :class="[ns.b()]">
     <div :class="[ns.e('container')]">
-      <el-table
-        ref="tableRef"
+      <el-table ref="tableRef"
         :class="[ns.e('body')]"
         :data="showData"
         :span-method="spanMethod"
         @selection-change="handleSelectChange"
-        row-key="rowKey"
-        v-bind="$attrs"
-      >
+        row-key="rowKey" v-bind="$attrs">
         <el-table-column
           v-if="isMultiSelect"
-          type="selection"
-          width="88"
-          :reserve-selection="true"
-        ></el-table-column>
+          type="selection" width="88"
+          v-bind="multiSelectAttr"
+          :reserve-selection="true"></el-table-column>
         <el-table-column
           v-for="(column, index) in columnData"
           :key="column.value + '-' + column.label"
@@ -28,25 +24,25 @@
           :align="column.align || 'center'"
           :fixed="column.fixed || false"
           show-overflow-tooltip
-          v-bind="column.rawAttr || {}"
-        >
-          <template #header="scope" v-if="column.slotHeader">
+          v-bind="column.rawAttr || {}">
+          <template #header="scope"
+            v-if="column.slotHeader">
             <slot
               :name="column.value + 'Header'"
               v-bind="scope"
               :column="column"
               :label="column.label"
-              :value="column.value"
-            ></slot>
+              :value="column.value">
+            </slot>
           </template>
           <template #default="scope">
-            <slot
-              :name="column.value"
+            <slot :name="column.value"
               :value="scope.row[column.value]"
               v-bind="scope"
-              :column="column"
-            >
-              <span>{{ scope.row[column.value] }}</span>
+              :column="column">
+              <span>{{
+                scope.row[column.value]
+              }}</span>
             </slot>
             <el-table-column
               v-for="(column1, index) in column.children"
@@ -60,16 +56,16 @@
               :align="column1.align || 'center'"
               :fixed="column1.fixed || false"
               show-overflow-tooltip
-              v-bind="column1.rawAttr || {}"
-            >
+              v-bind="column1.rawAttr || {}">
               <template #default="scope">
                 <slot
                   :name="column1.value"
                   :value="scope.row[column1.value]"
                   v-bind="scope"
-                  :column="column1"
-                >
-                  <span>{{ scope.row[column1.value] }}</span>
+                  :column="column1">
+                  <span>{{
+                    scope.row[column1.value]
+                  }}</span>
                 </slot>
               </template>
             </el-table-column>
@@ -77,12 +73,12 @@
         </el-table-column>
         <template #empty>
           <slot name="empty">
-            <component
-              :is="tableEmptyDom"
+            <component :is="tableEmptyDom"
               v-if="tableEmptyDom"
-              :text="emptyText"
-            ></component>
-            <span v-else>{{ emptyText }}</span>
+              :text="emptyText">
+            </component>
+            <span v-else>{{ emptyText
+            }}</span>
           </slot>
         </template>
       </el-table>
@@ -92,11 +88,13 @@
         :total="total"
         :current-page="pageNo"
         v-if="pageSize"
-        @current-change="handleCurrentChange"
-      ></ct-pagination>
+        @current-change="handleCurrentChange"></ct-pagination>
     </div>
-    <Teleport :to="`#${teleportDom}`" v-if="teleportDom && teleportStatus">
-      <table-sort v-model:sort-obj="sortObj" :sort-list="sortList"></table-sort>
+    <Teleport :to="`#${teleportDom}`"
+      v-if="teleportDom && teleportStatus">
+      <table-sort
+        v-model:sort-obj="sortObj"
+        :sort-list="sortList"></table-sort>
     </Teleport>
   </div>
 </template>
@@ -245,6 +243,7 @@ const sortList = computed(() => {
 });
 onMounted(() => {
   teleportStatus.value = true; //直到dom挂载完毕再挂载teleport组件
+  console.log(props.teleportDom);
 });
 
 defineExpose({ tableRef });
@@ -253,6 +252,7 @@ defineExpose({ tableRef });
 .ct-table__body {
   width: 100%;
 }
+
 .ct-table__pagination {
   margin-top: 24px;
   display: flex;

package/packages/hooks/use-echarts/use-bar/index.js

@@ -26,7 +26,7 @@ export const useBarEcharts = (type, option, data) => {
   function update(data) {
     //数据更新方式
     if (data.length == 0) {
-      console.log('用户没有传入图表数据，请在hooks外处理');
+      console.warn('用户没有传入图表数据，请在hooks外处理');
       return;
     }
     if (data.length > 1) {
@@ -59,13 +59,13 @@ export const useBarEcharts = (type, option, data) => {
     { deep: true, immediate: true }
   );
   // 灵活配置并入option
- 
-   watch(() => option, (val) => {
-      objectMerge(barOption.value, option);
-   },
-   { 
+
+  watch(() => option, (val) => {
+    objectMerge(barOption.value, option);
+  },
+    {
       deep: true, immediate: true
-   })
+    })
   return {
     barOption,
     itemTemplate

package/packages/hooks/use-echarts/use-line/index.js

@@ -30,7 +30,7 @@ export const useLineEcharts = (type, option, data) => {
   function update(data) {
     //数据更新方式
     if (data.length == 0) {
-      console.log('用户没有传入图表数据，请在hooks外处理');
+      console.warn('用户没有传入图表数据，请在hooks外处理');
       return;
     }
     if (data.length > 1) {
@@ -78,7 +78,7 @@ export const useLineEcharts = (type, option, data) => {
   }, {
     deep: true, immediate: true
   })
-  
+
   return {
     lineOption,
     itemTemplate