organization.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <view class="organization-wrap">
  3. <!-- 组织结构根节点 -->
  4. <view class="organization-root-tit">
  5. <view class="structure-con" v-for="(item,index) in nowStructure" :key="index">
  6. <text class="structure-name" @click="checkedStructure(index)">{{item}}</text>
  7. <u-icon class="structure-icon" name="arrow-right" color="#999" size="28"></u-icon>
  8. </view>
  9. </view>
  10. <!-- 组织结构子节点 -->
  11. <view class="organization-node-con" v-if="organizationNowList && organizationNowList.length > 0">
  12. <view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item, index)">
  13. <text class="organization-node-item-name">{{item.name}}</text>
  14. <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
  15. </view>
  16. </view>
  17. <!-- 门店列表 -->
  18. <view class="list-con" :style="{'padding-top': organizationNowList && organizationNowList.length > 0 ? '0upx' : '88upx' }">
  19. <view class="list-tit">门店列表</view>
  20. <!-- 列表数据 -->
  21. <view class="listData-con">
  22. <view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
  23. <view class="listData-item-l">
  24. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  25. <text class="listData-item-l-name">{{item.name}}</text>
  26. </view>
  27. <view class="listData-item-r">
  28. <u-icon class="listData-item-r-icon" name="icon-xian-11" custom-prefix="xd-icon" size="24" color="#2b85e4"></u-icon>
  29. </view>
  30. </view>
  31. <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" style="padding: 150px 0 180px;background: #fff;" mode="list"></u-empty>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import { clzConfirm } from '@/libs/tools.js'
  38. import { findStoreList,findStoreVsDevice } from '@/api/store.js'
  39. import { queryCurrentTaskUsing } from '@/api/task.js'
  40. import { findUserInfo } from '@/api/atorg.js'
  41. export default{
  42. data(){
  43. return{
  44. organizationNowList: [], // 组织机构 当前显示 列表数据
  45. organizationList: [], // 组织机构 总列表数据
  46. nowStructure: [], // 面包屑
  47. nowInd: [], // 下标数组
  48. status: 'loading', // 加载中状态
  49. noDataText: '暂无数据', // 数据异常提示
  50. list: [], // 门店数据列表
  51. }
  52. },
  53. onLoad() {
  54. // 权限下所有门店数据
  55. this.getStoreList()
  56. // 权限下的组织机构数据
  57. this.getOrgList()
  58. },
  59. methods: {
  60. // 权限下所有门店数据
  61. getStoreList(orgCode){
  62. this.status = 'loading'
  63. // 获取门店列表
  64. findStoreList({ orgCode: orgCode ? orgCode : '' }).then(res => {
  65. if(res.status == 200){
  66. this.list = res.data
  67. this.noDataText = '暂无数据' // 有列表数据时不显示,因此只用默认设置为无数据时所需显示的'暂无数据'即可
  68. }else{
  69. this.list = []
  70. this.noDataText = res.message
  71. }
  72. this.status = 'loadmore'
  73. })
  74. },
  75. // 组织机构数据
  76. getOrgList(){
  77. findUserInfo().then(res => {
  78. if(res.status == 200){
  79. this.nowStructure.push(res.data[0].name)
  80. this.organizationList = res.data
  81. this.organizationNowList = res.data[0].children
  82. }else{
  83. this.organizationList = []
  84. this.organizationNowList = []
  85. this.nowStructure = []
  86. }
  87. })
  88. },
  89. // 组织机构 click
  90. clickOrganization(item, ind){
  91. this.nowInd.push(ind)
  92. if(item.children){
  93. this.organizationNowList = item.children
  94. }else{
  95. this.organizationNowList = []
  96. }
  97. this.nowStructure.push(item.name)
  98. this.getStoreList(item.code)
  99. },
  100. // 切换至当前所选的组织结构
  101. checkedStructure(ind){
  102. if(ind == 0){
  103. this.nowInd = []
  104. this.organizationNowList = this.organizationList[0].children
  105. this.nowStructure = []
  106. this.nowStructure.push(this.organizationList[0].name)
  107. this.getStoreList()
  108. }else{
  109. let subInd = JSON.parse(JSON.stringify(this.nowInd)).splice(0, ind)
  110. this.nowInd = subInd
  111. let code = '' // 组织机构编码
  112. for(let i=0; i< subInd.length;i++){
  113. if(i==0){
  114. this.organizationNowList = this.organizationList[0].children[subInd[i]].children
  115. code = this.organizationList[0].children[subInd[i]].code
  116. }else{
  117. this.organizationNowList = this.organizationNowList[subInd[i]].children
  118. code = this.organizationNowList[subInd[i]].code
  119. }
  120. }
  121. this.nowStructure = JSON.parse(JSON.stringify(this.nowStructure)).splice(0, ind+1)
  122. this.getStoreList(code)
  123. }
  124. },
  125. // 开始巡店
  126. goPage(item){
  127. // 判断当前门店是否已绑定设备
  128. findStoreVsDevice({storeCode:item.code}).then(res=>{
  129. if(res.data.length){
  130. // 门店下的设备
  131. this.$u.vuex('vuex_storeVideoList',res.data)
  132. // 校验是否有历史巡店记录
  133. this.queryHasTaskUsing(item)
  134. }else{
  135. uni.showToast({
  136. icon: 'none',
  137. title: '当前门店没有绑定设备,暂时不能视频巡店'
  138. })
  139. }
  140. })
  141. },
  142. // 判断当前门店是否已绑定设备
  143. // type VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION:现场巡店、POINT_INSPECTION:点检任务
  144. queryHasTaskUsing(item){
  145. queryCurrentTaskUsing({ storeId: item.id, type: 'VIDEO_INSPECTION' }).then(res => {
  146. if(res.status == 200){
  147. if(res.data){ // 为true有历史巡店记录
  148. clzConfirm({
  149. title: '提示',
  150. content: '有进行中的巡店任务,是否继续?',
  151. confirmText: '继续巡店',
  152. cancelText: '重新开始',
  153. buttons: ['继续巡店','重新开始'],
  154. success: function (result) {
  155. if (result.confirm || result.index==0) { // 继续巡店
  156. uni.navigateTo({
  157. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=video'
  158. })
  159. }else if(result.cancel || result.index==1){ // 重新开始
  160. uni.navigateTo({
  161. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=1&types=video'
  162. })
  163. }
  164. }
  165. })
  166. }else{
  167. uni.navigateTo({
  168. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&types=video'
  169. })
  170. }
  171. }else{
  172. uni.showToast({icon: 'none', title: res.message})
  173. }
  174. })
  175. }
  176. }
  177. }
  178. </script>
  179. <style lang="scss">
  180. page {
  181. background-color: #f8f8f8;
  182. height: 100vh;
  183. }
  184. .organization-wrap{
  185. position: relative;
  186. .organization-root-tit{
  187. position: fixed;
  188. left: 0;
  189. top: 0;
  190. width: 100%;
  191. padding: 20upx 30upx;
  192. line-height: 45upx;
  193. background-color: #fff;
  194. border-bottom: 6upx solid #f8f8f8;
  195. z-index: 1;
  196. .structure-con{
  197. display: inline-block;
  198. .structure-name{
  199. color: #2979ff;
  200. }
  201. .structure-icon{
  202. padding: 0 10upx;
  203. }
  204. }
  205. }
  206. .organization-node-con{
  207. padding: 88upx 30upx 0;
  208. background-color: #fff;
  209. .organization-node-item{
  210. display: flex;
  211. padding: 25upx 10upx 25upx 20upx;
  212. border-bottom: 1px solid #f8f8f8;
  213. &:active{
  214. opacity: 0.5;
  215. }
  216. &-name{
  217. flex-grow: 1;
  218. }
  219. &-icon{
  220. flex-shrink: 0;
  221. }
  222. }
  223. }
  224. // 门店列表
  225. .list-con{
  226. padding: 0 20upx;
  227. .list-tit{
  228. padding: 20upx 6upx;
  229. border-bottom: 1upx solid #f8f8f8;
  230. }
  231. .listData-con{
  232. box-sizing: border-box;
  233. .listData-item{
  234. display: flex;
  235. justify-content: space-between;
  236. align-items: center;
  237. padding: 25upx;
  238. border-bottom: 1px solid #f8f8f8;
  239. background-color: #fff;
  240. &:active{
  241. opacity: 0.5;
  242. }
  243. &-l{
  244. flex-grow: 1;
  245. padding-right: 10upx;
  246. position: relative;
  247. padding-left: 50upx;
  248. &-icon{
  249. vertical-align: sub;
  250. padding-right: 8upx;
  251. position: absolute;
  252. left: 0;
  253. top: -4upx;
  254. }
  255. }
  256. &-r{
  257. flex-shrink: 0;
  258. }
  259. }
  260. }
  261. }
  262. }
  263. </style>