fix: 页码修改

quanyawei

2024-04-11 0c8770383e986cc6e58b4a845a86aa0df15a67f8

 src/views/toCarryOutLegislativeReforms/delay/index.vue

@@ -1,12 +1,17 @@
<template>
  <div class="main">
    <div>
      <searchBar v-if="searchType" :search-type="searchType" @handleSearch="handleSearch" @handleAdd="handleOpenDialog(null,'add')" />
      <searchBar
        v-if="searchType"
        :search-type="searchType"
        @handleSearch="handleSearch"
        @handleAdd="handleOpenDialog(null,'add')"
      />
      <div class="tab">
        <el-table
          :data="tableData"
          border
          max-height=" 400px"
          size="mini"
          style="width: 100%"
          :header-cell-style="{
            color: '#101111', fontSize: '16px'
@@ -15,7 +20,7 @@
          <el-table-column
            type="index"
            label="序号"
            width="100px"
            width="60px"
            align="center"
          />
          <el-table-column
@@ -46,79 +51,116 @@
            label="整改类型"
          >
            <template slot-scope="scope">
              <p>  {{ dictObj.changeEnum[scope.row.changeType] }}</p>
              <div>  {{ dictObj.changeEnum[scope.row.changeType] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="extensionNum"
            width="60px"
            label="延期天数"
          >
            <template slot-scope="scope">
              <p>  {{ scope.row.extensionNum }}天</p>
              <div>  {{ scope.row.extensionNum }}天</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            width="80px"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state===40" type="success" size="medium ">
              <el-tag
                v-if="scope.row.state===40"
                type="success"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===50" type="danger" size="medium ">
              <el-tag
                v-if="scope.row.state===50"
                type="danger"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===9" type="info" size="medium ">
              <el-tag
                v-if="scope.row.state===9"
                type="info"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===20" type="warning" size="medium ">
              <el-tag
                v-if="scope.row.state===20"
                type="warning"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===10" type="warning" size="medium ">
              <el-tag
                v-if="scope.row.state===10"
                type="warning"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===30" type="warning" size="medium ">
              <el-tag
                v-if="scope.row.state===30"
                type="warning"
                size="medium "
              >
                {{ stateFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="上报单位上报人"
          >
            <template slot="header" slot-scope="scope">
              <p>上报单位</p>
              <p>上报人</p>
            </template>
            <template slot-scope="scope">
              <p> {{ scope.row.escalationName }}</p>
              <p> {{ updatUnitIdFormatter(scope.row) }}</p>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <p>操作人</p>
              <p>操作时间</p>
            <template slot="header">
              <div>上报单位</div>
              <div>上报人</div>
            </template>
            <template slot-scope="scope">
              <p>{{ scope.row.updateName }}</p>
              <p>{{ scope.row.updateTime }}</p>
              <div> {{ scope.row.escalationName }}</div>
              <div> {{ updatUnitIdFormatter(scope.row) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
          >
            <template slot="header">
              <div>操作人</div>
              <div>操作时间</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.updateName }}</div>
              <div>{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            width="100px"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'detail')">详情</el-button>
              <el-button v-if="scope.row.state===30" type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'approve')">审批</el-button>
              <el-button
                type="text"
                size="medium"
                @click="openWorkOrdinDialog(scope.row,'detail')"
              >
                详情
              </el-button>
              <el-button
                v-if="scope.row.state===30&&scope.row.isApprove===1"
                type="text"
                size="medium"
                @click="openWorkOrdinDialog(scope.row,'approve')"
              >
                审批
              </el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -128,27 +170,32 @@
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.PageSize"
          :page-size="pagination.pageSize"
          :total="pagination.totalCount"
          layout="sizes,prev, pager, next, jumper"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <workOrderInformation v-if="workOrdinDialogVisible" :dialog-data="dialogData" :visible.sync="workOrdinDialogVisible" @handeleSumit="handeleWorkSumbit" />
    <workOrderInformation
      v-if="workOrdinDialogVisible"
      :dialog-data="dialogData"
      :visible.sync="workOrdinDialogVisible"
      @handeleSumit="handeleWorkSumbit"
    />
  </div>
</template>

<script>
import workOrderInformation from '@/views/toCarryOutLegislativeReforms/components/workOrderInformation'
import searchBar from '@/views/toCarryOutLegislativeReforms/components/queryForm'
import searchBar from '@/views/toCarryOutLegislativeReforms/delay/componets/queryForm'
export default {
  components: {
    searchBar,
    workOrderInformation
  },
  data() {
  data () {
    return {
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
@@ -163,22 +210,27 @@
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 20, 30, 40],
        pageSizes: [10, 50, 100, 200],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      }
      },
      searchData: {}
    }
  },
  created() {
  created () {
    this.getUnitList()
    this.getContaminateList()
    this.handleSearch()
  },
  methods: {
    handeleWorkSumbit() {
    handeleWorkSumbit () {
      this.handleSearch()
    },
    handleSearch(obj) {
    handleSearch (obj) {
      this.searchData.isInvalid = 0
      if (obj) {
        this.searchData = obj
      }
      this.$request({
        url: '/allocationExtension/page',
        method: 'post',
@@ -193,19 +245,21 @@
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
    handleSizeChange (val) {
      // 改变每页显示的条数
      this.pagination.PageSize = val
      this.pagination.pageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.pagination.currentPage = 1
      this.handleSearch()
    },
    // 显示第几页
    handleCurrentChange(val) {
    handleCurrentChange (val) {
      // 改变默认的页数
      this.pagination.currentPage = val
      this.handleSearch()
      // console.log(val)
    },
    openWorkOrdinDialog(row, type) {
    openWorkOrdinDialog (row, type) {
      this.$request({
        url: '/allocationExtension/detail',
        method: 'get',
@@ -234,29 +288,29 @@
        }
      })
    },
    updatUnitIdFormatter(val) {
    updatUnitIdFormatter (val) {
      const data = this.unitList.find(item => item && item.unitId === val.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter(val) {
    unitIdFormatter (val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter(val) {
    polluteTypeFormatter (val) {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === val.polluteType)
      return data ? data.dataValue : ''
    },
    investigationTypeFormatter(val) {
    investigationTypeFormatter (val) {
      return this.dictObj.investigationEnum[val.investigationType]
    },
    stateFormatter(val) {
    stateFormatter (val) {
      return this.dictObj.allocationApproveEnum[val.state]
    },
    isInvalidFormatter(val) {
    isInvalidFormatter (val) {
      return this.dictObj.yesOrNo[val.isInvalid]
    },
    // 获取责任单位list
    getUnitList() {
    getUnitList () {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
@@ -265,7 +319,7 @@
        console.log(' JSON.stringify(this.unitList)', this.unitList)
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
@@ -280,18 +334,35 @@
<style scoped lang="scss">
.main{
    padding: 20px;
    padding-top: 0px;
    height: 100%;
    overflow: overlay;
}
.tab {
    margin-top: 10px;
    margin-top: 0px;
   /deep/ .el-tag{
      font-size: 16px;
    }
}
/deep/ .el-table__body-wrapper {
    overflow: scroll;
    position: relative;
    overflow-x: hidden;
    max-height: 400px;
}
// /deep/ .el-table__body-wrapper {
//     overflow: scroll;
//     position: relative;
//     overflow-x: hidden;
//     max-height: 400px;
// }
.pagina{
    margin-top: 10px;
    text-align: right;
}
/deep/ .el-table__row{
  font-size: 18px;
}
.el-pagination {
  padding: 0;
  .el-select{
    /deep/.el-input{
      margin:0;
    }
  }

}
</style>