组件修改

src/components/ruleCondition/index.vue

@@ -1,7 +1,7 @@
 <!-- 模板区域 -->
 <template>
   <div>
-    <el-dialog v-model="props.ruleConditionVisible" title="规则条件" width="500" draggable>
+    <el-dialog v-model="props.ruleConditionVisible" title="规则条件" width="500" draggable @close="close">
       <div class="Container flex f-c">
         <div class="flex ">
           <el-input v-model="attrName" style="margin-right: 20px;" clearable placeholder="搜索"
@@ -16,27 +16,29 @@
             </ul>
           </div>
           <div class="tabRight flex f-c">
-            <el-checkbox-group v-model="VehicleInfoAttrList" @change="change($event, 'VehicleInformation')"
+            <el-checkbox-group v-model="checked.VehicleInformation" @change="change($event, 'VehicleInformation')"
               v-for="(item, index) in dataStore.VehicleInformation" :key="index" v-if="activename == '车辆信息'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
-            <el-checkbox-group v-model="VehicleInfoAttrList1" @change="change($event, 'VehicleOwnerInformation')"
+            <el-checkbox-group v-model="checked.VehicleOwnerInformation"
+              @change="change($event, 'VehicleOwnerInformation')"
               v-for="(item, index) in dataStore.VehicleOwnerInformation" :key="index" v-if="activename == '车主信息'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
-            <el-checkbox-group v-model="VehicleInfoAttrList2" @change="change($event, 'PolicyholderInformation')"
+            <el-checkbox-group v-model="checked.PolicyholderInformation"
+              @change="change($event, 'PolicyholderInformation')"
               v-for="(item, index) in dataStore.PolicyholderInformation" :key="index" v-if="activename == '投保人信息'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
-            <el-checkbox-group v-model="VehicleInfoAttrList3" @change="change($event, 'InsuredInformation')"
+            <el-checkbox-group v-model="checked.InsuredInformation" @change="change($event, 'InsuredInformation')"
               v-for="(item, index) in dataStore.InsuredInformation" :key="index" v-if="activename == '被保人信息'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
-            <el-checkbox-group v-model="VehicleInfoAttrList4" @change="change($event, 'InsuranceInformation')"
+            <el-checkbox-group v-model="checked.InsuranceInformation" @change="change($event, 'InsuranceInformation')"
               v-for="(item, index) in dataStore.InsuranceInformation" :key="index" v-if="activename == '商业险'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
-            <el-checkbox-group v-model="VehicleInfoAttrList5" @change="change($event, 'InsuranceCostFactor')"
+            <el-checkbox-group v-model="checked.InsuranceCostFactor" @change="change($event, 'InsuranceCostFactor')"
               v-for="(item, index) in dataStore.InsuranceCostFactor" :key="index" v-if="activename == '保司费用因子'">
               <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
             </el-checkbox-group>
@@ -63,32 +65,85 @@ import api from '@/api'
 import { defineProps, defineEmits } from "vue";
 const props = defineProps<{
   ruleConditionVisible: boolean,
+  attrIdList?: any,
 }>();
 const emits = defineEmits(["cancel", 'save']);
 const cancel = () => {
   emits("cancel")
 }
+const close = () => {
+  emits("cancel")
+}
+watch(props, () => {
+  if (props.attrIdList.length) {
+    attractivelist.value = props.attrIdList;//获取编辑数据
+    const matchedid = matchDataByIds(attractivelist.value);//
+    const matchedinfo=matchDataByInfos(attractivelist.value)
+    Object.keys(checked).forEach(key => { //复选框回显
+      checked[key as keyof checkeddata] = matchedid[key] || [];
+    });
+    Object.keys(checked).forEach(key => {//条件数据回显
+      checkeddata[key as keyof checkeddata] = matchedinfo[key] || [];
+    });
+  }
+})
+
 const save = () => {
   const mergedData = [
-    ...checkeddata.VehicleInformationlist,
-    ...checkeddata.VehicleOwnerInformationlist,
-    ...checkeddata.PolicyholderInformationlist,
-    ...checkeddata.InsuredInformationlist,
-    ...checkeddata.InsuranceInformationlist,
-    ...checkeddata.InsuranceCostFactorlist,
+    ...checkeddata.VehicleInformation,
+    ...checkeddata.VehicleOwnerInformation,
+    ...checkeddata.PolicyholderInformation,
+    ...checkeddata.InsuredInformation,
+    ...checkeddata.InsuranceInformation,
+    ...checkeddata.InsuranceCostFactor,
   ]
+  console.log(mergedData)
+  // return;
   emits("save", mergedData)// 返回已选集合
 }
+const attractivelist = ref();
 const attrName = ref();
 const activename = ref('车辆信息');
-const VehicleInfoAttrList = ref()
-const VehicleInfoAttrList1 = ref()
-const VehicleInfoAttrList2 = ref()
-const VehicleInfoAttrList3 = ref()
-const VehicleInfoAttrList4 = ref()
-const VehicleInfoAttrList5 = ref()
+const checked = reactive<checkeddata>({
+  VehicleInformation: [],//车辆信息
+  VehicleOwnerInformation: [],//车主信息
+  PolicyholderInformation: [],//车主信息
+  InsuredInformation: [],//车主信息
+  InsuranceInformation: [], //车主信息
+  InsuranceCostFactor: [],//保司费用因子
+})
 const licensePlateRegion = ref();//车牌地区
 const licensePlateNumber = ref();//车牌号
+
+const matchDataByInfos = (idCollection: any) => {
+  const matchedData: any = {};
+  // 遍历 dataStore 的每个键
+  Object.keys(dataStore).forEach(key => {
+    // 过滤出匹配的项
+    matchedData[key as keyof dataStore] = dataStore[key as keyof dataStore].filter((item: any) => {
+      const match = idCollection.find((idObj: any) => idObj.attrName === item.attrName);
+      if (match) {
+        // 如果找到匹配项，将 minArray 和 min 赋值给 item
+        item.minArray = match.minArray;
+        item.min = match.min;
+        return true; // 保留该项
+      }
+      return false; // 不保留该项
+    });
+  });
+  return matchedData;
+};
+const matchDataByIds = (idCollection: any) => {
+  const matchedData: any = {};
+  // 提取 idCollection 中的 ID
+  const ids = idCollection.map((item: any) => item.attrName); // 提取 ID
+  // 遍历 dataStore 的每个键
+  Object.keys(dataStore).forEach(key => {
+    // 过滤出匹配的name回显复选框
+    matchedData[key as keyof dataStore] = dataStore[key as keyof dataStore].filter(item => ids.includes(item.attrName)).map(item => item.attrName);
+  });
+  return matchedData;
+};
 const typeList = ref([
   {
     name: "车辆信息",
@@ -123,17 +178,26 @@ const typeList = ref([
 const itemclick = (type: any) => {
   activename.value = type.name;
 }
+const dataStore = reactive<dataStore>({
+  VehicleInformation: [],//车辆信息
+  VehicleOwnerInformation: [],//车主信息
+  PolicyholderInformation: [],//车主信息
+  InsuredInformation: [],//车主信息
+  InsuranceInformation: [], //车主信息
+  InsuranceCostFactor: [],//保司费用因子
+})
 interface checkeddata {
   [key: string]: any[]
 }
 const checkeddata = reactive<checkeddata>({
-  VehicleInformationlist: [],
-  VehicleOwnerInformationlist: [],
-  PolicyholderInformationlist: [],
-  InsuredInformationlist: [],
-  InsuranceInformationlist: [],
-  InsuranceCostFactorlist: [],
-});//已勾选的规则集合
+  VehicleInformation: [],//车辆信息
+  VehicleOwnerInformation: [],//车主信息
+  PolicyholderInformation: [],//车主信息
+  InsuredInformation: [],//车主信息
+  InsuranceInformation: [], //车主信息
+  InsuranceCostFactor: [],//保司费用因子
+});
+//已勾选的规则集合
 interface VehicleInformation {
   attrName: string,
   id: string,
@@ -146,19 +210,13 @@ interface dataStore {
   InsuranceInformation: VehicleInformation[],
   InsuranceCostFactor: VehicleInformation[],
 }
-const dataStore = reactive<dataStore>({
-  VehicleInformation: [],//车辆信息
-  VehicleOwnerInformation: [],//车主信息
-  PolicyholderInformation: [],//车主信息
-  InsuredInformation: [],//车主信息
-  InsuranceInformation: [], //车主信息
-  InsuranceCostFactor: [],//保司费用因子
-})
+
 onMounted(() => {
   ruleAttr();
   regionLicenseRegion('0');//车牌地区
   regionLicenseNumber('14');//车牌号
 })
+
 const ruleAttr = () => {
   api.agreementApi.ruleAttrGroup({ attrName: attrName.value }).then((res: any) => {
     if (res.code == '200') {
@@ -178,16 +236,16 @@ const change = (value: any, title: title) => {
   // 使用动态属性访问
   let arrayToUpdate = dataStore[title];//获取对应类型数组
   if (arrayToUpdate) {
-    checkeddata[title + 'list'] = [];//默认清空
+    checkeddata[title] = [];//默认清空
     arrayToUpdate = arrayToUpdate.map((val) => {
       value.map((item: string) => {
         if (val.attrName == item) {
-          checkeddata[title + 'list'].push(val)//匹配相同值选中数据存入
+          checkeddata[title].push(val)//匹配相同值选中数据存入
         }
       })
       return val;
     });
-    console.log(checkeddata.VehicleInformationlist)
+    // console.log(checkeddata.VehicleInformationlist)
   } else {
 
   }
@@ -211,6 +269,7 @@ const processArray = (array: any[]) => {
     if (val.attrCode == 'LicenseArea') {
       val.dictLabal = licensePlateRegion.value;
     }
+    val.isCheck = 0;
     return val;
   });
 };