新增首页修改信息页面

Tcsm

2023-09-19 842712a3c827a286044bf300fffa34e34db4cea7

 ruoyi-ui/src/views/shouye/shouye.vue

@@ -1,15 +1,182 @@
<template>
  <div>
    xiugaixiangqing
  <div class="app-container" >
    <div class="bkg_image">
      <img src="../../assets/images/shouyeInfo.png">
      <div class="overlay">
        <div class="table-container">
          <div style="padding-top:15px;padding-left:30px"><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>
      </div>
    </div>
  </div>
</template>

<script>

import{getShouye} from "@/api/shouye";

export default {
  name: "index"
  name: "index",
  data() {
    return {
      // 遮罩层
      disabled: false,
      loading: true,
      formData:[],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 数据范围选项
      fot:[".jpg",".jif"],
      fileList:[],
      fileListOther:[],
      dsb:true,
      btn:false,
      formDat: {
        module: undefined,
        updateTime: undefined,
        updater: undefined
      },
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      typeOptions: [],

    };
  },
  created() {
    this.getList()
  },
  methods: {
    //隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "statistics-warning-row1";
      } else {
        return "statistics-warning-row";
      }
    },

    /** 查询角色列表 */
    getList() {
      this.loading = true;
      // console.log(this.queryParams)
      //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      // console.log("111")
      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;
        }
      );
    },

    getRowId(row)
    {
      return row.id
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      console.log(this.ids)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },


  },
}
</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>