exhibition_service_admin/src/views/exhibitorManage/exhibitorList.vue

<script>
import Vue from 'vue'
import expoPopover from '@/views/components/expoPopover.vue'
import { getExpoList, deleteExpo, setExpoStatus } from '@/api/expo'
import { copyValue } from '@/utils'
export default Vue.extend({
  name: 'Index',
  components: {
    expoPopover
  },
  data() {
    return {
      expoList: [],
      current_page: 0,
      last_page: 1,
      total: 0,
      page_size: 20,
      searchWord: '',
      searchTimer: null,
      loading: false,
      popover_data: {},
      ossUrl: process.env.VUE_APP_OSS_DOMAIN
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    copyValue,
    search(event) {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.current_page = 1
        this.getList()
      }, 500)
    },
    edit(row) {
      if (row.form_count) {
        this.$notify({
          title: '提示',
          message: '此展会已经有人报名了，无法修改',
          type: 'warning'
        })
        return
      }
      this.$router.push({ path: '/exhibitor/edit/' + row.id })
    },
    copy(row) {
      this.$router.push({ path: '/exhibitor/add?copy=' + row.id })
    },
    setStatus(row) {
      this.loading = true
      setExpoStatus(row.id, row.status ? 0 : 1).then(res => {
        this.loading = false
        this.refresh()
      }).catch(err => {
        this.loading = false
      })
    },
    del(row) {
      this.$confirm('确定删除展商"' + row.expo_name + '"吗？此操作无法撤销！', '删除展商', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            deleteExpo(row.id).then(res => {
              this.loading = false
              this.refresh()
            }).catch(err => {
              this.loading = false
            })
          }
        }
      })
    },
    refresh() {
      if (this.loading || this.current_page > this.last_page) return
      this.loading = true
      getExpoList(this.current_page, this.page_size, this.searchWord).then(res => {
        this.current_page = res.data.current_page
        this.last_page = res.data.last_page
        this.total = res.data.total
        this.expoList = res.data.data
        this.loading = false
      })
    },
    getList() {
      if (this.loading || this.current_page >= this.last_page) return
      this.loading = true
      getExpoList(this.current_page, this.page_size, this.searchWord).then(res => {
        this.current_page = res.data.current_page
        this.last_page = res.data.last_page
        this.total = res.data.total
        this.expoList = res.data.data
        this.loading = false
      })
    },
    add() {
      this.$router.push({ path: '/exhibitor/add' })
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="head">
      <el-input v-model="searchWord" v-permission="'exhibitor.search'" prefix-icon="el-icon-search" placeholder="搜索展商名称" class="input" @input="search">
        <el-button v-if="searchWord" slot="append" icon="el-icon-delete" @click="searchWord='';search()" />
      </el-input>
      <el-button v-permission="'exhibitor.addList'" icon="el-icon-plus" type="primary" @click="add">添加展商</el-button>
    </div>
    <div class="body">
      <el-table v-loading="loading" :data="expoList" height="100%" class="table">
        <el-table-column
          label="展商名称"
          prop="expo_name"
          width="300"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <div :class="['status','type-'+scope.row.status]">
              {{ ['正常','禁用'][scope.row.status] }}
            </div>
          </template>
        </el-table-column>
        <<el-table-column
          label="预约观众"
          width="80"
          prop="form_count"
        />
        <el-table-column
          label="展会地点"
          prop="location"
          width="300"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="主办单位"
          prop="organizer"
          width="300"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="联系电话"
          prop="contact_phone"
          width="200"
        />
        <el-table-column
          label="联系邮箱"
          prop="contact_email"
          width="200"
        />
        <el-table-column
          label="开始时间"
          prop="start_date"
          width="200"
        />
        <el-table-column
          label="结束时间"
          prop="end_date"
          width="200"
        />
        <el-table-column
          label="最后编辑"
          prop="update_time"
          width="200"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="210"
        >
          <template slot-scope="scope">
            <expo-popover placement="left" trigger="click" :expo-id="''+scope.row.id">
              <span v-permission="'exhibitor.handelView'" class="button">预览</span>
            </expo-popover>
            <span v-permission="'exhibitor.handelEdit'" :class="['button',scope.row.form_count?'disable':'']" @click="edit(scope.row)">编辑</span>
            <span v-permission="'exhibitor.handelCopy'" class="button" @click="copy(scope.row)">复制</span>
            <span v-permission="'exhibitor.handelDisable'" class="button" @click="setStatus(scope.row)">{{ scope.row.status?'启用':'禁用' }}</span>
            <span v-permission="'exhibitor.handelDelete'" class="button del" @click="del(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination
        background
        :page-size="page_size"
        layout="total"
        :total="total"
      />
      <el-pagination
        v-permission="'exhibitor.handel'"
        background
        :page-size="page_size"
        layout="prev, pager, next"
        :total="total"
        @current-change="current_page=$event;getList()"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  @use '@/styles/variables.scss' as *;
  .main-box{
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-gap: 24px;
    .head{
      display: flex;
      .input{
        width: 50%;
        margin-right: auto;
      }
    }
    .body{
      height: 100%;
      position: relative;
      .table{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .button{
          cursor: pointer;
          padding: 0 5px;
          color: $menuActiveText;
          &.del{
            color: #DC2626;
          }
          &.disable{
            cursor: not-allowed;
            color: grey;
          }
        }
        .status{
          padding: 0 12px;
          border-radius: 32px;
          width: fit-content;
          &.type-0{
            background: #DCFCE7;
            color: #166534;
          }
          &.type-1{
            background: #FEE2E2;
            color: #991B1B;
          }
        }
      }
    }
    .foot{
      display: flex;
      justify-content: space-between;
    }
  }
</style>