|
|
@@ -2,19 +2,34 @@
|
|
|
<div class="insuranceSelect">
|
|
|
<div class="insuranceList">
|
|
|
<div class="insuranceLeft">
|
|
|
- <div class="insuranceItem" v-for="(item, index) in insuranceTypeList" @click="handleType(item, index)">
|
|
|
- <span class="checkIcon" :class="{ 'active': item.checked }">
|
|
|
+ <div
|
|
|
+ class="insuranceItem"
|
|
|
+ v-for="(item, index) in insuranceTypeList"
|
|
|
+ @click="handleType(item, index)"
|
|
|
+ >
|
|
|
+ <span class="checkIcon" :class="{ active: item.checked }">
|
|
|
<el-icon><Select /></el-icon>
|
|
|
</span>
|
|
|
<span>{{ item.kindName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-divider direction="vertical" style="height: 100%;"></el-divider>
|
|
|
- <div class="insuranceRight" v-show="choiceItem.id === item.id" v-for="(item, index) in insuranceTypeList">
|
|
|
- <p class="account" :class="{'active': sub.checked}" v-for="sub in item.options" @click="handleSubType(item, sub, index)">{{ sub.label }}</p>
|
|
|
+ <el-divider direction="vertical" style="height: 100%"></el-divider>
|
|
|
+ <div
|
|
|
+ class="insuranceRight"
|
|
|
+ v-show="choiceItem.id === item.id"
|
|
|
+ v-for="(item, index) in insuranceTypeList"
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ class="account"
|
|
|
+ :class="{ active: sub.checked }"
|
|
|
+ v-for="sub in item.options"
|
|
|
+ @click="handleSubType(item, sub, index)"
|
|
|
+ >
|
|
|
+ {{ sub.label }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="footer" >
|
|
|
+ <div class="footer">
|
|
|
<el-button plain @click="handleCancel">取消</el-button>
|
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
</div>
|
|
|
@@ -22,25 +37,25 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import api from '@/api'
|
|
|
+import api from "@/api";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
|
|
|
// emits
|
|
|
-const emits = defineEmits(['close'])
|
|
|
+const emits = defineEmits(["close"]);
|
|
|
|
|
|
// 方案类型
|
|
|
-let insuranceType = ref(null)
|
|
|
+let insuranceType = ref(null);
|
|
|
|
|
|
// 当前选择的险种
|
|
|
-let choiceItem = ref({})
|
|
|
+let choiceItem = ref({});
|
|
|
// 初始化险种数据
|
|
|
-let insuranceTypeList = ref([])
|
|
|
-let typeList = ref([])
|
|
|
+let insuranceTypeList = ref([]);
|
|
|
+let typeList = ref([]);
|
|
|
const handleType = (item, index) => {
|
|
|
- choiceItem.value = item
|
|
|
-}
|
|
|
+ choiceItem.value = item;
|
|
|
+};
|
|
|
// 投保金额选择
|
|
|
-const handleSubType =( item, sub, index) => {
|
|
|
+const handleSubType = (item, sub, index) => {
|
|
|
// if(insuranceType.value === 1) {
|
|
|
// item.options.forEach(a => {
|
|
|
// a.checked = false
|
|
|
@@ -52,113 +67,114 @@ const handleSubType =( item, sub, index) => {
|
|
|
// let bool = item.options.some(a => a.checked)
|
|
|
// item.checked = bool
|
|
|
// }
|
|
|
- item.options.forEach(a => {
|
|
|
- a.checked = false
|
|
|
- })
|
|
|
- sub.checked = true
|
|
|
- item.checked = true
|
|
|
-}
|
|
|
+ item.options.forEach((a) => {
|
|
|
+ a.checked = false;
|
|
|
+ });
|
|
|
+ sub.checked = true;
|
|
|
+ item.checked = true;
|
|
|
+};
|
|
|
|
|
|
// 取消
|
|
|
const handleCancel = () => {
|
|
|
- let list = [...insuranceTypeList.value]
|
|
|
- let checkedList = list.filter(a => a.checked)
|
|
|
- emits('close', {
|
|
|
- list: checkedList
|
|
|
- })
|
|
|
-}
|
|
|
+ let list = [...insuranceTypeList.value];
|
|
|
+ let checkedList = list.filter((a) => a.checked);
|
|
|
+ emits("close", {
|
|
|
+ list: checkedList,
|
|
|
+ });
|
|
|
+};
|
|
|
// 保存
|
|
|
const handleConfirm = () => {
|
|
|
- let list = [...insuranceTypeList.value]
|
|
|
- let checkedList = list.filter(a => a.checked)
|
|
|
- emits('close', {
|
|
|
- list: checkedList
|
|
|
- })
|
|
|
-}
|
|
|
+ let list = [...insuranceTypeList.value];
|
|
|
+ let checkedList = list.filter((a) => a.checked);
|
|
|
+ emits("close", {
|
|
|
+ list: checkedList,
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
// 修改数据
|
|
|
const initEditData = (data, type) => {
|
|
|
- console.log('险种已选的数据', data)
|
|
|
- insuranceType.value = type
|
|
|
+ console.log("险种已选的数据", data);
|
|
|
+ insuranceType.value = type;
|
|
|
api.projectApi.getBusinessInsurance().then((res: any) => {
|
|
|
- if(res.code == 200) {
|
|
|
- if(res.data&&res.data.length>0) {
|
|
|
- choiceItem.value = res.data[0]
|
|
|
- res.data.forEach(item => {
|
|
|
- item.checked = false
|
|
|
- item.options.forEach(sub => {
|
|
|
- sub.checked = false
|
|
|
- })
|
|
|
- })
|
|
|
- typeList.value = JSON.parse(JSON.stringify(res.data))
|
|
|
- if(data && data.length > 0) {
|
|
|
- data.forEach(item => {
|
|
|
- typeList.value.forEach(sub => {
|
|
|
- if(item.id === sub.id) {
|
|
|
- sub.checked = true
|
|
|
- if(item.unitAmount) {
|
|
|
- sub.options.forEach(min => {
|
|
|
- if(min.value === item.unitAmount) {
|
|
|
- min.checked = true
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.data && res.data.length > 0) {
|
|
|
+ choiceItem.value = res.data[0];
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ item.checked = false;
|
|
|
+ item.options.forEach((sub) => {
|
|
|
+ sub.checked = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ typeList.value = JSON.parse(JSON.stringify(res.data));
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ typeList.value.forEach((sub) => {
|
|
|
+ if (item.id === sub.id) {
|
|
|
+ sub.checked = true;
|
|
|
+ if (item.unitAmount) {
|
|
|
+ sub.options.forEach((min) => {
|
|
|
+ if (min.value === item.unitAmount) {
|
|
|
+ min.checked = true;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
- sub.options.forEach(min => {
|
|
|
- item.options.forEach(max => {
|
|
|
- if(min.id === max.id) {
|
|
|
- min.checked = true
|
|
|
+ sub.options.forEach((min) => {
|
|
|
+ item.options.forEach((max) => {
|
|
|
+ if (max.id === min.id && max.checked) {
|
|
|
+ min.checked = true;
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
- insuranceTypeList.value = typeList.value
|
|
|
- console.log('回显的数据111', insuranceTypeList.value)
|
|
|
+ });
|
|
|
+ });
|
|
|
+ insuranceTypeList.value = typeList.value;
|
|
|
+ console.log("回显的数据111", insuranceTypeList.value);
|
|
|
} else {
|
|
|
- insuranceTypeList.value = res.data
|
|
|
- console.log('回显的数据222', insuranceType.value)
|
|
|
+ insuranceTypeList.value = res.data;
|
|
|
+ console.log("回显的数据222", insuranceType.value);
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
ElMessage({
|
|
|
message: res.msg,
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
defineExpose({
|
|
|
- initEditData
|
|
|
-})
|
|
|
+ initEditData,
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.insuranceSelect{
|
|
|
+.insuranceSelect {
|
|
|
height: 300px;
|
|
|
- .insuranceList{
|
|
|
+ .insuranceList {
|
|
|
height: calc(100% - 40px);
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 10px;
|
|
|
- .insuranceLeft, .insuranceRight{
|
|
|
+ .insuranceLeft,
|
|
|
+ .insuranceRight {
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
- .insuranceLeft{
|
|
|
+ .insuranceLeft {
|
|
|
width: calc(100% - 110px);
|
|
|
- .insuranceItem{
|
|
|
+ .insuranceItem {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 10px 0;
|
|
|
- span{
|
|
|
+ span {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
- .checkIcon{
|
|
|
+ .checkIcon {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
display: flex;
|
|
|
@@ -169,25 +185,25 @@ defineExpose({
|
|
|
font-size: 10px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .active{
|
|
|
+ .active {
|
|
|
color: #fff;
|
|
|
- background: #3994FB;
|
|
|
- border-color: #3994FB;
|
|
|
+ background: #3994fb;
|
|
|
+ border-color: #3994fb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .insuranceRight{
|
|
|
+ .insuranceRight {
|
|
|
width: 70px;
|
|
|
- .account{
|
|
|
+ .account {
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .active{
|
|
|
- color: #3994FB;
|
|
|
+ .active {
|
|
|
+ color: #3994fb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .footer{
|
|
|
+ .footer {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
