BJ_web_developers / HSpark

  <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="1">
              <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="1" :offset="12">
              <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>详细记录</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"
          :pager-count="currentPage"

          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,

          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(){
          let 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>