<template>
<view class="tm-pickersView flex-start px-24" :class="[black_tmeme?'grey-darken-5':bgColor]">
<!-- @change="bindChange" -->
<picker-view @change="change" @pickstart='$emit("aniStart")' @pickend='$emit("aniEnd")' v-if="listData.length>0" :value="value_default"
:mask-style='black_tmeme?"opacity:0;":""'
indicator-style='height:50px;'
indicator-class="tm-pickersBView-item-h"
class="tm-pickersBView-wk">
<picker-view-column v-for="(item,index) in listData" :key="index">
<view class="tm-pickersBView-item fulled-height flex-center " style="margin: 0 5px;" :class="[value_default[index]==index_pub?'text-size-n text-weight-b active':'',black_tmeme?'bk':'']" v-for="(item_data,index_pub) in listData[index]" :key="index_pub">
<text v-if="dataType == 'string'" >{{item_data}}</text>
<text v-if="dataType == 'object'">{{item_data[rangKey]}}</text>
</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
/**
* 普通级联拉选择器(嵌入式)
* @description 多级关联，单级关联选择
* @property {Array} default-value = [] 默认：[],默认赋值项。可选三种赋值方式，名称赋值，对象赋值，数字序列赋值
* @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
* @property {Array} list = [] 选择器的数据，可选格式：Array<string>,Array<object>.如果为object格式需要提供rangKey.如果为多级需要提供children.key值
* @property {String} rang-key = [text|title] 默认：text,如果List格式为对象数组，需要提供此值
* @property {String} children-key = [children] 默认：children,如果List格式为对象数组且为多级联选择，需要提供此值，理论上无限级联数据
* @property {String|Boolean} black = [true|false] 是否开启暗黑模式。
* @property {String|Boolean} disabled = [true|false] 是否禁用
* @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
* @property {Function} change 列数被选中改变时触发。
*
*/
export default {
name: "tm-pickersView",
props: {
// 默认选中的项
// 格式有三种分别是[string,string...]
// [数字序列，数字序列....]
// 和list同等对象结构[{},{},...],此格式需要提供rangKey字段否则报错。
defaultValue:{
type:Array,
default:()=>{return []}
},
// 行高。
itemHeight: {
type: String | Number,
default: 40
},
list: {
type: Array,
default: () => {
return []
}
},
// 如果数据是对象，则需要提供key值。
rangKey: {
type: String,
default: "text"
},
rangKeyId: {
type: String,
default: "id"
},
// 如果是联级，则需要提供子集key值。
childrenKey: {
type: String,
default: "children"
},
black:{
type:String|Boolean,
default:null
},
// 是否禁用
disabled:{
type:String|Boolean,
default:false
},
// 背景颜色，主题色名称。
bgColor:{
type:String,
default:'white'
}
},
data() {
return {
value_default:[],
pre_value:[],
scrollEvent: 0,
childrenIndex: 0,
listIndex: [],
listData: [],
idx:9123
};
},
mounted() {
this.$nextTick(function(){
this.chulisdata()
this.setDefaultValue();
})
},
watch:{
defaultValue:{
deep:true,
handler: function(newV,oldV){
this.chulisdata()
this.$nextTick(function(){
this.inits();
})
}
},
list:{
deep:true,
handler:async function(newV,oldV){
this.chulisdata()
this.$nextTick(async function(){
await this.inits();
})
}
},
},
computed: {
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
dataType: function() {
// 数据有误
if (typeof this.list !== 'object' && !Array.isArray(this.list) && !this.list.length) return null;
if (typeof this.list[0] === 'string') return 'string';
if (typeof this.list[0] === 'object') return 'object';
},
gridNum: function() {
let t = this;
if (
(typeof this.list !== 'object' && !Array.isArray(this.list) && this.list.length==0)||
typeof this.list[0] === 'undefined'
) {
this.listIndex = [{
itemIndex: 0,
childrenIndex: 0,
wz: 0
}]
return 0
};
if (typeof this.list[0] === 'string') {
this.listIndex = [{
itemIndex: 0,
childrenIndex: 0,
wz: 0
}]
return 1
}
if (typeof this.list[0] === 'object') {
let index = 0;
let cindex = 1;
let pds = []
function tests(obj) {
if(!obj||obj?.length==0){
return;
}
cindex = cindex+1;
index +=1;
pds.push({
itemIndex: 0,
childrenIndex: index,
wz: 0
})
if (obj && typeof obj === 'object' && Array.isArray(obj)) {
if (obj[0][t.childrenKey]) {
tests(obj[0][t.childrenKey]);
}
}
}
pds.push({
itemIndex: 0,
childrenIndex: index,
wz: 0
})
tests(this.list[0][this.childrenKey])
t.listIndex = pds;
return cindex;
}
},
},
methods: {
SeletecdeIndexdefault(){
let d = []
for(let i=0;i<this.gridNum;i++){
d.push(this.listIndex[i].itemIndex)
}
this.value_default = d;
},
// 获取当前选中的数据。
getSelectedValue(){
let t = this;
// 总的级联数。
let dNum = this.gridNum;
let pd = this.listIndex;
if(this.dataType === 'string'){
return [{
index:this.listIndex[0].itemIndex,
data:this.listData[0][this.listIndex[0].itemIndex]
}]
}else if(this.dataType === 'object'){
if(dNum===1){
let ps = {...this.listData[0][this.listIndex[0].itemIndex]};
delete ps.children;
return [{
index:this.listIndex[0].itemIndex,
data:ps
}]
}else if(dNum>1){
let p = [];
this.listIndex.forEach((item,index)=>{
if(t.listData[index]){
let ps = {...t.listData[index][item.itemIndex]};
delete ps.children;
p.push({
index:item.itemIndex,
data:ps
})
}
})
return p;
}
}
return [];
},
chulisdata() {
// 总的级联数。
let dNum = this.gridNum;
let t = this;
if (dNum === 0) {
this.listData = [];
this.$forceUpdate()
return this.listData;
}
if (dNum === 1) {
this.listData = [this.list];
// this.listData.push([...this.list]);
this.$forceUpdate()
return this.listData;
}
if (dNum > 1) {
let index = 1;
let list = [];
let p = [];
function tests(obj) {
if(index > dNum) return;
list.push([...obj])
if(obj[t.listIndex[index]?.itemIndex]){
let cl = obj[t.listIndex[index].itemIndex][t.childrenKey];
if (cl && typeof cl === 'object' && Array.isArray(cl)) {
index++;
tests(cl);
}
}
}
p.push([...this.list])
if(this.list[t.listIndex[0].itemIndex][this.childrenKey]){
tests(this.list[t.listIndex[0].itemIndex][this.childrenKey])
}
p.push(...list);
this.$forceUpdate()
this.listData = p;
}
return this.listData;
},
setDefaultValue(objSelected){
let t = this;
uni.$tm.sleep(50).then(()=>t.inits(objSelected))
.then(()=>uni.$tm.sleep(50))
.then(()=>t.SeletecdeIndexdefault())
},
async inits(objSelected){
// 总的级联数。
let dNum = this.gridNum;
let t = this;
var sjd = null;
if(typeof objSelected ==='object' && Array.isArray(objSelected)){
sjd = objSelected;
}else{
if(!this.defaultValue||this.defaultValue.length==0) return;
sjd = this.defaultValue;
}
let typeindex = typeof sjd[0];
if(dNum===0) return;
if(typeindex === 'number'){
if (dNum === 1) {
let itemIndex = sjd[0];
if(typeof itemIndex === 'number' && !isNaN(itemIndex) ){
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
}
return
}else if(dNum > 1){
let index = 1;
async function tests() {
if(index > dNum) return;
let itemIndex = t.defaultValue[index];
if(typeof itemIndex === 'number' && !isNaN(itemIndex) &&typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
await uni.$tm.sleep(30)
t.$set(t.listIndex[index], 'itemIndex', itemIndex);
t.chulisdata();
index++;
await tests();
}
}
let itemIndex = sjd[0];
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
this.chulisdata();
await tests()
}
}else if(typeindex === 'string'){
if(this.dataType==='string'){
if (dNum === 1) {
let valueStr = sjd[0];
if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
return;
}
let itemIndex = this.listData[0].indexOf(valueStr)
if(itemIndex>-1){
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
}
return
}
}else if(this.dataType === 'object'){
if (dNum === 1) {
let valueStr = sjd[0];
if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
return;
}
let itemIndex = this.listData[0].findIndex(item=>{
return item[t.rangKey] == valueStr;
})
if(itemIndex>-1){
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
}
return
}else if(dNum>1){
let index = 0;
async function tests() {
if(index > dNum) return;
if(typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
let valueStr = t.defaultValue[index];
if(typeof valueStr !=='string' || typeof valueStr ==='undefined' || valueStr ==null){
return;
}
let itemIndex = t.listData[index].findIndex(item=>{
return item[t.rangKey] == valueStr;
})
if(itemIndex>-1){
await uni.$tm.sleep(30)
t.$set(t.listIndex[index], 'itemIndex', itemIndex);
t.chulisdata();
}
index++;
await tests();
}
}
await tests()
}
}
}else if(typeindex === 'object'){
if (dNum === 1) {
let valueStr = sjd[0];
if(typeof valueStr[t.rangKey] ==='undefined' || typeof valueStr !=='object' || typeof valueStr ==='undefined' || valueStr ==null){
return;
}
let itemIndex = this.listData[0].findIndex(item=>{
return (item[t.rangKey] == valueStr[t.rangKey])||(parseInt(item[t.rangKeyId]) == parseInt(valueStr[t.rangKeyId]));;
})
if(itemIndex>-1){
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
}
return
}else if(dNum>1){
let index = 0;
async function tests() {
if(index > dNum) return;
if(typeof t.listIndex[index] === 'object' && typeof t.listIndex[index] !=='undefined'){
let valueStr = t.defaultValue[index];
if(typeof valueStr[t.rangKey] ==='undefined' || typeof valueStr !=='object' || typeof valueStr ==='undefined' || valueStr ==null){
return;
}
let itemIndex = t.listData[index].findIndex(item=>{
return (item[t.rangKey] == valueStr[t.rangKey])||(parseInt(item[t.rangKeyId]) == parseInt(valueStr[t.rangKeyId]));
})
if(itemIndex>-1){
await uni.$tm.sleep(30)
t.$set(t.listIndex[index], 'itemIndex', itemIndex);
t.$set(t.listIndex[index], 'wz', itemIndex * t.itemHeight);
t.chulisdata();
}
index++;
await tests();
}
}
await tests()
}
}
},
change(e) {
let pl = [...e.detail.value];
this.pre_value =[...this.value_default];
if(this.disabled){
this.value_default = this.pre_value;
return;
}
let childrenIndex = 0;
for(let i=0;i<pl.length;i++){
if(this.listIndex[i].itemIndex !== pl[i]){
childrenIndex = this.listIndex[i].childrenIndex;
break;
}
}
this.childrenIndex = childrenIndex;
for(let i=childrenIndex;i<pl.length;i++){
if(this.listIndex[i]?.itemIndex !== pl[i]){
this.$set(this.listIndex[i],'itemIndex',pl[i])
}else{
this.$set(this.listIndex[i],'itemIndex',0)
pl[i] = 0;
}
}
this.chulisdata()
this.$nextTick(function(){
this.value_default = pl;
this.$emit("change",pl)
})
},
},
}
</script>
<style >
.tm-pickersView .tm-pickersBView-item-h{
height: 50px;
background-color: rgba(0,0,0,0.03);
width: calc(100% - 10px);
margin-left: 5px;
border-radius: 20rpx;
border: none;
}
.tm-pickersView .tm-pickersBView-item-h::after,.tm-pickersView .tm-pickersBView-item-h::before{
border: none;
}
.tm-pickersView .tm-pickersBView-wk{
position: relative;
width: 750rpx;
height: 500rpx;
}
.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.bk{
opacity: 0.4;
}
.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.active{
opacity: 1;
border-radius: 20rpx;
border: none;
background-color: rgba(0,0,0,0.06);
}
.tm-pickersView .tm-pickersBView-wk .tm-pickersBView-item.active.bk{
background-color: rgba(255,255,255,0.06);
}
</style>