313 lines
7.7 KiB
Vue
313 lines
7.7 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="区域选择"></hzHeader>
|
||
<view class="hzContent" style="padding-top: 200upx;">
|
||
<view class="saveBtn" @click="saveArea">保存</view>
|
||
<view class="main">
|
||
<view class="tab-boxs">
|
||
<view class="tab-item" v-for="(item, index) in buildList" :key="index" :class="currentTabIndex == index ? 'active' : ''" @click="currentTabIndex = index">
|
||
<view class="activeLine" v-if="currentTabIndex == index"></view>
|
||
<view>{{item.ACCESSNAME}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未审批列表 -->
|
||
<view class="list-box">
|
||
<view v-for="(item, index) in buildList" :key="index" v-show="currentTabIndex == index">
|
||
<uni-table ref="table" :border="false" type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
|
||
<uni-tr>
|
||
<uni-th width="150" align="left">区域</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(items, indexs) in item.areaList" :key="indexs">
|
||
<uni-td align="left">{{ items.ACCESSNAME}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- <view class="detail" v-for="(item, index) in list" :key="index">
|
||
<view class="detail_msg">
|
||
<view class="info-item" @click="detail(item)">
|
||
<text>办卡类型：</text>
|
||
<text class="infoSpan">{{item.ACCESSNAME}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
|
||
import { getAccessControlList } from '@/common/api.js';
|
||
import { callbackRequest, alertTip, getStorage,formatDate } from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import UniPopup from "@/components/uni-popup/uni-popup.vue"
|
||
import xflSelect from '../../components/xfl-select/xfl-select1.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
formatDate: formatDate,
|
||
userId: getStorage('userInfo').userId,
|
||
currentTabIndex:0,
|
||
list: [],
|
||
buildList: [
|
||
{id:'1',ACCESSNAME:'科技楼',areaList:[{ACCESSNAME:'科技楼测试区域1'},{ACCESSNAME:'科技楼测试区域2'},{ACCESSNAME:'科技楼测试区域3'}]},
|
||
{id:'1',ACCESSNAME:'调度楼',areaList:[{ACCESSNAME:'调度楼测试区域1'},{ACCESSNAME:'调度楼测试区域2'},{ACCESSNAME:'调度楼测试区域3'}]},
|
||
{id:'1',ACCESSNAME:'后勤楼',areaList:[{ACCESSNAME:'后勤楼测试区域1'},{ACCESSNAME:'后勤楼测试区域2'},{ACCESSNAME:'后勤楼测试区域3'}]},
|
||
],
|
||
examineBatch:'',
|
||
chosenType:'',
|
||
chosenAreaList:[]
|
||
};
|
||
},
|
||
components: {
|
||
loadMore,
|
||
contentNone,
|
||
UniPopup,
|
||
xflSelect
|
||
},
|
||
watch: {
|
||
currentTabIndex: function(newVal, oldVal) {
|
||
this.currentTabIndex = newVal;
|
||
// if (this.currentTabIndex==0) {
|
||
|
||
// }else if (this.currentTabIndex==1) {
|
||
|
||
// }
|
||
// this.getExaminePage();
|
||
}
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.selectedIndexs = []
|
||
|
||
this.chosenType = options.chosenType || 0;
|
||
this.currentTabIndex = options.currentTabIndex || 0;
|
||
this.examineBatch = options.examineBatch || "1";
|
||
},
|
||
onShow() {
|
||
this.getAccessControlList();
|
||
},
|
||
methods: {
|
||
getAccessControlList() {
|
||
var data = {};
|
||
data = {
|
||
userId: this.userId,
|
||
// examineBatch:this.examineBatch,
|
||
// examineState:'0',
|
||
// type:"1"
|
||
// orgId:getStorage('userInfo').department_id
|
||
};
|
||
console.log(data)
|
||
let params = {
|
||
method:getAccessControlList,
|
||
data: data
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData||[];
|
||
this.buildList = result
|
||
console.log(result)
|
||
// this.list = result;
|
||
} else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
getUserPermissions(code) {
|
||
let that = this;
|
||
// if (!that.userId) {
|
||
// return;
|
||
// }
|
||
let userId= getStorage('userInfo').userId;
|
||
callbackRequestNoLoading({ method: getUserPermission3, data: { userId: userId,parentCode:code } }).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
that.permissions = res.data.returnData;
|
||
} else {
|
||
console.log('获取权限失败');
|
||
}
|
||
});
|
||
},
|
||
selectionChange(e) {
|
||
// console.log(this.currentTabIndex)
|
||
// console.log(e.detail.index)
|
||
let arrList = []
|
||
let arrIdsList = []
|
||
let selectedIndexs = [] // 选择的下标数组
|
||
selectedIndexs = e.detail.index
|
||
// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
|
||
selectedIndexs.map(i => {
|
||
arrList.push(this.buildList[this.currentTabIndex].areaList[i].ACCESSNAME)
|
||
arrIdsList.push(this.buildList[this.currentTabIndex].areaList[i].ACCESSID)
|
||
})
|
||
// console.log(arrList)
|
||
// console.log(arrIdsList)
|
||
let obj = {
|
||
addressId:this.buildList[this.currentTabIndex].ACCESSID,
|
||
address:this.buildList[this.currentTabIndex].ACCESSNAME,
|
||
area:arrList.join(','),
|
||
areaIds:arrIdsList.join(','),
|
||
}
|
||
// console.log(obj)
|
||
this.chosenAreaList[this.currentTabIndex] = obj
|
||
},
|
||
saveArea() {
|
||
let arr = []
|
||
this.chosenAreaList.forEach(item=>{
|
||
if(item.area!=''){
|
||
arr.push(item)
|
||
}
|
||
})
|
||
console.log(arr)
|
||
let pages = getCurrentPages(); //获取所有页面栈实例列表
|
||
let nowPage = pages[pages.length - 1]; //当前页页面实例
|
||
let prevPage = pages[pages.length - 2]; //上一页页面实例
|
||
if(this.chosenType==1){
|
||
prevPage.$vm.areaData0 = arr;
|
||
}
|
||
if(this.chosenType==2){
|
||
prevPage.$vm.areaData1 = arr;
|
||
}
|
||
uni.navigateBack({ // 返回上一页面
|
||
delta: 1 // 返回的页面数
|
||
});
|
||
},
|
||
|
||
},
|
||
onReachBottom() {
|
||
// if(this.currentTabIndex==0){
|
||
|
||
// }else{
|
||
|
||
// }
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
page {
|
||
// background: #f8f8f8;
|
||
}
|
||
|
||
|
||
.saveBtn{
|
||
width: 110upx;
|
||
height: 70upx;
|
||
font-size: 30upx;
|
||
line-height: 70upx;
|
||
text-align: center;
|
||
color: #fff;
|
||
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
|
||
border-radius: 12px;
|
||
position: absolute;
|
||
top: 200upx;right: 40upx;
|
||
|
||
}
|
||
.main {
|
||
position: absolute;
|
||
top: 280upx;
|
||
width: 100%;
|
||
z-index: 10;
|
||
.tab-boxs {
|
||
width: 25%;
|
||
// min-height: 80vh;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding-top: 50upx;
|
||
.tab-item {
|
||
height: 100upx;
|
||
width: 100%;
|
||
font-size: 30upx;
|
||
margin: 40upx 0;
|
||
display: flex;
|
||
font-size: 30upx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.active {
|
||
background-color: #DFE7F5;
|
||
color: #333;
|
||
border-top-right-radius: 100upx;
|
||
border-bottom-right-radius: 100upx;
|
||
font-weight: bold;
|
||
|
||
}
|
||
.activeLine{
|
||
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
|
||
border-radius: 20upx;
|
||
margin-right: 10upx;
|
||
// float: left;
|
||
width: 10upx;
|
||
height: 30upx;
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
width: 70%;
|
||
min-height: 80vh;;
|
||
margin-top: 20upx;
|
||
background: #fff;
|
||
border-radius: 20upx;
|
||
position: absolute;
|
||
padding: 20upx;
|
||
padding-top: 40upx;
|
||
top: 0;
|
||
right: 20upx;
|
||
|
||
.detail{
|
||
// height: 400upx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
#addbtn {
|
||
height: 120upx;
|
||
background-color: #ffffff;
|
||
padding: 30upx;
|
||
border-radius: 30upx;
|
||
color: #333333;
|
||
border-bottom: 0.033333rem solid #eee;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-top: 20upx;
|
||
}
|
||
.addbtn view text:nth-child(1) {
|
||
font-size: 32upx;
|
||
margin-left: 220upx;
|
||
color: #00c277;
|
||
}
|
||
.addbtn view text:nth-child(2) {
|
||
font-size: 32upx;
|
||
margin-left: 180upx;
|
||
color: #00c277;
|
||
}
|
||
.tips {
|
||
font-size: 22upx;
|
||
// margin-left: 80upx;
|
||
margin-top: 20upx;
|
||
}
|
||
uni-radio .uni-radio-input {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
margin-right: 5px;
|
||
outline: 0;
|
||
border: 1px solid #d1d1d1;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
width: 18px!important;
|
||
height: 18px!important;
|
||
position: relative;
|
||
}
|
||
</style>
|