hz-zhhq-app/pages/licenseplateApproval/licenseplateApproval.vue

702 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="banner-box">
<!-- <image v-if="currentTabIndex == 0" src="/static/imgs/visitor.png" mode=""></image> -->
<image v-if="currentTabIndex == 1" src="/static/imgs/visitor.png" mode=""></image>
<image v-if="currentTabIndex == 2" src="/static/imgs/visitor.png" mode=""></image>
</view>
<view class="main">
<view class="tab-box">
<!-- <view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">邀请来访</view> -->
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">未审批</view>
<view class="tab-item" :class="currentTabIndex == 2 ? 'active' : ''" @click="currentTabIndex = 2">已审批</view>
</view>
<view v-if="currentTabIndex == 1 && list.length>0" style="height: 80upx;background: white;padding-left: 10upx;line-height: 68upx;border-bottom: 2upx solid #eee;">
<radio-group @change="checkRadioChange" style="width: 80%;float: left;"><!-- @change="checkRadioChange" -->
<label class="radio" style="margin-right: 10upx;font-size: 26upx;" v-for="(item, index) in items" :key="item.value" >
<radio :value="item.value" :checked="item.checked" style="transform:scale(0.9)" color="#00c277"/>
{{item.name}}
<!-- <view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{item.name}}</view> -->
</label>
</radio-group>
<view style="float: right;width: 20%;height: 30upx;"><button @click="getCheckBoxList()" style="height: 60upx;margin-top: 8upx;background: #00c277;color: white;" class="mini-btn" type="warn" size="mini">审批</button></view>
</view>
<!-- 未审批列表 -->
<view class="list-box" v-if="currentTabIndex == 1">
<view
class="list-item"
v-for="(item, index) in list"
:key="index"
>
<view class="title" style="position: relative;" >
<text class="line"></text>
<text class="text">{{item.real_name}}</text>
<checkbox @click="checkBox($event, item)" name="checkbox" :checked="item.checkValue" :value="item.id+''" color="#00c277" style="transform:scale(0.8); position: absolute;top: 16upx;" />
<text class="status2" v-if="item.licenseplate1_status==0">未审批</text>
<text class="status2" v-if="item.licenseplate1_status==1">已同意</text>
<text class="status2" v-if="item.licenseplate1_status==2">已拒绝</text>
<text class="status2" v-if="item.licenseplate1_status==3">已删除</text>
<text class="status2" v-if="item.licenseplate1_status==4">已取消</text>
</view>
<view class="content" >
<view class="info-item">
<view class="fl-text">申请人:</view>
<view class="fr-text">{{ item.real_name }}</view>
</view>
<view class="info-item">
<view class="fl-text">部门:</view>
<view class="fr-text">{{ item.department_name }}</view>
</view>
<view class="info-item">
<view class="fl-text">车牌号:</view>
<view class="fr-text">{{item.licenseplate1}}</view>
</view>
<view class="info-item">
<view class="fl-text">人员类型:</view>
<view class="fr-text">{{ item.user_type }}</view>
</view>
<view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{ item.gmt_created }}</view>
</view>
<!-- <view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{ item.apply_time }}</view>
</view> -->
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,1,index)">删除</view> -->
</view>
</view>
</view>
<!-- 已审批列表 -->
<view class="list-box" v-if="currentTabIndex == 2">
<view class="list-item" v-for="(item, index) in list" :key="index"
>
<view class="title">
<text class="line"></text>
<text class="text">{{item.real_name}}</text>
<text class="status2" v-if="item.licenseplate1_status==0">未审批</text>
<text class="status2" v-if="item.licenseplate1_status==1">已同意</text>
<text class="status2" v-if="item.licenseplate1_status==2">已拒绝</text>
<text class="status2" v-if="item.licenseplate1_status==3">已删除</text>
<text class="status2" v-if="item.licenseplate1_status==4">已取消</text>
</view>
<view class="content">
<view class="info-item">
<view class="fl-text">申请人:</view>
<view class="fr-text">{{ item.real_name }}</view>
</view>
<view class="info-item">
<view class="fl-text">部门:</view>
<view class="fr-text">{{ item.department_name }}</view>
</view>
<view class="info-item">
<view class="fl-text">车牌号:</view>
<view class="fr-text">{{item.licenseplate1}}</view>
</view>
<view class="info-item">
<view class="fl-text">人员类型:</view>
<view class="fr-text">{{ item.user_type }}</view>
</view>
<view class="info-item">
<view class="fl-text">审批时间:</view>
<view class="fr-text">{{ item.gmt_modified }}</view>
</view>
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,2,index)">删除</view> -->
</view>
</view>
</view>
<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
</view>
<load-more v-show="list.length != 0" :loadingType="2" :contentText="contentText"></load-more>
<uni-popup ref="butPopup" type="bottom" style="">
<view >
<view class="footer-btn footer-btn-two batchBtn" >
<view class="btn btn-col btn1" @click="submit(2)">拒绝</view>
<view class="btn btn-col1 btn2" @click="submit(1)">同意</view>
</view>
</view>
</uni-popup>
<!-- <uni-popup ref="popup" type="center" style="">
<view style="background: white;width: 80%;height: 840upx;width: 600upx;position: relative;border-radius: 10upx;padding: 14upx;">
<view class="tab_rig visitorshow-box" >
<xfl-select
:list="finalList"
:clearable="true"
:listShow="showList"
:isCanInput="true"
:focusShowList = "true"
:style_Container="' font-size: 28upx;border-radius:10upx;border:1px solid #e5e5e5;width:95%'"
:placeholder = "'请输入姓名、手机号、部门搜索'"
@change="changeSel"
@input="inputSel"
@clear="clearSel"
:selectHideType="'hideAll'"
>
</xfl-select>
</view>
<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
<view class="btn btn-col" style="width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;" @click="closeCirculation()">取消</view>
<view class="btn btn-col1" style="width:40%;border-radius: 10upx" @click="submitCirculation()">确定</view>
</view>
</view>
</uni-popup> -->
</view>
</template>
<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import { invite, getLpaList, greenVisitorInfo,getApplyInfo,getCirculationList,submitCirculation ,updatelicenseplateApprovalBatch,submitCirculationBatch } from '@/common/api.js';
import { callbackRequest, alertTip, getStorage } 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 {
userId: getStorage('userInfo').userId,
currentTabIndex: 0,
page: 1,
pageSize: 5,
list: [
// {visitorName:"刘晓明",visitTime:"2020-01-05 09:30",applyer:"李晓蓝",applyTime:"2019-12-10 08:30"},
// {visitorName:"刘晓明",visitTime:"2020-01-06 09:30",applyer:"张三丰",applyTime:"2019-12-20 08:30"},
// {visitorName:"刘晓明",visitTime:"2020-01-07 09:30",applyer:"李晓龙",applyTime:"2019-12-30 08:30"},
// {visitorName:"刘晓明",visitTime:"2020-01-08 09:30",applyer:"孙瑞",applyTime:"2019-12-25 08:30"},
// {visitorName:"刘晓明",visitTime:"2020-01-09 09:30",applyer:"刘晓明",applyTime:"2019-12-30 08:30"},
],
stateList: ['待审核', '已通过','已拒绝','待本人确认','已取消','','已流转'],
loadingType: 2, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
items: [
{
value: '0',
name: '全选',
checked:false
},
{
value: '1',
name: '取消选择',
checked:false
}
],
appointmentType:"0",
appointmentTypeForPopup:"",
circulationList: [],
finalList: [],
showList:true,
circulationId:"",
objList:[],
paramsDataList:[],
};
},
components: {
loadMore,
contentNone,
UniPopup,
xflSelect
},
watch: {
currentTabIndex: function(newVal, oldVal) {
this.currentTabIndex = newVal;
if (this.currentTabIndex) {
this.page = 1;
this.loadingType = 0;
this.getMyList();
}
}
},
onLoad(options) {
// 审批授权 与 邀约记录 共用一个页面
// 根据 页面传值 type 区分,显示默认页面
if (options.type == 2) {
this.currentTabIndex = 2;
}else{
this.currentTabIndex = 1;
}
//this.getCirculationList();
},
methods: {
getMyList(newVal) {
this.list = [];
let params = {
method: getLpaList,
data: { type: this.currentTabIndex+'', pageSize: this.pageSize, page: this.page }
};
// console.log("--", params.data);
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
let result = res.data.returnData;
// console.log("999--",result);
for(var i=0;i<result.length;i++){
result[i].checkValue = false;
}
if (this.page == 1) {
this.list = result;
} else {
if (result.length > 0) {
this.list = [...this.list, ...result];
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
}
});
},
toDetail(url) {
uni.navigateTo({
url
});
},
checkBox(e, item) {
let that = this;
let box = (item.checkValue = !item.checkValue);
},
checkRadio(e, item){
let that = this;
let box = (item.checked = !item.checked);
},
getCheckBoxList(){
let that = this;
var checkedList = [];
for(var i=0;i<that.list.length;i++){
if(that.list[i].checkValue){
checkedList.push(that.list[i]);
}
}
if(checkedList.length==0){
alertTip("请选择数据进行审批");
return;
}else{
//流转数据格式data:{id:this.circulationId,applyId:this.applyId,userLevel:this.userLevel}
var objList = [];
for(var i=0;i<checkedList.length;i++){
if(checkedList[i].checkValue){
var obj = {id:checkedList[i].id,modifier:this.userId,licenseplate1Status:'',eaccountId:checkedList[i].e_account_id};//分三种情况
objList.push(obj);
}
}
that.objList = objList;
this.openButPopup();
}
},
submit(type){
let objList = this.objList;
for(var i=0;i<objList.length;i++){
objList[i].licenseplate1Status = type;
}
let params = {
"method": updatelicenseplateApprovalBatch,// 申请的审批
"data": {list:objList}//分三种情况
};
var self = this;
var content="是否确认拒绝";
if(type==2){
content="是否确认同意";
}
uni.showModal({
title: '提示',
content: content,
success: function(res){
if (res.confirm) {
callbackRequest(params)
.then(res =>{
const url = '/pages/licenseplateApproval/licenseplateApproval?type=1';
alertTip(res.data.returnMsg);
setTimeout(function() {
uni.redirectTo({
url
});
}, 10);
})
}
}
})
},
submitCirculation(){
if(this.circulationId==""){
alertTip("请选择流转人员");
return
}
let paramsDataList = [];
for(var i=0;i<this.paramsDataList.length;i++){
this.paramsDataList[i].id = this.circulationId;
paramsDataList.push(this.paramsDataList[i]);
}
let params={
method:submitCirculationBatch,
data:{list:paramsDataList}
}
callbackRequest(params)
.then(res =>{
const url = '/pages/invite2/invite2?type=1';
alertTip(res.data.returnMsg);
setTimeout(function() {
uni.redirectTo({
url
});
}, 10);
})
},
getCirculationList(){
let params = {
"method": getCirculationList,
"data": {userLevel:this.userLevel,deptName:getStorage("userInfo").deptName}
};
callbackRequest(params)
.then(res =>{
var resList = [];
resList = res.data.returnData;
var list = [];
for(var i=0;i<resList.length;i++){
var listObj = resList[i];
var obj={};
obj.value = listObj.real_name+"/"+listObj.mobile+"/"+listObj.department_name;
obj.id = listObj.id;
list.push(obj);
}
this.circulationList = list;
this.finalList = list;
})
},
inputSel(e){
this.circulationId="";
if(e.detail.value == ""){
this.finalList = this.list;
this.showList = true;
return
}
var finalList = [];
for (var i = 0; i < this.list.length; i++) {
let ite = this.list[i].value;
// 包含某一字符串
if(ite.indexOf(e.detail.value) !== -1){
finalList = finalList.concat(ite);
}
}
this.finalList = finalList;
this.showList = true;
},
changeSel(newVal){
//console.log(newVal);
this.circulationId = newVal.orignItem.id;
//this.uinfo.orgName = newVal.newVal;
},
clearSel(){
this.circulationId="";
this.finalList = this.list;
this.showList = true;
},
openButPopup(){
this.$refs.butPopup.open()
},
closeButPopup(){
this.$refs.butPopup.close()
},
circulation(){
this.$refs.popup.open();
this.closeButPopup();
},
closeCirculation(){
this.$refs.popup.close()
},
checkRadioChange: function (e) {
let that = this;
var values = e.detail.value;
console.log(values)
if(values==0){
for(var i=0;i<that.list.length;i++){
that.list[i].checkValue = true;
}
}else{
for(var i=0;i<that.list.length;i++){
that.list[i].checkValue = false;
}
}
}
},
onReachBottom() {
// if (this.loadingType !== 0 || this.currentTabIndex == 0) {
// return;
// }
// this.loadingType = 1;
// this.page = this.page + 1;
// this.getMyList();
}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';
page {
// background: #f8f8f8;
}
.batchBtn{
position: absolute;height: 140upx; background: white;padding-top: 30upx;
.btn1{
width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
}
.btn2{
width:40%;border-radius: 10upx;
}
.btn3{
width: 28%;margin-left: 4%;border-radius: 10upx;
}
.btn4{
width: 28%;margin-left: 4%;border-radius: 10upx;
}
.btn5{
width: 28%;margin-left: 4%;border-radius: 10upx;
background: #348CF2;
}
}
.container {
position: relative;
overflow: hidden;
background: #f8f8f8;
min-height: 100vh;
.banner-box {
width: 100%;
height: 240upx;
position: absolute;
top: 0;
left: 0;
image {
width: 100%;
height: 100%;
}
}
.main {
margin: 172upx 40upx 0;
position: relative;
z-index: 10;
.tab-box {
overflow: hidden;
border-radius: 10upx 10upx 0 0;
background: rgba(132, 149, 167, 0.8);
height: 70upx;
.tab-item {
float: left;
height: 70upx;
width: 50%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
.form-box {
padding: 20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 0;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
.pic {
width: 60upx;
height: 60upx;
line-height: 80upx;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
input {
width: 70%;
}
}
.jian {
width: 50upx;
height: 50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.sure-btn {
width: 100%;
height: 80upx;
font-size: 28upx;
color: #fff;
text-align: center;
line-height: 80upx;
border-radius: 8upx;
background: #0066cc;
background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
margin-top: 50upx;
}
}
.list-box {
.list-item {
background: #fff;
margin-bottom: 10upx;
.title {
border-bottom: 1px solid #eee;
padding: 20upx 10upx;
overflow: hidden;
line-height: 40upx;
.line {
display: inline-block;
width: 10upx;
height: 32upx;
background: $assistColor;
margin-top: 4upx;
}
.text {
display: inline-block;
font-size: 28upx;
color: #444;
font-weight: bold;
margin-left: 10upx;
vertical-align: top;
}
.status {
font-size: 26upx;
color: $assistColor;
float: right;
}
.status1 {
font-size: 26upx;
color: #00c277;
float: right;
}
.status2 {
font-size: 26upx;
color: red;
float: right;
}
}
.content {
padding: 10upx 20upx;
// padding:10upx 10upx 60upx 10upx;
.info-item {
overflow: hidden;
padding-bottom: 10upx;
.fl-text {
float: left;
font-size: 26upx;
color: #444;
font-weight: bold;
line-height: 40upx;
}
.fr-text {
float: right;
font-size: 26upx;
color: #666;
line-height: 40upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
}
}
#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>