organization.vue 8.5 KB

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