233 lines
6.0 KiB
Vue
233 lines
6.0 KiB
Vue
<template>
|
||
<view class="">
|
||
<uni-popup ref="popup" type="top" background-color="#fff">
|
||
<scroll-view scroll-y class="scrollbox" style="height:600rpx;background:#fff;" >
|
||
<!--筛选模块 -->
|
||
<view class="screen_content" @tap.stop.prevent>
|
||
<view class="fir_li">
|
||
<view class="li_label">关联客户</view>
|
||
<view class="li_box" @click="toSelectCustomer">
|
||
<view class="form_right" style="text-align: center;">
|
||
<view :class="customerObj.id ? 'valueActive' : ''">
|
||
{{customerObj.id ? customerObj.name : '点击选择'}}
|
||
</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">归属人</view>
|
||
<view class="li_box" @click="toSelectStaff">
|
||
<view class="form_right">
|
||
<view :class="staffObj.id ? 'valueactive' : '' ">
|
||
{{staffObj.id ? staffObj.name : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">成交状态</view>
|
||
<view class="li_box">
|
||
<picker @change="changeStatus" :range="statusArr" :value="statusIndex" :range-key="'name'">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;"
|
||
:class="statusArr[statusIndex] ? 'valueactive' : '' ">{{statusArr[statusIndex] ? statusArr[statusIndex].name : '成交状态'}}
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">时间筛选</view>
|
||
<view class="li_box" style="display: flex;">
|
||
<picker @change="changeStartTime" mode="date" :end="end_time"
|
||
style="width:50%;border-right:1rpx solid #CCCCCC">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;"
|
||
:class="start_time ? 'valueactive' : '' ">
|
||
{{start_time ? start_time : '开始时间'}}</view>
|
||
</view>
|
||
</picker>
|
||
<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;"
|
||
:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button_bottom">
|
||
<view @tap.stop="reset">重置</view>
|
||
<view @tap.stop="sureQuery">确定</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
|
||
<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import selectCustomer from '@/components/selectCustomer.vue'
|
||
import selectStaff from '@/components/selectStaff.vue'
|
||
import searchItem from '@/components/search/searchitem.vue'
|
||
|
||
export default{
|
||
components:{
|
||
selectCustomer,
|
||
selectStaff,
|
||
searchItem
|
||
},
|
||
props:{
|
||
searchForm:{
|
||
type:Array,
|
||
default:[]
|
||
}
|
||
},
|
||
data() {
|
||
return{
|
||
times:'',
|
||
staffObj:{},
|
||
customerObj:{},
|
||
start_time:'',
|
||
end_time:'',
|
||
showIndex:1,
|
||
contract_status:null, //1：未成交 2：成交
|
||
statusArr:[
|
||
{id:1,name:'未成交'},
|
||
{id:2,name:'已成交'}
|
||
],
|
||
statusIndex:null,
|
||
}
|
||
},
|
||
methods:{
|
||
init(obj) {
|
||
this.$refs.popup.open()
|
||
if(obj.timeArr && obj.timeArr.length!=0 && this.showIndex == 1){
|
||
this.start_time = obj.timeArr[0]
|
||
this.end_time = obj.timeArr[1]
|
||
}
|
||
this.statusIndex = obj.statusIndex
|
||
|
||
|
||
},
|
||
close() {
|
||
this.$refs.popup.close()
|
||
},
|
||
changeStatus(e) {
|
||
this.statusIndex = e.detail.value
|
||
},
|
||
toSelectCustomer() {
|
||
this.$refs.customerChild.init()
|
||
},
|
||
getCustomerinfo(obj) {
|
||
this.customerObj = obj
|
||
},
|
||
//选择归属人
|
||
toSelectStaff() {
|
||
this.$refs.staffChild.init()
|
||
},
|
||
sureStaff(obj) {
|
||
this.staffObj = obj
|
||
},
|
||
changeStartTime(e) {
|
||
this.showIndex = 2
|
||
this.start_time = e.detail.value
|
||
if(!this.end_time){
|
||
this.end_time = e.detail.value
|
||
}
|
||
},
|
||
changeEndTime(e) {
|
||
this.showIndex = 2
|
||
this.end_time = e.detail.value
|
||
if(!this.start_time){
|
||
this.start_time = e.detail.value
|
||
}
|
||
},
|
||
changeSearchData(type,key,value){
|
||
this.$emit('changeSearchData',type,key,value)
|
||
},
|
||
reset() {
|
||
this.customerObj = {}
|
||
this.staffObj = {}
|
||
this.start_time = ''
|
||
this.end_time = ''
|
||
this.statusIndex = null
|
||
this.$emit('resetForm')
|
||
},
|
||
sureQuery() {
|
||
let params = {
|
||
createtime:(this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
|
||
customer_id:this.customerObj.id?this.customerObj.id:'',
|
||
staff_id:this.staffObj.id?this.staffObj.id:'',
|
||
contract_status:this.statusArr[this.statusIndex]?this.statusArr[this.statusIndex].id:'',
|
||
}
|
||
this.close()
|
||
this.$emit('sureParams',params)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.screen_content {
|
||
width:702rpx;
|
||
z-index: 2;
|
||
border-top:1rpx solid #CCCCCC;
|
||
background-color: #fff;
|
||
padding:24rpx;
|
||
.fir_li{
|
||
margin-bottom:20rpx;
|
||
.li_label{
|
||
font-size:28rpx;
|
||
color:#333333;
|
||
margin-bottom:15rpx;
|
||
}
|
||
.li_box{
|
||
border-radius: 15rpx;
|
||
border:1rpx solid #CCCCCC;
|
||
height:60rpx;
|
||
padding:0 35rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
.form_right {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color:#999;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 28rpx 5rpx 0 0;
|
||
}
|
||
.rightinput{
|
||
height:60rpx;
|
||
line-height: 60rpx;
|
||
width:100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.button_bottom {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 90rpx;
|
||
background-color: #fff;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
:first-child {
|
||
flex: 1;
|
||
color: $uni-text-color;
|
||
border-top:1rpx solid #CCCCCC;
|
||
}
|
||
:last-child {
|
||
flex: 1;
|
||
background-color: $uni-text-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style> |