foton-laws-system-front/src/pages/regulatoryRepository/information/index.vue

<comment>
  # 动态信息
</comment>
<template>
  <div class="information">
    <div class="headBtn search-area">
<!--      <span class="back" title="返回">-->
<!--        <i class="el-icon-back" @click="back"></i>-->
<!--      </span>-->
      <div class="left">
        <el-form :model="search" inline class="label-input-form">
          <el-form-item label="标题" prop="msgTitle" class="search-item search-item-last">
            <el-input v-model="search.msgTitle" clearable  placeholder="根据标题查找"/>
          </el-form-item>
          <el-form-item class="search-item btn-box">
            <el-button
              icon="el-icon-search"
              type="primary"
              class="common-button-primary"
              round
              @click="tableData"></el-button>
          </el-form-item>
          <el-form-item class="search-item btn-box">
            <el-button
              class="common-button-default"
              icon="el-icon-refresh-left"
              round
              @click="resetSearch"></el-button>
          </el-form-item>
        </el-form>
      </div>
<!--      <span class="more" @click="moreClick">更多</span>-->
      <div class="more">
        <el-button
          type="primary"
          class="common-button-primary"
          round
          v-btn-permission="'4YZCT6DE3QJZNGL7EMG7'"
          @click="moreClick">
          更多
        </el-button>
      </div>
    </div>
    <div class="container">
      <loading :loading="loading">数据获取中</loading>
      <el-table
        :data="msgList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        height="100%"
        :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
         fontWeight: 'bold', height: '48px'}"
        ref="selection"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          align="center">
          <template slot-scope="scope">
            <a @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.title }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容"
          align="center">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center">
        </el-table-column>
      </el-table>
      <pagination :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'information',
  components: {
  },
  data () {
    return {
      total: 0,
      page: 1,
      pageSize: this.$store.getters.userInfo.configContent,
      msgList: [],
      loading: false,
      search: {
        msgTitle: ''
      }
    }
  },
  props: {
  },
  watch: {
  },
  methods: {
    pageChange (page) {
      this.page = page
      this.tableData()
    },
    // 分页每页显示数改变后方法
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.tableData()
    },
    // 详情页
    handlePreview (item) {
      this.$store.commit('setDetailMap', this.$route.path)
      this.$router.push({
        name: 'informationIndex2',
        query: {
          id: item.id
        }
      })
    },
    // 重置
    resetSearch () {
      this.search.msgTitle = ''
      this.tableData()
    },
    tableData () {
      this.loading = true
      let itemsPage = {}
      itemsPage.page = 1
      itemsPage.pageSize = 10
      itemsPage.title = this.search.msgTitle
      this.$http.get('lawss/sarNotice/getTenList', itemsPage, {
        _this: this
      }, res => {
        this.loading = false
        if (res.ok) {
          // this.msgList = res.data.list
          let list = res.data.list
          list.sort(function (a, b) {
            return b.createTime - a.createTime
          })
          this.msgList = list
          this.total = this.msgList.length
        }
      }, e => {
      })
    },
    back () {
      // alert(0)
      // this.$router.push('/dynamics')
      if (this.$store.state.detailMap !== '') {
        this.$router.push(this.$store.state.detailMap)
        this.$store.commit('setDetailMap', '')
      } else {
        let lastPathList = this.$store.getters.getLastDetailMap
        let lastPath = lastPathList[lastPathList.length - 1]
        this.$router.push(lastPath)
        lastPathList.pop(1)
        this.$store.commit('setLastDetailMap', JSON.stringify(lastPathList))
      }
    },
    moreClick () {
      this.$store.commit('setDetailMap', this.$route.path)
      this.$router.push('/informationMore')
    },
    testa () {
      var arr = [
        {
          name: '1'
        },
        {
          name: '2'
        }
      ]
      var newArr = []
      // defaultData
      for (var a = 0; a < arr.length; a++) {
        var json = {}
        json.text = arr[a].name
        newArr.push(json)
      }
      console.log(newArr);
    }
  },
  computed: {
  },
  mounted () {
    this.testa()
    this.tableData()
  }
}
</script>

<style lang="less">
  @import '~@/assets/styles/mixins';
  @import '~@/assets/styles/style';
  .information{
    height: 100%;
    display: flex;
    flex-direction: column;
    .headBtn{
      height: 50px;
      background-color: #FFFFFF;
      /deep/.more {
        cursor: pointer;
        color: #12508e;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        padding: 20px;
      }
    }
    .container{
      //height: calc(~'100% - 50px - 56px');
      display: flex;
      flex-direction: column;
      position: relative;
      flex: auto;
      .pagination {
        position: static;
        /deep/ .pagination-slot {
          padding: 0;
        }
      }
    }
  }
</style>