@elementplus-kit/uikit 1.0.2 → 1.0.4

package/components/button/index.ts

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

package/components/button/src/constants.ts

@@ -0,0 +1,50 @@
+export const typeActiveMap = {
+  reset: {
+    name: "重置",
+    type: "info",
+  },
+  search: {
+    name: "查询",
+    type: "primary",
+  },
+  submit: {
+    name: "提交",
+    type: "primary",
+  },
+  save: {
+    name: "保存",
+    type: "primary",
+  },
+  create: {
+    name: "新增",
+    type: "primary",
+  },
+  delete: {
+    name: "删除",
+    type: "danger",
+  },
+  edit: {
+    name: "编辑",
+    type: "primary",
+  },
+  view: {
+    name: "查看",
+    type: "primary",
+  },
+  publish: {
+    name: "发布",
+    type: "primary",
+  },
+  import: {
+    name: "导入",
+    type: "primary",
+  },
+  export: {
+    name: "导出",
+    type: "primary",
+  },
+  exportAll: {
+    name: "导出全部",
+    type: "primary",
+  },
+};

package/components/button/src/index.ts

@@ -0,0 +1,140 @@
+import { defineComponent, h } from "vue";
+import { ElButton } from "element-plus";
+
+// import '../style/index.scss';
+import { typeActiveMap } from "./constants.ts";
+import { has, isBoolean, isFunction, isArray } from "lodash-es";
+export default defineComponent({
+  props: {
+    params: {
+      // 用于验证自定义函数的外部数据
+      type: Object,
+      default: () => ({}),
+    },
+    btnOptions: {
+      type: Array,
+      default: () => [],
+    },
+    // 权限函数
+    hasPermission: {
+      type: Function,
+    },
+    size: {
+      type: String as PropType<"large" | "default" | "small">,
+      default: undefined,
+    },
+    plain: {
+      type: Boolean,
+      default: undefined,
+    },
+    text: {
+      type: Boolean,
+      default: undefined,
+    },
+    link: {
+      type: Boolean,
+      default: undefined,
+    },
+    // // 权限函数
+    // hasRole: {
+    //   type: Function,
+    //   default: () => true
+    // },
+  },
+  emits: ["btnAction"],
+  setup(props, { emit, slots, attrs, expose }) {
+    // console.log('slots', slots);
+    // console.log('attrs', attrs);
+
+    // 解析属性
+    const getAttrs = (item) => {
+      let defaultAttrs = {
+        size: props.size,
+        plain: props.plain,
+        text: props.text,
+        link: props.link,
+        class: `c-alias-${item.alias || ""}`,
+      };
+
+      if (item?.alias && typeActiveMap[item.alias]) {
+        defaultAttrs = {
+          ...typeActiveMap[item.alias],
+          ...defaultAttrs,
+        };
+      }
+
+      // 过滤掉非elbutton属性
+      const filterAttrsList = [
+        "label",
+        "alias",
+        "permission",
+        "vIf",
+        "disable",
+      ];
+      Object.keys(item).map((key) => {
+        if (!filterAttrsList.includes(key)) {
+          defaultAttrs[key] = item[key];
+        }
+      });
+
+      // 处理禁用
+      if (isBoolean(item.disable)) {
+        defaultAttrs.disabled = item.disable;
+      }
+      if (isFunction(item.disable) && item.disable(props.params)) {
+        defaultAttrs.disabled = item.disable(props.params);
+      }
+      return defaultAttrs;
+    };
+
+    const render = () => {
+      let list = [];
+      // 过滤权限
+      props.btnOptions.map((item) => {
+        if (
+          isArray(item.permission) &&
+          item.permission.length > 0 &&
+          isFunction(props.hasPermission)
+        ) {
+          if (props.hasPermission(item.permission)) {
+            list.push(item);
+          }
+        } else {
+          list.push(item);
+        }
+      });
+
+      const listR = [];
+      // 过滤 vIf
+      list.map((item) => {
+        if (
+          has(item, "vIf") &&
+          isFunction(item.vIf) &&
+          item.vIf(props.params) !== undefined
+        ) {
+          if (item.vIf(props.params)) {
+            listR.push(item);
+          }
+        } else {
+          listR.push(item);
+        }
+      });
+
+      return listR.map((item) => {
+        return h(
+          ElButton,
+          {
+            ...getAttrs(item),
+            onClick: () => {
+              emit("btnAction", item.alias, props.params);
+            },
+          },
+          {
+            default: () => item?.label,
+          }
+        );
+      });
+    };
+    return () => render();
+  },
+});

package/components/dictLabel/index.ts

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

package/components/dictLabel/src/index.vue

@@ -0,0 +1,21 @@
+<template>
+    {{ label }}
+</template>
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+const props = defineProps({
+    options: {
+        type: Array,
+        default: () => []
+    },
+    value: {
+        type: String as PropType<any>,
+        default: ''
+    },
+})
+const label = computed(() => {
+    // 处理value为数字的情况 后端字典都是字符串
+    const item = props.options?.find((item) => item.value == props.value.toString());
+    return item?.label || props.value;
+});
+</script>

package/components/form/src/FormItem.ts

@@ -23,7 +23,7 @@ import {
   ElText,
 } from "element-plus";
 
-import { isFunction, has } from "lodash-es";
+import { isFunction, isBoolean } from "lodash-es";
 import { formTypeCfg } from "./constants";
 import { formatEventName } from "./utils";
 
@@ -106,9 +106,12 @@ export default defineComponent({
     // 获取禁用状态
     const getDisabled = () => {
       let disabled = false;
-      if (has(attrs.value, "disabled") && isFunction(attrs.value.disabled)) {
+      if (isFunction(attrs.value?.disabled)) {
         disabled = attrs.value.disabled(model.value);
       }
+      if (isBoolean(attrs.value?.disabled)) { // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
+        disabled = attrs.value.disabled;
+      }
       // 全部只读
       if (allReadonly.value) {
         disabled = true;
@@ -137,14 +140,6 @@ export default defineComponent({
       return typeAttrs;
     };
 
-    // 获取事件和属性
-    const getEventsAndAttrs = () => {
-      return {
-        ...handleEvents(),
-        ...handleAttrs(),
-      };
-    };
-
     // 设置元素 Ref
     const setElRef = (vEl: any, value: string) => {
       props.optionsRef[`${value}Ref`] = vEl;
@@ -353,31 +348,6 @@ export default defineComponent({
     };
 
     const renderType = () => {
-      // // 有下拉
-      // if (['cascader', 'select-v2', 'tree-select'].includes(type)) {
-      //   defailtAttrs.options = options.value
-      // }
-      // if (['tree-select'].includes(type)) {
-      //   defailtAttrs.data = options.value
-      // }
-
-      // // 只读转禁用
-      // if ([''].includes(type)) {
-      // }
-      // if (['condition'].includes(type)) {
-      //   return getType(type.value)
-      // } else {
-      //   return h(getType(type.value), {
-      //     modelValue: model.value[prop.value],
-      //     'onUpdate:modelValue': (val) => (model.value[prop.value] = val),
-      //     ...attrs.value,
-      //   })
-      // }
-      // return h(ElInput, {
-      //   vModel: model.value[prop.value],
-      //   ...attrs,
-      // })
-
       // 自动启动插槽
       if (formSlots[prop.value]) {
         return getFormType["slot"]();
@@ -397,16 +367,9 @@ export default defineComponent({
       // 非插槽类型
       return getFormType[type.value]();
     };
-    // 处理事件
-    const getAttribute = () => {
-      return {};
-    };
-    // 处理属性
-    const getEvents = () => {
-      return {};
-    };
 
     const render = () => {
+      const renderTypeVdom = renderType();
       return h(
         ElFormItem,
         {
@@ -424,7 +387,7 @@ export default defineComponent({
           ...formItem.value,
         },
         {
-          default: () => renderType(),
+          default: () => renderTypeVdom,
         }
       );
     };

package/components/form/src/index.ts

@@ -14,7 +14,7 @@ import zhCn from "element-plus/es/locale/lang/zh-cn";
 import CFormItem from "./FormItem.ts";
 import { has, isArray, isBoolean, isFunction, isNumber } from "lodash-es";
 import { getEmits } from "./constants"; // 获取所有的事件
-
+import '../style/index.scss'
 const propsAttrs = {
   // 表单数据
   model: { type: Object, default: () => ({}) },
@@ -30,6 +30,8 @@ const propsAttrs = {
   },
   // row 列数
   col: { type: Number, default: undefined },
+  // 额外业务全局参数
+  params: { type: Object, default: () => ({}) },
 };
 
 export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
@@ -58,7 +60,7 @@ export default defineComponent({
     });
 
     // 解构props
-    const { model, formOptions, readonly, gutter, col } = toRefs(props);
+    const { model, formOptions, readonly, gutter, col} = toRefs(props);
 
     // 暴露elForm组件上的方法
     const vm = getCurrentInstance(); // 获取虚拟DOM实例
@@ -81,6 +83,7 @@ export default defineComponent({
 
     // 渲染 row
     const renderRow = () => {
+      const formItemVdom = renderFormItem();
       if (isLayout.value) {
         return h(
           ElRow,
@@ -91,16 +94,28 @@ export default defineComponent({
             ...$attrs,
           },
           {
-            default: () => renderFormItem(),
+            default: () => formItemVdom,
           }
         );
       } else {
-        return renderFormItem();
+        return formItemVdom;
       }
     };
 
     // 渲染表单项
     const renderFormItem = () => {
+      // 过滤权限
+      const list = []
+      formOptions.value.map((item) => {
+        // 处理 vIf 显示隐藏
+        if(has(item, 'vIf')) {
+          if (isFunction(item.vIf) && item.vIf(props.model, props.params)) {
+            list.push(item)
+          }
+        } else {
+          list.push(item)
+        }
+      })
       return formOptions.value.map((item) => {
         // const { label, prop, type, required, col, formItem, attrs } = item
         // const { label, prop, type, required, col, formItem, attrs, ...args } = item
@@ -136,7 +151,7 @@ export default defineComponent({
             {
               class: "c-col",
               span: has(item, "col")
-                ? col
+                ? item.col
                 : col?.value
                 ? col?.value
                 : isLayout.value
@@ -155,6 +170,7 @@ export default defineComponent({
 
     // 渲染表单
     const renderForm = () => {
+      console.log('$attrs', $attrs);
       return h(
         ElConfigProvider,
         {
@@ -167,6 +183,7 @@ export default defineComponent({
               {
                 ref: cFormFnRef,
                 ...$attrs,
+                model: model.value,
                 class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
               },
               {

package/components/form/style/index.scss

@@ -0,0 +1,5 @@
+.c-form.el-form--inline {
+  .el-select {
+    --el-select-width: 220px;
+  }
+}

package/components/index.ts

@@ -29,12 +29,16 @@ export * from "./drawer/index.ts";
 export const CDrawer = Drawer;
 
 // 搜索
-// import Search from "./search/index.ts";
-// export * from "./search/index.ts";
-// export const CSearch = Search;
 import Search from "./search/index.ts";
 export * from "./search/index.ts";
 export const CSearch = Search;
+
+// 按钮
+import Button from "./button/index.ts";
+export * from "./button/index.ts";
+export const CButton = Button;
+
+
 // 测试单个引入-----------------------------
 // export * from "./dialog/index.ts"; // 弹窗
 // export * from "./drawer/index.ts"; // 抽屉

package/components/table/src/TableColumn.ts

@@ -47,7 +47,7 @@ const propsAttrs = {
     type: String,
     default: undefined,
   },
-  // 字典
+  // 字典 暂不实现
   dictType: { type: String, default: undefined },
   // 字典选项
   options: { type: Array, default: () => [] },

package/components/table/src/index.ts

@@ -5,6 +5,7 @@ import {
   type ExtractPropTypes,
 } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
+import TableDictLabel from "./tableDictLabel.vue";
 import {
   defaultAttrs,
   tableSlots,
@@ -12,10 +13,14 @@ import {
   selectionColumn,
   indexColumn,
 } from "./constants.ts";
-import { isArray, isObject } from "lodash-es";
+import { isArray, isObject, isFunction } from "lodash-es";
 const propsAttrs = {
   module: {
-    // 公共参数用于业务判断
+    type: Object,
+    default: () => {},
+  },
+  params: {
+    // 额外业务全局参数
     type: Object,
     default: () => {},
   },
@@ -61,45 +66,43 @@ export default defineComponent({
     };
 
     // 暴露方法
-    expose({
-      // tableRef,
-    });
+    // expose({
+    //   // tableRef,
+    // });
 
-    // 属性处理
-    const getAttrs = () => {
-      const obj = {
-        ...defaultAttrs, // 设置默认值
-      };
-      return obj;
-    };
-    // 事件处理
-    const getEvents = () => {
-      const obj = {
-        ...defaultAttrs, // 设置默认值
-      };
-      return obj;
-    };
+    // // 属性处理
+    // const getAttrs = () => {
+    //   const obj = {
+    //     ...defaultAttrs, // 设置默认值
+    //   };
+    //   return obj;
+    // };
+    // // 事件处理
+    // const getEvents = () => {
+    //   const obj = {
+    //     ...defaultAttrs, // 设置默认值
+    //   };
+    //   return obj;
+    // };
 
-    // 处理列数据-数组
-    const getArrayColumn = () => {
-      console.log("adsadsd");
-      // 递归处理数据
-      const list = [];
+    // // 处理列数据-数组
+    // const getArrayColumn = () => {
+    //   // 递归处理数据
+    //   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("🚀 ~ gggggggg:", list);
-      return 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 = () => {
@@ -109,7 +112,8 @@ export default defineComponent({
         list.push(
           h(ElTableColumn, {
             type: "selection",
-            width: 55,
+            width: 50,
+            align: "center",
           })
         );
       }
@@ -118,7 +122,8 @@ export default defineComponent({
           h(ElTableColumn, {
             label: "序号",
             type: "index",
-            width: 55,
+            width: 60,
+            align: "center",
           })
         );
       }
@@ -127,6 +132,14 @@ export default defineComponent({
       const rColumn = (columns, list) => {
         columns.map((item) => {
           const { children, ...p } = item;
+          // 处理 vIf
+          if (
+            isFunction(item.vIf) &&
+            item.vIf(props.params) !== undefined &&
+            item.vIf(props.params)
+          ) {
+            return;
+          }
 
           // 处理多级表头
           const listSub = [];
@@ -147,25 +160,50 @@ export default defineComponent({
           // 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" },
-                listSub.length
-                  ? { ...itemSlot, default: () => listSub }
-                  : { ...itemSlot }
+                getColumnContent()
               )
             );
           } else {
+            const getColumnContent = () => {
+              let content = undefined;
+              if (listSub.length) {
+                content = { default: () => listSub };
+              }
+              return content;
+            };
+            // 无插槽
             list.push(
               h(
                 ElTableColumn,
                 { ...p, class: "c-table-column" },
-                listSub.length ? { default: () => listSub } : undefined
+                getColumnContent()
               )
             );
           }
@@ -188,8 +226,10 @@ export default defineComponent({
     // 渲染表格组件
     const renderTable = () => {
       // getColumnList();
-      console.log("props", props);
-      console.log("attrs", attrs);
+      // console.log("props", props);
+      // console.log("attrs", attrs);
+      // 先拼接好子数据不然会重复执行多次
+      const columnList = renderTableColumn();
       return h(
         ElTable,
         {
@@ -198,7 +238,7 @@ export default defineComponent({
           class: "c-table",
         },
         {
-          default: () => renderTableColumn(),
+          default: () => columnList,
           ...getSlots(),
         }
       );

package/components/table/src/tableDictLabel.vue

@@ -0,0 +1,21 @@
+<template>
+    {{ label }}
+</template>
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+const props = defineProps({
+    options: {
+        type: Array,
+        default: () => []
+    },
+    value: {
+        type: String as PropType<any>,
+        default: ''
+    },
+})
+const label = computed(() => {
+    // 处理value为数字的情况 后端字典都是字符串
+    const item = props.options?.find((item) => item.value == props.value.toString());
+    return item?.label || props.value;
+});
+</script>

package/components//346/250/241/346/235/277/index.tsx

@@ -0,0 +1,57 @@
+import {
+  ref,
+  computed,
+  defineComponent,
+} from "vue";
+
+// import { CForm, CDrawer } from "@elementplus-kit/uikit";
+// import '../style/index.scss';
+
+export default defineComponent({
+  props: {
+    // modelValue: {
+    //   type: Object,
+    //   default: {}
+    // },
+    // formOptions: {
+    //   type: Array,
+    //   default: () => []
+    // },
+    // isDrawer: {
+    //   type: Boolean,
+    //   default: false
+    // },
+  },
+  // emits: ['update:modelValue', 'search', 'reset', 'close'],
+
+  setup(props, { emit, slots, attrs, expose }) {
+    // 自己的 slot
+    // const slotsList = ["active", "btn-left", "btn-right"];
+    // console.log('slots', slots);
+    // console.log('attrs', attrs);
+    // 解析 attrs 中的事件
+    // const getEvent = () => {
+    //   let formObj: any = {};
+    //   Object.keys(attrs)?.forEach((name) => {
+    //     if (name.indexOf("on") === 0) {
+    //       formObj[name] = attrs[name];
+    //     }
+    //   })
+    //   return formObj
+    // };
+
+    // 解析插槽
+    // const getSlot = () => {
+    //   let formObj = {};
+    //   Object.keys(slots).forEach((key) => {
+    //     if (!slotsList.includes(key)) {
+    //       formObj[key] = slots[key];
+    //     }
+    //   });
+    //   return formObj
+    // };
+    return () => (
+      <div className="xxxxxxx">xxxxxxx</div>
+    )
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    // dts({
+    //   rollupTypes: false,
+    //   tsconfigPath: './tsconfig.json',
+    // }),
+  ],
+  build: {
+    lib: {
+      entry: 'components/index.ts',
+      name: 'ElementPlusKit',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['vue', 'element-plus'],
+    },
+  },
+})