gubersail-platform-ui/src/views/claim/index.vue

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               v-model="form"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel">
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleDetail(scope.row)">详情
        </el-button>
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleAttachments(scope.row)">附件
        </el-button>
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleAudit(scope.row)">审核记录
        </el-button>
      </template>
      <template slot-scope="{row}" slot="claimSourceType">
        <el-tag :type="getClaimSourceTypeType(row.claimSourceType)">
          {{ getClaimSourceTypeLabel(row.claimSourceType) }}
        </el-tag>
      </template>
      <template slot-scope="{row}" slot="auditStatus">
        <el-tag :type="getAuditStatusType(row.auditStatus)">
          {{ getAuditStatusLabel(row.auditStatus) }}
        </el-tag>
      </template>
    </avue-crud>

    <!-- 理赔详情对话框 -->
    <el-dialog title="理赔详情"
               :visible.sync="detailVisible"
               width="80%"
               :close-on-click-modal="false"
               :modal="true"
               :append-to-body="true"
               :lock-scroll="false">
      <div v-if="claimDetail" class="claim-detail-container">
        <!-- 基本信息 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <label>理赔编号：</label>
                <span>{{ claimDetail.claimNo }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>来源类型：</label>
                <el-tag :type="getClaimSourceTypeType(claimDetail.claimSourceType)" size="small">
                  {{ getClaimSourceTypeLabel(claimDetail.claimSourceType) }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>审核状态：</label>
                <el-tag :type="getAuditStatusType(claimDetail.auditStatus)" size="small">
                  {{ getAuditStatusLabel(claimDetail.auditStatus) }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>来源名称：</label>
                <span>{{ claimDetail.sourceName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>来源编码：</label>
                <span>{{ claimDetail.sourceCode }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>提交时间：</label>
                <span>{{ claimDetail.submitTime }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 消费者信息 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>消费者信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>消费者姓名：</label>
                <span>{{ claimDetail.consumerName }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>消费者电话：</label>
                <span>{{ claimDetail.consumerPhone }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 轮胎信息 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>轮胎信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <label>轮胎编号：</label>
                <span>{{ claimDetail.tyreNo }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>轮胎规格：</label>
                <span>{{ claimDetail.tyreSpecs }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>行驶里程：</label>
                <span>{{ claimDetail.runMileage }} 公里</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>购买日期：</label>
                <span>{{ claimDetail.purchaseDate }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>安装日期：</label>
                <span>{{ claimDetail.mountDate }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 理赔信息 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>理赔信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>理赔金额：</label>
                <span class="amount">¥{{ claimDetail.claimAmount }}</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="detail-item">
                <label>理赔原因：</label>
                <span>{{ claimDetail.claimReason }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 附件列表对话框 -->
    <el-dialog title="理赔附件"
               :visible.sync="attachmentVisible"
               width="800px"
               append-to-body>
      <el-table :data="attachmentList" v-loading="attachmentLoading">
        <!-- 新增缩略图列 -->
        <el-table-column label="缩略图" width="80" align="center">
          <template slot-scope="scope">
            <div class="thumbnail-container">
              <!-- 图片缩略图 -->
              <img v-if="isImageFile(scope.row.fileName)"
                   :src="scope.row.fileUrl"
                   class="thumbnail-image"
                   style="height: auto !important;"
                   @click="previewImage(scope.row)"
                   @error="handleImageError"
                   alt="缩略图" />
              <!-- 视频缩略图 -->
              <div v-else-if="isVideoFile(scope.row.fileName)"
                   class="thumbnail-video"
                   @click="previewVideo(scope.row)">
                <i class="el-icon-video-play"></i>
              </div>
              <!-- 其他文件类型图标 -->
              <div v-else class="thumbnail-file">
                <i class="el-icon-document"></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="fileType" label="文件类型" width="100"></el-table-column>
        <el-table-column prop="fileSize" label="文件大小" width="120">
          <template slot-scope="scope">
            {{ formatFileSize(scope.row.fileSize) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="isImageFile(scope.row.fileName)"
                       type="text"
                       size="small"
                       @click="previewImage(scope.row)">预览</el-button>
            <el-button v-else-if="isVideoFile(scope.row.fileName)"
                       type="text"
                       size="small"
                       @click="previewVideo(scope.row)">播放</el-button>
            <el-button type="text" size="small" @click="downloadFile(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="attachmentVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog title="图片预览"
               :visible.sync="imagePreviewVisible"
               width="80%"
               :close-on-click-modal="false"
               append-to-body
               custom-class="image-preview-dialog"
               @close="closeImagePreview">
      <div class="image-preview-container">
        <el-image :src="previewImageUrl"
                  :preview-src-list="previewImageList"
                  :initial-index="currentPreviewIndex"
                  fit="contain"
                  class="preview-image">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
            <p>图片加载失败</p>
          </div>
        </el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeImagePreview">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 视频预览对话框 -->
    <el-dialog title="视频播放"
               :visible.sync="videoPreviewVisible"
               width="80%"
               :close-on-click-modal="false"
               append-to-body
               custom-class="video-preview-dialog"
               @close="closeVideoPreview">
      <div class="video-preview-container">
        <video v-if="previewVideoUrl"
               :src="previewVideoUrl"
               controls
               preload="metadata"
               class="preview-video"
               @error="handleVideoError">
          您的浏览器不支持视频播放。
        </video>
        <div v-else class="video-error">
          <i class="el-icon-video-camera"></i>
          <p>视频加载失败</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeVideoPreview">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 审核记录对话框 -->
    <el-dialog title="审核记录"
               :visible.sync="auditVisible"
               width="1000px"
               append-to-body>
      <div style="margin-bottom: 16px;">
        <el-button type="primary" size="small" @click="handleAddAudit">新增审核</el-button>
      </div>
      <el-table :data="auditList" v-loading="auditLoading">
        <el-table-column prop="auditResult" label="审核结果" width="100">
          <template slot-scope="scope">
            <el-tag :type="getAuditResultType(scope.row.auditResult)">
              {{ getAuditResultText(scope.row.auditResult) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditAmount" label="审核金额" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.auditAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="reasonDetail" label="审核说明" show-overflow-tooltip></el-table-column>
        <el-table-column prop="auditorName" label="审核人" width="100"></el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="150"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEditAudit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 审核记录新增/编辑对话框 -->
    <el-dialog :title="auditFormMode === 'add' ? '新增审核记录' : '编辑审核记录'"
               :visible.sync="auditFormVisible"
               width="600px"
               append-to-body>
      <el-form :model="auditForm" :rules="auditFormRules" ref="auditFormRef" label-width="120px">
        <el-form-item label="审核结果" prop="auditResult">
          <el-select v-model="auditForm.auditResult" placeholder="请选择审核结果" style="width: 100%;">
            <el-option :label="getAuditStatusLabel(AUDIT_STATUS.APPROVED, '通过')" :value="AUDIT_STATUS.APPROVED" />
            <el-option :label="getAuditStatusLabel(AUDIT_STATUS.REJECTED, '拒绝')" :value="AUDIT_STATUS.REJECTED" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核金额" prop="auditAmount">
          <el-input-number v-model="auditForm.auditAmount" :precision="4" :min="0" :max="999999.9999" style="width: 100%;" placeholder="请输入审核金额"></el-input-number>
        </el-form-item>
        <el-form-item label="审核说明" prop="reasonDetail">
          <el-input type="textarea" v-model="auditForm.reasonDetail" :rows="3" placeholder="请输入审核说明"></el-input>
        </el-form-item>
        <el-form-item label="审核人" prop="auditorName">
          <el-input v-model="auditForm.auditorName" placeholder="请输入审核人姓名"></el-input>
        </el-form-item>
        <el-form-item label="审核时间" prop="auditTime">
          <el-date-picker v-model="auditForm.auditTime" type="datetime" placeholder="请选择审核时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="反馈渠道">
          <el-select v-model="auditForm.feedbackChannel" placeholder="请选择反馈渠道" style="width: 100%;" clearable>
            <el-option label="电话" value="电话"></el-option>
            <el-option label="在线客服" value="在线客服"></el-option>
            <el-option label="邮件" value="邮件"></el-option>
            <el-option label="短信" value="短信"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈描述">
          <el-input type="textarea" v-model="auditForm.feedbackDesc" :rows="2" placeholder="请输入反馈描述"></el-input>
        </el-form-item>
        <el-form-item label="反馈时间">
          <el-date-picker v-model="auditForm.feedbackTime" type="datetime" placeholder="请选择反馈时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="申诉状态">
          <el-select v-model="auditForm.appealStatus" placeholder="请选择申诉状态" style="width: 100%;">
            <el-option label="无申诉" :value="0"></el-option>
            <el-option label="申诉中" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申诉结果" >
          <el-input v-model="auditForm.appealResult" placeholder="请输入申诉结果"></el-input>
        </el-form-item>
        <el-form-item label="申诉时间" >
          <el-date-picker v-model="auditForm.appealTime" type="datetime" placeholder="请选择申诉时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveAudit" :loading="auditFormLoading">确定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import claimMixin from './claimMixin';
import { AUDIT_STATUS, AUDIT_STATUS_OPTIONS } from '@/constants/claim';

export default {
  name: 'Claim',
  mixins: [claimMixin],
  data() {
    return {
      AUDIT_STATUS,
      AUDIT_STATUS_OPTIONS
    };
  },
  methods: {
    getAuditStatusLabel: function(value, fallback) {
      var opts = this.AUDIT_STATUS_OPTIONS || [];
      var fb = (typeof fallback === 'string') ? fallback : '';
      for (var i = 0; i < opts.length; i++) {
        var item = opts[i];
        if (item && item.value === value) {
          var label = item.label;
          return (typeof label === 'string' && label) ? label : fb;
        }
      }
      return fb;
    }
  }
}
</script>

<style lang="scss" scoped >
/* 理赔详情弹层样式 */
.claim-detail-container {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  font-weight: bold;
  color: #303133;
  font-size: 16px;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
  background-color: #fafafa;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  min-height: 32px;
}

.detail-item label {
  font-weight: 600;
  color: #606266;
  min-width: 100px;
  margin-right: 10px;
  flex-shrink: 0;
  line-height: 32px;
}

.detail-item span {
  color: #303133;
  word-break: break-all;
}

.amount {
  color: #E6A23C;
  font-weight: bold;
  font-size: 16px;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .claim-detail-container {
    max-height: 60vh;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-item label {
    min-width: auto;
    margin-bottom: 5px;
    margin-right: 0;
  }
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;

  .thumbnail-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.1);
    }
  }

  .thumbnail-video {
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background: #e6f7ff;
    }

    i {
      font-size: 20px;
      color: #1890ff;
    }
  }

  .thumbnail-file {
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 20px;
      color: #666;
    }
  }
}

.image-preview-container {
  text-align: center;

  .preview-image {
    max-width: 100%;
    max-height: 80vh; // 增加最大高度限制
    min-height: 200px; // 设置最小高度
  }

  .image-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #999;

    i {
      font-size: 40px;
      margin-bottom: 10px;
    }
  }
}

// 新增：图片预览对话框样式
.image-preview-dialog {
  .el-dialog {
    margin-top: 5vh !important;
    margin-bottom: 5vh !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__body {
    flex: 1;
    padding: 20px;
    overflow: auto;
  }

  .el-dialog__footer {
    flex-shrink: 0;
  }
}

.video-preview-dialog {
  .el-dialog {
    margin-top: 5vh !important;
    margin-bottom: 5vh !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__body {
    flex: 1;
    padding: 20px;
    overflow: auto;
  }

  .el-dialog__footer {
    flex-shrink: 0;
  }
}

.video-preview-container {
  text-align: center;

  .preview-video {
    max-width: 100%;
    max-height: 70vh;
    min-height: 300px;
    background: #000;
  }

  .video-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    color: #999;
    background: #f5f5f5;
    border-radius: 4px;

    i {
      font-size: 60px;
      margin-bottom: 15px;
    }

    p {
      font-size: 16px;
      margin: 0;
    }
  }
}

</style>