aiccs/src/views/expelled/announcement/index.vue

<template>
  <div class="main-content m20">
    <div class="content-header body">
      <el-form ref="form" :model="searchForm.paramMap" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="业务号">
              <!-- <el-date-picker
                v-model="searchForm.paramMap.entity"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
              /> -->
              <el-input placeholder="请输入业务号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-button type="primary" @click="loadPage()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-row>
      <el-col :span="22" :offset="1">
        <el-table
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        >
          <el-table-column prop="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="bizNo" label="业务号" min-width="120" align="left" />
          <el-table-column prop="truth" :show-overflow-tooltip="true" label="除名决定事实" min-width="100" align="left" />
          <el-table-column prop="reason" :show-overflow-tooltip="true" label="除名决定的理由" min-width="180" align="left" />
          <el-table-column prop="law" :show-overflow-tooltip="true" label="除名决定的依据" min-width="180" align="left" />
          <el-table-column prop="result" :show-overflow-tooltip="true" label="除名决定的后果" min-width="80" align="left" />
          <el-table-column :show-overflow-tooltip="true" label="操作" align="left">
            <template #default="scope">
              <el-button type="text" size="mini" @click="openDialog(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="13">
        <el-pagination
          :disabled="loading"
          :page-size="pageParam.size"
          :total="pageParam.total"
          :page-sizes="[10, 20, 30]"
          layout="slot,total, sizes, prev, pager, next, jumper"
          :current-page="pageParam.current"
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
        >
          <span>
            第 {{ pageParam.current }} 页/共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.size - 1) / pageParam.size) : 1) }} 页
          </span>
        </el-pagination>
      </el-col>
    </el-row>
    <DismissalObjectionAppeal ref="DismissalObjectionAppeal" @refreshList="loadPage" />
  </div>
</template>

<script>
import DismissalObjectionAppeal from '@/views/expelled/announcement/components/除名公告详情.vue'
import { expelledAnnouncementList } from '@/api/除名公告.js'

export default {
  components: {
    DismissalObjectionAppeal
  },
  data() {
    return {
      loading: false,
      user: JSON.parse(sessionStorage.getItem('user')),
      searchForm: {
        paramMap: {
          uniscid: undefined
        }
      },
      orgMarketList: [],
      reasonList: [],
      sliceOptions: [],
      tableData: [],
      pageParam: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  computed: {},
  mounted() {
    this.loadPage()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.current = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.size = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      this.loading = true
      expelledAnnouncementList({
        current: this.pageParam.current,
        size: this.pageParam.size,
        entity: {
          ...this.searchForm.paramMap
        }
      }).then(res => {
        const list = []
        let i = 1
        const pageStart = (this.pageParam.current - 1) * this.pageParam.size
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    openDialog(row) {
      this.$refs.DismissalObjectionAppeal.openDialog(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 10pt;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 200px;
      font-size: $table-content-font-size;
    }

    .search-input-box_1 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .search-input-box_2 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_3 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px !important;
      font-size: $table-content-font-size;
    }

    .custom {
      width: calc(100% - 150px);
    }

    .search-input {
      cursor: pointer;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;
    text-align: right
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .btn-box {
    display: inline-block;
    padding-left: 10px;
  }
}

/deep/ .el-input__inner {
  height: 28px;
}
</style>