feige
2024-12-01 3db1df80349d2bb3e279026a8647790576578f0a
修改了bug
1个文件已修改
1个文件已添加
216 ■■■■■ 已修改文件
ruoyi-ui/src/views/calendar/index.vue 214 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
ruoyi-ui/vue.config.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
ruoyi-ui/src/views/calendar/index.vue
New file
@@ -0,0 +1,214 @@
<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>
ruoyi-ui/vue.config.js
@@ -37,7 +37,7 @@
      // detail: https://cli.vuewww.bendudu.comjs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
    //  target: `https://10.39.18.174:8080/`,
    // target: `https://192.168.1.5:8080/`,
    //  target: `https://192.168.1.5:8080/`,
      target: 'https://www.bendudu.com:8080/',
        changeOrigin: true,
        pathRewrite: {