tijiao
This commit is contained in:
@@ -1,443 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="calendar"
|
||||
style="min-width: 1000px;overflow-x: auto;min-height: 100%;"
|
||||
>
|
||||
<div
|
||||
v-if="allMonthData.length > 0"
|
||||
@click="handleExportAll()"
|
||||
style="position: absolute;left: 360px;top:30px;cursor: pointer;color: #006699;font-size: 14px;"
|
||||
>
|
||||
<i class="el-icon-download"></i>下载 {{ year }} 年全部天医币报表
|
||||
</div>
|
||||
|
||||
<el-card
|
||||
class="box-card"
|
||||
v-for="(month, mIndex) in allMonthData"
|
||||
:key="mIndex"
|
||||
>
|
||||
<div slot="header" class="clearfix">
|
||||
<div
|
||||
style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;"
|
||||
>
|
||||
{{ month.month }} 月
|
||||
<el-button
|
||||
v-if="month && month.total && month.total.length > 0"
|
||||
@click="handleExport(Number(month.month))"
|
||||
style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;"
|
||||
type="text"
|
||||
><i class="el-icon-download"></i>下载报表</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="days"
|
||||
style=""
|
||||
v-if="month && month.total && month.total.length > 0"
|
||||
:style="{
|
||||
'grid-template-columns': `repeat(${
|
||||
month.total.length && month.total.length > 2
|
||||
? 2
|
||||
: month.total.length
|
||||
}, 1fr)`
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="d in month.total"
|
||||
:key="d"
|
||||
class="day header"
|
||||
style="margin-bottom: 4px;text-align:left;"
|
||||
>
|
||||
{{ d.type }}
|
||||
<span style="font-size: 16px;" v-if="d.payType">
|
||||
<img
|
||||
src="/static/img/oder_chong.png"
|
||||
alt=""
|
||||
style="width: 20px;"
|
||||
v-if="d.payType == '天医币'"
|
||||
/>
|
||||
<img
|
||||
src="/static/img/pingguo.png"
|
||||
alt=""
|
||||
style="width: 18px;margin-top: -6px;"
|
||||
v-if="d.payType == '苹果'"
|
||||
/>
|
||||
<icon-svg
|
||||
name="weixin"
|
||||
v-if="d.payType == '微信'"
|
||||
style=""
|
||||
></icon-svg>
|
||||
<icon-svg name="zhifubao" v-if="d.payType == '支付宝'"></icon-svg>
|
||||
</span>
|
||||
<div class="day" style="display: inline-block;">: {{ d.amount }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
v-for="day in month.days"
|
||||
:key="day.date"
|
||||
template
|
||||
:class="day.color"
|
||||
>
|
||||
{{ day.number }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="font-size: 20px;color: #888;text-align: center;line-height: 100px;"
|
||||
>
|
||||
暂无数据
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取当年到当前月的所有月份数组
|
||||
function getMonths(year) {
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear();
|
||||
const currentMonth = now.getMonth() + 1; // 月份从0开始
|
||||
|
||||
// 如果是今年，只取到当前月；否则取12个月
|
||||
const endMonth = year == currentYear ? currentMonth - 1 : 12;
|
||||
|
||||
let months = [];
|
||||
for (let i = 1; i <= endMonth; i++) {
|
||||
let monthStr = i < 10 ? "0" + i : i; // 补零
|
||||
months.push(`${monthStr}`);
|
||||
}
|
||||
return months;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "FullYearCalendar",
|
||||
props: {
|
||||
year: {
|
||||
type: Number,
|
||||
default: new Date().getFullYear()
|
||||
},
|
||||
// 标记数据，例如：{ "2019-01-05": "red", "2019-03-12": "yellow" }
|
||||
marks: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
urlList: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCurrentMonth: "",
|
||||
showCurrentMonthDate: "",
|
||||
allMonthData: [],
|
||||
list: [
|
||||
{ title: "收入", val: "fee" },
|
||||
{ title: "月摊销", val: "currentTanxiao" },
|
||||
{ title: "已摊销", val: "alreadyTanxiao" },
|
||||
{ title: "剩余摊销", val: "notyetTanxiao" }
|
||||
],
|
||||
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
|
||||
monthNames: [
|
||||
"一",
|
||||
"二",
|
||||
"三",
|
||||
"四",
|
||||
"五",
|
||||
"六",
|
||||
"七",
|
||||
"八",
|
||||
"九",
|
||||
"十",
|
||||
"十 一",
|
||||
"十 二"
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// months() {
|
||||
// let months = [];
|
||||
// for (let m = 0; m < 12; m++) {
|
||||
// let firstDay = new Date(this.year, m, 1);
|
||||
// let lastDay = new Date(this.year, m + 1, 0);
|
||||
// let daysInMonth = lastDay.getDate();
|
||||
// let startWeek1 = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
|
||||
// let startWeek = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
|
||||
// let days = [];
|
||||
// for (let d = 1; d <= daysInMonth; d++) {
|
||||
// let dateStr = `${this.year}-${String(m+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
|
||||
// days.push({
|
||||
// number: d,
|
||||
// date: dateStr,
|
||||
// color: this.marks[dateStr] || ""
|
||||
// });
|
||||
// }
|
||||
// months.push({ startWeek, days });
|
||||
// }
|
||||
// return months;
|
||||
// }
|
||||
},
|
||||
async created() {
|
||||
await this.getMonthsByYear(this.year);
|
||||
await this.fetchAllMonthData();
|
||||
},
|
||||
methods: {
|
||||
async handleExportAll() {
|
||||
const months = this.allMonthData.map(m => m.month);
|
||||
|
||||
this.$message({
|
||||
message: "所有月份的天医币报表正在下载，请耐心等待...",
|
||||
type: "info",
|
||||
duration: 6000,
|
||||
showClose: true
|
||||
});
|
||||
|
||||
// 构造请求数组
|
||||
const requests = months.map(m => {
|
||||
return this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.export),
|
||||
method: "post",
|
||||
data: this.$http.adornData({ date: `${this.year}-${m}` }),
|
||||
responseType: "blob"
|
||||
})
|
||||
.then(res => {
|
||||
const filename = `天医币报表_${this.year}年${m}月下载文件.xlsx`;
|
||||
const blob = new Blob([res.data], {
|
||||
type:
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
|
||||
return { month: m, success: true };
|
||||
})
|
||||
.catch(() => {
|
||||
return { month: m, success: false };
|
||||
});
|
||||
});
|
||||
|
||||
// 等待所有请求完成
|
||||
const results = await Promise.all(requests);
|
||||
|
||||
// 统计成功/失败
|
||||
const successMonths = results.filter(r => r.success).map(r => r.month);
|
||||
const failMonths = results.filter(r => !r.success).map(r => r.month);
|
||||
|
||||
let message = `报表下载完成：成功 ${successMonths.length} 个`;
|
||||
if (failMonths.length > 0) {
|
||||
message += `，失败 ${failMonths.length} 个（失败月份: ${failMonths.join(
|
||||
"、"
|
||||
)}）`;
|
||||
}
|
||||
|
||||
this.$message({
|
||||
message,
|
||||
type: failMonths.length === 0 ? "success" : "warning",
|
||||
duration: 5000,
|
||||
showClose: true
|
||||
});
|
||||
},
|
||||
|
||||
async handleExport(mIndex) {
|
||||
console.log("mIndex at line 120:", mIndex);
|
||||
var filename = `天医币报表_${this.year}年${this.pad(
|
||||
mIndex
|
||||
)}月下载文件.xlsx`;
|
||||
this.$message({
|
||||
message: "请耐心等待...",
|
||||
type: "info",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
try {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.export),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
date: `${this.year}-${this.pad(mIndex)}`
|
||||
}),
|
||||
responseType: "blob" // ⚡⚡⚡一定要加上
|
||||
}).then(res => {
|
||||
// this.$message({
|
||||
// message: "天医币报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
|
||||
// type: "info",
|
||||
// duration: 6000,
|
||||
// showClose: true
|
||||
// });
|
||||
const blob = new Blob([res.data], {
|
||||
type:
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
|
||||
window.URL.revokeObjectURL(link.href); // 释放内存
|
||||
this.$message({
|
||||
message: "天医币报表文件下载完成,请注意查看！",
|
||||
type: "success",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
});
|
||||
// const res = await axios.post(
|
||||
// window.SITE_CONFIG.baseUrl+"/master/userContribution/exportContributionStatQuery",
|
||||
// {
|
||||
// current: this.current,
|
||||
// limit: this.limit
|
||||
// },
|
||||
// {
|
||||
|
||||
// responseType: "blob" // 关键点：告诉 axios 返回的是二进制文件
|
||||
// }
|
||||
// );
|
||||
} catch (err) {
|
||||
this.$message.error("文件下载失败!");
|
||||
// console.error("文件下载失败：", err);
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
this.showCurrentMonth = "";
|
||||
this.showCurrentMonthDate = "";
|
||||
await this.getMonthsByYear(this.year);
|
||||
await this.fetchAllMonthData();
|
||||
},
|
||||
getMonthsByYear(year) {
|
||||
this.months = getMonths(year);
|
||||
},
|
||||
|
||||
pad(num) {
|
||||
return num < 10 ? "0" + num : num;
|
||||
},
|
||||
fetchAllMonthData() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "统计中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
});
|
||||
const year = this.year;
|
||||
const months = getMonths(year);
|
||||
console.log("months", months);
|
||||
// 构造请求数组
|
||||
const requests = months.map(m => {
|
||||
const monthNum = m; // 拿到 1,2,3...
|
||||
return this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.list),
|
||||
method: "post",
|
||||
data: this.$http.adornData({ date: `${year}-${m}` })
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data && res.data.code === 0) {
|
||||
return { month: monthNum, total: res.data.total };
|
||||
} else {
|
||||
return { month: monthNum, total: null, error: "获取失败" };
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
return {
|
||||
month: monthNum,
|
||||
total: null,
|
||||
error: err.message || "请求出错"
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// 并发请求
|
||||
Promise.all(requests)
|
||||
.then(resArr => {
|
||||
console.log("所有月份结果：", resArr);
|
||||
loading.close();
|
||||
this.allMonthData = resArr.filter(
|
||||
r => r.total !== null && r.total.length !== 0
|
||||
);
|
||||
if (this.allMonthData.length == 0) {
|
||||
this.$message({
|
||||
message: "该年无数据",
|
||||
type: "warning",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
}
|
||||
if (this.year == new Date().getFullYear()) {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = this.pad(now.getMonth() + 1);
|
||||
const day = this.pad(now.getDate());
|
||||
|
||||
this.showCurrentMonth = now.getMonth() + 1;
|
||||
console.log(
|
||||
"this.showCurrentMonth at line 111:",
|
||||
this.showCurrentMonth
|
||||
);
|
||||
this.showCurrentMonthDate = `${year}-${month}-${day}`;
|
||||
|
||||
console.log("当前完整日期:", this.showCurrentMonthDate);
|
||||
}
|
||||
// resArr 是每个月接口返回结果的数组
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("获取所有月份数据失败:", err);
|
||||
loading.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.month {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.month h3 {
|
||||
margin: 0 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
font-size: 16px;
|
||||
}
|
||||
.day {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.day.header {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
.day.red {
|
||||
background: #ffdddd;
|
||||
color: #d00;
|
||||
}
|
||||
.day.blue {
|
||||
background: #ddeeff;
|
||||
color: #004;
|
||||
}
|
||||
.day.yellow {
|
||||
background: #fff6cc;
|
||||
color: #665500;
|
||||
}
|
||||
/deep/ .el-card .el-card__header {
|
||||
padding: 8px 20px !important;
|
||||
}
|
||||
/deep/ .el-card .el-card__body {
|
||||
padding: 10px !important;
|
||||
}
|
||||
</style>
|
||||
347
src/views/modules/reportList/FullYearCalendarTrainingCourse.vue
Normal file
347
src/views/modules/reportList/FullYearCalendarTrainingCourse.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="calendar" style="min-width: 1000px;overflow-x: auto;min-height: 100%;">
|
||||
<div v-if="allMonthData.length>0" @click="handleExportAll()" style="position: absolute; left: 360px;top:30px;cursor: pointer;color: #006699;font-size: 14px;"><i class="el-icon-download"></i>下载 {{selectYear}} 年全部培训班报表</div>
|
||||
|
||||
<el-card class="box-card" v-for="(month, mIndex) in allMonthData"
|
||||
:key="mIndex" >
|
||||
<div slot="header" class="clearfix" >
|
||||
<div style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;">{{ month.month}} 月 <el-button @click="handleExport(Number(month.month))" style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;" type="text"><i class="el-icon-download"></i>下载报表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="days" >
|
||||
<!-- <div v-for="d in weekDays" :key="d" class="day header">{{ d }}</div> -->
|
||||
<!-- <div v-for="blank in month.startWeek" :key="'b'+blank" class="day"></div> -->
|
||||
<div v-for="d in list" class="day header" style="margin-bottom: 10px;color:#888;">{{ d.title }}</div>
|
||||
|
||||
|
||||
<div v-for="d in list" style="font-weight: bold;font-size: 18px;" class="day" :style="`${d.val=='currentTanxiao'?'background-color:#11cdba30;color:#d00':''}`">{{
|
||||
month.total[d.val]
|
||||
}}</div>
|
||||
|
||||
|
||||
|
||||
<!-- <div
|
||||
v-for="day in month.days"
|
||||
:key="day.date"
|
||||
template
|
||||
:class="day.color"
|
||||
>
|
||||
{{ day.number }}
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <p
|
||||
style="margin-top: 10px;text-align: left;color: #006699;margin-left: -4px;margin-bottom: 0;"
|
||||
>
|
||||
合计 : 222
|
||||
</p> -->
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取当年到当前月的所有月份数组
|
||||
function getMonths(year) {
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear();
|
||||
const currentMonth = now.getMonth() + 1; // 月份从0开始
|
||||
|
||||
// 如果是今年，只取到当前月；否则取12个月
|
||||
const endMonth = year == currentYear ? currentMonth : 12;
|
||||
|
||||
let months = [];
|
||||
for (let i = 1; i <= endMonth; i++) {
|
||||
let monthStr = i < 10 ? "0" + i : i; // 补零
|
||||
months.push(`${monthStr}`);
|
||||
}
|
||||
return months;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "FullYearCalendar",
|
||||
props: {
|
||||
selectYear: {
|
||||
type: Number,
|
||||
default: new Date().getFullYear()
|
||||
},
|
||||
// 标记数据，例如：{ "2019-01-05": "red", "2019-03-12": "yellow" }
|
||||
marks: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
urlList: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 支付宝: 4320, 海外: 0, 银行: 0, 天医币: 20575, 微信: 9782
|
||||
showCurrentMonth: '',
|
||||
showCurrentMonthDate: '',
|
||||
allMonthData: [],
|
||||
list: [ {title:'微信',val:'微信'},
|
||||
{title:'支付宝',val:'支付宝'} ,
|
||||
{title:'天医币',val:'天医币'},
|
||||
{title:'银行',val:'银行'},
|
||||
{title:'海外',val:'海外'},
|
||||
|
||||
],
|
||||
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
|
||||
monthNames: [
|
||||
"一", "二", "三", "四",
|
||||
"五", "六", "七", "八",
|
||||
"九", "十", "十 一", "十 二"
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
async created() {
|
||||
|
||||
|
||||
await this.getMonthsByYear(this.selectYear)
|
||||
await this.fetchAllMonthData()
|
||||
},
|
||||
methods: {
|
||||
async handleExportAll() {
|
||||
const months = this.allMonthData.map(m => m.month); // 例如 ["01","02",...,"09"]
|
||||
|
||||
this.$message({
|
||||
message: "所有月份的培训班报表正在下载，请耐心等待...",
|
||||
type: "info",
|
||||
duration: 6000,
|
||||
showClose: true
|
||||
});
|
||||
|
||||
// 构造请求数组
|
||||
const requests = months.map(m => {
|
||||
return this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.export),
|
||||
method: "post",
|
||||
data: this.$http.adornData({ date: this.selectYear+'-'+m }),
|
||||
responseType: "blob"
|
||||
}).then(res => {
|
||||
const filename = `培训班报表_${this.selectYear}年${m}月下载文件.xlsx`
|
||||
const blob = new Blob([res.data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
})
|
||||
const link = document.createElement("a")
|
||||
link.href = window.URL.createObjectURL(blob)
|
||||
link.download = filename
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(link.href)
|
||||
|
||||
return { month: m, success: true }
|
||||
}).catch(() => {
|
||||
return { month: m, success: false }
|
||||
})
|
||||
})
|
||||
|
||||
// 等待所有请求完成
|
||||
const results = await Promise.all(requests)
|
||||
|
||||
// 统计成功/失败
|
||||
const successMonths = results.filter(r => r.success).map(r => r.month)
|
||||
const failMonths = results.filter(r => !r.success).map(r => r.month)
|
||||
|
||||
let message = `报表下载完成：成功 ${successMonths.length} 个`
|
||||
if (failMonths.length > 0) {
|
||||
message += `，失败 ${failMonths.length} 个（失败月份: ${failMonths.join("、")}）`
|
||||
}
|
||||
|
||||
this.$message({
|
||||
message,
|
||||
type: failMonths.length === 0 ? "success" : "warning",
|
||||
duration: 5000,
|
||||
showClose: true
|
||||
});
|
||||
},
|
||||
|
||||
async handleExport(mIndex) {
|
||||
console.log('mIndex at line 120:', mIndex)
|
||||
var filename = `培训班报表_${this.selectYear}年${this.pad(mIndex)}月下载文件.xlsx`;
|
||||
this.$message({
|
||||
message: "请耐心等待...",
|
||||
type: "info",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
try {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
this.urlList.export,
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
date: this.selectYear+'-'+this.pad(mIndex)
|
||||
}),
|
||||
responseType: "blob" // ⚡⚡⚡一定要加上
|
||||
}).then(res => {
|
||||
// this.$message({
|
||||
// message: "培训班报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
|
||||
// type: "info",
|
||||
// duration: 6000,
|
||||
// showClose: true
|
||||
// });
|
||||
const blob = new Blob([res.data], {
|
||||
type:
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
|
||||
window.URL.revokeObjectURL(link.href); // 释放内存
|
||||
this.$message({
|
||||
message: "培训班报表文件下载完成,请注意查看！",
|
||||
type: "success",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
});
|
||||
// const res = await axios.post(
|
||||
// window.SITE_CONFIG.baseUrl+"/master/userContribution/exportContributionStatQuery",
|
||||
// {
|
||||
// current: this.current,
|
||||
// limit: this.limit
|
||||
// },
|
||||
// {
|
||||
|
||||
// responseType: "blob" // 关键点：告诉 axios 返回的是二进制文件
|
||||
// }
|
||||
// );
|
||||
} catch (err) {
|
||||
this.$message.error("文件下载失败!");
|
||||
// console.error("文件下载失败：", err);
|
||||
}
|
||||
},
|
||||
async init(){
|
||||
this.showCurrentMonth = ''
|
||||
this.showCurrentMonthDate = ''
|
||||
await this.getMonthsByYear(this.selectYear)
|
||||
await this.fetchAllMonthData()
|
||||
},
|
||||
getMonthsByYear(year) {
|
||||
this.months = getMonths(year)
|
||||
|
||||
}
|
||||
|
||||
,pad(num) {
|
||||
return num < 10 ? "0" + num : num
|
||||
}
|
||||
,
|
||||
fetchAllMonthData() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "统计中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
});
|
||||
const year = this.selectYear
|
||||
const months = getMonths(year)
|
||||
console.log('months', months)
|
||||
// 构造请求数组
|
||||
|
||||
const requests = months.map(m => {
|
||||
const monthNum = m // 拿到 1,2,3...
|
||||
return this.$http({
|
||||
url: this.$http.adornUrl(this.urlList.list),
|
||||
method: "post",
|
||||
data: this.$http.adornData({ date: year+'-'+m })
|
||||
}).then(res => {
|
||||
//
|
||||
if (res.data && res.data.code === 0) {
|
||||
return { month: monthNum, total: res.data.list }
|
||||
} else {
|
||||
return { month: monthNum, total: null, error: "获取失败" }
|
||||
}
|
||||
}).catch(err => {
|
||||
return { month: monthNum, total: null, error: err.message || "请求出错" }
|
||||
})
|
||||
})
|
||||
|
||||
// 并发请求
|
||||
Promise.all(requests).then(resArr => {
|
||||
console.log("所有月份结果：", resArr)
|
||||
loading.close()
|
||||
this.allMonthData = resArr.filter(
|
||||
r => r.total !== null && r.total.length !== 0
|
||||
);
|
||||
if(this.allMonthData.length==0){
|
||||
this.$message({
|
||||
message: "该年无数据",
|
||||
type: "warning",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
}
|
||||
if (this.selectYear == new Date().getFullYear()) {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = this.pad(now.getMonth() + 1)
|
||||
const day = this.pad(now.getDate())
|
||||
|
||||
this.showCurrentMonth = now.getMonth() + 1
|
||||
console.log('this.showCurrentMonth at line 111:', this.showCurrentMonth)
|
||||
this.showCurrentMonthDate = `${year}-${month}-${day}`
|
||||
|
||||
console.log('当前完整日期:', this.showCurrentMonthDate)
|
||||
}
|
||||
// resArr 是每个月接口返回结果的数组
|
||||
}).catch(err => {
|
||||
console.error("获取所有月份数据失败:", err)
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.month {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.month h3 {
|
||||
margin: 0 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
font-size: 15px;
|
||||
}
|
||||
.day {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.day.header {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
.day.red { background: #ffdddd; color: #d00; }
|
||||
.day.blue { background: #ddeeff; color: #004; }
|
||||
.day.yellow { background: #fff6cc; color: #665500; }
|
||||
/deep/ .el-card .el-card__header{
|
||||
padding: 4px 20px !important;
|
||||
}
|
||||
/deep/ .el-card .el-card__body {
|
||||
padding: 15px !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
676
src/views/modules/reportList/trainingCourseClassList.vue
Normal file
676
src/views/modules/reportList/trainingCourseClassList.vue
Normal file
@@ -0,0 +1,676 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList();
|
||||
"
|
||||
>刷新</el-button
|
||||
>
|
||||
<!-- <div v-if="dataList.length>0" @click="handleExportAll()" style="position: absolute; left: 120px;top:34px;cursor: pointer;color: #006699;font-size: 14px;"><i class="el-icon-download"></i>下载培训班报表</div> -->
|
||||
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;margin-top: 20px;"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
width="60">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="培训班名称" align="center" >
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="微信" align="center" width="140" prop="微信">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="支付宝" align="center" width="140" prop="支付宝">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="天医币" align="center" width="140" prop="天医币">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="银行" align="center" width="140" prop="银行">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="海外" align="center" width="140" prop="海外">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="赠送" align="center" width="140" prop="赠送">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="140" prop="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="handleExport(scope.row)">导出报表</el-button>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</el-table>
|
||||
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import global from "../../common/common.vue"; //引入共用组间
|
||||
export default {
|
||||
data() {
|
||||
// 通用校验规则：正数且大于 0
|
||||
const validatePositiveNumber = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('原价不能为空'));
|
||||
}
|
||||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||||
return callback(new Error('必须是正数或小数'));
|
||||
}
|
||||
if (parseFloat(value) <= 0) {
|
||||
return callback(new Error('必须大于 0'));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
return {
|
||||
baseUrl: global.baseUrl,
|
||||
dataForm: {
|
||||
title: '',
|
||||
type: '', //1线上 2线下
|
||||
year: '', //日期
|
||||
trainingDate: '',
|
||||
singupFlag: '', //1可报名 0不可报名
|
||||
displayFlag: '', //0上架 1下架
|
||||
displayApp: ''
|
||||
},
|
||||
addForm: {
|
||||
id: "", //新增不传
|
||||
title: "", //标题
|
||||
type: 1, //1线上 2线下
|
||||
icon: '',
|
||||
year: '',
|
||||
trainingDate: '', //开始日期
|
||||
endDate: '', //截止日期
|
||||
fee: '',
|
||||
vipType: '',
|
||||
vipFee: '',
|
||||
svipType: '',
|
||||
svipFee: '',
|
||||
threeHuFee: '',
|
||||
fiveHuFee: '',
|
||||
singupFlag: 1, //1可报名 0不可报名
|
||||
displayFlag: 0, //0上架 1下架
|
||||
displayApp: '',
|
||||
sort: ''
|
||||
},
|
||||
editId: "",
|
||||
addFormRule: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
},
|
||||
],
|
||||
trainingDate: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择日期",
|
||||
trigger: 'change'
|
||||
},
|
||||
],
|
||||
fee: [
|
||||
{
|
||||
required: true,
|
||||
validator: validatePositiveNumber
|
||||
},
|
||||
],
|
||||
},
|
||||
dateRange: [], //日期
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
dataListLoading: false,
|
||||
addOrUpdateVisible: false,
|
||||
titlesub: '新增',
|
||||
statusType: 0, //区分新增还是修改
|
||||
value: '', //选择日期
|
||||
fileList: [], //图片数组
|
||||
dialogVisible: false,
|
||||
//保存数据
|
||||
vipList: [],
|
||||
svipList: [],
|
||||
appList: [
|
||||
{
|
||||
type: '1',
|
||||
title: '众妙之门'
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
title: '吴门医述'
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
title: '心灵空间'
|
||||
}
|
||||
],
|
||||
//勾选值
|
||||
vipType: [],
|
||||
svipType: [],
|
||||
appType: [],
|
||||
//日期排序
|
||||
sortParams: {
|
||||
date1: '',
|
||||
date2: ''
|
||||
},
|
||||
//疯子读书-0 众妙之门-1 吴门医述-2 心灵空间-3 太湖云医-4
|
||||
};
|
||||
},
|
||||
activated(){
|
||||
this.getDataList();
|
||||
this.getVipData();
|
||||
},
|
||||
methods: {
|
||||
formatDateTime(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
async handleExport(data) {
|
||||
console.log('data at line 181:', data)
|
||||
var time=this.formatDateTime(new Date())
|
||||
var filename = `${data.title}_培训班报表下载文件_${time}.xlsx`;
|
||||
this.$message({
|
||||
message: "请耐心等待...",
|
||||
type: "info",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
try {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
'/master/statistics/getTrainingClassInfo'
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
trainingId:data.id
|
||||
}),
|
||||
responseType: "blob" // ⚡⚡⚡一定要加上
|
||||
}).then(res => {
|
||||
// this.$message({
|
||||
// message: "VIP报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
|
||||
// type: "info",
|
||||
// duration: 6000,
|
||||
// showClose: true
|
||||
// });
|
||||
const blob = new Blob([res.data], {
|
||||
type:
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
|
||||
window.URL.revokeObjectURL(link.href); // 释放内存
|
||||
this.$message({
|
||||
message: "培训班报表文件下载完成,请注意查看！",
|
||||
type: "success",
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
});
|
||||
// const res = await axios.post(
|
||||
// window.SITE_CONFIG.baseUrl+"/master/userContribution/exportContributionStatQuery",
|
||||
// {
|
||||
// current: this.current,
|
||||
// limit: this.limit
|
||||
// },
|
||||
// {
|
||||
|
||||
// responseType: "blob" // 关键点：告诉 axios 返回的是二进制文件
|
||||
// }
|
||||
// );
|
||||
} catch (err) {
|
||||
this.$message.error("文件下载失败!");
|
||||
// console.error("文件下载失败：", err);
|
||||
}
|
||||
},
|
||||
//app名称展示的逻辑
|
||||
getAppNames(displayApp) {
|
||||
if (!displayApp) return ''
|
||||
return displayApp.split(',')
|
||||
.map(code => code.trim())
|
||||
.filter(code => code !== '')
|
||||
.map(code => {
|
||||
const app = this.appList.find(item => item.type === code);
|
||||
return app ? app.title : '';
|
||||
})
|
||||
.join(' ');
|
||||
},
|
||||
//排序变化事件
|
||||
handleSortChange({ column, prop, order }) {
|
||||
// 更新当前列的排序状态
|
||||
var name = column.label;
|
||||
if(name=='培训日期'){
|
||||
this.sortParams.date1 = order
|
||||
? (order === 'ascending' ? '2' : '1')
|
||||
: null;
|
||||
}else{
|
||||
this.sortParams.date2 = order
|
||||
? (order === 'ascending' ? '2' : '1')
|
||||
: null;
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
|
||||
|
||||
//时间选择器
|
||||
handleDateChange(val){
|
||||
this.addForm.trainingDate = this.formatDate(val[0]);
|
||||
this.addForm.endDate = this.formatDate(val[1]);
|
||||
},
|
||||
//日期格式转换
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 日期补零
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/statistics/getTrainingClassTotal"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
// current: this.pageIndex,
|
||||
// limit: this.pageSize,
|
||||
// trainingDateSort: this.sortParams.date1,
|
||||
// createTimeSort: this.sortParams.date2,
|
||||
// title: this.dataForm.title,
|
||||
// type: this.dataForm.type,
|
||||
// year: this.dataForm.year,
|
||||
// singupFlag: this.dataForm.singupFlag,
|
||||
// //displayFlag: this.dataForm.displayFlag,
|
||||
// displayApp: this.dataForm.displayApp
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.list;
|
||||
// this.total = data.trainingClassList.total;
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
//设置开关 修改数据
|
||||
changeSingupFlag(data){
|
||||
this.editCate(data, '1');
|
||||
},
|
||||
//上下架开关
|
||||
changeDisplayFlag(data){
|
||||
this.editCate(data, '1');
|
||||
},
|
||||
|
||||
//新增
|
||||
addOrUpdateHandle(){
|
||||
this.addOrUpdateVisible = true;
|
||||
this.statusType = 0; //新增
|
||||
this.titlesub = '新增';
|
||||
this.addForm = {
|
||||
title: "", //标题
|
||||
type: 1, //1线上 2线下
|
||||
icon: '',
|
||||
year: '',
|
||||
trainingDate: '',
|
||||
endDate: '',
|
||||
fee: '',
|
||||
vipType: '',
|
||||
vipFee: '',
|
||||
svipType: '',
|
||||
appType: '',
|
||||
svipFee: '',
|
||||
threeHuFee: '',
|
||||
fiveHuFee: '',
|
||||
singupFlag: 1, //1可报名 0不可报名
|
||||
displayFlag: 0,
|
||||
sort: ''
|
||||
}
|
||||
this.fileList = [];
|
||||
this.vipType = [];
|
||||
this.svipType = [];
|
||||
this.appType = [];
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addFormRef.clearValidate();
|
||||
});
|
||||
},
|
||||
//点击确定
|
||||
addOrEditCate(){
|
||||
if(this.statusType==0){ //如果是新增
|
||||
this.addCate();
|
||||
}else if(this.statusType==1){ //如果是修改
|
||||
this.editCate(this.addForm, '0');
|
||||
}
|
||||
},
|
||||
//取消
|
||||
cancleClose(){
|
||||
this.addOrUpdateVisible = false;
|
||||
},
|
||||
//修改
|
||||
editCate(data, type){
|
||||
if(type=='0'){
|
||||
this.$refs["addFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
this.submitData(data);
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.submitData(data);
|
||||
}
|
||||
},
|
||||
//修改
|
||||
submitData(data){
|
||||
var icon = '';
|
||||
var vipType = '';
|
||||
var svipType = '';
|
||||
var appType = '';
|
||||
if(this.fileList&&this.fileList.length>0){
|
||||
icon = this.fileList[0].url
|
||||
}
|
||||
console.log('vipType-submit', this.vipType)
|
||||
console.log('svipType-submit', this.svipType)
|
||||
console.log('appType-submit', this.appType)
|
||||
if(this.vipType&&this.vipType.length>0){
|
||||
vipType = String(this.vipType);
|
||||
}
|
||||
if(this.svipType&&this.svipType.length>0){
|
||||
svipType = String(this.svipType);
|
||||
}
|
||||
if(this.appType&&this.appType.length>0){
|
||||
appType = String(this.appType);
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/trainingClass/editTrainingClass"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
type: data.type,
|
||||
year: data.year,
|
||||
trainingDate: data.trainingDate,
|
||||
endDate: data.endDate,
|
||||
singupFlag: data.singupFlag,
|
||||
//displayFlag: data.displayFlag,
|
||||
icon: icon,
|
||||
fee: data.fee,
|
||||
vipType: vipType,
|
||||
vipFee: data.vipFee,
|
||||
svipType: svipType,
|
||||
displayApp: appType,
|
||||
svipFee: data.svipFee,
|
||||
threeHuFee: data.threeHuFee,
|
||||
fiveHuFee: data.fiveHuFee,
|
||||
sort: data.sort
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success"
|
||||
});
|
||||
this.addOrUpdateVisible = false;
|
||||
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
//新增
|
||||
addCate(){
|
||||
this.$refs["addFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
var icon = '';
|
||||
var vipType = '';
|
||||
var svipType = '';
|
||||
var appType = '';
|
||||
if(this.fileList&&this.fileList.length>0){
|
||||
icon = this.fileList[0].url
|
||||
}
|
||||
if(this.vipType&&this.vipType.length>0){
|
||||
vipType = String(this.vipType);
|
||||
}
|
||||
if(this.svipType&&this.svipType.length>0){
|
||||
svipType = String(this.svipType);
|
||||
}
|
||||
if(this.appType&&this.appType.length>0){
|
||||
appType = String(this.appType);
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/trainingClass/addTrainingClass"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
id: this.addForm.id,
|
||||
title: this.addForm.title,
|
||||
type: String(this.addForm.type),
|
||||
trainingDate: this.addForm.trainingDate,
|
||||
endDate: this.addForm.endDate,
|
||||
singupFlag: String(this.addForm.singupFlag),
|
||||
//displayFlag: String(this.addForm.displayFlag),
|
||||
icon: icon,
|
||||
fee: this.addForm.fee,
|
||||
vipType: vipType,
|
||||
vipFee: this.addForm.vipFee,
|
||||
svipType: svipType,
|
||||
displayApp: appType,
|
||||
svipFee: this.addForm.svipFee,
|
||||
threeHuFee: this.addForm.threeHuFee,
|
||||
fiveHuFee: this.addForm.fiveHuFee,
|
||||
sort: this.addForm.sort
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success"
|
||||
});
|
||||
this.addOrUpdateVisible = false;
|
||||
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//操作
|
||||
//点击修改
|
||||
editHandle(data){
|
||||
this.fileList = [];
|
||||
this.addOrUpdateVisible = true;
|
||||
this.titlesub = '修改';
|
||||
this.statusType = 1; //修改
|
||||
|
||||
this.addForm.id = data.id;
|
||||
this.addForm.title = data.title;
|
||||
this.addForm.type = Number(data.type);
|
||||
this.addForm.year = data.year;
|
||||
this.addForm.trainingDate = data.trainingDate;
|
||||
this.addForm.endDate = data.endDate;
|
||||
this.addForm.singupFlag = Number(data.singupFlag);
|
||||
//this.addForm.displayFlag = Number(data.displayFlag);
|
||||
this.addForm.icon = data.icon;
|
||||
//图片赋值
|
||||
if(data.icon){
|
||||
this.fileList.push({
|
||||
url: data.icon
|
||||
});
|
||||
}
|
||||
this.addForm.fee = data.fee;
|
||||
this.addForm.vipFee = data.vipFee;
|
||||
if(data.vipType){
|
||||
this.vipType = data.vipType.split(',').map(item => parseInt(item, 10));
|
||||
}else{
|
||||
this.vipType = [];
|
||||
}
|
||||
if(data.svipType){
|
||||
this.svipType = data.svipType.split(',').map(item => parseInt(item, 10));
|
||||
}else{
|
||||
this.svipType = [];
|
||||
}
|
||||
if(data.displayApp){
|
||||
this.appType = data.displayApp.split(',').map(item => item.trim());
|
||||
}else{
|
||||
this.appType = [];
|
||||
}
|
||||
|
||||
this.addForm.svipFee = data.svipFee;
|
||||
this.addForm.threeHuFee = data.threeHuFee;
|
||||
this.addForm.fiveHuFee = data.fiveHuFee;
|
||||
this.addForm.sort = data.sort;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addFormRef.clearValidate();
|
||||
});
|
||||
},
|
||||
//上传图片
|
||||
handlePreview(file) {
|
||||
this.fileList = [];
|
||||
this.addForm.icon = file.url;
|
||||
this.fileList.push({
|
||||
url: file.url
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
//图片上传成功
|
||||
handleSuccess(res, file) {
|
||||
if (res.msg == "success") {
|
||||
this.fileList.push({
|
||||
url: res.url
|
||||
});
|
||||
this.$message.success("图片上传成功");
|
||||
} else {
|
||||
this.$message.error("图片上传失败");
|
||||
}
|
||||
},
|
||||
//图片删除操作
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = [];
|
||||
},
|
||||
|
||||
//获取vip数据
|
||||
getVipData(){
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/trainingClass/getVipBuyConfigList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.vipList = data.vipBuyConfigList.filter(item => item.type >= 4 && item.type <= 9);
|
||||
this.svipList = data.vipBuyConfigList.filter(item => item.type === 1 || item.type === 2);
|
||||
}
|
||||
});
|
||||
},
|
||||
//勾选vip
|
||||
handleCheckedVip(value){
|
||||
console.log('vip的值', value)
|
||||
},
|
||||
//勾选svip
|
||||
handleCheckedSvip(value){
|
||||
console.log('svip的值', value)
|
||||
},
|
||||
//勾选app
|
||||
handleCheckedApp(value){
|
||||
console.log('app的值', value)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" >
|
||||
::v-deep.custom-height {
|
||||
height: 370px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
height: 1px;
|
||||
}
|
||||
.general_editor {
|
||||
height: 420px;
|
||||
width: 1060px !important;
|
||||
}
|
||||
.editor_form {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.dialog_box {
|
||||
.el-form-item__content {
|
||||
width: calc(100% - 120px) !important;
|
||||
}
|
||||
.form_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 290px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-group .el-checkbox{
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.el-checkbox__label{
|
||||
padding-left: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.hufen_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
width: 70px;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-input{
|
||||
width: 90%;
|
||||
line-height: 34px;
|
||||
}
|
||||
.el-input__inner{
|
||||
width: 220px;
|
||||
height: 30px;
|
||||
line-height: 34px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.el-input__inner::placeholder {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.custom-flatpickr .el-range-input{
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
100
src/views/modules/reportList/trainingCourseList.vue
Normal file
100
src/views/modules/reportList/trainingCourseList.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<div class="block">
|
||||
|
||||
|
||||
<el-date-picker
|
||||
v-model="currentYear"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
value-format="yyyy" :picker-options="pickerOptions"
|
||||
placeholder="选择年份"
|
||||
@change="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="
|
||||
|
||||
handleYearChange();
|
||||
"
|
||||
>刷新</el-button
|
||||
>
|
||||
</el-form>
|
||||
|
||||
<FullYearCalendar :urlList="urlList" ref="refCalendar" :selectYear="Number(currentYear)" :marks="markedDates" v-if="currentYear" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FullYearCalendar from "./FullYearCalendarTrainingCourse.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urlList:{
|
||||
list:'/master/statistics/getTrainingToUserMonthTotal',
|
||||
export:'/master/statistics/getTrainingToUserMonthInfo',
|
||||
},
|
||||
currentYear: '',
|
||||
dataForm:{},
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
// 禁用今年以后的年份
|
||||
return time.getFullYear() > new Date().getFullYear()
|
||||
}
|
||||
},
|
||||
markedDates: {
|
||||
"2019-01-01": "red",
|
||||
"2019-02-14": "blue",
|
||||
"2019-03-12": "yellow",
|
||||
"2019-05-20": "blue",
|
||||
"2019-06-10": "yellow"
|
||||
}
|
||||
};
|
||||
},
|
||||
components: { FullYearCalendar },
|
||||
activated() {
|
||||
this.currentYear = new Date().getFullYear().toString();
|
||||
this.handleYearChange();
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleYearChange() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.refCalendar.init();
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .mod-config .el-table .el-table__cell {
|
||||
padding: 4px 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/deep/ .mod-config .el-table .cell,
|
||||
.el-table th div {
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/deep/ .el-form .el-form-item{
|
||||
margin-bottom:10px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user