zyf-model-engine 0.0.1

package/src/components/Loading/index.scss

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+.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;
+    }
+  }
+}