src/views/myevaluate/index.vue

<template>
  <div>
    <div class="serch-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="7">
            <el-form-item label="问题类型">
              <el-select v-model="form.feedbackId" placeholder="请选择问题类型">
                <el-option v-for="item in problemTpyeSelectData" :label="item.name" :value="item.code"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="16" :sm="6" :md="3" :lg="3" :xl="3">
            <el-button type="primary" @click="queryBtn">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-card shadow="always" class="card-second-top">
      <div slot="header" class="clearfix" style="line-height: 32px;">
        <span style="float: left">详细记录</span>
        <el-button type="primary" size="small"  style="float: right" @click="dialogOpen">评价</el-button>
      </div>
      <el-table
        :data="orderData"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        style="width: 100%;"
        :show-overflow-tooltip="true">
        <el-table-column
          prop="feedbackCode"
          label="问题类型"
          :formatter="formatProblemType"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="suggestDesc"
          label="问题内容"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="提交时间"
          :formatter="formatCreateDate"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="userPhone"
          :formatter="formatserPhone"
          label="用户手机号">
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :pager-count="5"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog title="提交问题" :visible.sync="dialogFormVisible">
      <el-form :model="problemform" :rules="rules" ref="problemform">
        <el-form-item label="">
          <el-radio-group v-model="problemform.resource" size="">
            <el-radio border v-for="item in problemTpyeSelectData"  :label="item.code">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="问题内容" style="margin-top: 16px"  prop="desc">
          <el-input type="textarea" v-model="problemform.desc" style="width:400px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeDialog('problemform')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {queryFeedbackAndSuggestForPage,getFeedbackType,saveFeedbackAndSuggest} from '@/api/mysuggest.js';
  import {timeFormatter} from '@/utils/utils.js'
  export default {
    data() {
      return {
        form: {
          feedbackId:''
        },
        loading:false,
        problemTpyeSelectData:[],
        problemform: {
          resource: '1',
          desc:''
        },
        dialogFormVisible: false,
        total: 10,
        currentPage: 1,
        pagerCount:1,
        pageSize: 5,
        orderData: [],
        rules:{
          desc:[
            {required: true, message: '请输入问题内容', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 3 到 128 个字符', trigger: 'blur'}
          ]
         }
      }
    },
    methods: {
      queryBtn() {
        let that =this;
        that.loading=true;
        let userInfo = this.$store.state.user.userInfo;
         let req ={
           baseRequest:{
             pageNum:that.currentPage,
             pageSize:that.pageSize
           },
           feedbackCode:this.form.feedbackId,
           custId:userInfo.custId,
           sysCode:'1000'
         };
        queryFeedbackAndSuggestForPage(req).then(response =>{
            if(response.code='8888'){
              that.loading=false;
              that.orderData=response.data.rows;
              that.total=response.data.total;
            }
        });
      },
      /**格式化问题类型.*/
      formatProblemType:function(row, column, cellValue, index){
           let value="";
           if(cellValue == null || cellValue == '' ){
             return value;
           }else{
             this.problemTpyeSelectData.forEach(item =>{
               if(cellValue ==item.code){
                 value =item.name;
               }
             });
           }
           return value;
      },
      /**格式化时间*/
      formatCreateDate:function (row, column, cellValue, index) {
        return timeFormatter(cellValue,7)
      },
      /**问题类型查询*/
      getFeedbackType:function(){
        getFeedbackType().then(response =>{
            if(response.code='8888'){
              this.problemTpyeSelectData = response.data;
            }
        });
      },
      /**格式化手机号*/
      formatserPhone:function (row, column, cellValue, index) {
         if(cellValue == null || cellValue == undefined || cellValue == ''){
             return "-"
         }else{
           return cellValue.substr(0, 3)+"****"+cellValue.substr(7, 4)
         }
      },
      /**页面改变.*/
      handleCurrentChange:function (value) {
          this.currentPage=value;
          this.queryBtn();
      },
      dialogOpen:function(){
        this.problemform= {
          resource: '1',
            desc:''
        }
        this.dialogFormVisible=true;
      },
      /**提交.*/
      executeDialog:function(formName){
        let that =this;
        let userInfo = this.$store.state.user.userInfo;
        let feedbackCode=that.problemform.resource;
        let suggestDesc =that.problemform.desc;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let req ={
              custId:userInfo.custId,
              userPhone:userInfo.userPhone,
              feedbackCode:feedbackCode,
              suggestDesc:suggestDesc,
              sysCode:'1001'
            }
            saveFeedbackAndSuggest(req).then(response =>{
                if(response.code='8888'){
                  this.dialogFormVisible=false;
                  this.$message({
                    type: 'success',
                    message: '问题提交成功！'
                  });
                  that.queryBtn();
                }else{
                  this.$message({
                    type: 'error',
                    message: '问题提交失败！'
                  });
                }
            });
          }
        });
      }
    },
    mounted:function () {
      this.queryBtn();
      this.getFeedbackType();
    }
  }
</script>
<style lang="scss">
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
  .card-second-top{
    margin-top: 15px;
  }
  .el-card__header{
    padding: 10px 20px;
  }
  .el-radio{
    margin-right: 80px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
    margin-top: 15px;
  }
</style>