358 lines
9.1 KiB
Vue
358 lines
9.1 KiB
Vue
<template>
|
||
<view class="set_per_goal">
|
||
<!-- 成员信息模块 -->
|
||
<view class="member_info">
|
||
<scroll-view scroll-x class="select_box">
|
||
<view class="selectlist">
|
||
<view class="select_item" v-for="(item,index) in list" :key="index">
|
||
<image :src="item.img ? item.img :BASE_IMG_URL+ 'headImg.png'" mode="scaleToFill"></image>
|
||
<view>{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="mem_dep">
|
||
共{{list.length}}人
|
||
</view>
|
||
</view>
|
||
<!-- 目标时间，目标类型模块 -->
|
||
<view class="target_att">
|
||
<view>目标年份：<text>{{year}}</text></view>
|
||
<view>目标类型：<text>{{status == 1 ? '成交金额' : '回款金额'}}</text></view>
|
||
</view>
|
||
<!-- 年度目标模块 -->
|
||
<view class="annual_tar">
|
||
<view class="annual_item">
|
||
<view>年度目标</view>
|
||
<view>
|
||
<!-- {{yeartarget}} -->
|
||
<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="text" @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 class="btn_g bg-blue button-hover round" @click="sureSave">
|
||
保存
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { netSetTargetMoney, netGetDefaultMoney } from '@/api/kehu.js'
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
year:'',
|
||
yearid:'',
|
||
status:'', //1销售（目标）2回款（目标）
|
||
type:'', //1公司2部门3员工
|
||
ids:'',
|
||
list:[], //选择的员工 列表
|
||
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:'', //年度 总目标
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.type = options.type
|
||
this.year = options.year
|
||
this.status = options.status
|
||
this.yearid = options.yearid
|
||
},
|
||
onShow() {
|
||
this.list = uni.getStorageSync('member')
|
||
this.getDefault()
|
||
},
|
||
methods: {
|
||
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
|
||
},
|
||
handleParams() {
|
||
let ids = []
|
||
this.list.forEach(item=>{
|
||
ids.push(item.id)
|
||
})
|
||
let params = {
|
||
year: this.yearid,
|
||
status: this.status,
|
||
type: this.type,
|
||
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: ids.join(',')
|
||
}
|
||
return params
|
||
},
|
||
getDefault() {
|
||
let ids = []
|
||
this.list.forEach(item=>{
|
||
ids.push(item.id)
|
||
})
|
||
let params = {
|
||
year: this.yearid,
|
||
status: this.status,
|
||
type: this.type,
|
||
ids: ids.join(',')
|
||
}
|
||
netGetDefaultMoney(params).then(res=>{
|
||
res = res.data
|
||
if(!res){
|
||
return
|
||
}
|
||
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月
|
||
},
|
||
sureSave() {
|
||
let params = this.handleParams()
|
||
netSetTargetMoney(params).then(res=>{
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:'none'
|
||
})
|
||
uni.setStorageSync('isSave',true)
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},2000)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.select_box{
|
||
width: 600rpx;
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
.set_per_goal {
|
||
// 成员信息模块
|
||
.member_info {
|
||
margin: 20rpx 0;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 140rpx;
|
||
padding:0 24rpx;
|
||
align-items: center;
|
||
border-top: 1rpx solid #EAEAEA;
|
||
border-bottom: 1rpx solid #EAEAEA;
|
||
|
||
.mem_header {
|
||
width: 160rpx;
|
||
text-align: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.mem_post {
|
||
margin-left: -15rpx;
|
||
|
||
:first-child {
|
||
font-size: 28rpx;
|
||
margin-bottom: 6rpx;
|
||
margin-top: -8rpx;
|
||
}
|
||
|
||
:last-child {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.mem_dep {
|
||
|
||
}
|
||
}
|
||
|
||
// 目标时间，目标类型模块
|
||
.target_att {
|
||
display: flex;
|
||
padding-left: 30rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-bottom: 1rpx solid #EAEAEA;
|
||
view {
|
||
color: 999;
|
||
margin-right:20rpx;
|
||
text {
|
||
color: 666;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 年度目标模块
|
||
.annual_tar {
|
||
.annual_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 24rpx 30rpx;
|
||
border: 1rpx solid #EAEAEA;
|
||
:first-child {
|
||
font-size: 28rpx;
|
||
}
|
||
input {
|
||
width:400rpx;
|
||
border-radius: 40rpx;
|
||
border: 1rpx solid #CCC;
|
||
padding:10rpx 15rpx;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|