|
|
@@ -11,12 +11,9 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="行政区划" prop="type" required>
|
|
|
- <!-- <el-select style="width: 300px" v-model="data.type">
|
|
|
- <el-option :value="Number(key)" :label="type" v-for="(type, key) in OrganizationTypeDesc" /> -->
|
|
|
- <!-- </el-select> -->
|
|
|
- <el-cascader style="width: 300px" v-model="selectedArea" :options="options" :props="cityProps" placeholder="请选择省市区" clearable
|
|
|
- @change="handleChange" />
|
|
|
+ <el-form-item label="行政区划" prop="type">
|
|
|
+ <el-cascader style="width: 300px" v-model="selectedValue" :props="lazyProps" :placeholder="'请选择地区'" clearable
|
|
|
+ @change="handleChange" lazy />
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
@@ -26,14 +23,18 @@
|
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
|
import type { OrganizationType } from "@/request/organization";
|
|
|
-import { OrganizationTypeDesc } from '@/store/organization'
|
|
|
+import { OrganizationTypeDesc } from '@/store/organization';
|
|
|
+import { getProvinces, getCities, getAreas } from '@/request/organization';
|
|
|
import { ref, reactive, unref, watchEffect, onMounted } from "vue";
|
|
|
import { user } from '@/store/user'
|
|
|
import { globalPasswordRex } from "@/util/regex";
|
|
|
-import * as regionData from 'china-area-data';
|
|
|
+import type { CascaderProps } from 'element-plus'
|
|
|
+// import areaData from '@/util/area.json';
|
|
|
+const selectedValue = ref([])
|
|
|
|
|
|
const baseFormRef = ref<FormInstance>();
|
|
|
|
|
|
+
|
|
|
const rules = reactive<FormRules>({
|
|
|
orgName: [
|
|
|
{ required: true, message: "请输入单位名称", trigger: "blur" },
|
|
|
@@ -57,6 +58,7 @@ const props = defineProps<{
|
|
|
org: OrganizationType,
|
|
|
submit: (data: OrganizationType) => Promise<any>;
|
|
|
}>();
|
|
|
+
|
|
|
const data = ref<OrganizationType & {}>({
|
|
|
ancestors: "",
|
|
|
contact: "",
|
|
|
@@ -81,21 +83,65 @@ watchEffect(() => {
|
|
|
}
|
|
|
|
|
|
})
|
|
|
-const selectedArea = ref([]);
|
|
|
-const options = ref([]);
|
|
|
-const cityProps = {
|
|
|
- value: 'value',
|
|
|
- label: 'label',
|
|
|
- children: 'children',
|
|
|
-};
|
|
|
-// 初始化数据（已处理为 Element 需要的格式）
|
|
|
-onMounted(() => {
|
|
|
- options.value = regionData;
|
|
|
- console.log('regionData', regionData)
|
|
|
+
|
|
|
+
|
|
|
+// 动态加载配置
|
|
|
+const lazyProps = ref<CascaderProps>({
|
|
|
+ lazy: true,
|
|
|
+
|
|
|
+ // 启用懒加载模式
|
|
|
+ async lazyLoad(node, resolve) {
|
|
|
+ // debugger
|
|
|
+ const { level, value } = node; // level: 当前层级（0=省，1=市，2=区）
|
|
|
+ console.log('node', node.data)
|
|
|
+ const dataRes = await loadData(level, node.data);
|
|
|
+ resolve(dataRes); // 将子节点数据返回给组件
|
|
|
+ },
|
|
|
+ checkStrictly: true, // 允许选择任意一级（可选）
|
|
|
+ label: 'name', // 显示字段名
|
|
|
+ value: 'id', // 值字段名
|
|
|
+ leaf: 'leaf', // 标识是否为叶子节点（不可再展开）
|
|
|
});
|
|
|
|
|
|
+
|
|
|
+const loadData = async (level, node) => {
|
|
|
+ // 根据层级模拟数据
|
|
|
+ console.log('level', level, node)
|
|
|
+
|
|
|
+ switch (level) {
|
|
|
+ case 0: // 加载省份
|
|
|
+ const provinces = await getProvinces();
|
|
|
+ const resP = Array.from(provinces as any).map(p => {
|
|
|
+ p.leaf = false
|
|
|
+ return p
|
|
|
+ });
|
|
|
+ return resP;
|
|
|
+ case 1:
|
|
|
+ let cities
|
|
|
+ if (node.zx) {
|
|
|
+ const areas = await getAreas(node.province, node.city);
|
|
|
+ console.log('areas', areas)
|
|
|
+ } else {
|
|
|
+ cities = await getCities(node.province);
|
|
|
+ console.log('cities', node.province, cities);
|
|
|
+ }
|
|
|
+
|
|
|
+ return cities
|
|
|
+ // break;
|
|
|
+ case 2: // 加载区县
|
|
|
+ const areas = await getAreas(node.province, node.city)
|
|
|
+ console.log('areas', areas)
|
|
|
+ return areas.map(a => {
|
|
|
+ a.leaf = true
|
|
|
+ return a
|
|
|
+ })
|
|
|
+ default:
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 处理选择事件
|
|
|
-const handleChange = (value) => {
|
|
|
+const handleChange = (value: string) => {
|
|
|
console.log('选中的省市区编码:', value);
|
|
|
};
|
|
|
|
gemercheung