123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- <template>
- <view class="organization-wrap">
- <!-- 组织结构根节点 -->
- <view class="organization-root-tit">
- <view class="structure-con" v-for="(item,index) in nowStructure" :key="index">
- <text class="structure-name" @click="checkedStructure(index)">{{item}}</text>
- <u-icon class="structure-icon" name="arrow-right" color="#999" size="28"></u-icon>
- </view>
- </view>
- <!-- 组织结构子节点 -->
- <view class="organization-node-con" v-if="organizationNowList && organizationNowList.length > 0">
- <view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item, index)">
- <text class="organization-node-item-name">{{item.name}}</text>
- <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
- </view>
- </view>
- <!-- 门店列表 -->
- <view class="list-con" :style="{'padding-top': organizationNowList && organizationNowList.length > 0 ? '0upx' : '88upx' }">
- <view class="list-tit">门店列表</view>
- <!-- 列表数据 -->
- <view class="listData-con">
- <view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
- <view class="listData-item-l">
- <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
- <text class="listData-item-l-name">{{item.name}}</text>
- </view>
- <view class="listData-item-r">
- <u-icon class="listData-item-r-icon" name="icon-xian-11" custom-prefix="xd-icon" size="24" color="#2b85e4"></u-icon>
- </view>
- </view>
- <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>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { clzConfirm } from '@/libs/tools.js'
- import { findStoreList,findStoreVsDevice } from '@/api/store.js'
- import { queryCurrentTaskUsing } from '@/api/task.js'
- import { findUserInfo } from '@/api/atorg.js'
- export default{
- data(){
- return{
- organizationNowList: [], // 组织机构 当前显示 列表数据
- organizationList: [], // 组织机构 总列表数据
- nowStructure: [], // 面包屑
- nowInd: [], // 下标数组
- status: 'loading', // 加载中状态
- noDataText: '暂无数据', // 数据异常提示
- list: [], // 门店数据列表
- }
- },
- onLoad() {
- // 权限下所有门店数据
- this.getStoreList()
- // 权限下的组织机构数据
- this.getOrgList()
- },
- methods: {
- // 权限下所有门店数据
- getStoreList(orgCode){
- this.status = 'loading'
- // 获取门店列表
- findStoreList({ orgCode: orgCode ? orgCode : '' }).then(res => {
- if(res.status == 200){
- this.list = res.data
- this.noDataText = '暂无数据' // 有列表数据时不显示,因此只用默认设置为无数据时所需显示的'暂无数据'即可
- }else{
- this.list = []
- this.noDataText = res.message
- }
- this.status = 'loadmore'
- })
- },
- // 组织机构数据
- getOrgList(){
- findUserInfo().then(res => {
- if(res.status == 200){
- this.nowStructure.push(res.data[0].name)
- this.organizationList = res.data
- this.organizationNowList = res.data[0].children
- }else{
- this.organizationList = []
- this.organizationNowList = []
- this.nowStructure = []
- }
- })
- },
- // 组织机构 click
- clickOrganization(item, ind){
- this.nowInd.push(ind)
- if(item.children){
- this.organizationNowList = item.children
- }else{
- this.organizationNowList = []
- }
- this.nowStructure.push(item.name)
- this.getStoreList(item.code)
- },
- // 切换至当前所选的组织结构
- checkedStructure(ind){
- if(ind == 0){
- this.nowInd = []
- this.organizationNowList = this.organizationList[0].children
- this.nowStructure = []
- this.nowStructure.push(this.organizationList[0].name)
- this.getStoreList()
- }else{
- let subInd = JSON.parse(JSON.stringify(this.nowInd)).splice(0, ind)
- this.nowInd = subInd
- let code = '' // 组织机构编码
- for(let i=0; i< subInd.length;i++){
- if(i==0){
- this.organizationNowList = this.organizationList[0].children[subInd[i]].children
- code = this.organizationList[0].children[subInd[i]].code
- }else{
- this.organizationNowList = this.organizationNowList[subInd[i]].children
- code = this.organizationNowList[subInd[i]].code
- }
- }
- this.nowStructure = JSON.parse(JSON.stringify(this.nowStructure)).splice(0, ind+1)
- this.getStoreList(code)
- }
- },
- // 开始巡店
- goPage(item){
- // 判断当前门店是否已绑定设备
- findStoreVsDevice({storeCode:item.code}).then(res=>{
- if(res.data.length){
- // 门店下的设备
- this.$u.vuex('vuex_storeVideoList',res.data)
- // 校验是否有历史巡店记录
- this.queryHasTaskUsing(item)
- }else{
- uni.showToast({
- icon: 'none',
- title: '当前门店没有绑定设备,暂时不能视频巡店'
- })
- }
- })
- },
- // 判断当前门店是否已绑定设备
- // type VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION:现场巡店、POINT_INSPECTION:点检任务
- queryHasTaskUsing(item){
- queryCurrentTaskUsing({ storeId: item.id, type: 'VIDEO_INSPECTION' }).then(res => {
- if(res.status == 200){
- if(res.data){ // 为true有历史巡店记录
- clzConfirm({
- title: '提示',
- content: '有进行中的巡店任务,是否继续?',
- confirmText: '继续巡店',
- cancelText: '重新开始',
- buttons: ['继续巡店','重新开始'],
- success: function (result) {
- if (result.confirm || result.index==0) { // 继续巡店
- uni.navigateTo({
- url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=video'
- })
- }else if(result.cancel || result.index==1){ // 重新开始
- uni.navigateTo({
- url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=1&types=video'
- })
- }
- }
- })
- }else{
- uni.navigateTo({
- url: '/pages/shopTour/shopTour?storeId=' + item.id + '&types=video'
- })
- }
- }else{
- uni.showToast({icon: 'none', title: res.message})
- }
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #f8f8f8;
- height: 100vh;
- }
- .organization-wrap{
- position: relative;
- .organization-root-tit{
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- padding: 20upx 30upx;
- line-height: 45upx;
- background-color: #fff;
- border-bottom: 6upx solid #f8f8f8;
- z-index: 1;
- .structure-con{
- display: inline-block;
- .structure-name{
- color: #2979ff;
- }
- .structure-icon{
- padding: 0 10upx;
- }
- }
- }
- .organization-node-con{
- padding: 88upx 30upx 0;
- background-color: #fff;
- .organization-node-item{
- display: flex;
- padding: 25upx 10upx 25upx 20upx;
- border-bottom: 1px solid #f8f8f8;
- &:active{
- opacity: 0.5;
- }
- &-name{
- flex-grow: 1;
- }
- &-icon{
- flex-shrink: 0;
- }
- }
- }
- // 门店列表
- .list-con{
- padding: 0 20upx;
- .list-tit{
- padding: 20upx 6upx;
- border-bottom: 1upx solid #f8f8f8;
- }
- .listData-con{
- box-sizing: border-box;
- .listData-item{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 25upx;
- border-bottom: 1px solid #f8f8f8;
- background-color: #fff;
- &:active{
- opacity: 0.5;
- }
- &-l{
- flex-grow: 1;
- padding-right: 10upx;
- position: relative;
- padding-left: 50upx;
- &-icon{
- vertical-align: sub;
- padding-right: 8upx;
- position: absolute;
- left: 0;
- top: -4upx;
- }
- }
- &-r{
- flex-shrink: 0;
- }
- }
- }
- }
- }
- </style>
|