lims_college/frontend_web/src/views/system/index/page.vue

<template>
  <d2-container>
    <template slot="header"
              style="padding: 5px;">
      <img class="page_logo"
           src="././image/logo_nmg.png"
           width="100%"
           height="115"
           style="margin:0px">
    </template>
    <el-table ref="multipleTable"
              :data="activities"
              border
              fit
              tooltip-effect="dark"
              style="width: 100%"
              @sort-change="orderby"
              height="100%">
      <!-- <el-table-column label="操作"
                       width="160px"
                       align="center"
                       fixed='right'>
        <template slot-scope="scope">
          <el-button size="mini"
                     title="编辑"
                     type="primary"
                     @click="informationedit(scope.row.id)"
                     icon="el-icon-edit"
                     circle></el-button>
          <el-button size="mini"
                     type="primary"
                     title="发布"
                     @click="publish(scope.row)"
                     style="margin-left:5px;"
                     icon="el-icon-s-promotion"
                     circle></el-button>
          <el-button size="mini"
                     type="danger"
                     title="删除"
                     @click="deleteinformation(scope.row)"
                     style="margin-left:5px;"
                     icon="el-icon-delete"
                     circle></el-button>

        </template>
      </el-table-column> -->
      <el-table-column prop="title"
                       fit
                       min-width="80px"
                       label="信息标题"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="content"
                       label="信息内容"
                       align="center"
                       min-width="160px"
                       show-overflow-tooltip></el-table-column>
      <!-- <el-table-column prop="status"
                       align="center"
                       min-width="40px"
                       label="状态"
                       show-overflow-tooltip
                       :formatter="formatStatus"></el-table-column> -->
      <el-table-column prop="createdtime"
                       align="center"
                       min-width="120px"
                       label="发布时间"
                       show-overflow-tooltip></el-table-column>
    </el-table>
    <!-- </el-card> -->

    <!-- </div> -->
    <template slot="footer">
      <el-pagination style="margin: -10px;"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="search.page.current"
                     :page-sizes="[10, 15, 20]"
                     :page-size="search.page.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="search.page.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>

import InformationApi from '@/api/information'
// import informationInfoDialog from './components/informationInfoDialog'
export default {
  name: 'informationIndex',
  components: {
    // informationInfoDialog
  },
  data () {
    return {
      dialogvisible: false,
      details: false,
      activities: [],
      informationId: -1,
      search: {
        title: '',
        status: 1,
        content: '',
        page: {
          total: 0,
          current: 1,
          size: 10
        }
      },
      status: [{
        key: '全部',
        value: -1
      },
      {
        key: '草稿',
        value: 0
      },
      {
        key: '已发布',
        value: 1
      }
      ],
      // 列表排序
      Column: {
        Order: '',
        Prop: ''
      }
    }
  },
  mounted () {
    this.initDatas()
  },
  methods: {
    formatStatus (row, column) {
      for (var i = 0; i < this.status.length; i++) {
        if (this.status[i].value == row.status) {
          return this.status[i].key;
        }
      }
    },
    initSearchInfo () {
      this.search = {
        Title: '',
        Status: -1,
        Content: '',
      }
    },
    //初始化分页分页对象
    initPageInfo () {
      this.search.page = {
        total: 0,
        current: 1,
        size: 10
      }
    },
    // 打开 添加弹窗
    openinformationadd () {
      this.$refs.informationDialog.dialogvisible = true
    },
    // 打开 编辑弹窗
    informationedit (informationId) {
      this.informationId = informationId
      this.$refs.informationDialog.dialogvisible = true
    },
    // 新增修改弹窗关闭 返回页面
    handleClose () {
      this.informationId = -1
      this.$refs.informationDialog.dialogvisible = false
      this.initPageInfo()
      this.initDatas()
      console.log("handleClose informationId" + this.informationId)
    },
    publish (information) {
      information.status = 1
      InformationApi.save(information)
    },
    // 初始化列表数据
    initDatas () {
      InformationApi.getList(this.search)
        .then(res => {
          this.activities = res.records
          this.search.page = res
        })
    },
    handleSizeChange (val) {
      this.search.page.size = val
      this.search.page.current = 1
      this.initDatas()
    },
    handleCurrentChange (val) {
      this.search.page.current = val
      this.initDatas()
    },


    deleteinformation (val) {
      let _this = this
      let params = {
        id: val.id
      }
      _this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        console.log(JSON.stringify(params))
        InformationApi.delete(params)
          .then(data => {
            _this.initDatas()
          })
          .catch(function (error) {
            console.log(error)
          })
      })
        .catch(() => { })
    },
    // 列表排序功能
    orderby (column) {
      if (column.order === 'ascending') {
        this.Column.Order = 'asc'
      } else if (column.order === 'descending') {
        this.Column.Order = 'desc'
      }
      this.Column.Prop = column.prop
      this.initDatas()
    },
    searchCommand (command) {
      if (command === 'search') {
        this.dialogvisible = true
      } else if (command === 'clear') {
        this.clearSearch()
      }
    },
    clearSearch () {
      this.initSearchInfo()
      this.initPageInfo()
      this.initDatas()
    }

  }
}
</script>

<style lang="scss">
.el-pagination {
  margin: 1rem 0 2rem;
  text-align: right;
}

.plab {
  font-size: 13px;
  color: #999;
}
</style>