增加进件功能
This commit is contained in:
292
entryManager/add/components/bankBranchList.vue
Normal file
292
entryManager/add/components/bankBranchList.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="box" @click.stop="openPopup">
|
||||
<text class="u-font-28 color-999 u-p-r-16" v-if="!modelValue">请选择</text>
|
||||
<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
|
||||
<view class="icon">
|
||||
<up-icon name="arrow-down" size="14" color="#999"></up-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold color-333 u-font-32">选择银行</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-search v-model="keywords" @search="search" @change="search" @custom="search"
|
||||
@clear="search"></up-search>
|
||||
</view>
|
||||
<scroll-view scroll-with-animation :scroll-into-view="selid" class="scroll-view u-m-t-30"
|
||||
scroll-y="true" style="max-height :60vh;">
|
||||
<template v-if="list.length">
|
||||
<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.bankCode"
|
||||
@click="itemClick(item)" :id="'shop_'+item.bankCode"
|
||||
:class="{active:selItem&&selItem.bankCode==item.bankCode}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.branchName}}</view>
|
||||
</view>
|
||||
<view class="u-p-20 u-flex u-row-center">
|
||||
<up-loadmore status="nomore"></up-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="keywords">
|
||||
<up-empty text="未搜索到相关支行"></up-empty>
|
||||
</template>
|
||||
<up-empty v-else text="暂无支行"></up-empty>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<view class="u-flex gap-20 u-m-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button type="primary" @click="submit">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
bankBranchList
|
||||
} from '@/http/api/order/entryManager.js';
|
||||
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const show = ref(false);
|
||||
const modelValue = defineModel();
|
||||
const bankBranchName = defineModel('bankBranchName', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
const selid = ref('')
|
||||
|
||||
function returnLabel() {
|
||||
const findShop = list.value.find(v => v.bankCode == modelValue.value)
|
||||
return findShop ? findShop.branchName : ''
|
||||
}
|
||||
const selItem = ref(null)
|
||||
|
||||
function itemClick(data) {
|
||||
selItem.value = data
|
||||
}
|
||||
|
||||
function returnbranchName(bankCode) {
|
||||
const item = list.value.find((v) => v.bankCode == bankCode);
|
||||
return item?.branchName || '';
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
modelValue.value = selItem.value.bankCode
|
||||
bankBranchName.value = selItem.value.branchName
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const keywords = ref('')
|
||||
|
||||
function search() {
|
||||
list.value = matchStr(allList, keywords.value)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 模糊匹配对象数组中每个对象的全部属性，按匹配度由高到低排序返回，未匹配到的对象直接过滤（不返回）
|
||||
* @param {Array<Object>} arr - 待匹配的对象数组（必传，非数组返回空数组）
|
||||
* @param {string} str - 待匹配的目标字符串（空字符串返回原数组浅拷贝）
|
||||
* @returns {Array<Object>} 按匹配度降序排序后的对象数组（仅包含匹配项，不修改原数组）
|
||||
*/
|
||||
function matchStr(arr, str) {
|
||||
// ------------- 步骤1：严格边界处理，避免运行报错 -------------
|
||||
if (!Array.isArray(arr)) {
|
||||
console.warn('入参arr必须是对象数组');
|
||||
return [];
|
||||
}
|
||||
const targetStr = String(str || '').trim().toLowerCase();
|
||||
if (!targetStr) {
|
||||
return [...arr]; // 空字符串返回原数组浅拷贝（保持原有逻辑）
|
||||
}
|
||||
|
||||
// ------------- 步骤2：定义匹配度得分规则 -------------
|
||||
const getSinglePropScore = (propValue) => {
|
||||
const propStr = String(propValue).trim().toLowerCase();
|
||||
if (propStr === targetStr) return 3;
|
||||
if (propStr.startsWith(targetStr)) return 2;
|
||||
if (propStr.includes(targetStr)) return 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
// ------------- 步骤3：遍历数组，计算每个对象的总匹配度得分 -------------
|
||||
const arrWithScore = arr.map(item => {
|
||||
if (typeof item !== 'object' || item === null) {
|
||||
return {
|
||||
originItem: item,
|
||||
totalScore: 0
|
||||
};
|
||||
}
|
||||
|
||||
let totalScore = 0;
|
||||
Object.keys(item).forEach(propKey => {
|
||||
const propValue = item[propKey];
|
||||
totalScore += getSinglePropScore(propValue);
|
||||
});
|
||||
|
||||
return {
|
||||
originItem: item,
|
||||
totalScore: totalScore
|
||||
};
|
||||
});
|
||||
|
||||
// ------------- 步骤4：先过滤（仅保留得分>0的项），再排序，最后返回原对象格式 -------------
|
||||
return arrWithScore
|
||||
.filter(item => item.totalScore > 0) // 核心新增：过滤未匹配项（总得分=0的对象不保留）
|
||||
.sort((a, b) => b.totalScore - a.totalScore) // 仅对匹配项进行降序排序
|
||||
.map(item => item.originItem); // 剔除得分字段，返回原对象格式
|
||||
}
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
function openPopup() {
|
||||
selid.value = 'shop_' + modelValue.value
|
||||
const findShop = list.value.find(v => v.bankCode == modelValue.value)
|
||||
selItem.value=findShop?findShop:null
|
||||
show.value = true;
|
||||
|
||||
}
|
||||
|
||||
// --------------- 核心新增：节流函数实现 ---------------
|
||||
/**
|
||||
* 节流函数：限制函数在指定时间内只触发一次
|
||||
* @param {Function} fn - 要节流的函数
|
||||
* @param {number} delay - 节流延迟时间（毫秒）
|
||||
* @returns {Function} 节流后的函数
|
||||
*/
|
||||
function throttle(fn, delay = 300) {
|
||||
let timer = null; // 定时器标识
|
||||
return function(...args) {
|
||||
// 如果已有定时器，直接返回（未到触发时间）
|
||||
if (timer) return;
|
||||
// 执行函数并设置新定时器
|
||||
fn.apply(this, args);
|
||||
timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
// --------------- 核心修改：创建节流后的search方法 ---------------
|
||||
// 300ms内只触发一次search，可根据需求调整delay值（如500ms）
|
||||
const throttledSearch = throttle(search, 300);
|
||||
|
||||
// --------------- 改造bankNameChange：调用节流后的搜索 ---------------
|
||||
function bankNameChange() {
|
||||
// 输入变化时，调用节流后的搜索方法
|
||||
throttledSearch();
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
province: '',
|
||||
city: '',
|
||||
instId: '',
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
watch(() => show.value, (newval) => {
|
||||
init()
|
||||
})
|
||||
|
||||
let allList = []
|
||||
async function init() {
|
||||
const res = await bankBranchList(props.query);
|
||||
list.value = res
|
||||
allList = res
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border-radius: 8upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx 40rpx 20rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #999;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
&.active {
|
||||
.checkbox {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user