zyf-model-engine 0.0.1

package/src/components/CTree/index.vue

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

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

package/src/components/Dialog/index.scss

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

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

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

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

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

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

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