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

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               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="row.claimSourceType === 1 ? 'primary' : 'success'">
          {{ row.claimSourceType === 1 ? '经销商' : '门店' }}
        </el-tag>
      </template>
      <template slot-scope="{row}" slot="auditStatus">
        <el-tag :type="getAuditStatusType(row.auditStatus)">
          {{ getAuditStatusText(row.auditStatus) }}
        </el-tag>
      </template>
    </avue-crud>

    <!-- 理赔详情对话框 -->
    <el-dialog title="理赔详情"
               :visible.sync="detailVisible"
               width="800px"
               append-to-body>
      <div v-if="claimDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="理赔编号">{{ claimDetail.claimNo }}</el-descriptions-item>
          <el-descriptions-item label="来源类型">
            <el-tag :type="claimDetail.claimSourceType === 1 ? 'primary' : 'success'">
              {{ claimDetail.claimSourceType === 1 ? '经销商' : '门店' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="来源名称">{{ claimDetail.sourceName }}</el-descriptions-item>
          <el-descriptions-item label="来源编码">{{ claimDetail.sourceCode }}</el-descriptions-item>
          <el-descriptions-item label="消费者姓名">{{ claimDetail.consumerName }}</el-descriptions-item>
          <el-descriptions-item label="消费者电话">{{ claimDetail.consumerPhone }}</el-descriptions-item>
          <el-descriptions-item label="轮胎编号">{{ claimDetail.tyreNo }}</el-descriptions-item>
          <el-descriptions-item label="轮胎规格">{{ claimDetail.tyreSpecs }}</el-descriptions-item>
          <el-descriptions-item label="购买日期">{{ claimDetail.purchaseDate }}</el-descriptions-item>
          <el-descriptions-item label="安装日期">{{ claimDetail.mountDate }}</el-descriptions-item>
          <el-descriptions-item label="行驶里程">{{ claimDetail.runMileage }} 公里</el-descriptions-item>
          <el-descriptions-item label="理赔金额">¥{{ claimDetail.claimAmount }}</el-descriptions-item>
          <el-descriptions-item label="理赔原因" :span="2">{{ claimDetail.claimReason }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <el-tag :type="getAuditStatusType(claimDetail.auditStatus)">
              {{ getAuditStatusText(claimDetail.auditStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ claimDetail.submitTime }}</el-descriptions-item>
        </el-descriptions>
      </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="previewImage(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 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="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="通过" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </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 src="./index.js">

</script>

<style lang="scss" scoped src="./index.scss">

</style>