meixioacomponent 0.1.0

package/packages/components/proPageTable/oa_pro_table_skeleton.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="table-skeleton-wrap" :style="{ height: height }">
+    <baseSkeletonVue
+      :shape="`rect`"
+      :lines="[5, 2, 8, 7, 3, 1, 8, 10, 4, 9]"
+    ></baseSkeletonVue>
+  </div>
+</template>
+
+<script>
+import baseSkeletonVue from "../base/baseSkeleton/baseSkeleton.vue";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    height: {
+      require: true,
+    },
+  },
+
+  components: {
+    baseSkeletonVue,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-skeleton-wrap {
+  width: 100%;
+  height: auto;
+}
+</style>

package/packages/components/searchHeader/searchHeader.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="search-header-wrap">
+    <div class="search-header-wrap-left">
+      <el-input
+        v-if="input"
+        size="small"
+        v-model="module"
+        style="width: 220px"
+        :placeholder="placeholder"
+        suffix-icon="el-icon-search"
+        @keyup.enter.native="handleSearch"
+      >
+      </el-input>
+
+      <div class="header-config-wrap" v-if="searchList">
+        <span class="view-text">显示：</span>
+        <el-button
+          :key="index"
+          :size="size"
+          :class="{
+            'is-plain': index != searchList.index,
+          }"
+          @click="handleScreen(index)"
+          v-for="(item, index) in searchList.list"
+          :type="index == searchList.index ? 'primary' : 'info'"
+          >{{ item.label }}</el-button
+        >
+      </div>
+    </div>
+    <div class="search-header-wrap-right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    value: {},
+    searchList: {
+      type: Object,
+    },
+    input: {
+      type: Boolean,
+      default: true,
+    },
+    size: {
+      type: String,
+      default: "medium",
+    },
+    placeholder: { type: String },
+  },
+  computed: {
+    module: {
+      get() {
+        return this.$props.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  methods: {
+    handleSearch() {
+      this.$emit("handleSearch");
+    },
+    handleScreen(index) {
+      this.$emit("handleScreen", index);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.search-header-wrap {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  .search-header-wrap-left {
+    width: 80%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+
+    .header-config-wrap {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
+      box-sizing: border-box;
+      width: calc(100% - 220px);
+      justify-content: flex-start;
+      padding-left: calc(var(--padding-5) * 2);
+
+      .view-text {
+        color: var(--font-color-d);
+        font-size: var(--font-size-base);
+      }
+    }
+  }
+  .search-header-wrap-right {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+  }
+}
+</style>

package/packages/config/selectStore/SelectStore.js

@@ -0,0 +1,24 @@
+class SelectStore {
+  constructor(request) {
+    this.data = [];
+    this.loading = false;
+    this.request = request;
+  }
+
+  async loadData() {
+    this.loading = true;
+    let result = await this.request();
+    
+    this.loading = false;
+    this.data = result;
+  }
+
+  getData() {
+    return this.data;
+  }
+  getLoading() {
+    return this.loading;
+  }
+}
+
+export default SelectStore;

package/packages/config/selectStore/UseSelectStoreClass.js

@@ -0,0 +1,27 @@
+class UseSelectStoreClass {
+  constructor() {
+    this.storeList = [];
+  }
+  hasStore(store) {
+    let index = this.storeList.findIndex((item) => {
+      return item.key == store;
+    });
+    return index;
+  }
+  getStore(store) {
+    console.log(store);
+    let flag = this.hasStore(store);
+    if (flag == -1) {
+      let value = require(`@/config/selectStore/${store}.js`);
+      let obj = {
+        key: `${store}`,
+        value: value.default,
+      };
+      this.storeList.push(obj);
+      return obj.value;
+    }
+
+    return this.storeList[flag].value;
+  }
+}
+export default UseSelectStoreClass;

package/packages/config/selectStore/testSelectStore.js

@@ -0,0 +1,40 @@
+import SelectStore from "./SelectStore";
+// 示例
+let testRequest = () => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve([
+        {
+          value: 1,
+          label: "黄金糕",
+        },
+        {
+          value: 2,
+          label: "双皮奶",
+        },
+        {
+          value: 3,
+          label: "蚵仔煎",
+        },
+        {
+          value: 4,
+          label: "龙须面",
+        },
+        {
+          value: 5,
+          label: "北京烤鸭",
+        },
+      ]);
+    }, 5000);
+  });
+};
+
+class TestSelectStore extends SelectStore {
+  constructor(request) {
+    super(request);
+  }
+}
+
+let testSelectStore = new TestSelectStore(testRequest);
+
+export default testSelectStore;

package/packages/config/uploadRequest.js

@@ -0,0 +1,66 @@
+import axios from "axios";
+import { GetToken } from "../utils/utils.js";
+
+const ossInstance = (params, uploadProgressFn) => {
+  // 创建 axios 实例
+  const instance = axios.create({
+    // API 请求的默认前缀
+    baseURL: process.env.VUE_APP_UPLOAD_URL,
+  });
+
+  // 异常拦截处理器
+  const errorHandler = (error) => {
+    return Promise.reject(error);
+  };
+
+  // 响应异常拦截处理器
+  const resErrorHandler = (error) => {
+    // Message.error(`网络超时，请稍后重试`);
+    // return errorHandler(error);
+  };
+
+  // request 拦截器
+  instance.interceptors.request.use((config) => {
+    config.headers["Content-Type"] = "multipart/form-data";
+    config.Authorization = GetToken("token");
+    config.onUploadProgress = (progressEvent) => {
+      if (uploadProgressFn) {
+        const percent = (progressEvent.loaded / progressEvent.total) * 100 || 0;
+        uploadProgressFn(percent);
+      }
+    };
+    return config;
+  }, errorHandler);
+
+  // response 拦截器
+  instance.interceptors.response.use(async (response) => {
+    return response;
+  }, resErrorHandler);
+
+  return instance(params);
+};
+
+export default (file, uploadProgressFn, sourceToken) => {
+  return new Promise((resolve, reject) => {
+    const params = new FormData();
+    params.append("file", file);
+    ossInstance(
+      {
+        url: "/",
+        data: params,
+        method: "post",
+        cancelToken: sourceToken.token,
+      },
+      uploadProgressFn
+    )
+      .then((res) => {
+        const result = res.data;
+        if (result.code == 200) {
+          resolve(result.data);
+        }
+      })
+      .catch((error) => {
+        reject();
+      });
+  });
+};

package/packages/config/use/UseImg.js

@@ -0,0 +1,39 @@
+import Vue from "vue";
+import imageViewer from "../../components/base/baseImageViewer/image-viewer.vue";
+import DynamicMount from "../../components/dynamicmount/DynamicMount";
+class UseImg {
+  constructor() {
+    this.dynamicMount = null;
+  }
+
+  toView(list) {
+    if (this.dynamicMount) {
+      this.destroy();
+    }
+    Vue.nextTick(() => {
+      this.dynamicMount = new DynamicMount({
+        componentProps: {
+          urlList: list,
+          onClose: () => {
+            this.destroy();
+          },
+        },
+        vueComponent: imageViewer,
+      });
+      // 挂载事件
+      this.dynamicMount.on("mounted", () => {
+        //   console.log("mounted");
+      });
+      this.dynamicMount.init();
+    });
+  }
+
+  destroy() {
+    let referComponent = this.dynamicMount.getComponent();
+    referComponent.$destroy();
+  }
+}
+
+let useImg = new UseImg();
+
+export default useImg;

package/packages/config/use/UseSelectStore.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default Vue.prototype.$store.getters.selectStore;

package/packages/config/use/UseUpload.js

@@ -0,0 +1,47 @@
+import uploadVue from "../../components/base/upload/upload.vue";
+import DynamicMount from "../../components/dynamicmount/DynamicMount";
+
+class UseUpload {
+  constructor() {
+    this.dynamicMount = null;
+  }
+
+  toUpload(uploadList, cb) {
+    if (this.dynamicMount) {
+      this.appendUploadItem(uploadList);
+    } else {
+      this.dynamicmount = new DynamicMount({
+        componentProps: {
+          uploadEdEvent: (list) => {
+            this.uploadEd();
+            if (cb) {
+              cb(list);
+            }
+          },
+          uploadArray: uploadList,
+        },
+        vueComponent: uploadVue,
+      });
+      this.dynamicmount.init();
+    }
+  }
+
+  uploadEd() {
+    setTimeout(() => {
+      let component = this.dynamicmount.getComponent();
+      component.$destroy();
+      this.dynamicMount = null;
+    }, 3000);
+  }
+
+  appendUploadItem(list) {
+    let refComponent = this.dynamicMount.getComponent();
+    if (refComponent) {
+      refComponent.appendUploadItem(list);
+    }
+  }
+}
+
+let useUpload = new UseUpload();
+
+export default useUpload;

package/packages/config/use/useFixedHeader.js

@@ -0,0 +1,36 @@
+import baseFixedHeader from "../../components/base/baseFixedHeader.vue";
+import DynamicMount from "../../components/dynamicmount/DynamicMount";
+
+class UseFixedHeader {
+  constructor() {
+    this.newsList = [];
+    this.component = null;
+    this.dynamicMount = null;
+  }
+
+  pushFixHeaderItem(item) {
+    this.newsList.push(item);
+    if (this.dynamicMount) {
+      let component = this.dynamicMount.getComponent();
+      component.setNewIndex();
+    } else {
+      this.dynamicMount = new DynamicMount({
+        vueComponent: baseFixedHeader,
+        componentProps: {
+          newsList: this.newsList,
+        },
+      });
+
+      this.dynamicMount.on("destroyed", (component) => {
+        this.newsList = [];
+        this.dynamicMount = null;
+      });
+
+      this.dynamicMount.init();
+    }
+  }
+}
+
+let useFixedHeader = new UseFixedHeader();
+
+export default useFixedHeader;

package/packages/utils/upload.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import uploadRequest from "../config/uploadRequest";
+// state  0是未开始  1是已完成 2是以失败
+class Upload {
+  constructor(config) {
+    this.file = config.file;
+    this.state = 0;
+    this.cancelToken = axios.CancelToken.source();
+    this.uploadProgressFn = config.uploadProgressFn
+      ? config.uploadProgressFn
+      : () => {};
+  }
+
+  async start() {
+    return new Promise(async (resolve, reject) => {
+      let uploadEdUrl = await uploadRequest(
+        this.file,
+        this.uploadProgressFn,
+        this.cancelToken
+      ).catch((error) => {
+        this.state = 2;
+        reject(error);
+        return;
+      });
+      this.state = 1;
+      console.log(uploadEdUrl);
+      resolve(uploadEdUrl);
+    });
+  }
+  cancel() {
+    this.cancelToken.cancel("取消接口");
+  }
+}
+
+export default Upload;

package/packages/utils/uploadRequest.js

@@ -0,0 +1,66 @@
+import axios from "axios";
+import { GetToken } from "../utils/utils.js";
+
+const ossInstance = (params, uploadProgressFn) => {
+  // 创建 axios 实例
+  const instance = axios.create({
+    // API 请求的默认前缀
+    baseURL: process.env.VUE_APP_UPLOAD_URL,
+  });
+
+  // 异常拦截处理器
+  const errorHandler = (error) => {
+    return Promise.reject(error);
+  };
+
+  // 响应异常拦截处理器
+  const resErrorHandler = (error) => {
+    // Message.error(`网络超时，请稍后重试`);
+    // return errorHandler(error);
+  };
+
+  // request 拦截器
+  instance.interceptors.request.use((config) => {
+    config.headers["Content-Type"] = "multipart/form-data";
+    config.Authorization = GetToken("token");
+    config.onUploadProgress = (progressEvent) => {
+      if (uploadProgressFn) {
+        const percent = (progressEvent.loaded / progressEvent.total) * 100 || 0;
+        uploadProgressFn(percent);
+      }
+    };
+    return config;
+  }, errorHandler);
+
+  // response 拦截器
+  instance.interceptors.response.use(async (response) => {
+    return response;
+  }, resErrorHandler);
+
+  return instance(params);
+};
+
+export default (file, uploadProgressFn, sourceToken) => {
+  return new Promise((resolve, reject) => {
+    const params = new FormData();
+    params.append("file", file);
+    ossInstance(
+      {
+        url: "/",
+        data: params,
+        method: "post",
+        cancelToken: sourceToken.token,
+      },
+      uploadProgressFn
+    )
+      .then((res) => {
+        const result = res.data;
+        if (result.code == 200) {
+          resolve(result.data);
+        }
+      })
+      .catch((error) => {
+        reject();
+      });
+  });
+};