exhibition_service_admin/src/views/preRegManage/list.vue

<script>
import Vue from 'vue'
import { getFormList, setFormStatus, deleteForm } from '@/api/form'
export default Vue.extend({
  name: 'Index',
  data() {
    return {
      formList: [],
      current_page: 0,
      last_page: 1,
      total: 0,
      page_size: 20,
      searchWord: '',
      searchTimer: null,
      loading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleCreate() {
      this.$router.push({ path: '/preRegister/add' })
    },
    search(event) {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.current_page = 1
        this.getList()
      }, 500)
    },
    edit(row) {
      if (row.is_use) {
        this.$notify({
          title: '提示',
          message: '此表单已经发布，无法修改',
          type: 'warning'
        })
        return
      }
      this.$router.push({ path: '/preRegister/edit/' + row.id })
    },
    copy(row) {
      this.$router.push({ path: '/preRegister/add?copy=' + row.id })
    },
    setStatus(row) {
      this.loading = true
      setFormStatus(row.id, row.status ? 0 : 1).then(res => {
        this.loading = false
        this.refresh()
      }).catch(err => {
        this.loading = false
      })
    },
    del(row) {
      if (row.is_use) {
        this.$notify({
          title: '提示',
          message: '此表单已经发布，无法修改',
          type: 'warning'
        })
        return
      }
      this.$confirm('确定删除表单"' + row.template_name + '"吗？此操作无法撤销！', '删除表单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            deleteForm(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
      getFormList(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.formList = res.data.data
        this.loading = false
      })
    },
    getList() {
      if (this.loading || this.current_page >= this.last_page) return
      this.loading = true
      getFormList(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.formList = res.data.data
        this.loading = false
      })
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="head">
      <el-input v-model="searchWord" v-permission="'preReg.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="'preReg.creat'" icon="el-icon-plus" type="primary" @click="handleCreate">创建表单</el-button>
      <!--      <el-button icon="el-icon-copy-document">批量复制</el-button>-->
    </div>
    <div class="body">
      <el-table v-loading="loading" :data="formList" height="100%" class="table">
        <el-table-column
          :show-overflow-tooltip="true"
          label="表单名称"
          prop="template_name"
          width="300"
        />
        <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
          :show-overflow-tooltip="true"
          label="表单描述"
          prop="description"
        />
        <el-table-column
          label="最后编辑"
          prop="update_time"
          width="200"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="200"
        >
          <template slot-scope="scope">
            <span v-permission="'preReg.handelEdit'" :class="['button',scope.row.is_use?'disable':'']" @click="edit(scope.row)">编辑</span>
            <span v-permission="'preReg.handelCopy'" class="button" @click="copy(scope.row)">复制</span>
            <span v-permission="'preReg.handelDisable'" class="button" @click="setStatus(scope.row)">{{ scope.row.status?'启用':'禁用' }}</span>
            <span v-permission="'preReg.handelDelete'" :class="['button','del',scope.row.is_use?'disable':'']" @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="'preReg.changePage'"
        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{
      position: relative;
      height: 100%;
      .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>