@elementplus-kit/uikit 1.4.0 → 1.6.0

package/components/table/index.ts

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

package/components/table/src/TableColumn.ts

@@ -1,116 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,250 +0,0 @@
-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();
-  },
-});

package/components/table/src/index2.ts

@@ -1,219 +0,0 @@
-import {
-  defineComponent,
-  h,
-  getCurrentInstance,
-  computed,
-  type ExtractPropTypes,
-} from "vue";
-import { ElTable, 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,
-  // },
-  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 columnsList = computed(() => {
-      let list = [];
-      list = getArrayColumn();
-      // 处理多选与序号列
-      if (props.showSelection) {
-        list.push(
-          h(ElTableColumn, {
-            type: "selection",
-            width: 55,
-          })
-        );
-      }
-      if (props.showIndex) {
-        list.push(
-          h(ElTableColumn, {
-            label: "序号",
-            type: "index",
-            width: 55,
-          })
-        );
-      }
-      return list;
-    });
-
-    // 处理列数据-数组
-    const getArrayColumn = () => {
-      console.log("adsadsd");
-      // 递归处理数据
-      const list = [];
-
-      const c = (columns, list) => {
-        columns?.map((item) => {
-          const { children, ...p } = item;
-          // 递归处理子列
-          if (isArray(item.children)) {
-            item.children = c(item.children, list);
-          }
-          list.push(p);
-        });
-      };
-      c(props.columns, list);
-      console.log("🚀 ~ getArrayColumn ~ props.columns:", props.columns)
-      console.log("🚀 ~ gggggggg:", list);
-      return list;
-    };
-
-    // 渲染表格列
-    const renderTableColumn = () => {
-      const list = [];
-
-      // 列递归渲染
-      const rColumn = (columns, list) => {
-        console.log("🚀 ~ rColumn ~ columns:", columns);
-        columns?.map((item) => {
-          const { children, ...p } = item;
-
-          // 处理多级表头
-          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];
-          }
-
-          // 赋值
-          if (Object.keys(itemSlot).length) {
-            list.push(
-              h(
-                ElTableColumn,
-                { ...p, class: "c-table-column" },
-                listSub.length
-                  ? { ...itemSlot, default: () => listSub }
-                  : { ...itemSlot }
-              )
-            );
-          } else {
-            list.push(
-              h(
-                ElTableColumn,
-                { ...p, class: "c-table-column" },
-                listSub.length ? { default: () => listSub } : undefined
-              )
-            );
-          }
-        });
-      };
-      rColumn(columnsList.value, 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);
-      return h(
-        ElTable,
-        {
-          ref: cTableFnRef,
-          ...attrs,
-          class: "c-table",
-        },
-        {
-          default: () => renderTableColumn(),
-          ...getSlots(),
-        }
-      );
-    };
-
-    // 返回渲染函数
-    return () => renderTable();
-  },
-});