简柏林 / thingskit-app · Commits

Commit d64bfc6286a8477b2a977b6a29044b57efefcedb

Authored by xp.Huang
2 parents d321fa91 62039b61

Merge branch 'ft-dev' into 'main' 

style：修改组织列表样式问题

See merge request huang/thingskit-app!70
Inline Side-by-side
Showing 4 changed files with 769 additions and 753 deletions
... ... @@ -64,13 +64,6 @@ export default {
64 64 this.page.num = 1;
65 65 this.loadData(1, e);
66 66 },
67   - leftClick() {
68   - return false;
69   - },
70   - onBackPress() {
71   - console.log('返回');
72   - return true; // 阻止返回 不阻止就不写或者用uni.navigateBack({ delta: 1 })返回
73   - },
74 67 openConfigDetail(e) {
75 68 uni.navigateTo({
76 69 url: 'configurationDetail?configId=' + e
... ...
... ... @@ -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>
... ...