zhuibobo
/
EnforcementCode-2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

统一搜索功能

dev-V1.0.6
wangmingyong@163.com 3 months ago
parent
661f66d2f5
commit
39417e3c23
3 changed files with 241 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      zdxt-web-client/zdxt-efcode-enforcement-app/src/api/enforcement/plan.js
  2. 151
      zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/notice/cp_notice_edit.vue
  3. 156
      zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/plan/cp_plan_edit.vue

4
zdxt-web-client/zdxt-efcode-enforcement-app/src/api/enforcement/plan.js
View File

@ -53,8 +53,8 @@ export const getManualMatchDays = (success, error) => _get(settingBaseUrl + "/ma
const enterpriseSearchBaseUrl = "/enforcementcode/enterpriseSearch"; const enterpriseSearchBaseUrl = "/enforcementcode/enterpriseSearch";
// 按企业名称联合检索(>=3字符) // 按企业名称联合检索(>=3字符)
export const searchUnionByEnterpriseName = (enterpriseName, success, error) => export const searchUnionByEnterpriseName = (searchValue, success, error) =>
_get(enterpriseSearchBaseUrl + "/searchUnionByEnterpriseName", { enterpriseName }, success, error); _post("/app-enf/enterpriseInfo/queryListAndQrInfo", { searchValue }, success, error);
// 根据企业信用代码查询联系人和联系电话 // 根据企业信用代码查询联系人和联系电话
export const getEnterpriseContactInfo = (enterpriseNumber, success, error) => export const getEnterpriseContactInfo = (enterpriseNumber, success, error) =>

151
zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/notice/cp_notice_edit.vue
View File

@ -260,28 +260,38 @@
<span class="enterprise-picker-title">选择企业</span> <span class="enterprise-picker-title">选择企业</span>
<van-icon name="cross" @click="showEnterprisePicker = false" /> <van-icon name="cross" @click="showEnterprisePicker = false" />
</div> </div>
<van-search <div class="search-bar">
v-model="enterpriseSearchKeyword" <van-search
placeholder="输入≥ 2 个字符检索企业,不要输入深圳,深圳市" v-model="enterpriseSearchKeyword"
shape="round" placeholder="请输入企业名称/统一信用代码搜索"
@update:model-value="onEnterpriseSearchInput" @search="handleEnterpriseSearch"
/> @clear="clearEnterpriseSearch"
/>
<van-button class="search-btn" type="primary" @click="handleEnterpriseSearch">搜索</van-button>
</div>
<div class="enterprise-picker-body"> <div class="enterprise-picker-body">
<div v-if="enterpriseSearching" class="enterprise-loading"> <van-list
<van-loading size="18" />&nbsp;检索中... v-model:loading="enterpriseLoading"
</div> :finished="enterpriseFinished"
<template v-else> :finished-text="enterpriseFinishedText"
:offset="50"
@load="onEnterpriseLoad"
>
<div <div
v-for="(item, idx) in enterpriseOptions" v-for="(item, idx) in enterpriseOptions"
:key="idx" :key="item.enterpriseNumber || idx"
class="enterprise-item" class="enterprise-item"
@click="onSelectEnterprise(item)" @click="onSelectEnterprise(item)"
> >
<div class="enterprise-item-name">{{ item.enterpriseName }}</div> <div class="enterprise-item-name">{{ item.enterpriseName }}</div>
<div class="enterprise-item-number">{{ item.enterpriseNumber }}</div> <div class="enterprise-item-number">{{ item.enterpriseNumber }}</div>
</div> </div>
<van-empty v-if="enterpriseSearchKeyword.length >= 2 && !enterpriseOptions.length" description="未检索到匹配企业" image-size="80" /> <van-empty
</template> v-if="!enterpriseLoading && !enterpriseOptions.length"
:description="enterpriseEmptyText"
image-size="80"
/>
</van-list>
</div> </div>
</div> </div>
</van-popup> </van-popup>
@ -292,7 +302,8 @@
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'; import { showToast, showSuccessToast, showConfirmDialog } from 'vant';
import { addNotice, editNotice, getNoticeDetail } from '@/api/enforcement/notice'; import { addNotice, editNotice, getNoticeDetail } from '@/api/enforcement/notice';
import { getPlanList, searchUnionByEnterpriseName, searchBureauUnitUsers, getEnterpriseContactInfo } from '@/api/enforcement/plan'; import { getPlanList, searchBureauUnitUsers, getEnterpriseContactInfo } from '@/api/enforcement/plan';
import { queryEnterpriseListAndQrInfo } from '@/api/enforcement/index';
import { maskPhone } from '@/util/util'; import { maskPhone } from '@/util/util';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -404,10 +415,16 @@ const planImportDisplay = computed(() => {
const enterpriseOptions = ref([]); const enterpriseOptions = ref([]);
const showEnterprisePicker = ref(false); const showEnterprisePicker = ref(false);
const enterpriseSearchKeyword = ref(''); const enterpriseSearchKeyword = ref('');
const enterpriseSearching = ref(false); const enterpriseLoading = ref(false);
let enterpriseSearchTimer = null; const enterpriseFinished = ref(false);
const enterprisePageNum = ref(1);
const enterprisePageSize = 10;
const enterpriseSearched = ref(false);
let enterpriseSearchSeq = 0; let enterpriseSearchSeq = 0;
const enterpriseEmptyText = computed(() => enterpriseSearched.value ? '未检索到匹配企业' : '请输入至少2个字搜索');
const enterpriseFinishedText = computed(() => enterpriseOptions.value.length > 0 ? '没有更多了' : '');
// 执法人员检索 // 执法人员检索
const showPersonPicker = ref(false); const showPersonPicker = ref(false);
const personSearchKeyword = ref(''); const personSearchKeyword = ref('');
@ -503,34 +520,88 @@ const onTimeConfirm = ({ selectedValues }) => {
const onOpenEnterprisePicker = () => { const onOpenEnterprisePicker = () => {
enterpriseSearchKeyword.value = ''; enterpriseSearchKeyword.value = '';
enterpriseOptions.value = []; enterpriseOptions.value = [];
enterprisePageNum.value = 1;
enterpriseFinished.value = true;
enterpriseLoading.value = false;
enterpriseSearched.value = false;
showEnterprisePicker.value = true; showEnterprisePicker.value = true;
}; };
// 企业检索 // 企业检索(搜索按钮/回车)
const onEnterpriseSearchInput = (val) => { const handleEnterpriseSearch = () => {
if (enterpriseSearchTimer) clearTimeout(enterpriseSearchTimer); const keyword = (enterpriseSearchKeyword.value || '').trim();
const keyword = (val || '').trim();
if (keyword.length < 2) { if (keyword.length < 2) {
showToast('请输入至少2个字搜索');
enterpriseOptions.value = []; enterpriseOptions.value = [];
enterpriseFinished.value = true;
enterpriseSearched.value = false;
return; return;
} }
enterpriseSearchTimer = setTimeout(() => { enterprisePageNum.value = 1;
const seq = ++enterpriseSearchSeq; enterpriseFinished.value = false;
enterpriseSearching.value = true; enterpriseOptions.value = [];
searchUnionByEnterpriseName(keyword, (res) => { enterpriseLoading.value = true;
enterpriseSearched.value = true;
fetchEnterpriseList(keyword);
};
// 清除企业搜索
const clearEnterpriseSearch = () => {
enterpriseSearchKeyword.value = '';
enterpriseOptions.value = [];
enterprisePageNum.value = 1;
enterpriseFinished.value = true;
enterpriseLoading.value = false;
enterpriseSearched.value = false;
};
// van-list 触底加载
const onEnterpriseLoad = () => {
fetchEnterpriseList(enterpriseSearchKeyword.value.trim());
};
// 实际发起企业检索(分页追加)
const fetchEnterpriseList = (keyword) => {
if ((keyword || '').trim().length < 2) {
enterpriseFinished.value = true;
enterpriseLoading.value = false;
return;
}
const seq = ++enterpriseSearchSeq;
enterpriseLoading.value = true;
queryEnterpriseListAndQrInfo(
{
pageNum: enterprisePageNum.value,
pageSize: enterprisePageSize,
searchValue: keyword,
},
(res) => {
if (seq !== enterpriseSearchSeq) return; if (seq !== enterpriseSearchSeq) return;
enterpriseSearching.value = false; enterpriseLoading.value = false;
if (res && res.code === 200 && Array.isArray(res.data)) { if (res && res.code === 200 && Array.isArray(res.rows)) {
enterpriseOptions.value = res.data; const data = res.rows;
if (enterprisePageNum.value === 1) {
enterpriseOptions.value = data;
} else {
enterpriseOptions.value = [...enterpriseOptions.value, ...data];
}
const total = res.total || 0;
if (total <= enterprisePageSize * enterprisePageNum.value) {
enterpriseFinished.value = true;
} else {
enterprisePageNum.value++;
}
} else { } else {
enterpriseOptions.value = []; if (enterprisePageNum.value === 1) enterpriseOptions.value = [];
enterpriseFinished.value = true;
} }
}, () => { },
() => {
if (seq !== enterpriseSearchSeq) return; if (seq !== enterpriseSearchSeq) return;
enterpriseSearching.value = false; enterpriseLoading.value = false;
enterpriseOptions.value = []; enterpriseFinished.value = true;
}); }
}, 350); );
}; };
const onSelectEnterprise = (item) => { const onSelectEnterprise = (item) => {
@ -863,6 +934,20 @@ const doSubmit = (isDraft) => {
.enterprise-picker-title { font-size: 16px; font-weight: 600; color: #333; } .enterprise-picker-title { font-size: 16px; font-weight: 600; color: #333; }
:deep(.van-icon) { font-size: 18px; color: #999; cursor: pointer; } :deep(.van-icon) { font-size: 18px; color: #999; cursor: pointer; }
} }
.search-bar {
display: flex;
align-items: center;
margin: 0.3rem;
:deep(.van-search) {
padding-right: 0px;
flex: 1;
height: 34px;
}
.search-btn {
flex: none;
height: 34px;
}
}
.enterprise-picker-body { .enterprise-picker-body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;

156
zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/plan/cp_plan_edit.vue
View File

@ -222,28 +222,38 @@
<span class="enterprise-picker-title">选择企业</span> <span class="enterprise-picker-title">选择企业</span>
<van-icon name="cross" @click="showEnterprisePicker = false" /> <van-icon name="cross" @click="showEnterprisePicker = false" />
</div> </div>
<van-search <div class="search-bar">
v-model="enterpriseSearchKeyword" <van-search
placeholder="输入≥ 2 个字符检索企业,不要输入深圳,深圳市" v-model="enterpriseSearchKeyword"
shape="round" placeholder="请输入企业名称/统一信用代码搜索"
@update:model-value="onEnterpriseSearchInput" @search="handleEnterpriseSearch"
/> @clear="clearEnterpriseSearch"
/>
<van-button class="search-btn" type="primary" @click="handleEnterpriseSearch">搜索</van-button>
</div>
<div class="enterprise-picker-body"> <div class="enterprise-picker-body">
<div v-if="enterpriseSearching" class="enterprise-loading"> <van-list
<van-loading size="18" />&nbsp;检索中... v-model:loading="enterpriseLoading"
</div> :finished="enterpriseFinished"
<template v-else> :finished-text="enterpriseFinishedText"
:offset="50"
@load="onEnterpriseLoad"
>
<div <div
v-for="(item, idx) in enterpriseOptions" v-for="(item, idx) in enterpriseOptions"
:key="idx" :key="item.enterpriseNumber || idx"
class="enterprise-item" class="enterprise-item"
@click="onSelectEnterprise(item)" @click="onSelectEnterprise(item)"
> >
<div class="enterprise-item-name">{{ item.enterpriseName }}</div> <div class="enterprise-item-name">{{ item.enterpriseName }}</div>
<div class="enterprise-item-number">{{ item.enterpriseNumber }}</div> <div class="enterprise-item-number">{{ item.enterpriseNumber }}</div>
</div> </div>
<van-empty v-if="enterpriseSearchKeyword.length >= 2 && !enterpriseOptions.length" description="未检索到匹配企业" image-size="80" /> <van-empty
</template> v-if="!enterpriseLoading && !enterpriseOptions.length"
:description="enterpriseEmptyText"
image-size="80"
/>
</van-list>
</div> </div>
</div> </div>
</van-popup> </van-popup>
@ -253,7 +263,8 @@
<script setup name="cpPlanEdit"> <script setup name="cpPlanEdit">
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'; import { showToast, showSuccessToast, showConfirmDialog } from 'vant';
import { addPlan, editPlan, getPlanDetail, getSubmitDeadline, getManualMatchDays, getMaxInnerUnitAcPersonNum, searchUnionByEnterpriseName, searchBureauUnitUsers } from '@/api/enforcement/plan'; import { addPlan, editPlan, getPlanDetail, getSubmitDeadline, getManualMatchDays, getMaxInnerUnitAcPersonNum, searchBureauUnitUsers } from '@/api/enforcement/plan';
import { queryEnterpriseListAndQrInfo } from '@/api/enforcement/index';
import { maskPhone } from '@/util/util'; import { maskPhone } from '@/util/util';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -345,10 +356,16 @@ const maxPersonNum = ref(3);
const enterpriseOptions = ref([]); const enterpriseOptions = ref([]);
const showEnterprisePicker = ref(false); const showEnterprisePicker = ref(false);
const enterpriseSearchKeyword = ref(''); const enterpriseSearchKeyword = ref('');
const enterpriseSearching = ref(false); const enterpriseLoading = ref(false);
let enterpriseSearchTimer = null; const enterpriseFinished = ref(false);
const enterprisePageNum = ref(1);
const enterprisePageSize = 10;
const enterpriseSearched = ref(false);
let enterpriseSearchSeq = 0; let enterpriseSearchSeq = 0;
const enterpriseEmptyText = computed(() => enterpriseSearched.value ? '未检索到匹配企业' : '请输入至少2个字搜索');
const enterpriseFinishedText = computed(() => enterpriseOptions.value.length > 0 ? '没有更多了' : '');
// 执法人员检索弹层状态 // 执法人员检索弹层状态
const showPersonPicker = ref(false); const showPersonPicker = ref(false);
const personSearchKeyword = ref(''); const personSearchKeyword = ref('');
@ -553,36 +570,88 @@ const onDateConfirm = ({ selectedValues }) => {
const onOpenEnterprisePicker = () => { const onOpenEnterprisePicker = () => {
enterpriseSearchKeyword.value = ''; enterpriseSearchKeyword.value = '';
enterpriseOptions.value = []; enterpriseOptions.value = [];
enterprisePageNum.value = 1;
enterpriseFinished.value = true;
enterpriseLoading.value = false;
enterpriseSearched.value = false;
showEnterprisePicker.value = true; showEnterprisePicker.value = true;
}; };
// 企业名称输入(防抖检索) // 企业检索(搜索按钮/回车)
const onEnterpriseSearchInput = (val) => { const handleEnterpriseSearch = () => {
if (enterpriseSearchTimer) { const keyword = (enterpriseSearchKeyword.value || '').trim();
clearTimeout(enterpriseSearchTimer);
}
const keyword = (val || '').trim();
if (keyword.length < 2) { if (keyword.length < 2) {
showToast('请输入至少2个字搜索');
enterpriseOptions.value = []; enterpriseOptions.value = [];
enterpriseFinished.value = true;
enterpriseSearched.value = false;
return;
}
enterprisePageNum.value = 1;
enterpriseFinished.value = false;
enterpriseOptions.value = [];
enterpriseLoading.value = true;
enterpriseSearched.value = true;
fetchEnterpriseList(keyword);
};
// 清除企业搜索
const clearEnterpriseSearch = () => {
enterpriseSearchKeyword.value = '';
enterpriseOptions.value = [];
enterprisePageNum.value = 1;
enterpriseFinished.value = true;
enterpriseLoading.value = false;
enterpriseSearched.value = false;
};
// van-list 触底加载
const onEnterpriseLoad = () => {
fetchEnterpriseList(enterpriseSearchKeyword.value.trim());
};
// 实际发起企业检索(分页追加)
const fetchEnterpriseList = (keyword) => {
if ((keyword || '').trim().length < 2) {
enterpriseFinished.value = true;
enterpriseLoading.value = false;
return; return;
} }
enterpriseSearchTimer = setTimeout(() => { const seq = ++enterpriseSearchSeq;
const seq = ++enterpriseSearchSeq; enterpriseLoading.value = true;
enterpriseSearching.value = true; queryEnterpriseListAndQrInfo(
searchUnionByEnterpriseName(keyword, (res) => { {
pageNum: enterprisePageNum.value,
pageSize: enterprisePageSize,
searchValue: keyword,
},
(res) => {
if (seq !== enterpriseSearchSeq) return; if (seq !== enterpriseSearchSeq) return;
enterpriseSearching.value = false; enterpriseLoading.value = false;
if (res && res.code === 200 && Array.isArray(res.data)) { if (res && res.code === 200 && Array.isArray(res.rows)) {
enterpriseOptions.value = res.data; const data = res.rows;
if (enterprisePageNum.value === 1) {
enterpriseOptions.value = data;
} else {
enterpriseOptions.value = [...enterpriseOptions.value, ...data];
}
const total = res.total || 0;
if (total <= enterprisePageSize * enterprisePageNum.value) {
enterpriseFinished.value = true;
} else {
enterprisePageNum.value++;
}
} else { } else {
enterpriseOptions.value = []; if (enterprisePageNum.value === 1) enterpriseOptions.value = [];
enterpriseFinished.value = true;
} }
}, () => { },
() => {
if (seq !== enterpriseSearchSeq) return; if (seq !== enterpriseSearchSeq) return;
enterpriseSearching.value = false; enterpriseLoading.value = false;
enterpriseOptions.value = []; enterpriseFinished.value = true;
}); }
}, 350); );
}; };
// 选择某个企业 // 选择某个企业
@ -993,6 +1062,23 @@ const doSubmit = () => {
} }
} }
.search-bar {
display: flex;
align-items: center;
margin: 0.3rem;
:deep(.van-search) {
padding-right: 0px;
flex: 1;
height: 34px;
}
.search-btn {
flex: none;
height: 34px;
}
}
.enterprise-picker-body { .enterprise-picker-body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;

Write Preview
Loading…
Cancel
Save