<template>
<div class="sales-level">
<el-card v-loading="infoLoading">
<div slot="header" class="clearfix">
<span style="font-size: 18px;font-weight: bold;padding-right: 20px;">销售级别配置：</span>
</div>
<div class="subcompany-list">
<div class="subcompany-list-content" v-if="subcompanyList.length > 0">
<el-form :inline="true" :key="item.id" v-for="item in subcompanyList" class="demo-form-inline" size="mini">
<el-form-item label="销售层级">
<el-select v-model="item.sale_level" @change="modifyLevel(item.id, item.sale_level)" @focus="focusOldVal(item.sale_level)" placeholder="销售层级">
<el-option :key="itemSale.value" v-for="itemSale in saleLevel" :label="itemSale.label" :value="itemSale.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="级别名称">
<el-input @change="modifyLevel(item.id, item.level_name)" @focus="focusOldVal(item.level_name)" v-model="item.level_name" placeholder="级别名称"></el-input>
</el-form-item>
<el-form-item label="底薪">
<el-input v-model="item.money_base_salary" @change="modifyLevel(item.id, item.money_base_salary)" @focus="focusOldVal(item.money_base_salary)" placeholder="底薪"></el-input>
</el-form-item>
<el-form-item label="月度业绩目标">
<el-input v-model="item.money_month_target" @change="modifyLevel(item.id, item.money_month_target)" @focus="focusOldVal(item.money_month_target)" placeholder="月度业绩目标"></el-input>
</el-form-item>
<el-form-item label="季度升降级线">
<el-input v-model="item.money_quarter_lift_line" @change="modifyLevel(item.id, item.money_quarter_lift_line)" @focus="focusOldVal(item.money_quarter_lift_line)" placeholder="季度升降级线"></el-input>
</el-form-item>
<el-form-item>
<el-tag style="cursor: pointer" @click="staffCountClick(item.id, 1, 10)">{{ item.staff_count || 0 }}</el-tag>
</el-form-item>
</el-form>
</div>
<div class="" v-if="subcompanyList.length === 0" style="color: #000; font-size: 13px;text-align: center;padding-top: 20px;">暂无数据</div>
<div style="text-align: right;padding-top: 30px; padding-right: 30px;">
<el-button type="primary" size="small" @click="staffCountClick('', 1, 10)">变更记录</el-button>
<el-button type="primary" size="small" @click="newAdd">新增</el-button>
<el-button type="primary" size="small" @click="preservation">保存</el-button>
</div>
</div>
<el-dialog :visible.sync="salesLevelDialog" width="90%">
<table class="custom-table" v-if="staffTitle.length != 0" v-loading="infoLoadingDialog">
<thead>
<tr>
<th v-for="item in staffTitle">{{ item.label }}</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center" v-for="(item, index) in staffContent">
<template v-if="staffId">
<td>{{ item.level_name }}</td>
<td>{{ item.squad }}</td>
<td>{{ item.name }}</td>
<td>{{ item.in_at }}</td>
<td>{{ item.base_salary }}</td>
<td>
<router-link :to="{name: 'staff', params:{ model: item.mobile }}">
<el-button size="mini" type="primary">修改</el-button>
</router-link>
</td>
</template>
<template v-if="!staffId">
<td>{{ index + 1 }}</td>
<td>{{ item.operator }}</td>
<td>{{ item.behavior }}</td>
<td>{{ item.position }}</td>
<td>{{ item.front }}</td>
<td>{{ item.after }}</td>
</template>
</tr>
</tbody>
</table>
<div style="padding-top: 20px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[5, 10, 20, 30, 40, 50, 60, 80, 100]"
:page-size="limit"
:current-page.sync="pageIndex"
layout="total, sizes, prev, pager, next, jumper"
:total="total" style="text-align: center;">
</el-pagination>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script type="text/ecmascript-6">
import { getLevelListApi, addConfigApi, editLevelApi, getStaffApi, getRecordApi } from "../../service/api";
import page from '../framework/page'
import { STAFF, recordList } from '../../util/wordbook'
import Util from '../../util/Za'
export default {
name: 'index',
data() {
return {
pageIndex: 1,
total: 0, // 总也
limit: 10, // 10条一页
staffId: '', // 所属级别员工列表 id
saleLevel: [ // 销售层级数据
{ label: '销售顾问', value: 1 },
{ label: '销售主管', value: 2 },
{ label: '销售经理', value: 3 },
{ label: '销售总监', value: 4 }
], // 销售层级数据
subcompanyList: [], // 销售级别列表
saleLevelNum: 0, // 截取数据保存
salesLevelDialog: false, // 谈框的显示
staffTitle: [], // 所属级别员工列表 header
staffContent: [], // 所属级别员工列表 content
oldVal: '', // 修改是传原来的数据给后台
infoLoading: true, // loading
infoLoadingDialog: false
}
},
components: {
page
},
methods: {
/**
* 添加数据
*/
newAdd() {
this.saleLevelNum ++
this.subcompanyList.push({
sale_level: '',
level_name: '',
money_base_salary: '',
money_month_target: '',
money_quarter_lift_line: ''
})
},
/**
* 销售级别列表
*/
getLevelListFn() {
let data = { page: 1, limit: 100 }
getLevelListApi(data).then(res => {
this.infoLoading = false;
res.list.map((item) => {
item.sale_level = item.sale_level === 1 ? '销售顾问' : item.sale_level === 2 ? '销售主管' : item.sale_level === 3 ? '销售经理' : '销售总监'
});
this.subcompanyList = res.list
})
},
/**
* 保存
*/
preservation() {
// 判断是否新增数据
if(this.saleLevelNum === 0) {
this.$message({ message: '没有新增信息', type: 'warning' });
return;
}
// 获取新增的数据
let subcompanyListArr = this.subcompanyList.slice(-this.saleLevelNum);
if(JSON.stringify(subcompanyListArr).indexOf('""') !== -1){
this.$message({ message: '没有新增的信息', type: 'warning' });
}else {
addConfigApi({ params: JSON.stringify(subcompanyListArr) }).then((res) => {
this.getLevelListFn()
this.$message({ message: '数据保存成功', type: 'warning' });
});
}
},
/**
* input 获取
* @param val {String}
*/
focusOldVal(val) {
this.oldVal = val
},
/**
* 修改销售级别配置
* @param val {Object}
* @param name {String}
*/
modifyLevel(val, name) {
// 获取索引
let saleLevelIndex = this.subcompanyList.findIndex(item => { return item.id === val })
let subcompanyListObj = this.subcompanyList[saleLevelIndex]
if(Util.isEmpty(subcompanyListObj.id)) return // 新增是不走着里面
// 修改信息不能为空
if(Util.isEmpty(name)) {
this.$message({ message: '修改数据不能为空', type: 'warning' });
}else {
// 修改信息更新
subcompanyListObj.position = subcompanyListObj.sale_level + '-' + subcompanyListObj.level_name + '-' + subcompanyListObj.money_base_salary // position
subcompanyListObj.old_val = this.oldVal // 变更前的值
subcompanyListObj.new_val = name // 变更后的值
editLevelApi(val, subcompanyListObj).then((res) => {
this.$message({ message: '修改数据更新成功', type: 'warning' });
});
}
},
/**
* 级别渲染 + 变更记录
* @param id {String}
* @param page {Number}
* @param limit {Number}
*/
staffCountClick(id, page, limit) {
this.staffId = id; // 获取id
this.infoLoadingDialog = true
this.pageIndex = page
this.limit = limit
let api = id ? getStaffApi : getRecordApi
api({ page: page, limit: limit }, id).then(res => {
let listDdata = id ? res.list : res.page_data
if(listDdata.length > 0) {
this.staffTitle = id ? STAFF : recordList;
this.total = res.total;
this.staffContent = listDdata;
this.salesLevelDialog = true
}else {
this.$message({ message: '暂无数据', type: 'warning' });
}
this.infoLoadingDialog = false
})
},
/**
* 分页
* @param val
*/
handleCurrentChange(val) {
this.pageIndex = val
this.staffCountClick(this.staffId , val, this.limit)
},
handleSizeChange(val) {
this.pageIndex = 1
this.limit = val
this.staffCountClick(this.staffId , 1, val)
}
},
mounted() {
this.getLevelListFn()
}
}
</script>
<style lang="less" type="text/less">
.sales-level {
padding: 10px;
box-sizing: border-box;
.subcompany-list {
width: 100%;
.from-item {
width: 15%;
}
}
}
</style>