organization.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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, index)">
  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" @click="goPage(item)">
  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. <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="120" style="padding-bottom: 100px;" mode="list"></u-empty>
  34. </view>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import { clzConfirm } from '@/libs/tools.js'
  40. import { findStoreList } from '@/api/store.js'
  41. import { queryCurrentTaskUsing } from '@/api/task.js'
  42. import { findUserInfo } from '@/api/atorg.js'
  43. export default{
  44. data(){
  45. return{
  46. organizationNowList: [], // 组织机构 当前显示 列表数据
  47. organizationList: [], // 组织机构 总列表数据
  48. nowStructure: [ // 面包屑
  49. '西安车领主网络科技有限公司'
  50. ],
  51. nowInd: [],
  52. status: 'loading', // 加载中状态
  53. noDataText: '暂无数据', // 数据异常提示
  54. list: [], // 门店数据列表
  55. organizationData: []
  56. }
  57. },
  58. onLoad() {
  59. // 权限下所有门店数据
  60. this.getStoreList()
  61. // 权限下的组织机构数据
  62. this.getOrgList()
  63. },
  64. methods: {
  65. // 权限下所有门店数据
  66. getStoreList(orgCode){
  67. this.status = 'loading'
  68. // 获取门店列表
  69. findStoreList({ orgCode: orgCode ? orgCode : '' }).then(res => {
  70. if(res.status == 200){
  71. this.list = res.data.list
  72. this.noDataText = '暂无数据' // 有列表数据时不显示,因此只用默认设置为无数据时所需显示的'暂无数据'即可
  73. }else{
  74. this.list = []
  75. this.noDataText = res.message
  76. }
  77. this.status = 'loadmore'
  78. })
  79. },
  80. // 组织机构数据
  81. getOrgList(){
  82. findUserInfo().then(res => {
  83. if(res.status == 200){
  84. this.organizationList = res.data.list
  85. this.organizationNowList = res.data.list
  86. }else{
  87. this.organizationList = []
  88. this.organizationNowList = []
  89. }
  90. })
  91. },
  92. // 组织机构 click
  93. clickOrganization(item, ind){
  94. this.nowInd.push(ind)
  95. if(item.children){
  96. this.organizationNowList = item.children
  97. }else{
  98. this.organizationNowList = []
  99. }
  100. this.nowStructure.push(item.name)
  101. this.getStoreList(item.code)
  102. },
  103. // 切换至当前所选的组织结构
  104. checkedStructure(ind){
  105. if(ind == 0){
  106. this.nowInd = []
  107. this.organizationNowList = this.organizationList
  108. this.nowStructure = ['西安车领主网络科技有限公司']
  109. this.getStoreList()
  110. }else{
  111. let subInd = JSON.parse(JSON.stringify(this.nowInd)).splice(0, ind)
  112. this.nowInd = subInd
  113. let code = '' // 组织机构编码
  114. for(let i=0; i< subInd.length;i++){
  115. if(i==0){
  116. this.organizationNowList = this.organizationList[subInd[i]].children
  117. code = this.organizationList[subInd[i]].code
  118. }else{
  119. this.organizationNowList = this.organizationNowList[subInd[i]].children
  120. code = this.organizationNowList[subInd[i]].code
  121. }
  122. }
  123. this.nowStructure = JSON.parse(JSON.stringify(this.nowStructure)).splice(0, ind+1)
  124. this.getStoreList(code)
  125. }
  126. },
  127. // 选择门店
  128. goPage(item){
  129. // 校验是否有历史巡店记录
  130. queryCurrentTaskUsing({ storeId: item.tenantId }).then(res => {
  131. if(res.status == 200){
  132. if(res.data.state){ // 为true有历史巡店记录
  133. clzConfirm({
  134. title: '提示',
  135. content: '有进行中的巡店任务,是否继续?',
  136. confirmText: '继续巡店',
  137. cancelText: '重新开始',
  138. buttons: ['继续巡店','重新开始'],
  139. success: function (result) {
  140. if (result.confirm || result.index==0) { // 继续巡店
  141. uni.navigateTo({
  142. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&taskId='+ res.data.taskId + '&restart=0&types=video'
  143. })
  144. }else{ // 重新开始
  145. uni.navigateTo({
  146. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&taskId='+ res.data.taskId + '&restart=1&types=video'
  147. })
  148. }
  149. }
  150. })
  151. }else{
  152. uni.navigateTo({
  153. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&types=video'
  154. })
  155. }
  156. }else{
  157. uni.showToast({icon: 'none', title: res.message})
  158. }
  159. })
  160. }
  161. },
  162. watch: {
  163. nowStructure(val){
  164. if(val.length == 1){
  165. this.nowStructure[0] = '西安车领主网络科技有限公司'
  166. }else{
  167. this.nowStructure[0] = '车领主'
  168. }
  169. }
  170. }
  171. }
  172. </script>
  173. <style lang="scss" scoped>
  174. page {
  175. background-color: #f8f8f8;
  176. height: calc(100vh - 44px);
  177. }
  178. .organization-wrap{
  179. .organization-root-tit{
  180. padding: 20upx 30upx;
  181. background-color: #fff;
  182. border-bottom: 20upx solid #f8f8f8;
  183. .structure-con{
  184. display: inline-block;
  185. .structure-name{
  186. color: #2979ff;
  187. }
  188. .structure-icon{
  189. padding: 0 10upx;
  190. }
  191. }
  192. }
  193. .organization-node-con{
  194. padding: 0 30upx;
  195. background-color: #fff;
  196. .organization-node-item{
  197. display: flex;
  198. padding: 20upx 0;
  199. border-bottom: 1upx dashed #f8f8f8;
  200. &-name{
  201. flex-grow: 1;
  202. }
  203. &-icon{
  204. flex-shrink: 0;
  205. }
  206. }
  207. }
  208. // 门店列表
  209. .list-con{
  210. background-color: #fff;
  211. margin-top: 20upx;
  212. .list-tit{
  213. padding: 20upx 30upx;
  214. border-bottom: 1upx solid #f8f8f8;
  215. }
  216. .listData-con{
  217. padding: 0 30upx;
  218. .listData-item{
  219. display: flex;
  220. justify-content: space-between;
  221. align-items: center;
  222. padding: 20upx 0;
  223. border-bottom: 1upx dashed #f8f8f8;
  224. &-l{
  225. flex-grow: 1;
  226. padding-right: 10upx;
  227. position: relative;
  228. padding-left: 50upx;
  229. &-icon{
  230. vertical-align: sub;
  231. padding-right: 8upx;
  232. position: absolute;
  233. left: 0;
  234. top: -4upx;
  235. }
  236. }
  237. &-r{
  238. flex-shrink: 0;
  239. }
  240. }
  241. }
  242. }
  243. }
  244. </style>