pco/app/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue

<template>
  <view class="uni-data-pickerview">
    <scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
      <view class="selected-list">
        <template v-for="(item,index) in selected">
          <view class="selected-item"
                :class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
                :key="index" v-if="item.text" @click="handleSelect(index)">
            <text class="">{{ item.text }}</text>
          </view>
        </template>
      </view>
    </scroll-view>
    <view class="tab-c">
      <template v-for="(child, i) in dataList">
        <scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true">
          <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j"
                @click="handleNodeClick(item, i, j)">
            <text class="item-text item-text-overflow">{{ item[map.text] }}</text>
            <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
          </view>
        </scroll-view>
      </template>

      <view class="loading-cover" v-if="loading">
        <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
      </view>
      <view class="error-message" v-if="errorMessage">
        <text class="error-text">{{ errorMessage }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import dataPicker from "./uni-data-picker.js"

/**
 * DataPickerview
 * @description uni-data-pickerview
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
 * @property {Array} localdata 本地数据，参考
 * @property {Boolean} step-searh = [true|false] 是否分布查询
 * @value true 启用分布查询，仅查询当前选中节点
 * @value false 关闭分布查询，一次查询出所有数据
 * @property {String|DBFieldString} self-field 分布查询当前字段名称
 * @property {String|DBFieldString} parent-field 分布查询父字段名称
 * @property {String|DBCollectionString} collection 表名
 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
 * @property {String} orderby 排序字段及正序倒叙设置
 * @property {String|JQLString} where 查询条件
 */
export default {
  name: 'UniDataPickerView',
  emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
  mixins: [dataPicker],
  props: {
    managedMode: {
      type: Boolean,
      default: false
    },
    ellipsis: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  created() {
    if (this.managedMode) {
      return
    }

    this.$nextTick(() => {
      this.load()
    })
  },
  methods: {
    onPropsChange() {
      this._treeData = []
      this.selectedIndex = 0
      this.load()
    },
    load() {
      if (this.isLocaldata) {
        this.loadData()
      } else if (this.dataValue.length) {
        this.getTreePath((res) => {
          this.loadData()
        })
      }
    },
    handleSelect(index) {
      this.selectedIndex = index
    },
    handleNodeClick(item, i, j) {
      if (item.disable) {
        return
      }
      const node = this.dataList[i][j]
      const text = node[this.map.text]
      const value = node[this.map.value]
      if (i < this.selected.length - 1) {
        this.selected.splice(i, this.selected.length - i)
        this.selected.push({
          text,
          value
        })
      } else if (i === this.selected.length - 1) {
        this.selected.splice(i, 1, {
          text,
          value
        })
      }

      if (node.isleaf) {
        this.onSelectedChange(node, node.isleaf)
        return
      }

      const {
        isleaf,
        hasNodes
      } = this._updateBindData()

      if (!this._isTreeView() && !hasNodes) {
        this.onSelectedChange(node, true)
        return
      }

      if (this.isLocaldata && (!hasNodes || isleaf)) {
        this.onSelectedChange(node, true)
        return
      }

      if (!isleaf && !hasNodes) {
        this._loadNodeData((data) => {
          if (!data.length) {
            node.isleaf = true
          } else {
            this._treeData.push(...data)
            this._updateBindData(node)
          }
          this.onSelectedChange(node, node.isleaf)
        }, this._nodeWhere())
        return
      }

      this.onSelectedChange(node, false)
    },
    updateData(data) {
      this._treeData = data.treeData
      this.selected = data.selected
      if (!this._treeData.length) {
        this.loadData()
      } else {
        //this.selected = data.selected
        this._updateBindData()
      }
    },
    onDataChange() {
      this.$emit('datachange')
    },
    onSelectedChange(node, isleaf) {
      if (isleaf) {
        this._dispatchEvent()
      }

      if (node) {
        this.$emit('nodeclick', node)
      }
    },
    _dispatchEvent() {
      this.$emit('change', this.selected.slice(0))
    }
  }
}
</script>
<style>
.uni-data-pickerview {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.error-text {
  color: #DD524D;
}

.loading-cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .5);
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  z-index: 1001;
}

.load-more {
  /* #ifndef APP-NVUE */
  margin: auto;
  /* #endif */
}

.error-message {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  opacity: .9;
  z-index: 102;
}

/* #ifdef APP-NVUE */
.selected-area {
  width: 750 rpx;
}

/* #endif */

.selected-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 5px;
  border-bottom: 1px solid #f8f8f8;
}

.selected-item {
  margin-left: 10px;
  margin-right: 10px;
  padding: 12px 0;
  text-align: center;
  /* #ifndef APP-NVUE */
  white-space: nowrap;
  /* #endif */
}

.selected-item-text-overflow {
  width: 168px;
  /* fix nvue */
  overflow: hidden;
  /* #ifndef APP-NVUE */
  width: 6em;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  /* #endif */
}

.selected-item-active {
  border-bottom: 2px solid #007aff;
}

.selected-item-text {
  color: #007aff;
}

.tab-c {
  position: relative;
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  overflow: hidden;
}

.list {
  flex: 1;
}

.item {
  padding: 12px 15px;
  /* border-bottom: 1px solid #f0f0f0; */
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
}

.is-disabled {
  opacity: .5;
}

.item-text {
  /* flex: 1; */
  color: #333333;
}

.item-text-overflow {
  width: 280px;
  /* fix nvue */
  overflow: hidden;
  /* #ifndef APP-NVUE */
  width: 20em;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  /* #endif */
}

.check {
  margin-right: 5px;
  border: 2px solid #007aff;
  border-left: 0;
  border-top: 0;
  height: 12px;
  width: 6px;
  transform-origin: center;
  /* #ifndef APP-NVUE */
  transition: all 0.3s;
  /* #endif */
  transform: rotate(45deg);
}
</style>