416 lines
10 KiB
Vue
416 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<view class="sales_head">
|
|
<picker @change="changeTime" :value="valueTime" :range-key="'name'" :range="optionsTime">
|
|
<view class="tablist">
|
|
<view>{{optionsTime[valueTime] ? optionsTime[valueTime].name : '时间'}}</view>
|
|
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
|
</view>
|
|
</picker>
|
|
<picker @change="changeMoneyType" :value="valueMoney" :range-key="'text'" :range="optionsMoney">
|
|
<view class="tablist">
|
|
<view>{{optionsMoney[valueMoney] ? optionsMoney[valueMoney].text : '金额'}}</view>
|
|
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="sales_con">
|
|
<!-- 年度目标模块 -->
|
|
<view class="annual_tar">
|
|
<view class="annual_item">
|
|
<view>年度目标</view>
|
|
<view>
|
|
<input type="digit" v-model="yeartarget" @confirm="handelMoney" @blur="handelMoney" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>1月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="january" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>2月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="february" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>3月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="march" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>4月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="april" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>5月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="may" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>6月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="june" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>7月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="july" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>8月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="august" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>9月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="september" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>10月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="october" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>11月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="november" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
<view class="annual_item">
|
|
<view>12月</view>
|
|
<view>
|
|
<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="december" placeholder="请填写目标金额"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="btn_g bg-blue button-hover round" @click="sureSave">
|
|
保存
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { netGetGongsiList, netSetTargetMoney } from '@/api/kehu.js'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
export default{
|
|
props:{
|
|
optionsTime:{
|
|
type:Array,
|
|
default:[]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
optionsMoney: [{
|
|
text: '成交金额',
|
|
value: 1
|
|
},
|
|
{
|
|
text: '回款金额',
|
|
value: 2
|
|
}
|
|
],
|
|
valueTime:0,
|
|
valueMoney: 0,
|
|
list:[],
|
|
checkBoxChecked: [],
|
|
checkList:[],
|
|
january:'', //1月
|
|
february:'', //2月
|
|
march:'', //3
|
|
april:'', //4月
|
|
may:'', //5月
|
|
june:'', //6月
|
|
july:'', //7月
|
|
august:'', //8月
|
|
september:'', //9月
|
|
october:'', //10月
|
|
november:'', //11月
|
|
december:'', //12月
|
|
yeartarget:'', //年度 总目标
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
created() {
|
|
this.optionsTime.forEach((ele,index)=>{
|
|
if(ele.selected){
|
|
this.valueTime = index
|
|
}
|
|
})
|
|
this.getList()
|
|
},
|
|
methods:{
|
|
changeMoneyType(e) {
|
|
this.valueTime = e.detail.value
|
|
this.getList()
|
|
},
|
|
changeMoney(e) {
|
|
let money = Number(this.january)+Number(this.february)+Number(this.march)+Number(this.april)+
|
|
Number(this.may)+Number(this.june)+Number(this.july)+Number(this.august)+Number(this.september)
|
|
+Number(this.october)+Number(this.november)+Number(this.december)
|
|
this.yeartarget = money
|
|
},
|
|
getList() {
|
|
let params = {
|
|
year:this.optionsTime[this.valueTime].name,
|
|
status: this.optionsMoney[this.valueMoney].value,
|
|
}
|
|
netGetGongsiList(params).then(res=>{
|
|
res = res.data
|
|
this.january = res.january //1月
|
|
this.february = res.february //2月
|
|
this.march = res.march //3
|
|
this.april = res.april //4月
|
|
this.may = res.may //5月
|
|
this.june = res.june //6月
|
|
this.july = res.july //7月
|
|
this.august = res.august //8月
|
|
this.september = res.september //9月
|
|
this.october = res.october //10月
|
|
this.november = res.november //11月
|
|
this.december = res.december //12月
|
|
this.yeartarget = res.yeartarget //年度 总目标
|
|
})
|
|
},
|
|
//输入 年度目标 时 计算每个月的目标
|
|
handelMoney(e) {
|
|
let totalnum = e.detail.value
|
|
let avernum = (Number(totalnum)/12).toFixed(2)
|
|
this.january = avernum //1月
|
|
this.february = avernum //2月
|
|
this.march = avernum //3
|
|
this.april = avernum //4月
|
|
this.may = avernum //5月
|
|
this.june = avernum //6月
|
|
this.july = avernum //7月
|
|
this.august = avernum //8月
|
|
this.september = avernum //9月
|
|
this.october = avernum //10月
|
|
this.november = avernum //11月
|
|
this.december = avernum //12月
|
|
},
|
|
handleParams() {
|
|
let yearid = this.optionsTime[this.valueTime].id
|
|
let year = this.optionsTime[this.valueTime].name
|
|
let status = this.optionsMoney[this.valueMoney].value
|
|
let params = {
|
|
year: yearid,
|
|
status: status,
|
|
type: 1,
|
|
achievements:{
|
|
january:this.january, //1月
|
|
february:this.february, //2月
|
|
march:this.march, //3
|
|
april:this.april, //4月
|
|
may:this.may, //5月
|
|
june:this.june, //6月
|
|
july:this.july, //7月
|
|
august:this.august, //8月
|
|
september:this.september, //9月
|
|
october:this.october, //10月
|
|
november:this.november, //11月
|
|
december:this.december, //12月
|
|
yeartarget:this.yeartarget, //年度 总目标
|
|
},
|
|
ids: 1
|
|
}
|
|
return params
|
|
},
|
|
sureSave() {
|
|
let params = this.handleParams()
|
|
netSetTargetMoney(params).then(res=>{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 年度目标模块
|
|
.annual_tar {
|
|
.annual_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
background-color: #fff;
|
|
padding: 0 30rpx;
|
|
border: 1rpx solid #EAEAEA;
|
|
:first-child {
|
|
font-size: 28rpx;
|
|
}
|
|
:last-child {
|
|
width: 200px;
|
|
input {
|
|
border-radius: 25rpx;
|
|
border: 1rpx solid #CCC;
|
|
height: 40rpx;
|
|
width: 200px;
|
|
padding:0 15rpx;
|
|
font-size:24rpx;
|
|
color:#333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sales_head{
|
|
border-top:1rpx solid #CCC;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding:20rpx 24rpx;
|
|
background:#fff;
|
|
.tablist{
|
|
padding:20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size:28rpx;
|
|
color:#333;
|
|
.bottomimg{
|
|
width:20rpx;
|
|
height:33rpx;
|
|
margin-left:20rpx;
|
|
}
|
|
}
|
|
}
|
|
.sales_con {
|
|
padding: 30rpx 20rpx 120rpx;
|
|
.sales_item {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
padding: 20rpx 35rpx 30rpx 24rpx;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
|
|
.item_check {
|
|
width: 60rpx;
|
|
}
|
|
|
|
.item_img {
|
|
width: 80rpx;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.item_name {
|
|
flex: 1;
|
|
line-height: 40rpx;
|
|
|
|
:first-child {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
:last-child {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.item_monery {
|
|
width: 100rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.bottom_select {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
height: 120rpx;
|
|
padding: 0 24rpx;
|
|
border-top:1rpx solid #CCC;
|
|
.select_num {
|
|
width: 450rpx;
|
|
.select_box{
|
|
width: 450rpx;
|
|
.selectlist{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
.select_item {
|
|
flex-shrink: 0;
|
|
width:100rpx;
|
|
font-size:24rpx;
|
|
color:#666;
|
|
text-align: center;
|
|
margin-right:15rpx;
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rightbtn{
|
|
width:240rpx;
|
|
height:80rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.sure{
|
|
width:120rpx;
|
|
height:80rpx;
|
|
border-top-left-radius: 40rpx;
|
|
border-bottom-left-radius: 40rpx;
|
|
background:$uni-text-color;
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
.selectall{
|
|
width:120rpx;
|
|
height:80rpx;
|
|
border-top-right-radius: 40rpx;
|
|
border-bottom-right-radius: 40rpx;
|
|
background:#ff7800;
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|