1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <template>
| <el-row>
| <el-col :span="20">
| <el-form label-position="right" label-width="60px" :inline="false">
| <el-form-item label="区域">
| <OptionLocation2
| :level="3"
| :initValue="true"
| :checkStrictly="false"
| :allOption="true"
| v-model="location"
| ></OptionLocation2>
| </el-form-item>
| <OptionGridGroup
| ref="gridGroupRef"
| v-model="gridGroup"
| ></OptionGridGroup>
| </el-form>
| </el-col>
| <el-col :span="4">
| <el-form-item>
| <el-button
| :loading="loading"
| :disabled="!gridGroup"
| type="primary"
| class="el-button-custom"
| size="small"
| @click="handleClick"
| >
| 查询
| </el-button>
| </el-form-item>
| </el-col>
| </el-row>
| </template>
| <script setup>
| import { ref, watch } from 'vue';
|
| defineProps({
| loading: Boolean
| });
|
| const location = ref(undefined);
| const gridGroup = ref(undefined);
| const gridGroupRef = ref(null);
|
| const emits = defineEmits(['search']);
|
| watch(location, (nv, ov) => {
| if (nv != ov) {
| const area = {
| provinceCode: nv.pCode,
| provinceName: nv.pName,
| cityCode: nv.cCode,
| cityName: nv.cName,
| districtCode: nv.dCode,
| districtName: nv.dName,
| townCode: nv.tCode,
| townName: nv.tName
| };
| gridGroupRef.value.fetchGridGroup(area);
| }
| });
|
| watch(gridGroup, (nv, ov) => {
| // 首次进入自动触发一次查询事件
| if (ov == undefined && nv != ov) {
| handleClick();
| }
| });
|
| function handleClick() {
| emits('search', gridGroup.value);
| }
| </script>
|
|
