You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
19 KiB
451 lines
19 KiB
4 years ago
|
// 清收完成统计
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- 清收工作完成统计 -->
|
||
|
|
<div v-if="liquidate === '1'">
|
||
|
|
<div class="mgt20 left-border fz-16"><p class="c-black mgl10">清收工作完成情况统计</p></div>
|
||
|
|
<div class="mgt20 pdb20">
|
||
|
|
<div class="mgtb20">
|
||
|
|
<div class="flex-center">
|
||
|
|
<el-button v-preventReClick type="primary" round @click="createList('new')">生成年度统计表</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="shadow radius10 pdt20">
|
||
|
|
<el-table :data="data" stripe header-align="center" class="mat20">
|
||
|
|
<el-table-column type="index" width="200" label="序号" align="center"></el-table-column>
|
||
|
|
<el-table-column prop="businessCode" label="年度" align="center"></el-table-column>
|
||
|
|
<el-table-column label="操作" width="300" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" @click="createList(scope.row)">人员选择</el-button>
|
||
|
|
<el-button type="text" @click="[(liquidate = '2'), edit(scope.row, 'watch')]">查看</el-button>
|
||
|
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
|
||
|
|
<el-button type="text" @click="del(scope.row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
@current-change="currentChange"
|
||
|
|
layout="total, prev, pager, next"
|
||
|
|
:current-page="pageNo"
|
||
|
|
:total="totals"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 查看详细数据 -->
|
||
|
|
<div v-if="liquidate === '2'">
|
||
|
|
<div class="mgt20 left-border fz-16"><p class="c-black mgl10">条件筛选</p></div>
|
||
|
|
<div class="mgt20 pdb20">
|
||
|
|
<div class="flex-between mgtb20">
|
||
|
|
<div class="flex-center">
|
||
|
|
<p class="fz-16 mgr10 font-blue mgl20 nowrap">清收组</p>
|
||
|
|
<el-select v-model="searchStr.liquidate" placeholder="请选择" clearable @change="search">
|
||
|
|
<el-option v-for="item in liquidateSelectArr" :key="item.id" :label="item.label" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
|
||
|
|
<p class="fz-16 mgr10 font-blue mgl20 nowrap">完成比例</p>
|
||
|
|
<el-select v-model="searchStr.paymentStatus" placeholder="请选择" clearable @change="search">
|
||
|
|
<el-option v-for="item in proportion" :key="item.id" :label="item.label" :value="item.id"></el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-input
|
||
|
|
placeholder="请输入整数"
|
||
|
|
class="wd20 mglr10"
|
||
|
|
style="min-width: 200px"
|
||
|
|
v-model="keyword"
|
||
|
|
clearable
|
||
|
|
></el-input>
|
||
|
|
<p>%</p>
|
||
|
|
<p class="fz-16 mgr10 font-blue mgl20 nowrap">已清收总额</p>
|
||
|
|
<el-input placeholder="搜索业务编号/客户名称" style="min-width: 200px" v-model="keyword" clearable></el-input>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-center">
|
||
|
|
<!-- <el-input
|
||
|
|
placeholder="搜索业务编号/客户名称"
|
||
|
|
class="mgr20"
|
||
|
|
v-model="keyword"
|
||
|
|
clearable
|
||
|
|
></el-input> -->
|
||
|
|
<el-button v-preventReClick type="primary" size="small" round @click="clearOption">清空选项</el-button>
|
||
|
|
<!-- <el-button v-preventReClick type="primary" size="small" round @click="edit()">新建</el-button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="shadow radius10 pdt20">
|
||
|
|
<div class="flex-between mab20 mgl10">
|
||
|
|
<div class="flex-center">
|
||
|
|
<p class="hr_tag"></p>
|
||
|
|
<span class="hr_text">2021年度清收工作完成情况统计表</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-between">
|
||
|
|
<div class="flex-center">
|
||
|
|
<el-button class="mgl20" v-preventReClick type="primary" size="small" round @click="search">导出列表</el-button>
|
||
|
|
<el-radio-group v-model="radio" class="mgl30" @change="radioChange">
|
||
|
|
<el-radio-button class="ht40" label="依据公司排名"></el-radio-button>
|
||
|
|
<el-radio-button class="ht40" label="依据小组排名"></el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</div>
|
||
|
|
<div class="df">
|
||
|
|
<el-input
|
||
|
|
style="min-width: 250px"
|
||
|
|
class="ht40 mgl10 mgr10"
|
||
|
|
@keyup.enter.native="getBusinessApply('search')"
|
||
|
|
v-model="searchStr.jobNum"
|
||
|
|
placeholder="工号/清收负责人/清收企业"
|
||
|
|
clearable
|
||
|
|
></el-input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table
|
||
|
|
:data="statisticsData"
|
||
|
|
stripe
|
||
|
|
header-align="center"
|
||
|
|
class="mat20"
|
||
|
|
@selection-change="statisticsSelection"
|
||
|
|
:row-key="getRowKeys"
|
||
|
|
:key="1"
|
||
|
|
>
|
||
|
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
|
||
|
|
<el-table-column prop="companyRanks" label="公司排名" align="center" width="150px"></el-table-column>
|
||
|
|
<el-table-column prop="TeamRanks" label="小组排名" align="center" width="150px"></el-table-column>
|
||
|
|
<el-table-column prop="liquidate" label="清收组" align="center"></el-table-column>
|
||
|
|
<el-table-column prop="principal" label="清收负责人" align="center" width="150px"></el-table-column>
|
||
|
|
<el-table-column prop="jobNumber" label="工号" align="center"></el-table-column>
|
||
|
|
<el-table-column prop="enterprise" label="清收企业" align="center" width="150px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="multi-box" v-for="(item, index) in scope.row.enterprise" :key="index">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="cash" label="清收现金（万元）" align="center" width="150px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="multi-box" v-for="(item, index) in scope.row.cash" :key="index">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="asset" label="清收资产（万元）" align="center" width="150px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="multi-box" v-for="(item, index) in scope.row.asset" :key="index">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="backTime" label="回款时间" align="center" width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="backTime" v-for="(item, index) in scope.row.backTime" :key="index">
|
||
|
|
<el-date-picker
|
||
|
|
style="width:180px"
|
||
|
|
v-model="item.time"
|
||
|
|
type="date"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
:disabled="!scope.row.edit"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="repaymentTime" label="已清收总额（元）" align="center" width="150px">
|
||
|
|
<template slot-scope="scope" >
|
||
|
|
<div class="multi-box" >
|
||
|
|
{{ scope.row.repaymentTime }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="ratio" label="完成比例" align="center" width="150px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="ratio">
|
||
|
|
<div class="top">{{scope.row.repaymentTime}}</div>
|
||
|
|
<el-input :disabled="!scope.row.edit" v-model="scope.row.ratio"></el-input>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="remark" label="备注" align="center" width="200px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="backTime" v-for="(item, index) in scope.row.remark" :key="index">
|
||
|
|
<el-input :disabled="!scope.row.edit" v-model="item.remark"></el-input>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- 判断是否为查看或者编辑 -->
|
||
|
|
<el-table-column label="操作" width="300" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" @click="yearEdit(scope.row)">{{scope.row.editStr}}</el-button>
|
||
|
|
<el-button type="text" @click="history(scope.row)">查看</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
@current-change="currentChange"
|
||
|
|
layout="total, prev, pager, next"
|
||
|
|
:current-page="pageNo"
|
||
|
|
:total="totals"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 弹框--生成年度统计表 -->
|
||
|
|
<el-dialog title="请选择" width="40%" :visible.sync="showRank" center>
|
||
|
|
<div class="ranking">
|
||
|
|
<div class="top">
|
||
|
|
<div class="left-border fz-16"><p class="c-black mgl10">年份</p></div>
|
||
|
|
<el-date-picker
|
||
|
|
class="mgt10 mgl80"
|
||
|
|
v-model="chooisYear"
|
||
|
|
:picker-options="pickerOptions"
|
||
|
|
type="year"
|
||
|
|
placeholder="选择年"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
<div class="tree">
|
||
|
|
<div class="left-border fz-16 mgt20"><p class="c-black mgl10">参与本年度清收排名的人员</p></div>
|
||
|
|
<div class="mgl80 mgt20 mgr80" style="border: 1px solid #e6e6e6; border-radius: 15px; overflow: auto; padding: 15px">
|
||
|
|
<el-tree
|
||
|
|
:data="tree"
|
||
|
|
show-checkbox
|
||
|
|
default-expand-all
|
||
|
|
node-key="id"
|
||
|
|
ref="tree"
|
||
|
|
highlight-current
|
||
|
|
:props="defaultProps"
|
||
|
|
>
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-center fj-center mgt20">
|
||
|
|
<el-button type="primary" round class="mgr20">确定</el-button>
|
||
|
|
<el-button type="primary" round class="mgl20">取消</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: '',
|
||
|
|
props: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showRank: false, // 弹框
|
||
|
|
defaultProps: {
|
||
|
|
children: 'children',
|
||
|
|
label: 'label'
|
||
|
|
},
|
||
|
|
data: [{}],
|
||
|
|
tree: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
label: '一级 1',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
label: '二级 1-1',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 9,
|
||
|
|
label: '三级 1-1-1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 10,
|
||
|
|
label: '三级 1-1-2'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
label: '一级 2',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 5,
|
||
|
|
label: '二级 2-1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 6,
|
||
|
|
label: '二级 2-2'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
label: '一级 3',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 7,
|
||
|
|
label: '二级 3-1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 8,
|
||
|
|
label: '二级 3-2'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
chooisYear: '',
|
||
|
|
pageNo: 0,
|
||
|
|
totals: 0,
|
||
|
|
liquidateSelectArr: [{ label: '不限', id: '' }],
|
||
|
|
proportion: [
|
||
|
|
// 选择完成比例符号
|
||
|
|
{ label: '不限', id: '0' },
|
||
|
|
{ label: '>', id: '1' },
|
||
|
|
{ label: '<', id: '2' },
|
||
|
|
{ label: '>=', id: '3' },
|
||
|
|
{ label: '<=', id: '4' },
|
||
|
|
{ label: '=', id: '5' }
|
||
|
|
],
|
||
|
|
searchStr: {
|
||
|
|
// 筛选条件
|
||
|
|
liquidate: '', // 清收组
|
||
|
|
ratio: '', // 比例
|
||
|
|
percent: '', // 比例整数百分比
|
||
|
|
paymentStatus: '' // 选择比例符号
|
||
|
|
},
|
||
|
|
radio: '依据公司排名',
|
||
|
|
|
||
|
|
liquidateSelect: '0', // 选择筛选框
|
||
|
|
statisticsData: [// 统计表的数据
|
||
|
|
{
|
||
|
|
selection: '1',
|
||
|
|
companyRanks: '1',
|
||
|
|
TeamRanks: '1',
|
||
|
|
liquidate: '1',
|
||
|
|
principal: '1',
|
||
|
|
jobNumber: '1',
|
||
|
|
enterprise: [//清收企业
|
||
|
|
'蒙牛',
|
||
|
|
'腾讯',
|
||
|
|
'腾讯',
|
||
|
|
],
|
||
|
|
cash: [123456, 2345678,96354],
|
||
|
|
asset: [123, 456, 23],
|
||
|
|
backTime: [
|
||
|
|
{ time: '2021-12-11' },
|
||
|
|
{ time: '2021-12-12' },
|
||
|
|
{ time: '2021-12-12' },
|
||
|
|
],
|
||
|
|
repaymentTime:12321342315621789,
|
||
|
|
ratio: '25525225',
|
||
|
|
remark: [
|
||
|
|
{ remark: '我是备注1' },
|
||
|
|
{ remark: '我是备注2' },
|
||
|
|
{ remark: '我是备注2' }
|
||
|
|
],
|
||
|
|
edit:false,
|
||
|
|
editStr:'编辑'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
keyword: '', // 搜索绑定变量占位
|
||
|
|
pickerOptions: {
|
||
|
|
disabledDate(time) {
|
||
|
|
// 限制时间
|
||
|
|
let date = new Date();
|
||
|
|
let year = date.getFullYear();
|
||
|
|
return time.getFullYear() > year;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
liquidate:{
|
||
|
|
get(){
|
||
|
|
return this.$store.state.loan.liquidate
|
||
|
|
},set(){}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createList(val) {
|
||
|
|
// 处理
|
||
|
|
this.showRank = true;
|
||
|
|
if (val === 'new') {
|
||
|
|
// 新建生成统计表
|
||
|
|
} else {
|
||
|
|
// 编辑统计表
|
||
|
|
// 取得当前业务的id，再取得人员的id
|
||
|
|
}
|
||
|
|
},
|
||
|
|
currentChange(val) {
|
||
|
|
// 列表变更
|
||
|
|
},
|
||
|
|
radioChange(val) {
|
||
|
|
// 选择排名排序
|
||
|
|
console.log(val, 'val');
|
||
|
|
},
|
||
|
|
clearOption() {
|
||
|
|
// 清空筛选条件
|
||
|
|
this.searchStr = {};
|
||
|
|
},
|
||
|
|
search() {
|
||
|
|
// 暂时占位
|
||
|
|
},
|
||
|
|
getRowKeys(row) {
|
||
|
|
// 列表的Key
|
||
|
|
return row.Id;
|
||
|
|
},
|
||
|
|
statisticsSelection(val) {
|
||
|
|
// 统计勾选的
|
||
|
|
console.log(val,'勾选')
|
||
|
|
},
|
||
|
|
edit(row, val) {
|
||
|
|
// 编辑
|
||
|
|
this.liquidate ='2';
|
||
|
|
this.$store.commit('liquidate','2')
|
||
|
|
},
|
||
|
|
yearEdit(row, val){// 编辑功能
|
||
|
|
if(row.edit != false){
|
||
|
|
row.edit = false
|
||
|
|
row.editStr = '编辑'
|
||
|
|
}else{
|
||
|
|
row.editStr = '保存'
|
||
|
|
row.edit = true
|
||
|
|
// 调接口，存数据，重新请求列表
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
/deep/ .el-radio-button__inner {
|
||
|
|
padding-top: 9px;
|
||
|
|
padding-bottom: 9px;
|
||
|
|
}
|
||
|
|
.multi-box {
|
||
|
|
border: 1px solid #e6e6e6;
|
||
|
|
min-height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 50px;
|
||
|
|
&:nth-child(2n) {
|
||
|
|
background: #e6e6e6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.backTime{
|
||
|
|
min-height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.ratio{
|
||
|
|
.top{
|
||
|
|
border-bottom: 1px solid;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|