linkage-picker.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <template>
  2. <view class="w-picker-view">
  3. <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  4. <picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
  5. <view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
  6. </picker-view-column>
  7. </picker-view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. pickVal:[],
  15. range:[],
  16. checkObj:{}
  17. };
  18. },
  19. props:{
  20. itemHeight:{
  21. type:String,
  22. default:"44px"
  23. },
  24. value:{
  25. type:[Array,String],
  26. default:""
  27. },
  28. defaultType:{
  29. type:String,
  30. default:"label"
  31. },
  32. options:{
  33. type:Array,
  34. default(){
  35. return []
  36. }
  37. },
  38. defaultProps:{
  39. type:Object,
  40. default(){
  41. return{
  42. lable:"label",
  43. value:"value",
  44. children:"children"
  45. }
  46. }
  47. },
  48. level:{
  49. //多级联动层级,表示几级联动
  50. type:[Number,String],
  51. default:2
  52. }
  53. },
  54. computed:{
  55. nodeKey(){
  56. return this.defaultProps.label;
  57. },
  58. nodeVal(){
  59. return this.defaultProps.value;
  60. },
  61. nodeChild(){
  62. return this.defaultProps.children;
  63. }
  64. },
  65. watch:{
  66. value(val){
  67. if(this.options.length!=0){
  68. this.initData();
  69. }
  70. },
  71. options(val){
  72. this.initData();
  73. }
  74. },
  75. created() {
  76. if(this.options.length!=0){
  77. this.initData();
  78. }
  79. },
  80. methods:{
  81. getData(){
  82. //用来处理初始化数据
  83. let options=this.options;
  84. let col1={},col2={},col3={},col4={};
  85. let arr1=options,arr2=[],arr3=[],arr4=[];
  86. let col1Index=0,col2Index=0,col3Index=0,col4Index=0;
  87. let a1="",a2="",a3="",a4="";
  88. let dVal=[],obj={};
  89. let value=this.value;
  90. let data=[];
  91. a1=value[0];
  92. a2=value[1];
  93. if(this.level>2){
  94. a3=value[2];
  95. }
  96. if(this.level>3){
  97. a4=value[3];
  98. };
  99. /*第1列*/
  100. col1Index=arr1.findIndex((v)=>{
  101. return v[this.defaultType]==a1
  102. });
  103. col1Index=value?(col1Index!=-1?col1Index:0):0;
  104. col1=arr1[col1Index];
  105. /*第2列*/
  106. arr2=arr1[col1Index][this.nodeChild];
  107. col2Index=arr2.findIndex((v)=>{
  108. return v[this.defaultType]==a2
  109. });
  110. col2Index=value?(col2Index!=-1?col2Index:0):0;
  111. col2=arr2[col2Index];
  112. /*第3列*/
  113. if(this.level>2){
  114. arr3=arr2[col2Index][this.nodeChild];
  115. col3Index=arr3.findIndex((v)=>{
  116. return v[this.defaultType]==a3;
  117. });
  118. col3Index=value?(col3Index!=-1?col3Index:0):0;
  119. col3=arr3[col3Index];
  120. };
  121. /*第4列*/
  122. if(this.level>3){
  123. arr4=arr3[col4Index][this.nodeChild];
  124. col4Index=arr4.findIndex((v)=>{
  125. return v[this.defaultType]==a4;
  126. });
  127. col4Index=value?(col4Index!=-1?col4Index:0):0;
  128. col4=arr4[col4Index];
  129. };
  130. switch(this.level*1){
  131. case 2:
  132. dVal=[col1Index,col2Index];
  133. obj={
  134. col1,
  135. col2
  136. }
  137. data=[arr1,arr2];
  138. break;
  139. case 3:
  140. dVal=[col1Index,col2Index,col3Index];
  141. obj={
  142. col1,
  143. col2,
  144. col3
  145. }
  146. data=[arr1,arr2,arr3];
  147. break;
  148. case 4:
  149. dVal=[col1Index,col2Index,col3Index,col4Index];
  150. obj={
  151. col1,
  152. col2,
  153. col3,
  154. col4
  155. }
  156. data=[arr1,arr2,arr3,arr4];
  157. break
  158. }
  159. return {
  160. data,
  161. dVal,
  162. obj
  163. }
  164. },
  165. initData(){
  166. let dataData=this.getData();
  167. let data=dataData.data;
  168. let arr1=data[0];
  169. let arr2=data[1];
  170. let arr3=data[2]||[];
  171. let arr4=data[3]||[];
  172. let obj=dataData.obj;
  173. let col1=obj.col1,col2=obj.col2,col3=obj.col3||{},col4=obj.col4||{};
  174. let result="",value=[];
  175. let range=[];
  176. switch(this.level){
  177. case 2:
  178. value=[col1[this.nodeVal],col2[this.nodeVal]];
  179. result=`${col1[this.nodeKey]+col2[this.nodeKey]}`;
  180. range=[arr1,arr2];
  181. break;
  182. case 3:
  183. value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal]];
  184. result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
  185. range=[arr1,arr2,arr3];
  186. break;
  187. case 4:
  188. value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal],col4[this.nodeVal]];
  189. result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
  190. range=[arr1,arr2,arr3,arr4];
  191. break;
  192. }
  193. this.range=range;
  194. this.checkObj=obj;
  195. this.$nextTick(()=>{
  196. this.pickVal=dataData.dVal;
  197. });
  198. this.$emit("change",{
  199. result:result,
  200. value:value,
  201. obj:obj
  202. })
  203. },
  204. handlerChange(e){
  205. let arr=[...e.detail.value];
  206. let col1Index=arr[0],col2Index=arr[1],col3Index=arr[2]||0,col4Index=arr[3]||0;
  207. let arr1=[],arr2=[],arr3=[],arr4=[];
  208. let col1,col2,col3,col4,obj={};
  209. let result="",value=[];
  210. arr1=this.options;
  211. arr2=(arr1[col1Index]&&arr1[col1Index][this.nodeChild])||arr1[arr1.length-1][this.nodeChild]||[];
  212. col1=arr1[col1Index]||arr1[arr1.length-1]||{};
  213. col2=arr2[col2Index]||arr2[arr2.length-1]||{};
  214. if(this.level>2){
  215. arr3=(arr2[col2Index]&&arr2[col2Index][this.nodeChild])||arr2[arr2.length-1][this.nodeChild];
  216. col3=arr3[col3Index]||arr3[arr3.length-1]||{};
  217. }
  218. if(this.level>3){
  219. arr4=(arr3[col3Index]&&arr3[col3Index][this.nodeChild])||arr3[arr3.length-1][this.nodeChild]||[];
  220. col4=arr4[col4Index]||arr4[arr4.length-1]||{};
  221. }
  222. switch(this.level){
  223. case 2:
  224. obj={
  225. col1,
  226. col2
  227. }
  228. this.range=[arr1,arr2];
  229. result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
  230. value=[col1[this.nodeVal]||'',col2[this.nodeVal]||''];
  231. break;
  232. case 3:
  233. obj={
  234. col1,
  235. col2,
  236. col3
  237. }
  238. this.range=[arr1,arr2,arr3];
  239. result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
  240. value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||''];
  241. break;
  242. case 4:
  243. obj={
  244. col1,
  245. col2,
  246. col3,
  247. col4
  248. }
  249. this.range=[arr1,arr2,arr3,arr4];
  250. result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
  251. value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||'',col4[this.nodeVal]||''];
  252. break;
  253. }
  254. this.checkObj=obj;
  255. this.pickVal=arr;
  256. this.$emit("change",{
  257. result:result,
  258. value:value,
  259. obj:obj
  260. })
  261. }
  262. }
  263. }
  264. </script>
  265. <style lang="scss">
  266. @import "./w-picker.css";
  267. </style>