如题,话不多说直接代码,组件接口需要自行适配
// 使用示例<template><div class="wrap" v-loading="loading"><div class="cus-header"><el-page-header class="cus-back" icon="ArrowLeft" @back="$router.go(-1)" /><el-card class="mb-5 mt-2"><!-- <template #header> 基本表单 </template> --><h-form :fieldList="fieldList" :model="model" :options="options" @submit="handleBaseSubmit"/></el-card></div></div>
</template><script setup>
import { ref } from "vue";
import _ from "lodash";
import HForm from "@/components/HForm/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/api/baseData/icEpc"
import { Form } from "./form.js";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();const rowId = ref(route.query.id)
const loading = ref(false);const fieldList = ref(Form.base); // base customkeyForm ruleForm
const model = ref({companyName: route.query.companyName,creditCode: route.query.creditCode,empowerCode: "",mdmSupplierCode: '',owner: '',contractCode: '',startTime: '',endTime: '',product: [],area: "",empowerDate: "",empowerName: "",annexUrl: "",remark: "",
});
const options = ref({inline: true, labelWidth: 'auto','label-position': 'left',// disabled: true
})
/*** 注意: model数据模型非必填项,如果仅仅是用于数据收集,model参数可以不用填,表单的submit事件会返回所有搜集的数据对象* 如果是编辑的情况下,页面需要回显数据,则model数据模型必须要填写*/
const handleBaseSubmit = (model) => {// 处理逻辑
};
</script>
// HAddressCascader
<template><div class="areaUnit"><el-cascaderv-model="currentChoose"v-bind="_options":options="addressList":disabled="_options.disabled"@change="handleChange"/></div>
</template><script>
export default {name: "addresscascader",
};
</script><script setup>
import { ref, computed, watch } from "vue";
import API from "@/api";const emits = defineEmits(["update:modelValue"
]);const props = defineProps({disabled: {//禁用type: Boolean,required: false,default: false,},options: {type: Object,default: () => {},},modelValue: {type: [Array, Object],default: () => ([]),},
});// 设置option默认值,如果传入自定义的配置则合并option配置项
const _options = computed(() => {const option = {name: "multipartFiles",comType: "provinceCityCountry",};option.disabled = props.disabled;return Object.assign(option, props.options);
});const currentChoose = ref([]);
const addressList = ref([]);
const addressOrigin = ref({});
// 处理省市区数据结构
const handleBase = (list, childrenList, stringBan) => {return new Promise((resolve) => {const address = []if (childrenList) {for (const key in list) {const children = childrenList.filter(i => String(i.value).substring(0, stringBan) === String(key).substring(0, stringBan));address.push({value: key,label: list[key],children})}} else {for (const key in list) {address.push({value: key,label: list[key]})}}resolve(address)})
}// 获取省市区
const getaddressList = () => {API.getRegionList().then(async (res) => {const { province_list, city_list, county_list } = res.result;addressOrigin.value = { province_list, city_list, county_list }if (_options.value.comType === "provinceCityCountry") {const countyAddress = await handleBase(county_list)const cityAddress = await handleBase(city_list, countyAddress, 4)addressList.value = await handleBase(province_list, cityAddress, 2)}if (_options.value.comType === "provinceCity") {const cityAddress = await handleBase(city_list)addressList.value = await handleBase(province_list, cityAddress, 2)}})
}
const handleChange = (val) => {if (!val.length) {emits('update:modelValue', val)return}if (_options.value?.props?.multiple) {const arr = []val.forEach(item => {const obj = {}obj.provinceId = item[0]obj.provinceName = addressOrigin.value.province_list[item[0]]obj.cityId = item[1]obj.cityName = addressOrigin.value.city_list[item[1]]obj.regionId = item[2]obj.regionName = addressOrigin.value.county_list[item[2]]arr.push(obj)})emits('update:modelValue', arr)} else {const obj = {}obj.provinceId = val[0]obj.provinceName = addressOrigin.value.province_list[val[0]]obj.cityId = val[1]obj.cityName = addressOrigin.value.city_list[val[1]]obj.regionId = val[2]obj.regionName = addressOrigin.value.county_list[val[2]]emits('update:modelValue', obj)}
}const created = () => {if (!props.modelValue) {return []}if (props.modelValue instanceof Array) {currentChoose.value = props.modelValue.map(item => {if (_options.value.comType === "provinceCityCountry") {return [ item.provinceId, item.cityId, item.regionId ]}return [ item.provinceId, item.cityId ]})} else {if (_options.value.comType === "provinceCityCountry")