zyf-model-engine 0.0.1 → 0.1.0

package/src/hooks/interface/index.ts

@@ -1,32 +0,0 @@
-export namespace Table {
-  export interface Pageable {
-    page: number;
-    limit: number;
-    total: number;
-  }
-  export interface StateProps {
-    tableData: any[];
-    pageable: Pageable;
-    searchParam: {
-      [key: string]: any;
-    };
-    searchInitParam: {
-      [key: string]: any;
-    };
-    totalParam: {
-      [key: string]: any;
-    };
-    icon?: {
-      [key: string]: any;
-    };
-  }
-}
-
-export namespace HandleData {
-  export type MessageType = "" | "success" | "warning" | "info" | "error";
-}
-
-export namespace Theme {
-  export type ThemeType = "light" | "inverted" | "dark";
-  export type GreyOrWeakType = "grey" | "weak";
-}

package/src/hooks/useOnline.ts

@@ -1,27 +0,0 @@
-import { ref, onMounted, onUnmounted } from "vue";
-
-/**
- * @description 网络是否可用
- * */
-export const useOnline = () => {
-  const online = ref(true);
-  const showStatus = (val: any) => {
-    online.value = typeof val == "boolean" ? val : val.target.online;
-  };
-  // 在页面加载后，设置正确的网络状态
-  navigator.onLine ? showStatus(true) : showStatus(false);
-
-  onMounted(() => {
-    // 开始监听网络状态的变化
-    window.addEventListener("online", showStatus);
-    window.addEventListener("offline", showStatus);
-  });
-
-  onUnmounted(() => {
-    // 移除监听网络状态的变化
-    window.removeEventListener("online", showStatus);
-    window.removeEventListener("offline", showStatus);
-  });
-
-  return { online };
-};

package/src/hooks/useTable.ts

@@ -1,167 +0,0 @@
-import { Table } from "./interface";
-import { http } from "@/api/index";
-import { fetchType } from "@/api/interface/index";
-/**
- * @description table 页面操作方法封装
- * @param {Function} api 获取表格数据 api 方法 (必传)
- * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
- * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
- * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
- * */
-export const useTable = (
-  initParam: object = {},
-  isPageable: boolean = true,
-  fetchType: fetchType,
-  tableLimit: number = 10,
-  api?: string | ((params: any) => Promise<any>),
-
-  dataCallBack?: (data: any) => any,
-  requestError?: (error: any) => void
-) => {
-  const state = reactive<Table.StateProps>({
-    // 表格数据
-    tableData: [],
-    // 分页数据
-    pageable: {
-      // 当前页数
-      page: 1,
-      // 每页显示条数
-      limit: tableLimit,
-      // // 总条数
-      total: 0
-    },
-    // 查询参数(只包括查询)
-    searchParam: {},
-    // 初始化默认的查询参数
-    searchInitParam: {},
-    // 总参数(包含分页和查询参数)
-    totalParam: {}
-  });
-
-  /**
-   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
-   * */
-  const pageParam = computed({
-    get: () => {
-      return {
-        page: state.pageable.page,
-        limit: state.pageable.limit
-      };
-    },
-    set: (newVal: any) => {
-      console.log("我是分页更新之后的值", newVal);
-    }
-  });
-
-  /**
-   * @description 获取表格数据
-   * @return void
-   * */
-  const getTableList = async () => {
-    if (!api) return;
-    try {
-      // 先把初始化参数和分页参数放到总参数里面
-      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
-
-      let data =
-        typeof api === "string"
-          ? await http[fetchType](api, { params: { ...state.searchInitParam, ...state.totalParam } })
-          : await api({ params: { ...state.searchInitParam, ...state.totalParam } });
-
-      dataCallBack && (data = await dataCallBack(data));
-      state.tableData = data.items || data;
-      // 解构后台返回的分页数据 (如果有分页更新分页信息)
-      if (isPageable) {
-        const { total } = data;
-        updatePageable({ ...pageParam.value, total });
-      }
-    } catch (error) {
-      requestError && requestError(error);
-    }
-  };
-
-  /**
-   * @description 更新查询参数
-   * @return void
-   * */
-  const updatedTotalParam = () => {
-    state.totalParam = {};
-    // 处理查询参数，可以给查询参数加自定义前缀操作
-    let nowSearchParam: Table.StateProps["searchParam"] = {};
-    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
-    for (let key in state.searchParam) {
-      // * 某些情况下参数为 false/0 也应该携带参数
-      if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
-        nowSearchParam[key] = state.searchParam[key];
-      }
-    }
-
-    // , isPageable ? pageParam.value : {}
-    Object.assign(state.totalParam, nowSearchParam);
-  };
-
-  /**
-   * @description 更新分页信息
-   * @param {Object} pageable 后台返回的分页数据
-   * @return void
-   * */
-  const updatePageable = (pageable: Table.Pageable) => {
-    Object.assign(state.pageable, pageable);
-  };
-
-  /**
-   * @description 表格数据查询
-   * @return void
-   * */
-  const search = () => {
-    state.pageable.page = 1;
-    updatedTotalParam();
-    getTableList();
-  };
-
-  /**
-   * @description 表格数据重置
-   * @return void
-   * */
-  const reset = () => {
-    state.pageable.page = 1;
-    state.searchParam = {};
-    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
-    Object.keys(state.searchInitParam).forEach(key => {
-      state.searchParam[key] = state.searchInitParam[key];
-    });
-    updatedTotalParam();
-    getTableList();
-  };
-
-  /**
-   * @description 每页条数改变
-   * @param {Number} val 当前条数
-   * @return void
-   * */
-  const handleSizeChange = (val: number) => {
-    state.pageable.page = 1;
-    state.pageable.limit = val;
-    getTableList();
-  };
-
-  /**
-   * @description 当前页改变
-   * @param {Number} val 当前页
-   * @return void
-   * */
-  const handleCurrentChange = (val: number) => {
-    state.pageable.page = val;
-    getTableList();
-  };
-
-  return {
-    ...toRefs(state),
-    getTableList,
-    search,
-    reset,
-    handleSizeChange,
-    handleCurrentChange,
-    updatedTotalParam
-  };
-};

package/src/main.ts

@@ -1,35 +0,0 @@
-import { createApp, VueElement } from "vue";
-import App from "./App.vue";
-
-// reset style sheet
-import "@/styles/reset.scss";
-import "@/styles/element.scss";
-import "@/styles/reset.scss";
-
-// element dark css
-import "element-plus/theme-chalk/dark/css-vars.css";
-
-// element css
-import "element-plus/dist/index.css";
-// custom element css
-import "@/styles/element.scss";
-// svg icons
-import "virtual:svg-icons-register";
-// element plus
-import ElementPlus from "element-plus";
-// element icons
-import * as Icons from "@element-plus/icons-vue";
-// pinia store
-import pinia from "@/stores";
-
-const app = createApp(App);
-Object.keys(Icons).forEach(key => {
-  app.component(key, Icons[key as keyof typeof Icons]);
-});
-
-// errorHandler;
-import errorHandler from "@/utils/errorHandler";
-app.config.errorHandler = errorHandler;
-
-import vueMsg from "./plugins/index.js";
-app.use(ElementPlus).use(vueMsg).use(pinia).mount("#app");

package/src/plugins/button/button.vue

@@ -1,56 +0,0 @@
-<template>
-  <button class="btn">
-    <span>
-      <!-- 自定义插槽 -->
-      <slot></slot>
-    </span>
-  </button>
-</template>
-<script setup></script>
-
-<script>
-export default {
-  //一定要写组件名
-  name: "VueButton"
-};
-</script>
-
-<style scoped>
-.btn {
-  display: inline-block;
-  width: 200px;
-  padding: 18px;
-  margin: 5px;
-  font-size: 28px;
-  font-weight: 400;
-  color: #ffffffff;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-color: #f4511e;
-  border: none;
-  border-radius: 20px;
-  transition: all 0.5s;
-}
-.btn span {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-  transition: 0.5s;
-}
-.btn span::after {
-  position: absolute;
-  top: 0;
-  right: -20px;
-  content: ">";
-  opacity: 0;
-  transition: 0.5s;
-}
-.btn:hover span {
-  padding-right: 30px;
-}
-.btn:hover span::after {
-  right: 0;
-  opacity: 1;
-}
-</style>

package/src/plugins/index.js

@@ -1,26 +0,0 @@
-//入口文件=>插件的入口=>统一管理文件
-//动态引入文件
-const requireComponent = import.meta.glob("./**/*.vue", { eager: true });
-const install = Vue => {
-  console.log(requireComponent);
-
-  Object.keys(requireComponent).forEach(fileName => {
-    //第i个组件
-    const config = requireComponent[fileName];
-    //组件名 刚才写的组件名派上用场了
-    const conponentName = config.default.name;
-
-    Vue.component(conponentName, config.default || config);
-  });
-  //这里也可以创建全局自定义指令 这里是创建了一个自动获取焦点的指令
-  Vue.directive("focus", {
-    mounted: function (el) {
-      el.focus();
-    }
-  });
-};
-
-//对外暴露install方法
-export default {
-  install
-};

package/src/plugins/index.vue

@@ -1,24 +0,0 @@
-<template>
-  <input v-model="text" type="text" v-focus />
-  <vue-button @click="submit">123</vue-button>
-  <vue-msg ref="msg"></vue-msg>
-</template>
-
-<script setup>
-import { nextTick, ref } from "vue";
-let msg = ref();
-let text = ref("");
-function submit() {
-  if (text.value !== "") {
-    nextTick(() => {
-      msg.value.msgPlugin("提交成功", 1000);
-    });
-  } else {
-    nextTick(() => {
-      msg.value.msgPlugin("输入不能为空", 1000);
-    });
-  }
-}
-</script>
-
-<style scoped></style>

package/src/plugins/msg/msg.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="msg" ref="msg" :class="{ active: msgStatus }">
-    <div class="msg-warpper">
-      {{ text }}
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref } from "vue";
-//控制组件的显示
-let msgStatus = ref(false);
-let text = ref("");
-
-const msgPlugin = function (msg, time = 2000) {
-  text.value = msg;
-  msgStatus.value = true;
-  setTimeout(() => {
-    msgStatus.value = false;
-  }, time);
-};
-defineExpose({
-  //向外暴露方法
-  msgPlugin
-});
-</script>
-
-<script>
-export default {
-  name: "VueMsg"
-};
-</script>
-
-<style scoped>
-.msg {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: -1;
-  width: 0;
-  height: 22px;
-  min-height: 0;
-  color: #ffffff;
-  text-align: center;
-  background-color: rgb(0 0 0 / 50%);
-  border-radius: 5px;
-  opacity: 0;
-  transition: all 0.5s;
-  transform: translate(-50%, -50%);
-}
-.msg.active {
-  z-index: 11;
-  width: 150px;
-  min-height: 25px;
-  opacity: 1;
-}
-</style>

package/src/stores/commonStore.ts

@@ -1,9 +0,0 @@
-const storeArr = import.meta.glob("@/stores/modules/*.ts", { eager: true });
-let store: Record<string, any> = {};
-Object.entries(storeArr).forEach(([key, useStore]) => {
-  for (const useKey in useStore as object) {
-    store[(useStore as any)[useKey].$id] = (useStore as any)[useKey]().$state;
-  }
-});
-// 取出项目中的所有全局变量
-export default store;

package/src/stores/index.ts

@@ -1,8 +0,0 @@
-import { createPinia } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-
-// pinia persist
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
-
-export default pinia;

package/src/stores/interface/index.ts

@@ -1 +0,0 @@
-export type AssemblySizeType = "large" | "default" | "small";

package/src/styles/common.scss

@@ -1,87 +0,0 @@
-/* flex */
-.flx-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.flx-justify-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.flx-align-center {
-  display: flex;
-  align-items: center;
-}
-.row-click {
-  color: $primary-color;
-  cursor: pointer;
-}
-.row-un-click {
-  color: var(--el-border-color-light);
-  cursor: not-allowed;
-}
-.full {
-  width: 100%;
-  height: 100%;
-}
-.w-full {
-  width: 100%;
-}
-.h-full {
-  height: 100%;
-}
-
-/* clearfix */
-.clearfix::after {
-  display: block;
-  height: 0;
-  overflow: hidden;
-  clear: both;
-  content: "";
-}
-
-/* 文字单行省略号 */
-.sle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 文字多行省略号 */
-.mle {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-/* 文字多了自动換行 */
-.break-word {
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
-/* scroll bar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-thumb {
-  background-color: var(--el-fill-color-light) !important;
-  border-radius: 5px;
-}
-
-/* nprogress */
-#nprogress .bar {
-  background: var(--el-color-primary) !important;
-}
-#nprogress .spinner-icon {
-  border-top-color: var(--el-color-primary) !important;
-  border-left-color: var(--el-color-primary) !important;
-}
-#nprogress .peg {
-  box-shadow:
-    0 0 10px var(--el-color-primary),
-    0 0 5px var(--el-color-primary) !important;
-}