@elementplus-kit/uikit 1.6.0 → 1.7.0

package/components/table2/src/types.ts

@@ -0,0 +1,39 @@
+export interface FormItemListItem {
+  type: string
+  label?: string
+  prop: string
+  required?: Boolean
+  vIf?: boolean | ((item: FormItemListItem) => boolean)
+  dictType?: string
+  options?: Array<Object>
+  col?: Number
+  formItem?: Object
+  attrs?: Object
+}
+
+export interface FormItemList {
+  module: Object
+  formOpsions: FormItemListItem[]
+  readonly: boolean
+}
+
+export type formType =
+  | 'input'
+  | 'textarea'
+  | 'input-number'
+  | 'select'
+  | 'select-v2'
+  | 'cascader'
+  | 'tree-select'
+  | 'radio'
+  | 'checkbox'
+  | 'time-select'
+  | 'date-picker'
+  | 'time-picker'
+  | 'rate'
+  | 'color-picker'
+  | 'slider'
+  | 'switch'
+  | 'text'
+  | 'html'
+  | 'slot'

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/components//346/250/241/346/235/277/ttt.ts

@@ -0,0 +1,66 @@
+import {
+  ref,
+  h,
+  computed,
+  toRefs,
+  getCurrentInstance,
+  provide,
+  defineComponent,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue'
+import { ElConfigProvider, ElForm, ElRow, ElCol } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { get, has, isArray, isBoolean, isFunction, isNumber } from 'lodash-es'
+
+
+const propsAttrs = {
+  // 表单数据
+  model: { type: Object, default: () => ({}) },
+  // 表单项
+  formOptions: { type: Array, default: () => [] },
+}
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>
+
+export default defineComponent({
+  props: propsAttrs,
+  emits: [...getEmits()],
+  setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
+
+    // 暴露方法
+    expose({
+      optionsRef,
+    })
+
+    // 解构props
+    const { model, formOptions, readonly, gutter, col } = toRefs(props)
+
+    // 渲染表单
+    const renderForm = () => {
+      return h(
+        ElConfigProvider,
+        {
+          locale: zhCn,
+        },
+        {
+          default: () =>
+            h(
+              ElForm,
+              {
+                ref: cFormFnRef,
+                ...$attrs,
+                class: allReadonly.value ? 'isReadonly c-form' : 'c-form', // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
+              },
+              {
+                default: () => renderRow(),
+              },
+            ),
+        },
+      )
+    }
+
+    // 返回渲染函数
+    return () => renderForm()
+  },
+})

package/components//346/250/241/346/235/277/ttt.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="xxx">
+    
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, useAttrs, useSlots, defineModel } from 'vue'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+const props = defineProps({
+  formOptions: {
+    type: Array,
+    default: () => []
+  },
+})
+const emit = defineEmits(['search', 'reset', 'close'])
+
+</script>
+<style scoped lang="scss"></style>

package/index.ts

@@ -0,0 +1,2 @@
+//  import c from './components/index.ts'
+// export default c

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "",
   "main": "./components/index.ts",
-  "files": [
-    "dist/"
-  ],
   "peerDependencies": {
     "@element-plus/icons-vue": "*",
     "element-plus": "*",

package/vite.config.ts

@@ -0,0 +1,30 @@
+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: {
+    // 指定打包输出目录名称，替换成你想要的名字
+    outDir: "dist",
+    lib: {
+      entry: "components/index.ts",
+      name: "ElementPlusKit",
+      fileName: "index",
+      // fileName: (format) => `my-utils.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue", "element-plus", "lodash-es", "@element-plus/icons-vue"],
+    },
+    emptyOutDir: true,
+  },
+});

package//345/205/266/344/273/226/core/dialog/elementPlus/dialogWarp.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { FullScreen, Close } from '@element-plus/icons-vue'
+
+const emits = defineEmits(['afterClose', 'beforeOpen', 'afterOpen', 'beforeClose', 'innerOutput'])
+
+// 子组件属性
+const innerComponentOptions = ref({})
+
+// 子组件
+const innerComponent = shallowRef()
+
+// 弹窗显示隐藏关键属性
+const dialogShow = ref(false)
+
+// 弹窗组件基本属性
+const dialogOptions = ref({
+  title: '',
+  appendToBody: true,
+  destroyOnClose: true,
+  fullscreen: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  showClose: false
+})
+
+/**
+ * 源方法打开弹窗
+ */
+const handleOpenDialog = () => {
+  dialogShow.value = true
+}
+
+/**
+ * 源方法关闭弹窗
+ */
+const handleCloseDialog = () => {
+  dialogShow.value = false
+}
+
+/**
+ * 监听方法，监听来自子组件的事件
+ * @param e
+ */
+const handleCatchInnerOutput = (e: any) => {
+  emits('innerOutput', e)
+}
+
+/**
+ * 来自子组件的关闭请求处理
+ * @param e
+ */
+const handleInnerCommandClose = (e: any = false) => {
+  emits('beforeClose', [e, innerComponentOptions, dialogOptions])
+  handleCloseDialog()
+  emits('afterClose', e)
+}
+
+/**
+ * 来自弹窗组件自身的关闭回调处理
+ * @param e
+ */
+const handleWarpCommandClose = (e: any = false) => {
+  emits('beforeClose', [e, innerComponentOptions, dialogOptions])
+  handleCloseDialog()
+  emits('afterClose', e)
+}
+
+/**
+ * 全屏切换功能
+ */
+const handleToggleFullscreen = () => {
+  dialogOptions.value.fullscreen = !dialogOptions.value.fullscreen
+}
+
+/**
+ * 打开弹窗
+ * @param v
+ * @param data
+ * @param dialogOption
+ */
+const open = async (v: any, data: any, dialogOption: any) => {
+  innerComponent.value = v
+  innerComponentOptions.value = data
+  if (dialogOption) {
+    dialogOptions.value = Object.assign(dialogOptions.value, dialogOption)
+  }
+  emits('beforeOpen', [innerComponentOptions.value, dialogOptions.value])
+  handleOpenDialog()
+  await nextTick()
+  emits('afterOpen', [innerComponentOptions.value, dialogOptions.value])
+}
+
+/**
+ * 关闭弹窗
+ * @param e
+ */
+const close = (e: any = false) => {
+  emits('beforeClose', e)
+  handleCloseDialog()
+  emits('afterClose', e)
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<template>
+  <el-dialog v-bind="dialogOptions" v-model="dialogShow" @close="handleWarpCommandClose">
+    <template #header>
+      <div class="dialog-header">
+        <div class="title">{{ dialogOptions.title }}</div>
+        <div class="operator-bar">
+          <el-tooltip content="切换全屏" effect="dark">
+            <el-icon class="operator-bar-item" @click="handleToggleFullscreen">
+              <FullScreen />
+            </el-icon>
+          </el-tooltip>
+          <el-tooltip content="关闭弹窗" effect="dark">
+            <el-icon class="operator-bar-item" @click="handleWarpCommandClose(false)">
+              <Close />
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </div>
+    </template>
+    <component
+      :is="innerComponent"
+      v-bind="innerComponentOptions"
+      @inner-output="handleCatchInnerOutput"
+      @close="handleInnerCommandClose"
+    />
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.dialog-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .operator-bar {
+    .operator-bar-item {
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

package//345/205/266/344/273/226/core/dialog/index.ts

@@ -0,0 +1,10 @@
+import dialogWarp from './elementPlus/dialogWarp.vue'
+
+export const DynamicDialog = (uiFrame = 'elementPlus') => {
+  switch (uiFrame) {
+    case 'elementPlus':
+      return dialogWarp
+    default:
+      return dialogWarp
+  }
+}

package//345/205/266/344/273/226/core/form/elementPlus/elementWarp.ts

@@ -0,0 +1,15 @@
+import {formRender} from './formRender.ts';
+import {cloneDeep} from 'lodash-es';
+
+export default {
+  props: ['schema', 'modelValue'],
+  emits: ['update:modelValue'],
+  setup(props: any, {emit, slots}) {
+
+    const privateModelValue = cloneDeep(props.modelValue);
+
+    return () => {
+      return formRender(props.schema, privateModelValue, emit, slots);
+    }
+  }
+}

package//345/205/266/344/273/226/core/form/elementPlus/elementWarp.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+// form-warp
+import { FieldSchema } from '../../pageSchema/fieldSchema.ts'
+import { formRender } from '@/core/form/elementPlus/formRender.ts'
+
+const props = defineProps<{
+  schema: FieldSchema[]
+  modelValue?: any
+}>()
+</script>
+
+<template>
+  <component :is="formRender(props.schema, modelValue)" />
+</template>
+
+<style lang="scss" scoped></style>

package//345/205/266/344/273/226/core/form/elementPlus/formRender.ts

@@ -0,0 +1,55 @@
+import {FieldSchema, FIELD_TYPE} from "@/core/pageSchema/fieldSchema.ts";
+
+import {h} from 'vue';
+
+import {ElInput, ElInputNumber, ElFormItem, ElForm} from 'element-plus';
+
+/**
+ * input渲染器
+ * @param sc
+ * @param modelValue
+ * @param emit
+ */
+export const formInputRender = (sc: FieldSchema, modelValue: any, emit: any) => {
+  let props = {
+    modelValue,
+    'onUpdate:modelValues': (value: any) => {
+      emit('update:modelValues', value);
+    },
+  }
+
+  switch (sc.fieldType) {
+    case FIELD_TYPE.STRING:
+      return h(ElInput, props, []);
+    case FIELD_TYPE.NUMBER:
+      return h(ElInputNumber, props, []);
+  }
+}
+
+/**
+ * formItem渲染器
+ * @param sc
+ * @param modelValue
+ * @param emit
+ */
+export const formItemRender = (sc: FieldSchema, modelValue: any, emit: any) => {
+  let innerInput = formInputRender(sc, modelValue, emit);
+  let props = {...sc}
+  return h(ElFormItem, props, [innerInput]);
+}
+
+/**
+ * form渲染器
+ * @param schema 表单描述
+ * @param modelValues v-model值绑定
+ * @param emit 事件触发器
+ * @param slots 插槽
+ */
+export const formRender = (schema: FieldSchema[], modelValues: any, emit: any, slots: any) => {
+  let formItems = schema.map(sc => {
+    return formItemRender(sc, modelValues[sc.prop], emit);
+  })
+  let props = {}
+  let children = [...formItems, slots.default({model: modelValues})]
+  return h(ElForm, props, children);
+}

package//345/205/266/344/273/226/core/form/index.ts

@@ -0,0 +1,10 @@
+import elementPlus from './elementPlus/elementWarp.ts';
+
+export const schemaForm = (uiFrame = 'elementPlus') => {
+  switch (uiFrame) {
+    case 'elementPlus':
+      return elementPlus;
+    default:
+      return elementPlus;
+  }
+};

package//345/205/266/344/273/226/core/table/config.ts

@@ -0,0 +1,5 @@
+export const TABLE_CONFIG = {
+  OPERATION_COL_LABEL: '操作',
+  OPERATION_SLOT_NAME: 'custom',
+  CHILDREN_SLOT_KEY: 'children'
+}

package//345/205/266/344/273/226/core/table/render.ts

@@ -0,0 +1,91 @@
+import { ElTable, ElTableColumn } from 'element-plus'
+import _ from 'lodash-es'
+import { TABLE_CONFIG } from './config.ts'
+
+function render(schema: any, data: any, emit: any, slots: any) {
+  const renderSlots = {
+    default: () => {
+      return buildSlots(schema, slots)
+    }
+  }
+  return h(ElTable, { data, emit }, renderSlots)
+}
+
+function buildSlots(schema: any, slots: any) {
+  const children: any[] = []
+  // 渲染表格列子组件
+  let columnsKeys = Object.keys(schema)
+  if (_.isObject(schema)) {
+    columnsKeys.forEach((columnKey) => {
+      let colSchema = schema[columnKey]
+      let colSlots = slots[columnKey]
+      children.push(buildColumns(columnKey, colSchema, colSlots, slots))
+    })
+  }
+
+  // 额外插槽处理
+  // 增加插槽式操作栏
+  if (slots[TABLE_CONFIG.OPERATION_SLOT_NAME]) {
+    let scopeProp = { label: TABLE_CONFIG.OPERATION_COL_LABEL }
+    let scopeSlots = {
+      default: (scope: any) => {
+        return [slots[TABLE_CONFIG.OPERATION_SLOT_NAME](scope)]
+      }
+    }
+    children.push(h(ElTableColumn, scopeProp, scopeSlots))
+  }
+  return children
+}
+
+function buildColumns(columnKey: any, option: any, slots: any, globalSlots: any) {
+  // 组装props
+  let props = buildColumnProps(columnKey, option)
+  let renderSlotsArr = []
+
+  // 多级表头组合
+  if (option[TABLE_CONFIG.CHILDREN_SLOT_KEY] && _.isObject(option[TABLE_CONFIG.CHILDREN_SLOT_KEY])) {
+    let scopeOption = option[TABLE_CONFIG.CHILDREN_SLOT_KEY]
+    let columnsKeys = Object.keys(scopeOption)
+    if (_.isObject(scopeOption)) {
+      columnsKeys.forEach((columnKey) => {
+        let colSchema = scopeOption[columnKey]
+        let colSlots = globalSlots[columnKey]
+        renderSlotsArr.push(buildColumns(columnKey, colSchema, colSlots, globalSlots))
+      })
+    }
+  }
+
+  let renderSlots = () => []
+
+  if (slots) {
+    renderSlots = {
+      default: (scope) => {
+        return [...renderSlotsArr, slots(scope)]
+      }
+    }
+  } else {
+    renderSlots = {
+      default: () => {
+        return [...renderSlotsArr]
+      }
+    }
+  }
+
+  return h(ElTableColumn, props, renderSlots)
+}
+
+function buildColumnProps(key: string, option: any) {
+  if (_.isString(option)) {
+    return {
+      prop: key,
+      label: option
+    }
+  } else if (_.isObject(option)) {
+    return {
+      prop: key,
+      ...option
+    }
+  }
+}
+
+export default render

package//345/205/266/344/273/226/core/table/warp.ts

@@ -0,0 +1,11 @@
+import render from './render.ts'
+
+export default {
+  props: ['schema', 'data'],
+  emits: [],
+  setup(props: any, { emit, slots }) {
+    return () => {
+      return render(props.schema, props.data, emit, slots)
+    }
+  }
+}

package//345/205/266/344/273/226/core/utils/fetch.ts

@@ -0,0 +1,58 @@
+import request from '@/config/axios'
+
+const defaultFetchRule = {
+  page: {
+    method: 'get',
+    template: `/:path/:model/page`
+  },
+  detail: {
+    method: 'get',
+    template: `/:path/:model/get`
+  },
+  create: {
+    method: 'post',
+    template: `/:path/:model/create`
+  },
+  delete: {
+    method: 'delete',
+    template: `/:path/:model/delete`
+  },
+  update: {
+    method: 'put',
+    template: `/:path/:model/update`,
+  }
+}
+
+export function schemaFetch(values: any, rule = defaultFetchRule) {
+  let apis = {}
+  rule = { ...defaultFetchRule, ...rule }
+  Object.keys(rule).forEach((key) => {
+    let url = ''
+    if (rule[key].url) {
+      url = rule[key].url
+    } else {
+      url = replaceParams(rule[key].template, values)
+    }
+    apis[key] = async (params: any, ...args: any) => {
+      let method = rule[key].method
+      switch (method) {
+        case 'get':
+          return await request[method]({ url, params }, ...args)
+        case 'post':
+          return await request[method]({ url, data: params }, ...args)
+        case 'put':
+          return await request[method]({ url, data: params }, ...args)
+        case 'delete':
+          return await request[method]({ url, params }, ...args)
+      }
+    }
+  })
+  return apis
+}
+
+function replaceParams(template, values) {
+  const regexp = /:(\w+)/g
+  return template.replace(regexp, (_, key) => {
+    return values[key] || `${key}`
+  })
+}