aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2025-05-15 04:23:13 +08:00
parent da07af36fc
commit 07b5185641
2 changed files with 476 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
src/views/emis/emisSettleBill/PayBackStat/PayDay copy.vue Normal file
View 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
View 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>