|
|
@@ -4,7 +4,7 @@
|
|
|
<div class="custom-cascader">
|
|
|
<!-- 执法处 -->
|
|
|
<a-select v-model:value="pca.lawDept" placeholder="请选择执法处" style="width: 180px; margin-right: 8px" @change="handleLawDeptChange">
|
|
|
- <a-select-option v-for="item in lawDeptOptions" :key="item.value" :value="item.value">
|
|
|
+ <a-select-option v-for="item in props.lawDeptOptions" :key="item.value" :value="item.value">
|
|
|
{{ item.label }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
@@ -35,13 +35,9 @@ import { ref, reactive, onMounted, nextTick, watch } from 'vue';
|
|
|
// 替换为你的实际接口请求函数
|
|
|
import { getEnfMineTreeData } from './mineData.api';
|
|
|
const props = defineProps({
|
|
|
- value: {
|
|
|
- type: Object,
|
|
|
- default: () => ({
|
|
|
- lawDept: '', // 执法处ID
|
|
|
- area: '', // 区域ID
|
|
|
- mineCode: '', // 煤矿编码
|
|
|
- }),
|
|
|
+ lawDeptOptions: {
|
|
|
+ type: Array,
|
|
|
+ default: <Array<{ label: string; value: string | number }>>[],
|
|
|
},
|
|
|
});
|
|
|
const emit = defineEmits(['change', 'update:value', 'update:lawDept', 'update:area', 'update:position']);
|
|
|
@@ -52,49 +48,41 @@ const pca = reactive({
|
|
|
});
|
|
|
|
|
|
// 下拉选项列表
|
|
|
-const lawDeptOptions = ref<Array<{ label: string; value: string | number }>>([]);
|
|
|
+// const lawDeptOptions = ref<Array<{ label: string; value: string | number }>>([]);
|
|
|
const areaOptions = ref<Array<{ label: string; value: string | number }>>([]);
|
|
|
const positionOptions = ref<Array<{ label: string; value: string | number }>>([]);
|
|
|
const rawLawDeptData = ref<any[]>([]); // 保存原始执法处数据以备后续查找
|
|
|
// // 初始化加载执法处列表
|
|
|
-const initLawDeptList = async () => {
|
|
|
- // 调用获取执法处列表的接口
|
|
|
- try {
|
|
|
- const res = await getEnfMineTreeData();
|
|
|
- rawLawDeptData.value = res; // 保存原始数据以备后续查找
|
|
|
- lawDeptOptions.value = res.map((item) => ({
|
|
|
- label: item.departName, // 显示执法处名称
|
|
|
- value: item.id, // 绑定执法处ID
|
|
|
- }));
|
|
|
- } catch (error) {
|
|
|
- console.error('加载执法处列表失败:', error);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// // 选择区域后加载对应具体位置
|
|
|
+// const initLawDeptList = async () => {
|
|
|
+// // 调用获取执法处列表的接口
|
|
|
+// try {
|
|
|
+// const res = await getEnfMineTreeData();
|
|
|
+// rawLawDeptData.value = res; // 保存原始数据以备后续查找
|
|
|
+// lawDeptOptions.value = res.map((item) => ({
|
|
|
+// label: item.departName, // 显示执法处名称
|
|
|
+// value: item.id, // 绑定执法处ID
|
|
|
+// }));
|
|
|
+// } catch (error) {
|
|
|
+// console.error('加载执法处列表失败:', error);
|
|
|
+// }
|
|
|
+// };
|
|
|
const handleLawDeptChange = async (depId: string | number) => {
|
|
|
pca.area = '';
|
|
|
pca.position = '';
|
|
|
areaOptions.value = [];
|
|
|
positionOptions.value = [];
|
|
|
-
|
|
|
- // 2. 找到选中的执法处原始数据
|
|
|
+ rawLawDeptData.value = props.lawDeptOptions;
|
|
|
+ console.log(rawLawDeptData.value, '222222');
|
|
|
const currentDept = rawLawDeptData.value.find((item) => item.id === depId);
|
|
|
if (!currentDept) {
|
|
|
console.warn('未找到该执法处数据');
|
|
|
return;
|
|
|
}
|
|
|
console.log(currentDept, '1111111');
|
|
|
- // 3. 核心:绑定对应childDepart的label=departName,value=id
|
|
|
- if (currentDept.childDepart && currentDept.childDepart.length > 0) {
|
|
|
- areaOptions.value = currentDept.childDepart.map((child) => ({
|
|
|
- label: child.departName, // 显示区域名称
|
|
|
- value: child.id, // 绑定区域ID
|
|
|
- }));
|
|
|
- console.log(`执法处【${currentDept.departName}】对应的区域:`, areaOptions.value);
|
|
|
- } else {
|
|
|
- console.warn(`执法处【${currentDept.departName}】暂无下属区域`);
|
|
|
- }
|
|
|
+ areaOptions.value = currentDept.childDepart.map((child) => ({
|
|
|
+ label: child.departName, // 显示区域名称
|
|
|
+ value: child.id, // 绑定区域ID
|
|
|
+ }));
|
|
|
};
|
|
|
// const handleAreaChange = async (areaId: string | number) => {
|
|
|
// pca.position = '';
|
|
|
@@ -115,9 +103,7 @@ const handleLawDeptChange = async (depId: string | number) => {
|
|
|
|
|
|
// 页面初始化时加载执法处列表
|
|
|
onMounted(() => {
|
|
|
- nextTick(async () => {
|
|
|
- await initLawDeptList();
|
|
|
- });
|
|
|
+ console.log('接收的执法部门选项:', props.lawDeptOptions);
|
|
|
});
|
|
|
</script>
|
|
|
|