|
|
@@ -1,73 +1,108 @@
|
|
|
<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 class="change">
|
|
|
+ <span class="common" :class="{ 'changeActive': changeIndex === index }" v-for="(item, index) in ['核保信息', '权益信息']" @click="changeIndex = index">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="changeIndex == 0">
|
|
|
+ <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>
|
|
|
- </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 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>
|
|
|
+ <div v-show="changeIndex == 1">
|
|
|
+ <el-button icon="plus" type="primary" @click="handleOpenEquities">选择权益</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="equitiesData"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ >
|
|
|
+ <el-table-column prop="a" label="权益名称"></el-table-column>
|
|
|
+ <el-table-column prop="a" label="权益类型"></el-table-column>
|
|
|
+ <el-table-column prop="a" label="接收人"></el-table-column>
|
|
|
+ <el-table-column prop="a" label="发放数量"></el-table-column>
|
|
|
+ <el-table-column prop="a" label="价格"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="total">
|
|
|
+ <div class="money">
|
|
|
+ <div class="totalItem">
|
|
|
+ <span>可用金额:</span>
|
|
|
+ <span>{{ useMoney }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="totalItem">
|
|
|
+ <span>已使用:</span>
|
|
|
+ <span>{{ usedMoney }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="totalItem">
|
|
|
+ <span>剩余金额:</span>
|
|
|
+ <span style="color: #FF8C21">{{ lastMoney }}</span>
|
|
|
+ </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>
|
|
|
<div class="footer">
|
|
|
<el-button plain type="primary" @click="handleSubmit(false)">取消</el-button>
|
|
|
<el-button type="primary" @click="handleSubmit(true)">提交核保</el-button>
|
|
|
</div>
|
|
|
+ <Equities :show="equitiesShow" @close="handleEquities"></Equities>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -234,6 +269,22 @@ const initEdit = (data) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+let changeIndex = ref(1)
|
|
|
+
|
|
|
+// 权益
|
|
|
+let equitiesData = ref([])
|
|
|
+let useMoney = ref(0)
|
|
|
+let usedMoney = ref(0)
|
|
|
+let lastMoney = ref(0)
|
|
|
+// 选择权益
|
|
|
+let equitiesShow = ref(false)
|
|
|
+const handleOpenEquities = () => {
|
|
|
+ equitiesShow.value = true
|
|
|
+}
|
|
|
+const handleEquities = (bool) => {
|
|
|
+ equitiesShow.value = bool
|
|
|
+}
|
|
|
+
|
|
|
defineExpose({
|
|
|
initEdit
|
|
|
})
|
|
|
@@ -245,6 +296,22 @@ defineExpose({
|
|
|
max-height: 400px;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
+ .change{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 20px 0;
|
|
|
+ .common{
|
|
|
+ padding: 6px 10px;
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .changeActive{
|
|
|
+ background: linear-gradient( 93deg, #4FCAFF 0%, #2B62FF 100%), #0083FF;
|
|
|
+ color: #ffffff;
|
|
|
+ border-color: #0083FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
.title{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -341,8 +408,21 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+ .total{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 20px;
|
|
|
+ .money{
|
|
|
+ width: 200px;
|
|
|
+ margin-right: 30px;
|
|
|
+ .totalItem{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.footer{
|
|
|
display: flex;
|
|
|
align-items: center;
|