meixioacomponent 0.1.0

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

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from "../../../utils/utils";
+
+export default {
+  name: "baseSvg",
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      if (this.className) {
+        return "svg-icon " + this.className;
+      } else {
+        return "svg-icon";
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>

package/packages/components/base/baseTimeTypeSelect/base_time_type_select.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="base-time-type-select-wrap">
+    <el-popover
+      ref="popover"
+      trigger="click"
+      placement="bottom"
+      @show="eventShow"
+      @hide="eventHide"
+    >
+      <!-- 内容 -->
+      <template>
+        <div class="time-type-select-content">
+          <div class="content-line-wrap">
+            <div
+              class="content-line"
+              :key="index"
+              v-for="(item, index) in baseTimeTypeConfig"
+            >
+              <div class="type-des">{{ item.text }}</div>
+              <div class="line-item-wrap">
+                <div
+                  class="line-item"
+                  @click="selectLineItem = citem.key"
+                  :class="{
+                    select: selectLineItem
+                      ? selectLineItem == citem.key
+                      : citem.key == module,
+                  }"
+                  :key="cindex"
+                  v-for="(citem, cindex) in item.list"
+                >
+                  <span>{{ citem.text }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="time-type-custom-wrap">
+            <div class="type-des"><span>自定义</span></div>
+            <el-date-picker
+              size="small"
+              type="daterange"
+              v-model="timeModule"
+              range-separator="至"
+              value-format="timestamp"
+              end-placeholder="结束日期"
+              start-placeholder="开始日期"
+              style="width: 100%; margin-top: var(--margin-5)"
+            >
+            </el-date-picker>
+          </div>
+          <baseButtonHandleVue
+            :config="handleConfig"
+            class="button-handle-wrap"
+          ></baseButtonHandleVue>
+        </div>
+      </template>
+      <div
+        :class="{
+          'is-open': isOpen,
+        }"
+        slot="reference"
+        class="time-type-select-input"
+        @click="openSelectWrap"
+      >
+        <el-input
+          size="small"
+          v-model="showModule"
+          :readonly="true"
+          placeholder="请选择时间"
+          :suffix-icon="suffixIcon"
+        >
+        </el-input>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import baseButtonHandle from "../baseButtonHandle/baseButtonHandle.vue";
+//
+import { baseTimeTypeConfig } from "./config";
+import { FilterTime } from "../../../utils/utils";
+export default {
+  name: "baseTimeTypeSelect",
+  data() {
+    return {
+      //  是否打开了选择器
+      isOpen: false,
+      //   内部是否选择了自定义时间
+      timeModule: null,
+      //   内部是否选择了某一个单项
+      selectLineItem: null,
+      //   按钮的配置
+      handleConfig: null,
+    };
+  },
+  created() {
+    this.handleConfig = [
+      {
+        text: "确定",
+        type: "primary",
+        plain: false,
+        click: () => {
+          this.confirm();
+        },
+      },
+    ];
+  },
+  props: {
+    value: {},
+  },
+  components: {
+    baseButtonHandleVue,
+  },
+  computed: {
+    module: {
+      set(val) {
+        console.log(val);
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+    suffixIcon() {
+      if (this.isOpen) {
+        return "el-icon-arrow-up";
+      } else {
+        return "el-icon-arrow-down";
+      }
+    },
+    baseTimeTypeConfig() {
+      return baseTimeTypeConfig;
+    },
+    showModule() {
+      if (this.module) {
+        console.log(typeof this.module);
+        if (typeof this.module == "string") {
+          let text = null;
+          this.baseTimeTypeConfig.forEach((item) => {
+            item.list.forEach((citem) => {
+              if (citem.key == this.module) {
+                text = citem.text;
+              }
+            });
+          });
+
+          return text;
+        } else if (typeof this.module == "object") {
+          let start = FilterTime(
+            parseInt(this.module[0].toFixed(0)),
+            "YYYY-MM-DD"
+          );
+          let end = FilterTime(
+            parseInt(this.module[1].toFixed(0)),
+            "YYYY-MM-DD"
+          );
+          return `${start}-${end}`;
+        }
+      }
+      return null;
+    },
+  },
+  methods: {
+    eventShow() {
+      this.isOpen = true;
+      this.timeModule = null;
+      this.selectLineItem = null;
+    },
+
+    eventHide() {
+      this.isOpen = false;
+    },
+
+    openSelectWrap() {
+      this.isOpen = !this.isOpen;
+    },
+
+    confirm() {
+      let _timeModule = this.timeModule;
+      let _selectLineItem = this.selectLineItem;
+      if (_timeModule) {
+        this.module = _timeModule;
+      }
+      if (_selectLineItem) {
+        this.module = _selectLineItem;
+      }
+      this.$emit("selectConfirm", _timeModule ? _timeModule : _selectLineItem);
+      this.$refs.popover.doClose();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-time-type-select-wrap {
+  width: auto;
+  height: auto;
+  overflow: hidden;
+  border-radius: calc(var(--radius) * 2);
+  .time-type-select-input {
+    background: var(--color-gray-m);
+  }
+  /deep/ .el-input__inner {
+    font-weight: var(--font-weight-kg);
+    border-color: transparent;
+  }
+  .is-open {
+    background: var(--color-primary);
+    /deep/ .el-input__inner {
+      color: white !important;
+    }
+    /deep/ .el-icon-arrow-up {
+      color: white !important;
+    }
+  }
+}
+.time-type-select-content {
+  width: 348px;
+  height: 348px;
+  background: var(--bg-white);
+  .content-line-wrap {
+    box-sizing: border-box;
+    padding: var(--padding-5) 0px;
+    .content-line {
+      width: 100%;
+      height: auto;
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
+      margin-bottom: var(--margin-2);
+      justify-content: space-between;
+      .line-item-wrap {
+        height: auto;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        width: calc(100% - 60px);
+        justify-content: space-between;
+        .line-item {
+          width: 30%;
+          height: 34px;
+          cursor: pointer;
+          line-height: 34px;
+          text-align: center;
+          border-radius: calc(var(--radius) * 2);
+          &:hover {
+            background: var(--color-gray-m);
+          }
+          span {
+            color: var(--font-color-d);
+            font-size: var(--font-size-base);
+          }
+        }
+        .select {
+          background: var(--color-primary);
+          span {
+            color: white;
+          }
+          &:hover {
+            background: var(--color-primary);
+            span {
+              color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .type-des {
+    width: 60px;
+    text-align: center;
+    color: var(--font-color-s);
+    font-size: var(--font-size-s);
+  }
+
+  .time-type-custom-wrap,
+  .button-handle-wrap {
+    height: auto;
+    box-sizing: border-box;
+    padding: calc(var(--padding-5) * 1) 0px;
+    border-top: 2px solid var(--color-border);
+  }
+  .time-type-custom-wrap {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    justify-content: center;
+    height: calc(100% - 260px);
+  }
+}
+</style>

package/packages/components/base/baseTimeTypeSelect/config.js

@@ -0,0 +1,47 @@
+export const baseTimeTypeConfig = [
+  {
+    key: "day",
+    text: "天",
+    list: [
+      { key: "today", text: "今天" },
+      { key: "preay", text: "昨天" },
+      { key: "nextday", text: "明天" },
+    ],
+  },
+  {
+    key: "week",
+    text: "周",
+    list: [
+      { key: "toweek", text: "本周" },
+      { key: "preweek", text: "上周" },
+      { key: "nextweek", text: "下周" },
+    ],
+  },
+  {
+    key: "month",
+    text: "月",
+    list: [
+      { key: "tomonth", text: "本月" },
+      { key: "premonth", text: "上月" },
+      { key: "nextmonth", text: "下月" },
+    ],
+  },
+  {
+    key: "session",
+    text: "季度",
+    list: [
+      { key: "tosession", text: "本季度" },
+      { key: "presession", text: "上季度" },
+      { key: "nextsession", text: "下季度" },
+    ],
+  },
+  {
+    key: "year",
+    text: "年",
+    list: [
+      { key: "toyear", text: "今年" },
+      { key: "preyear", text: "去年" },
+      { key: "nextyear", text: "明年" },
+    ],
+  },
+];

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

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

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

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

package/packages/components/base/baseToggle/toggle.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="toggle-wrap" :class="[size]">
+    <div
+      :key="index"
+      @click="handletoggle(item)"
+      class="toggle-item-wrap"
+      :class="{
+        selected: item.value == module,
+      }"
+      v-for="(item, index) in toggleList"
+    >
+      <base-icon
+        :size="`l`"
+        :color="`s`"
+        :event="true"
+        v-if="item.icon"
+        :name="item.icon"
+        @iconClick="handletoggle(item)"
+      ></base-icon>
+      <span v-else> {{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseToggle",
+  data() {
+    return {};
+  },
+  props: {
+    value: {
+      type: [String, Boolean, Number],
+      require: true,
+    },
+    toggleList: {
+      require: true,
+    },
+    size: {
+      type: String,
+      default: "min",
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+  methods: {
+    handletoggle(item) {
+      this.module = item.value;
+      this.$emit("handletoggle", item);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.toggle-wrap {
+  height: auto;
+  display: inline-block;
+  width: auto !important;
+  padding: var(--padding-2);
+  background: var(--bg-gray);
+  border-radius: calc(var(--radius) * 1);
+  .toggle-item-wrap {
+    cursor: pointer;
+    display: inline-block;
+    border-radius: calc(var(--radius) * 1);
+    span {
+      color: var(--font-color-m);
+      font-size: var(--font-size-s);
+    }
+    &:not(.selected) {
+      &:hover {
+        background: var(--color-gray-d);
+        span {
+          color: var(--font-color-d);
+        }
+      }
+    }
+  }
+  .toggle-item-wrap + .toggle-item-wrap {
+    margin-left: var(--margin-2);
+  }
+  .selected {
+    background: var(--bg-white);
+    box-shadow: 0 3px 5px rgba(13, 20, 36, 0.18), 0 0 1px rgba(13, 20, 36, 0.29);
+  }
+}
+.min {
+  .toggle-item-wrap {
+    line-height: 24px;
+    padding: 0px var(--padding-3);
+  }
+}
+
+.middle {
+  .toggle-item-wrap {
+    line-height: 36px;
+    padding: 0px calc(var(--padding-3) * 2);
+    span {
+      font-size: var(--font-size-base);
+    }
+  }
+}
+
+.big {
+  .toggle-item-wrap {
+    line-height: 48px;
+    padding: 0px calc(var(--padding-3) * 3);
+    span {
+      font-size: var(--font-size-l);
+    }
+  }
+}
+/deep/.base-icon-wrap {
+  width: 24px !important;
+  height: 24px !important;
+  cursor: pointer !important;
+}
+/deep/ .event {
+  color: inherit;
+  background: inherit !important;
+}
+</style>

package/packages/components/base/baseUpload/baseUpload.js

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

package/packages/components/base/baseUpload/baseUpload.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="base-upload-wrap" v-loading="uploadLoading">
+    <div class="base-upload-content">
+      <baseUploadItemVue
+        :key="index"
+        :type="`img`"
+        :uploadItem="item"
+        v-for="(item, index) in module"
+        @handleDeleteUploadItem="handleDeleteUploadItem(index)"
+      ></baseUploadItemVue>
+      <baseUploadItemVue
+        :type="`upload`"
+        v-show="!isMax"
+        ref="itemUpload"
+        :fileType="fileType"
+        :uploadType="`multiple`"
+        @inputChange="inputChange"
+      ></baseUploadItemVue>
+    </div>
+    <div class="base-upload-footer">
+      <span>{{ textNotic }}(最大{{ max }}张)</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseSkeletonVue from "../baseSkeleton/baseSkeleton.vue";
+import baseUploadItemVue from "./baseUploadItem.vue";
+//
+import { baseUploadMixins } from "./mixins";
+export default {
+  name: "baseUpload",
+  data() {
+    return {
+      uploadLoading: false,
+    };
+  },
+  beforeDestroy() {
+    if (this.dynamicmount) {
+      this.uploadEd();
+    }
+  },
+  mixins: [baseUploadMixins],
+  components: {
+    baseSkeletonVue,
+    baseUploadItemVue,
+  },
+  props: {
+    textNotic: {
+      type: String,
+      default: "点击+上传图片",
+    },
+    max: {
+      type: Number,
+      default: 99,
+    },
+    value: {
+      type: Array,
+      require: true,
+    },
+    fileType: {
+      type: String,
+      default: "img",
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+  methods: {
+    handleDeleteUploadItem(index) {
+      this.module.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-upload-wrap {
+  width: 100%;
+  height: auto;
+  .base-upload-content {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  .base-upload-footer {
+    width: 100%;
+    height: auto;
+    text-align: left;
+    margin-top: calc(var(--margin-5) * 2);
+    span {
+      color: var(--font-color-s);
+      font-size: var(--font-size-s);
+    }
+  }
+
+  /deep/ .el-loading-mask {
+    z-index: 1 !important;
+  }
+}
+</style>

package/packages/components/base/baseUpload/baseUploadItem.js

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