规则搜索完不重置已选中的数据

src/components/ruleCondition/index.vue

@@ -1,12 +1,13 @@
 <!-- 模板区域 -->
 <template>
   <div>
-    <el-dialog :close-on-click-modal="false" v-model="props.ruleConditionVisible" title="规则条件" width="500" draggable @close="close">
+    <el-dialog :close-on-click-modal="false" 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="搜索"
-            @keydown.enter="handleEnter" @clear="ruleAttr()" />
-          <el-button @click="ruleAttr()" type="primary">查找</el-button>
+            @keydown.enter="handleEnter" @clear="ruleAttr('',false)" />
+          <el-button @click="ruleAttr('',false)" type="primary">查找</el-button>
         </div>
         <div class="conditionSet flex " v-if="searchShow">
           <div class="tabLeft">
@@ -45,10 +46,10 @@
           </div>
         </div>
         <div class="selectList" v-else>
-            <el-checkbox-group v-model="checked.SearchDataStore" @change="change($event, 'SearchDataStore')"
-                               v-for="(item, index) in dataStore.SearchDataStore" :key="index">
-                <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
-            </el-checkbox-group>
+          <el-checkbox-group v-model="checked.SearchDataStore" @change="change($event, 'SearchDataStore')"
+            v-for="(item, index) in dataStore.SearchDataStore" :key="index">
+            <el-checkbox v-model="item.id" :label="item.attrName" :value="item.attrName" size="large" />
+          </el-checkbox-group>
         </div>
       </div>
       <template #footer>
@@ -81,7 +82,7 @@ const cancel = () => {
 const close = () => {
   emits("cancel")
 }
-watch(()=>props.attrIdList, () => {
+watch(() => props.attrIdList, () => {
   if (props.attrIdList && props.attrIdList.length) {
     Object.assign(checked, {  //清空历史数据
       VehicleInformation: [],
@@ -98,20 +99,22 @@ watch(()=>props.attrIdList, () => {
 })
 
 // 设置已选数据
-const setCheckedData=()=>{
-    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] || [];
-    });
-    checkeddata['SearchDataStore'] = attractivelist.value
-    checked['SearchDataStore'] = attractivelist.value?.map(item => {
-        return item.attrName
-    })
+const setCheckedData = () => {
+  attrName.value = ''
+  attractivelist.value = props.attrIdList;//获取编辑数据
+  const matchedid = matchDataByIds(attractivelist.value);//
+  console.log("🚀 ~ setCheckedData ~ matchedid:", matchedid)
+  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] || [];
+  });
+  checkeddata['SearchDataStore'] = attractivelist.value
+  checked['SearchDataStore'] = attractivelist.value?.map(item => {
+    return item.attrName
+  })
 }
 const save = () => {
   const mergedData = [
@@ -123,19 +126,19 @@ const save = () => {
     ...checkeddata.InsuranceCostFactor,
     ...checkeddata.SearchDataStore,
   ]
-    let arr = props.attrIdList?[...props.attrIdList, ...mergedData]: mergedData
-    // console.log('原有的', props.attrIdList)
-    // console.log('新选的', mergedData)
-    // console.log('合并的', arr)
-    let brr = arr.reduce((acc, current) => {
-        const a = acc.find(item => item.attrCode === current.attrCode)
-        if(!a) {
-            return acc.concat([current])
-        } else {
-            return acc
-        }
-    }, [])
-    // console.log('去重的', brr)
+  let arr = props.attrIdList ? [...props.attrIdList, ...mergedData] : mergedData
+  // console.log('原有的', props.attrIdList)
+  // console.log('新选的', mergedData)
+  // console.log('合并的', arr)
+  let brr = arr.reduce((acc, current) => {
+    const a = acc.find(item => item.attrCode === current.attrCode)
+    if (!a) {
+      return acc.concat([current])
+    } else {
+      return acc
+    }
+  }, [])
+  // console.log('去重的', brr)
   if (brr.length == 0) {
     return ElMessage({
       type: 'error',
@@ -225,13 +228,13 @@ const itemclick = (type: any) => {
   activename.value = type.name;
 }
 const dataStore = reactive<dataStore>({
-    VehicleInformation: [],//车辆信息
-    VehicleOwnerInformation: [],//车主信息
-    PolicyholderInformation: [],//车主信息
-    InsuredInformation: [],//车主信息
-    InsuranceInformation: [], //车主信息
-    InsuranceCostFactor: [],//保司费用因子
-    SearchDataStore: [], // 搜索后合并的数据
+  VehicleInformation: [],//车辆信息
+  VehicleOwnerInformation: [],//车主信息
+  PolicyholderInformation: [],//车主信息
+  InsuredInformation: [],//车主信息
+  InsuranceInformation: [], //车主信息
+  InsuranceCostFactor: [],//保司费用因子
+  SearchDataStore: [], // 搜索后合并的数据
 })
 interface checkeddata {
   [key: string]: any[]
@@ -251,13 +254,13 @@ interface VehicleInformation {
   id: string,
 }[]
 interface dataStore {
-    VehicleInformation: VehicleInformation[],
-    VehicleOwnerInformation: VehicleInformation[],
-    PolicyholderInformation: VehicleInformation[],
-    InsuredInformation: VehicleInformation[],
-    InsuranceInformation: VehicleInformation[],
-    InsuranceCostFactor: VehicleInformation[],
-    SearchDataStore: VehicleInformation[],
+  VehicleInformation: VehicleInformation[],
+  VehicleOwnerInformation: VehicleInformation[],
+  PolicyholderInformation: VehicleInformation[],
+  InsuredInformation: VehicleInformation[],
+  InsuranceInformation: VehicleInformation[],
+  InsuranceCostFactor: VehicleInformation[],
+  SearchDataStore: VehicleInformation[],
 }
 
 onMounted(() => {
@@ -270,13 +273,13 @@ onMounted(() => {
 
 let searchShow = ref(true)
 let companyId = ref('')
-const ruleAttr = (id='') => {
-  if(id) companyId.value=id
-    if(attrName.value) {
-        searchShow.value = false
-    } else {
-        searchShow.value = true
-    }
+const ruleAttr = (id = '', isClearCheck = true) => {
+  if (id) companyId.value = id
+  if (attrName.value) {
+    searchShow.value = false
+  } else {
+    searchShow.value = true
+  }
   api.agreementApi.ruleAttrGroup({ attrName: attrName.value, companyId: companyId.value }).then((res: any) => {
     if (res.code == '200') {
       dataStore.VehicleInformation = res.data.VehicleInformation ? processArray(res.data.VehicleInformation) : [];
@@ -285,9 +288,8 @@ const ruleAttr = (id='') => {
       dataStore.InsuredInformation = res.data.InsuredInformation ? processArray(res.data.InsuredInformation) : [];
       dataStore.InsuranceInformation = res.data.InsuranceInformation ? processArray(res.data.InsuranceInformation) : [];
       dataStore.InsuranceCostFactor = res.data.InsuranceCostFactor ? processArray(res.data.InsuranceCostFactor) : [];
-      dataStore.SearchDataStore = [...dataStore.VehicleInformation, ...dataStore.VehicleOwnerInformation, ...dataStore.PolicyholderInformation, ...dataStore.InsuredInformation, ...dataStore.InsuranceInformation, ...dataStore.InsuranceCostFactor ]
-      setCheckedData()
-
+      dataStore.SearchDataStore = [...dataStore.VehicleInformation, ...dataStore.VehicleOwnerInformation, ...dataStore.PolicyholderInformation, ...dataStore.InsuredInformation, ...dataStore.InsuranceInformation, ...dataStore.InsuranceCostFactor]
+      if (isClearCheck) setCheckedData()
     }
   });
 }
@@ -306,26 +308,24 @@ const change = (value: any, title: title) => {
       })
       return val;
     });
-      if(title === 'SearchDataStore' && checkeddata['SearchDataStore'].length > 0) {
-          const matchedid = matchDataByIds(checkeddata['SearchDataStore']);//
-          const matchedinfo = matchDataByInfos(checkeddata['SearchDataStore'])
-          Object.keys(checked).forEach(key => { //复选框回显
-              checked[key as keyof checkeddata] = matchedid[key] || [];
-          });
-          Object.keys(checked).forEach(key => {//条件数据回显
-              checkeddata[key as keyof checkeddata] = matchedinfo[key] || [];
-          });
-      }
-  } else {
-
+    if (title === 'SearchDataStore' && checkeddata['SearchDataStore'].length > 0) {
+      const matchedid = matchDataByIds(checkeddata['SearchDataStore']);//
+      const matchedinfo = matchDataByInfos(checkeddata['SearchDataStore'])
+      Object.keys(checked).forEach(key => { //复选框回显
+        checked[key as keyof checkeddata] = [...matchedid[key], ...checked[key as keyof checkeddata]];
+      });
+      Object.keys(checked).forEach(key => {//条件数据回显
+        checkeddata[key as keyof checkeddata] = [...matchedinfo[key], ...checkeddata[key as keyof checkeddata]];
+      });
+    }
   }
 };
 // 遍历并处理每个数组
 const processArray = (array: any[]) => {
   return array?.map((val) => {
-      if (!val.operator) {
-          val.operator = '1'; // 设置默认值
-      }
+    if (!val.operator) {
+      val.operator = '1'; // 设置默认值
+    }
     // switch (val.attrType) {
     //   case 'inputNumber':
     //   case 'datetime':
@@ -345,7 +345,7 @@ const processArray = (array: any[]) => {
 };
 const handleEnter = (e: any) => {
   if (e.keyCode == 13 || e.keyCode == 108) {
-    ruleAttr();
+    ruleAttr('',false)
   }
 }
 const regionLicenseRegion = (value: string) => {
@@ -382,7 +382,7 @@ const regionLicenseNumber = (value: string) => {
 }
 
 defineExpose({
-    ruleAttr
+  ruleAttr
 })
 </script>
 <!-- 样式区域 -->
@@ -428,7 +428,8 @@ defineExpose({
     overflow-y: auto;
   }
 }
-.selectList{
+
+.selectList {
   max-height: 300px;
   padding: 0 20px;
   overflow-y: auto;