|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div id="targetMonthReturn">
|
|
|
+ <el-form ref="queryParams" :model="queryParams" size="small" :inline="true" label-width="80px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="月份" size="mini">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="month"
|
|
|
+ type="monthrange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始月份"
|
|
|
+ end-placeholder="结束月份"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="客户名称" size="mini">
|
|
|
+ <el-input v-model="queryParams.customerName" placeholder="请输入客户名称关键字" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="创建人" size="mini">
|
|
|
+ <el-popover-select-v2
|
|
|
+ size="mini"
|
|
|
+ v-model="queryParams.createByName"
|
|
|
+ title="创建人"
|
|
|
+ valueKey="name"
|
|
|
+ referName="CONTACTS_PARAM"
|
|
|
+ :dataMapping="{createUser:'code',createByName: 'name'}"
|
|
|
+ :source.sync="queryParams"
|
|
|
+ >
|
|
|
+ </el-popover-select-v2>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7">
|
|
|
+ <el-form-item label="创建时间" size="mini">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="createTime"
|
|
|
+ type="datetimerange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-button size="mini" @click="btnQuery">查 询</el-button>
|
|
|
+ <el-button size="mini" @click="btnReset">重 置</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="handleExport">导 出</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :height="tableHeight"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="month"
|
|
|
+ label="月份"
|
|
|
+ width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="customerName"
|
|
|
+ label="客户名称"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="targetreturn"
|
|
|
+ label="计划回款(万元)">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="returnValue"
|
|
|
+ label="项目填报回款(万元)">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="returnRate"
|
|
|
+ label="回报率(%)">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="firstWeek"
|
|
|
+ label="第一周跟进情况">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="secondWeek"
|
|
|
+ label="第二周跟进情况">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="thirdWeek"
|
|
|
+ label="第三周跟进情况">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="fourthWeek"
|
|
|
+ label="第四周跟进情况">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createByName"
|
|
|
+ label="创建人">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="创建时间"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="updateByName"
|
|
|
+ label="修改人">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="updateTime"
|
|
|
+ label="修改时间"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page=this.queryParams.pageNum
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size=this.queryParams.pageSize
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total=this.total>
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {GetList} from "@/api/business/tr/targetMonthReturn";
|
|
|
+
|
|
|
+import ElPopoverSelectV2 from "@/components/popover-select-v2/index.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ElPopoverSelectV2
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTableHeight()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download('/mk/target/targetmonthreturn/export', {
|
|
|
+ ...this.queryParams
|
|
|
+ }, `月度回款明细数据.xlsx`)
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryParams.pageSize = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.pageNum = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ btnReset(){
|
|
|
+ this.month=[]
|
|
|
+ this.createTime=[]
|
|
|
+ this.queryParams={
|
|
|
+ startMonth:'',
|
|
|
+ endMonth:'',
|
|
|
+ customerName:'',
|
|
|
+ createByName:'',
|
|
|
+ startCreateTime:'',
|
|
|
+ endCreateTime:'',
|
|
|
+ pageSize:10,
|
|
|
+ pageNum:1,
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ btnQuery(){
|
|
|
+ if(this.month!=null&&this.month.length>0){
|
|
|
+ this.queryParams.startMonth = this.month[0]
|
|
|
+ this.queryParams.endMonth = this.month[1]
|
|
|
+ }else {
|
|
|
+ this.queryParams.startMonth=''
|
|
|
+ this.queryParams.endMonth=''
|
|
|
+ }
|
|
|
+ if(this.createTime!=null&&this.createTime.length>0){
|
|
|
+ this.queryParams.startCreateTime = this.createTime[0]
|
|
|
+ this.queryParams.endCreateTime = this.createTime[1]
|
|
|
+ }else {
|
|
|
+ this.queryParams.startCreateTime=''
|
|
|
+ this.queryParams.endCreateTime=''
|
|
|
+ }
|
|
|
+ console.log("this.queryParams",this.queryParams)
|
|
|
+ this.getList(this.queryParams)
|
|
|
+ },
|
|
|
+ getList(param){
|
|
|
+ GetList(param).then(res =>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.tableData = res.rows
|
|
|
+ this.total = res.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //计算table高度(动态设置table高度)
|
|
|
+ getTableHeight() {
|
|
|
+ let tableH = 90; //距离页面下方的高度
|
|
|
+ let tableHeightDetil = window.innerHeight - tableH;
|
|
|
+ if (tableHeightDetil <= 300) {
|
|
|
+ this.tableHeight = 300;
|
|
|
+ } else {
|
|
|
+ this.tableHeight = window.innerHeight - tableH;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ month:[],
|
|
|
+ createTime:[],
|
|
|
+ total:0,
|
|
|
+ tableData:[],
|
|
|
+ tableHeight:'',
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '本月',
|
|
|
+ onClick(picker) {
|
|
|
+ picker.$emit('pick', [new Date(), new Date()]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '今年至今',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date(new Date().getFullYear(), 0);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近六个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setMonth(start.getMonth() - 6);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ queryParams:{
|
|
|
+ startMonth:'',
|
|
|
+ endMonth:'',
|
|
|
+ customerName:'',
|
|
|
+ createByName:'',
|
|
|
+ startCreateTime:'',
|
|
|
+ endCreateTime:'',
|
|
|
+ pageSize:10,
|
|
|
+ pageNum:1,
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
002390