tenant-Platform/src/views/insurancePolicy/modules/underwriting.vue

<template>
  <div class="underwriting">
    <div class="title">
      <span class="text">影像信息</span>
      <el-popover :visible="imageTypeShow" placement="bottom-start" :width="600" trigger="click">
        <template #reference>
          <el-button plain type="primary" icon="Plus" size="small" @click="addImages">添加影像资料</el-button>
        </template>
        <imageTypeSelect ref="ImageTypeSelect" @close="handleImageTypeSelect"></imageTypeSelect>
      </el-popover>
    </div>
    <div class="images">
      <el-row :gutter="20">
        <el-col class="col-m-b-16" style="margin-bottom: 16px" :span="6" v-for="(item, index) in images" :key="index">
          <el-upload v-if="!item.fileUrl" :auto-upload="false" :show-file-list="false"@change="uploadImage($event, item)">
            <div class="upload-box">
              <div class="icon-box">
                <el-icon style="font-size: 20px"><Camera /></el-icon>
                <p>{{ item.label }}</p>
              </div>
            </div>
          </el-upload>
          <div class="fileInfo" v-else>
            <div class="file-box">
              <div class="btn-top">
                <img class="image-close" @click="deleteImage(item)" src="@/assets/images/close.png" />
              </div>
              <img class="file-img" :src="item.fileUrl" />
              <div class="btn-bottom">
                <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, item)" style="display: flex; align-items: center; justify-content: center; color: white">
                  <el-icon><Upload /></el-icon>重新上传
                </el-upload>
                <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(item)">
                  <el-icon><Download /></el-icon>下载资料
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="title">
      <span class="text">特别约定</span>
    </div>
    <el-table
      ref="ClauseRefs"
      :data="tableData"
      row-key="id"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="50" align="center" :selectable="selectable"></el-table-column>
      <el-table-column label="特约类型" prop="riskCode" align="center">
          <template #default="scope">
              <div v-if="scope.row.riskCode == '0507'">交强</div>
              <div v-if="scope.row.riskCode == '0510'">商业</div>
          </template>
      </el-table-column>
      <el-table-column label="特约名称" prop="clauseName" align="center"></el-table-column>
      <el-table-column label="编码" prop="clauseCode" align="center"></el-table-column>
      <el-table-column label="特别约定内容" prop="" width="300" align="center">
        <template #default="scope">
          <div v-if="!scope.row.edit" @click="() => { scope.row.edit = true }">{{ scope.row.clauseContent }}</div>
          <el-input type="textarea" v-model="scope.row.clauseContent" v-if="scope.row.edit"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button plain type="primary" @click="handleSubmit(false)">取消</el-button>
      <el-button type="primary" @click="handleSubmit(true)">提交核保</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage } from 'element-plus'
import imageTypeSelect from './imageTypeSelect.vue'

const ImageTypeSelect = ref()
const emit = defineEmits(['close'])

let images = ref([])

// 添加影像资料
let imageTypeShow = ref(false)
const addImages = () => {
  imageTypeShow.value = true
  nextTick(() => {
    ImageTypeSelect.value.initEditData(images.value)
  })
}
const handleImageTypeSelect = (data) => {
  imageTypeShow.value = false
  if(data&&data.list?.length>0) {
    images.value = data.list
  }
}

// 图片删除
const deleteImage = (item) => {
  item.fileUrl = ''
  item.imageId = ''
  item.fileName = ''
}

// 上传图片
const uploadImage = async (file, item) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if(code == 200) {
    let result: any = {...data}
    item.fileUrl = result.downloadUrl
    item.imageId = result.id
    item.fileName = result.fileName
  } else {
    ElMessage({
      message: msg,
      type: 'error'
    })
  }
}

// 下载
// 图片下载
const download = (url, name) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = url
}
const downloadImage = (item) => {
  download(item.fileUrl,item.fileName)
}

// 特别约定
let tableData = ref([])
let ClauseRefs = ref()
let clauseList = ref([])
const queryClauseData = () => {
    api.insurancePolicyApi.queryClauseData({
        order: {
            ordersNo: ordersNo.value
        }
    }).then((res: any) => {
        if(res.code == 200) {
            tableData.value = res.data.map((item) => {
                return {
                    ...item,
                    edit: false
                }
            })
            clauseList.value = tableData.value?.filter(item => item.clientStatus != '3')
            nextTick(() => {
                tableData.value?.forEach(item => {
                    if(item.clientStatus != '3') {
                        console.log(123123123123213123123213)
                        ClauseRefs.value.toggleRowSelection(item, true)
                    }
                })
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning'
            })
        }
    })
}
const selectable = (row) => !['2'].includes(row.clientStatus)
const selectionChange = (val) => {
    clauseList.value = val
}

// 提交核保
const handleSubmit = (bool) => {
  if(bool) {
    api.insurancePolicyApi.underwriting({
      order: {
        ordersNo: ordersNo.value
      },
      specialAppointmentsVos: [...clauseList.value]
    }).then((res: any) => {
      if(res.code === 200) {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
    emit('close', false)
  } else {
    emit('close', false)
  }
}

//数据交互
let ordersNo = ref('')
const initEdit = (data) => {
    console.log('核保的数据', data)
  ordersNo.value = data.ordersNo
  images.value = data.list.map(item => {
      return {
          ...item,
          fileUrl: item.fileUrl || item.downloadUrl
      }
  })
    if(ordersNo.value) {
        queryClauseData()
    }
}

defineExpose({
  initEdit
})

</script>

<style scoped lang="scss">
.underwriting{
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  .title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    .text{
      margin-right: 10px;
      border-left: 3px solid #00a0f4;
      padding-left: 10px;
    }
  }
  .upload-box{
    width: 208px;
    height: 130px;
    background: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-box{
      text-align: center;
      color: #999999;
      p{
        margin: 0 0;
        font-size: 14px;
      }
    }
  }
  .fileInfo{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    //padding: 2px 20px;
    border-radius: 5px;
    margin: 0 10px;
    //&:hover{
    //  background: #ccc;
    //}
    .fileName{
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fileBtn{
      display: flex;
      align-items: center;
      .btn-icon{
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
        &:hover{
          color: #00a0f4;
        }
      }
    }

    .file-box{
      position: relative;
      .btn-top{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        .image-close{
          display: block;
          width: 12px;
          height: 12px;
        }
      }
      .file-img{
        display: block;
        width: 208px;
        height: 130px;
        border-radius: 5px;
      }
      .btn-bottom{
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        height: 24px;
        width: 100%;
        background: url("@/assets/images/btn-bg.png") no-repeat;
        background-size: 100% 100%;
        .width-50{
          width: 50%;
        }
      }
    }

  }
  .footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>