999 lines
28 KiB
Vue
999 lines
28 KiB
Vue
<template>
|
||
<view class="tm-tree ">
|
||
<view v-for="(item, index) in list_c" :key="index">
|
||
<view :class="['text-size-s', 'py-16 ml-32']">
|
||
<view v-if="!item.isDir" class=" flex-start">
|
||
<view v-if="!read" @click.stop="changeCheckboxItem(item)" class="pr-12">
|
||
<tm-checkbox :fllowTheme="fllowTheme" :color="color_tmeme" :disabled="item['disabled']" dense
|
||
v-model="item.checked"></tm-checkbox>
|
||
</view>
|
||
<view class="flex-start">
|
||
<view v-if="item['icon']" class="pr-10">
|
||
<tm-icons :fllowTheme="fllowTheme" :color="color_tmeme" dense :name="item['icon']"
|
||
:size="32"></tm-icons>
|
||
</view>
|
||
<text :class="[`text-${item.checked ? color_tmeme : black_tmeme ? 'grey' : 'black'}`]"
|
||
class="text-size-n">{{ item["title"]||item["text"] }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.isDir" class="">
|
||
<view @click.stop="groupOpenChange(item)" class="flex-between">
|
||
<view class="flex-start">
|
||
<tm-icons :fllowTheme="fllowTheme" :color="color_tmeme"
|
||
:name="item.openDir ? dirIconList[1] : dirIconList[0]" :size="32"></tm-icons>
|
||
<view v-if="!read && mode=='multi'" @click.stop="changeCheckboxGroupItem(item)" class="px-12">
|
||
<tm-checkbox :icon="item['dirType']==3?'icon-minus':'icon-check'"
|
||
:fllowTheme="fllowTheme" :color="color_tmeme" :disabled="item['disabled']" dense
|
||
v-model="item.checked"></tm-checkbox>
|
||
</view>
|
||
<text
|
||
:class="[`text-${item.checked ? color_tmeme : black_tmeme ? 'grey' : 'black'}`, black_tmeme ? 'bk' : '']"
|
||
class="text-size-n">
|
||
{{ item["title"]||item["text"] }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.openDir && item['children'].length > 0" class="ml-24 flex-shrink border-l-1 "
|
||
:class="[black_tmeme ? 'bk' : '']" style="border-left-style: dotted;">
|
||
<tm-tree :mode="mode" :read="read" :fllowTheme="fllowTheme" :color="color_tmeme"
|
||
:dirOpenIcon="dirIconList[1]" :dirCloseIcon="dirIconList[0]" @changePrarent="changePrarent"
|
||
:list="item['children']" :prarent="item" @praentclear="preantchangClearChecked"></tm-tree>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 树状结构
|
||
* @property {Array} list = [] 默认数据列表。
|
||
* @property {Array} defalut-value = [] 默认选中的项，通过id的集合。
|
||
* @property {String} dirCloseIcon = [] 默认 'icon-caret-right'，关闭后的图标
|
||
* @property {String} dirOpenIcon = [] 默认 'icon-sort-down'，打开后的图标
|
||
* @property {String} color = [] 默认 'primary'，主题色
|
||
* @property {String} mode = [multi|radio] 默认 'multi'，多选或单选模式。
|
||
* @property {Boolean|String} read = [] 默认 false，是否只读，作为目录展示
|
||
*/
|
||
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
|
||
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
||
import tmTree from '@/tm-vuetify/components/tm-tree/tm-tree.vue';
|
||
|
||
export default {
|
||
name: 'tm-tree',
|
||
|
||
components: {
|
||
tmCheckbox,
|
||
tmTree,
|
||
tmIcons
|
||
},
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
},
|
||
defalutValue: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
dirCloseIcon: {
|
||
type: String,
|
||
default: 'icon-caret-right'
|
||
},
|
||
dirOpenIcon: {
|
||
type: String,
|
||
default: 'icon-sort-down'
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: 'primary'
|
||
},
|
||
//外部不允许使用。
|
||
prarent: {
|
||
type: Object,
|
||
default: () => null
|
||
},
|
||
// 跟随主题色的改变而改变。
|
||
fllowTheme: {
|
||
type: Boolean | String,
|
||
default: true
|
||
},
|
||
// 是否开启暗黑模式
|
||
black: {
|
||
type: String | Boolean,
|
||
default: null
|
||
},
|
||
read: {
|
||
type: Boolean | String,
|
||
default: false
|
||
},
|
||
mode:{
|
||
type:String,
|
||
default:'multi' //radio 单选 multi多选
|
||
}
|
||
},
|
||
watch: {
|
||
list: {
|
||
deep: true,
|
||
handler() {
|
||
this.list_c = this.list;
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
black_tmeme: function() {
|
||
if (this.black !== null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
},
|
||
color_tmeme: function() {
|
||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
|
||
.fllowTheme) {
|
||
return this.$tm.vx.state().tmVuetify.color;
|
||
}
|
||
return this.color;
|
||
},
|
||
dirIconList: function() {
|
||
return [this.dirCloseIcon, this.dirOpenIcon];
|
||
},
|
||
list_c: {
|
||
get() {
|
||
return this.listData;
|
||
},
|
||
set(val) {
|
||
this.chulilist(val);
|
||
let rulst = this.getCheckedArray();
|
||
this.$emit('change', rulst);
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showContent: true,
|
||
listData: []
|
||
};
|
||
},
|
||
mounted() {
|
||
this.list_c = this.list;
|
||
this.setDefaultSelectedKey();
|
||
},
|
||
methods: {
|
||
groupOpenChange(item) {
|
||
if (item['disabled'] === true) return;
|
||
this.$nextTick(function() {
|
||
let p = !item.openDir;
|
||
|
||
this.list_c = this.setChildListData(this.list_c, item, 'openDir', !item.openDir);
|
||
});
|
||
},
|
||
// 子项目点击选中切换。
|
||
changeCheckboxItem(item) {
|
||
if (item['disabled'] === true || this.prarent?.disabled === true) return;
|
||
this.$nextTick(function() {
|
||
this.list_c = this.setChildListData(this.list_c, item, 'checked', item.checked);
|
||
if(this.mode=="radio"){
|
||
this.clearChecked()
|
||
item.checked = true;
|
||
this.$emit('praentclear',item);
|
||
|
||
if(!this.prarent){
|
||
this.preantchangClearChecked(item)
|
||
}
|
||
return;
|
||
}
|
||
this.$nextTick(function() {
|
||
if (this.prarent) {
|
||
//递归修改父节点。
|
||
let p = {
|
||
...this.prarent
|
||
};
|
||
p.children = [...this.list_c];
|
||
let prenatKeyArray = this.getChildrenKeyToArray(p, 'checked');
|
||
let isAllChecked = true; //是否全部选中。
|
||
let isAllChecked_min = true; //是否半选中。
|
||
let isAllCheckedAr_all_true = prenatKeyArray.filter((el, eindex) => {
|
||
return el == true;
|
||
})
|
||
let isAllCheckedAr_all_false = prenatKeyArray.filter((el, eindex) => {
|
||
return el == false;
|
||
})
|
||
isAllChecked = isAllCheckedAr_all_true.length === prenatKeyArray.length ?
|
||
true : false;
|
||
isAllChecked_min = isAllCheckedAr_all_true.length > 0 &&
|
||
isAllCheckedAr_all_false.length > 0 ? true : false;
|
||
|
||
p['children'] = this.checkAllChildren(p['children']);
|
||
if (isAllChecked) {
|
||
p['dirType'] = 2;
|
||
}
|
||
if (isAllChecked_min) {
|
||
p['dirType'] = 3;
|
||
}
|
||
if (isAllCheckedAr_all_true.length == 0) {
|
||
p['dirType'] = 1;
|
||
}
|
||
isAllChecked = isAllChecked_min || isAllChecked ? true : false;
|
||
p['checked'] = isAllChecked;
|
||
|
||
|
||
// let prenatKeyArray = this.getChildrenKeyToArray(p, 'checked');
|
||
// let isAllChecked = true;
|
||
// for (let i = 0; i < prenatKeyArray.length; i++) {
|
||
// if (prenatKeyArray[i] === false) {
|
||
// isAllChecked = false;
|
||
// break;
|
||
// }
|
||
// }
|
||
// p.checked = isAllChecked;
|
||
|
||
this.$emit('changePrarent', p);
|
||
|
||
}else{
|
||
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//收到子节点修改父节点的请求。
|
||
changePrarent(item) {
|
||
|
||
this.$nextTick(function() {
|
||
let index = this.list_c.findIndex(ix => ix.id === item.id);
|
||
this.list_c.splice(index, 1, item);
|
||
|
||
if (this.prarent) {
|
||
if (item['disabled'] === true) return;
|
||
if (this.prarent['disabled'] === true) return;
|
||
|
||
// 再反递归，修改它的上一级，一直类推到第一级。
|
||
let p = {
|
||
...this.prarent
|
||
};
|
||
p.children = [...this.list_c];
|
||
let prenatKeyArray = this.getChildrenKeyToArray(p, 'checked');
|
||
let isAllChecked = true; //是否全部选中。
|
||
let isAllChecked_min = true; //是否半选中。
|
||
let isAllCheckedAr_all_true = prenatKeyArray.filter((el, eindex) => {
|
||
return el == true;
|
||
})
|
||
let isAllCheckedAr_all_false = prenatKeyArray.filter((el, eindex) => {
|
||
return el == false;
|
||
})
|
||
isAllChecked = isAllCheckedAr_all_true.length === prenatKeyArray.length ? true : false;
|
||
isAllChecked_min = isAllCheckedAr_all_true.length > 0 && isAllCheckedAr_all_false.length >
|
||
0 ? true : false;
|
||
p['children'] = this.checkAllChildren(p['children']);
|
||
if (isAllChecked) {
|
||
p['dirType'] = 2;
|
||
}
|
||
if (isAllChecked_min) {
|
||
p['dirType'] = 3;
|
||
}
|
||
if (isAllCheckedAr_all_true.length == 0) {
|
||
p['dirType'] = 1;
|
||
}
|
||
isAllChecked = isAllChecked_min || isAllChecked ? true : false;
|
||
p['checked'] = isAllChecked;
|
||
|
||
this.$emit('changePrarent', p);
|
||
|
||
} else {
|
||
// 第一级。
|
||
let rulst = this.getCheckedArray();
|
||
this.$emit('change', rulst);
|
||
|
||
}
|
||
});
|
||
},
|
||
//收到子节点请求清空所有选择，并设置某个属性
|
||
preantchangClearChecked(item){
|
||
|
||
if(!this.prarent){
|
||
|
||
this.clearChecked();
|
||
if(item){
|
||
let t = this
|
||
if(typeof item == 'object' && !Array.isArray(item)){
|
||
setTimeout(function(){
|
||
t.setDefaultSelectedKey([item.id])
|
||
},150)
|
||
}else if(typeof item == 'object' && Array.isArray(item)){
|
||
setTimeout(function(){
|
||
t.setDefaultSelectedKey([...item])
|
||
},150)
|
||
}
|
||
}
|
||
}else{
|
||
|
||
this.$emit('praentclear',item);
|
||
}
|
||
},
|
||
//设置某一个key的属性。
|
||
/**
|
||
* @param {Object} list 目标数组
|
||
* @param {Object} item 待修改的对象（根据item.id修改）
|
||
* @param {Object} key 待修改的字段名称
|
||
* @param {Object} value 待修改的字段变量。
|
||
*/
|
||
setChildListData(list, item, key, value) {
|
||
let parar = [...list];
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children) && children.length>0) {
|
||
let xg = {};
|
||
if (item.id === objAr.id) {
|
||
|
||
if(key=='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
}
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
openDir: objAr['openDir'] || false,
|
||
dirType: objAr['dirType'] || 1,
|
||
children: ch(children),
|
||
...xg
|
||
};
|
||
} else {
|
||
let xg = {};
|
||
|
||
if (item.id === objAr.id) {
|
||
|
||
if(objAr!='checked'){
|
||
if(item['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
}
|
||
let isDir = false;
|
||
if (typeof objAr['isDir'] === 'boolean') isDir = objAr['isDir'];
|
||
if (typeof objAr['children'] === 'object' && Array.isArray(objAr['children']) && children.length>0) {
|
||
if (objAr['children'].length > 0) {
|
||
isDir = true;
|
||
}
|
||
}
|
||
return {
|
||
...objAr,
|
||
isDir: isDir || false,
|
||
checked: objAr['checked'] || false,
|
||
...xg
|
||
};
|
||
}
|
||
}
|
||
}
|
||
return ch(parar);
|
||
},
|
||
//通过key的唯一属性取得子集。
|
||
/**
|
||
* @param {Object} item 目标数组
|
||
* @param {Object} key 筛选的字段名称
|
||
* @param {Object} value 筛选的的字段变量。
|
||
*/
|
||
getChildren(item, key, value) {
|
||
let parar = [...item];
|
||
|
||
function ch(objAr) {
|
||
let p = null;
|
||
if (typeof objAr == 'object' && Array.isArray(objAr) && objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p = ch(objAr[i]);
|
||
if (p) {
|
||
break;
|
||
}
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children) && children.length>0) {
|
||
if (objAr[key] == value) {
|
||
return objAr;
|
||
}
|
||
p = ch(objAr.children);
|
||
if (p) {
|
||
return p;
|
||
}
|
||
return false;
|
||
} else {
|
||
if (objAr[key] == value) {
|
||
return objAr;
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
return ch(parar);
|
||
},
|
||
|
||
//取得子集下所有相同属性的集合。根据指定key的变量条件取得。
|
||
getChildrenKeyToArrayByvalue(item, quereyKey, key, value) {
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(...ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
if (objAr[key] === value) {
|
||
return [objAr[quereyKey], ...ch(children)];
|
||
}
|
||
return [];
|
||
} else {
|
||
if (objAr[key] === value) {
|
||
return [objAr[quereyKey]];
|
||
}
|
||
return [];
|
||
}
|
||
}
|
||
}
|
||
let ru = [];
|
||
//添加父节点。
|
||
if (item[key] === value) {
|
||
ru.push(item[quereyKey]);
|
||
}
|
||
|
||
if(typeof item =='object' && Array.isArray() && item?.children.lenght>0){
|
||
let parar = [...item];
|
||
ru = [...ru, ...ch(parar)];
|
||
}
|
||
if(typeof item =='object' && !Array.isArray()&& Array.isArray(item?.children)){
|
||
|
||
let parar = [...item?.children];
|
||
ru = [...ru, ...ch(parar)];
|
||
}
|
||
|
||
if(typeof item?.id == 'underfined'){
|
||
return []
|
||
}
|
||
return ru;
|
||
},
|
||
//取得子集下所有相同属性的集合。
|
||
getChildrenKeyToArray(item, key) {
|
||
let parar = [...item.children];
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(...ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
return [objAr[key], ...ch(children)];
|
||
} else {
|
||
return [objAr[key]];
|
||
}
|
||
}
|
||
}
|
||
return ch(parar);
|
||
},
|
||
//打开某一项目录。通过id进行控制打开。
|
||
/**
|
||
* @param {Object} id 目录id,如果不是目录，不会执行。
|
||
* @param {Object} dirType 打开类型：true,打开，close关闭。
|
||
*/
|
||
__openDir(id, dirType = true) {
|
||
//子节点不允许操作此函数。
|
||
if (this.prarent == null) {
|
||
let children = this.getChildren(this.list_c, 'id', id);
|
||
if (children['isDir']) {
|
||
children['openDir'] = dirType;
|
||
this.setDirListData(children, 'openDir', dirType);
|
||
}
|
||
}
|
||
},
|
||
//打开所有折叠.
|
||
__openAll(){
|
||
// this.setDirListData(this.list_c, 'openDir', true);
|
||
for(let i=0;i<this.list_c.length;i++){
|
||
this.__openDir(this.list_c[i].id,true)
|
||
}
|
||
},
|
||
//获取当前列表数据。子级不能调用。
|
||
__getListdata() {
|
||
if (this.prarent) return [];
|
||
return this.list_c;
|
||
},
|
||
//添加数据。子级不可调用。
|
||
//注意：如果提供的id是dir则在其子集中添加数据。因此如果想在本级添加数据需要提供父级id.
|
||
//如果提供的id不是目录id,那么会自动创建它的子集。
|
||
__addData(id, data = null) {
|
||
if (this.prarent) return [];
|
||
if (!data || typeof data != 'object') return;
|
||
//不提供id默认在根目录添加数据追加。
|
||
if (typeof id === 'undefined' || id == null || id == '') {
|
||
let cp = uni.$tm.deepClone(this.list_c);
|
||
cp.push(...data);
|
||
|
||
this.list_c = cp;
|
||
} else {
|
||
let ps = uni.$tm.deepClone(this.list_c);
|
||
for (let i = 0; i < ps.length; i++) {
|
||
let children = this.getChildren(ps, 'id', id);
|
||
//如果是目录，向其子集添加数据。
|
||
if (children['isDir']) {
|
||
children['children'].push(...data);
|
||
this.list_c = this.setChildListData(ps, children, 'children', children['children']);
|
||
|
||
//不是目录。它没有子集。创建子集。
|
||
} else {
|
||
children = {
|
||
...children,
|
||
isDir: true,
|
||
children: [...data]
|
||
};
|
||
|
||
ps = this.setChildListData(ps, children, 'isDir', true);
|
||
ps = this.setChildListData(ps, children, 'children', children['children']);
|
||
this.list_c = ps;
|
||
}
|
||
if (children) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 项目父节点击选中切换。
|
||
changeCheckboxGroupItem(item) {
|
||
if (item['disabled'] === true) return;
|
||
let t = this;
|
||
t.setDirListData(item, 'checked', item.checked);
|
||
if (t.prarent) {
|
||
let p = {
|
||
...t.prarent
|
||
};
|
||
p.children = [...t.list_c];
|
||
|
||
let prenatKeyArray = this.getChildrenKeyToArray(p, 'checked');
|
||
let isAllChecked = true; //是否全部选中。
|
||
let isAllChecked_min = true; //是否半选中。
|
||
let isAllCheckedAr_all_true = prenatKeyArray.filter((el, eindex) => {
|
||
return el == true;
|
||
})
|
||
let isAllCheckedAr_all_false = prenatKeyArray.filter((el, eindex) => {
|
||
return el == false;
|
||
})
|
||
isAllChecked = isAllCheckedAr_all_true.length === prenatKeyArray.length ? true : false;
|
||
isAllChecked_min = isAllCheckedAr_all_true.length > 0 && isAllCheckedAr_all_false.length > 0 ? true :
|
||
false;
|
||
|
||
p['children'] = this.checkAllChildren(p['children']);
|
||
if (isAllChecked) {
|
||
p['dirType'] = 2;
|
||
}
|
||
if (isAllChecked_min) {
|
||
p['dirType'] = 3;
|
||
}
|
||
if (isAllCheckedAr_all_true.length == 0) {
|
||
p['dirType'] = 1;
|
||
}
|
||
isAllChecked = isAllChecked_min || isAllChecked ? true : false;
|
||
p['checked'] = isAllChecked;
|
||
|
||
|
||
// let prenatKeyArray = t.getChildrenKeyToArray(p, 'checked');
|
||
// let isAllChecked = true;
|
||
// for (let i = 0; i < prenatKeyArray.length; i++) {
|
||
// if (prenatKeyArray[i] === false) {
|
||
// isAllChecked = false;
|
||
// break;
|
||
// }
|
||
// }
|
||
// p.checked = isAllChecked;
|
||
|
||
t.$emit('changePrarent', p);
|
||
}else{
|
||
|
||
this.$nextTick(function(){
|
||
this.list_c = this.checkAllChildren(this.list_c)
|
||
})
|
||
}
|
||
},
|
||
|
||
//设置dir下，所有子集相同的属性。
|
||
setDirListData(item, key, value, callback) {
|
||
let parar = uni.$tm.deepClone(item);
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
let xg = {};
|
||
if(key=='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
openDir: objAr['openDir'] || false,
|
||
dirType: objAr['dirType'] || 1,
|
||
children: ch(children),
|
||
...xg
|
||
};
|
||
} else {
|
||
let xg = {};
|
||
|
||
if(key=='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
isDir: objAr['isDir'] || false,
|
||
checked: objAr['checked'] || false,
|
||
...xg
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
let ts = ch(parar.children);
|
||
|
||
let new_list = this.setChildListData(this.list_c, item, 'children', ts);
|
||
this.list_c = [...new_list];
|
||
if (callback) {
|
||
callback();
|
||
}
|
||
},
|
||
|
||
chulilist(list) {
|
||
let parar = [...list];
|
||
//dirType=1，未选中，2选中，3有选中，有未选中的
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
dirType: objAr['dirType'] || 1,
|
||
openDir: objAr['openDir'] || false,
|
||
children: ch(children)
|
||
};
|
||
} else {
|
||
return {
|
||
...objAr,
|
||
isDir: objAr['isDir'] || false,
|
||
checked: objAr['checked'] || false
|
||
};
|
||
}
|
||
}
|
||
}
|
||
this.listData = ch(parar);
|
||
},
|
||
// 获取所有选中的条目指定条件的属性。id
|
||
/**
|
||
* @param {Object} key 需要取得的字段名称。 默认是id
|
||
* @param {Object} quereyKey 条件查询的字段。默认是checked即选中的条目字段
|
||
* @param {Object} value 条件查询的字段的变量。默认是true即选中的条目值
|
||
*/
|
||
getCheckedArray(key, quereyKey, value) {
|
||
key = typeof key === 'undefined' ? 'id' : key;
|
||
quereyKey = typeof quereyKey === 'undefined' ? 'checked' : quereyKey;
|
||
value = typeof value === 'undefined' ? true : value;
|
||
if (this.prarent) return;
|
||
let ps = uni.$tm.deepClone(this.list_c);
|
||
let rulst = [];
|
||
for (let i = 0; i < ps.length; i++) {
|
||
let idArray = this.getChildrenKeyToArrayByvalue(ps[i], key, quereyKey, value);
|
||
rulst.push(...idArray);
|
||
}
|
||
|
||
return rulst;
|
||
},
|
||
setDirListDataBySync(item, key, value) {
|
||
let parar = uni.$tm.deepClone(item);
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
let xg = {};
|
||
if(key=='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
openDir: objAr['openDir'] || false,
|
||
dirType: objAr['dirType'] || 1,
|
||
children: ch(children),
|
||
...xg
|
||
};
|
||
} else {
|
||
let xg = {};
|
||
if(key=='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
isDir: objAr['isDir'] || false,
|
||
checked: objAr['checked'] || false,
|
||
...xg
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
let ts = ch(parar.children);
|
||
|
||
let new_list = this.setChildListData(this.list_c, item, 'children', ts);
|
||
this.list_c = [...new_list];
|
||
},
|
||
//清空所有选择。
|
||
clearChecked() {
|
||
let ps = uni.$tm.deepClone(this.list_c);
|
||
for (let i = 0; i < ps.length; i++) {
|
||
ps[i].checked = false;
|
||
ps[i].dirType = 1;
|
||
let new_list = this.setChildListData(this.list_c, ps[i], 'checked', ps[i].checked);
|
||
this.list_c = [...new_list];
|
||
this.setDirListDataBySync(ps[i], 'checked', false);
|
||
}
|
||
},
|
||
//选中所有选择。
|
||
seletedAll() {
|
||
let ps = uni.$tm.deepClone(this.list_c);
|
||
for (let i = 0; i < ps.length; i++) {
|
||
ps[i].checked = true;
|
||
let new_list = this.setChildListData(this.list_c, ps[i], 'checked', ps[i].checked);
|
||
|
||
this.list_c = [...new_list];
|
||
this.setDirListDataBySync(ps[i], 'checked', true);
|
||
|
||
}
|
||
this.$nextTick(function() {
|
||
this.list_c = this.setDirListDataBySyncToDir(this.list_c, 'dirType', 2)
|
||
})
|
||
},
|
||
//给定一个数组设置它下面所有dir目录（只设置目录，不含其子级）相同的属性。
|
||
setDirListDataBySyncToDir(list, key, value) {
|
||
let new_list = uni.$tm.deepClone(list);
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
let xg = {};
|
||
|
||
if(objAr!='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
openDir: objAr['openDir'] || false,
|
||
dirType: objAr['dirType'] || 1,
|
||
children: ch(children),
|
||
...xg
|
||
};
|
||
} else {
|
||
let xg = {};
|
||
// xg[key] = value;
|
||
return {
|
||
...objAr,
|
||
isDir: objAr['isDir'] || false,
|
||
checked: objAr['checked'] || false,
|
||
...xg
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
for (let i = 0; i < new_list.length; i++) {
|
||
let parar = new_list[i];
|
||
parar[key] = value
|
||
parar['children'] = ch(parar.children);
|
||
}
|
||
return new_list;
|
||
},
|
||
//给定一个数组设置它下面所有项目相同的属性。
|
||
setDirListDataBySyncToItem(list, item, key, value) {
|
||
let parar = uni.$tm.deepClone(item);
|
||
|
||
function ch(objAr) {
|
||
let p = [];
|
||
if (typeof objAr == 'object' && Array.isArray(objAr)&& objAr.length>0) {
|
||
for (let i = 0; i < objAr.length; i++) {
|
||
p.push(ch(objAr[i]));
|
||
}
|
||
return p;
|
||
} else if (typeof objAr === 'object') {
|
||
let children = objAr['children'];
|
||
if (typeof children === 'object' && Array.isArray(children)&& children.length>0) {
|
||
let xg = {};
|
||
if(objAr!='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
checked: objAr['checked'] || false,
|
||
isDir: objAr['isDir'] || true,
|
||
openDir: objAr['openDir'] || false,
|
||
dirType: objAr['dirType'] || 1,
|
||
children: ch(children),
|
||
...xg
|
||
};
|
||
} else {
|
||
let xg = {};
|
||
if(objAr!='checked'){
|
||
if(objAr['disabled']!==true){
|
||
xg[key] = value;
|
||
}
|
||
}else{
|
||
xg[key] = value;
|
||
}
|
||
return {
|
||
...objAr,
|
||
isDir: objAr['isDir'] || false,
|
||
checked: objAr['checked'] || false,
|
||
...xg
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
let ts = ch(parar.children);
|
||
|
||
let new_list = this.setChildListData(list, item, 'children', ts);
|
||
return new_list;
|
||
},
|
||
//检查选择情况。
|
||
checkAllChildren(o_item) {
|
||
let t = this;
|
||
// 检查各个子集的选择情况。
|
||
// this.changePrarent(children)
|
||
// 再反递归，修改它的上一级，一直类推到第一级。
|
||
let otem = uni.$tm.deepClone(o_item);
|
||
let ls = [];
|
||
for (let j = 0; j < otem.length; j++) {
|
||
let pr = otem[j];
|
||
|
||
if (pr['isDir']) {
|
||
|
||
let prenatKeyArray = t.getChildrenKeyToArray(pr, 'checked');
|
||
|
||
let isAllChecked = true; //是否全部选中。
|
||
let isAllChecked_min = true; //是否半选中。
|
||
let isAllCheckedAr_all_true = prenatKeyArray.filter((el, eindex) => {
|
||
return el == true;
|
||
})
|
||
let isAllCheckedAr_all_false = prenatKeyArray.filter((el, eindex) => {
|
||
return el == false;
|
||
})
|
||
isAllChecked = isAllCheckedAr_all_true.length === prenatKeyArray.length ? true : false;
|
||
isAllChecked_min = isAllCheckedAr_all_true.length > 0 && isAllCheckedAr_all_false.length > 0 ?
|
||
true : false;
|
||
|
||
pr['children'] = t.checkAllChildren(pr['children']);
|
||
if (isAllChecked) {
|
||
pr['dirType'] = 2;
|
||
}
|
||
if (isAllChecked_min) {
|
||
pr['dirType'] = 3;
|
||
}
|
||
if (isAllCheckedAr_all_true.length == 0) {
|
||
pr['dirType'] = 1;
|
||
}
|
||
isAllChecked = isAllChecked_min || isAllChecked ? true : false;
|
||
pr['checked'] = isAllChecked;
|
||
|
||
}
|
||
|
||
ls.push(pr)
|
||
}
|
||
return ls;
|
||
|
||
},
|
||
setDefaultSelectedKey(defaultValue) {
|
||
let t = this;
|
||
if (!defaultValue) {
|
||
defaultValue = this.defalutValue;
|
||
}
|
||
let rulst = defaultValue;
|
||
if (this.prarent == null) {
|
||
//清空所有选择。
|
||
// this.clearChecked();
|
||
let ps = uni.$tm.deepClone(this.list_c);
|
||
for (let i = 0; i < rulst.length; i++) {
|
||
let children = this.getChildren(ps, 'id', rulst[i]);
|
||
children['checked'] = true;
|
||
if (children['isDir']) {
|
||
let index = ps.findIndex(ix => ix.id === children.id);
|
||
// this.list_c.splice(index, 1, children);
|
||
|
||
// this.changeCheckboxGroupItem(children)
|
||
ps = this.setDirListDataBySyncToItem(ps, children, 'checked', children.checked);
|
||
|
||
} else {
|
||
ps = this.setChildListData(ps, children, 'checked', children.checked);
|
||
}
|
||
}
|
||
let pc = [];
|
||
|
||
ps = this.checkAllChildren(ps);
|
||
|
||
this.$nextTick(function() {
|
||
this.list_c = ps;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss"></style>
|