|
|
@@ -1,50 +1,29 @@
|
|
|
<template>
|
|
|
<el-form label-width="100px">
|
|
|
<el-form-item label="文物名称：" required>
|
|
|
- <el-input
|
|
|
- v-model.trim="data.name"
|
|
|
- style="width: 100%"
|
|
|
- :maxlength="500"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
+ <el-input v-model.trim="data.name" style="width: 100%" :maxlength="500" placeholder="请输入" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="文物编号：">
|
|
|
- <el-input
|
|
|
- v-model.trim="data.unicode"
|
|
|
- style="width: 100%"
|
|
|
- :maxlength="500"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
+
|
|
|
+ <el-form-item label="行政区划">
|
|
|
+ <el-cascader style="width: 100%" v-model="selectedValue" :props="lazyProps" :placeholder="'请选择地区'" clearable
|
|
|
+ @change="handleChange" lazy />
|
|
|
</el-form-item>
|
|
|
+ <!-- <el-form-item label="文物编号：">
|
|
|
+ <el-input v-model.trim="data.unicode" style="width: 100%" :maxlength="500" placeholder="请输入" />
|
|
|
+ </el-form-item> -->
|
|
|
<el-form-item label="文物级别：">
|
|
|
<el-select style="width: 100%" v-model="data.level">
|
|
|
- <el-option
|
|
|
- :value="Number(key)"
|
|
|
- :label="type"
|
|
|
- v-for="(type, key) in relicsLevelDesc"
|
|
|
- />
|
|
|
+ <el-option :value="Number(key)" :label="type" v-for="(type, key) in relicsLevelDesc" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="类别：">
|
|
|
<el-select style="width: 100%" v-model="data.category">
|
|
|
- <el-option
|
|
|
- :value="Number(key)"
|
|
|
- :label="type"
|
|
|
- v-for="(type, key) in relicsTypeDesc"
|
|
|
- />
|
|
|
+ <el-option :value="Number(key)" :label="type" v-for="(type, key) in relicsTypeDesc" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="文物地址：">
|
|
|
- <el-input
|
|
|
- v-model="data.address"
|
|
|
- style="width: 100%;padding-bottom: 25px;"
|
|
|
- :maxlength="500"
|
|
|
- show-word-limit
|
|
|
- :autosize="{ minRows: 3, maxRows: 6 }"
|
|
|
-
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
+ <el-input v-model="data.address" style="width: 100%;padding-bottom: 25px;" :maxlength="500" show-word-limit
|
|
|
+ :autosize="{ minRows: 3, maxRows: 6 }" type="textarea" placeholder="请输入" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
@@ -53,7 +32,10 @@
|
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
|
import { Relics, relicsLevelDesc, relicsTypeDesc } from "@/store/relics";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-import { computed, ref } from "vue";
|
|
|
+import { computed, ref, watchEffect } from "vue";
|
|
|
+import { getProvinces, getCities, getAreas } from '@/request/organization';
|
|
|
+import type { CascaderProps, CascaderOption } from 'element-plus'
|
|
|
+const selectedValue = ref([])
|
|
|
|
|
|
const props = defineProps<{
|
|
|
relics?: Relics;
|
|
|
@@ -71,6 +53,75 @@ const data = ref<Relics>(props.relics ? { ...props.relics } : { name: "", relics
|
|
|
// }
|
|
|
// }
|
|
|
// );
|
|
|
+watchEffect(() => {
|
|
|
+ if (data.value.provinceId) {
|
|
|
+ selectedValue.value = [data.value.provinceId, data.value.cityId, data.value.areaId]
|
|
|
+ }
|
|
|
+})
|
|
|
+// 动态加载配置
|
|
|
+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 as CascaderOption[]).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)
|
|
|
+ cities = Array.from(areas as any as CascaderOption[]).map(a => {
|
|
|
+ a.leaf = true
|
|
|
+ return a
|
|
|
+ })
|
|
|
+ } 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 Array.from(areas as any as CascaderOption[]).map(a => {
|
|
|
+ a.leaf = true
|
|
|
+ return a
|
|
|
+ })
|
|
|
+ default:
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理选择事件
|
|
|
+const handleChange = (value: string) => {
|
|
|
+ console.log('选中的省市区编码:', value);
|
|
|
+};
|
|
|
+
|
|
|
|
|
|
defineExpose<QuiskExpose>({
|
|
|
title: computed(() => `${props.relics ? "修改" : "添加"}文物`),
|
|
|
@@ -79,6 +130,13 @@ defineExpose<QuiskExpose>({
|
|
|
ElMessage.error("请输入文物名称！");
|
|
|
throw "请输入文物名称！";
|
|
|
}
|
|
|
+
|
|
|
+ if (selectedValue.value.length > 0) {
|
|
|
+ data.value.provinceId = selectedValue.value[0]
|
|
|
+ data.value.cityId = selectedValue.value[1]
|
|
|
+ data.value.areaId = selectedValue.value[2]
|
|
|
+ }
|
|
|
+ console.log("data", data.value);
|
|
|
props.submit(data.value as any as Relics);
|
|
|
},
|
|
|
});
|
gemercheung