<template>
|
<div class="app-container" style="opacity: 1;" >
|
<el-date-picker
|
v-model="calenderDate"
|
type="date"
|
clearable="false"
|
@change="clearChange"
|
|
placeholder="选择日期">
|
</el-date-picker>
|
<el-calendar
|
v-model="calenderDate">
|
|
<div slot="dateCell" slot-scope="{data}">
|
<div :class="data.isSelected ? 'is-selected' : ''">
|
<div class="day">
|
{{ data.day.split('-').slice(1).join('-') }}
|
{{ data.isSelected ? '✔️' : '' }}
|
</div>
|
</div>
|
</div>
|
|
</el-calendar>
|
|
|
|
|
<el-dialog :visible.sync="open" width="900px">
|
<div class="table-container">
|
<div style="padding-top:15px;padding-left:30px;padding-bottom:-20px"><span class="text">修改记录</span></div>
|
<el-divider/>
|
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" style="background: #FFEFF2; border-radius: 14px 14px 14px 14px;">
|
<el-table-column label="序号" sortable type="index" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" style="width: 20%" align="center"/>
|
|
<el-table-column label="被修改模块" prop="module" sortable style="width: 25%" align="center">
|
</el-table-column>
|
<el-table-column label="修改时间" prop="updateTime" sortable style="width: 25%" align="center"/>
|
<el-table-column label="修改人" prop="updater" sortable style="width: 25%" align="center"/>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
style="background: #FEF7FC;"
|
/>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getShouye} from "@/api/shouye";
|
|
export default {
|
name: "calendar",
|
|
data() {
|
return {
|
open: false,
|
total: 0,
|
// 表格数据
|
infoList: [],
|
calenderDate:new Date(),
|
productDate: '',
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
|
},
|
}
|
},
|
|
watch:{
|
calenderDate(newVal, oldVal) {
|
// 格式化 因为绑定的数组不是我们想用的，这里以2022-22-22这种格式作为演示
|
this.calenderDate = this.formatDate(newVal)
|
// 这里就是我们处理数据，调用接口的位置
|
this.allcalendar()
|
}
|
},
|
created() {
|
this.getList()
|
},
|
|
methods: {
|
clearChange(value) {
|
if (!value) {
|
this.$nextTick(() => {
|
this.calenderDate = new Date()
|
})
|
}
|
|
},
|
handleVisibleChange(visible) {
|
alert(visible)
|
if (!visible) {
|
// 当日期选择器关闭时设置时间为当天的00:00:00
|
this.date = this.setTimeToStartOfDay(new Date());
|
}
|
},
|
setTimeToStartOfDay(date) {
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
},
|
//隔行变色
|
tableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 == 0) {
|
return "statistics-warning-row1";
|
} else {
|
return "statistics-warning-row";
|
}
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id)
|
console.log(this.ids)
|
this.single = selection.length!=1
|
this.multiple = !selection.length
|
},
|
|
/** 查询角色列表 */
|
getList() {
|
this.loading = true;
|
// console.log(this.queryParams)
|
// listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
// console.log("111")
|
if(this.productDate!="")
|
this.queryParams.module = this.productDate
|
// alert(this.queryParams.module)
|
// console.log(this.queryParams)
|
getShouye(this.queryParams).then(response => {
|
// alert(123)
|
// console.log("222")
|
this.infoList = response.data.data;
|
// console.log(this.infoList)
|
this.total = response.data.total;
|
|
this.loading = false;
|
}
|
);
|
},
|
async allcalendar() {
|
this.productDate = this.calenderDate
|
const loading = this.$loading({
|
lock: true, //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
try {
|
|
this.open = true;
|
this.getList()
|
// 这里调用接口肯定是需要点击的日期的，书写自己的处理逻辑即可
|
// await this.haveDateInfo()
|
} catch (error) {
|
console.log(error)
|
}
|
loading.close()
|
},
|
// 格式化日期函数
|
formatDate(date) {
|
const value = new Date(date)
|
const year = value.getFullYear()
|
const month = (value.getMonth() + 1).toString().padStart(2, '0')
|
const day = value.getDate().toString().padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
|
|
}
|
}
|
|
</script>
|
<style scoped="">
|
.app-container{
|
background-color: #FEF7FC;
|
}
|
.el-table__row.statistics-warning-row {
|
background: #E0EEFE;
|
|
}
|
.el-table__row.statistics-warning-row1 {
|
background: #FFEFF2;
|
|
}
|
.text{
|
font-size: 16px;
|
line-height: 24px;
|
text-align: center;
|
}
|
.bkg_image img{
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
margin: -5px;
|
}
|
.bkg_image {
|
position: relative; /* 设置相对定位 */
|
}
|
.overlay {
|
position: absolute; /* 设置绝对定位 */
|
top: 10px;
|
left: 10px;
|
width: 100%;
|
height: 90%;
|
background-color: rgba(255, 255, 255, 0.5); /* 半透明颜色，可根据需求调整透明度 */
|
z-index: 1; /* 将表格置于图片上方 */
|
}
|
|
</style>
|
