DSDSWeb/src/views/faq.vue

<template>
  <div class="containerBox faq bgf7f8fb dataSearch">
    <div class="tableContainer">
      <div class="tableSearch">
        <el-row>
          <el-col :span="6">
            question：
            <el-input v-model="search" placeholder="Please enter content" suffix-icon="el-icon-search" />
          </el-col>
          <el-col :span="8" :offset="10" align="right">
            <!-- <span class="btn" @click="reset">Reset</span>
          <span class="blueBtn btn" @click="init">Search</span> -->
            <el-button type="primary" icon="el-icon-search" @click="init">Search</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset">Reset</el-button>
          </el-col>

        </el-row>

      </div>
      <el-table v-loading="loading" :header-cell-style="{backgroundColor:'#edeff3',color:'#333'}" :data="tableData" border style="width: 100% ;" height="534">
        <el-table-column prop="question" label="question" width="400" :show-overflow-tooltip="true" />
        <el-table-column prop="answer" label="anser" />
      </el-table>
      <el-pagination
        class="mt20"
        background
        layout="total,sizes, prev, pager, next"
        :total="total"
        :page-sizes="[10, 20, 30]"
        :page-size="listQuery.pageSize"
        :current-page.sync="listQuery.currentPage"
        @current-change="currentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { faqConfigSearch
} from '@/api/releaseConfig'
import {
  validateSpecialChart
} from '@/utils/validate' // get token from cookie
export default {
  /* eslint-disable */
  name: 'Faq',
  props: {},
  data() {
    return {
      loading:false,
      search: '',
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      //当前行用户组名称
      editUserName: '',
      tableData: [
        // {
        //   answer: "",
        //   id: '',
        //   question: "",
        //   time: ""
        // }
      ],
    }
  },
  computed: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      this.listQuery.currentPage = 1
      this.getData()
    },
    async getData() {
      if(this.search.length && !validateSpecialChart(this.search)){
        this.$message({
            message: "Non-compliant！",
            type: "warning",
        })
        this.tableData=[];
        this.total=0;
        return;
      }
      this.loading = true
      let data={
        currentPage:this.listQuery.currentPage,
        pageSize:this.listQuery.pageSize,
        question:this.search.trim()
      }
      try {
        const res = await faqConfigSearch(data)
        if(res.code==200){
          if(res.data.faqConfigList){
            this.tableData=res.data.faqConfigList;
            this.total=res.data.count;
          }
        }
        // this.tableData=res.userGroupList;
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    addUser() {
      this.showUserForm = true
      this.userStatus = false
    },
    //编辑用户组
    handleDetail(row) {
      // this.editUserName=row.qq;
      // this.showUserForm = true
      // this.userStatus = true
    },
    //重置搜索框
    reset() {
      // this.listQuery.currentPage= 1;
      this.search = ''
      // this.init()
    },
    // 分页
    currentChange(item) {
      this.listQuery.currentPage = item
      this.getData()
    },
    handleSizeChange(item) {
      this.listQuery.pageSize = item
      this.getData()
    }
  }
}
</script>

<style scoped>
.dataSearch{
  padding:20px;
}
.tableSearch .el-input {
    width: 69%;
}
</style>