ct-component-plus 0.0.20 → 0.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/index.js

@@ -18,13 +18,14 @@ import dialog from "./dialog";
 import messageBox from './message-box';
 import CtMessage from './message';
 
+import CtPage from './page';
+
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import cingtaIcon from 'cingta-icon';
 // import cingtaIcon from '../../icon/components/index';
 import { isObject } from '../utils';
-// import '../style/init.less';
-// import '../style/element.less';
+// import '../style';
 
 const components = [
   button,
@@ -44,7 +45,8 @@ const components = [
   empty,
   dialog,
   messageBox,
-  CtMessage
+  CtMessage,
+  CtPage
 ]
 
 const serviceConfig = {

package/packages/components/page/index.js

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

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

@@ -0,0 +1,78 @@
+<script>
+import { h, reactive, resolveComponent } from "vue";
+import { useNamespace } from "../../../hooks";
+import SearchBox from "../../search-box";
+import tableBox from "../../table";
+export default {
+  name: "PageComponent",
+  props: {},
+  setup(props, { emit, slots }) {
+    const getSelfSlots = (name) => {
+      console.log(slots);
+      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;
+    };
+    const tableProps = reactive({
+      columnData: [
+        { label: "序号", value: "index" },
+        { label: "校验结果", value: "result" },
+        { label: "处理状态", value: "status" },
+        { label: "操作", value: "id" },
+      ],
+      tableData: [
+        { index: 1, result: 3, status: "暂未处理" },
+        { index: 2, result: 0, status: "无需处理" },
+        { index: 3, result: 3, status: "处理中" },
+        { index: 4, result: 0, status: "处理完成" },
+      ],
+    });
+
+    const tableDom = h(
+      tableBox,
+      {
+        "table-props": tableProps,
+      },
+      { ...getSelfSlots("table") }
+    );
+    const searchDom = h(
+      SearchBox,
+      {
+        "search-list": [],
+        "have-reset": true,
+      },
+      { ...slots }
+    );
+    const ns = useNamespace("page-component");
+    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
+            // })
+          ]),
+          h("div", { class: ns.e("content") }, [tableDom]),
+        ]),
+      ]);
+  },
+};
+</script>