核保因子添加功能

src/views/AgreementManage/CarInsurance/components/PremiumFactor.vue

@@ -168,13 +168,17 @@
         :visible.sync="dialogVisible"
         append-to-body
         width="80%">
-        <span>
-          <p>保单信息<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></p>
-          <div>
-            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
-            </el-checkbox-group>
+        <span v-for="(ele,index) in conditiondata" :key="index" class="often-box">
+          <div class="often-box-title" >
+            <span class="title-text" >{{ ele.title }}</span>
+            <el-checkbox  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange(index)">全选</el-checkbox>
           </div>
+            <div class="often-content-classify" v-for='(cele,cindex) in ele.options' :key="cindex">
+              <div class="classify-title">{{cele.name}}</div>
+                <el-checkbox-group  class="often-content" v-model="checkedCities" @change="handleCheckedCitiesChange">
+                  <el-checkbox  class="often-content-child" v-for="city in cele.cities" :label="city" :key="city">{{city}}</el-checkbox>
+                </el-checkbox-group>
+            </div>
         </span>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
@@ -193,8 +197,29 @@ export default {
     data(){
         return{
           checkAll: false,
-        checkedCities: ['上海', '北京'],
-        cities: ['上海', '北京', '广州', '深圳'],
+        checkedCities: [],
+        conditiondata:[{
+          title:'保单信息',
+          options:[
+            {
+              name:'险种',
+              cities: ['险种', '非车保单数量', '座位险总保额（万元）', ' 座位险总保额（燃油-万元）','非车保单数量']
+            },
+            {
+              name:'其他',
+              cities: ['使用系数', '查询比', '保费计算次数', '纳税类型','非车保单数量']
+            }
+          ],
+        },
+        {
+          title:'车辆信息',
+          options:[
+            {
+              name:'车辆',
+              cities: ['贷款车', '备质量(千克)', '总质量(千克)', '品牌型号车辆类别码']
+            },
+          ],
+        }],
         isIndeterminate: true,
           dialogVisible: false,
           dialogTitle:'添加其他条件',
@@ -773,10 +798,12 @@ export default {
         addConditions(){
           this.dialogVisible=true
         },
-        handleCheckAllChange(val) {
-        this.checkedCities = val ? cityOptions : [];
-        this.isIndeterminate = false;
-      },
+        handleCheckAllChange(index) {
+          let arr=[]
+          this.conditiondata[index].options.forEach(val=>arr.push(...val.cities) )
+          this.checkedCities=this.checkAll?arr:[]
+          this.isIndeterminate = false;
+        },
       handleCheckedCitiesChange(value) {
         let checkedCount = value.length;
         this.checkAll = checkedCount === this.cities.length;
@@ -806,7 +833,6 @@ export default {
   span>img{
     vertical-align: middle;
     width: 26px;
-
     height: 26px;
     margin-right: 5px
   }
@@ -815,4 +841,41 @@ export default {
   text-align: right;
   padding: 10px 0;
 }
+.often-box-title{
+  padding: 10px;
+    background-color: #ffeede;
+    font-weight: bold;
+}
+.often-content-classify{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.often-box .often-content-classify:not(:last-child){
+  border-bottom: 1px solid #ccc;
+  
+}
+.classify-title{
+  width: 100px;
+    text-align: right;
+    padding: 15px 5px 0px 0px;
+    font-weight: 600;
+}
+.often-content{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+    padding: 10px;
+    flex: 1;
+}
+.often-content-child{
+  width: 22%;
+    padding: 5px 0;
+}
+.title-text{
+  display: inline-block;
+  width: 100px;
+  font-size: 15px;
+  font-weight: 900;
+}
 </style>