meixioacomponent 0.1.0

package/packages/components/base/baseArea/areaConfig.js

@@ -0,0 +1,6 @@
+const areaConfig = [
+  { value: "province" },
+  { value: "city" },
+  { value: "district" },
+];
+export default areaConfig;

package/packages/components/base/baseArea/baseArea.vue

@@ -0,0 +1,531 @@
+<template>
+  <div class="base-area-select-wrap">
+    <el-popover
+      ref="popover"
+      trigger="click"
+      :disabled="disable"
+      placement="bottom"
+      @show="eventShow"
+      @hide="eventHide"
+    >
+      <!-- 内容 -->
+      <template>
+        <div class="area-select-content">
+          <div class="content-title">
+            <div class="title-left">
+              <span>地区选择器</span>
+            </div>
+            <div class="title-right">
+              <base-icon
+                :size="`l`"
+                :color="`s`"
+                :event="true"
+                @iconClick="backArea"
+                v-show="activeIndex > 1"
+                :name="`icon-icon-arrow-left`"
+              ></base-icon>
+            </div>
+          </div>
+          <div class="content-middle">
+            <div class="middle-left" ref="middleLeft">
+              <div
+                class="province-item"
+                :class="{ active: item.label == activeProvince }"
+                @click="checkProvince(item)"
+                v-for="(item, index) in areaJson"
+                :key="index"
+              >
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+            <div class="middle-right">
+              <div class="middle-right-title">
+                <div
+                  :key="index"
+                  class="area-item"
+                  @click="checkArea(item)"
+                  :class="{ active: item.label == activeArea }"
+                  v-for="(item, index) in areaList"
+                >
+                  <base-icon
+                    :size="`s`"
+                    :color="`d`"
+                    :event="true"
+                    :plain="true"
+                    class="delete-icon"
+                    :name="`icon-close`"
+                    @iconClick="deleteCheck"
+                    v-if="item.label == activeArea"
+                  ></base-icon>
+                  <span :title="item.label">{{ item.label }}</span>
+                </div>
+              </div>
+              <div class="middle-right-bottom">
+                <baseButtonHandleVue
+                  :config="handleConfig"
+                ></baseButtonHandleVue>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <div
+        :class="{
+          'is-open': isOpen,
+        }"
+        slot="reference"
+        class="area-select-input"
+        @click="openSelectWrap"
+      >
+        <el-input
+          size="small"
+          :disabled="disable"
+          :readonly="true"
+          v-model="showModule"
+          placeholder="请选择地区"
+          :suffix-icon="suffixIcon"
+        >
+        </el-input>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import baseButtonHandleVue from "../baseButtonHandle/baseButtonHandle.vue";
+//
+import areaJson from "./area";
+import areaConfig from "./areaConfig";
+export default {
+  name: "baseArea",
+  data() {
+    return {
+      //  是否打开了选择器
+      isOpen: false,
+      //   按钮的配置
+      handleConfig: null,
+      //   被选中的目标
+      activeObj: null,
+      //   需要返回的值
+      areaValue: [],
+      //   记录点击的次数
+      activeIndex: 0,
+      // 是否回显过数据
+      isReview: false,
+    };
+  },
+  created() {
+    this.init();
+    this.handleConfig = [
+      {
+        type: "info",
+        text: this.module ? "取消" : "清空",
+        plain: false,
+        click: () => {
+          this.cancelValue();
+        },
+      },
+      {
+        type: "primary",
+        text: "确定",
+        click: () => {
+          this.confirmValue();
+        },
+      },
+    ];
+  },
+
+  props: {
+    value: {
+      default: null,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  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.areaValue.length > 0) {
+        let text = "";
+        this.areaValue.forEach((item) => {
+          if (item.label) {
+            let value = text ? ` / ${item.label}` : item.label;
+            text += `${value}`;
+          }
+        });
+        return text;
+      }
+      return null;
+    },
+    areaJson() {
+      return areaJson;
+    },
+    activeProvince() {
+      if (this.areaValue.length > 0) {
+        return this.areaValue[0].label;
+      }
+      return null;
+    },
+    activeArea() {
+      if (this.areaValue.length > 1) {
+        return this.areaValue[this.activeIndex]?.label;
+      }
+      return null;
+    },
+    areaList() {
+      if (this.activeObj && this.activeObj.children.length > 0) {
+        return this.activeObj.children;
+      }
+      return [];
+    },
+  },
+  methods: {
+    init() {
+      console.log("start");
+      if (this.module && this.module instanceof Object) {
+        console.log("end");
+        for (let i = 0; i < areaConfig.length; i++) {
+          let item = areaConfig[i];
+          let value = this.module[`${item.value}`];
+          this.$set(this.areaValue, i, {
+            label: value,
+            pre: null,
+          });
+        }
+      }
+    },
+    eventShow() {
+      this.isOpen = true;
+      if (!this.isReview) {
+        this.review();
+      }
+      this.scrollToProvince();
+    },
+
+    review() {
+      // let provice = areaJson.findIndex((item) => {});
+
+      this.areaValue.forEach((item, index) => {
+        if (index == 0) {
+          let cindex = areaJson.findIndex((citem) => {
+            return citem.label == item.label;
+          });
+
+          this.checkProvince(areaJson[cindex]);
+        } else {
+          console.log("else");
+          console.log(this.activeObj);
+          if (this.activeObj && this.activeObj.children.length > 0) {
+            let cindex = this.activeObj.children.findIndex((citem) => {
+              return item.label == citem.label;
+            });
+
+            this.checkArea(this.activeObj.children[cindex]);
+          }
+        }
+      });
+
+      this.isReview = true;
+    },
+
+    eventHide() {
+      this.isOpen = false;
+      this.cancelValue();
+    },
+
+    openSelectWrap() {
+      if (this.$props.disable) return;
+      this.isOpen = !this.isOpen;
+    },
+    // 选择省份
+    checkProvince(province) {
+      this.activeIndex = 0;
+      this.areaValue = [];
+      this.$set(this.areaValue, 0, { label: province.label, pre: null });
+
+      if (province.children.length > 0) {
+        this.activeObj = province;
+        this.activeIndex += 1;
+      }
+      this.isReview = true;
+    },
+    // 选择地区
+    checkArea(area) {
+      if (!area) {
+        this.isReview = true;
+        return;
+      }
+      let pre = this.areaValue[this.activeIndex];
+      if (!pre) {
+        this.$set(this.areaValue, this.activeIndex, {
+          label: area.label,
+          pre: this.activeObj,
+        });
+      } else {
+        pre.label = area.label;
+      }
+
+      if (area.children) {
+        this.activeObj = area;
+        this.activeIndex += 1;
+      }
+      this.isReview = true;
+    },
+
+    // 返回
+    backArea() {
+      console.log(this.activeIndex);
+      console.log(this.areaValue);
+      let currentArea = this.areaValue[this.activeIndex - 1];
+      this.areaValue.splice(this.activeIndex, 1);
+      this.activeIndex -= 1;
+      if (currentArea.pre) {
+        this.activeObj = currentArea.pre;
+      }
+    },
+
+    deleteCheck() {
+      if (this.activeIndex == 1) {
+        this.areaValue.splice(this.activeIndex, 1);
+      } else {
+        this.backArea();
+      }
+    },
+
+    cancelValue() {
+      if (!this.module) {
+        this.areaValue = [];
+      } else {
+        this.init();
+        this.isReview = false;
+      }
+      this.$refs.popover.doClose();
+    },
+
+    confirmValue() {
+      let value = {};
+      for (let i = 0; i < this.areaValue.length; i++) {
+        value[`${areaConfig[i].value}`] = this.areaValue[i].label;
+        // if (this.module instanceof Object) {
+        //   this.module[`${areaConfig[i].value}`] = this.areaValue[i].label;
+        // } else if (this.$props.value != null && !this.module) {
+        //   this.$emit("changeValue", {});
+        //   console.log(this.value);
+        //   this.module[`${areaConfig[i].value}`] = this.areaValue[i].label;
+        //   // let obj = {};
+        //   // obj[`${areaConfig[i].value}`] = this.areaValue[i].label;
+        //   // this.module = obj;
+        // }
+      }
+
+      this.module = value;
+
+      this.$emit("confirmAreaValue", value);
+      console.log(this.module);
+      this.$refs.popover.doClose();
+    },
+
+    // 滚动到指定位置
+    scrollToProvince() {
+      if (this.areaValue.length > 0) {
+        let index = 0;
+        let label = this.areaValue[0].label;
+        for (let i = 0; i < areaJson.length; i++) {
+          let item = areaJson[i];
+          if (item.label == label) {
+            index = i;
+            break;
+          }
+        }
+        let refs = this.$refs.middleLeft;
+        this.$nextTick(() => {
+          refs.scrollTop = refs.childNodes[index].offsetTop - refs.clientHeight;
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-area-select-wrap {
+  width: auto;
+  height: auto;
+  overflow: hidden;
+  border-radius: calc(var(--radius) * 2);
+  .area-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;
+      &::placeholder {
+        color: var(--color-error) !important;
+      }
+    }
+    /deep/ .el-icon-arrow-up {
+      color: white !important;
+    }
+  }
+}
+.area-select-content {
+  width: 400px;
+  height: 300px;
+  background: var(--bg-white);
+  .content-title {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    border-bottom: 2px solid var(--color-border);
+    .title-left {
+      span {
+        line-height: 40px;
+        color: var(--font-color-d);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-kg);
+      }
+    }
+    .title-right {
+      width: auto;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .content-middle {
+    width: 100%;
+    display: flex;
+    height: calc(100% - 40px);
+    .middle-left {
+      width: 145px;
+      height: 100%;
+      overflow-y: auto;
+      padding: calc(var(--padding-3) * 2);
+      padding-left: 0px;
+      box-sizing: border-box;
+      border-right: 2px solid var(--color-gray-m);
+
+      .province-item {
+        width: 100%;
+        height: 28px;
+        cursor: pointer;
+        background: inherit;
+        box-sizing: border-box;
+        padding: 0px var(--padding-4);
+        margin-bottom: var(--margin-5);
+        border-radius: calc(var(--radius) * 2);
+        span {
+          line-height: 28px;
+          text-align: left;
+          color: var(--font-color-s);
+          font-size: var(--font-size-s);
+        }
+        &:hover {
+          background: var(--bg-gray);
+        }
+      }
+      .active {
+        cursor: default;
+        background: var(--bg-gray);
+        span {
+          color: var(--font-color-d);
+        }
+      }
+    }
+    .middle-right {
+      height: 100%;
+      width: calc(100% - 145px);
+      padding-left: calc(var(--padding-3) * 2);
+      .middle-right-title {
+        width: 100%;
+        display: flex;
+        overflow-y: auto;
+        flex-flow: row wrap;
+        height: calc(100% - 38px);
+        align-content: flex-start;
+        justify-content: flex-start;
+        margin-bottom: var(--margin-4);
+        border-bottom: 2px solid var(--color-gray-m);
+        .area-item {
+          height: 24px;
+          display: flex;
+          cursor: pointer;
+          position: relative;
+          background: inherit;
+          width: calc(33% - 8px);
+          margin: var(--margin-4);
+          margin-left: 0px;
+          justify-content: center;
+          border-radius: calc(var(--radius) * 2);
+          span {
+            max-width: 100%;
+            line-height: 24px;
+            color: var(--font-color-s);
+            font-size: var(--font-size-s);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .delete-icon {
+            top: 0px;
+            right: 0px;
+            display: none;
+            position: absolute;
+            transform: translateY(-50%);
+          }
+          &:hover {
+            background: var(--bg-gray);
+            .delete-icon {
+              display: flex;
+            }
+          }
+        }
+        .active {
+          background: var(--bg-gray);
+          span {
+            color: var(--font-color-d);
+          }
+        }
+      }
+      .middle-right-bottom {
+        width: 100%;
+        height: 30px;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>

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

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

package/packages/components/base/baseAvatar/baseAvatar.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-badge :value="module" :hidden="module ? false : true">
+    <div class="base-avatar-wrap" :class="[size, shape]">
+      <baseImgVue v-if="type == 'img'" :src="source" :event="view"></baseImgVue>
+      <span v-else-if="type == 'text'">{{ source }}</span>
+      <base-icon
+        :size="`l`"
+        :color="`d`"
+        :plain="true"
+        :name="source"
+        v-else-if="type == 'icon'"
+      >
+      </base-icon>
+    </div>
+  </el-badge>
+</template>
+
+<script>
+import baseImgVue from "../baseImg/baseImg.vue";
+export default {
+  name: "baseAvatar",
+  data() {
+    return {};
+  },
+  components: { baseImgVue },
+  props: {
+    type: {
+      type: String,
+      default: "icon",
+    },
+    source: {
+      type: String,
+      default: "icon-user",
+    },
+    size: {
+      type: String,
+      default: "m",
+    },
+    shape: {
+      type: String,
+      default: "cir",
+    },
+    view: {
+      type: Boolean,
+      default: false,
+    },
+    value: {},
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-avatar-wrap {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+  background: var(--color-gray-m);
+  span {
+    color: var(--font-color-d);
+    font-weight: var(--font-weight-kg);
+  }
+}
+.l {
+  width: 50px;
+  height: 50px;
+  font-size: var(--font-size-l);
+}
+.m {
+  width: 42px;
+  height: 42px;
+  span {
+    font-size: var(--font-size-base);
+  }
+}
+
+.s {
+  width: 36px;
+  height: 36px;
+  span {
+    font-size: var(--font-size-s);
+  }
+}
+.cir {
+  border-radius: 50%;
+}
+.squ {
+  border-radius: calc(var(--radius) * 2);
+}
+</style>

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

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

package/packages/components/base/baseButtonHandle/baseButtonHandle.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="footer-handle-wrap" :style="footerHandleClick">
+    <el-button
+      :key="index"
+      :size="size"
+      :type="item.type"
+      :plain="item.plain"
+      @click="handleClick(item)"
+      v-for="(item, index) in config"
+    >
+      <i v-if="item.icon" :class="item.icon"></i> {{ item.text }}</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name:'baseButtonHandle',
+  data() {
+    return {};
+  },
+  computed: {
+    footerHandleClick() {
+      let _align = this.$props.align;
+      return {
+        "justify-content": _align == "center" ? "center" : `flex-${_align}`,
+      };
+    },
+  },
+  props: {
+    /* button按钮的大小 */
+    size: {
+      type: String,
+      default: "mini",
+    },
+    /* 按钮的方向 左，右，中间 */
+    align: {
+      type: String,
+      default: "end",
+    },
+
+    config: {
+      type: Array,
+      require: true,
+    },
+  },
+  methods: {
+    handleClick(item) {
+      if (item.click) {
+        item.click();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.footer-handle-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>