colmo-admin/src/views/questionnaire/index.vue

<template>
  <div class="body" style="font-size:14px">
    <el-card class="box-card" shadow="never">
      问卷名称：
      <el-input v-model="name" style="width: 200px; margin-right: 20px" />
      <div style="float:right">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加问卷</el-button>
      </div>
    </el-card>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="问卷名" />
      <el-table-column prop="createDate" label="创建时间">
        <template slot-scope="scope">
          {{
            scope.row.createDate.substr(0, 10)
          }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-link :underline="false" style="margin-right:1em" type="primary">
            <router-link
              :to="{name: 'questionnaireEdit', query: { id: scope.row.queId }}"
            >编辑</router-link>
          </el-link>
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这个问卷吗？"
            @onConfirm="handleDelete(scope.row)"
          >
            <el-button slot="reference" type="text" style="color:red">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="false" id="qrcode" ref="qrcode" />
    <el-pagination
      v-show="Total!==0"
      style="float:right; margin:20px 0"
      :total="Total"
      :current-page="currentPage"
      :page-sizes="[4, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { getQuestionnaireList, deleteQuestionnaire } from '@/api/questionnaire'
export default {
  data() {
    return {
      name: undefined,
      tableData: [],
      //
      pageSize: 10,
      currentPage: 1,
      Total: 0 // 条目总数
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    // 改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val
      this.changePagination()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePagination()
    },
    // 改变分页组件重新查询数据
    changePagination() {
      getQuestionnaireList({
        name: this.name,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
      })
    },
    handleAdd() {
      this.$router.push({ name: 'questionnaireEdit' })
    },
    handleDelete(row) {
      deleteQuestionnaire(row.queId).then(() => {
        this.onSearch()
      })
    },
    onSearch() {
      getQuestionnaireList({
        name: this.name,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
        this.Total = res.data.total
        this.pageSize = res.data.size
      })
    },
    onReset() {
      this.name = undefined
      this.currentPage = 1
      this.pageSize = 10
      this.onSearch()
    }
  }
}
</script>
<style>
</style>