550 lines
11 KiB
Vue
550 lines
11 KiB
Vue
<template>
|
|
<view class="custom-banner">
|
|
<view class="tabbar-title">
|
|
<view class="search-body">
|
|
<image class="left-img" src="../../static/project_manegment/fangdajing.png" mode=""></image>
|
|
<input class="search-input" type="text" v-model="itemName" placeholder="请输入事项名称" />
|
|
<view class="right-btn" @click="caseSearch">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
<!-- <view class="right-pick" @click="showDrawer">
|
|
<image class="right-img" src="../../static/project_manegment/shaixuan.png" mode=""></image>
|
|
<text>筛选</text>
|
|
</view> -->
|
|
</view>
|
|
|
|
<u-popup v-model="show" mode="right" :zoom='true' width="600rpx" :mask='true' :closeable='false'
|
|
:safe-area-inset-bottom='true'>
|
|
<scroll-view style="height: 100%;padding-top:20rpx" scroll-y="true">
|
|
<view class="hetong-drawer">
|
|
<view class="top-search">
|
|
<view class="top-title">
|
|
<text>筛选</text>
|
|
<uni-icons class="close-btn" @click="closeDrawer" type="closeempty" size="25" color="#d7d7d7">
|
|
</uni-icons>
|
|
</view>
|
|
|
|
<!-- 合同状态 -->
|
|
<view class="hetong-status">
|
|
|
|
<view class="search-title">
|
|
合同状态
|
|
</view>
|
|
<view class="search-content">
|
|
<view :class="{'search-content-item-status':true,'active':eventStatus==''}"
|
|
@click="getCurrentStatus()">
|
|
全部
|
|
</view>
|
|
<view :class="{'search-content-item-status':true,'active':eventStatus=='3'}"
|
|
@click="getCurrentStatus('3')">
|
|
审核中
|
|
</view>
|
|
<view :class="{'search-content-item-status':true,'active':eventStatus=='0'}"
|
|
@click="getCurrentStatus('0')">
|
|
已退回
|
|
</view>
|
|
<view :class="{'search-content-item-status':true,'active': eventStatus=='1'}"
|
|
@click="getCurrentStatus('1')">
|
|
审核通过
|
|
</view>
|
|
<view :class="{'search-content-item-status':true,'active': eventStatus=='2'}"
|
|
@click="getCurrentStatus('2')">
|
|
已作废
|
|
</view>
|
|
<view :class="{'search-content-item-status':true,'active': eventStatus=='4'}"
|
|
@click="getCurrentStatus('4')">
|
|
未提交
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 提交时间 -->
|
|
<!-- <view class="hetong-time">
|
|
<view class="search-title">
|
|
提交时间
|
|
</view>
|
|
<view class="search-content-time">
|
|
<view class="search-content-item-time">
|
|
<uni-datetime-picker type="daterange" :value="beginTime" :border="false"
|
|
:clear-icon="false" @change="changeBeginTime" />
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
--><!-- 所属模块 -->
|
|
<!-- <view class="hetong-type">
|
|
<view class="search-title">
|
|
所属模块
|
|
</view>
|
|
<view class="search-content-type">
|
|
<view @click="changeModule(-1)" class="search-content-item-type">
|
|
<text :class="{'active': currentId==-1}">全部</text>
|
|
|
|
</view>
|
|
<view v-for="(val,index) in moduleMenu" :key="val.id" @click="changeModule(index)"
|
|
class="search-content-item-type">
|
|
<text :class="{'active': currentId==val.id}">{{val.label}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
-->
|
|
<view class="empty-view">
|
|
|
|
</view>
|
|
</view>
|
|
<view class="bottom-btn" @click="resetSearch">
|
|
<view class="reset">
|
|
重置
|
|
</view>
|
|
<view class="queding" @click="quedingSearch">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</u-popup>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "customTitleBanner",
|
|
data() {
|
|
return {
|
|
itemName: "",
|
|
eventStatus: "",
|
|
submissionTimeFrom: "", //开始时间
|
|
submissionTimeFromTo: "", //结束时间
|
|
moduleId: "",
|
|
moduleMenu: [],
|
|
show:false,
|
|
beginTime:'',
|
|
currentId: -1,
|
|
|
|
}
|
|
},
|
|
props: {
|
|
obj:{
|
|
type: Object,
|
|
default:null
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this._getModuleMenu()
|
|
|
|
},
|
|
// mounted() {
|
|
// this.getSystemInfo()
|
|
// },
|
|
methods: {
|
|
|
|
// getSystemInfo(){
|
|
// let _this = this;
|
|
// uni.getSystemInfo({
|
|
// success(res){
|
|
// let statusBarHeight = res.statusBarHeight;
|
|
|
|
// }
|
|
// })
|
|
// },
|
|
caseSearch() {
|
|
this.$emit("caseSearch", this.itemName)
|
|
},
|
|
handleModuleMenus(arr) {
|
|
for (let val of arr) {
|
|
this.moduleMenu.push({
|
|
id: val.id,
|
|
label: val.label,
|
|
children:val.children || [],
|
|
})
|
|
if (val.children) {
|
|
this.handleModuleMenus(val.children)
|
|
}
|
|
}
|
|
},
|
|
|
|
/* 查询所属模块 */
|
|
_getModuleMenu() {
|
|
getModuleMenu().then(res => {
|
|
if (res.statusCode === 200) {
|
|
this.moduleMenu = [];
|
|
let moduleMenus = res.data.data;
|
|
this.handleModuleMenus(moduleMenus)
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '网络异常, 请求失败',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
_handleData(arr){
|
|
for(let val of arr){
|
|
this.moduleId +=val.id +",";
|
|
if(val.children && val.children.length> 0){
|
|
this._handleData(val.children)
|
|
}
|
|
}
|
|
|
|
},
|
|
changeModule(index) {
|
|
let val = this.moduleMenu[index];
|
|
|
|
if (index!==-1) {
|
|
this.currentId = val.id;
|
|
this.moduleId = val.id +",";
|
|
if(val.children && val.children.length> 0){
|
|
this._handleData(val.children)
|
|
}
|
|
this.moduleId = this.moduleId.slice(0,this.moduleId.length-1);
|
|
} else {
|
|
this.moduleId = "";
|
|
this.currentId = -1;
|
|
}
|
|
|
|
|
|
},
|
|
/* 打开弹框 */
|
|
showDrawer() {
|
|
|
|
this.eventStatus = this.obj.eventStatus;
|
|
this.moduleId = this.obj.moduleId;
|
|
|
|
this.currentId = this.obj.moduleId;
|
|
if(this.obj.moduleId && this.obj.moduleId.indexOf(",")!==-1){
|
|
this.currentId = this.obj.moduleId.split(",")[0];
|
|
}
|
|
if(this.moduleId===""){
|
|
this.currentId = -1;
|
|
}
|
|
|
|
this.submissionTimeFrom = this.obj.submissionTimeFrom;
|
|
this.submissionTimeFromTo = this.obj.submissionTimeFromTo;
|
|
// this.$refs.showRight.open();
|
|
this.show = true;
|
|
},
|
|
closeDrawer() {
|
|
this.show = false;
|
|
// this.$refs.showRight.close();
|
|
},
|
|
/* 重置 */
|
|
resetSearch() {
|
|
this.eventStatus = "";
|
|
this.moduleId = "";
|
|
this.currentId = -1;
|
|
this.submissionTimeFrom = "";
|
|
this.submissionTimeFromTo = "";
|
|
},
|
|
/* 确认 */
|
|
quedingSearch() {
|
|
let queryData = {};
|
|
|
|
if (this.eventStatus) {
|
|
queryData.eventStatus = this.eventStatus;
|
|
}
|
|
if (this.moduleId) {
|
|
queryData.moduleId = this.moduleId;
|
|
}
|
|
if (this.submissionTimeFrom && this.submissionTimeFromTo) {
|
|
queryData.submissionTimeFrom = this.submissionTimeFrom;
|
|
queryData.submissionTimeFromTo = this.submissionTimeFromTo;
|
|
}
|
|
this.$emit('quedingSearch', queryData);
|
|
this.closeDrawer();
|
|
},
|
|
|
|
/* 处理合同查询参数 */
|
|
getCurrentStatus(status) {
|
|
if (status) {
|
|
this.eventStatus = status;
|
|
} else {
|
|
this.eventStatus = "";
|
|
}
|
|
|
|
},
|
|
changeBeginTime(time) {
|
|
this.submissionTimeFrom = time[0] + ' 00:00:00';
|
|
this.submissionTimeFromTo = time[1] + ' 00:00:00';
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-body {
|
|
width: 560rpx;
|
|
height: 78rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 39rpx;
|
|
border: 1rpx solid #EEEEEE;
|
|
padding: 13rpx;
|
|
padding-left: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-body .search-input {
|
|
height: 100%;
|
|
flex: 1;
|
|
padding-left: 12rpx;
|
|
font-size: 28rpx;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.left-img {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
|
|
}
|
|
|
|
.right-img {
|
|
width: 32rpx;
|
|
height: 31rpx;
|
|
vertical-align: middle;
|
|
margin-right: 9rpx;
|
|
}
|
|
|
|
.right-btn {
|
|
width: 110rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
background-image: linear-gradient(0deg,
|
|
#2da0f3 0%,
|
|
#54bcff 100%);
|
|
border-radius: 29rpx;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
>>>.uni-navbar-btn-text text {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.tabbar-title {
|
|
background-color: #FFFFFF;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
line-height: 74rpx;
|
|
color: #505050;
|
|
padding-top: 27rpx;
|
|
padding-left: 27rpx;
|
|
padding-right: 27rpx;
|
|
}
|
|
|
|
.text-title {
|
|
position: relative;
|
|
}
|
|
|
|
.active.text-title::after {
|
|
content: "";
|
|
display: block;
|
|
width: 60%;
|
|
height: 6rpx;
|
|
background-color: #215ece;
|
|
border-radius: 6rpx;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* 筛选框 */
|
|
|
|
.right-drawer {
|
|
position: relative;
|
|
}
|
|
|
|
>>>.uni-drawer__content {
|
|
width: 600rpx !important;
|
|
}
|
|
|
|
|
|
/* >>>.uni-drawer {
|
|
top: 290rpx!important;
|
|
} */
|
|
.top-search {
|
|
padding: 35rpx;
|
|
}
|
|
|
|
.top-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top-title text {
|
|
color: #333333;
|
|
}
|
|
|
|
.close-btn>>>.uni-icons {
|
|
width: 23rpx;
|
|
height: 23rpx;
|
|
}
|
|
|
|
.search-title {
|
|
font-size: 28rpx;
|
|
color: #676767;
|
|
padding-bottom: 29rpx;
|
|
}
|
|
|
|
.search-content {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 合同状态 */
|
|
.hetong-status {
|
|
padding-top: 30rpx;
|
|
}
|
|
|
|
.search-content-item-status {
|
|
width: 130rpx;
|
|
height: 48rpx;
|
|
background-color: #f7f7f7;
|
|
color: #9e9e9e;
|
|
border-radius: 24rpx;
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
margin-right: 22rpx;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.search-content-item-status.active {
|
|
background-image: linear-gradient(#2c6fd9,
|
|
#2c6fd9),
|
|
linear-gradient(#029ef3,
|
|
#029ef3);
|
|
background-blend-mode: normal,
|
|
normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 合同时间 */
|
|
.hetong-time {
|
|
padding-top: 37rpx;
|
|
}
|
|
|
|
.search-content-time {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-content-time>>>.uni-date-x {
|
|
|
|
height: 54rpx;
|
|
background-color: #f7f7f7;
|
|
border-radius: 27rpx;
|
|
|
|
font-size: 24rpx;
|
|
color: #797979;
|
|
}
|
|
|
|
.search-content-item-time>>>uni-icons {
|
|
display: none;
|
|
}
|
|
|
|
.center-line {
|
|
width: 36rpx;
|
|
height: 1rpx;
|
|
background-color: #b3b3b3;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
/* 合同类型 */
|
|
.hetong-type {
|
|
padding-top: 50rpx;
|
|
}
|
|
|
|
.search-content-type {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-content-item-type {
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.search-content-item-type text {
|
|
min-width: 130rpx;
|
|
display: block;
|
|
border-radius: 24rpx;
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
background-color: #f7f7f7;
|
|
color: #9e9e9e;
|
|
height: 48rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.search-content-item-type text.active {
|
|
background-image: linear-gradient(#2c6fd9,
|
|
#2c6fd9),
|
|
linear-gradient(#029ef3,
|
|
#029ef3);
|
|
background-blend-mode: normal,
|
|
normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
.bottom-btn {
|
|
display: flex;
|
|
height: 88rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.bottom-btn view {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.reset {
|
|
background-color: #f2f2f2;
|
|
color: #888888;
|
|
}
|
|
|
|
.queding {
|
|
background-image: linear-gradient(#2c6fd9,
|
|
#2c6fd9),
|
|
linear-gradient(#029ef3,
|
|
#029ef3);
|
|
background-blend-mode: normal, normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.empty-view {
|
|
height: 100rpx;
|
|
}
|
|
</style>
|