Commit e2dc0fec authored by zhengke's avatar zhengke

1

parent 3cfc6a78
<style scoped>
.CLM-Form .el-input__inner {
background: transparent;
border: 0;
}
.CLM-Form .el-input-group__append {
background: transparent;
border: 0;
}
.common_Style {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.classForm_monday {
background-color: #ced9f8;
color: #2961FE;
}
.classForm_tuesday {
background-color: #d9f3ff;
color: #3FC4FF;
}
.classForm_wednesday {
background-color: #f6e2cb;
color: #F28C1D;
}
.classForm_thursday {
background-color: #ccf3eb;
color: #02C499;
}
.classForm_friday {
background-color: #f7cfd6;
color: #F72E52;
}
.classForm_saturday {
background-color: #fff5cc;
color: #FFCC00;
}
.classForm_sunday {
background-color: #e6e3fe;
color: #8175FB;
}
.CLM-Form .Emp_Line {
width: 3px;
height: 10px;
background-color: #3FC4FF;
margin-right: 10px;
}
.CLM-Form .EmpLine_title {
display: flex;
align-items: center;
font-size: 12px;
margin-bottom: 20px;
}
.planTimeLi2 tbody::before {
content: '';
display: table-row;
height: 20px;
}
.customerPhoto {
width: 55px;
height: 55px;
}
.customerPhoto img {
width: 100%;
height: 100%;
}
/deep/ .q-field__before,
/deep/ .q-field__prepend {
padding-right: 0px !important;
}
</style>
<template>
<q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
<q-card style="width: 800px;max-width:900px;" class="CLM-Form">
<q-card-section>
<div class="text-h6">{{optionTitle}}</div>
</q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="EmpLine_title">
<div class="Emp_Line"></div>
<div>基本信息</div>
</div>
<div class="row wrap">
<div class="col-6">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.PlanName" ref="PlanName"
class="col-6 q-pb-lg q-pr-lg" label="方案名称" :rules="[val => !!val || '请输入方案名称']" />
</div>
<div class="col-6">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.BasicSalary" ref="BasicSalary"
class="col-6 q-pb-lg" label="基本工资" @keyup.native="checkPrice(objOption,'BasicSalary')" />
</div>
</div>
<div class="row wrap">
<div class="col-6">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.OpenBonus" ref="OpenBonus"
class="col-6 q-pb-lg q-pr-lg" label="开单奖金" @keyup.native="checkPrice(objOption,'OpenBonus')" />
</div>
<div class="col-6">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WorkAgeSalary"
ref="WorkAgeSalary" class="col-6 q-pb-lg" label="工龄工资"
@keyup.native="checkPrice(objOption,'WorkAgeSalary')" />
</div>
</div>
<div class="row wrap">
<div class="col-6">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ClueNumSalary"
ref="ClueNumSalary" class="col-6 q-pb-lg q-pr-lg" label="线索奖金"
@keyup.native="checkPrice(objOption,'ClueNumSalary')" />
</div>
<div class="col-6">
<q-select filled v-model="SaleIdsArray" multiple @filter="filterEmployee" use-input
:options="myEmployeeList" label="销售人员" option-label="EmployeeName" option-value="Id" emit-value
map-options />
</div>
</div>
<div class="row wrap">
<div class="col-6">
<q-select @filter="filterCourseFn" class="col-6 q-pb-lg q-pr-lg" use-input filled multiple
option-value="CourseId" option-label="CourseName" v-model="UseCourseIdsArray" :options="myClassList"
emit-value map-options label="学习课程" clearable />
</div>
<div class="col-6">
<q-select @filter="filterCourseFn" use-input filled multiple option-value="CourseId"
option-label="CourseName" v-model="NotUseCourseIdsArray" :options="myClassList" emit-value map-options
label="不适用课程" clearable />
</div>
</div>
<div class="row wrap">
<div class="col-6">
<q-select filled option-value="Id" option-label="Name" class="col-6 q-pb-lg q-pr-lg"
v-model="objOption.PlanType" :options="TypeList" emit-value map-options label="方案类型" clearable />
</div>
</div>
<div class="row wrap" style="margin-bottom:20px;">
<div class="col-6">
业绩
<q-btn style="margin-left:30px;" size="10px" @click="addCourse()" round color="primary"
icon="iconfont icon-img_haha" />
</div>
</div>
<div class="row wrap" v-for="(item,index) in objOption.DetailList" :key="index">
<div class="col-4">
<q-input filled stack-label maxlength="20" :dense="false" v-model="item.StartNum" ref="StartNum"
class="col-6 q-pb-lg q-pr-lg" label="开始人数" @keyup.native="checkInteger(item,'StartNum')" />
</div>
<div class="col-4">
<q-input filled stack-label maxlength="20" :dense="false" v-model="item.EndNum" ref="EndNum"
class="col-6 q-pb-lg q-pr-lg" label="开始人数" @keyup.native="checkInteger(item,'EndNum')" />
</div>
<div class="col-4">
<q-input filled stack-label maxlength="20" :dense="false" v-model="item.Money" ref="Money"
class="col-6 q-pb-lg" label="奖励金额" @keyup.native="checkPrice(item,'Money')" />
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
<q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
@click="saveConsult">
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
import {
SetBounsPlan,
GetBonusPlan
} from "../../api/finance/index";
import {
queryEmployee
} from '../../api/users/user'
import {
queryCourseDropdownList
} from '../../api/course/index'
export default {
props: {
saveObj: {
type: Object,
default: null
}
},
data() {
return {
persistent: true,
objOption: {
Id: 0,
PlanName: '', //方案名称
PlanType: 1, //方案类型(1-市场,2-课程顾问)
BasicSalary: '', //基本工资
OpenBonus: '', //开单奖金
WorkAgeSalary: '', //工龄工资
ClueNumSalary: '', //线索奖金
SaleIds: '', //销售人员
UseCourseIds: '', //使用课程编号
NotUseCourseIds: '', //不适用课程编号
DetailList: []
},
SaleIdsArray: [],
UseCourseIdsArray: [],
NotUseCourseIdsArray: [],
TypeList: [{
Id: 1,
Name: '市场'
}, {
Id: 2,
Name: '课程顾问'
}],
myEmployeeList: [],
employeeList: [],
myClassList: [],
ClassList: [], //关联课程下拉数据
saveLoading: false,
optionTitle: '',
}
},
created() {},
mounted() {
this.CourseList();
this.getEmployeeList();
this.initObj()
},
methods: {
//新增
addCourse() {
let obj = {
DetailId: 0,
PlanId: 0,
StartNum: '', //开始人数
EndNum: '', //结束人数
Money: '', //奖励金额
}
this.objOption.DetailList.push(obj);
},
//获取课程
CourseList() {
queryCourseDropdownList({}).then(res => {
if (res.Code == 1) {
this.ClassList = res.Data;
this.myClassList = this.ClassList;
}
})
},
//课程筛选
filterCourseFn(val, update, abort) {
update(() => {
this.myClassList = this.ClassList.filter(
v => v.CourseName.indexOf(val) > -1
);
});
},
//获取员工列表
getEmployeeList() {
queryEmployee({
IsLeave: 1
}).then(res => {
this.employeeList = res.Data;
this.myEmployeeList = res.Data;
})
},
//筛选员工
filterEmployee(val, update, abort) {
update(() => {
this.myEmployeeList = this.employeeList.filter(
v => v.EmployeeName.indexOf(val) > -1
);
});
},
//初始化表单
initObj() {
if (this.saveObj && this.saveObj.Id > 0) {
let msg = {
Id: this.saveObj.Id
}
GetBonusPlan(msg).then(res => {
console.log(res, '数据');
if (res.Code == 1) {
let tempData = res.Data;
this.objOption.Id = tempData.Id;
this.objOption.PlanName = tempData.PlanName;
this.objOption.BasicSalary = tempData.BasicSalary;
this.objOption.OpenBonus = tempData.OpenBonus;
this.objOption.WorkAgeSalary = tempData.WorkAgeSalary;
this.objOption.ClueNumSalary = tempData.ClueNumSalary;
this.objOption.SaleIds = tempData.SaleIds;
this.objOption.UseCourseIds = tempData.UseCourseIds;
this.objOption.NotUseCourseIds = tempData.NotUseCourseIds;
this.objOption.DetailList = tempData.DetailList;
var dataStrArr = tempData.SaleIds.split(",")
var dataStrArr2 = tempData.UseCourseIds.split(",")
var dataStrArr3 = tempData.NotUseCourseIds.split(",")
if(dataStrArr){
this.SaleIdsArray = dataStrArr.map(item => {
return +item;
});
}
if(dataStrArr2){
this.UseCourseIdsArray = dataStrArr2.map(item => {
return +item;
});
}
if(dataStrArr3){
this.NotUseCourseIdsArray = dataStrArr3.map(item => {
return +item;
});
}
}
})
this.optionTitle = "修改客户信息"
} else {
this.objOption.Id = 0;
this.objOption.PlanName = '';
this.objOption.BasicSalary = '';
this.objOption.OpenBonus = '';
this.objOption.WorkAgeSalary = '';
this.objOption.ClueNumSalary = '';
this.objOption.SaleIds = '';
this.objOption.UseCourseIds = '';
this.objOption.NotUseCourseIds = '';
this.objOption.DetailList = [];
this.optionTitle = "新增人头奖金信息";
}
},
//保存
saveConsult() {
this.$refs.PlanName.validate();
if (!this.$refs.PlanName.hasError) {
this.objOption.SaleIds = this.SaleIdsArray.toString();
this.objOption.UseCourseIds = this.UseCourseIdsArray.toString();
this.objOption.NotUseCourseIds = this.NotUseCourseIdsArray.toString();
this.saveLoading = true;
SetBounsPlan(this.objOption).then(res => {
this.saveLoading = false;
if (res.Code == 1) {
this.$q.notify({
icon: "iconfont icon-chenggong",
color: "accent",
timeout: 2000,
message: "数据保存成功!",
position: "top",
});
this.$emit("success");
this.closeCourseForm()
}
})
}
},
//关闭弹窗
closeCourseForm() {
this.$emit('close');
this.persistent = false;
}
},
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment