报价配置-方案管理-驾意险选择弹窗样式布局优化

src/layouts/components/DrivingType/index.vue

@@ -1,47 +1,30 @@
 <template>
   <div style="height: 400px">
-    <el-row :gutter="20" style="height: calc(100% - 30px); border: 1px solid #ccc; margin: 5px; border-radius: 5px; padding: 5px">
+    <el-row :gutter="20"
+      style="height: calc(100% - 30px); border: 1px solid #ccc; margin: 5px; border-radius: 5px; padding: 5px">
       <el-col :span="12">
         <el-input v-model="searchName" placeholder="输入驾意险名称查找" style="margin-bottom: 10px">
-<!--          <template #append>
-            <el-button type="primary" @click="handleSearchName">查找</el-button>
-          </template>-->
         </el-input>
-<!--        <el-checkbox-group v-model="item.drivingIntentionId">
-          <el-checkbox style="display: block;" v-for="JYX in JYXList" :key="JYX.id" :value="JYX.id" :label="JYX.productName"></el-checkbox>
-        </el-checkbox-group>-->
         <div class="insuranceLeft">
-<!--          <div class="insuranceItem" v-for="(item, index) in handleSearchName" @click="handleType(item, index)">
-          <span class="checkIcon" :class="{ 'active': item.checked }">
-            <el-icon><Select /></el-icon>
-          </span>
-            <span>{{ item.productName }}</span>
-          </div>-->
-          <el-tree
-            style="height: 300px; overflow: auto;flex: 0 0  auto;"
-            ref="treeRef"
-            :data="JYXList"
-            :props="defaultProps"
-            show-checkbox
-            node-key="id"
-            @check="handleCheckChange"
-            :check-strictly="false"
-            :default-expand-all="true"
-            :default-checked-keys="selectedKeys"
-            :filter-node-method="handleSearchName"
-          ></el-tree>
+          <el-tree style="height: 300px; overflow: auto;flex: 0 0  auto; user-select: none;" ref="treeRef"
+            :data="JYXList" :props="defaultProps" show-checkbox node-key="id" @check="handleCheckChange"
+            :check-strictly="false" :default-expand-all="true" :default-checked-keys="selectedKeys" class="wrap-tree"
+            :filter-node-method="handleSearchName"></el-tree>
         </div>
       </el-col>
-      <el-divider direction="vertical" style="height: 100%;"></el-divider>
+      <el-divider direction="vertical" style="height: auto;"></el-divider>
       <el-col :span="11">
         <div style="display: flex; align-items: center; justify-content: space-between; margin: 8px 0">
           <span>已选： {{ selectedList.length }}份驾意险</span>
           <el-button link type="primary" @click="clear">清空</el-button>
         </div>
         <div class="selectedList">
-          <div style="display: flex; align-items: center; justify-content: space-between; margin: 10px" v-for="(JYX, index) in selectedList" :key="JYX.id">
+          <div style="display: flex; align-items: center; justify-content: space-between; margin: 10px"
+            v-for="(JYX, index) in selectedList" :key="JYX.id">
             <span>{{ JYX.productName }}</span>
-            <el-icon style="cursor: pointer;" @click="handleDel(JYX, index)"><Close /></el-icon>
+            <el-icon style="cursor: pointer;" @click="handleDel(JYX, index)">
+              <Close />
+            </el-icon>
           </div>
         </div>
       </el-col>
@@ -87,12 +70,10 @@ const defaultProps = {
   label: 'productName',
 }
 const handleCheckChange = (data, row) => {
-  console.log(11111, data)
-  console.log(22222, row)
-  if(row.checkedNodes.length > 0) {
+  if (row.checkedNodes.length > 0) {
     let list1 = row.checkedNodes.filter(a => a.parentId == '0')
     let list2 = row.checkedNodes.filter(a => a.parentId != '0')
-    if(list1.length > 0) {
+    if (list1.length > 0) {
       let list3 = list1.filter(a => list2.some(b => b.parentId == a.id))
       selectedList.value = row.checkedNodes.filter(a => !list3.some(b => b.id == a.id))
     } else {
@@ -129,7 +110,7 @@ const handleType = (item, index) => {
   item.checked = !item.checked
   selectedList.value = []
   JYXList.value.forEach(sub => {
-    if(sub.checked) {
+    if (sub.checked) {
       selectedList.value.push(sub)
     }
   })
@@ -161,17 +142,17 @@ const initEditData = (data, index, id) => {
   // })
   // let list = [...JYXList.value]
   api.projectApi.jyxList({
-    company: id?id:'1738811735599380291'
+    company: id ? id : '1738811735599380291'
   }).then(res => {
-    if(res.code == 200) {
-      if(res.data && res.data.length > 0) {
+    if (res.code == 200) {
+      if (res.data && res.data.length > 0) {
         res.data.forEach(item => {
           item.checked = false
           item.drivingIntentionId = item.id
         })
       }
       JYXList.value = res.data
-      if(data && Array.isArray(data)) {
+      if (data && Array.isArray(data)) {
         // data.forEach(item => {
         //   item.checked = true
         // })
@@ -218,21 +199,24 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.insuranceLeft{
-  height: 100%;
+.insuranceLeft {
   overflow-y: auto;
 }
-.insuranceLeft{
-  width: calc(100% - 110px);
-  .insuranceItem{
+
+.insuranceLeft {
+
+  .insuranceItem {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin: 10px 0;
-    span{
+    user-select: none;
+
+    span {
       margin-left: 10px;
     }
-    .checkIcon{
+
+    .checkIcon {
       width: 14px;
       height: 14px;
       display: flex;
@@ -243,16 +227,32 @@ defineExpose({
       font-size: 10px;
       color: #fff;
     }
-    .active{
+
+    .active {
       color: #fff;
       background: #3994FB;
       border-color: #3994FB;
     }
   }
 }
-.footer{
+
+.footer {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+.wrap-tree {
+  :deep(.el-tree-node__content) {
+    height: auto !important;
+    min-height: 26px;
+    align-items: flex-start;
+  }
+  :deep(.el-tree-node__label) {
+  white-space: normal;
+  word-break: break-all;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+}
 </style>