szgb-book-web/src/views/exhibit/index.vue

<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="展览管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.name" style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getExhibit">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;" @click="$refs['addExhibit'].isShow = true,$refs['addExhibit'].type = 'add'">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :total="total"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorActivity(scope.row.id,'editor')">编辑</Button>
            <Poptip
              transfer
              confirm
              title="确认要删除吗？"
              @on-ok="deleteActivity(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>

      </xy-table>

    <addExhibit ref="addExhibit" @refresh="getExhibit"></addExhibit>
  </div>
</template>

<script>
import {index,destroy,toogle} from "@/api/exhibit"

import addExhibit from '@/views/exhibit/component/addExhibit'
import { Message } from 'element-ui'
export default {
  components:{
    addExhibit
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1,
        name:""
      },
      total:0,
      list:[],
      table:[
        {
          label:"展览名称",
          prop:'name',
          align:'left',
          width:240,
          fixed:'left'
        },
        {
          label:"展览类型",
          prop:'type',
          align:'center',
          width:120,
          formatter(value){
            return value==1?'陈列展览':'临时展览'
          }
        },
        {
          label:"展览状态",
          prop:'state',
          align:'center',
          width:80,
          customFn: (row) => {
            // return(
            //   <el-switch
            //     v-model={row.state}
            //     active-color="#13ce66"
            //     active-value={1}
            //     inactive-value={0}
            //     inactive-color="gray"
            //     on = {
            //       {
            //         ['change']: (e) => {
            //           this.changeState(e,row.id)
            //         }
            //       }
            //     }>
            //   </el-switch>
            // )
        
            if(row.state===1){
              return ( < div style = {
                {
                  background:'#cf995a',
                  padding:'0px 10px',
                  borderRadius:'5px',
                  color:'#fff'
                }
              } >进行中</div > )
            }else{
              return ( < div style = {
                {
                  background:'gray',
                  padding:'0 10px',
                  borderRadius:'5px',
                  color:'#fff'
                }
              } >已结束</div > )
            }
        
          }
        },
        {
          label:"开始时间",
          prop:'start_time',
          align:'center',
          width:180,
        },
        {
          label:"结束时间",
          prop:'over_time',
          align:'center',
                    width:180,
        },
        {
          label:"举办展厅",
          prop:'hall.name',
          align:'center',
          width:120,
        },
        {
          label:"容纳人数",
          prop:'member_sum',
          align:'center',
          width:100,
        },
        {
          label:"发布时间",
          prop:'release_time',
          align:'center',
          width:180,
        },
      ]
    }
  },
  methods: {
    async getExhibit(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex,
        name:this.select.name,
        sort_name:'state',
        sort_name_tow:'release_time',
        sort_type:"DESC",
        sort_type_tow:'DESC'
      })
      this.list = res.data
      this.total = res.total
    },

    pageChange(e){
      this.select.pageIndex = e
      this.getExhibit()
    },
    // changeState(e,id){
    //   console.log("e",e,id)
    //   toogle({id:id}).then(res => {
    //     Message({
    //       type:'success',
    //       message:'更改展览状态成功'
    //     })
    //     this.getExhibit()
    //   })
    // },
    deleteActivity(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除展览成功'
        })
        this.getExhibit()
      })
    },
    editorActivity(id,type){
      this.$refs['addExhibit'].id = id
      this.$refs['addExhibit'].type = type
      this.$refs['addExhibit'].isShow = true
    },
  },
  mounted() {
    this.getExhibit()
  }

}
</script>

<style scoped lang="scss">
</style>