简柏林 / 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 128
129 129 <style lang="scss" scoped>
130 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 137 .filter-input {
134 138 height: 80rpx;
135 139 display: flex;
136 140 align-items: center;
137 141 padding-left: 40rpx;
  142 + width: 680rpx;
138 143
139 144 .filterImg {
140 145 width: 32rpx;
... ...
1 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 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 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   - }
\ No newline at end of file
  123 +}
... ...
... ... @@ -3,700 +3,719 @@
3 3 <!-- 搜索框 -->
4 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 21 </view>
15 22 <!-- 列表 -->
16 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 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 41 <view class="word text-cut">{{ item[props.label] }}</view>
25 42 </slot>
26 43 </template>
27 44 </luyj-tree-item>
28 45 </view>
29 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 56 <button class="sureBtn" type="primary" @click="backConfirm">确认</button>
34 57 </view>
35 58 </view>
36 59 </template>
37 60
38 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 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 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 717 </script>
699 718 <style lang="scss" scoped>
700   - @import "luyj-tree.scss";
701   - @import "icon.css";
  719 +@import 'luyj-tree.scss';
  720 +@import 'icon.css';
702 721 </style>
... ...