|
@@ -1,25 +1,11 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="org-picker">
|
3
|
3
|
<div class="picker-search">
|
4
|
|
- <Search
|
5
|
|
- v-model="searchValue"
|
6
|
|
- placeholder="请输入公司名称"
|
7
|
|
- @search="onSearch"
|
8
|
|
- />
|
|
4
|
+ <Search v-model="searchValue" placeholder="请输入公司名称" @search="onSearch" />
|
9
|
5
|
</div>
|
10
|
6
|
<div class="picker-list">
|
11
|
|
- <List
|
12
|
|
- v-model:loading="loading"
|
13
|
|
- :finished="finished"
|
14
|
|
- finished-text="我们是有底线的"
|
15
|
|
- @load="onLoad"
|
16
|
|
- >
|
17
|
|
- <Cell
|
18
|
|
- v-for="org in orgList"
|
19
|
|
- :key="org.orgId"
|
20
|
|
- :title="org.orgName"
|
21
|
|
- @click="onClick(org)"
|
22
|
|
- >
|
|
7
|
+ <List v-model:loading="loading" :finished="finished" finished-text="我们是有底线的" @load="onLoad">
|
|
8
|
+ <Cell v-for="org in orgList" :key="org.orgId" :title="org.orgName" @click="onClick(org)">
|
23
|
9
|
<template #right-icon v-if="org.orgId === orgSelected.orgId">
|
24
|
10
|
<Icon name="success" />
|
25
|
11
|
</template>
|
|
@@ -33,65 +19,66 @@
|
33
|
19
|
</template>
|
34
|
20
|
|
35
|
21
|
<script setup>
|
36
|
|
-import { computed, watch, ref, onMounted } from 'vue';
|
37
|
|
-import { Button, Search, List, Cell, Col, Row, Icon } from 'vant';
|
|
22
|
+import { computed, watch, ref, onMounted } from 'vue'
|
|
23
|
+import { Button, Search, List, Cell, Col, Row, Icon } from 'vant'
|
38
|
24
|
import { getOrgList } from '@/services/org'
|
39
|
25
|
|
40
|
|
-const searchValue = ref('');
|
41
|
|
-const orgSelected = ref({});
|
|
26
|
+const searchValue = ref('')
|
|
27
|
+const orgSelected = ref({})
|
42
|
28
|
const orgResult = ref({})
|
43
|
|
-const loading = ref(false);
|
44
|
|
-const finished = ref(false);
|
45
|
|
-const pageSize = 20;
|
|
29
|
+const loading = ref(false)
|
|
30
|
+const finished = ref(false)
|
|
31
|
+const pageSize = 20
|
46
|
32
|
|
47
|
33
|
const props = defineProps({
|
48
|
|
- modelValue: String,
|
|
34
|
+ modelValue: String
|
49
|
35
|
})
|
50
|
36
|
const emit = defineEmits(['update:modelValue', 'change'])
|
51
|
37
|
|
52
|
|
-const orgList = computed(() => (orgResult.value.records || []))
|
|
38
|
+const orgList = computed(() => orgResult.value.records || [])
|
53
|
39
|
watch(props.modelValue, (val) => {
|
54
|
|
- orgSelected.value = { orgId: val };
|
|
40
|
+ orgSelected.value = { orgId: val }
|
55
|
41
|
})
|
56
|
42
|
|
57
|
43
|
const queryData = (params) => {
|
58
|
|
- getOrgList(params, true).then(res => {
|
59
|
|
- const first = res.current === 1;
|
60
|
|
- if (first) {
|
61
|
|
- orgResult.value = res;
|
62
|
|
- } else {
|
63
|
|
- orgResult.value = {
|
64
|
|
- ...res,
|
65
|
|
- records: orgResult.value.records.concat(res.records),
|
66
|
|
- };
|
67
|
|
- }
|
68
|
|
-
|
69
|
|
-
|
70
|
|
- loading.value = false;
|
71
|
|
- finished.value = res.current >= res.pages;
|
72
|
|
- }).catch(() => {
|
73
|
|
- loading.value = false;
|
74
|
|
- finished.value = true;
|
75
|
|
- });
|
|
44
|
+ getOrgList(params, true)
|
|
45
|
+ .then((res) => {
|
|
46
|
+ const first = res.current === 1
|
|
47
|
+ if (first) {
|
|
48
|
+ orgResult.value = res
|
|
49
|
+ } else {
|
|
50
|
+ orgResult.value = {
|
|
51
|
+ ...res,
|
|
52
|
+ records: orgResult.value.records.concat(res.records)
|
|
53
|
+ }
|
|
54
|
+ }
|
|
55
|
+
|
|
56
|
+ loading.value = false
|
|
57
|
+ finished.value = res.current >= res.pages
|
|
58
|
+ })
|
|
59
|
+ .catch(() => {
|
|
60
|
+ loading.value = false
|
|
61
|
+ finished.value = true
|
|
62
|
+ })
|
76
|
63
|
}
|
77
|
64
|
|
78
|
65
|
const onSearch = (val) => {
|
79
|
|
- queryData({ pageNum: 1, pageSize, orgName: val });
|
|
66
|
+ queryData({ pageNum: 1, pageSize, orgName: val })
|
80
|
67
|
}
|
81
|
68
|
|
82
|
69
|
const onCancel = () => {
|
83
|
|
- queryData({ pageNum: 1, pageSize });
|
|
70
|
+ queryData({ pageNum: 1, pageSize })
|
84
|
71
|
}
|
85
|
72
|
|
86
|
73
|
// 组件加载, onLoad 就会执行一次
|
87
|
74
|
// 所以 onMounted 里面不需要初始化执行了
|
88
|
75
|
const onLoad = () => {
|
89
|
|
- const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1;
|
90
|
|
- queryData({ pageNum, pageSize, orgName: searchValue.value });
|
91
|
|
-};
|
|
76
|
+ const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
|
|
77
|
+ queryData({ pageNum, pageSize, orgName: searchValue.value })
|
|
78
|
+}
|
92
|
79
|
|
93
|
80
|
const onClick = (org) => {
|
94
|
|
- orgSelected.value = org;
|
|
81
|
+ orgSelected.value = org
|
95
|
82
|
}
|
96
|
83
|
|
97
|
84
|
const onSubmit = () => {
|
|
@@ -107,7 +94,6 @@ onMounted(() => {
|
107
|
94
|
// onLoad 执行了一次查询
|
108
|
95
|
// queryData({ pageNum: 1, pageSize });
|
109
|
96
|
})
|
110
|
|
-
|
111
|
97
|
</script>
|
112
|
98
|
|
113
|
99
|
<style lang="less" scoped>
|
|
@@ -130,5 +116,4 @@ onMounted(() => {
|
130
|
116
|
padding: 4px 8px;
|
131
|
117
|
}
|
132
|
118
|
}
|
133
|
|
-
|
134
|
119
|
</style>
|