meixioacomponent 0.1.0

package/packages/components/base/baseLineInfoItem/baseLineInfoItem.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="base-line-info-item">
+    <div class="infor-label" :style="{ width: _labelWidth + 'px' }">
+      <base-icon
+        v-if="icon"
+        :name="icon"
+        :color="`s`"
+        :size="`l`"
+        :event="event"
+        @iconClick="iconClick"
+        style="margin-right: var(--margin-5)"
+      ></base-icon>
+      <span>{{ label }}</span>
+    </div>
+    <div
+      class="infor-value"
+      :style="{ width: `calc(100% - ${_labelWidth}px)` }"
+    >
+      <el-tooltip
+        effect="dark"
+        placement="top"
+        v-if="!useSlot"
+        :content="`${value}`"
+        :visible-arrow="false"
+      >
+        <span
+          :style="{
+            textAlign: valueAlign,
+          }"
+        >
+          {{ value }}</span
+        >
+      </el-tooltip>
+
+      <div
+        v-else
+        class="line-infor-slot-wrap"
+        :style="{
+          justifyContent: slotAlignStyle,
+        }"
+      >
+        <slot name="lineInforSlot"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseLineInfoItem",
+  data() {
+    return {
+      isChildren: false,
+    };
+  },
+  created() {
+    if (this.$parent.$options.name == "baseLineInfoGroup") {
+      this.isChildren = true;
+    }
+  },
+  props: {
+    event: {
+      type: Boolean,
+      default: false,
+    },
+    useSlot: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      require: true,
+    },
+    icon: {
+      type: [String, Boolean],
+      default: false,
+    },
+    value: {
+      require: true,
+    },
+    valueAlign: {
+      type: String,
+      default: "left",
+    },
+    labelWidth: {
+      type: Number,
+    },
+  },
+  computed: {
+    _labelWidth() {
+      let width = null;
+      if (this.isChildren) {
+        width = this.$parent.labelWidth;
+      } else {
+        width = this.$props.labelWidth;
+      }
+      return width;
+    },
+
+    slotAlignStyle() {
+      let value = "";
+      let align = this.$props.valueAlign;
+      switch (align) {
+        case "left":
+          value = `flex-start`;
+          break;
+        case "center":
+          value = `center`;
+          break;
+        case "right":
+          value = "flex-end";
+          break;
+
+        default:
+          break;
+      }
+      return value;
+    },
+  },
+  methods: {
+    iconClick() {
+      if (this.isChildren) {
+        this.$emit("infoclickicon");
+      } else {
+        this.$emit("infoclickicon", this.$props);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-line-info-item {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  .infor-label {
+    display: flex;
+    align-items: center;
+    span {
+      color: var(--font-color-s);
+      font-size: var(--font-size-base);
+    }
+  }
+  .infor-value {
+    box-sizing: border-box;
+    padding: var(--padding-5) calc(var(--padding-5) * 1.5);
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-base);
+      font-weight: var(--font-weight-g);
+    }
+  }
+  .infor-label,
+  .infor-value {
+    span {
+      width: 100%;
+      cursor: default;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+      text-overflow: ellipsis;
+    }
+    .line-infor-slot-wrap {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+  }
+}
+</style>

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

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

package/packages/components/base/basePageHeader/basePageHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="router-page-header-wrap">
+    <div class="header-wrap-left">
+      <span class="header-text">{{ headerText }}</span>
+      <slot name="prefix"></slot>
+    </div>
+    <slot class="header-wrap-right" name="header-wrap-right"> </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basePageHeader",
+  data() {
+    return {};
+  },
+  props: {
+    headerText: {
+      type: String,
+      require: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.router-page-header-wrap {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  .header-wrap-left,
+  .header-wrap-right {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+  }
+  .header-wrap-left {
+    max-width: 60%;
+    justify-content: flex-start;
+    .header-text {
+      color: var(--font-color-d);
+      margin-right: var(--margin-4);
+      font-size: var(--font-size-xl);
+      font-weight: var(--font-weight-kg);
+    }
+  }
+  .header-wrap-right {
+    max-width: 40%;
+    justify-content: flex-end;
+  }
+}
+</style>

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

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

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

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

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="page-wrap">
+    <el-pagination
+      :small="small"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :total="pageProps[`${config.total}`]"
+      :page-size="pageProps[`${config.size}`]"
+      :current-page.sync="pageProps[`${config.page}`]"
+      background
+      ref="pagination"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basePagination",
+  data() {
+    return {};
+  },
+  props: {
+    pageProps: {
+      type: Object,
+    },
+    pageSizes: {
+      type: Array,
+      default: () => ["15", "30", "60", "100"],
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    config: {
+      type: Object,
+    },
+  },
+  computed: {
+    layout() {
+      if (this.$props.small) {
+        return "prev, pager, next";
+      } else {
+        return "prev, pager,next, sizes,total, jumper";
+      }
+    },
+  },
+  methods: {
+    handleSizeChange(e) {
+      console.log("handleSizeChange");
+      this.$props.pageProps[`${this.$props.config.size}`] = e;
+      this.$emit("sizeChange");
+    },
+    handleCurrentChange(e) {
+      console.log(e);
+      console.log(this.$props.pageProps);
+      console.log("handleCurrentChange");
+      this.$emit("currentChange");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-wrap {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
+</style>

package/packages/components/base/basePlainTable/basePlainTable.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="table-wrap">
+    <el-table ref="elTable" :data="tableData">
+      <!-- 表格暂无数据 -->
+      <template slot="empty">
+        <baseDefaultSvgVue
+          :width="280"
+          :height="280"
+          :svgName="`no-data`"
+          :text="`暂无表格数据`"
+          v-if="tableData.length <= 0"
+        ></baseDefaultSvgVue>
+        <span></span>
+      </template>
+      <el-table-column
+        :key="index"
+        :align="`left`"
+        :prop="item.value"
+        :label="item.label"
+        :width="item.width"
+        v-for="(item, index) in tableConfig"
+      >
+        <template slot="header" slot-scope="scope">
+          <span class="plain-table-header-text">
+            {{ scope.column.label }}
+          </span>
+        </template>
+
+        <template slot-scope="scope">
+          <slot :name="item.value" :scope="scope.row" v-if="item.template">
+          </slot>
+
+          <span v-else class="cell-content-text">{{
+            scope.row[`${item.value}`]
+          }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import baseDefaultSvgVue from "../baseDefaultSvg/baseDefaultSvg.vue";
+export default {
+  name: "basePlainTable",
+  data() {
+    return {};
+  },
+  components: {
+    baseDefaultSvgVue,
+  },
+  props: {
+    tableData: {
+      type: Array,
+      require: true,
+      default: () => [],
+    },
+    tableConfig: {
+      type: Array,
+      require: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-wrap {
+  overflow: hidden;
+  border-top: 0px;
+  border-bottom: 0px;
+  border-radius: calc(var(--radius) * 2);
+  border: 1px solid var(--color-table-border);
+}
+.plain-table-header-text {
+  color: var(--font-color-d);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-kg);
+}
+/deep/ .el-table__header-wrapper {
+  background: var(--color-gray-d) !important;
+}
+/deep/ thead {
+  tr {
+    th {
+      background: var(--color-gray-d) !important;
+    }
+  }
+  //   background: var(--color-gray-d);
+}
+</style>

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

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

package/packages/components/base/baseSection/baseSection.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="section-wrap">
+    <div
+      class="section-header"
+      ref="sectionHeader"
+      :style="{
+        cursor: event && !disable ? 'pointer' : 'default',
+      }"
+    >
+      <div class="header-left">
+        <slot name="header-prefix"></slot>
+        <span class="header-text">{{ headerText }}</span>
+      </div>
+      <slot class="header-right" name="section-header-right"></slot>
+    </div>
+    <div class="section-content" v-show="module">
+      <slot name="sectionContent"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseSection",
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  beforeDestroy() {
+    if (this.$props.event) {
+      this.$refs.sectionHeader.removeEventListener("click", this.handleOpen);
+    }
+  },
+  props: {
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+    headerText: {
+      type: String,
+      require: true,
+    },
+    value: {
+      type: Boolean,
+      require: true,
+    },
+
+    event: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+  methods: {
+    init() {
+      if (!this.$props.event) return;
+      this.$refs.sectionHeader.addEventListener("click", this.handleOpen);
+    },
+    handleOpen() {
+      if (this.$props.disable) return;
+      this.module = !this.module;
+      this.$emit("visibleContent", this.module);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.section-wrap {
+  width: 100%;
+  height: auto;
+
+  .section-header {
+    width: 100%;
+    display: flex;
+    height: auto;
+    align-items: center;
+    flex-flow: row nowrap;
+    padding: var(--padding-2) var(--padding-4);
+    background: var(--hover-gray);
+    justify-content: space-between;
+    border-radius: calc(var(--radius) * 2);
+    .header-left {
+      max-width: 60%;
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+    }
+    .header-right {
+      max-width: 40%;
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+    }
+  }
+  .header-text {
+    color: var(--font-color-d);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-kg);
+  }
+  .section-content {
+    padding: calc(var(--padding-4) * 2) 0px;
+  }
+}
+</style>

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

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

package/packages/components/base/baseSkeleton/baseSkeleton.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="base-skeleton-wrap" :class="[shape]">
+    <div
+      class="base-skeleton-item-wrap"
+      v-if="shape == 'square' || shape == 'cir'"
+    >
+      <div class="base-skeleton-item"></div>
+    </div>
+    <div class="base-skeleton-item-wrap" v-else-if="shape == 'rect'">
+      <div
+        :key="index"
+        class="base-skeleton-item"
+        :class="{ isSingle: isSingle }"
+        :style="{
+          width: isSingle ? `100%` : `${setItemWidth(item)}%`,
+          height: `100%`,
+        }"
+        v-for="(item, index) in lines"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseSkeleton",
+  data() {
+    return {};
+  },
+  props: {
+    //  square  rect cir
+    shape: { type: String, default: "square" },
+    lines: {
+      type: Array,
+      default: () => [1],
+    },
+  },
+  computed: {
+    isSingle() {
+      let lines = this.$props.lines;
+      return lines.length == 1 && lines[0] == 1;
+    },
+  },
+  methods: {
+    setItemWidth(process) {
+      if (process > 10) {
+        process = 10;
+      }
+      return 10 * process;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-skeleton-wrap {
+  background: transparent;
+  border-radius: calc(var(--radius) * 2);
+
+  .base-skeleton-item-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    border-radius: inherit;
+    align-items: flex-start;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    @keyframes skeleton--gradient {
+      0% {
+        transform: translate(-100%) skew(-15deg);
+      }
+      to {
+        transform: translate(100%) skew(-15deg);
+      }
+    }
+  }
+  .base-skeleton-item {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    background: var(--color-gray-s);
+    &::after {
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height: 100%;
+      content: " ";
+      position: absolute;
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0),
+        rgba(0, 0, 0, 0.04),
+        rgba(255, 255, 255, 0)
+      );
+      animation: skeleton--gradient 1.5s linear 2s infinite;
+    }
+  }
+}
+
+.cir,
+.square {
+  .base-skeleton-item {
+    height: 100% !important;
+  }
+}
+.cir {
+  overflow: hidden;
+  border-radius: 50% !important;
+}
+
+.square {
+  width: 80px;
+  height: 80px;
+}
+.rect,
+.cir {
+  width: 100%;
+  height: 100%;
+}
+
+.rect {
+  .base-skeleton-item-wrap {
+    display: flex;
+    box-sizing: border-box;
+    align-items: flex-start;
+    flex-flow: column nowrap;
+    padding: var(--padding-5);
+    justify-content: space-between;
+  }
+  .base-skeleton-item {
+    max-height: 24px;
+    margin-bottom: 8px;
+    background: var(--color-gray-s);
+    border-radius: calc(var(--radius) * 2);
+
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+  }
+  .isSingle {
+    height: 100% !important;
+    max-height: 100% !important;
+  }
+}
+</style>

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

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

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

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