@elementplus-kit/uikit 1.0.1 → 1.0.3

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,91 @@
+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: () => ({}),
+    },
+    // modelValue: {
+    //   type: Object,
+    //   default: {}
+    // },
+    buttonOptions: {
+      type: Array,
+      default: () => [],
+    },
+    // 权限函数
+    hasPermission: {
+      type: Function,
+      default: () => true,
+    },
+    // // 权限函数
+    // hasRole: {
+    //   type: Function,
+    //   default: () => true
+    // },
+  },
+
+  setup(props, { emit, slots, attrs, expose }) {
+    // const slotsList = ["active", "btn-left", "btn-right"];
+    // console.log('slots', slots);
+    // console.log('attrs', attrs);
+
+    // 解析插槽
+    const getAttrs = (item) => {
+      let defaultAttrs = {};
+      // const { alias, hasPermission, vIf, ...p } = item;
+      if (item?.alias && typeActiveMap[item.alias]) {
+        defaultAttrs = typeActiveMap[item.alias];
+      }
+      // 过滤掉非elbutton属性
+      defaultAttrs = {
+        ...defaultAttrs,
+        ...item,
+      };
+      return defaultAttrs;
+    };
+    const render = () => {
+      console.log("render 执行");
+      // 过滤权限
+      let list = [];
+      props.buttonOptions.map((item) => {
+        if (has(item, "permission") && isArray(item.permission)) {
+          if (props.hasPermission && props.hasPermission(item.permission)) {
+            list.push(item);
+          }
+        } else {
+          list.push(item);
+        }
+      });
+
+      const listR = [];
+      list.map((item) => {
+        // if (has(item, "vIf")) {
+          if (has(item, "vIf") && isFunction(item.vIf) && item.vIf(props.params) !== undefined) {
+            console.log('aaaaaaaaaa', item.vIf(props.params));
+            if (item.vIf(props.params)) {
+              listR.push(item);
+            }
+          } else {
+            listR.push(item);
+          }
+        // } else {
+        //   listR.push(item);
+        // }
+      });
+      console.log("🚀 ~ render ~ listR:", listR);
+      return listR.map((item) => {
+        return h(ElButton, getAttrs(item), {
+          default: () => item?.name,
+        });
+      });
+    };
+    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/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>;
@@ -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

package/components/form/style/index.scss

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

package/components/{index.js → index.ts}

@@ -33,6 +33,12 @@ 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/search/index.ts

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

package/components/search/src/{index.vue → index-/346/272/220.vue}

@@ -11,10 +11,12 @@
       </div>
       <div class="c-search-simple-btn">
         <slot name="btn-left" />
-        <el-icon @click="handleShow" v-if="showCount < props.formOptions.length" class="c-search-icon"
+        <div class="c-search-simple-icon" @click="handleShow" v-if="showCount < props.formOptions.length"
           :class="{ 'icon-rotate': showSearchForm }">
-          <ArrowUpBold />
-        </el-icon>
+          <el-icon class="c-search-icon">
+            <ArrowUpBold />
+          </el-icon>
+        </div>
         <el-button type="primary" @click="handleSearch">搜索</el-button>
         <el-button type="primary" @click="handleReset">重置</el-button>
         <slot name="btn-right" />
@@ -23,7 +25,7 @@
     <!-- 下拉悬浮 -->
     <transition name="search-form-transition">
       <el-card class="c-search-form" v-if="showSearchForm && props.isDrawer">
-        <c-form v-bind="getEvent()" inline :model="formData"
+        <c-form v-bind="getEvent(), getSlot('form')"" inline :model="formData"
           :formOptions="props.formOptions.filter((item, index) => index >= showCount)" ref="formRef">
         </c-form>
         <div style="text-align: right;">
@@ -86,6 +88,7 @@ const getEvent = (name: string) => {
   })
   return obj
 }
+
 // 解析插槽 
 const getSlot = (type: 'form' | 'search') => {
   let searchObj: any = {}
@@ -101,18 +104,15 @@ const getSlot = (type: 'form' | 'search') => {
 }
 
 const handleSearch = () => {
-  console.log('搜索内容:')
   emit('search')
   showSearchForm.value = false
 }
 
 const handleReset = () => {
-  console.log('搜索重置:')
   emit('reset')
 }
 
 const handleClose = () => {
-  console.log('搜索关闭:')
   showSearchForm.value = false
   emit('close')
 }
@@ -173,81 +173,84 @@ const handleShow = () => {
   .c-search-simple-btn {
     display: flex;
     margin-left: auto;
+  }
 
-    .c-search-icon {
-      display: inline-block;
-      // 添加鼠标悬停效果
-      cursor: pointer;
-      height: 32px;
-      width: 32px;
-      line-height: 32px;
-      text-align: center;
-      margin-right: 10px;
-      background-color: #409eff;
-      padding-top: 2px;
-      transition: all 0.2s;
-      border-radius: 4px;
-      color: #fff;
-
-      &:hover {
-        background-color: rgb(121, 187, 255);
-      }
-
-      &:active {
-        background-color: rgb(51, 126, 204);
-      }
+  .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);
     }
 
-    .icon-rotate {
-      transform: rotate(180deg);
+    &:active {
       background-color: rgb(51, 126, 204);
     }
   }
 
+  .c-search-icon {
+    // 添加鼠标悬停效果
+    display: inline-block;
+    color: #fff;
+    transition: all 0.2s;
+
+  }
+
+  .icon-rotate {
+    background-color: rgb(51, 126, 204);
+
+    .c-search-icon {
+      transform: rotate(180deg);
+    }
+  }
+
   .c-search-form {
-    // padding: 16px;
-    // background-color: #333;
     width: 100%;
     position: absolute;
     top: 50px;
     left: 0;
     overflow: hidden;
-
-    /* 确保内容不会溢出 */
-    :deep(.el-card__body) {
-      // padding: 0;
-    }
+    z-index: 10;
+    background-color: #fff;
   }
+}
 
-  /* 下拉动画效果 */
-  .search-form-transition {
+/* 下拉动画效果 */
+.search-form-transition {
 
-    &-enter-active,
-    &-leave-active {
-      transition: all 0.3s ease;
-      /* 动画过渡时间和缓动函数 */
-      overflow: hidden;
-      max-height: 500px;
-      /* 确保足够大的最大高度以容纳内容 */
-    }
+  &-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;
-    }
+  &-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;
-    }
+  &-leave-to {
+    max-height: 0;
+    /* 出场结束时高度为0 */
+    opacity: 0;
+    /* 可以添加透明度效果增强视觉体验 */
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 </style>

package/components/search/src/index.tsx

@@ -0,0 +1,172 @@
+import {
+  ref,
+  computed,
+  defineComponent,
+} from "vue";
+
+import { CForm, CDrawer } from "@elementplus-kit/uikit";
+import { ArrowUpBold } from "@element-plus/icons-vue";
+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
+    };
+
+    // 搜索
+    const handleSearch = () => {
+      emit("search");
+      showSearchForm.value = false;
+    };
+    // 重置
+    const handleReset = () => {
+      emit("reset");
+    };
+    // 关闭
+    const handleClose = () => {
+      showSearchForm.value = false;
+      emit("close");
+    };
+
+    const showCountC = computed(() => {
+      return props.showCount;
+    });
+
+    const showCount = ref(3); // 显示个数
+    const showSearchForm = ref(false); // 显示搜索表单
+    const handleShow = () => {
+      showSearchForm.value = !showSearchForm.value;
+    };
+    return () => (
+      <div className="c-search">
+        <div className="c-search-simple">
+          <div className="c-search-simple-form">
+            <CForm
+              {...getEvent()}
+              inline
+              model={props.modelValue}
+              formOptions={props.formOptions?.filter(
+                (item, index) => index < showCount.value
+              )}
+              ref="formRef"
+            >
+              {getSlot()}
+            </CForm>
+          </div>
+          <div className="c-search-simple-btn">
+            {slots["btn-left"]?.()}
+            {showCount.value < props.formOptions?.length && (
+              <div
+                className={
+                  `c-search-simple-icon ${showSearchForm.value ? "icon-rotate" : ""}`
+                }
+                onClick={handleShow}
+              >
+                <el-icon className="el-icon c-search-icon">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
+            )}
+            <el-button type="primary" onClick={handleSearch}>
+              搜索
+            </el-button>
+            <el-button type="primary" onClick={handleReset}>
+              重置
+            </el-button>
+            {slots["btn-right"]?.()}
+          </div>
+        </div>
+
+        {/* 下拉悬浮 */}
+        {!props.isDrawer && showSearchForm.value && (
+          <transition name="search-form-transition">
+            <el-card className="c-search-form el-card is-always-shadow">
+              <CForm
+                {...getEvent()}
+                inline
+                model={props.modelValue}
+                formOptions={props.formOptions.filter(
+                  (item, index) => index >= showCount.value
+                )}
+                ref="formRef"
+              >
+                {getSlot()}
+              </CForm>
+              <div style="text-align: right;">
+                <el-button type="primary" onClick={handleSearch}>
+                  搜索
+                </el-button>
+                <el-button type="primary" onClick={handleClose}>
+                  关闭
+                </el-button>
+              </div>
+            </el-card>
+          </transition>
+        )}
+
+        {props.isDrawer && (
+          <CDrawer title="搜索" v-model={showSearchForm.value} size="660px">
+            <CForm
+              {...getEvent()}
+              col={12}
+              model={props.modelValue}
+              formOptions={props.formOptions.filter(
+                (item, index) => index >= showCount.value
+              )}
+              ref="formRef"
+            >
+              {getSlot()}
+            </CForm>
+            <div style="text-align: right;">
+              <el-button type="primary" onClick={handleSearch}>
+                搜索
+              </el-button>
+              <el-button type="primary" onClick={handleClose}>
+                关闭
+              </el-button>
+            </div>
+          </CDrawer>
+        )}
+      </div>
+    )
+  },
+})