meixioacomponent 0.1.0

package/packages/components/base/baseButtonHandle/index.js

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

package/packages/components/base/baseDefaultSvg/baseDefaultSvg.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="base-default-svg-wrap">
+    <base-svg
+      class="svg"
+      :icon-class="svgName"
+      :style="{ width: width, height: height }"
+    ></base-svg>
+
+    <span class="default-page-text">{{ text }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseDefaultSvg",
+  data() {
+    return {};
+  },
+
+  props: {
+    text: {
+      type: String,
+      require: true,
+    },
+    svgName: {
+      type: String,
+      require: true,
+    },
+    width: {
+      type: Number,
+    },
+    height: { type: Number },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-default-svg-wrap {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  .default-page-text {
+    text-align: center;
+    color: var(--font-color-s);
+    margin-top: var(--margin-5);
+    font-size: var(--font-size-base);
+  }
+}
+</style>

package/packages/components/base/baseDefaultSvg/index.js

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

package/packages/components/base/baseDialog/index.js

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

package/packages/components/base/baseDialog/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="dialog-wrap" v-if="isShow">
+    <el-dialog
+      :top="top"
+      ref="dialog"
+      :modal="modal"
+      :width="width"
+      :show-close="false"
+      :before-close="beforeClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :append-to-body="appendToBody"
+      :destroy-on-close="isDestroy"
+      :visible.sync="centerDialogVisible"
+      :modal-append-to-body="appendToBody"
+    >
+      <div class="dialog-title-wrap" slot="title">
+        <span>{{ title }}</span>
+        <base-icon
+          :size="`d`"
+          :color="`d`"
+          :event="true"
+          :name="`icon-close`"
+          @iconClick="iconClick"
+        ></base-icon>
+      </div>
+      <div class="dialog-content-wrap" :style="dialogContentStyle">
+        <slot name="dialog-content"></slot>
+      </div>
+      <slot class="dialog-footer-wrap" slot="footer" name="dialog-footer">
+      </slot>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseDialog",
+  data() {
+    return {
+      isShow: true,
+      centerDialogVisible: false,
+    };
+  },
+
+  props: {
+    //   标题栏文字
+    title: {
+      type: String,
+      default: "对话框标题文字",
+    },
+    //   对话框的宽度
+    width: {
+      type: [String, Number],
+    },
+    // 距离上部的距离
+    top: {
+      type: String,
+    },
+    //  是否开启遮罩层
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否关闭后销毁dom
+    isDestroy: {
+      type: Boolean,
+      default: false,
+    },
+    // 关闭前的回调方法
+    beforeClose: {
+      type: Function,
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+
+    contentHeight: {
+      tpye: String,
+      default: `50vh`,
+    },
+  },
+
+  computed: {
+    dialogContentStyle() {
+      return {
+        height: this.$props.contentHeight,
+      };
+    },
+  },
+  methods: {
+    showDialog(cb) {
+      console.log(this.$refs.dialog);
+      this.centerDialogVisible = true;
+      console.log(this.$refs.dialog);
+      if (cb) {
+        cb();
+      }
+    },
+    closeDialog() {
+      if (this.$props.isDestroy) {
+        this.isShow = false;
+        console.log(this.isShow);
+        // this.$destroy();
+        this.$nextTick(() => {
+          this.$destroy();
+        });
+      } else {
+        this.centerDialogVisible = false;
+      }
+    },
+    iconClick() {
+      this.closeDialog();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-wrap {
+  width: 100%;
+  height: auto;
+
+  .dialog-content-wrap {
+    width: 100%;
+    height: auto;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+}
+.dialog-title-wrap {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  span {
+    color: var(--font-color-d);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-g);
+  }
+}
+</style>

package/packages/components/base/baseDialogTable/dialogTable.vue

@@ -0,0 +1,186 @@
+<template>
+  <base-dialog
+    :title="title"
+    ref="dialog"
+    :width="`1000px`"
+    :isDestroy="isDestroy"
+    :contentHeight="contentHeight"
+    @hook:destroyed="dialogDestroy"
+  >
+    <div class="dialog-form-content" slot="dialog-content">
+      <oa_pro_tableVue
+        ref="table"
+        :align="`left`"
+        v-model="keyWords"
+        :height="dialogHeight"
+        :pageProps="pageProps"
+        :pageConfig="pageConfig"
+        :httpRequire="httpRequire"
+        :tableConfig="tableConfig"
+        :totalPropsList="totalPropsList"
+        :proScreenConfig="proScreenConfig"
+        :tableCheckboxConfig="tableCheckboxConfig"
+        :proScreenModel="false"
+      >
+        <template
+          v-for="(item, index) in templateList"
+          v-slot:[templateList[index]]="data"
+        >
+          <slot :name="templateList[index]" :scope="data.scope"></slot>
+        </template>
+      </oa_pro_tableVue>
+    </div>
+    <baseButtonHandle
+      slot="dialog-footer"
+      :config="footerHandleConfig"
+    ></baseButtonHandle>
+  </base-dialog>
+</template>
+
+<script>
+import baseButtonHandle from "../baseButtonHandle/baseButtonHandle.vue";
+import oa_pro_tableVue from "../../proPageTable/oa_pro_table.vue";
+//
+export default {
+  name: "baseDialogTable",
+  data() {
+    return {
+      keyWords: "",
+      templateList: [],
+      dialogHeight: null,
+      footerHandleConfig: [],
+    };
+  },
+  created() {
+    this.footerHandleConfig = [
+      {
+        text: "取消",
+        type: "info",
+        plain: true,
+        click: () => {
+          this.closeDialog();
+        },
+      },
+      {
+        text: "确定",
+        type: "primary",
+        plain: false,
+        click: async () => {
+          this.returnCheckValue();
+        },
+      },
+    ];
+    this.setContentHeight();
+    this.$props.tableConfig.forEach((item) => {
+      if (item.template) {
+        this.templateList.push(item.value);
+      }
+    });
+  },
+  mounted() {},
+  beforeDestroy() {},
+
+  props: {
+    contentHeight: {
+      type: String,
+      default: "50vh",
+    },
+    // 点击取消是否销毁组件
+    isDestroy: {
+      type: Boolean,
+      default: false,
+    },
+    // 弹框标题
+    title: {
+      type: String,
+      require: true,
+    },
+    // 表格配置项
+    tableConfig: {
+      type: Array,
+    },
+    // 分页属性
+    pageProps: {
+      type: Object,
+      require: true,
+    },
+    // 分页配置
+    pageConfig: {
+      type: Object,
+      require: true,
+    },
+    totalPropsList: {
+      type: Array,
+      require: false,
+    },
+    // 高级筛选的配置
+    proScreenConfig: {
+      type: Array,
+      require: true,
+    },
+    // 网络请求获取表格数据的方法
+    httpRequire: {
+      type: Function,
+      require: true,
+    },
+    // 表格选择框的配置
+    tableCheckboxConfig: {
+      type: Object,
+      default: () => {
+        return {
+          value: [],
+          type: "single",
+        };
+      },
+    },
+  },
+
+  components: {
+    oa_pro_tableVue,
+    baseButtonHandle,
+  },
+  methods: {
+    setContentHeight() {
+      let height = null;
+      let contentHeight = this.$props.contentHeight;
+      let index = contentHeight.indexOf("vh");
+      if (index != -1) {
+        let number = parseInt(contentHeight.substring(0, index)) / 100;
+        let screenHeight = window.screen.availHeight;
+        height = screenHeight * number;
+      } else if (typeof contentHeight == "string") {
+        let pxIndex = contentHeight.indexOf("px");
+        let number = parseInt(contentHeight.substring(0, pxIndex));
+        height = number;
+      } else {
+        height = contentHeight;
+      }
+      this.dialogHeight = height - 58;
+    },
+    dialogDestroy() {
+      this.$nextTick(() => {
+        if (this.$parent) {
+          if (this.$parent.$options.name == "dynamicMount") {
+            this.$parent.$destroy();
+          }
+        }
+        this.$destroy();
+      });
+    },
+    showDialog() {
+      this.$refs.dialog.showDialog();
+    },
+    closeDialog() {
+      this.$refs.dialog.closeDialog();
+    },
+
+    returnCheckValue() {
+      let value = this.$refs.table.returnCheckValue();
+      this.$emit("returnCheckValue", value);
+      this.closeDialog();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

package/packages/components/base/baseDialogTable/index.js

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

package/packages/components/base/baseDrawer/index.js

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

package/packages/components/base/baseDrawer/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-drawer
+    ref="drawer"
+    :size="size"
+    :modal="modal"
+    :withHeader="false"
+    :visible.sync="open"
+    :direction="direction"
+    :before-close="beforeClose"
+    :append-to-body="appendToBody"
+    :wrapperClosable="wrapperClosable"
+    :modal-append-to-body="appendToBody"
+  >
+    <!-- 插槽插入你需要渲染的内容 -->
+    <div class="drawer-content-wrap">
+      <el-button
+        type="primary"
+        @click="hiddenDrawer"
+        icon="el-icon-close"
+        :style="closeButtonStyle"
+        class="drawer-close-button"
+      ></el-button>
+      <div class="drawer-content-title" v-if="header">
+        <span>{{ title }}</span>
+        <base-icon
+          :size="`d`"
+          :color="`d`"
+          :event="true"
+          :name="`icon-close`"
+          @iconClick="iconClick"
+        ></base-icon>
+      </div>
+      <div class="drawer-content" :style="contentStyle">
+        <slot name="drawer-content"></slot>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: "baseDrawer",
+  data() {
+    return {
+      open: false,
+      closeButtonStyle: null,
+    };
+  },
+  props: {
+    //   大小
+    size: {
+      type: Number,
+    },
+    //   标题栏
+    title: {
+      type: String,
+      default: "抽屉标题",
+    },
+    // 方向 详情见element文档
+    // rtl/ltr/ttb/btt/
+    direction: {
+      type: String,
+      default: "rtl",
+    },
+    // 是否开启遮罩层
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否点击遮罩层关闭抽屉
+    wrapperClosable: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否开启头部
+    header: {
+      type: Boolean,
+      default: true,
+    },
+    // 关闭前的回调方法
+    // 列子
+    // (done)=>{done()用于关闭抽屉}
+    beforeClose: {
+      type: Function,
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    isExis() {
+      if (this.$refs.drawer) {
+        return true;
+      }
+      return false;
+    },
+    iconClick() {
+      this.hiddenDrawer();
+    },
+    showDrawer(cb) {
+      if (this.isExis()) {
+        this.open = true;
+        if (cb) {
+          this.$nextTick(() => {
+            cb();
+          });
+        }
+      }
+      this.$nextTick(() => {
+        this.setDrawerStyle();
+      });
+    },
+    hiddenDrawer() {
+      if (this.isExis()) {
+        this.$refs.drawer.closeDrawer();
+      }
+    },
+
+    setDrawerStyle() {
+      let el = this.$refs.drawer.$el;
+      if (typeof this.$props.size == "number") {
+        let direction = this.$props.direction;
+        if (direction == "rtl") {
+          el.style.left = "auto";
+        } else if (direction == "ltr") {
+          el.style.right = "auto";
+        }
+        el.style.width = `${this.$props.size}px`;
+        el.style.boxShadow = `0 2px 12px 0 rgb(0 0 0 / 10%)`;
+        this.setButtonStyle();
+      }
+    },
+
+    setButtonStyle() {
+      let direction = this.$props.direction;
+
+      if (direction == "rtl") {
+        this.closeButtonStyle = {
+          left: `calc(100% - 43px - ${this.$props.size}px)`,
+        };
+      } else if (direction == "ltr") {
+        this.closeButtonStyle = {
+          left: `calc(${this.$props.size}px)`,
+        };
+      }
+    },
+  },
+  computed: {
+    contentStyle() {
+      if (this.$props.header) {
+        return { height: `calc(100% - 56px)` };
+      } else {
+        return { height: `calc(100% - var(--margin-4))` };
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.drawer-content-wrap {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: var(--padding-5) calc(var(--padding-5) * 2);
+
+  .drawer-content-title {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-l);
+    }
+  }
+  .drawer-content {
+    width: 100%;
+    overflow-y: auto;
+    position: relative;
+    margin-top: var(--margin-4);
+  }
+}
+.drawer-close-button {
+  top: 100px;
+  width: 40px;
+  display: flex;
+  flex-flow: row;
+  position: fixed;
+  justify-content: center;
+}
+</style>