meixioacomponent 2.0.46 → 2.0.47

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();-->
-<!--          }-->
-
-<!--        }"-->
-<!--    >-->
-<!--      &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>-->
+<!--<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>-->