zyf-model-engine 0.0.1 → 0.1.0

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>

package/src/components/ProTable/components/SearchForm/components/SearchFormItem.vue

@@ -1,93 +0,0 @@
-<template>
-  <component
-    :is="_column.search?.render ?? `el-${_column.search?.el}`"
-    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
-    v-model.trim="_searchParam[_column.search?.key ?? handleProp(_column.prop!)]"
-    :data="_column.search?.el === 'tree-select' ? columnEnum : []"
-    :options="['cascader', 'select-v2'].includes(_column.search?.el!) ? columnEnum : []"
-  >
-    <template v-if="_column.search?.el === 'cascader'" #default="{ data }">
-      <span>{{ data[fieldNames.label] }}</span>
-    </template>
-    <template v-if="_column.search?.el === 'select'">
-      <component
-        :is="`el-option`"
-        v-for="(col, index) in columnEnum"
-        :key="index"
-        :label="col[fieldNames.label]"
-        :value="col[fieldNames.value]"
-      ></component>
-    </template>
-    <slot v-else></slot>
-  </component>
-</template>
-
-<script setup lang="ts" name="SearchFormItem">
-import { computed, inject, ref } from "vue";
-import { handleProp } from "@/utils/layoutUtils";
-import { ColumnProps } from "@/components/ProTable/interface";
-
-interface SearchFormItem {
-  column: ColumnProps;
-  searchParam: { [key: string]: any };
-}
-const props = defineProps<SearchFormItem>();
-
-// Re receive SearchParam
-const _searchParam = computed(() => props.searchParam);
-const _column = computed(() => props.column);
-
-// 判断 fieldNames 设置 label && value && children 的 key 值
-const fieldNames = computed(() => {
-  return {
-    label: props.column.fieldNames?.label ?? "name",
-    value: props.column.fieldNames?.value ?? "id",
-    children: props.column.fieldNames?.children ?? "children"
-  };
-});
-
-// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
-const enumMap = inject("enumMap", ref(new Map()));
-const columnEnum = computed(() => {
-  let enumData = enumMap.value.get(props.column.prop);
-  if (!enumData) return [];
-  if (props.column.search?.el === "select-v2" && props.column.fieldNames) {
-    enumData = enumData.map((item: { [key: string]: any }) => {
-      return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] };
-    });
-  }
-  return enumData;
-});
-
-// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
-const handleSearchProps = computed(() => {
-  const label = fieldNames.value.label;
-  const value = fieldNames.value.value;
-  const children = fieldNames.value.children;
-  const searchEl = props.column.search?.el;
-  let searchProps = props.column.search?.props ?? {};
-  if (searchEl === "tree-select") {
-    searchProps = { ...searchProps, props: { ...searchProps.props, label, children }, nodeKey: value };
-  }
-  if (searchEl === "cascader") {
-    searchProps = { ...searchProps, props: { ...searchProps.props, label, value, children } };
-  }
-  return searchProps;
-});
-
-// 处理默认 placeholder
-const placeholder = computed(() => {
-  const search = props.column.search;
-  if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
-    return { rangeSeparator: "至", startPlaceholder: "开始时间", endPlaceholder: "结束时间" };
-  }
-  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择") + props.column.label;
-  return { placeholder };
-});
-
-// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
-const clearable = computed(() => {
-  const search = props.column.search;
-  return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
-});
-</script>

package/src/components/ProTable/components/SearchForm/index.scss

@@ -1,12 +0,0 @@
-.table-search {
-  margin-bottom: 13px;
-  :deep(.el-form) {
-    .el-form-item {
-      margin: 0;
-    }
-    .operation {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-}

package/src/components/ProTable/components/SearchForm/index.vue

@@ -1,91 +0,0 @@
-<template>
-  <div v-if="columns.length" class="table-search" :class="{ card: useCard }">
-    <el-form ref="formRef" :model="searchParam">
-      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 20]" :cols="searchCol">
-        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
-          <!-- :label="`${item.label} :`" -->
-          <el-form-item>
-            <SearchFormItem :column="item" :search-param="searchParam" />
-          </el-form-item>
-        </GridItem>
-        <GridItem suffix>
-          <div class="operation">
-            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
-            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
-            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
-              {{ collapsed ? "展开" : "合并" }}
-              <el-icon class="el-icon--right">
-                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
-              </el-icon>
-            </el-button>
-          </div>
-        </GridItem>
-      </Grid>
-    </el-form>
-  </div>
-</template>
-<script setup lang="ts" name="SearchForm">
-import { computed, ref } from "vue";
-import { ColumnProps } from "@/components/ProTable/interface";
-import { BreakPoint } from "@/components/Grid/interface";
-import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
-import SearchFormItem from "./components/SearchFormItem.vue";
-import Grid from "@/components/Grid/index.vue";
-import GridItem from "@/components/Grid/components/GridItem.vue";
-
-interface ProTableProps {
-  useCard?: boolean; // 是否启用卡片样式
-  columns?: ColumnProps[]; // 搜索配置列
-  searchParam?: { [key: string]: any }; // 搜索参数
-  searchCol: number | Record<BreakPoint, number>;
-  search: (params: any) => void; // 搜索方法
-  reset: (params: any) => void; // 重置方法
-}
-
-// 默认值
-const props = withDefaults(defineProps<ProTableProps>(), {
-  useCard: true,
-  columns: () => [],
-  searchParam: () => ({})
-});
-
-// 获取响应式设置
-const getResponsive = (item: ColumnProps) => {
-  return {
-    span: item.search?.span,
-    offset: item.search?.offset ?? 0,
-    xs: item.search?.xs,
-    sm: item.search?.sm,
-    md: item.search?.md,
-    lg: item.search?.lg,
-    xl: item.search?.xl
-  };
-};
-
-// 是否默认折叠搜索项
-const collapsed = ref(true);
-
-// 获取响应式断点
-const gridRef = ref();
-const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
-
-// 判断是否显示 展开/合并 按钮
-const showCollapse = computed(() => {
-  let show = false;
-  props.columns.reduce((prev, current) => {
-    prev +=
-      (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
-      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
-    if (typeof props.searchCol !== "number") {
-      if (prev >= props.searchCol[breakPoint.value]) show = true;
-    } else {
-      if (prev >= props.searchCol) show = true;
-    }
-    return prev;
-  }, 0);
-  return show;
-});
-</script>
-<style lang="scss" scoped>
-@import "./index.scss";
-</style>

package/src/components/ProTable/components/TableColumn.vue

@@ -1,56 +0,0 @@
-<template>
-  <RenderTableColumn v-bind="{ ..._column }" />
-</template>
-
-<script setup lang="tsx" name="TableColumn">
-import { inject, ref, useSlots } from "vue";
-import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
-import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils/layoutUtils";
-
-const props = defineProps<{ column: ColumnProps }>();
-const _column = computed(() => props.column);
-const slots = useSlots();
-
-const enumMap = inject("enumMap", ref(new Map()));
-
-// 渲染表格数据
-const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
-  return enumMap.value.get(item.prop) && item.isFilterEnum
-    ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
-    : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
-};
-
-// 获取 tag 类型
-const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
-  return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
-};
-// 渲染表格行
-const RenderTableColumn = (item: ColumnProps) => {
-  return (
-    <>
-      {item.isShow && (
-        <el-table-column
-          {...item}
-          align={item.align ?? "center"}
-          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
-        >
-          {{
-            default: (scope: RenderScope<any>) => {
-              if (item._children) return item._children.map(child => RenderTableColumn(child));
-              if (item.render) return item.render(scope);
-              if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
-              if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
-              return renderCellData(item, scope);
-            },
-            header: (scope: HeaderRenderScope<any>) => {
-              if (item.headerRender) return item.headerRender(scope);
-              if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
-              return item.label;
-            }
-          }}
-        </el-table-column>
-      )}
-    </>
-  );
-};
-</script>

package/src/components/ProTable/index.scss

@@ -1,14 +0,0 @@
-.pro-table-box {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  :deep(.table-main) {
-    flex: 1;
-    overflow: hidden;
-    .el-scrollbar__view {
-      display: block !important;
-    }
-  }
-}