zyf-model-engine 0.0.1 → 0.1.0

package/src/components/CTree/index.vue

@@ -1,176 +0,0 @@
-<template>
-  <div class="tree">
-    <el-tree
-      ref="treeRef"
-      v-bind="{
-        data: treeData,
-        highlightCurren: true,
-        nodeKey: 'id',
-        defaultExpandAll: true,
-        indent: 7,
-        props: {
-          children: 'children',
-          label: 'name'
-        },
-        checkStrictly: true,
-        emptyText: '暂无数据',
-        ...$attrs
-      }"
-      @check="onCheckTree"
-      :current-node-key="currentNodeKey"
-    >
-      <template v-if="slotDefault" #default="{ node, data }">
-        <div class="custom-tree-node">
-          <slot :data="data" :node="node"></slot>
-        </div>
-      </template>
-      <template #empty>
-        <empty />
-      </template>
-    </el-tree>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ElTree } from "element-plus";
-import { PropType } from "vue";
-import { fetchType as myFetchType } from "@/api/interface/index";
-import { treeDataProps } from "./interface/index";
-const props = defineProps({
-  //列表请求方法
-  fetch: {
-    type: [Function, Array<treeDataProps>, String],
-    default: () => {
-      return [];
-    }
-  },
-  fetchType: {
-    type: String as PropType<myFetchType>,
-    default: () => "post"
-  },
-  // 列表请求参数
-  fetchParams: {
-    type: Object,
-    default: () => {
-      return {};
-    }
-  },
-  // 当前选择的节点
-  currentNodeKey: {
-    type: [String, Number],
-    default: () => ""
-  },
-  //是否监听请求方法
-  requestAuto: {
-    type: Boolean,
-    default: () => true
-  }
-});
-
-const emit = defineEmits(["loadAfter", "onChecked"]);
-//判断<slot/>是否有传值
-const slotDefault = !!useSlots().default;
-
-const treeData = ref<treeDataProps[]>([]);
-// 加载table数据
-const loadData = async () => {
-  if (props.fetch) {
-    try {
-      if (["[object AsyncFunction]", "[object String]"].includes(Object.prototype.toString.call(props.fetch))) {
-        let res = typeof "string"
-          ? await http[props.fetchType](props.fetch as string, props.fetchParams || {})
-          : await (props.fetch as any)(props.fetchParams);
-        if (Array.isArray(res)) {
-          treeData.value = res;
-        } else {
-          treeData.value = [];
-        }
-        nextTick(() => {
-          emit("loadAfter", res);
-        });
-      } else {
-        treeData.value = props.fetch as treeDataProps[];
-      }
-    } catch (e) {
-      console.log(e);
-    }
-  }
-};
-
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
-// 获取被勾选项的id数组
-const getCheckedKeys = () => {
-  return treeRef.value?.getCheckedKeys();
-};
-// 设置被勾选项的id数组
-const setCheckedKeys = (val: (string | number)[]) => {
-  treeRef.value?.setCheckedKeys(val);
-};
-// 获取被勾选前选中节点的数组
-const getCheckedNodes = () => {
-  return treeRef.value?.getCheckedNodes();
-};
-// 设置目前勾选的节点
-const setCheckedNodes = (val: any[]) => {
-  treeRef.value?.setCheckedNodes(val);
-};
-// 设置目前勾选的节点  key/data
-const setChecked = (key: string, checked: boolean, deep = true) => {
-  treeRef.value?.setChecked(key, checked, deep);
-};
-
-const onCheckTree = (data: any, checked: any, indeterminate: any) => {
-  let obj = { data, checked, indeterminate, allChecked: getCheckedKeys(), allCheckedNode: getCheckedNodes() };
-  emit("onChecked", obj);
-};
-
-const onTreeFilter = (val: string | number) => {
-  if (treeData.value?.length) {
-    // 将不符合输入名称多选框字列表隐藏掉
-    treeRef.value?.filter(val);
-  }
-};
-watch(
-  [() => props.fetch, () => props.fetchParams],
-  () => {
-    loadData();
-  },
-  {
-    deep: true
-  }
-);
-watch(
-  () => props.currentNodeKey,
-  newV => {
-    if (newV) {
-      if (treeRef.value) {
-        treeRef.value.setCurrentKey(newV);
-      }
-    } else {
-      if (treeRef.value) {
-        treeRef.value.setCurrentKey(undefined);
-      }
-    }
-  }
-);
-onMounted(() => {
-  props.requestAuto && loadData();
-});
-
-defineExpose({
-  element: treeRef,
-  treeData,
-  loadData,
-  getCheckedKeys,
-  setCheckedKeys,
-  getCheckedNodes,
-  setCheckedNodes,
-  setChecked,
-  onTreeFilter
-});
-</script>
-
-<style scoped lang="scss">
-@import "./index.scss";
-</style>

package/src/components/CTree/interface/index.ts

@@ -1,6 +0,0 @@
-export interface treeDataProps {
-  id: string;
-  name: string;
-  children?: treeDataProps[];
-  [key: string]: any;
-}

package/src/components/Dialog/index.scss

@@ -1,74 +0,0 @@
-.dialog-box {
-  :deep(.my-dialog) {
-    display: flex;
-    flex-direction: column;
-    .el-dialog__header {
-      padding: 20px;
-      padding-right: 36px;
-      margin: 0;
-      border-bottom: 1px solid #eeeeee;
-      .el-dialog__title {
-        font-size: 16px;
-        font-weight: bold;
-        line-height: 19px;
-        color: #333333;
-      }
-    }
-    .el-dialog__body {
-      position: relative;
-      box-sizing: border-box;
-      flex: 1;
-      padding: 0 !important;
-      .dialog-body {
-        padding: 20px 0 20px 20px;
-        .dialog-close-icon {
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          z-index: 1;
-          cursor: pointer;
-        }
-        .dialog-close-icon:hover {
-          color: $primary-color;
-        }
-        > div {
-          width: 100%;
-          max-height: 760px;
-          padding-right: 20px;
-          overflow-y: auto;
-        }
-        .btn-group {
-          display: flex;
-          justify-content: flex-end;
-          .el-button {
-            display: flex;
-            align-items: center;
-            padding-right: 14px;
-            padding-left: 14px;
-            .icon {
-              width: 16px;
-              height: 16px;
-              margin-right: 4px;
-            }
-          }
-        }
-      }
-    }
-    .el-dialog__footer {
-      padding: 0 30px 30px;
-    }
-  }
-  :deep(.hide-title) {
-    .el-dialog__header {
-      display: none !important;
-    }
-    .dialog-body {
-      > div {
-        width: 100%;
-        max-height: 800px;
-        padding-right: 30px;
-        overflow-y: auto;
-      }
-    }
-  }
-}

package/src/components/Dialog/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="dialog-box" v-if="visible">
-    <el-dialog
-      :model-value="visible"
-      :width="toWidthRatio()"
-      align-center
-      :title="title"
-      :before-close="onClose"
-      :destroy-on-close="true"
-      :show-close="showCloseIcon"
-      :class="hideTitle ? 'my-dialog hide-title' : 'my-dialog'"
-      :modal="modal"
-      :close-on-click-modal="closeOnClickModal"
-      :append-to-body="appendToBody"
-      close-on-press-escape
-    >
-      <template #header v-if="slotHeader">
-        <slot name="header"></slot>
-      </template>
-      <div class="dialog-body" :style="{ width: '100%' }">
-        <section v-if="hideTitle" class="dialog-close-icon" @click="onClose">
-          <Close style="width: 1em; height: 1em" />
-        </section>
-        <slot></slot>
-      </div>
-      <template #footer v-if="slotFooter">
-        <slot name="footer"></slot>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    required: true
-  },
-  title: {
-    type: String,
-    default: () => "默认标题"
-  },
-  width: {
-    type: [Number, String],
-    default: () => 600
-  },
-  showCloseIcon: {
-    type: Boolean,
-    default: () => true
-  },
-  // 控制是否隐藏 header 栏, 默认为 true
-  hideTitle: {
-    type: Boolean,
-    default: () => false
-  },
-  modal: {
-    type: Boolean,
-    default: () => true
-  },
-  appendToBody: {
-    type: Boolean,
-    default: () => false
-  },
-  closeOnClickModal: {
-    type: Boolean,
-    default: () => true
-  }
-});
-
-const emit = defineEmits(["onClose"]);
-//判断<slot/>是否有传值
-const slotHeader = !!useSlots().header;
-const slotFooter = !!useSlots().footer;
-const toWidthRatio = () => {
-  return typeof props.width === "number" ? (props.width / 1920) * 100 + "vw" : props.width;
-};
-const onClose = () => {
-  if (axiosFileController.size() > 0) {
-    axiosFileController.removeAllPending();
-  }
-  emit("onClose");
-};
-</script>
-
-<style scoped lang="scss">
-@import "./index.scss";
-</style>

package/src/components/Empty/index.scss

@@ -1,16 +0,0 @@
-.empty-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  p {
-    margin: 0;
-    margin-top: 9px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #999999;
-  }
-}

package/src/components/Empty/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <div ref="emptyRef" class="empty-box flx-center" :style="{ width, height }">
-    <img src="../../assets/images/empty-img.png" alt="" :style="refSize" />
-    <p class="title">{{ title }}</p>
-  </div>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-  width: {
-    type: String,
-    default: () => "100%"
-  },
-  height: {
-    type: String,
-    default: () => "100%"
-  },
-  imgStyle: {
-    type: Object,
-    default: () => {}
-  },
-  title: {
-    type: String,
-    default: () => "暂无数据"
-  }
-});
-const emptyRef = ref();
-const refSize = ref<Record<string, any>>({
-  height: "30%"
-});
-watchEffect(() => {
-  if (emptyRef.value) {
-    refSize.value =
-      emptyRef.value.offsetHeight > emptyRef.value.offsetWidth
-        ? { width: "30%" }
-        : {
-            height: "30%"
-          };
-  }
-});
-</script>
-<style scoped lang="scss">
-@import "./index.scss";
-</style>

package/src/components/Grid/components/GridItem.vue

@@ -1,68 +0,0 @@
-<template>
-  <div v-show="isShow" :style="style">
-    <slot></slot>
-  </div>
-</template>
-<script setup lang="ts" name="GridItem">
-import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
-import { BreakPoint, Responsive } from "../interface/index";
-
-type Props = {
-  offset?: number;
-  span?: number;
-  suffix?: boolean;
-  xs?: Responsive;
-  sm?: Responsive;
-  md?: Responsive;
-  lg?: Responsive;
-  xl?: Responsive;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  offset: 0,
-  span: 1,
-  suffix: false,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined
-});
-
-const attrs = useAttrs() as { index: string };
-const isShow = ref(true);
-
-// 注入断点
-const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
-const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
-watch(
-  () => [shouldHiddenIndex.value, breakPoint.value],
-  n => {
-    if (!!attrs.index) {
-      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
-    }
-  },
-  { immediate: true }
-);
-
-const gap = inject("gap", 0);
-const cols = inject("cols", ref(4));
-const style = computed(() => {
-  let span = props[breakPoint.value]?.span ?? props.span;
-  let offset = props[breakPoint.value]?.offset ?? props.offset;
-  if (props.suffix) {
-    return {
-      gridColumnStart: cols.value - span - offset + 1,
-      gridColumnEnd: `span ${span + offset}`,
-      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
-    };
-  } else {
-    return {
-      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
-        span + offset > cols.value ? cols.value : span + offset
-      }`,
-      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
-    };
-  }
-});
-</script>

package/src/components/Grid/index.vue

@@ -1,167 +0,0 @@
-<template>
-  <div :style="style">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts" name="Grid">
-import {
-  ref,
-  watch,
-  useSlots,
-  computed,
-  provide,
-  onBeforeMount,
-  onMounted,
-  onUnmounted,
-  onDeactivated,
-  onActivated,
-  VNodeArrayChildren,
-  VNode
-} from "vue";
-import type { BreakPoint } from "./interface/index";
-
-type Props = {
-  cols?: number | Record<BreakPoint, number>;
-  collapsed?: boolean;
-  collapsedRows?: number;
-  gap?: [number, number] | number;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
-  collapsed: false,
-  collapsedRows: 1,
-  gap: 0
-});
-
-onBeforeMount(() => props.collapsed && findIndex());
-onMounted(() => {
-  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
-  window.addEventListener("resize", resize);
-});
-onActivated(() => {
-  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
-  window.addEventListener("resize", resize);
-});
-onUnmounted(() => {
-  window.removeEventListener("resize", resize);
-});
-onDeactivated(() => {
-  window.removeEventListener("resize", resize);
-});
-
-// 监听屏幕变化
-const resize = (e: UIEvent) => {
-  let width = (e.target as Window).innerWidth;
-  switch (!!width) {
-    case width < 768:
-      breakPoint.value = "xs";
-      break;
-    case width >= 768 && width < 992:
-      breakPoint.value = "sm";
-      break;
-    case width >= 992 && width < 1200:
-      breakPoint.value = "md";
-      break;
-    case width >= 1200 && width < 1920:
-      breakPoint.value = "lg";
-      break;
-    case width >= 1920:
-      breakPoint.value = "xl";
-      break;
-  }
-};
-
-// 注入 gap 间距
-provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
-
-// 注入响应式断点
-let breakPoint = ref<BreakPoint>("xl");
-provide("breakPoint", breakPoint);
-
-// 注入要开始折叠的 index
-const hiddenIndex = ref(-1);
-provide("shouldHiddenIndex", hiddenIndex);
-
-// 注入 cols
-const gridCols = computed(() => {
-  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
-  return props.cols;
-});
-provide("cols", gridCols);
-
-// 寻找需要开始折叠的字段 index
-const slots = useSlots().default!();
-
-const findIndex = () => {
-  let fields: VNodeArrayChildren = [];
-  let suffix: VNode | null = null;
-  slots.forEach((slot: any) => {
-    // suffix
-    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
-    // slot children
-    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
-  });
-
-  // 计算 suffix 所占用的列
-  let suffixCols = 0;
-  if (suffix) {
-    suffixCols =
-      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
-      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
-  }
-  try {
-    let find = false;
-    fields.reduce((prev = 0, current, index) => {
-      prev +=
-        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
-        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
-      if (Number(prev) > props.collapsedRows * (gridCols.value as any) - suffixCols) {
-        hiddenIndex.value = index;
-        find = true;
-        throw "find it";
-      }
-      return prev;
-    }, 0);
-    if (!find) hiddenIndex.value = -1;
-  } catch (e) {
-    // console.warn(e);
-  }
-};
-
-// 断点变化时 执行 findIndex
-watch(
-  () => breakPoint.value,
-  () => {
-    if (props.collapsed) findIndex();
-  }
-);
-
-// 监听 collapsed
-watch(
-  () => props.collapsed,
-  value => {
-    if (value) return findIndex();
-    hiddenIndex.value = -1;
-  }
-);
-
-// 设置间距
-const gridGap = computed(() => {
-  if (typeof props.gap === "number") return `${props.gap}px`;
-  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
-  return "unset";
-});
-
-// 设置 style
-const style = computed(() => {
-  return {
-    display: "grid",
-    gridGap: gridGap.value,
-    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
-  };
-});
-
-defineExpose({ breakPoint });
-</script>

package/src/components/Grid/interface/index.ts

@@ -1,6 +0,0 @@
-export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
-
-export type Responsive = {
-  span?: number;
-  offset?: number;
-};