meixioacomponent 0.1.0

package/packages/components/base/upload/uploadItem.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="item-wrap" :class="[type]">
+    <div class="item-type">
+      <svg-icon class="svg" :icon-class="`${svgKey}`"></svg-icon>
+    </div>
+    <div class="item-content">
+      <div class="item-info">
+        <span class="item-name">{{ fileName }}</span>
+        <span class="item-size">({{ fileSize }})</span>
+      </div>
+      <div class="item-process-wrap" v-if="type == 'upload'">
+        <div class="item-process-bar" :style="barStyle"></div>
+      </div>
+    </div>
+    <div class="item-status">
+      <base-icon
+        :size="`l`"
+        :active="true"
+        v-if="zhengqueShow"
+        :name="`icon-zhengque`"
+      ></base-icon>
+      <base-icon
+        :size="`l`"
+        :event="true"
+        :name="`icon-lajixiang`"
+        v-if="type == 'appendix'"
+        @iconClick="deleteAppendixItem"
+      ></base-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  fileSuffix,
+  filterFileSize,
+  jugeFileTypeKey,
+} from "../../../utils/utils";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    item: {
+      type: Object,
+      require: true,
+    },
+
+    type: {
+      type: String,
+      default: "upload",
+    },
+  },
+  computed: {
+    zhengqueShow() {
+      return this.process == 100 && this.$props.type == "upload";
+    },
+    fileName() {
+      return this.item.file.name;
+    },
+    svgKey() {
+      return jugeFileTypeKey(fileSuffix(this.fileName));
+    },
+    process() {
+      return this.$props.item.process;
+    },
+    fileSize() {
+      return filterFileSize(this.$props.item.file.size);
+    },
+    barStyle() {
+      return {
+        width: `${this.process}%`,
+      };
+    },
+  },
+  methods: {
+    deleteAppendixItem() {
+      this.$emit("deleteAppendixItem");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.item-wrap {
+  width: 100%;
+  height: 43px;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  margin: var(--margin-4) 0px;
+  border-radius: calc(var(--radius) * 2);
+  .item-type,
+  .item-status {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: row nowrap;
+  }
+  .item-content {
+    width: auto;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    justify-content: center;
+    .item-info {
+      width: 100%;
+      height: auto;
+      //   margin-bottom: var(--margin-2);
+      .item-name,
+      .item-size {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+      }
+      .item-name {
+        width: auto;
+        color: var(--font-color-m);
+        font-size: var(--font-size-base);
+      }
+      .item-size {
+        width: auto;
+        color: var(--font-color-s);
+        font-size: var(--font-size-base);
+      }
+    }
+    .item-process-wrap {
+      width: 100%;
+      height: 4px;
+      position: relative;
+      background: var(--color-gray-m);
+      .item-process-bar {
+        height: 100%;
+        transition: all 0.3s ease;
+        background: var(--color-primary);
+      }
+    }
+  }
+}
+.upload {
+  background: var(--color-gray-m);
+  .item-content {
+    width: calc(100% - 80px) !important;
+    .item-name {
+      max-width: 80%;
+    }
+    .item-size {
+      max-width: 20%;
+    }
+  }
+}
+</style>

package/packages/components/dynamicmount/DynamicMount.js

@@ -0,0 +1,55 @@
+import Vue from "vue";
+class DynamicMount {
+  constructor(dynamicMount) {
+    this.constructor = dynamicMount;
+    this.domComponent = null;
+    this.refComponent = null;
+    this.mountdCb = null;
+    this.destroyCb = null;
+  }
+
+  init() {
+    this.domComponent = Vue.prototype.$dynmaicMount({
+      mountedDom: this.constructor.mountedDom,
+      vueComponent: this.constructor.vueComponent,
+      componentProps: this.constructor.componentProps,
+    });
+    this.refComponent = this.domComponent.componentMounted;
+    this.refComponent.$on("hook:destroyed", () => {
+      this.destroy();
+    });
+    this.refComponent.$on("hook:mounted", () => {
+      this.mounted();
+    });
+
+  }
+
+  getComponent() {
+    return this.refComponent;
+  }
+  on(type, cb) {
+    switch (type) {
+      case "mounted":
+        this.mountdCb = cb;
+        break;
+      case "destroyed":
+        this.destroyCb = cb;
+        break;
+      default:
+        break;
+    }
+  }
+
+  mounted() {
+    if (this.mountdCb) {
+      this.mountdCb(this.refComponent);
+    }
+  }
+  destroy() {
+    if (this.destroyCb) {
+      this.destroyCb(this.refComponent);
+    }
+  }
+}
+
+export default DynamicMount;

package/packages/components/dynamicmount/dynamicMount.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="dynamicMount" class="dynamic-mount-wrap"></div>
+</template>
+
+<script>
+import Vue from "vue";
+import store from "../../store";
+import router from "../../router";
+export default {
+  name: "dynamicMount",
+  data() {
+    return {
+      id: null,
+      //该组件被挂载的那个dom上
+      mountedDom: null,
+      //实例化组件被挂载之后
+      componentMounted: null,
+      //需要被挂载的组件
+      vueComponent: null,
+      //传递给被挂载的组件的props值
+      componentProps: null,
+    };
+  },
+  mounted() {
+    console.log("dyMounted");
+    this.$nextTick(() => {
+      console.log(this.componentMounted);
+    });
+  },
+
+  computed: {},
+
+  methods: {
+    init() {
+      // 初始化并且赋予需要挂载的组件props值
+      let props = this.vueComponent.props;
+
+      if (props) {
+        if (typeof props == "Array") {
+          for (const key in this.componentProps) {
+            this.vueComponent.props.push(`${key}`);
+          }
+        } else {
+          for (const key in this.componentProps) {
+            if (!props.hasOwnProperty(`${key}`)) {
+              Vue.set(props, `${key}`, null);
+            }
+          }
+        }
+      }
+
+      const components = Vue.extend(this.vueComponent);
+      this.componentMounted = new components({
+        propsData: {
+          ...this.componentProps,
+        },
+        store: store,
+        parent: this,
+        router: router,
+      });
+      this.registerListen();
+      this.$children.push(this.componentMounted);
+      this.$nextTick(() => {
+        this.componentMounted.$mount();
+        this.$refs.dynamicMount.appendChild(this.componentMounted.$el);
+      });
+    },
+    registerListen() {
+      this.componentMounted.$on("hook:mounted", () => {});
+      this.componentMounted.$on("hook:destroyed", () => {
+        this.mountedDom = null;
+        console.log("destroyed");
+        this.close();
+      });
+    },
+
+    close() {
+      this.$destroy();
+      if (this.mountedDom) {
+        this.mountedDom.$destroy();
+      }
+      let dom = document.getElementById(`dynamic-${this.id}`);
+      if (dom) {
+        dom.remove();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dynamic-mount-wrap {
+  animation: to-visible 0.7s forwards ease-in-out;
+}
+</style>

package/packages/components/dynamicmount/index.js

@@ -0,0 +1,46 @@
+import Vue from "vue";
+import store from "../../store/index";
+import dynamicMountComponent from "./dynamicMount.vue";
+const ComponentInsertConstructor = Vue.extend(dynamicMountComponent);
+
+//使用方法
+// this.$dynmaicMount({
+//     mountedDom: "",
+//     vueComponent: "",
+//     componentProps: "",
+//   });
+
+const Insert = (options) => {
+  store.commit("component/SET_DYNAMICID");
+  let id = store.getters.dynamicId;
+  const componentInsertConstructor = new ComponentInsertConstructor();
+  componentInsertConstructor.vm = componentInsertConstructor.$mount();
+  componentInsertConstructor.dom = componentInsertConstructor.vm.$el;
+  componentInsertConstructor.mountedDom = options.mountedDom;
+  componentInsertConstructor.vm.id = id;
+  componentInsertConstructor.vm.vueComponent = options.vueComponent;
+  componentInsertConstructor.componentProps = options.componentProps;
+  componentInsertConstructor.vm.init();
+  let ele = document.createElement("div");
+  ele.setAttribute("id", `dynamic-${id}`);
+  if (options.mountedDom) {
+    ele.style.height = "100%";
+    componentInsertConstructor.vm.$el.style.height = "100%";
+  } else {
+    ele.style.position = `fixed`;
+    ele.style.zIndex = 9999;
+  }
+  ele.appendChild(componentInsertConstructor.dom);
+  if (options.mountedDom) {
+    options.mountedDom.appendChild(ele);
+  } else {
+    document.body.appendChild(ele);
+  }
+  return componentInsertConstructor.vm;
+};
+
+export default {
+  install(Vue, options = {}) {
+    Vue.prototype.$dynmaicMount = Insert;
+  },
+};

package/packages/components/index.js

@@ -0,0 +1,114 @@
+import baseAnchor from "./base/baseAnchor";
+import baseAppendix from "./base/baseAppendix";
+import baseArea from "./base/baseArea";
+import baseAvatar from "./base/baseAvatar";
+import baseButtonHandle from "./base/baseButtonHandle";
+import baseDefaultSvg from "./base/baseDefaultSvg";
+import baseDialog from "./base/baseDialog";
+import baseDialogTable from "./base/baseDialogTable";
+import baseDrawer from "./base/baseDrawer";
+import baseEdito from "./base/baseEdito";
+import baseFixedHeader from "./base/baseFixedHeader";
+import baseIcon from "./base/baseIcon";
+import baseImageViewer from "./base/baseImageViewer";
+import baseImg from "./base/baseImg";
+import baseInforWrap from "./base/baseInforWrap";
+import baseLineInfoGroup from "./base/baseLineInfoGroup";
+import baseLineInfoItem from "./base/baseLineInfoItem";
+import basePageHeader from "./base/basePageHeader";
+import basePagination from "./base/basePagination";
+import basePlainTable from "./base/basePlainTable";
+import baseSection from "./base/baseSection";
+import baseSkeleton from "./base/baseSkeleton";
+import baseSvg from "./base/baseSvg";
+import baseTimeTypeSelect from "./base/baseTimeTypeSelect";
+import baseToggle from "./base/baseToggle";
+import baseUploadItem from "./base/baseUpload/baseUploadItem";
+import baseUpload from "./base/baseUpload/baseUpload";
+import upload from "./base/upload";
+import baseDialogForm from "./proForm/dialogForm/dialogFormIndex";
+import baseForm from "./proForm/proForm/index";
+import baseFormWrap from "./proForm/proFormWrap/index";
+import baseProTable from "./proPageTable/index";
+
+const meixicomponents = [
+  baseAnchor,
+  baseAppendix,
+  baseArea,
+  baseAvatar,
+  baseButtonHandle,
+  baseDefaultSvg,
+  baseDialog,
+  baseDialogTable,
+  baseDrawer,
+  baseEdito,
+  baseFixedHeader,
+  baseIcon,
+  baseImageViewer,
+  baseImg,
+  baseInforWrap,
+  baseLineInfoGroup,
+  baseLineInfoItem,
+  basePageHeader,
+  basePagination,
+  basePlainTable,
+  baseSection,
+  baseSkeleton,
+  baseSvg,
+  baseTimeTypeSelect,
+  baseToggle,
+  baseUploadItem,
+  baseUpload,
+  upload,
+  baseDialogForm,
+  baseForm,
+  baseFormWrap,
+  baseProTable,
+];
+
+const install = (Vue) => {
+  meixicomponents.forEach((component) => {
+    Vue.component(component.name, component);
+  });
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  install,
+  meixicomponents,
+  baseAnchor,
+  baseAppendix,
+  baseArea,
+  baseAvatar,
+  baseButtonHandle,
+  baseDefaultSvg,
+  baseDialog,
+  baseDialogTable,
+  baseDrawer,
+  baseEdito,
+  baseFixedHeader,
+  baseIcon,
+  baseImageViewer,
+  baseImg,
+  baseInforWrap,
+  baseLineInfoGroup,
+  baseLineInfoItem,
+  basePageHeader,
+  basePagination,
+  basePlainTable,
+  baseSection,
+  baseSkeleton,
+  baseSvg,
+  baseTimeTypeSelect,
+  baseToggle,
+  baseUploadItem,
+  baseUpload,
+  upload,
+  baseDialogForm,
+  baseForm,
+  baseFormWrap,
+  baseProTable,
+};

package/packages/components/proForm/dialogForm/baseDialogForm.vue

@@ -0,0 +1,163 @@
+<template>
+  <base-dialog
+    :title="title"
+    ref="dialog"
+    :width="`1000px`"
+    :isDestroy="true"
+    :contentHeight="`50vh`"
+  >
+    <div class="dialog-form-content" slot="dialog-content">
+      <div
+        :key="item.key"
+        v-for="item in formArray"
+        class="dialog-form-content-item"
+      >
+        <div class="content-item-header">
+          <span class="header-text">{{ item.formTitle }}</span>
+        </div>
+        <div class="content-item-form">
+          <pro_formVue
+            :form="true"
+            :footer="false"
+            :formConfig="item"
+            :labelWidth="labelWidth"
+            :formList="item.formList"
+            :rules="returnRules(item.key)"
+            :labelPosition="setLabelPosition(item.formType)"
+            :formType="item.formType ? item.formType : 'default'"
+            ref="proFormVue"
+          ></pro_formVue>
+        </div>
+      </div>
+    </div>
+    <baseButtonHandleVue
+      slot="dialog-footer"
+      :config="footerHandleConfig"
+    ></baseButtonHandleVue>
+  </base-dialog>
+</template>
+
+<script>
+import pro_formVue from "../proForm/pro_form.vue";
+import baseButtonHandleVue from "../../base/baseButtonHandle/baseButtonHandle.vue";
+export default {
+  name: "baseDialogForm",
+  data() {
+    return {};
+  },
+  props: {
+    // 弹窗的标题
+    title: {
+      type: String,
+      require: true,
+    },
+    // 需要渲染的数据
+    formArray: {
+      type: Array,
+      require: true,
+    },
+    // 每一个itemlabel的宽度
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+    // 弹框尾部
+    footerHandleConfig: {
+      type: Array,
+      require: true,
+    },
+    // 表单的验证
+    rulesList: {
+      type: Object,
+    },
+  },
+  components: {
+    pro_formVue,
+    baseButtonHandleVue,
+  },
+  methods: {
+    setLabelPosition(type) {
+      if (!type) {
+        return "right";
+      } else if (type == "upload") {
+        return "top";
+      }
+    },
+    returnRules(key) {
+      let rulesList = this.$props.rulesList;
+      if (!rulesList) return null;
+      let listItem = rulesList[`${key}`] ? rulesList[`${key}`] : null;
+      if (listItem) {
+        return listItem;
+      }
+      return null;
+    },
+    showDialog() {
+      this.$refs.dialog.showDialog();
+    },
+    closeDialog() {
+      this.$refs.dialog.closeDialog();
+    },
+
+    getFormValue() {
+      let obj = {};
+      for (let i = 0; i < this.formArray.length; i++) {
+        let result = this.$refs.proFormVue[i].returnFormValue();
+        obj[`${this.formArray[i].key}`] = result;
+      }
+      return obj;
+    },
+    async checkValidate() {
+      let refs = this.$refs.proFormVue;
+      let result = true;
+      for (let i = 0; i < refs.length; i++) {
+        result = await refs[i].checkValidate();
+        console.log(result);
+        if (!result) {
+          return result;
+        }
+      }
+      return result;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-form-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  .dialog-form-content-item {
+    width: 100%;
+    height: auto;
+    .content-item-header {
+      width: 100%;
+      height: auto;
+      display: flex;
+      position: relative;
+      align-items: center;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      margin-bottom: var(--margin-4);
+      &::before {
+        content: "";
+        top: 0px;
+        width: 4px;
+        height: 100%;
+        left: var(--margin-2);
+        position: absolute;
+        display: inline-block;
+        background: var(--color-primary);
+        border-radius: calc(var(--radius) * 2);
+      }
+      .header-text {
+        color: var(--font-color-d);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-kg);
+        margin-left: calc(var(--margin-5) * 2);
+      }
+    }
+  }
+}
+</style>

package/packages/components/proForm/dialogForm/dialogFormIndex.js

@@ -0,0 +1,6 @@
+import baseDialogForm from "./baseDialogForm.vue";
+
+baseDialogForm.install = function (Vue) {
+  Vue.component(baseDialogForm.name, baseDialogForm);
+};
+export default baseDialogForm;

package/packages/components/proForm/proForm/index.js

@@ -0,0 +1,6 @@
+import baseForm from "./pro_form.vue";
+
+baseForm.install = function (Vue) {
+  Vue.component(baseForm.name, baseForm);
+};
+export default baseForm;