New file |
| | |
| | | <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> |