mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-25 00:31:53 +08:00
334 lines
6.9 KiB
Vue
334 lines
6.9 KiB
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}"
|
|||
|
|
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"
|
|||
|
|
@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: 750rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #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>
|