zyf-model-engine 0.0.1

package/src/components/ProTable/index.vue

@@ -0,0 +1,274 @@
+<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->
+
+<template>
+  <div class="pro-table-box">
+    <!-- 查询表单 card -->
+    <SearchForm
+      v-show="isShowSearch"
+      :search="search"
+      :reset="reset"
+      :columns="searchColumns"
+      :search-param="searchParam"
+      :search-col="searchCol"
+      :use-card="useCard"
+    />
+
+    <!-- 表格内容 card -->
+    <div class="table-main" :class="{ card: useCard }">
+      <!-- 表格头部 操作按钮 -->
+      <div class="table-header">
+        <div class="header-button-lf">
+          <slot name="tableHeader" :selected-list-ids="selectedListIds" :selected-list="selectedList" :is-selected="isSelected" />
+        </div>
+        <div v-if="toolButton && !useCustomTable" class="header-button-ri">
+          <slot name="toolButton">
+            <el-button :icon="Refresh" circle @click="getTableList" />
+            <el-button v-if="columns.length" :icon="Operation" circle @click="openColSetting" />
+            <el-button v-if="searchColumns.length" :icon="Search" circle @click="isShowSearch = !isShowSearch" />
+          </slot>
+        </div>
+      </div>
+
+      <!-- 表格主体 -->
+      <el-table
+        v-if="!useCustomTable"
+        ref="tableRef"
+        v-bind="$attrs"
+        :data="data ?? tableData"
+        :border="border"
+        :row-key="rowKey"
+        :tree-props="treeProps"
+        @row-click="rowClick"
+        @selection-change="selectionChange"
+        :highlight-current-row="highlightCurrentRow || typeof currentChange === 'function'"
+        @current-change="currentChange"
+      >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        <template v-for="item in tableColumns" :key="item">
+          <!-- selection || index || expand -->
+          <el-table-column
+            v-if="item.type && ['selection', 'index', 'expand'].includes(item.type) && item.isShow"
+            v-bind="item"
+            :align="item.align ?? 'center'"
+            :reserve-selection="item.type == 'selection'"
+          >
+            <!-- 拓展插槽 -->
+            <template v-if="item.type == 'expand'" #default="scope">
+              <component :is="item.render" v-bind="scope" v-if="item.render"> </component>
+              <slot v-else :name="item.type" v-bind="scope"></slot>
+            </template>
+          </el-table-column>
+          <!-- 其他插槽 -->
+          <TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
+            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+              <slot :name="slot" v-bind="scope"></slot>
+            </template>
+          </TableColumn>
+        </template>
+        <!-- 插入表格最后一行之后的插槽 -->
+        <template #append>
+          <slot name="append"> </slot>
+        </template>
+        <!-- 无数据 -->
+        <template #empty>
+          <div class="table-empty">
+            <empty />
+          </div>
+        </template>
+      </el-table>
+      <!-- 自定义表格 -->
+      <div v-else class="el-table">
+        <el-scrollbar v-if="data?.length ?? tableData?.length">
+          <slot :data="data ?? tableData" />
+        </el-scrollbar>
+        <empty v-else />
+      </div>
+      <!-- 分页组件 -->
+      <slot name="pagination">
+        <Pagination
+          v-if="pagination"
+          :pageable="pageable"
+          :handle-size-change="handleSizeChange"
+          :handle-current-change="handleCurrentChange"
+        />
+      </slot>
+    </div>
+    <!-- 列设置 -->
+    <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+  </div>
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { ref, watch, computed, provide, onMounted } from "vue";
+import { ElTable } from "element-plus";
+import { useTable } from "@/hooks/useTable";
+import { useSelection } from "@/hooks/useSelection";
+import { BreakPoint } from "@/components/Grid/interface";
+import { ColumnProps, tableTreeProps } from "@/components/ProTable/interface";
+import { fetchType as myFetchType } from "@/api/interface/index";
+import { Refresh, Operation, Search } from "@element-plus/icons-vue";
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils/layoutUtils";
+import SearchForm from "./components/SearchForm/index.vue";
+import Pagination from "./components/Pagination.vue";
+import ColSetting from "./components/ColSetting.vue";
+import TableColumn from "./components/TableColumn.vue";
+
+export interface ProTableProps {
+  useCustomTable?: boolean; // 是否使用表格  如果为true  则使用插槽的方式传入自定义表格渲染方式
+  useCard?: boolean; // 是否启用卡片样式
+  columns: ColumnProps[]; // 列配置项  ==> 必传
+  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  requestApi?: string | ((params: any) => Promise<any>); // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  rowClick?: (data: any) => any; // 	当某一行被点击时会触发该事件 ==> 非必传
+  highlightCurrentRow?: boolean; // 是否高亮当前行 ==> 非必传
+  currentChange?: (data: any) => any; // 	当表格的当前行发生变化的时候会触发该事件 ==> 非必传
+  title?: string; // 表格标题，目前只在打印的时候用到 ==> 非必传
+  pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+  tableLimit?: number; //数据每页个数
+  initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+  treeProps?: tableTreeProps; //渲染嵌套数据的配置选项
+  fetchType?: myFetchType;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  useCustomTable: false,
+  useCard: true,
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  tableLimit: 10,
+  initParam: {},
+  border: false,
+  toolButton: true,
+  rowKey: "id",
+  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  treeProps: () => ({ hasChildren: "hasChildren", children: "children" }),
+  fetchType: "post"
+});
+
+// 是否显示搜索模块
+const isShowSearch = ref(true);
+
+// 表格 DOM 元素
+const tableRef = ref<InstanceType<typeof ElTable>>();
+
+// 表格多选 Hooks 多选框
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+
+// 初始化请求
+onMounted(() => props.requestAuto && getTableList());
+
+// 接收 columns 并设置为响应式
+const tableColumns = ref<ColumnProps[]>(props.columns);
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+provide("enumMap", enumMap);
+const setEnumMap = async (col: ColumnProps) => {
+  if (!col.enum) return;
+  // 如果当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  if (typeof col.enum !== "function") return enumMap.value.set(col.prop!, col.enum!);
+  const res = await col.enum();
+  enumMap.value.set(col.prop!, res);
+};
+
+// 扁平化 columns
+const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
+  columns.forEach(async col => {
+    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
+    flatArr.push(col);
+    // 给每一项 column 添加 isShow && isFilterEnum 默认属性
+    col.isShow = col.isShow ?? true;
+    col.isFilterEnum = col.isFilterEnum ?? true;
+    // 设置 enumMap
+    setEnumMap(col);
+  });
+  return flatArr.filter(item => !item._children?.length);
+};
+
+// flatColumns
+const flatColumns = ref<ColumnProps[]>();
+flatColumns.value = flatColumnsFunc(tableColumns.value);
+
+// 过滤需要搜索的配置项
+const searchColumns = flatColumns.value.filter(item => item.search?.el || item.search?.render);
+
+// 设置搜索表单排序默认值 && 设置搜索表单项的默认值
+searchColumns.forEach((column, index) => {
+  column.search!.order = column.search!.order ?? index + 2;
+  if (column.search?.defaultValue !== undefined && column.search?.defaultValue !== null) {
+    searchInitParam.value[column.search.key ?? handleProp(column.prop!)] = column.search?.defaultValue;
+    searchParam.value[column.search.key ?? handleProp(column.prop!)] = column.search?.defaultValue;
+  }
+});
+
+// 排序搜索表单项
+searchColumns.sort((a, b) => a.search!.order! - b.search!.order!);
+
+// 列设置 ==> 过滤掉不需要设置的列
+const colRef = ref();
+const colSetting = tableColumns.value!.filter(
+  item => !["selection", "index", "expand"].includes(item.type!) && item.prop !== "operation" && item.isShow
+);
+const openColSetting = () => colRef.value.openColSetting();
+
+// 表格操作 Hooks
+const {
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  totalParam
+} = useTable(
+  props.initParam,
+  props.pagination,
+  props.fetchType,
+  props.tableLimit,
+  props.requestApi,
+  props.dataCallback,
+  props.requestError
+);
+
+// 监听页面 initParam 改化，重新获取表格数据
+watch([() => props.initParam], getTableList, { deep: true });
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  clearSelection,
+  enumMap,
+  isSelected,
+  selectedList,
+  selectedListIds,
+  totalParam
+});
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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

@@ -0,0 +1,86 @@
+import { VNode, ComponentPublicInstance } from "vue";
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/components/ProTable/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+
+export interface tableTreeProps {
+  hasChildren: string;
+  children: string;
+}
+
+export interface EnumProps {
+  label?: string; // 选项框显示的文字
+  value?: string | number | boolean | any[]; // 选项框值
+  disabled?: boolean; // 是否禁用此选项
+  tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any;
+}
+
+export type TypeProps = "index" | "selection" | "expand";
+
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为1列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[]; // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+export type RenderScope<T> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, "children" | "renderCell" | "renderHeader">> {
+  tag?: boolean; // 是否是标签展示
+  isShow?: boolean; // 是否显示在表格当中
+  search?: SearchProps | undefined; // 搜索项配置
+  enum?: EnumProps[] | ((params?: any) => Promise<any>); // 枚举类型（字典）
+  isFilterEnum?: boolean; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;

package/src/components/ScrollBox/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="scroll-box" :style="{ width: `calc(100% + ${rightDistance})` }">
+    <el-scrollbar
+      ref="scrollRef"
+      :view-style="{
+        paddingRight: rightDistance
+      }"
+      :height="height"
+      :always="always"
+    >
+      <slot />
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  height: {
+    type: String,
+    default: () => "100%"
+  },
+  maxHeight: {
+    type: String,
+    default: () => "100%"
+  },
+  rightDistance: {
+    type: String,
+    default: () => "0px"
+  },
+  always: {
+    type: Boolean,
+    default: () => false
+  }
+});
+const scrollRef = ref();
+</script>
+
+<style lang="scss" scoped>
+.scroll-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/SvgIcon/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg class="icon" :style="iconStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script setup lang="ts" name="SvgIcon">
+import { computed, CSSProperties } from "vue";
+interface SvgProps {
+  name: string; // 图标的名称 ==> 必传
+  prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
+  iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
+}
+const props = withDefaults(defineProps<SvgProps>(), {
+  prefix: "icon",
+  iconStyle: () => ({ width: "1em", height: "1em" })
+});
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+<style></style>

package/src/components/Tabs/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div :class="{ 'full-box': full, tab: true }">
+    <el-tabs
+      v-if="tabPans?.length"
+      ref="tabsRef"
+      :model-value="activeName"
+      @tab-click="onTabClick"
+      @tab-change="onTabChange"
+      :before-leave="onBeforeLeave"
+      @tab-remove="onRemoveTab"
+      v-bind="config"
+    >
+      <div class="tab-pane-class" style="width: 100%; height: 100%">
+        <el-tab-pane
+          v-for="(item, index) in tabPans as any"
+          :key="index"
+          :lazy="lazy"
+          :label="item[prop.label]"
+          :name="item[prop.name] ?? index"
+          :disabled="item.disabled"
+        >
+          <template #label v-if="item?.labelRender || item?.useLabel">
+            <component v-if="item?.labelRender" :is="item?.labelRender" v-bind="item"> </component>
+            <slot v-if="item?.useLabel" :label="item[prop.label]" :pane-name="item[prop.name] ?? index" :item="item" />
+          </template>
+          <slot
+            v-if="[item[prop.name], index].includes(activeName)"
+            :item="item"
+            :index="index"
+            :key="item[prop.name] ?? index"
+          />
+        </el-tab-pane>
+      </div>
+    </el-tabs>
+    <empty v-else />
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  full: {
+    type: Boolean,
+    default: () => true
+  },
+
+  tabPans: {
+    type: Array,
+    required: true
+  },
+  activeName: {
+    type: [Number, String],
+    default: () => 0
+  },
+  config: {
+    type: Object,
+    default: () => {}
+  },
+  // 配置选项
+  prop: {
+    type: Object,
+    default: () => {
+      return {
+        label: "name",
+        name: "id"
+      };
+    }
+  },
+
+  // 	标签是否延迟渲染
+  lazy: {
+    type: Boolean,
+    default: () => true
+  },
+  beforeLeave: {
+    type: Function,
+    default: () => {
+      return true;
+    }
+  }
+});
+const emit = defineEmits(["onTabClick", "onTabChange", "onRemoveTab"]);
+
+const onBeforeLeave = async (activeName: any, oldActiveName: any) => {
+  return await props.beforeLeave(activeName, oldActiveName);
+};
+const onTabClick = (pane: any, e: any) => {
+  emit("onTabClick", pane.props.name, pane, e);
+};
+const onTabChange = (name: any) => {
+  emit("onTabChange", name);
+};
+const onRemoveTab = (name: any) => {
+  emit("onRemoveTab", name);
+};
+const tabsRef = ref();
+defineExpose({ tabsRef });
+</script>
+<style lang="scss" scoped>
+.tab {
+  :deep(.el-tabs) {
+    .el-tabs__nav {
+      .el-tabs__item {
+        font-size: 14px;
+        font-weight: 500;
+        color: #8c9094;
+      }
+      .is-active {
+        font-family: MiSans-Regular, MiSans;
+        font-size: 14px;
+        font-weight: 400;
+        color: $primary-color;
+      }
+      .el-tabs__active-bar {
+        background-color: $primary-color;
+      }
+      .is-disabled {
+        color: #d7d7d7;
+        cursor: not-allowed;
+      }
+    }
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+  }
+}
+.full-box {
+  height: 100%;
+  :deep(.el-tabs) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .el-tabs__content {
+      flex: 1;
+      .el-tab-pane {
+        height: 100%;
+        .main {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/config/index.ts

@@ -0,0 +1,12 @@
+// ? 全局默认配置项
+// 项目名称区分   智能建造基础版
+export const DEMO_KEY: string = import.meta.env.VITE_GLOB_DEMO_KEY as string;
+export const TITLE: string = import.meta.env.VITE_GLOB_APP_TITLE as string;
+
+// 默认主题颜色
+export const DEFAULT_PRIMARY: string = "#00A5A7";
+
+// 路由白名单地址（必须是本地存在的路由 staticRouter.ts 中）
+export const ROUTER_WHITE_LIST: string[] = ["/500"];
+
+export const USE_LOCAL_FILE_ROUTER = true;

package/src/config/nprogress.ts

@@ -0,0 +1,12 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  easing: "ease", // 动画方式
+  speed: 500, // 递增进度条的速度
+  showSpinner: true, // 是否显示加载ico
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.3 // 初始化时的最小百分比
+});
+
+export default NProgress;

package/src/config/piniaPersist.ts

@@ -0,0 +1,19 @@
+import { PersistedStateOptions } from "pinia-plugin-persistedstate";
+import { DEMO_KEY } from "./index";
+/**
+ * @description pinia 持久化参数配置
+ * @param {String} key 存储到持久化的 name
+ * @param {Array} paths 需要持久化的 state name
+ * @return persist
+ * */
+const piniaPersistConfig = (key: string, paths?: string[]) => {
+  const persist: PersistedStateOptions = {
+    key: DEMO_KEY + key,
+    storage: localStorage,
+    // storage: sessionStorage,
+    paths
+  };
+  return persist;
+};
+
+export default piniaPersistConfig;

package/src/config/serviceLoading.ts

@@ -0,0 +1,45 @@
+import { ElLoading } from "element-plus";
+
+/* 全局请求 loading */
+let loadingInstance: ReturnType<typeof ElLoading.service>;
+
+/**
+ * @description 开启 Loading
+ * */
+const startLoading = () => {
+  loadingInstance = ElLoading.service({
+    fullscreen: true,
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)"
+  });
+};
+
+/**
+ * @description 结束 Loading
+ * */
+const endLoading = () => {
+  loadingInstance.close();
+};
+
+/**
+ * @description 显示全屏加载
+ * */
+let needLoadingRequestCount = 0;
+export const showFullScreenLoading = () => {
+  if (needLoadingRequestCount === 0) {
+    startLoading();
+  }
+  needLoadingRequestCount++;
+};
+
+/**
+ * @description 隐藏全屏加载
+ * */
+export const tryHideFullScreenLoading = () => {
+  if (needLoadingRequestCount <= 0) return;
+  needLoadingRequestCount--;
+  if (needLoadingRequestCount === 0) {
+    endLoading();
+  }
+};

package/src/enums/httpEnum.ts

@@ -0,0 +1,24 @@
+/**
+ * @description：请求方法
+ */
+export enum RequestEnum {
+  GET = "GET",
+  POST = "POST",
+  PATCH = "PATCH",
+  PUT = "PUT",
+  DELETE = "DELETE"
+}
+
+/**
+ * @description：常用的 contentTyp 类型
+ */
+export enum ContentTypeEnum {
+  // json
+  JSON = "application/json;charset=UTF-8",
+  // text
+  TEXT = "text/plain;charset=UTF-8",
+  // form-data 一般配合qs
+  FORM_URLENCODED = "application/x-www-form-urlencoded;charset=UTF-8",
+  // form-data 上传
+  FORM_DATA = "multipart/form-data;charset=UTF-8"
+}