tenant-Platform/src/components/ruleCondition/index.vue

<!-- 模板区域 -->
<template>
  <div>
    <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="搜索"
            @keydown.enter="handleEnter" @clear="ruleAttr" />
          <el-button @click="ruleAttr" type="primary">查找</el-button>
        </div>
        <div class="conditionSet flex ">
          <div class="tabLeft">
            <ul>
              <li :class="{ active: item.name == activename }" v-for="(item, index) in typeList" :key="index"
                @click="itemclick(item)">{{ item.name }}</li>
            </ul>
          </div>
          <div class="tabRight flex f-c">
            <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="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="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="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="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="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>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, reactive } from 'vue'
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 && 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.VehicleInformation,
    ...checkeddata.VehicleOwnerInformation,
    ...checkeddata.PolicyholderInformation,
    ...checkeddata.InsuredInformation,
    ...checkeddata.InsuranceInformation,
    ...checkeddata.InsuranceCostFactor,
  ]
  emits("save", mergedData)// 返回已选集合
}
const attractivelist = ref();
const attrName = ref();
const activename = 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: "车辆信息",
    type: 'VehicleInformation'
  },
  {
    name: "车主信息",
    type: 'VehicleOwnerInformation'

  },
  {
    name: "投保人信息",
    type: 'PolicyholderInformation'

  },
  {
    name: "被保人信息",
    type: 'InsuredInformation'

  },
  {
    name: "商业险",
    type: 'InsuranceInformation'

  },
  {
    name: "保司费用因子",
    type: 'InsuranceCostFactor'

  }
])
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>({
  VehicleInformation: [],//车辆信息
  VehicleOwnerInformation: [],//车主信息
  PolicyholderInformation: [],//车主信息
  InsuredInformation: [],//车主信息
  InsuranceInformation: [], //车主信息
  InsuranceCostFactor: [],//保司费用因子
});
//已勾选的规则集合
interface VehicleInformation {
  attrName: string,
  id: string,
}[]
interface dataStore {
  VehicleInformation: VehicleInformation[],
  VehicleOwnerInformation: VehicleInformation[],
  PolicyholderInformation: VehicleInformation[],
  InsuredInformation: VehicleInformation[],
  InsuranceInformation: VehicleInformation[],
  InsuranceCostFactor: VehicleInformation[],
}

onMounted(() => {
    ruleAttr();
    regionLicenseRegion('0');//车牌地区
    regionLicenseNumber('14');//车牌号
})

const ruleAttr = () => {
  api.agreementApi.ruleAttrGroup({ attrName: attrName.value }).then((res: any) => {
    if (res.code == '200') {
      dataStore.VehicleInformation = processArray(res.data.VehicleInformation);
      dataStore.VehicleOwnerInformation = processArray(res.data.VehicleOwnerInformation);
      dataStore.PolicyholderInformation = processArray(res.data.PolicyholderInformation);
      dataStore.InsuredInformation = processArray(res.data.InsuredInformation);
      dataStore.InsuranceInformation = processArray(res.data.InsuranceInformation);
      dataStore.InsuranceCostFactor = processArray(res.data.InsuranceCostFactor);
    } else {
    }
  });
}
//选择事件集中处理
type title = keyof typeof dataStore;
const change = (value: any, title: title) => {
  // 使用动态属性访问
  let arrayToUpdate = dataStore[title];//获取对应类型数组
  if (arrayToUpdate) {
    checkeddata[title] = [];//默认清空
    arrayToUpdate = arrayToUpdate.map((val) => {
      value.map((item: string) => {
        if (val.attrName == item) {
          checkeddata[title].push(val)//匹配相同值选中数据存入
        }
      })
      return val;
    });
  } else {

  }
};
// 遍历并处理每个数组
const processArray = (array: any[]) => {
  return array.map((val) => {
    switch (val.attrType) {
      case 'inputNumber':
      case 'datetime':
        if (!val.operator) {
          val.operator = '1'; // 设置默认值
        }
        break;
      default:
        break;
    }
    if (val.attrCode == 'LicenseNo') {
      val.dictLabal = licensePlateNumber.value;
    }
    if (val.attrCode == 'LicenseArea') {
      val.dictLabal = licensePlateRegion.value;
    }
    val.isCheck = 0;
    return val;
  });
};
const handleEnter = (e: any) => {
  if (e.keyCode == 13 || e.keyCode == 108) {
    ruleAttr();
  }
}
const regionLicenseRegion = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateRegion.value = data;
    } else {
    }
  });
}
const regionLicenseNumber = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateNumber.value = data;
    } else {
    }
  });
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.conditionSet {
  padding: 20px 0;
  margin-top: 10px;

  .tabLeft {
    width: 100px;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      border-right: 1px solid #dcdfe6;

      li {
        height: 40px;
        font-weight: 500;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }

      li:hover {
        color: #0083ff;
        background: #f4faff;
        transition: 0.3s;
      }
    }
  }

  .active {
    color: #0083ff;
    background: #f4faff;
  }

  .tabRight {
    flex: 1;
    max-height: 300px;
    padding: 0 20px;
    overflow-y: auto;
  }
}
</style>