feedbackPage.vue

<template>
  <div class="feedbackPage H100">
    <div class="head_box">
      <h6>意见建议及反馈</h6>
      <h4>意见建议及反馈</h4>

    </div>
    <div class="content_box">
      <div class="form_box h778px">
        <el-row v-if="0" class="input_box" :gutter="10">
          <el-col :lg="7" :xl="6">
            <span style="width: 88px;line-height: 32px">网点归属：</span>
            <el-select v-model="form.bankBranchId" style="width: calc(100% - 100px)" placeholder="请选择网点归属" clearable filterable @change="Search">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :lg="7" :xl="6">
            <span style="width: 88px;line-height: 32px">吐槽日期：</span>
            <el-date-picker v-model="form.callTime" style="width: calc(100% - 100px)" type="date" placeholder="选择日期" @change="Search"></el-date-picker>
          </el-col>
          <el-col :lg="8" :xl="10">
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-col>
          <el-col :lg="2" :xl="2">
            <el-button size="mini" type="primary"   class="btn_form_add r-float marl20"  @click="exportExcel">下载数据</el-button>
          </el-col>
        </el-row>

        <el-form :inline="true" :model="form" class="search-form">
          <el-form-item label="网点归属:"  v-if="roleId != 3">
            <el-select size="mini" v-model="form.bankBranchId" placeholder="请选择网点归属" clearable filterable @change="Search">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="吐槽日期:">
            <el-date-picker size="mini" v-model="form.callTime" type="date" placeholder="选择日期" @change="Search"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
          <el-form-item class="r-float">
            <el-button size="mini" type="primary"   class="btn_form_add"  @click="exportExcel">下载数据</el-button>
          </el-form-item>
        </el-form>


        <div class="scrool">
          <el-table :data="tableData" stripe style="width: 100%" @row-click="openDetails">
            <el-table-column prop="lineNumber" show-overflow-tooltip label="呼叫编号"></el-table-column>
            <el-table-column prop="phoneNumber" show-overflow-tooltip label="手机号码"></el-table-column>
            <el-table-column prop="bankBranchName" show-overflow-tooltip label="归属网点"></el-table-column>
            <el-table-column prop="createTime" label="吐槽日期" width="160">
              <template slot-scope="scope">
                {{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm:ss')}}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="content" label="吐槽建议"></el-table-column>
            <el-table-column prop="feedbackPersonName" show-overflow-tooltip label="反馈人"></el-table-column>
            <el-table-column prop="feedbackTime" label="反馈时间" width="160">
              <template slot-scope="scope">
                {{feedTime(scope.row.feedbackTime)}}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="feedbackInfo" label="反馈内容"></el-table-column>
          </el-table>
        </div>
        <el-pagination small background
                       @current-change="handleCurrentChange"
                       :current-page="page.currentPage"
                       :page-size="page.pageSize"
                       layout="prev, pager, next"
                       :total="page.total">
        </el-pagination>
      </div>
      <!--查看详情-->
      <el-dialog title="详情" :visible.sync="FormVisible">
        <div class="form_box">
          <el-form :model="listform" ref="listform">
            <el-form-item label="呼叫编号：" prop="lineNumber" :label-width="formLabelWidth">
              <span>{{listform.lineNumber}}</span>
            </el-form-item>
            <el-form-item label="手机号码：" prop="phoneNumber" :label-width="formLabelWidth">
              <span>{{listform.phoneNumber}}</span>
            </el-form-item>
            <el-form-item label="归属网点：" prop="bankBranchName" :label-width="formLabelWidth">
              <span>{{listform.bankBranchName}}</span>
            </el-form-item>
            <el-form-item label="吐槽日期：" prop="createTime" :label-width="formLabelWidth">
              <span>{{listform.createTime  | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
            </el-form-item>
            <el-form-item label="吐槽建议：" prop="content" :label-width="formLabelWidth">
              <span>{{listform.content}}</span>
            </el-form-item>
            <el-form-item label="反馈人：" prop="feedbackPersonName" :label-width="formLabelWidth">
              <span>{{listform.feedbackPersonName}}</span>
            </el-form-item>
            <el-form-item label="反馈时间：" prop="feedbackTime" :label-width="formLabelWidth">
              <span>{{feedTime(listform.feedbackTime)}}</span>
            </el-form-item>
            <el-form-item label="反馈内容：" prop="feedbackInfo" :label-width="formLabelWidth">
              <span>{{listform.feedbackInfo}}</span>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" type="primary" @click="FormVisible = false">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  const moment = require('moment')
  export default {
    data() {
      return {
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        FormVisible: false,
        listform: {
          lineNumber: '',
          phoneNumber: '',
          bankBranchName: '',
          createTime: '',
          content: '',
          feedbackPersonName: '',
          feedbackTime: '',
          feedbackInfo: '',
        },
        formLabelWidth: "100px",
        form: {
          bankBranchId: '',
          callTime: ''
        },
        tableData: [],
        options: '',
        roleId: '',
        bankBranchId: ''

      }
    },
    computed: {},
    mounted() {
      this.initData();
    },
    components: {},
    methods: {
      // 归属网点列表渲染
      getBranch() {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'bankBranchInfo/getBankBox?action=appInfoQuery&roleId=' + _this.roleId + '&bankId=' + _this.bankBranchId,
          authType: this.backToken
        }).then((res) => {
            _this.options = res.data;
          }, (error) => {
            console.log(error)
          }
        )
      },
      initData() {
        this.roleId = localStorage.getItem('roleId');
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.onSearch();
        this.getBranch();
      },
      feedTime(Time) {
        if (Time == '') {
          Time = '-';
        } else {
          Time = this.moment(Time).format('YYYY-MM-DD HH:mm:ss');
        }
        return Time;
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url: "demandInfo/getList?type=1",
          method: 'get',
          authType: this.backToken
        }, param).then((res) => {
          let data = res.data;
          vm.page.pageSize = data.size;
          vm.page.total = data.total;
          vm.tableData = data.records;
          vm.tableData.forEach((e, i) => {
            let Time = e.feedbackTime;
            vm.feedTime(Time);
          })
        }).catch(function (err) {
          console.log(err);
        })
      },
      // 分页
      handleCurrentChange(val) {
        let _this = this;
        _this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search() {
        let _this = this;
        _this.form.callTime = this.formatDate();
        _this.page.currentPage = 1;
        let param = {
          "_index": 1,
          "_size": _this.page.pageSize,
          'roleId': _this.roleId,
          'currentBankId': _this.bankBranchId,
          "bankBranchId": _this.form.bankBranchId,
          "callTime": _this.form.callTime,
        };
        this.getTableData(param);
      },
      // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          'roleId': _this.roleId,
          'currentBankId': _this.bankBranchId
        };
        for (let key in _this.form) {
          if (_this.form[key]) {
            searchObj[key] = _this.form[key];
          }
        }
        return searchObj;
      },
      //下拉框选择的时间转换
      formatDate() {
        let _this = this;
        let date = _this.form.callTime;
        if (date) {
          date = this.moment(date).format('YYYY-MM-DD HH:mm:ss');
          date = date.split(' ')[0];
        }
        return date;
      },
      openDetails(row) {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'demandInfo/getById?id=' + row.id,
          authType: this.backToken
        }).then((res) => {
            _this.listform = res.data;
          }, (error) => {
            console.log(error)
          }
        )
        this.FormVisible = true;
      },
      exportExcel() {
        if(!this.form.callTime || this.form.callTime==""){
          this.form.callTime = "";
        }else{
          this.form.callTime = this.form.callTime;
        }
        window.location.href = this.$baseUrl + 'demandInfo/demandInfoDownload?bankBranchId=' + this.form.bankBranchId +
          '&callTime=' + this.form.callTime + '&type=1&roleId=' + this.roleId + '&currentBankId=' + this.bankBranchId;
      },
    }
  }
</script>

<style lang="less">
  @import '../../style/common';

  .feedbackPage {
    .content_box {
      .input_box {
        width: 100%;
        min-width: 815px;
        margin-bottom: 30px;
        .el-input, .el-select {
          max-width: 272px;
          /*height:32px;*/
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          .el-input__inner {
            height: 32px;
          }
          .el-input__suffix {
            height: 110%;
          }
          .el-input--suffix .el-input__inner {
            padding-right: 0px;
          }
        }
        .btn_form_search, .btn_form_add {
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
        .el-input__icon.el-icon-date {
          line-height: 32px;
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .el-table {
          .el-table__header-wrapper {
            .el-table__header {
              .has-gutter tr th {
                background: rgba(250, 250, 250, 1);
              }

            }
          }
          .el-table__body-wrapper {
            width: 100%;
            table tbody tr:hover{
              cursor:pointer;
            }
            table tbody tr td {
              padding: 6px 0px;
              .cell {
                max-height: 94px !important;
                overflow: hidden !important;
              }
            }

          }
        }
      }

      /*!*弹窗*!*/
      .el-dialog {
        width: 600px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        margin-top: 10vh !important;
        .el-dialog__header {
          padding: 10px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.09);
          .el-dialog__headerbtn {
            top: 11px !important;
          }
        }
        .el-dialog__body {
          padding: 0px !important;
          border: 1px solid transparent;
          .form_box {
            padding-bottom: 40px;
            .el-form {
              margin-bottom: 20px;
              border: 1px solid transparent;
              .el-form-item {
                margin: 10px 50px 20px;
                .el-form-item__label {
                  line-height: 25px;
                }
                .el-form-item__content {
                  line-height: 25px;
                }
              }
              .el-input {
                width: 100%;
              }
            }
            .dialog-footer {
              border-top: 1px solid rgba(0, 0, 0, 0.09);
              padding-top: 8px;
              .el-button {
                margin-right: 10px;
                padding: 8px 16px;
              }
            }
          }
        }
      }
    }
  }


</style>