<template> <div class="subPage"> <div class="system-table-search"> <div class="flex-h"> <div class="flex-item flex-h"> <el-button size="mini" type="success" @click="redirection('addCase')">新增案场</el-button> </div> <tableSearch value="请输入案场名称" @exportSearchKey="searchList"></tableSearch> </div> <div class="moreFilter"></div> </div> <div class="system-table-box"> <el-table :data="currentList" stripe style="width: 100%"> <el-table-column prop="CaseName" label="案场名称"> </el-table-column> <el-table-column prop="CaseAddress" label="地址"> </el-table-column> <el-table-column prop="Status" label="是否开放"> <template slot-scope="scope"> <span>{{scope.row.Status == 0 ? '未开放' : '已开放'}}</span> </template> </el-table-column> <el-table-column label="操作" width="200"> <template slot-scope="scope"> <el-button size="mini" type="warning" @click="editItem(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="success" @click="pplConcerned(scope.$index, scope.row)">相关人员</el-button> </template> </el-table-column> </el-table> </div> <el-pagination @current-change="handleCurrentChange" :current-page.sync="postData.page" :page-size="postData.pagesize" layout="prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> import tableSearch from '@/components/tableSearch/index' import { mapActions } from 'vuex' export default { name: '', data () { return { total: 0, postData: { // 表格搜索条件 name: '', // 案场名称 page: 1, // 当前页码 pagesize: 10, // 请求数据量 }, currentList: [] } }, components: { tableSearch, }, mounted () { this.$nextTick(function () { this.getList() }) }, methods: { ...mapActions([ 'updateSystemInfo', ]), pplConcerned (index, row) { // 相关人员 this.$router.push({name: 'pplConcerned', query: {id: row.CaseId}}) }, getList () { // 获取列表 this.$ajax(this.$api.caseManager.getCaseList.url, { method: this.$api.caseManager.getCaseList.method, queryData: this.postData }).then(res => { this.currentList = res.list this.postData.page = res.page this.total = res.pagenum }) }, redirection (pathName) { // 重定向 this.$router.push({ name: pathName }) }, handleCurrentChange (val) { // 跳转到分页 this.getList() }, editItem (index, row) { // 修改 // console.log(index, row) this.$router.push({ name: 'editCase', query: { id: row.CaseId } }) }, keyManager (index, row) { // 钥匙管理 console.log(index, row) }, searchList (key) { // 搜索列表 this.postData.name = key this.currentList = [] this.postData.page = 1 this.getList() } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> @import "page.scss"; </style>