zyf-model-engine 0.0.1 → 0.0.2

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;
-};

package/src/components/Loading/index.scss

@@ -1,67 +0,0 @@
-.loading-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  .loading-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 98px;
-  }
-}
-.dot {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
-  transform: rotate(45deg);
-  animation: ant-rotate 1.2s infinite linear;
-}
-.dot i {
-  position: absolute;
-  display: block;
-  width: 14px;
-  height: 14px;
-  background-color: var(--el-color-primary);
-  border-radius: 100%;
-  opacity: 0.3;
-  transform: scale(0.75);
-  transform-origin: 50% 50%;
-  animation: ant-spin-move 1s infinite linear alternate;
-}
-.dot i:nth-child(1) {
-  top: 0;
-  left: 0;
-}
-.dot i:nth-child(2) {
-  top: 0;
-  right: 0;
-  animation-delay: 0.4s;
-}
-.dot i:nth-child(3) {
-  right: 0;
-  bottom: 0;
-  animation-delay: 0.8s;
-}
-.dot i:nth-child(4) {
-  bottom: 0;
-  left: 0;
-  animation-delay: 1.2s;
-}
-
-@keyframes ant-rotate {
-  to {
-    transform: rotate(405deg);
-  }
-}
-
-@keyframes ant-spin-move {
-  to {
-    opacity: 1;
-  }
-}

package/src/components/Loading/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="loading-box">
-    <div class="loading-wrap">
-      <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" name="Loading"></script>
-
-<style scoped lang="scss">
-@import "./index.scss";
-</style>

package/src/components/Overflow/index.vue

@@ -1,76 +0,0 @@
-<template>
-  <el-tooltip
-    popper-class="custom-over-flow"
-    :visible="isShowTooltip"
-    :content="text.toString()"
-    effect="light"
-    placement="top"
-    :enterable="enterable"
-    :hide-after="100"
-  >
-    <div class="text" :style="customStyle" @mouseenter="e => showTooltip(e)" @mouseout="hideTooltip">
-      {{ text }}
-    </div>
-  </el-tooltip>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  text: {
-    type: [String, Number],
-    default: () => "-"
-  },
-  customStyle: {
-    type: [String, Object],
-    default: () => ""
-  },
-  enterable: {
-    type: Boolean,
-    default: () => true
-  }
-});
-
-const isShowTooltip = ref(false);
-
-const showTooltip = (e: any) => {
-  isShowTooltip.value = textRange(e.target);
-};
-const hideTooltip = () => {
-  isShowTooltip.value = false;
-};
-
-const textRange = (el: any) => {
-  const textContent = el;
-  const targetW = textContent.getBoundingClientRect().width;
-  const range = document.createRange();
-  range.setStart(textContent, 0);
-  range.setEnd(textContent, textContent.childNodes.length);
-  const rangeWidth = range.getBoundingClientRect().width;
-  return rangeWidth > targetW;
-};
-</script>
-<style lang="scss" scoped>
-.text {
-  box-sizing: border-box;
-  flex: 1;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-  > * {
-    vertical-align: middle;
-  }
-}
-p {
-  margin: 0;
-}
-</style>
-<style lang="scss">
-.custom-over-flow {
-  > span:nth-child(1) {
-    display: inline-block;
-    max-width: 800px !important;
-  }
-}
-</style>

package/src/components/ProTable/components/ColSetting.vue

@@ -1,45 +0,0 @@
-<template>
-  <!-- 列设置 -->
-  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
-    <div class="table-main">
-      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
-        <el-table-column prop="label" align="center" label="列名" />
-        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
-          <el-switch v-model="scope.row.isShow"></el-switch>
-        </el-table-column>
-        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
-          <el-switch v-model="scope.row.sortable"></el-switch>
-        </el-table-column>
-        <template #empty>
-          <div class="table-empty">
-            <img src="@/assets/images/notData.png" alt="notData" />
-            <div>暂无可配置列</div>
-          </div>
-        </template>
-      </el-table>
-    </div>
-  </el-drawer>
-</template>
-
-<script setup lang="ts" name="ColSetting">
-import { ref } from "vue";
-import { ColumnProps } from "@/components/ProTable/interface";
-
-defineProps<{ colSetting: ColumnProps[] }>();
-
-const drawerVisible = ref<boolean>(false);
-
-const openColSetting = () => {
-  drawerVisible.value = true;
-};
-
-defineExpose({
-  openColSetting
-});
-</script>
-
-<style scoped lang="scss">
-.cursor-move {
-  cursor: move;
-}
-</style>

package/src/components/ProTable/components/Pagination.vue

@@ -1,29 +0,0 @@
-<template>
-  <!-- 分页组件 -->
-  <el-pagination
-    :background="true"
-    :current-page="pageable.page"
-    :page-size="pageable.limit"
-    :page-sizes="[10, 25, 50, 100]"
-    :total="pageable.total"
-    layout="total, sizes, prev, pager, next, jumper"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange"
-  ></el-pagination>
-</template>
-
-<script setup lang="ts" name="Pagination">
-interface Pageable {
-  page: number;
-  limit: number;
-  total: number;
-}
-
-interface PaginationProps {
-  pageable: Pageable;
-  handleSizeChange: (size: number) => void;
-  handleCurrentChange: (currentPage: number) => void;
-}
-
-defineProps<PaginationProps>();
-</script>