简柏林 / thingskit-app · Commits

Commit 751942663eea0c9605a93d6b101db0aa553e95da

Authored by fengtao
1 parent 1c92ca26

style：优化了组织组件头部输入框未居中样式问题和底部确按钮样式未居中问题

Inline Side-by-side
Showing 3 changed files with 769 additions and 746 deletions
@@ -128,13 +128,18 @@ @@ -128,13 +128,18 @@
128 128
129 <style lang="scss" scoped> 129 <style lang="scss" scoped>
130 .filterBox { 130 .filterBox {
131 - padding: 15rpx 32rpx; 131 + padding: 15rpx 0rpx;
  132 + display: flex;
  133 + justify-content: center;
  134 + margin-left: -15rpx;
  135 +
132 136
133 .filter-input { 137 .filter-input {
134 height: 80rpx; 138 height: 80rpx;
135 display: flex; 139 display: flex;
136 align-items: center; 140 align-items: center;
137 padding-left: 40rpx; 141 padding-left: 40rpx;
  142 + width: 680rpx;
138 143
139 .filterImg { 144 .filterImg {
140 width: 32rpx; 145 width: 32rpx;
1 .flex_between_center { 1 .flex_between_center {
2 - display: flex;  
3 - justify-content: space-between;  
4 - align-items: center;  
5 - } 2 + display: flex;
  3 + justify-content: space-between;
  4 + align-items: center;
  5 +}
6 6
7 - .checkbox {  
8 - position: relative;  
9 - height: 36rpx;  
10 - margin-left: 10rpx;  
11 - margin-right: 0px;  
12 - width: 36rpx;  
13 - .color {  
14 - color: #00aaff;  
15 - background-color: #00aaff;  
16 - }  
17 - .txt {  
18 - // font-size: 30rpx;  
19 - line-height: 36rpx;  
20 - width: 100%;  
21 - height: 100%;  
22 - display: flex;  
23 - } 7 +.checkbox {
  8 + position: relative;
  9 + height: 36rpx;
  10 + margin-left: 10rpx;
  11 + margin-right: 0px;
  12 + width: 36rpx;
  13 + .color {
  14 + color: #00aaff;
  15 + background-color: #00aaff;
24 } 16 }
25 - .checkBorder {  
26 - border: 1px solid #ecdee4;  
27 - }  
28 - .header { 17 + .txt {
  18 + // font-size: 30rpx;
  19 + line-height: 36rpx;
29 width: 100%; 20 width: 100%;
30 - position: fixed;  
31 - background-color: #fff;  
32 - z-index: 9999;  
33 - .title {  
34 - height: 90rpx;  
35 - padding: 0 32rpx;  
36 - line-height: 90rpx;  
37 - font-size: 30rpx;  
38 - background-color: #f5f5f5;  
39 - color: #606064;  
40 - .iconclass {  
41 - display: inline-block;  
42 - margin: 0 12rpx;  
43 - color: #D0D4DB;  
44 - font-size: 28rpx;  
45 - } 21 + height: 100%;
  22 + display: flex;
  23 + }
  24 +}
  25 +.checkBorder {
  26 + border: 1px solid #ecdee4;
  27 +}
  28 +.header {
  29 + width: 100%;
  30 + position: fixed;
  31 + background-color: #fff;
  32 + z-index: 9999;
  33 + .title {
  34 + height: 90rpx;
  35 + padding: 0 32rpx;
  36 + line-height: 90rpx;
  37 + font-size: 30rpx;
  38 + background-color: #f5f5f5;
  39 + color: #606064;
  40 + .iconclass {
  41 + display: inline-block;
  42 + margin: 0 12rpx;
  43 + color: #d0d4db;
  44 + font-size: 28rpx;
46 } 45 }
47 } 46 }
48 - .container-list {  
49 - overflow-y: scroll;  
50 - overflow-x: hidden;  
51 - .common {  
52 - background-color: #fff;  
53 - border-bottom: 1rpx solid #f4f4f4;  
54 - padding-left: 10rpx;  
55 - .content {  
56 - display: flex;  
57 - align-items: center;  
58 - min-height: 60rpx;  
59 - width: 100%;  
60 - padding: 15rpx 0;  
61 - position: relative; 47 +}
  48 +.container-list {
  49 + overflow-y: scroll;
  50 + overflow-x: hidden;
  51 + .common {
  52 + background-color: #fff;
  53 + border-bottom: 1rpx solid #f4f4f4;
  54 + padding-left: 10rpx;
  55 + .content {
  56 + display: flex;
  57 + align-items: center;
  58 + min-height: 60rpx;
  59 + width: 100%;
  60 + padding: 15rpx 0;
  61 + position: relative;
  62 + font-size: 32rpx;
  63 +
  64 + .right {
  65 + position: absolute;
  66 + right: 30rpx;
  67 + color: #babdc3;
62 font-size: 32rpx; 68 font-size: 32rpx;
63 -  
64 - .right {  
65 - position: absolute;  
66 - right: 30rpx;  
67 - color: #babdc3;  
68 - font-size: 32rpx;  
69 - }  
70 } 69 }
71 } 70 }
72 - // item的数字样式  
73 - .word {  
74 - font-size: 30rpx;  
75 - color: #5b5757;  
76 - width: 500rpx;  
77 - word-break: break-all;  
78 - }  
79 - }  
80 - .active {  
81 - color: #4297ED !important;  
82 - }  
83 - .none {  
84 - color: #666666;  
85 - }  
86 - .icon-selected{  
87 - color: #0095F2!important;  
88 - font-size: 40rpx!important;  
89 } 71 }
90 - .icons{  
91 - color: #0095F2!important;  
92 - font-size: 40rpx!important;  
93 - }  
94 - .inline-item {  
95 - display: inline-block  
96 - }  
97 -  
98 - .content-item{  
99 - display: flex;  
100 - position: relative;  
101 - align-items: center; 72 + // item的数字样式
  73 + .word {
  74 + font-size: 30rpx;
  75 + color: #5b5757;
  76 + width: 500rpx;
  77 + word-break: break-all;
102 } 78 }
103 -  
104 - .box_sizing {  
105 - -webkit-box-sizing: border-box;  
106 - -moz-box-sizing: border-box;  
107 - box-sizing: border-box; 79 +}
  80 +.active {
  81 + color: #4297ed !important;
  82 +}
  83 +.none {
  84 + color: #666666;
  85 +}
  86 +.icon-selected {
  87 + color: #0095f2 !important;
  88 + font-size: 40rpx !important;
  89 +}
  90 +.icons {
  91 + color: #0095f2 !important;
  92 + font-size: 40rpx !important;
  93 +}
  94 +.inline-item {
  95 + display: inline-block;
  96 +}
  97 +
  98 +.content-item {
  99 + display: flex;
  100 + position: relative;
  101 + align-items: center;
  102 +}
  103 +
  104 +.box_sizing {
  105 + -webkit-box-sizing: border-box;
  106 + -moz-box-sizing: border-box;
  107 + box-sizing: border-box;
  108 +}
  109 +
  110 +.btn {
  111 + position: fixed;
  112 + bottom: 0rpx;
  113 + padding: 10px;
  114 + background-color: #fff;
  115 + width: 100%;
  116 +
  117 + .sureBtn {
  118 + background-color: #377dff;
  119 + color: #fff;
  120 + border-radius: 48px;
  121 + width: 500rpx;
108 } 122 }
109 -  
110 - .btn {  
111 - position: fixed;  
112 - bottom: 0rpx;  
113 - padding: 10px;  
114 - background-color: #fff;  
115 - width: 100%;  
116 -  
117 - .sureBtn {  
118 - background-color: #377DFF;  
119 - color: #fff;  
120 - border-radius: 48px;  
121 - width: 500rpx;  
122 - margin-left: 86rpx;  
123 - }  
124 - }  
  123 +}
@@ -3,700 +3,719 @@ @@ -3,700 +3,719 @@
3 <!-- 搜索框 --> 3 <!-- 搜索框 -->
4 <view class="header"> 4 <view class="header">
5 <!-- 搜索栏 --> 5 <!-- 搜索栏 -->
6 - <luyj-tree-search v-if="searchIf" :backgroundColor="searchBackgroundColor"  
7 - :inputBackgroundColor="searchInputBackgroundColor" :radius="searchRadius" :iconColor="searchIconColor"  
8 - :placeholder="searchPlaceholder" :placeholderStyle="searchPlaceholderStyle" :maxlength="searchMaxlength"  
9 - :clearable="searchClearable" @confirm="confirmSearch"></luyj-tree-search> 6 + <luyj-tree-search
  7 + v-if="searchIf"
  8 + :backgroundColor="searchBackgroundColor"
  9 + :inputBackgroundColor="searchInputBackgroundColor"
  10 + :radius="searchRadius"
  11 + :iconColor="searchIconColor"
  12 + :placeholder="searchPlaceholder"
  13 + :placeholderStyle="searchPlaceholderStyle"
  14 + :maxlength="searchMaxlength"
  15 + :clearable="searchClearable"
  16 + @confirm="confirmSearch"
  17 + ></luyj-tree-search>
10 <!-- 面包屑导航 --> 18 <!-- 面包屑导航 -->
11 - <luyj-tree-navigation :slabel="props.label" @inF="navigationInt" @clickItem="backTree">  
12 - </luyj-tree-navigation> 19 + <luyj-tree-navigation :slabel="props.label" @inF="navigationInt" @clickItem="backTree"></luyj-tree-navigation>
13 <!-- 面包屑导航 --> 20 <!-- 面包屑导航 -->
14 </view> 21 </view>
15 <!-- 列表 --> 22 <!-- 列表 -->
16 <view> 23 <view>
17 - <view class="container-list" :style="{'padding-bottom' : isCheck ? '160rpx' : 0 , 'padding-top' :searchIf ? '200rpx' :'90rpx' }">  
18 - <luyj-tree-item v-for="(item , index) in tree" :key="index" :item="item" :isCheck="isCheck"  
19 - :checkActiveColor="checkActiveColor" :checkNoneColor="checkNoneColor" :multiple="props.multiple" :checked="isChecked(item)"  
20 - :nodes="props.nodes" :comparison="comparison" @clickItem="toChildren"  
21 - @change="checkbox($event , item , index)"> 24 + <view class="container-list" :style="{ 'padding-bottom': isCheck ? '160rpx' : 0, 'padding-top': searchIf ? '200rpx' : '90rpx' }">
  25 + <luyj-tree-item
  26 + v-for="(item, index) in tree"
  27 + :key="index"
  28 + :item="item"
  29 + :isCheck="isCheck"
  30 + :checkActiveColor="checkActiveColor"
  31 + :checkNoneColor="checkNoneColor"
  32 + :multiple="props.multiple"
  33 + :checked="isChecked(item)"
  34 + :nodes="props.nodes"
  35 + :comparison="comparison"
  36 + @clickItem="toChildren"
  37 + @change="checkbox($event, item, index)"
  38 + >
22 <template slot="body"> 39 <template slot="body">
23 - <slot v-bind:item="item" v-bind:slotObj="slotObj" > 40 + <slot v-bind:item="item" v-bind:slotObj="slotObj">
24 <view class="word text-cut">{{ item[props.label] }}</view> 41 <view class="word text-cut">{{ item[props.label] }}</view>
25 </slot> 42 </slot>
26 </template> 43 </template>
27 </luyj-tree-item> 44 </luyj-tree-item>
28 </view> 45 </view>
29 </view> 46 </view>
30 - 47 +
31 <!-- 确定按钮 --> 48 <!-- 确定按钮 -->
32 - <view v-if="isCheck" class="btn box_sizing"> 49 + <view
  50 + v-if="isCheck"
  51 + class="btn box_sizing"
  52 + style="display: flex;
  53 + align-items: center;
  54 + justify-content: center;"
  55 + >
33 <button class="sureBtn" type="primary" @click="backConfirm">确认</button> 56 <button class="sureBtn" type="primary" @click="backConfirm">确认</button>
34 </view> 57 </view>
35 </view> 58 </view>
36 </template> 59 </template>
37 60
38 <script> 61 <script>
39 - /**  
40 - * luyj-tree 无限树形结构树、支持搜索选择。  
41 - * @description 无限树形结构组件。支持搜索、选择(包括单选、多选)。面包屑类型导航。原插件地址：https://ext.dcloud.net.cn/plugin?id=2423。  
42 - * @tutorial url https://ext.dcloud.net.cn/plugin?name=luyj-tree  
43 - * @property {Boolean} searchIf 是否开启搜索 （默认值true）  
44 - * @property {String} searchBackgroundColor 搜索框背景色(默认#FFFFFF)  
45 - * @property {String} searchInputBackgroundColor 搜索框的输入框背景色(默认#EEEFF0)  
46 - * @property {Number} searchRadius 搜索框的圆角值，单位rpx（默认40）  
47 - * @property {String} searchPlaceholder 搜索框的内容物空时提示内容  
48 - * @property {String} searchPlaceholderStyle 搜索框的placehoder的样式  
49 - * @property {Number} searchMaxlength 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度  
50 - * @property {String} searchIconColor 搜索框的图标颜色（默认#B8B8B8）  
51 - * @property {Boolean} searchClearable 搜索框是否显示清除按钮  
52 - * @property {Array} trees 传入的树形结构，每个对象必须包含唯一的id值(默认值【】)  
53 - * @property {Boolean} isCheck 是否开启选择操作（默认值false）  
54 - * @property {Object} slotObj 传入插槽的参数（因为插槽进行了循环，不能直接引用页面的参数，需要传递）  
55 - * @property {Array} checkList 选中列表  
56 - * @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)  
57 - * @property {Array} parentList 父级列表  
58 - * @property {String} checkActiveColor 选中时单选框的颜色 (默认#00AAFF)  
59 - * @property {String} checkNoneColor 未选中时单选框的颜色（默认#B8B8B8)  
60 - * @property {Object} props 参数配置。  
61 - * @property {String} id id列的属性名称  
62 - * @param {String} label 指定选项标签为选项对象的某个属性值(默认值:name)  
63 - * @param {String} children 指定选项的子选项为选项对象的某个属性名(默认值：children)  
64 - * @param {Boolean} multiple 值为true时为多选，为false时是单选(默认值true)  
65 - * @param {Boolean} checkStrictly(废弃) 需要在多选模式下才传该值，checkStrictly为false时，可让父子节点取消关联，选择任意一级选项。为true时关联子级，可以全选(默认值为false)  
66 - * @param {Boolean} nodes 在单选模式下，nodes为false时，可以选择任意一级选项，nodes为true时，只能选择叶子节点(默认值为true)  
67 - * @property {Boolean} stepReload 是否“分页加载”数据  
68 - * @property {Number} pageSize 分步加载生效时（当条数过大时，反应时间很长）  
69 - * @return {Function} clickItem 点击导航栏事件  
70 - * @value item 当前选中的item值  
71 - * @value realHasChildren 是否包含子级  
72 - * @event {Function()} change 改变选择值时的方法  
73 - * @event {Function()} sendValue 提交选择的方法  
74 - * @event {Function()} backTree 选中导航栏时，返回其他层  
75 - */  
76 - export default {  
77 - name: "luyj-tree",  
78 - props: {  
79 - // 是否开启搜索  
80 - searchIf: {  
81 - type: Boolean,  
82 - default: () => true  
83 - },  
84 - // 搜索框背景色  
85 - searchBackgroundColor: {  
86 - type: String,  
87 - default: '#FFFFFF'  
88 - },  
89 - // 搜索框的输入框内背景颜色  
90 - searchInputBackgroundColor: {  
91 - type: String,  
92 - default: '#EEEFF0'  
93 - },  
94 - // 搜索框的图标的颜色  
95 - searchIconColor: {  
96 - type: String,  
97 - default: '#B8B8B8'  
98 - },  
99 - // 搜索框的圆角值，单位rpx  
100 - searchRadius: {  
101 - type: Number,  
102 - default: 40  
103 - },  
104 - // 搜索框的提示placeholder内容  
105 - searchPlaceholder: {  
106 - type: String,  
107 - default: '搜索'  
108 - },  
109 - // 搜索框的placeholder的样式  
110 - searchPlaceholderStyle: {  
111 - type: String,  
112 - default: ''  
113 - },  
114 - // 搜索框最大输入长度 ,设置为 -1 的时候不限制最大长度  
115 - searchMaxlength: {  
116 - type: Number,  
117 - default: 140  
118 - },  
119 - // 搜索框是否显示清除按钮  
120 - searchClearable: {  
121 - type: Boolean,  
122 - default: true  
123 - },  
124 - // 传入的树形结构数据，每个对象必须包含唯一的id值  
125 - trees: {  
126 - type: Array,  
127 - default: () => {  
128 - return []  
129 - }  
130 - },  
131 - //是否开启选择操作，值为false时仅展示，无操作  
132 - isCheck: {  
133 - type: Boolean,  
134 - default: () => {  
135 - return false  
136 - }  
137 - },  
138 - // 传入插槽的其他参数  
139 - slotObj: {  
140 - type: Object,  
141 - default :() =>{  
142 - return null;  
143 - }  
144 - },  
145 - // 选中列表  
146 - checkList: {  
147 - type: Array,  
148 - default: () => []  
149 - },  
150 - // 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)  
151 - parent: {  
152 - type: Boolean,  
153 - default: () => {  
154 - return false  
155 - }  
156 - },  
157 - // 父级列表  
158 - parentList: {  
159 - type: Array,  
160 - default: () => []  
161 - },  
162 - // 选中时单选框的颜色  
163 - checkActiveColor: {  
164 - type: String,  
165 - default: '#00AAFF'  
166 - },  
167 - // 未选中时单选框的颜色  
168 - checkNoneColor: {  
169 - type: String,  
170 - default: '#B8B8B8'  
171 - },  
172 - // 树的属性参数  
173 - props: {  
174 - type: Object,  
175 - default: () => {  
176 - return {  
177 - id: 'id',  
178 - label: 'name',  
179 - children: 'children',  
180 - multiple: false,  
181 - checkStrictly: false, //不关联  
182 - nodes: false, // nodes为false时，可以选择任意一级选项；nodes为true时只能选择叶子节点  
183 - }  
184 - }  
185 - },  
186 - /**  
187 - * 是否懒加载树的值  
188 - */  
189 - stepReload : {  
190 - type:Boolean,  
191 - default:false  
192 - },  
193 - // 每次循环加载的item的数据量  
194 - pageSize : {  
195 - type : Number,  
196 - default:50 62 +/**
  63 + * luyj-tree 无限树形结构树、支持搜索选择。
  64 + * @description 无限树形结构组件。支持搜索、选择(包括单选、多选)。面包屑类型导航。原插件地址：https://ext.dcloud.net.cn/plugin?id=2423。
  65 + * @tutorial url https://ext.dcloud.net.cn/plugin?name=luyj-tree
  66 + * @property {Boolean} searchIf 是否开启搜索 （默认值true）
  67 + * @property {String} searchBackgroundColor 搜索框背景色(默认#FFFFFF)
  68 + * @property {String} searchInputBackgroundColor 搜索框的输入框背景色(默认#EEEFF0)
  69 + * @property {Number} searchRadius 搜索框的圆角值，单位rpx（默认40）
  70 + * @property {String} searchPlaceholder 搜索框的内容物空时提示内容
  71 + * @property {String} searchPlaceholderStyle 搜索框的placehoder的样式
  72 + * @property {Number} searchMaxlength 搜索框的最大输入长度 ,设置为 -1 的时候不限制最大长度
  73 + * @property {String} searchIconColor 搜索框的图标颜色（默认#B8B8B8）
  74 + * @property {Boolean} searchClearable 搜索框是否显示清除按钮
  75 + * @property {Array} trees 传入的树形结构，每个对象必须包含唯一的id值(默认值【】)
  76 + * @property {Boolean} isCheck 是否开启选择操作（默认值false）
  77 + * @property {Object} slotObj 传入插槽的参数（因为插槽进行了循环，不能直接引用页面的参数，需要传递）
  78 + * @property {Array} checkList 选中列表
  79 + * @property {Boolean} parent 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)(默认值false)
  80 + * @property {Array} parentList 父级列表
  81 + * @property {String} checkActiveColor 选中时单选框的颜色 (默认#00AAFF)
  82 + * @property {String} checkNoneColor 未选中时单选框的颜色（默认#B8B8B8)
  83 + * @property {Object} props 参数配置。
  84 + * @property {String} id id列的属性名称
  85 + * @param {String} label 指定选项标签为选项对象的某个属性值(默认值:name)
  86 + * @param {String} children 指定选项的子选项为选项对象的某个属性名(默认值：children)
  87 + * @param {Boolean} multiple 值为true时为多选，为false时是单选(默认值true)
  88 + * @param {Boolean} checkStrictly(废弃) 需要在多选模式下才传该值，checkStrictly为false时，可让父子节点取消关联，选择任意一级选项。为true时关联子级，可以全选(默认值为false)
  89 + * @param {Boolean} nodes 在单选模式下，nodes为false时，可以选择任意一级选项，nodes为true时，只能选择叶子节点(默认值为true)
  90 + * @property {Boolean} stepReload 是否“分页加载”数据
  91 + * @property {Number} pageSize 分步加载生效时（当条数过大时，反应时间很长）
  92 + * @return {Function} clickItem 点击导航栏事件
  93 + * @value item 当前选中的item值
  94 + * @value realHasChildren 是否包含子级
  95 + * @event {Function()} change 改变选择值时的方法
  96 + * @event {Function()} sendValue 提交选择的方法
  97 + * @event {Function()} backTree 选中导航栏时，返回其他层
  98 + */
  99 +export default {
  100 + name: 'luyj-tree',
  101 + props: {
  102 + // 是否开启搜索
  103 + searchIf: {
  104 + type: Boolean,
  105 + default: () => true
  106 + },
  107 + // 搜索框背景色
  108 + searchBackgroundColor: {
  109 + type: String,
  110 + default: '#FFFFFF'
  111 + },
  112 + // 搜索框的输入框内背景颜色
  113 + searchInputBackgroundColor: {
  114 + type: String,
  115 + default: '#EEEFF0'
  116 + },
  117 + // 搜索框的图标的颜色
  118 + searchIconColor: {
  119 + type: String,
  120 + default: '#B8B8B8'
  121 + },
  122 + // 搜索框的圆角值，单位rpx
  123 + searchRadius: {
  124 + type: Number,
  125 + default: 40
  126 + },
  127 + // 搜索框的提示placeholder内容
  128 + searchPlaceholder: {
  129 + type: String,
  130 + default: '搜索'
  131 + },
  132 + // 搜索框的placeholder的样式
  133 + searchPlaceholderStyle: {
  134 + type: String,
  135 + default: ''
  136 + },
  137 + // 搜索框最大输入长度 ,设置为 -1 的时候不限制最大长度
  138 + searchMaxlength: {
  139 + type: Number,
  140 + default: 140
  141 + },
  142 + // 搜索框是否显示清除按钮
  143 + searchClearable: {
  144 + type: Boolean,
  145 + default: true
  146 + },
  147 + // 传入的树形结构数据，每个对象必须包含唯一的id值
  148 + trees: {
  149 + type: Array,
  150 + default: () => {
  151 + return [];
197 } 152 }
198 }, 153 },
199 - data() {  
200 - return {  
201 - // 导航条  
202 - setIsre: null, // 导航条方法 - 设置是否搜索中方法  
203 - getIsre : null, // 获取是否搜索中  
204 - setTreeStack: null, // 导航条 - 设置导航  
205 - concatTreeStack: null, // 导航条 - 拼接当前导航对象  
206 - clearTreeStack: null, // 导航条- 清空导航条  
207 - getTreeStack: null, // 导航条 - 获取导航条  
208 -  
209 - itemsLoading : false, // item是否在循环渲染中  
210 - itemsStop : false, // 是否终止其他渲染  
211 - tree: [], // 默认数组  
212 - newNum: 0,  
213 - oldNum: 0,  
214 - allData: this.trees,  
215 - parent_data: this.parentList || [], //选择父辈  
216 - searchResult: [],  
217 - newCheckList: this.checkList,  
218 - nodePathArray: [], // 当前展示的路径  
219 - // item名称对照表  
220 - comparison: {  
221 - value: this.props.id ? this.props.id : 'id', // 选中值名称  
222 - label: this.props.label ? this.props.label : 'name', // 显示名称  
223 - children: this.props.children ? this.props.children : 'children', // 子集名称  
224 - } 154 + //是否开启选择操作，值为false时仅展示，无操作
  155 + isCheck: {
  156 + type: Boolean,
  157 + default: () => {
  158 + return false;
  159 + }
  160 + },
  161 + // 传入插槽的其他参数
  162 + slotObj: {
  163 + type: Object,
  164 + default: () => {
  165 + return null;
  166 + }
  167 + },
  168 + // 选中列表
  169 + checkList: {
  170 + type: Array,
  171 + default: () => []
  172 + },
  173 + // 当子级全选时,是否选中父级数据(prop.checkStrictly为true时生效)
  174 + parent: {
  175 + type: Boolean,
  176 + default: () => {
  177 + return false;
225 } 178 }
226 }, 179 },
227 - watch: {  
228 - // 监听数据值的变化  
229 - trees: function(val, oldval) {  
230 - if (val != oldval) {  
231 - var tree_stack = this.getTreeStack();  
232 - this.allData = val; // 重新加载所有树  
233 - // 重新加载当前树  
234 - if(!Array.isArray(tree_stack)){  
235 - this.loadTree(val);  
236 - return; 180 + // 父级列表
  181 + parentList: {
  182 + type: Array,
  183 + default: () => []
  184 + },
  185 + // 选中时单选框的颜色
  186 + checkActiveColor: {
  187 + type: String,
  188 + default: '#00AAFF'
  189 + },
  190 + // 未选中时单选框的颜色
  191 + checkNoneColor: {
  192 + type: String,
  193 + default: '#B8B8B8'
  194 + },
  195 + // 树的属性参数
  196 + props: {
  197 + type: Object,
  198 + default: () => {
  199 + return {
  200 + id: 'id',
  201 + label: 'name',
  202 + children: 'children',
  203 + multiple: false,
  204 + checkStrictly: false, //不关联
  205 + nodes: false // nodes为false时，可以选择任意一级选项；nodes为true时只能选择叶子节点
  206 + };
  207 + }
  208 + },
  209 + /**
  210 + * 是否懒加载树的值
  211 + */
  212 + stepReload: {
  213 + type: Boolean,
  214 + default: false
  215 + },
  216 + // 每次循环加载的item的数据量
  217 + pageSize: {
  218 + type: Number,
  219 + default: 50
  220 + }
  221 + },
  222 + data() {
  223 + return {
  224 + // 导航条
  225 + setIsre: null, // 导航条方法 - 设置是否搜索中方法
  226 + getIsre: null, // 获取是否搜索中
  227 + setTreeStack: null, // 导航条 - 设置导航
  228 + concatTreeStack: null, // 导航条 - 拼接当前导航对象
  229 + clearTreeStack: null, // 导航条- 清空导航条
  230 + getTreeStack: null, // 导航条 - 获取导航条
  231 +
  232 + itemsLoading: false, // item是否在循环渲染中
  233 + itemsStop: false, // 是否终止其他渲染
  234 + tree: [], // 默认数组
  235 + newNum: 0,
  236 + oldNum: 0,
  237 + allData: this.trees,
  238 + parent_data: this.parentList || [], //选择父辈
  239 + searchResult: [],
  240 + newCheckList: this.checkList,
  241 + nodePathArray: [], // 当前展示的路径
  242 + // item名称对照表
  243 + comparison: {
  244 + value: this.props.id ? this.props.id : 'id', // 选中值名称
  245 + label: this.props.label ? this.props.label : 'name', // 显示名称
  246 + children: this.props.children ? this.props.children : 'children' // 子集名称
  247 + }
  248 + };
  249 + },
  250 + watch: {
  251 + // 监听数据值的变化
  252 + trees: function(val, oldval) {
  253 + if (val != oldval) {
  254 + var tree_stack = this.getTreeStack();
  255 + this.allData = val; // 重新加载所有树
  256 + // 重新加载当前树
  257 + if (!Array.isArray(tree_stack)) {
  258 + this.loadTree(val);
  259 + return;
  260 + }
  261 + var length = tree_stack.length;
  262 + if (length === 0) {
  263 + if (typeof this.getIsre === 'function') {
  264 + if (this.getIsre()) {
  265 + return;
  266 + }
237 } 267 }
238 - var length = tree_stack.length;  
239 - if( length === 0){  
240 - if(typeof(this.getIsre) === "function"){  
241 - if(this.getIsre()){  
242 - return;  
243 - } 268 + this.loadTree(val);
  269 + } else {
  270 + let tempArray = val; // 存储当前值
  271 + let children = this.props.children;
  272 + for (var i = 0; i < length; i++) {
  273 + var tempObject = tempArray.find(item => {
  274 + return tree_stack[i].Value == item.Value;
  275 + });
  276 + if (Boolean(tempObject)) {
  277 + tempArray = tempObject[children];
  278 + } else {
  279 + // 跳转到全部
  280 + break;
244 } 281 }
245 - this.loadTree(val);  
246 - }else{  
247 - let tempArray = val; // 存储当前值  
248 - let children = this.props.children;  
249 - for(var i = 0 ; i < length ; i ++){  
250 - var tempObject = tempArray.find(item=>{  
251 - return tree_stack[i].Value == item.Value;  
252 - });  
253 - if(Boolean(tempObject)){  
254 - tempArray = tempObject[children];  
255 - }else{  
256 - // 跳转到全部  
257 - break;  
258 - }  
259 - if(i == length -1){  
260 - this.loadTree(tempArray);  
261 - } 282 + if (i == length - 1) {
  283 + this.loadTree(tempArray);
262 } 284 }
263 } 285 }
264 } 286 }
  287 + }
  288 + },
  289 + // 树的属性对照参数
  290 + props: {
  291 + handler: function(val) {
  292 + this.comparison.value = this.props.id ? this.props.id : 'id';
  293 + this.comparison.label = this.props.label ? this.props.label : 'name';
  294 + this.comparison.children = this.props.children ? this.props.children : [];
265 }, 295 },
266 - // 树的属性对照参数  
267 - props: {  
268 - handler: function(val) {  
269 - this.comparison.value = this.props.id ? this.props.id : 'id';  
270 - this.comparison.label = this.props.label ? this.props.label : 'name';  
271 - this.comparison.children = this.props.children ? this.props.children : [];  
272 - },  
273 - deep: true  
274 - },  
275 - checkList: function(val , oldVal){  
276 - if(val != oldVal){  
277 - this.newCheckList = JSON.parse(JSON.stringify(val))  
278 - return val;  
279 - } 296 + deep: true
  297 + },
  298 + checkList: function(val, oldVal) {
  299 + if (val != oldVal) {
  300 + this.newCheckList = JSON.parse(JSON.stringify(val));
  301 + return val;
280 } 302 }
  303 + }
  304 + },
  305 + created: function() {
  306 + this.loadTree(this.trees);
  307 + },
  308 + // 实例被挂载后调用
  309 + mounted() {
  310 + let id = this.props.id;
  311 + let children = this.props.children;
  312 + // 关联子级的验证，暂时不使用
  313 + // if (this.props.multiple && this.props.checkStrictly) {
  314 + // if (this.newCheckList.length != 0) {
  315 + // this.checkAllChoose();
  316 + // return;
  317 + // }
  318 + // for (let i = 0; i < this.tree.length; i++) {
  319 + // this.$set(this.tree[i], 'bx', 0)
  320 + // this.$set(this.tree[i], 'qx', 0)
  321 + // }
  322 + // }
  323 + // 初始化选中项
  324 + if (!this.props.multiple && this.newCheckList.length > 0) {
  325 + this.getNodeRoute(this.allData, this.newCheckList[0][id]);
  326 + let arr = this.nodePathArray.reverse();
  327 + if (arr.length == 0) {
  328 + return;
  329 + }
  330 +
  331 + this.concatTreeStack(arr); // 获取导航条的值
  332 + // 加载当前列对应的数据
  333 + var tree_stack = this.getTreeStack();
  334 + var data = Boolean(tree_stack[tree_stack.length - 1][children]) ? tree_stack[tree_stack.length - 1][children] : [];
  335 + this.loadTree(data);
  336 + }
  337 + },
  338 + methods: {
  339 + // ========================================== 添加方法 =====================================================================
  340 + /** 当前选项是否选中
  341 + * @param {Object} item
  342 + */
  343 + isChecked(item) {
  344 + if (Array.isArray(this.newCheckList)) {
  345 + let id = this.props.id;
  346 + let temp = this.newCheckList.find(chcked => {
  347 + return chcked[id] == item.id;
  348 + });
  349 + return Boolean(temp);
  350 + }
  351 + return false;
281 }, 352 },
282 - created:function(){  
283 - this.loadTree(this.trees); 353 + // =========================================== 初始化方法 ===================================================================
  354 + /** 初始化导航条的方法
  355 + * @param {Object} e
  356 + */
  357 + navigationInt: function(e) {
  358 + this.setIsre = e.setIsre;
  359 + this.getIsre = e.getIsre;
  360 + this.concatTreeStack = e.concatTreeStack;
  361 + this.pushTreeStack = e.pushTreeStack;
  362 + this.clearTreeStack = e.clearTreeStack;
  363 + this.getTreeStack = e.getTreeStack;
284 }, 364 },
285 - // 实例被挂载后调用  
286 - mounted() {  
287 - let id = this.props.id;  
288 - let children = this.props.children;  
289 - // 关联子级的验证，暂时不使用  
290 - // if (this.props.multiple && this.props.checkStrictly) {  
291 - // if (this.newCheckList.length != 0) {  
292 - // this.checkAllChoose();  
293 - // return;  
294 - // }  
295 - // for (let i = 0; i < this.tree.length; i++) {  
296 - // this.$set(this.tree[i], 'bx', 0)  
297 - // this.$set(this.tree[i], 'qx', 0)  
298 - // }  
299 - // }  
300 - // 初始化选中项  
301 - if (!this.props.multiple && this.newCheckList.length > 0) {  
302 - this.getNodeRoute(this.allData, this.newCheckList[0][id]);  
303 - let arr = this.nodePathArray.reverse();  
304 - if (arr.length == 0) {  
305 - return;  
306 - }  
307 -  
308 - this.concatTreeStack(arr); // 获取导航条的值  
309 - // 加载当前列对应的数据  
310 - var tree_stack = this.getTreeStack();  
311 - var data = Boolean(tree_stack[tree_stack.length -1][children]) ? tree_stack[tree_stack.length - 1][  
312 - children  
313 - ] : [];  
314 - this.loadTree(data); 365 + // =========================================== 监听事件 =====================================================================
  366 + /** 选中当前的值
  367 + * @param {Object} e
  368 + * @param {Object} item 当前项
  369 + * @param {Object} index 低昂去索引
  370 + */
  371 + checkbox(e, item, index) {
  372 + var func = this.props.multiple ? this.checkboxChange : this.radioChange;
  373 + func(e, item, index); // 执行选择操作
  374 + },
  375 + /**单选
  376 + * @param {Object} e 点击事件
  377 + * @param {Object} item 当前项的值
  378 + * @param {Object} index 索引
  379 + */
  380 + radioChange: function(e, item, index) {
  381 + var that = this;
  382 + if (e.detail.value) {
  383 + // 选中当前对象
  384 + that.newCheckList = [];
  385 + that.newCheckList.push(that.tree[index]);
  386 + } else {
  387 + // 移除其他对象
  388 + var nIndex = that.newCheckList.indexOf(item);
  389 + that.newCheckList.splice(nIndex, 1);
315 } 390 }
  391 + that.$emit('change', that.newCheckList);
316 }, 392 },
317 - methods: {  
318 - // ========================================== 添加方法 =====================================================================  
319 - /** 当前选项是否选中  
320 - * @param {Object} item  
321 - */  
322 - isChecked(item){  
323 - if(Array.isArray(this.newCheckList)){  
324 - let id = this.props.id;  
325 - let temp = this.newCheckList.find(chcked=>{  
326 - return chcked[id] == item.id;  
327 - });  
328 - return Boolean(temp);  
329 - }  
330 - return false;  
331 - },  
332 - // =========================================== 初始化方法 ===================================================================  
333 - /** 初始化导航条的方法  
334 - * @param {Object} e  
335 - */  
336 - navigationInt: function(e) {  
337 - this.setIsre = e.setIsre;  
338 - this.getIsre = e.getIsre;  
339 - this.concatTreeStack = e.concatTreeStack;  
340 - this.pushTreeStack = e.pushTreeStack;  
341 - this.clearTreeStack = e.clearTreeStack;  
342 - this.getTreeStack = e.getTreeStack;  
343 - },  
344 - // =========================================== 监听事件 =====================================================================  
345 - /** 选中当前的值  
346 - * @param {Object} e  
347 - * @param {Object} item 当前项  
348 - * @param {Object} index 低昂去索引  
349 - */  
350 - checkbox(e, item, index) {  
351 - var func = this.props.multiple ? this.checkboxChange : this.radioChange;  
352 - func(e,item ,index); // 执行选择操作  
353 - },  
354 - /**单选  
355 - * @param {Object} e 点击事件  
356 - * @param {Object} item 当前项的值  
357 - * @param {Object} index 索引  
358 - */  
359 - radioChange :function( e,item ,index){  
360 - var that = this;  
361 - if(e.detail.value){  
362 - // 选中当前对象  
363 - that.newCheckList = []; 393 + /**异步检查复选框值的改变
  394 + * @param {Object} item
  395 + * @param {Object} index
  396 + * @param {Object} bx
  397 + * @param {Object} qx
  398 + */
  399 + async checkboxChange(e, item, index, bx, qx) {
  400 + let that = this;
  401 + let findIdex = that.newCheckList.indexOf(item);
  402 + if (e.detail.value) {
  403 + // 点击选中
  404 + if (findIdex == -1) {
364 that.newCheckList.push(that.tree[index]); 405 that.newCheckList.push(that.tree[index]);
365 - }else{  
366 - // 移除其他对象  
367 - var nIndex = that.newCheckList.indexOf(item);  
368 - that.newCheckList.splice(nIndex , 1);  
369 - }  
370 - that.$emit('change', that.newCheckList);  
371 - },  
372 - /**异步检查复选框值的改变  
373 - * @param {Object} item  
374 - * @param {Object} index  
375 - * @param {Object} bx  
376 - * @param {Object} qx  
377 - */  
378 - async checkboxChange (e,item, index, bx, qx) {  
379 - let that = this;  
380 - let findIdex = that.newCheckList.indexOf(item);  
381 - if(e.detail.value){  
382 - // 点击选中  
383 - if(findIdex == -1){  
384 - that.newCheckList.push(that.tree[index]);  
385 - }  
386 - }else{  
387 - // 点击不选  
388 - that.newCheckList.splice(findIdex , 1);  
389 } 406 }
390 - that.$emit('change', that.newCheckList);  
391 -  
392 - // if (findIdex > -1) { //反选  
393 - // if (that.props.checkStrictly) { //关联子级  
394 - // if (item[props.hasChilren]) { //用户  
395 - // that.newCheckList.splice(findIdex, 1)  
396 - // } else { //非用户，取消所有下一级  
397 - // if (Boolean(item[props.children])) {  
398 - // that.getIdBydelete(item[props.children]);  
399 - // }  
400 - // }  
401 - // } else {  
402 - // that.newCheckList.splice(findIdex, 1)  
403 - // }  
404 - // } else { //选中  
405 - // if (!item[this.props.hasChilren] && that.props.checkStrictly) { //选中下一级  
406 - // if (qx || bx) { //取消下级  
407 - // if (Boolean(item[props.children])) {  
408 - // await that.getIdBydelete(item[props.children]);  
409 - // }  
410 - // item.qx = 0;  
411 - // item.bx = 0;  
412 - // } else {  
413 - // item.qx = 1;  
414 - // item.bx = 0;  
415 - // if (Boolean(item[props.children])) {  
416 - // await that.chooseChild(item[props.children], item[this.props.id]);  
417 - // }  
418 - // }  
419 - // that.$emit('change', that.newCheckList);  
420 - // // that.$forceUpdate()  
421 - // return;  
422 - // }  
423 - // // if(item[this.props.hasChilren]&&this.props.checkStrictly) this.getNodeRoute(this.allData,item[this.props.id]);  
424 - // that.newCheckList.push({  
425 - // ...item  
426 - // });  
427 - // }  
428 - // that.$emit('change', that.newCheckList)  
429 - },  
430 - // 取消下一级的选中  
431 - getIdBydelete(arr) {  
432 - arr.forEach(e => {  
433 - if (true) {  
434 - for (var i = 0; i < this.newCheckList.length; i++) {  
435 - // 包含下一级  
436 - if (e[this.props.id] == this.newCheckList[i][this.props.id]) {  
437 - this.newCheckList.splice(i, 1)  
438 - break;  
439 - }  
440 - }  
441 - }  
442 - if (false) {  
443 - // 不包含下一级  
444 - if (Boolean(item[props.children])) {  
445 - this.getIdBydelete(e[props.children]); 407 + } else {
  408 + // 点击不选
  409 + that.newCheckList.splice(findIdex, 1);
  410 + }
  411 + that.$emit('change', that.newCheckList);
  412 +
  413 + // if (findIdex > -1) { //反选
  414 + // if (that.props.checkStrictly) { //关联子级
  415 + // if (item[props.hasChilren]) { //用户
  416 + // that.newCheckList.splice(findIdex, 1)
  417 + // } else { //非用户，取消所有下一级
  418 + // if (Boolean(item[props.children])) {
  419 + // that.getIdBydelete(item[props.children]);
  420 + // }
  421 + // }
  422 + // } else {
  423 + // that.newCheckList.splice(findIdex, 1)
  424 + // }
  425 + // } else { //选中
  426 + // if (!item[this.props.hasChilren] && that.props.checkStrictly) { //选中下一级
  427 + // if (qx || bx) { //取消下级
  428 + // if (Boolean(item[props.children])) {
  429 + // await that.getIdBydelete(item[props.children]);
  430 + // }
  431 + // item.qx = 0;
  432 + // item.bx = 0;
  433 + // } else {
  434 + // item.qx = 1;
  435 + // item.bx = 0;
  436 + // if (Boolean(item[props.children])) {
  437 + // await that.chooseChild(item[props.children], item[this.props.id]);
  438 + // }
  439 + // }
  440 + // that.$emit('change', that.newCheckList);
  441 + // // that.$forceUpdate()
  442 + // return;
  443 + // }
  444 + // // if(item[this.props.hasChilren]&&this.props.checkStrictly) this.getNodeRoute(this.allData,item[this.props.id]);
  445 + // that.newCheckList.push({
  446 + // ...item
  447 + // });
  448 + // }
  449 + // that.$emit('change', that.newCheckList)
  450 + },
  451 + // 取消下一级的选中
  452 + getIdBydelete(arr) {
  453 + arr.forEach(e => {
  454 + if (true) {
  455 + for (var i = 0; i < this.newCheckList.length; i++) {
  456 + // 包含下一级
  457 + if (e[this.props.id] == this.newCheckList[i][this.props.id]) {
  458 + this.newCheckList.splice(i, 1);
  459 + break;
446 } 460 }
447 } 461 }
448 - })  
449 - },  
450 - // 关联下一级,选中  
451 - chooseChild(arr, pid) {  
452 - let that = this;  
453 - for (var i = 0, len = arr.length; i < len; i++) {  
454 - let item = arr[i];  
455 - if (true) {  
456 - // 包含下一级  
457 - that.newCheckList.push({  
458 - ...item,  
459 - tree_stackId: pid  
460 - }) 462 + }
  463 + if (false) {
  464 + // 不包含下一级
  465 + if (Boolean(item[props.children])) {
  466 + this.getIdBydelete(e[props.children]);
461 } 467 }
462 - if (false) {  
463 - // 不包含下一级  
464 - // !item[that.props.hasChilren]  
465 - if (Boolean(item[props.children])) {  
466 - this.chooseChild(item[props.children], item[this.props.id])  
467 - } 468 + }
  469 + });
  470 + },
  471 + // 关联下一级,选中
  472 + chooseChild(arr, pid) {
  473 + let that = this;
  474 + for (var i = 0, len = arr.length; i < len; i++) {
  475 + let item = arr[i];
  476 + if (true) {
  477 + // 包含下一级
  478 + that.newCheckList.push({
  479 + ...item,
  480 + tree_stackId: pid
  481 + });
  482 + }
  483 + if (false) {
  484 + // 不包含下一级
  485 + // !item[that.props.hasChilren]
  486 + if (Boolean(item[props.children])) {
  487 + this.chooseChild(item[props.children], item[this.props.id]);
468 } 488 }
469 } 489 }
470 - }, 490 + }
  491 + },
471 492
472 - /**  
473 - * @param {Array} tree 目标树  
474 - * @param {Object} targetId 为目标节点id  
475 - */  
476 - getNodeRoute(tree, targetId) {  
477 - let children = this.props.children;  
478 - let id = this.props.id;  
479 - for (let index = 0; index < tree.length; index++) {  
480 - if (Boolean(tree[index][children]) ) {  
481 - if (tree[index][children]) {  
482 - let endRecursiveLoop = this.getNodeRoute(tree[index][children], targetId)  
483 - if (endRecursiveLoop) {  
484 - this.nodePathArray.push(tree[index]);  
485 - return true;  
486 - } 493 + /**
  494 + * @param {Array} tree 目标树
  495 + * @param {Object} targetId 为目标节点id
  496 + */
  497 + getNodeRoute(tree, targetId) {
  498 + let children = this.props.children;
  499 + let id = this.props.id;
  500 + for (let index = 0; index < tree.length; index++) {
  501 + if (Boolean(tree[index][children])) {
  502 + if (tree[index][children]) {
  503 + let endRecursiveLoop = this.getNodeRoute(tree[index][children], targetId);
  504 + if (endRecursiveLoop) {
  505 + this.nodePathArray.push(tree[index]);
  506 + return true;
487 } 507 }
488 } 508 }
489 - if (tree[index][id] === targetId) {  
490 - return true;  
491 - }  
492 } 509 }
493 - },  
494 -  
495 - /**跳转到子级  
496 - * @param {Object} item 选中的项  
497 - * @param {Boolean} realHasChildren 是否包含子级  
498 - */  
499 - toChildren(item, realHasChildren) {  
500 - this.$emit("clickItem" , item , realHasChildren); // 点击导航栏事件  
501 - // 不包含子级,不执行任何操作  
502 - if (!realHasChildren) {  
503 - return; 510 + if (tree[index][id] === targetId) {
  511 + return true;
504 } 512 }
505 - // 点击跳转下一级  
506 - let id = this.props.id;  
507 - let children = this.props.children; // 子级名称 513 + }
  514 + },
508 515
509 - // 将当前item加入到导航列表  
510 - if (item[children].length > 0) {  
511 - this.loadTree(item[children]);  
512 - this.pushTreeStack(item); // 添加导航  
513 - }  
514 - // 关联数据 - 暂时不使用  
515 - // if (this.props.checkStrictly) {  
516 - // this.checkAllChoose();  
517 - // }  
518 - },  
519 - /** 搜索提交方法  
520 - * @param {Object} e  
521 - */  
522 - confirmSearch(e) {  
523 - var val = e.detail.value;  
524 - this.searchResult = [];  
525 - // 查找  
526 - uni.showLoading({  
527 - title: '正在查找'  
528 - });  
529 - this.search(this.allData, val);  
530 - // 返回搜索结果  
531 - uni.hideLoading();  
532 - this.setIsre(true); // 设置导航条为搜索状态  
533 - this.clearTreeStack(); // 清空导航条  
534 - this.loadTree(this.searchResult);  
535 - },  
536 - /**搜索方法  
537 - * @param {Object} data 搜索数据  
538 - * @param {Object} keyword 搜索关键字  
539 - */  
540 - search(data, keyword) {  
541 - var that = this;  
542 - let children = that.props.children;  
543 - for (var i = 0, len = data.length; i < len; i++) {  
544 - // try-catch(try-catch) - 没有label列，跳过继续执行  
545 - try{  
546 - if (data[i][that.props.label].indexOf(keyword) >= 0) {  
547 - that.searchResult.push(data[i]);  
548 - }  
549 - if (Boolean(data[i][children])) {  
550 - if (data[i][children].length > 0) {  
551 - that.search(data[i][children], keyword);  
552 - } 516 + /**跳转到子级
  517 + * @param {Object} item 选中的项
  518 + * @param {Boolean} realHasChildren 是否包含子级
  519 + */
  520 + toChildren(item, realHasChildren) {
  521 + this.$emit('clickItem', item, realHasChildren); // 点击导航栏事件
  522 + // 不包含子级,不执行任何操作
  523 + if (!realHasChildren) {
  524 + return;
  525 + }
  526 + // 点击跳转下一级
  527 + let id = this.props.id;
  528 + let children = this.props.children; // 子级名称
  529 +
  530 + // 将当前item加入到导航列表
  531 + if (item[children].length > 0) {
  532 + this.loadTree(item[children]);
  533 + this.pushTreeStack(item); // 添加导航
  534 + }
  535 + // 关联数据 - 暂时不使用
  536 + // if (this.props.checkStrictly) {
  537 + // this.checkAllChoose();
  538 + // }
  539 + },
  540 + /** 搜索提交方法
  541 + * @param {Object} e
  542 + */
  543 + confirmSearch(e) {
  544 + var val = e.detail.value;
  545 + this.searchResult = [];
  546 + // 查找
  547 + uni.showLoading({
  548 + title: '正在查找'
  549 + });
  550 + this.search(this.allData, val);
  551 + // 返回搜索结果
  552 + uni.hideLoading();
  553 + this.setIsre(true); // 设置导航条为搜索状态
  554 + this.clearTreeStack(); // 清空导航条
  555 + this.loadTree(this.searchResult);
  556 + },
  557 + /**搜索方法
  558 + * @param {Object} data 搜索数据
  559 + * @param {Object} keyword 搜索关键字
  560 + */
  561 + search(data, keyword) {
  562 + var that = this;
  563 + let children = that.props.children;
  564 + for (var i = 0, len = data.length; i < len; i++) {
  565 + // try-catch(try-catch) - 没有label列，跳过继续执行
  566 + try {
  567 + if (data[i][that.props.label].indexOf(keyword) >= 0) {
  568 + that.searchResult.push(data[i]);
  569 + }
  570 + if (Boolean(data[i][children])) {
  571 + if (data[i][children].length > 0) {
  572 + that.search(data[i][children], keyword);
553 } 573 }
554 - }catch(e){  
555 - console.warn(e);  
556 } 574 }
557 - 575 + } catch (e) {
  576 + console.warn(e);
558 } 577 }
559 - },  
560 - /**  
561 - * 检查所有的选项  
562 - */  
563 - checkAllChoose() {  
564 - let o = false,  
565 - t = true;  
566 - this.tree.forEach((e, i) => {  
567 - if (true) {  
568 - // 包含下一级 !e[this.props.hasChilren]  
569 - e.qx = o;  
570 - e.bx = o;  
571 - let num2 = this.computAllNumber(e[props.children]);  
572 - // console.log(this.newNum,this.oldNum)  
573 - if (this.newNum != 0 && this.oldNum != 0) {  
574 - if (this.newNum == this.oldNum) {  
575 - e.qx = t;  
576 - e.bx = o;  
577 - } else {  
578 - e.qx = o;  
579 - e.bx = t;  
580 - }  
581 - }  
582 - if (this.newNum != 0 && this.oldNum == 0) {  
583 - this.$set(this.tree[i], 'bx', o);  
584 - this.$set(this.tree[i], 'qx', o); 578 + }
  579 + },
  580 + /**
  581 + * 检查所有的选项
  582 + */
  583 + checkAllChoose() {
  584 + let o = false,
  585 + t = true;
  586 + this.tree.forEach((e, i) => {
  587 + if (true) {
  588 + // 包含下一级 !e[this.props.hasChilren]
  589 + e.qx = o;
  590 + e.bx = o;
  591 + let num2 = this.computAllNumber(e[props.children]);
  592 + // console.log(this.newNum,this.oldNum)
  593 + if (this.newNum != 0 && this.oldNum != 0) {
  594 + if (this.newNum == this.oldNum) {
  595 + e.qx = t;
  596 + e.bx = o;
  597 + } else {
  598 + e.qx = o;
  599 + e.bx = t;
585 } 600 }
586 - // this.$forceUpdate()  
587 - this.newNum = 0  
588 - this.oldNum = 0  
589 } 601 }
590 - })  
591 - },  
592 -  
593 - // 选中所选值  
594 - computAllNumber(arr) {  
595 - console.log("选中所选值");  
596 - // for (let j = 0; j < arr.length; j++) {  
597 - // var e = arr[j];  
598 - // // if (arr[j][that.props.hasChilren]) {  
599 - // this.newNum++;  
600 - // // }  
601 - // this.checkSum(e.id)  
602 - // if (!e[that.props.hasChilren]) {  
603 - // this.computAllNumber(e[props.children])  
604 - // }  
605 - // }  
606 - },  
607 -  
608 - // 选中事件累计  
609 - checkSum(id) {  
610 - for (let i = 0; i < this.newCheckList.length; i++) {  
611 - if (id == this.newCheckList[i].id) {  
612 - this.oldNum++;  
613 - break 602 + if (this.newNum != 0 && this.oldNum == 0) {
  603 + this.$set(this.tree[i], 'bx', o);
  604 + this.$set(this.tree[i], 'qx', o);
614 } 605 }
  606 + // this.$forceUpdate()
  607 + this.newNum = 0;
  608 + this.oldNum = 0;
615 } 609 }
616 - }, 610 + });
  611 + },
617 612
618 - /** 返回到其他树层  
619 - * @param {Object} item 当前item值  
620 - * @param {Object} index 返回到其他索引  
621 - */  
622 - backTree(item, index) {  
623 - this.$emit("backTree", item, index);  
624 - let that = this;  
625 - if (index == -1) {  
626 - // 全部  
627 - that.loadTree(that.allData);  
628 - } else if (index == -2) {  
629 - // 搜索  
630 - that.loadTree(that.searchResult); // 搜索结果  
631 - } else {  
632 - // 其他层级  
633 - that.loadTree(item[that.props.children]); // tree的其他层级 613 + // 选中所选值
  614 + computAllNumber(arr) {
  615 + console.log('选中所选值');
  616 + // for (let j = 0; j < arr.length; j++) {
  617 + // var e = arr[j];
  618 + // // if (arr[j][that.props.hasChilren]) {
  619 + // this.newNum++;
  620 + // // }
  621 + // this.checkSum(e.id)
  622 + // if (!e[that.props.hasChilren]) {
  623 + // this.computAllNumber(e[props.children])
  624 + // }
  625 + // }
  626 + },
  627 +
  628 + // 选中事件累计
  629 + checkSum(id) {
  630 + for (let i = 0; i < this.newCheckList.length; i++) {
  631 + if (id == this.newCheckList[i].id) {
  632 + this.oldNum++;
  633 + break;
634 } 634 }
635 - // 关联数据  
636 - // if (this.props.checkStrictly) {  
637 - // this.checkAllChoose();  
638 - // }  
639 - },  
640 - /**  
641 - * 点击确认按钮执行事件  
642 - */  
643 - backConfirm() {  
644 - this.$emit('sendValue', this.newCheckList, 'back')  
645 - },  
646 - // ======================================== 公共方法 ===============================================================  
647 - /**加载Tree值  
648 - * @param {Array} datas 待复制的数组  
649 - * @param {Number} start 起始位置  
650 - * @description 加载tree值。当数据量大时，子项加载时间很长。可以多次渲染加载  
651 - */  
652 - loadTree : function(datas , start = 0 ){  
653 - let that = this;  
654 - if(!this.stepReload){  
655 - // 不进行多次渲染加载 635 + }
  636 + },
  637 +
  638 + /** 返回到其他树层
  639 + * @param {Object} item 当前item值
  640 + * @param {Object} index 返回到其他索引
  641 + */
  642 + backTree(item, index) {
  643 + this.$emit('backTree', item, index);
  644 + let that = this;
  645 + if (index == -1) {
  646 + // 全部
  647 + that.loadTree(that.allData);
  648 + } else if (index == -2) {
  649 + // 搜索
  650 + that.loadTree(that.searchResult); // 搜索结果
  651 + } else {
  652 + // 其他层级
  653 + that.loadTree(item[that.props.children]); // tree的其他层级
  654 + }
  655 + // 关联数据
  656 + // if (this.props.checkStrictly) {
  657 + // this.checkAllChoose();
  658 + // }
  659 + },
  660 + /**
  661 + * 点击确认按钮执行事件
  662 + */
  663 + backConfirm() {
  664 + this.$emit('sendValue', this.newCheckList, 'back');
  665 + },
  666 + // ======================================== 公共方法 ===============================================================
  667 + /**加载Tree值
  668 + * @param {Array} datas 待复制的数组
  669 + * @param {Number} start 起始位置
  670 + * @description 加载tree值。当数据量大时，子项加载时间很长。可以多次渲染加载
  671 + */
  672 + loadTree: function(datas, start = 0) {
  673 + let that = this;
  674 + if (!this.stepReload) {
  675 + // 不进行多次渲染加载
  676 + that.tree = datas;
  677 + } else {
  678 + // datas为null, 不进行渲染
  679 + if (!Array.isArray(datas)) {
656 that.tree = datas; 680 that.tree = datas;
657 - }else{  
658 - // datas为null, 不进行渲染  
659 - if(!Array.isArray(datas)){  
660 - that.tree = datas;  
661 - return;  
662 - }else if(datas.length === 0){  
663 - that.tree = datas;  
664 - return;  
665 - }  
666 - // 进行多次渲染加载  
667 - if(start === 0){  
668 - // 终止其他渲染  
669 - if(that.itemsLoading){  
670 - that.itemsStop = true; //终止其他Item渲染  
671 - }  
672 - // 首次加载提醒  
673 - uni.showLoading();  
674 - that.tree = [];  
675 - that.itemsLoading = true; 681 + return;
  682 + } else if (datas.length === 0) {
  683 + that.tree = datas;
  684 + return;
  685 + }
  686 + // 进行多次渲染加载
  687 + if (start === 0) {
  688 + // 终止其他渲染
  689 + if (that.itemsLoading) {
  690 + that.itemsStop = true; //终止其他Item渲染
676 } 691 }
677 - var length = datas.length ;  
678 - var end = Math.min(start + that.pageSize , length);  
679 - var tempArray = datas.slice(start , end);  
680 - that.tree = that.tree.concat(tempArray);  
681 - that.$nextTick(function(){  
682 - if(start == 0){  
683 - uni.hideLoading();  
684 - that.itemsStop = false;  
685 - }  
686 - if(end < length && !that.itemsStop){  
687 - that.loadTree(datas, end);  
688 - }else{  
689 - that.itemsLoading = false;  
690 - }  
691 - }); 692 + // 首次加载提醒
  693 + uni.showLoading();
  694 + that.tree = [];
  695 + that.itemsLoading = true;
692 } 696 }
693 - },  
694 - // =================================================================================================================  
695 - 697 + var length = datas.length;
  698 + var end = Math.min(start + that.pageSize, length);
  699 + var tempArray = datas.slice(start, end);
  700 + that.tree = that.tree.concat(tempArray);
  701 + that.$nextTick(function() {
  702 + if (start == 0) {
  703 + uni.hideLoading();
  704 + that.itemsStop = false;
  705 + }
  706 + if (end < length && !that.itemsStop) {
  707 + that.loadTree(datas, end);
  708 + } else {
  709 + that.itemsLoading = false;
  710 + }
  711 + });
  712 + }
696 } 713 }
  714 + // =================================================================================================================
697 } 715 }
  716 +};
698 </script> 717 </script>
699 <style lang="scss" scoped> 718 <style lang="scss" scoped>
700 - @import "luyj-tree.scss";  
701 - @import "icon.css"; 719 +@import 'luyj-tree.scss';
  720 +@import 'icon.css';
702 </style> 721 </style>