organization.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="organization-wrap">
  3. <u-sticky>
  4. <!-- 组织结构根节点 -->
  5. <view class="organization-root-tit">
  6. <view class="structure-con" v-for="(item,index) in nowStructure" :key="index">
  7. <text class="structure-name" @click="checkedStructure(index)">{{item}}</text>
  8. <u-icon class="structure-icon" name="arrow-right" color="#999" size="28"></u-icon>
  9. </view>
  10. </view>
  11. <!-- 组织结构子节点 -->
  12. <view class="organization-node-con">
  13. <view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item)">
  14. <text class="organization-node-item-name">{{item.name}}</text>
  15. <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
  16. </view>
  17. </view>
  18. </u-sticky>
  19. <!-- 门店列表 -->
  20. <view class="list-con">
  21. <view class="list-tit">门店列表</view>
  22. <!-- 列表数据 -->
  23. <view class="listData-con">
  24. <view class="listData-item" v-for="(item, index) in list" :key="index">
  25. <view class="listData-item-l">
  26. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  27. <text class="listData-item-l-name">{{item.name}}</text>
  28. </view>
  29. <view class="listData-item-r">
  30. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default{
  39. data(){
  40. return{
  41. list: [ // 门店列表
  42. { name: '常青二路店' },
  43. { name: '常青二路店常青青二路店常路店' },
  44. { name: '常青二路店' },
  45. { name: '常青二路店' },
  46. { name: '常青二路店' },
  47. { name: '常青二路店' },
  48. { name: '常青二路店' },
  49. { name: '常青二路店常青青二路店常路店' },
  50. { name: '常青二路店' },
  51. { name: '常青二路店' },
  52. { name: '常青二路店' },
  53. { name: '常青二路店' },
  54. { name: '常青二路店' },
  55. { name: '常青二路店常青青二路店常路店' },
  56. { name: '常青二路店' },
  57. { name: '常青二路店' },
  58. { name: '常青二路店' },
  59. { name: '常青二路店' },
  60. ],
  61. organizationNowList: [ // 组织机构 当前显示 列表数据
  62. { name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
  63. { name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
  64. { name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
  65. ],
  66. organizationList: [ // 组织机构 总列表数据
  67. { name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
  68. { name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
  69. { name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
  70. ],
  71. nowStructure: [ // 面包屑
  72. '西安车领主网络科技有限公司'
  73. ],
  74. nowInd: []
  75. }
  76. },
  77. methods: {
  78. // 组织机构 click
  79. clickOrganization(item){
  80. if(item.children){
  81. this.organizationNowList = item.children
  82. }else{
  83. this.organizationNowList = []
  84. }
  85. this.nowStructure.push(item.name)
  86. },
  87. // 切换至当前所选的组织结构
  88. checkedStructure(ind){
  89. if(ind == 0){
  90. this.nowStructure = ['西安车领主网络科技有限公司']
  91. }else{
  92. this.organizationNowList = this.organizationList[ind - 1].children
  93. this.nowStructure = this.nowStructure.slice(0,ind+1)
  94. }
  95. }
  96. },
  97. watch: {
  98. nowStructure(val){
  99. if(val.length == 1){
  100. this.nowStructure[0] = '西安车领主网络科技有限公司'
  101. }else{
  102. this.nowStructure[0] = '车领主'
  103. }
  104. }
  105. }
  106. }
  107. </script>
  108. <style lang="scss" scoped>
  109. page {
  110. background-color: #f8f8f8;
  111. height: calc(100vh - 44px);
  112. }
  113. .organization-wrap{
  114. .organization-root-tit{
  115. padding: 20upx 30upx;
  116. background-color: #fff;
  117. border-bottom: 20upx solid #f8f8f8;
  118. .structure-con{
  119. display: inline-block;
  120. .structure-name{
  121. color: #2979ff;
  122. }
  123. .structure-icon{
  124. padding: 0 10upx;
  125. }
  126. }
  127. }
  128. .organization-node-con{
  129. padding: 0 30upx;
  130. background-color: #fff;
  131. .organization-node-item{
  132. display: flex;
  133. padding: 20upx 0;
  134. border-bottom: 1upx dashed #f8f8f8;
  135. &-name{
  136. flex-grow: 1;
  137. }
  138. &-icon{
  139. flex-shrink: 0;
  140. }
  141. }
  142. }
  143. // 门店列表
  144. .list-con{
  145. background-color: #fff;
  146. margin-top: 20upx;
  147. .list-tit{
  148. padding: 20upx 30upx;
  149. border-bottom: 1upx solid #f8f8f8;
  150. }
  151. .listData-con{
  152. padding: 0 30upx;
  153. .listData-item{
  154. display: flex;
  155. justify-content: space-between;
  156. align-items: center;
  157. padding: 20upx 0;
  158. border-bottom: 1upx dashed #f8f8f8;
  159. &-l{
  160. flex-grow: 1;
  161. padding-right: 10upx;
  162. position: relative;
  163. padding-left: 50upx;
  164. &-icon{
  165. vertical-align: sub;
  166. padding-right: 8upx;
  167. position: absolute;
  168. left: 0;
  169. top: -4upx;
  170. }
  171. }
  172. &-r{
  173. flex-shrink: 0;
  174. }
  175. }
  176. }
  177. }
  178. }
  179. </style>