md
This commit is contained in:
linfso
parent
da07af36fc
commit
07b5185641
209
src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue
Normal file
209
src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- <el-alert
|
||||||
|
:title="goodsData.info.name"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
center
|
||||||
|
effect="dark">
|
||||||
|
</el-alert> -->
|
||||||
|
<!-- <el-form v-if="goodsData && goodsData.priceExts && goodsData.priceExts.length > 0" style="margin-top:10px;" label-width="140px">
|
||||||
|
<el-form-item label="请选择规格尺寸">
|
||||||
|
<el-select style="width:95%" v-model="priceId" placeholder="请选择" @change="priceIdChange">
|
||||||
|
<el-option v-for="item in goodsData.priceExts" :key="item.id" :label="item.propertyChildNames" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form> -->
|
||||||
|
<el-divider>每日收款日历</el-divider>
|
||||||
|
<el-calendar v-model="selectDay">
|
||||||
|
<template slot="dateCell" slot-scope="{date, data}">
|
||||||
|
<!-- { type, isSelected, day} type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd -->
|
||||||
|
<div style="text-align:center;margin-top:15px;" @click="openSetting(data)">
|
||||||
|
<div>{{ data.day.split('-').slice(1).join('月') }}日</div>
|
||||||
|
|
||||||
|
<!-- <div v-if="getPriceData(data.day)" style="display:flex;justify-content:center;margin-top:15px;font-size:12px;">
|
||||||
|
<div style="color:red">￥ {{ getPriceData(data.day).price }}</div>
|
||||||
|
<div style="margin-left:10px;color:green;">剩 {{ getPriceData(data.day).stores }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else style="color:gray;margin-top:15px;font-size:12px;">未设置</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<el-button type="primary" @click="goback" size="medium">返回</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <el-dialog title="设置价格" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||||
|
<el-form :rules="rules" ref="addEditPopForm" :model="pushData" label-position="left" label-width="180px">
|
||||||
|
<el-form-item label="当日价格" prop="price">
|
||||||
|
<el-input v-model="pushData.price" clearable @keyup.enter.native="handleCreateSave" style="width: 30%;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="当日库存数" prop="stores">
|
||||||
|
<el-input v-model="pushData.stores" clearable @keyup.enter.native="handleCreateSave" style="width: 30%;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-checkbox v-model="pushData.batchSetCurMonth">批量设置当月</el-checkbox>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible = false" size="small">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleCreateSave" size="small">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { calculateRecedMoney } from "@/api/emis/emisSettleBill";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
rules: {
|
||||||
|
price: [
|
||||||
|
{ required: true, message: '不能为空'}
|
||||||
|
],
|
||||||
|
stores: [
|
||||||
|
{ required: true, message: '不能为空'}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
goodsId: undefined, // 商品ID
|
||||||
|
goodsData: undefined, // 接口读取的商品详情数据
|
||||||
|
priceId: undefined, // 选择的规格尺寸的记录ID
|
||||||
|
selectDay: new Date(), // 日历上选择的日期
|
||||||
|
dayPrices: undefined, // 读取的按天价格设置记录
|
||||||
|
selectDayStr: undefined, // 点击日历时候赋值
|
||||||
|
|
||||||
|
pushData: {
|
||||||
|
price:undefined,
|
||||||
|
stores: undefined,
|
||||||
|
batchSetCurMonth: false
|
||||||
|
},
|
||||||
|
|
||||||
|
dialogTitle : undefined,
|
||||||
|
dialogFormVisible:false,
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initRecdStatData();
|
||||||
|
// if (this.$route.query.id) {
|
||||||
|
// this.goodsId = this.$route.query.id
|
||||||
|
// info(this.$route.query.id).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// this.goodsData = res.data
|
||||||
|
// if (res.data.priceExts && res.data.priceExts.length > 0) {
|
||||||
|
// this.priceId = res.data.priceExts[0].id
|
||||||
|
// }
|
||||||
|
// this.getdayPrices()
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initRecdStatData(){
|
||||||
|
// 查询统计
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||||
|
start.setHours(0,0,0,0)
|
||||||
|
end.setHours(23,59,59,0)
|
||||||
|
this.dateRange=[timeFormat(start), timeFormat(end)]
|
||||||
|
|
||||||
|
let extQParam={
|
||||||
|
beginTime:this.dateRange[0],
|
||||||
|
endTime:this.dateRange[1],
|
||||||
|
}
|
||||||
|
|
||||||
|
calculateRecedMoney(extQParam).then(response => {
|
||||||
|
// console.log("====>calculateRecedMoney===>",response);
|
||||||
|
// let xData=[];
|
||||||
|
// let yData=[];
|
||||||
|
// // 做数据转换
|
||||||
|
// response.data.forEach(item => {
|
||||||
|
// xData.push(item.tradeDay);
|
||||||
|
// yData.push(item.payMoney);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// this.recdStateData.xAxisData=[...xData];
|
||||||
|
// this.recdStateData.orderStateData=[...yData];
|
||||||
|
// console.log("====>this.recdStateData===>",this.recdStateData);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
// priceIdChange(priceId){
|
||||||
|
// this.priceId = priceId
|
||||||
|
// this.getdayPrices()
|
||||||
|
// },
|
||||||
|
// getdayPrices(){
|
||||||
|
// getdayPrices(this.goodsId, this.priceId).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// this.dayPrices = res.data
|
||||||
|
// this.dayPrices.forEach(ele => {
|
||||||
|
// ele.day = ele.day.split(" ")[0]
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// this.dayPrices = undefined
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// getPriceData(day){
|
||||||
|
// if (!this.dayPrices) {
|
||||||
|
// return null
|
||||||
|
// }
|
||||||
|
// return this.dayPrices.find(ele => {
|
||||||
|
// return ele.day == day
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// openSetting(data){
|
||||||
|
// this.selectDayStr = data.day
|
||||||
|
// const o = this.getPriceData(data.day)
|
||||||
|
// this.pushData.batchSetCurMonth = false
|
||||||
|
// if (o) {
|
||||||
|
// this.pushData.price = o.price
|
||||||
|
// this.pushData.stores = o.stores
|
||||||
|
// }
|
||||||
|
// this.dialogFormVisible = true
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.$refs['addEditPopForm'].clearValidate()
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// handleCreateSave(){
|
||||||
|
// this.$refs['addEditPopForm'].validate((valid) => {
|
||||||
|
// if (valid) {
|
||||||
|
// modifyDayPrice({
|
||||||
|
// goodsId: this.goodsId,
|
||||||
|
// priceId: this.priceId,
|
||||||
|
// day: this.selectDayStr,
|
||||||
|
// price: this.pushData.price,
|
||||||
|
// stores: this.pushData.stores,
|
||||||
|
// batchSetCurMonth: this.pushData.batchSetCurMonth
|
||||||
|
// }).then((res) => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// this.$message({
|
||||||
|
// message: '操作成功',
|
||||||
|
// type: 'success'
|
||||||
|
// });
|
||||||
|
// this.dialogFormVisible = false
|
||||||
|
// this.getdayPrices()
|
||||||
|
// } else {
|
||||||
|
// this.$message.error(res.msg);
|
||||||
|
// }
|
||||||
|
// }).catch(e=>{
|
||||||
|
// console.error(e);
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
goback() {
|
||||||
|
this.$router.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
267
src/views/emis/emisSettleBill/PayBackStat/PayDay.vue
Normal file
267
src/views/emis/emisSettleBill/PayBackStat/PayDay.vue
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div style="margin-bottom: 100px;">
|
||||||
|
<!-- <div class="batch-add-Work-class"> -->
|
||||||
|
<!-- <el-date-picker size="mini" style="width:100%" v-model="currentMonth" type="months" placeholder="选择月份" value-format="yyyy-MM"></el-date-picker> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<CardWithHeader header="收款日历" height="700px">
|
||||||
|
<template v-slot:body>
|
||||||
|
<div>
|
||||||
|
<div style="width:100%;height: 500px;">
|
||||||
|
<el-calendar v-model="calendarDate" :first-day-of-week="7" :key="resetRefreshId+'1'">
|
||||||
|
<template slot="dateCell" slot-scope="{ date, data }">
|
||||||
|
<div class="day-content-class" @click="handleView(data.day)">
|
||||||
|
<template>
|
||||||
|
<div class="header-class">
|
||||||
|
<div class="day-class">
|
||||||
|
{{
|
||||||
|
data.day
|
||||||
|
.split("-")
|
||||||
|
.slice(1)
|
||||||
|
.join("-")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="handle-class">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-class">
|
||||||
|
<div >
|
||||||
|
<div v-if="payData[data.day]" >
|
||||||
|
<span v-if="payData[data.day]>500000" style="color:red;font-weight: bold;text-align: center;font-size: 12px;">
|
||||||
|
￥{{ payData[data.day] }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="payData[data.day]>=100000 && payData[data.day]<500000" style="color:red;font-weight: bold;text-align: center;font-size: 12px;">
|
||||||
|
￥{{ payData[data.day] }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span v-else style="color:black;font-weight: bold;text-align: center;font-size: 12px;">
|
||||||
|
￥{{ payData[data.day] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CardWithHeader>
|
||||||
|
|
||||||
|
<CardWithHeader header="收款趋势" height="400px" >
|
||||||
|
<template v-slot:body>
|
||||||
|
<LineOrderChart :chart-data="recdStateData" :key="resetRefreshId+'2'" />
|
||||||
|
</template>
|
||||||
|
</CardWithHeader>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<CardWithHeader header="未回款统计" height="400px">
|
||||||
|
<template v-slot:body>
|
||||||
|
<LineOrderChart :chart-data="recdStateData" />
|
||||||
|
</template>
|
||||||
|
</CardWithHeader> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { calculateRecedMoney } from "@/api/emis/emisSettleBill";
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import CardWithHeader from '@/components/CardWithHeader/index.vue';
|
||||||
|
import LineOrderChart from '@/views/emis/common/LineOrderChart.vue';
|
||||||
|
|
||||||
|
import {timeFormat} from '@/utils/dateUtils'
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CardWithHeader,LineOrderChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
resetRefreshId:null,
|
||||||
|
calendarDate: new Date(),
|
||||||
|
payData:new Map(),
|
||||||
|
recdStateData:{
|
||||||
|
xAxisData:[],
|
||||||
|
orderStateData:[]
|
||||||
|
},
|
||||||
|
|
||||||
|
currentMonth:null,
|
||||||
|
thisDay: null,
|
||||||
|
thisDayWork: null,
|
||||||
|
ending: null,
|
||||||
|
dragging: null,
|
||||||
|
|
||||||
|
batchAddDrawer: false,
|
||||||
|
drawer: false,
|
||||||
|
innerDrawer: false,
|
||||||
|
hanleDay: "",
|
||||||
|
workInfoList: [],
|
||||||
|
// 时间范围
|
||||||
|
dateRange: ['2023-10-1', '2023-10-20'],
|
||||||
|
changeDateDrawer: false,
|
||||||
|
// 点击月中已选中的日期
|
||||||
|
currentDate: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
calendarDate(newVal, oldVal) {
|
||||||
|
|
||||||
|
console.log("==月份==>",moment(newVal).format("YYYY-MM"))
|
||||||
|
let start = moment(newVal).startOf("month");
|
||||||
|
let end = moment(newVal).endOf("month");
|
||||||
|
this.dateRange=[timeFormat(start), timeFormat(end)]
|
||||||
|
this.initRecdStatData();
|
||||||
|
|
||||||
|
// if (
|
||||||
|
// val &&
|
||||||
|
// moment(val).format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")
|
||||||
|
// ) {
|
||||||
|
// console.log("点击了‘今天’按钮");
|
||||||
|
// } else if (
|
||||||
|
// val &&
|
||||||
|
// moment(val).toDate() < moment(oldVal).startOf("month").toDate()
|
||||||
|
// ) {
|
||||||
|
// console.log("点击了‘上个月’按钮");
|
||||||
|
// } else if (
|
||||||
|
// val &&
|
||||||
|
// moment(val).toDate() > moment(oldVal).endOf("month").toDate()
|
||||||
|
// ) {
|
||||||
|
// console.log("点击了‘下个月’按钮");
|
||||||
|
// } else {
|
||||||
|
// console.log("点击了" + moment(val).format("YYYY-MM") + "的按钮");
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
// 查询统计
|
||||||
|
const end = new Date()
|
||||||
|
// const start = new Date()
|
||||||
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
// start.setHours(0,0,0,0)
|
||||||
|
const start=moment().startOf('month');
|
||||||
|
console.log("====>=111==>",start);
|
||||||
|
end.setHours(23,59,59,0)
|
||||||
|
this.dateRange=[timeFormat(start), timeFormat(end)]
|
||||||
|
|
||||||
|
this.initRecdStatData();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initRecdStatData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initRecdStatData(){
|
||||||
|
let extQParam={
|
||||||
|
beginTime:this.dateRange[0],
|
||||||
|
endTime:this.dateRange[1],
|
||||||
|
}
|
||||||
|
calculateRecedMoney(extQParam).then(response => {
|
||||||
|
this.resetRefreshId="payday-"+Math.random().toString(36).substring(3,10);
|
||||||
|
console.log("====>calculateRecedMoney===>",response);
|
||||||
|
let xData=[];
|
||||||
|
let yData=[];
|
||||||
|
this.payData=new Map();
|
||||||
|
|
||||||
|
response.data.forEach(item => {
|
||||||
|
this.payData[item.tradeDay]=item.payMoney;
|
||||||
|
xData.push(item.tradeDay);
|
||||||
|
yData.push(item.payMoney);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.recdStateData.xAxisData=[...xData];
|
||||||
|
this.recdStateData.orderStateData=[...yData];
|
||||||
|
console.log("====>this.recdStateData===>",this.recdStateData);
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
handleView(day){
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/ruyERj/EmisSettlePayRecord',
|
||||||
|
query: {
|
||||||
|
action: "queryPayData",
|
||||||
|
tradeDay:day,
|
||||||
|
'_t':(new Date()).getTime()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.el-calendar-table:not(.is-range) td.prev,
|
||||||
|
.el-calendar-table:not(.is-range) td.next{
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.prev>.el-calendar-day>p{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.next>.el-calendar-day>p{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.el-table__fixed-right {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calender-class {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-selected {
|
||||||
|
color: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-calendar__body {
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-calendar-table {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-calendar-day {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-content-class {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-class {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
height: 28px;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-class {
|
||||||
|
width: 100%;text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-class {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-class {
|
||||||
|
flex: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user