meixioacomponent 2.0.38 → 2.0.40

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

@@ -1,590 +1,590 @@
-<template>
-  <div class="base-area-select-wrap">
-    <t-popup
-        v-model="isOpen"
-        ref="popover"
-        :disabled="disable"
-        placement="bottom"
-        trigger="click"
-        @visible-change="(visible)=>{
-          if(visible){
-            eventShow();
-          }else{
-            eventHide();
-          }
-
-        }"
-    >
-      <!-- 内容 -->
-      <template #content>
-        <div class="area-select-content">
-          <div class="content-title">
-            <div class="title-left">
-              <span>地区选择器</span>
-            </div>
-            <div class="title-right">
-              <arrow-left-icon @click="backArea" v-show="activeIndex>1"></arrow-left-icon>
-            </div>
-          </div>
-          <div class="content-middle">
-            <div ref="middleLeft" class="middle-left">
-              <div
-                  v-for="(item, index) in areaJson"
-                  :key="index"
-                  :class="{ active: item.label == activeProvince }"
-                  class="province-item"
-                  @click="checkProvince(item)"
-              >
-                <span>{{ item.label }}</span>
-              </div>
-            </div>
-            <div class="middle-right">
-              <div class="middle-right-title">
-                <div
-                    v-for="(item, index) in areaList"
-                    :key="index"
-                    :class="{ active: item.label == activeArea }"
-                    class="area-item"
-                >
-
-                  <t-button class="delete-btn" v-if="item.label == activeArea" shape="square" variant="outline"
-                            @click="deleteCheck">
-                    <template #icon>
-                      <CloseCircleIcon
-                      ></CloseCircleIcon>
-                    </template>
-                  </t-button>
-
-
-                  <span :title="item.label" @click="checkArea(item)">{{ item.label }}</span>
-                </div>
-              </div>
-              <div class="middle-right-bottom">
-                <baseButtonHandleVue
-                    :config="handleConfig"
-                ></baseButtonHandleVue>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-      <div
-          :class="{
-          'is-open': isOpen,
-        }"
-          class="area-select-input"
-          @click="openSelectWrap"
-      >
-        <t-input :size="componentSize"
-                 v-model="showModule"
-                 :disabled="disable"
-                 :readonly="true"
-                 placeholder="请选择地区">
-          <template #suffix-icon>
-            <arrow-down-icon v-if="!isOpen"></arrow-down-icon>
-            <arrow-up-icon v-else></arrow-up-icon>
-          </template>
-        </t-input>
-      </div>
-    </t-popup>
-  </div>
-</template>
-
-<script>
-import baseButtonHandleVue from '../baseButtonHandle/baseButtonHandle.vue'
-//
-import areaJson from './area'
-import areaConfig from './areaConfig'
-import {ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CloseCircleIcon, LocationIcon} from "tdesign-icons-vue"
-import {baseTimeTypeConfig} from "../baseTimeTypeSelect/config";
-import {TransomComponentSize} from "../../../utils/utils";
-
-export default {
-  name: 'baseArea',
-  data() {
-    return {
-      //  是否打开了选择器
-      isOpen: false,
-      //   按钮的配置
-      handleConfig: null,
-      //   被选中的目标
-      activeObj: null,
-      //   需要返回的值
-      areaValue: [],
-      //   记录点击的次数
-      activeIndex: 0,
-      // 是否回显过数据
-      isReview: false,
-    }
-  },
-  created() {
-    this.init()
-  },
-
-  props: {
-    value: {
-      default: null,
-    },
-    disable: {
-      type: Boolean,
-      default: false,
-    },
-    size: {type: String, default: 'small'}
-  },
-
-  components: {
-    LocationIcon,
-    CloseCircleIcon,
-    baseButtonHandleVue,
-    ArrowUpIcon,
-    ArrowDownIcon,
-    ArrowLeftIcon
-  },
-  computed: {
-    module: {
-      set(val) {
-        this.$emit('input', val)
-      },
-      get() {
-        return this.$props.value
-      },
-    },
-
-    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 []
-    },
-    componentSize() {
-      return TransomComponentSize(this.$props.size)
-    }
-  },
-  methods: {
-    init() {
-      if (this.module && this.module instanceof Object) {
-        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.setHandleConfig()
-      this.scrollToProvince()
-    },
-    setHandleConfig() {
-      this.handleConfig = [
-        {
-          type: 'info',
-          text: this.module ? '清空' : '取消',
-          plain: false,
-          click: () => {
-            if (!this.module) {
-              this.cancelValue()
-            } else {
-              this.cancelValue()
-              this.module = null
-            }
-          },
-        },
-        {
-          type: 'primary',
-          text: '确定',
-          click: () => {
-            this.confirmValue()
-          },
-        },
-      ]
-    },
-
-    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,
-        value: province.value,
-      })
-
-      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,
-          value: area.value,
-        })
-      } 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.module = null;
-        this.isReview = false
-      }
-      this.doClose()
-    },
-
-    confirmValue() {
-      let value = {}
-      let valueId = []
-      for (let i = 0; i < this.areaValue.length; i++) {
-        const item = this.areaValue[i]
-        const flag = i == this.areaValue.length - 1
-        value[`${areaConfig[i].value}`] = item.label
-        valueId.push(item.value)
-      }
-      value.idList = valueId
-      if (JSON.stringify(value) != '{}') {
-        this.module = value
-      }
-      this.$nextTick(() => {
-        if (this.$parent.$options._componentTag == 'el-form-item') {
-          this.$emit('confirmAreaValue')
-        } else {
-          this.$emit('confirmAreaValue', value)
-          this.doClose()
-        }
-      })
-    },
-
-    doClose() {
-      this.isOpen = false;
-    },
-
-    // 滚动到指定位置
-    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
-        })
-      }
-    },
-  },
-  watch: {
-    module(newVal, oldVal) {
-      if (!newVal) {
-        this.areaValue = []
-        return
-      }
-      this.init();
-    },
-  },
-}
-</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 {
-    border-color: var(--color-gray-m);
-  }
-
-  .is-open {
-    background: var(--color-primary);
-
-    /deep/ .el-input__inner {
-      &::placeholder {
-        color: var(--color-error) !important;
-      }
-    }
-
-    /deep/ .el-icon-arrow-up {
-      color: white !important;
-    }
-  }
-}
-
-.area-select-content {
-  width: 400px;
-  height: 300px;
-  box-sizing: border-box;
-  background: var(--bg-white);
-  padding: 0px var(--padding-4);
-
-  .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 {
-          padding: 0 var(--padding-4);
-          box-sizing: border-box;
-          height: 40px;
-          display: flex;
-          cursor: pointer;
-          position: relative;
-          background: inherit;
-          width: calc(33% - 8px);
-          margin: var(--margin-4);
-          margin-left: 0;
-          flex-flow: row nowrap;
-          align-items: center;
-          justify-content: flex-start;
-          border-radius: calc(var(--radius) * 2);
-
-          .delete-btn {
-            position: absolute;
-            top: -16px;
-            right: -16px;
-          }
-
-
-          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;
-          }
-
-          &: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>
+<!--<template>-->
+<!--  <div class="base-area-select-wrap">-->
+<!--    <t-popup-->
+<!--        v-model="isOpen"-->
+<!--        ref="popover"-->
+<!--        :disabled="disable"-->
+<!--        placement="bottom"-->
+<!--        trigger="click"-->
+<!--        @visible-change="(visible)=>{-->
+<!--          if(visible){-->
+<!--            eventShow();-->
+<!--          }else{-->
+<!--            eventHide();-->
+<!--          }-->
+
+<!--        }"-->
+<!--    >-->
+<!--      &lt;!&ndash; 内容 &ndash;&gt;-->
+<!--      <template #content>-->
+<!--        <div class="area-select-content">-->
+<!--          <div class="content-title">-->
+<!--            <div class="title-left">-->
+<!--              <span>地区选择器</span>-->
+<!--            </div>-->
+<!--            <div class="title-right">-->
+<!--              <arrow-left-icon @click="backArea" v-show="activeIndex>1"></arrow-left-icon>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <div class="content-middle">-->
+<!--            <div ref="middleLeft" class="middle-left">-->
+<!--              <div-->
+<!--                  v-for="(item, index) in areaJson"-->
+<!--                  :key="index"-->
+<!--                  :class="{ active: item.label == activeProvince }"-->
+<!--                  class="province-item"-->
+<!--                  @click="checkProvince(item)"-->
+<!--              >-->
+<!--                <span>{{ item.label }}</span>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--            <div class="middle-right">-->
+<!--              <div class="middle-right-title">-->
+<!--                <div-->
+<!--                    v-for="(item, index) in areaList"-->
+<!--                    :key="index"-->
+<!--                    :class="{ active: item.label == activeArea }"-->
+<!--                    class="area-item"-->
+<!--                >-->
+
+<!--                  <t-button class="delete-btn" v-if="item.label == activeArea" shape="square" variant="outline"-->
+<!--                            @click="deleteCheck">-->
+<!--                    <template #icon>-->
+<!--                      <CloseCircleIcon-->
+<!--                      ></CloseCircleIcon>-->
+<!--                    </template>-->
+<!--                  </t-button>-->
+
+
+<!--                  <span :title="item.label" @click="checkArea(item)">{{ item.label }}</span>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <div class="middle-right-bottom">-->
+<!--                <baseButtonHandleVue-->
+<!--                    :config="handleConfig"-->
+<!--                ></baseButtonHandleVue>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </template>-->
+<!--      <div-->
+<!--          :class="{-->
+<!--          'is-open': isOpen,-->
+<!--        }"-->
+<!--          class="area-select-input"-->
+<!--          @click="openSelectWrap"-->
+<!--      >-->
+<!--        <t-input :size="componentSize"-->
+<!--                 v-model="showModule"-->
+<!--                 :disabled="disable"-->
+<!--                 :readonly="true"-->
+<!--                 placeholder="请选择地区">-->
+<!--          <template #suffix-icon>-->
+<!--            <arrow-down-icon v-if="!isOpen"></arrow-down-icon>-->
+<!--            <arrow-up-icon v-else></arrow-up-icon>-->
+<!--          </template>-->
+<!--        </t-input>-->
+<!--      </div>-->
+<!--    </t-popup>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import baseButtonHandleVue from '../baseButtonHandle/baseButtonHandle.vue'-->
+<!--//-->
+<!--import areaJson from './area'-->
+<!--import areaConfig from './areaConfig'-->
+<!--import {ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CloseCircleIcon, LocationIcon} from "tdesign-icons-vue"-->
+<!--import {baseTimeTypeConfig} from "../baseTimeTypeSelect/config";-->
+<!--import {TransomComponentSize} from "../../../utils/utils";-->
+
+<!--export default {-->
+<!--  name: 'baseArea',-->
+<!--  data() {-->
+<!--    return {-->
+<!--      //  是否打开了选择器-->
+<!--      isOpen: false,-->
+<!--      //   按钮的配置-->
+<!--      handleConfig: null,-->
+<!--      //   被选中的目标-->
+<!--      activeObj: null,-->
+<!--      //   需要返回的值-->
+<!--      areaValue: [],-->
+<!--      //   记录点击的次数-->
+<!--      activeIndex: 0,-->
+<!--      // 是否回显过数据-->
+<!--      isReview: false,-->
+<!--    }-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.init()-->
+<!--  },-->
+
+<!--  props: {-->
+<!--    value: {-->
+<!--      default: null,-->
+<!--    },-->
+<!--    disable: {-->
+<!--      type: Boolean,-->
+<!--      default: false,-->
+<!--    },-->
+<!--    size: {type: String, default: 'small'}-->
+<!--  },-->
+
+<!--  components: {-->
+<!--    LocationIcon,-->
+<!--    CloseCircleIcon,-->
+<!--    baseButtonHandleVue,-->
+<!--    ArrowUpIcon,-->
+<!--    ArrowDownIcon,-->
+<!--    ArrowLeftIcon-->
+<!--  },-->
+<!--  computed: {-->
+<!--    module: {-->
+<!--      set(val) {-->
+<!--        this.$emit('input', val)-->
+<!--      },-->
+<!--      get() {-->
+<!--        return this.$props.value-->
+<!--      },-->
+<!--    },-->
+
+<!--    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 []-->
+<!--    },-->
+<!--    componentSize() {-->
+<!--      return TransomComponentSize(this.$props.size)-->
+<!--    }-->
+<!--  },-->
+<!--  methods: {-->
+<!--    init() {-->
+<!--      if (this.module && this.module instanceof Object) {-->
+<!--        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.setHandleConfig()-->
+<!--      this.scrollToProvince()-->
+<!--    },-->
+<!--    setHandleConfig() {-->
+<!--      this.handleConfig = [-->
+<!--        {-->
+<!--          type: 'info',-->
+<!--          text: this.module ? '清空' : '取消',-->
+<!--          plain: false,-->
+<!--          click: () => {-->
+<!--            if (!this.module) {-->
+<!--              this.cancelValue()-->
+<!--            } else {-->
+<!--              this.cancelValue()-->
+<!--              this.module = null-->
+<!--            }-->
+<!--          },-->
+<!--        },-->
+<!--        {-->
+<!--          type: 'primary',-->
+<!--          text: '确定',-->
+<!--          click: () => {-->
+<!--            this.confirmValue()-->
+<!--          },-->
+<!--        },-->
+<!--      ]-->
+<!--    },-->
+
+<!--    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,-->
+<!--        value: province.value,-->
+<!--      })-->
+
+<!--      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,-->
+<!--          value: area.value,-->
+<!--        })-->
+<!--      } 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.module = null;-->
+<!--        this.isReview = false-->
+<!--      }-->
+<!--      this.doClose()-->
+<!--    },-->
+
+<!--    confirmValue() {-->
+<!--      let value = {}-->
+<!--      let valueId = []-->
+<!--      for (let i = 0; i < this.areaValue.length; i++) {-->
+<!--        const item = this.areaValue[i]-->
+<!--        const flag = i == this.areaValue.length - 1-->
+<!--        value[`${areaConfig[i].value}`] = item.label-->
+<!--        valueId.push(item.value)-->
+<!--      }-->
+<!--      value.idList = valueId-->
+<!--      if (JSON.stringify(value) != '{}') {-->
+<!--        this.module = value-->
+<!--      }-->
+<!--      this.$nextTick(() => {-->
+<!--        if (this.$parent.$options._componentTag == 'el-form-item') {-->
+<!--          this.$emit('confirmAreaValue')-->
+<!--        } else {-->
+<!--          this.$emit('confirmAreaValue', value)-->
+<!--          this.doClose()-->
+<!--        }-->
+<!--      })-->
+<!--    },-->
+
+<!--    doClose() {-->
+<!--      this.isOpen = false;-->
+<!--    },-->
+
+<!--    // 滚动到指定位置-->
+<!--    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-->
+<!--        })-->
+<!--      }-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    module(newVal, oldVal) {-->
+<!--      if (!newVal) {-->
+<!--        this.areaValue = []-->
+<!--        return-->
+<!--      }-->
+<!--      this.init();-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<!--<style lang="less" scoped>-->
+<!--.base-area-select-wrap {-->
+<!--  width: auto;-->
+<!--  height: auto;-->
+<!--  overflow: hidden;-->
+<!--  border-radius: calc(var(&#45;&#45;radius) * 2);-->
+
+<!--  .area-select-input {-->
+<!--    background: var(&#45;&#45;color-gray-m);-->
+<!--  }-->
+
+<!--  /deep/ .el-input__inner {-->
+<!--    border-color: var(&#45;&#45;color-gray-m);-->
+<!--  }-->
+
+<!--  .is-open {-->
+<!--    background: var(&#45;&#45;color-primary);-->
+
+<!--    /deep/ .el-input__inner {-->
+<!--      &::placeholder {-->
+<!--        color: var(&#45;&#45;color-error) !important;-->
+<!--      }-->
+<!--    }-->
+
+<!--    /deep/ .el-icon-arrow-up {-->
+<!--      color: white !important;-->
+<!--    }-->
+<!--  }-->
+<!--}-->
+
+<!--.area-select-content {-->
+<!--  width: 400px;-->
+<!--  height: 300px;-->
+<!--  box-sizing: border-box;-->
+<!--  background: var(&#45;&#45;bg-white);-->
+<!--  padding: 0px var(&#45;&#45;padding-4);-->
+
+<!--  .content-title {-->
+<!--    width: 100%;-->
+<!--    height: 40px;-->
+<!--    display: flex;-->
+<!--    flex-flow: row nowrap;-->
+<!--    justify-content: space-between;-->
+<!--    border-bottom: 2px solid var(&#45;&#45;color-border);-->
+
+<!--    .title-left {-->
+<!--      span {-->
+<!--        line-height: 40px;-->
+<!--        color: var(&#45;&#45;font-color-d);-->
+<!--        font-size: var(&#45;&#45;font-size-base);-->
+<!--        font-weight: var(&#45;&#45;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(&#45;&#45;padding-3) * 2);-->
+<!--      padding-left: 0px;-->
+<!--      box-sizing: border-box;-->
+<!--      border-right: 2px solid var(&#45;&#45;color-gray-m);-->
+
+<!--      .province-item {-->
+<!--        width: 100%;-->
+<!--        height: 28px;-->
+<!--        cursor: pointer;-->
+<!--        background: inherit;-->
+<!--        box-sizing: border-box;-->
+<!--        padding: 0px var(&#45;&#45;padding-4);-->
+<!--        margin-bottom: var(&#45;&#45;margin-5);-->
+<!--        border-radius: calc(var(&#45;&#45;radius) * 2);-->
+
+<!--        span {-->
+<!--          line-height: 28px;-->
+<!--          text-align: left;-->
+<!--          color: var(&#45;&#45;font-color-s);-->
+<!--          font-size: var(&#45;&#45;font-size-s);-->
+<!--        }-->
+
+<!--        &:hover {-->
+<!--          background: var(&#45;&#45;bg-gray);-->
+<!--        }-->
+<!--      }-->
+
+<!--      .active {-->
+<!--        cursor: default;-->
+<!--        background: var(&#45;&#45;bg-gray);-->
+
+<!--        span {-->
+<!--          color: var(&#45;&#45;font-color-d);-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+
+<!--    .middle-right {-->
+<!--      height: 100%;-->
+<!--      width: calc(100% - 145px);-->
+<!--      padding-left: calc(var(&#45;&#45;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(&#45;&#45;margin-4);-->
+<!--        border-bottom: 2px solid var(&#45;&#45;color-gray-m);-->
+
+<!--        .area-item {-->
+<!--          padding: 0 var(&#45;&#45;padding-4);-->
+<!--          box-sizing: border-box;-->
+<!--          height: 40px;-->
+<!--          display: flex;-->
+<!--          cursor: pointer;-->
+<!--          position: relative;-->
+<!--          background: inherit;-->
+<!--          width: calc(33% - 8px);-->
+<!--          margin: var(&#45;&#45;margin-4);-->
+<!--          margin-left: 0;-->
+<!--          flex-flow: row nowrap;-->
+<!--          align-items: center;-->
+<!--          justify-content: flex-start;-->
+<!--          border-radius: calc(var(&#45;&#45;radius) * 2);-->
+
+<!--          .delete-btn {-->
+<!--            position: absolute;-->
+<!--            top: -16px;-->
+<!--            right: -16px;-->
+<!--          }-->
+
+
+<!--          span {-->
+<!--            max-width: 100%;-->
+<!--            line-height: 24px;-->
+<!--            color: var(&#45;&#45;font-color-s);-->
+<!--            font-size: var(&#45;&#45;font-size-s);-->
+<!--            overflow: hidden;-->
+<!--            white-space: nowrap;-->
+<!--            text-overflow: ellipsis;-->
+<!--          }-->
+
+<!--          &:hover {-->
+<!--            background: var(&#45;&#45;bg-gray);-->
+
+<!--            .delete-icon {-->
+<!--              display: flex;-->
+<!--            }-->
+<!--          }-->
+<!--        }-->
+
+<!--        .active {-->
+<!--          background: var(&#45;&#45;bg-gray);-->
+
+<!--          span {-->
+<!--            color: var(&#45;&#45;font-color-d);-->
+<!--          }-->
+<!--        }-->
+<!--      }-->
+
+<!--      .middle-right-bottom {-->
+<!--        width: 100%;-->
+<!--        height: 30px;-->
+<!--        display: flex;-->
+<!--        flex-flow: row nowrap;-->
+<!--        align-items: center;-->
+<!--        justify-content: flex-end;-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+<!--}-->
+<!--</style>-->