webapp / GreenwayWeb

  <template>
    <div style="background-color:#f7f7f7;padding:10px 10px;">
      <div class="zhuti">
        <div style="height:58px;line-height:58px;">
          <div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
              style="color:#000000e6">客服服务</span></div>
        </div>
        <!-- 搜索 -->
        <!-- <div class="formSearch">

          <div>

            <el-button @click="setPei" style="background-color: #3F9B6A;color: #fff">报修流程配置

            </el-button>
          </div>
        </div> -->
        <div>

          <el-tabs v-model="xiangTab">
            <el-tab-pane label="报修记录" name="first">
              <el-table :data="
                  tableData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                  )
                " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                style="width: 100%">

                <!-- <el-table-column label="序号" width="auto" min-width="6%" align="center">

                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>

                </el-table-column> -->

                <el-table-column label="报修类型" prop="deviceType" width="auto" min-width="12%" />
                <el-table-column label="问题描述" prop="warrantyIssue" width="auto" min-width="12%" />
      <el-table-column label="设备名称" prop="deviceName" width="auto" min-width="12%" />
                <el-table-column label="备注" prop="memo" width="auto" min-width="12%" />
  
  
                <el-table-column label="申请时间" prop="applicationTime" width="auto" min-width="12%" />
                <el-table-column label="报修到期时间" prop="repairEndTime" width="auto" min-width="12%" />
                <el-table-column label="报修人" prop="repairman" width="auto" min-width="12%" />
      <!-- <el-table-column label="状态" prop="repairStatus" width="auto" min-width="12%" >
        <template slot-scope="scope">
              {{scope.row.repairStatus==0?'暂未派单':scope.row.repairStatus==1?'已派单':scope.row.repairStatus==2?'已完成':scope.row.repairStatus==3?'已过期':''}}
          </template>
        </el-table-column> -->
                <el-table-column label="操作" width="auto" min-width="12%">
                  <template slot-scope="scope">
                    <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                      查看
                    </div>
      <!-- <div class="tableBtn greens" @click="setPei(scope.row)">
                      报修流程配置
                    </div> -->
                    <div class="tableBtn greens" @click="delGuan(scope.row,1)">
                      删除
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="投诉记录" name="second">
              <el-table :data="
                  toushuData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                  )
                " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                style="width: 100%">

                <!-- <el-table-column label="序号" width="auto" min-width="6%" align="center">

                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>

                </el-table-column> -->

                <el-table-column label="投诉类型" prop="complaintType" width="auto" min-width="12%" />
                <el-table-column label="问题描述" prop="problemDescription" width="auto" min-width="12%" />
                <el-table-column label="备注" prop="remark" width="auto" min-width="12%" />
                <el-table-column label="申请时间" prop="applicationTime" width="auto" min-width="12%" />
  
                <el-table-column label="操作" width="auto" min-width="12%">
                  <template slot-scope="scope">
                    <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                      查看
                    </div>
                    <!-- <div class="tableBtn greens">
                      再次发布
                    </div> -->
                    <div class="tableBtn greens" @click="delGuan(scope.row,2)">
                      删除
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

          <!-- 搜索 -->

          <!-- <div style="margin-bottom:20px;">

              报修记录

          </div> -->

  
          <!-- 表格 -->

  
        </div>
  
        <div>
          <!-- 搜索 -->

          <!-- <div style="margin:20px 0;">

              投诉记录

          </div> -->

  
          <!-- 表格 -->

          <!-- 详情框  :visible.sync="detbox" -->
          <el-dialog :visible.sync="detbox" custom-class="dialog_css" style="padding: 0" width="50%" center
            :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
            <div style="
                background-color: #fafafa;
                border: 1px solid #eaeaea;
                height: 42px;
                width: 100%;
                margin-bottom: 20px;
                padding: 0 20px;
                line-height: 42px;
              ">
              详情
            </div>
            <div style="padding: 0 20px">
              <div style="
                  font-size: 14px;
                  margin-bottom: 20px;
                ">
                <div style="padding: 0 20px 20px 20px">
                  <el-form ref="ruleForm" :model="secondData" label-width="100px">
                    <el-form-item label="服务类型">
                      <div>{{secondData.deviceType || secondData.complaintType}}</div>
                    </el-form-item>
                    <el-form-item label="问题描述">
                      <div>{{secondData.warrantyIssue || secondData.problemDescription}}</div>
                    </el-form-item>
                    <el-form-item label="备注信息">
                      <div>{{secondData.warrantyIssue || secondData.remark}}</div>
                    </el-form-item>
                    <el-form-item label="设备名称">
                      <div>{{secondData.deviceName || '-'}}</div>
                    </el-form-item>
  
                    <el-form-item label="申请时间">
                      <div>{{secondData.applicationTime}}</div>
                    </el-form-item>
  
                  </el-form>
                </div>
              </div>
  
              <div style="
                  margin-top: 50px;
                  width: 99%;
                  padding: 10px;
                  display: flex;
                  justify-content: flex-end;
                ">
                <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                  @click="closeFn(1)">取消</el-button>
              </div>
            </div>
          </el-dialog>
  
  
        </div>
      </div>

      <el-dialog :visible.sync="setPeiShow" custom-class='bian_css' style="padding: 0;" width="45%"
        :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
        <div style="padding:20px;">
          <div style="font-size: 14px;padding-bottom: 20px;color: #000;">报修流程配置</div>
            <el-form label-position="right" ref="jibenFrom" :model="peiForm"  label-width="140px"
              style="position: relative">
              <el-form-item label="报修到期时间" class="grid-content bg-purple device-from" prop="repairEndTime">
                <el-date-picker style="width:240px;margin-right:5px" v-model="peiForm.repairEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"    type="datetime" prefix-icon="none" >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="报修人" class="grid-content bg-purple device-from" prop="repairman">
                <el-input v-model="peiForm.repairman" placeholder="请输入" style="margin-top:5px;" maxlength="20"/>
              </el-form-item>
              </el-form>
          <div style="padding-top:20px;display:flex;justify-content: flex-end;">
            <el-button  style="background-color: #3F9B6A;color: #fff"
              @click="peiCheck">确定</el-button>
            <el-button @click="setPeiShow = false"  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" class="buttonHover">取消</el-button>
  
          </div>
  
        </div>
  
      </el-dialog>

    </div>
  </template>
  
  <script>
    import {
      uploadUrl,
      token
    } from '@/utils/request'
    import {
  
      ReportGetAll,
      ReportDel,
      ComplaintGetAll,
      ComplaintDel,

      Reportedit

    } from '../../../api/kefuServeBao.js'
  
    export default {
      data() {
        return {

          xiangTab: 'first',

          detbox: false, // 详情
          edit: true, // 编辑
          action: uploadUrl, // 上传图片
          myHeaders: {
            'Authorization-admin': token
          },
          ggXin: false, // 新增
          formSel: {
          title:''
          },
          secondData: {
  
          },
          ruleForm: {
            title: '', //标题
            receiverMerchant: '',
            postType: '立即发布' ,
            content:'',
            status:'1',
            publishTime:''
          },
          currentPage: 1,
          total: 100,
          flag: false,
          pageSize: 10,
          tableData: [],
          toushuData:[],
          msgid: '',
          pageindex: {
            pageNumber: 1,
            pageSize: 10,
          },
          fabutype:'1',

          setPeiShow:false,
          peiForm:{
          repairEndTime:'',
          repairman:'',
          peiId:'',
          id:''
          }
  
  

        }
      },
  
      created() {
  
      },
      mounted() {
        this.getAll();
      },
      methods: {
        // 获取当前时间
        updateCurrentTime() {
          const now = new Date();
          const year = now.getFullYear();
          const month = (now.getMonth() + 1).toString().padStart(2, '0');
          const day = now.getDate().toString().padStart(2, '0');
          const hours = now.getHours().toString().padStart(2, '0');
          const minutes = now.getMinutes().toString().padStart(2, '0');
          const seconds = now.getSeconds().toString().padStart(2, '0');
  
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 查询全数据
        async getAll() {
        const baoxiu =   await ReportGetAll(this.pageindex)
         const toushu = await ComplaintGetAll(this.pageindex)
         this.toushuData = toushu.data.content
         this.tableData =  baoxiu.data.content
  
          this.total = this.tableData.length
        },
        // 编辑
        bianji() {
          if (this.edit) {
            this.edit = false;
          }
        },
  
        bianjilist(item) {
          this.detbox = true;
          this.secondData = item
          this.msgid = item.id
          if (this.edit) {
            this.edit = false;
          }
        },
  
        // 查询
        async onSubmit() {
          this.formSel.pageNumber = 1
          this.formSel.pageSize = 10
  
            this.formSel = {
                title:'',
              }
        },
  
        // 详情点击
         handleEditForm(item) {
          this.secondData = item
          this.detbox = true
          this.msgid = item.id
        },
  
        // 新增
        addbuss() {
          this.ruleForm = {
            title: '', //标题
            receiverMerchant: '',
            postType: '立即发布' ,
            content:'',
            status:'1',
            publishTime:''
          }
          this.ggXin = true;
        },
  
        handleCurrentChange(val) {
          this.currentPage = val;
        },
        handleSizeChange(val) {
          this.pageSize = val;
        },
        // 取消
        closeFn(val) {
          if (val == 1) {
            this.detbox = false;
            this.edit = true;
          } else {
            this.ggXin = false;
          }
        },
        //删除列表
       delGuan(item,index) {
  
                const h = this.$createElement;
                        this.$msgbox({
                          title: '消息',
                          message: h('p', null, [
                            h('span', null, '是否删除 '),
                          ]),
                          showCancelButton: true,
                          showClose:false,
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          customClass:'oe-dialog-btn',
                          beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                              if(index == 1){
                                ReportDel({id:item.id}).then(res=>{
                                   this.getAll()
                                  done();
                                })
                              }else{
                                ComplaintDel({id:item.id}).then(res=>{
                                   this.getAll()
                                  done();
                                })
                              }
  
                            } else {
                              done();
                            }
              }
              })
        },
  
        handleClick() {},
        // 上传
  
        handlePreview(file) {
          console.log(file);
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
  
        // 重置按钮
        resetting() {
          this.formSel = {
            title:''
          };
          this.getAll();
        },
        radioClick(tiem){
          this.ruleForm.time =''

        },
        setPei(item){
          this.peiForm = {
          repairEndTime:'',
          repairman:'',
          id:'',
          }
  
        this.peiForm.id= item.id
          this.setPeiShow = true
        },
       async peiCheck(){
           if (this.peiForm.repairEndTime) {
               this.peiForm.repairEndTime = new Date(this.peiForm.repairEndTime);
               }
         await Reportedit(this.peiForm)
         this.setPeiShow = false
         this.getAll()
  
        },

      }
    };
  </script>
  <style scoped>
    /deep/ .first-column-bg {
      background-color: #f4f4f5 !important;
    }
  
    .zhuti {
      padding: 0 20px 20px 20px;
      min-height: calc(100vh - 50px - 20px);
      background-color: #fff;
    }
  
    /deep/ .el-form-item__content {
      width: 80%;
    }
  

    .tableBtn {
      display: inline-block;
      margin-right: 10px;
    }

  
    .formSearch {
      display: flex;
      width: 100%;
      font-size: 14px;
      margin-bottom: 20px;
      justify-content: space-between;
    }
  
    .greens {
      color: #3f9b6a;
    }
  
    /deep/ .el-table__row {
      font-size: 14px;
      color: #000000e6;
      height: 42px;
    }
  
    .fenye {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      position: relative;
    }
  
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #3f9b6a;
    }
  
    :last-child {
      margin-bottom: 0;
    }
  
    .el-col {
      border-radius: 4px;
    }
  
    .bg-purple-dark {
      background: #99a9bf;
    }
  
    .bg-purple {
      /* background: #d3dce6; */
    }
  
    .bg-purple-light {
      background: #e5e9f2;
    }
  
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  
    /deep/ .bg-purple[data-v-0e3fe4ec] {
      background: #fff;
      height: 50px;
    }
  
    /deep/ .el-form--label-top .el-form-item__label {
      padding: 0;
    }
  
    .demo-input-suffix {
      display: flex;
      margin-right: 20px;
    }
  
    .pagination {
      text-align: right;
      line-height: 20px;
    }
  
    /deep/ .el-pagination__total {
      margin-top: 4px;
    }
  
  
    .dialog_css {
      padding: 0px;
    }
  
    .dialog_xin {
      padding: 0px;
    }
  
    /deep/.el-dialog__body {
      padding: 0px;
    }
  
    /deep/ .el-dialog__header {
      background-color: #fff;
      padding: 0;
    }
  
    /deep/.el-dialog__title {
      color: #000;
    }
  
    .el-row {
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
  
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 108px;
      height: 108px;
      line-height: 108px;
      /*text-align: center;*/
    }
  
    .avatar {
      width: 108px;
      height: 108px;
      display: block;
    }
  
    ::v-deep .el-tabs__item.is-active {
      color: #3f9b6a;
      opacity: 1;
    }
  
    /deep/ .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
  
  
  
    /deep/ .el-tabs__active-bar {
      background-color: #389865;
    }
  
    /deep/ .el-table_2_column_13 {
      font-weight: 100;
    }
  
    ::v-deep .el-input__inner:focus {
      border: #3f9b6a 1px solid;
    }
  
    ::v-deep .el-input__inner:hover {
      border: #3f9b6a 1px solid;
    }
  
    ::v-deep .el-select .el-input.is-focus .el-input__inner {
      border-color: #3f9b6a;
    }
  
    ::v-deep .el-form-item__label {
      font-weight: normal;
      font-size: 14px;
    }
  
  
    /* ::v-deep .el-steps .el-step__head.is-wait {
    background-color: red; /* 修改为你想要的颜色 */
  
    /* 修改未进行步骤的描述文字颜色 */
    ::v-deep .el-steps .el-step__description.is-wait {
      color: #999;
      /* 修改为你想要的颜色 */
    }
  
    /* 修改未进行步骤的图标颜色 */
    ::v-deep .el-steps .el-step__icon.is-text.is-wait {
      color: #999;
      /* 修改为你想要的颜色 */
    }
  
    /* 修改未进行步骤的边框色 */
    ::v-deep .el-steps .el-step__line.is-wait {
      border-color: #eee;
      /* 修改为你想要的颜色 */
    }
  
    ::v-deep .el-steps .is-process .el-step__line {
      background-color: #3f9b6a;
      /* 修改线的颜色 */
    }
  
    ::v-deep .el-steps .is-process .el-step__title {
      color: #fe7b6a;
      /* 修改进行中步骤的标题颜色 */
    }
  
    ::v-deep .el-steps .is-process .el-step__icon {
      color: #fff;
      /* 修改进行中步骤的图标颜色 */
      background: #3f9b6a;
      /* 修改进行中步骤图标的边框颜色 */
      border: 0px;
    }
  
    ::v-deep .el-step__icon-inner {
      line-height: 0;
    }
  
    /* 线条长度 */
    ::v-deep .el-step.is-vertical .el-step__line {
      top: 30px;
      height: 60px;
    }
  
  
  
    ::v-deep .moren {
      .el-input__inner {
        margin-top: 5px;
        padding: 0 20px;
      }
    }
  
    /deep/ .el-radio-group {
      margin-top: 11px;
    }
  
    /deep/ .el-radio__input.is-checked .el-radio__inner {
      border-color: #3f9b6a;
      background: #3f9b6a;
    }
  
    ::v-deep .el-col {
      padding: 0 !important;
    }
  
    /deep/ .el-radio-group {
      width: 100%;
    }
  
    .radio-right-side {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  
    /deep/ .radio-right-side .el-radio__label {
      display: flex;
      align-items: center;
    }
  
    /deep/ .radio-right-side .el-radio__inner {
      order: 1;
    }
  
    /deep/ .radio-right-side .el-radio__input {
      display: flex;
      order: 2;
    }
  
    /deep/ .radio-right-side {
      &:hover {
        color: #000;
      }
    }
  
    ::v-deep .el-dialog__wrapper {
      .dialog_css {
        margin-left: 20%;
        margin-top: 61px !important;
  
        .el-dialog__title {
          font-size: 16px !important;
          font-weight: 600;
          color: #000;
        }
      }
    }
  
    ::v-deep .setup {
      .el-steps {
        justify-content: center;
      }
    }
  
    ::v-deep .el-step__head.is-finish {
      color: #c0c4cc;
      border-color: #c0c4cc;
    }
  
    ::v-deep .el-step__title.is-finish {
      color: #c0c4cc;
    }
  
    ::v-deep .el-step__title.is-process {
      color: #c0c4cc;
    }
  
    ::v-deep .el-tabs {
      width: 100%;
    }
  
    ::v-deep .setup {
      .el-step__main {
        margin-left: -17px;
      }
  
      .el-step__title.is-process {
        color: #3f9b6a;
      }
  
    }
  
    ::v-deep .el-pagination__jump {
      margin-top: 5px;
    }
  
    ::v-deep .linClass {
      .el-dialog__header {
        padding: 20px 20px 10px;
        font-size: 14px;
      }
    }
  </style>
  <style lang="scss" scoped>
    ::v-deep .bian_css {
      .el-dialog__header {
        padding: 0px;
      }
  
    }
  
    ::v-deep .buttonHover:hover {
      color: #3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }
  
    ::v-deep .el-pagination__total {
      position: absolute;
      left: 10px;
    }
  
    ::v-deep .diaslog_zhong {
      .el-dialog__body {
        padding: 10px 20px 20px 20px;
      }
  
      .el-upload--picture-card {
        width: 130px;
        height: 130px;
      }
    }
  </style>