welcomeRegister_web/src/components/fankuijilu/fankuijilu.vue

<template>
  <div>
    <el-row>
      <el-col :span="24" class="first-row">
        <div id="first-left">
          <div id="logo"></div>
          <div class="tag">反馈记录</div>
        </div>
      </el-col>
    </el-row>
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
    <el-row>
      <el-col :span="24" class="second-row">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字：" class="shuibiaoId">
            <el-input v-model="selectName" placeholder="请输入订单号或者姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="third-row">
        <!-- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" highlight-current-row>
          <el-table-column prop="id" label="学号" width="260" align="center"></el-table-column>
          <el-table-column prop="stuName" label="姓名" width="200" align="center"></el-table-column>
          <el-table-column prop="tel" label="联系方式" width="270"></el-table-column>
          <el-table-column prop="time" label="时间" width="280" align="center"></el-table-column>
          <el-table-column label="内容" width="340" id="content" align="center" widshow-overflow-tooltip>
            <el-popover placement="top-start" width="200" trigger="hover" slot-scope="scope"
              :content="scope.row.content">
              <div slot="reference">{{ scope.row.content.substr(0,10) }}....</div>
            </el-popover>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" id="state">
            <div slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">
              <el-tag :type="scope.row.state === '未处理' ? 'danger' : 'success'" disable-transitions>{{scope.row.state}}
              </el-tag>
            </div>
          </el-table-column>
        </el-table> -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :stripe='stripe' highlight-current-row>
          <el-table-column prop="id" label="学号" align="center"></el-table-column>
          <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="tel" label="联系方式"></el-table-column>
          <el-table-column prop="time" label="时间" width="200"></el-table-column>
          <el-table-column label="内容" id="content" align="center" widshow-overflow-tooltip>
            <el-popover placement="top-start" trigger="hover" slot-scope="scope"
              :content="scope.row.content">
              <div slot="reference">{{ scope.row.content.substr(0,10) }}....</div>
            </el-popover>
          </el-table-column>
          <el-table-column label="操作" align="center"id="state">
            <div slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">
              <el-tag :type="scope.row.state === '未处理' ? 'danger' : 'success'" disable-transitions>{{scope.row.state}}
              </el-tag>
            </div>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="table-footer">
          <div class="pages">
            <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="totalCount"
              @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="forth-row">
        <!-- 编辑对话框 -->
        <el-dialog title="" :visible.sync="editdialogFormVisible" width="540px" height="387px" top="0vh"
          class="my-dialog">
          <div id="center">
            <div id="logo-center"></div>
          </div>
          <div id="item-txt">
            <span class="item-text">是否处理成功？</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSelect">确 定</el-button>
            <el-button @click="cancelSelect">取 消</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        editdialogFormVisible: false, //弹框  
        selectName: '', //搜索内容
        tableData: [], //所有传入数据
        pageSize: 10, //每页数量
        totalCount: 0, //搜索总数
        index: 0, 
        stripe: true
      }
    },
    created: function() {
      this.user_info = JSON.parse(sessionStorage.getItem('usr_info'))
      this.user_token = this.user_info.token
      this.getTableData(this.$Api.fankui, 1)
    },
    methods: {
      //分页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.tableData = []
        this.getTableData(this.$Api.fankui, val)
      },
      //打开反馈操作页面
      handleEdit(index, row) {
        this.editdialogFormVisible = true
        this.index = index
        // console.log(index, row)
      },
      //确定处理反馈信息
      handleSelect() {
        this.editdialogFormVisible = false
        this.handleInfo(this.$Api.fankuiHandle + this.tableData[this.index].idNo)
      },
      //取消选择
      cancelSelect(){
        this.editdialogFormVisible = false
        this.$message.info("取消处理")
      },
      //搜索
      onSubmit() {
        // console.log(this.selectName)
        this.tableData = []
        this.getTableData(this.$Api.fankui, 1, this.selectName)
      },
      //获取反馈数据列表
      getTableData(url, index, keyword) {
        this.$axios.get(url + '?' + this.$qs.stringify({
          'curPage': index,
          'pageSize': this.pageSize,
          'keyword': keyword
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            'Author': 'codingliang',
            'admin_token': this.user_token
          }
        }).then(res => {
          // console.log(res)
          this.totalCount = res.data.data.totalCount
          for (var i = 0; i < res.data.data.list.length; i++) {
            var list = {}
            list.idNo = res.data.data.list[i].id
            list.id = res.data.data.list[i].feedbackPersonIdentify
            list.stuName = res.data.data.list[i].feedbackPersonName
            list.tel = res.data.data.list[i].feedbackPersonPhone
            list.time = res.data.data.list[i].publishTime
            list.content = res.data.data.list[i].feedbackInfo
            if (res.data.data.list[i].statu == 2) {
              list.state = '已处理'
            } else {
              list.state = '未处理'
            }
            this.tableData.push(list)
          }
          console.log(this.tableData)
        }).catch(err => {
          console.log(err)
        })
      },
      //修改信息
      handleInfo(url) {
        this.$axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        this.$axios.defaults.headers.common['admin_token'] = this.user_token;
        this.$axios.put(url)
          .then(res => {
            console.log(this.index)
            if (res.data.message == '执行成功') {
              // console.log(this.tableData[this.index].state)
              this.$message.success("处理成功")
              this.tableData[this.index].state = '已处理'
            }
          }).catch(err => {
            console.log(err)
          })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
    },
  }
</script>

<style scoped>
  @import url("fankuijilu.css");
</style>