@elementplus-kit/uikit 1.6.0 → 1.7.0

package/components/search/style/index.scss

@@ -0,0 +1,104 @@
+.search-btn {
+  margin-right: 20px;
+  margin-left: auto;
+}
+
+.c-search {
+  position: relative;
+  height: 50px;
+
+  .c-search-simple {
+    display: flex;
+    justify-content: space-between;
+  }
+  .c-search-simple-form {
+    flex: 1; // 占满剩余空间
+    overflow: auto; // 开启滚动条
+    // 滚动条宽度
+    scrollbar-width: none; // 隐藏滚动条
+  }
+  .c-simple-form-container {
+    display: inline-block;
+    > .c-form {
+      white-space: nowrap; // 防止表单内容换行
+    }
+  }
+  .c-search-simple-btn {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .c-search-simple-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 32px;
+    width: 32px;
+    margin-right: 10px;
+    border-radius: 4px;
+    background-color: #409eff;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: rgb(121, 187, 255);
+    }
+
+    &:active {
+      background-color: rgb(51, 126, 204);
+    }
+  }
+
+  .c-search-icon {
+    // 添加鼠标悬停效果
+    color: #fff;
+    transition: all 0.2s;
+  }
+
+  .icon-rotate {
+    background-color: rgb(51, 126, 204);
+    .c-search-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  .c-search-form {
+    width: 100%;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    overflow: hidden;
+    z-index: 10;
+    background-color: #fff;
+  }
+}
+
+/* 下拉动画效果 */
+.search-form-transition {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease;
+    /* 动画过渡时间和缓动函数 */
+    overflow: hidden;
+    max-height: 500px;
+    /* 确保足够大的最大高度以容纳内容 */
+  }
+
+  &-enter-from {
+    max-height: 0;
+    /* 入场开始时高度为0 */
+    opacity: 0;
+    /* 可以添加透明度效果增强视觉体验 */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &-leave-to {
+    max-height: 0;
+    /* 出场结束时高度为0 */
+    opacity: 0;
+    /* 可以添加透明度效果增强视觉体验 */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

package/components/table/index.ts

@@ -0,0 +1,4 @@
+import Table from "./src/index";
+export * from "./src/index";
+export { Table };
+export default Table;

package/components/table/src/TableColumn.ts

@@ -0,0 +1,116 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTableColumn } from "element-plus";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject } from "lodash-es";
+const propsAttrs = {
+  module: {
+    // 公共参数用于业务判断
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columnsItem: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+  prop: {
+    // 列数据prop
+    type: String,
+    default: undefined,
+  },
+  // 字典 暂不实现
+  dictType: { type: String, default: undefined },
+  // 字典选项
+  options: { type: Array, default: () => [] },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    const { tableSlots, events } = inject("tableContext");
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 事件处理
+    const getEvents = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 插槽处理
+    const getSlots = () => {
+      // 处理插槽
+      const obj = {};
+      // column 自带插槽
+      tablecolumnSlots.map((name) => {
+        const slotName = `${prop}.${name}`;
+        if (tableSlots[slotName]) {
+          obj[name] = tableSlots[slotName];
+        }
+      });
+      // column 列业务插槽
+      if (tableSlots[prop]) {
+        obj["default"] = tableSlots[prop];
+      }
+      return obj;
+    };
+
+    // 渲染表格列
+    const renderTableColumn = () => {
+      return h(
+        ElTableColumn,
+        {
+          ...attrs,
+          class: "c-table-column",
+        },
+        {
+          //   default: () => renderTableColumn(),
+          //   ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTableColumn();
+  },
+});

package/components/table/src/constants.ts

@@ -0,0 +1,42 @@
+export const defaultAttrs = {
+  // destroyOnClose: true,
+};
+export const tableEvents = [
+  "select",
+  "select-all",
+  "selection-change",
+  "cell-mouse-enter",
+  "cell-mouse-leave",
+  "cell-click",
+  "cell-dblclick",
+  "cell-contextmenu",
+  "row-click",
+  "row-contextmenu",
+  "row-dblclick",
+  "header-click",
+  "header-contextmenu",
+  "sort-change",
+  "filter-change",
+  "current-change",
+  "header-dragend",
+  "expand-change",
+  "scroll",
+];
+
+export const tableSlots = ["default", "append", "empty"];
+export const tablecolumnSlots = ["default", "header", "filter-icon", "expand"];
+
+export const selectionColumn = {
+  type: "selection",
+  width: 50,
+  align: "center",
+};
+export const indexColumn = {
+  type: "index",
+  width: 50,
+  align: "center",
+};
+export const actionColumn = {
+  prop: "action",
+  align: "center",
+};

package/components/table/src/index.ts

@@ -0,0 +1,250 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import TableDictLabel from "./tableDictLabel.vue";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject, isFunction } from "lodash-es";
+const propsAttrs = {
+  module: {
+    type: Object,
+    default: () => {},
+  },
+  params: {
+    // 额外业务全局参数
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columns: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    // 暴露elTable组件上的方法
+    const vm = getCurrentInstance(); // 获取虚拟DOM实例
+    const cTableFnRef = (el) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 暴露方法
+    // expose({
+    //   // tableRef,
+    // });
+
+    // // 属性处理
+    // const getAttrs = () => {
+    //   const obj = {
+    //     ...defaultAttrs, // 设置默认值
+    //   };
+    //   return obj;
+    // };
+    // // 事件处理
+    // const getEvents = () => {
+    //   const obj = {
+    //     ...defaultAttrs, // 设置默认值
+    //   };
+    //   return obj;
+    // };
+
+    // // 处理列数据-数组
+    // const getArrayColumn = () => {
+    //   // 递归处理数据
+    //   const list = [];
+
+    //   const columnsRecursion = (columns, list) => {
+    //     columns?.map((item) => {
+    //       const { children, ...p } = item;
+    //       // 递归处理子列
+    //       if (isArray(item.children)) {
+    //         item.children = c(item.children, list);
+    //       }
+    //       list.push(p);
+    //     });
+    //   };
+    //   columnsRecursion(props.columns, list);
+    //   return list;
+    // };
+
+    // 渲染表格列
+    const renderTableColumn = () => {
+      const list = [];
+      // 处理多选与序号列
+      if (props.showSelection) {
+        list.push(
+          h(ElTableColumn, {
+            type: "selection",
+            width: 50,
+            align: "center",
+          })
+        );
+      }
+      if (props.showIndex) {
+        list.push(
+          h(ElTableColumn, {
+            label: "序号",
+            type: "index",
+            width: 60,
+            align: "center",
+          })
+        );
+      }
+
+      // 列递归渲染
+      const rColumn = (columns, list) => {
+        columns.map((item) => {
+          const { children, ...p } = item;
+          // 处理 vIf true 显示 false 隐藏
+          if (
+            isFunction(item.vIf) &&
+            item.vIf(props.params) !== undefined &&
+            !item.vIf(props.params)
+          ) {
+            return;
+          }
+
+          // 处理多级表头
+          const listSub = [];
+          if (children?.length) {
+            rColumn(children, listSub);
+          }
+
+          // 处理插槽
+          const itemSlot = {};
+          // column 自带插槽
+          tablecolumnSlots.map((name) => {
+            const slotName = `${item.prop}.${name}`;
+            if (slots[slotName]) {
+              itemSlot[name] = slots[slotName];
+            }
+          });
+
+          // column 列插槽
+          if (slots[item.prop]) {
+            itemSlot["default"] = slots[item.prop];
+          } else if (isFunction(item.render)) {
+            // column render 渲染函数
+            itemSlot["default"] = item.render;
+          } else if (isArray(item.options)) {
+            // column 字典数组
+            itemSlot["default"] = (scope: any) =>
+              h(TableDictLabel, {
+                options: item.options,
+                value: scope.row[item.prop],
+              });
+          }
+
+          // 赋值 有插槽
+          if (Object.keys(itemSlot).length) {
+            const getColumnContent = () => {
+              let content = undefined;
+              if (listSub.length) {
+                content = { ...itemSlot, default: () => listSub };
+              } else {
+                content = { ...itemSlot };
+              }
+              return content;
+            };
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                getColumnContent()
+              )
+            );
+          } else {
+            const getColumnContent = () => {
+              let content = undefined;
+              if (listSub.length) {
+                content = { default: () => listSub };
+              }
+              return content;
+            };
+            // 无插槽
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                getColumnContent()
+              )
+            );
+          }
+        });
+      };
+      rColumn(props.columns, list);
+      return list;
+    };
+
+    // 插槽处理
+    const getSlots = () => {
+      const obj = {};
+      tableSlots.map((name) => {
+        if (slots[name]) {
+          obj[name] = slots[name];
+        }
+      });
+      return obj;
+    };
+    // 渲染表格组件
+    const renderTable = () => {
+      // getColumnList();
+      // console.log("props", props);
+      // console.log("attrs", attrs);
+      // 先拼接好子数据不然会重复执行多次
+      const columnList = renderTableColumn();
+      return h(
+        ElTable,
+        {
+          ref: cTableFnRef,
+          ...attrs,
+          class: "c-table",
+        },
+        {
+          default: () => columnList,
+          ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTable();
+  },
+});