|
|
@@ -0,0 +1,298 @@
|
|
|
+<!-- 模板区域 -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog v-model="props.ruleConditionVisible" title="规则条件" width="500" draggable>
|
|
|
+ <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="VehicleInfoAttrList" @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')"
|
|
|
+ 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')"
|
|
|
+ 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')"
|
|
|
+ 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')"
|
|
|
+ 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')"
|
|
|
+ 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,
|
|
|
+}>();
|
|
|
+const emits = defineEmits(["cancel", 'save']);
|
|
|
+const cancel = () => {
|
|
|
+ emits("cancel")
|
|
|
+}
|
|
|
+const save = () => {
|
|
|
+ const mergedData = [
|
|
|
+ ...checkeddata.VehicleInformationlist,
|
|
|
+ ...checkeddata.VehicleOwnerInformationlist,
|
|
|
+ ...checkeddata.PolicyholderInformationlist,
|
|
|
+ ...checkeddata.InsuredInformationlist,
|
|
|
+ ...checkeddata.InsuranceInformationlist,
|
|
|
+ ...checkeddata.InsuranceCostFactorlist,
|
|
|
+ ]
|
|
|
+ emits("save", mergedData)// 返回已选集合
|
|
|
+}
|
|
|
+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 licensePlateRegion = ref();//车牌地区
|
|
|
+const licensePlateNumber = ref();//车牌号
|
|
|
+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;
|
|
|
+}
|
|
|
+interface checkeddata {
|
|
|
+ [key: string]: any[]
|
|
|
+}
|
|
|
+const checkeddata = reactive<checkeddata>({
|
|
|
+ VehicleInformationlist: [],
|
|
|
+ VehicleOwnerInformationlist: [],
|
|
|
+ PolicyholderInformationlist: [],
|
|
|
+ InsuredInformationlist: [],
|
|
|
+ InsuranceInformationlist: [],
|
|
|
+ InsuranceCostFactorlist: [],
|
|
|
+});//已勾选的规则集合
|
|
|
+interface VehicleInformation {
|
|
|
+ attrName: string,
|
|
|
+ id: string,
|
|
|
+}[]
|
|
|
+interface dataStore {
|
|
|
+ VehicleInformation: VehicleInformation[],
|
|
|
+ VehicleOwnerInformation: VehicleInformation[],
|
|
|
+ PolicyholderInformation: VehicleInformation[],
|
|
|
+ InsuredInformation: VehicleInformation[],
|
|
|
+ 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') {
|
|
|
+ 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 + 'list'] = [];//默认清空
|
|
|
+ arrayToUpdate = arrayToUpdate.map((val) => {
|
|
|
+ value.map((item: string) => {
|
|
|
+ if (val.attrName == item) {
|
|
|
+ checkeddata[title + 'list'].push(val)//匹配相同值选中数据存入
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return val;
|
|
|
+ });
|
|
|
+ console.log(checkeddata.VehicleInformationlist)
|
|
|
+ } 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;
|
|
|
+ }
|
|
|
+ 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>
|