新增 产品选择关键字搜索
This commit is contained in:
yf
parent
ef41c1b22b
commit
88d5a41f5c
|
|
@ -0,0 +1,24 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
|
||||
// 关键字 API
|
||||
export const KeywordApi = {
|
||||
|
||||
/**
|
||||
* 查询关键字列表
|
||||
* @param filter 前置过滤
|
||||
* @param type AbsBaseKeywordSearchHandler 实现类的bean名称
|
||||
* @param keyword 关键字
|
||||
* @param maxCount 最大数量
|
||||
*/
|
||||
list: async (filter: string, type: string, keyword: string, maxCount = 10) => {
|
||||
return await request.get({
|
||||
url: `/oms/base/keyword/list/${type}/${maxCount}`,
|
||||
params: {
|
||||
filter: filter,
|
||||
keyword: keyword,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ const props = defineProps({
|
|||
title: propTypes.string.def('Dialog'),
|
||||
fullscreen: propTypes.bool.def(false),
|
||||
width: propTypes.oneOfType([String, Number]).def('40%'),
|
||||
top: propTypes.oneOfType([String]).def('2%'),
|
||||
scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
|
||||
maxHeight: propTypes.oneOfType([String, Number]).def('400px')
|
||||
})
|
||||
|
|
@ -63,6 +64,7 @@ const dialogStyle = computed(() => {
|
|||
:close-on-click-modal="true"
|
||||
:fullscreen="isFullscreen"
|
||||
:width="width"
|
||||
:top="top"
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
draggable
|
||||
|
|
|
|||
|
|
@ -29,8 +29,26 @@
|
|||
<Search
|
||||
:schema="allSchemas.searchSchema"
|
||||
:is-col="false"
|
||||
:expandField="['code','name']"
|
||||
@search="setSearchParams"
|
||||
@reset="setSearchParams">
|
||||
|
||||
<template #code="{data}">
|
||||
<div>
|
||||
<KeywordSearch
|
||||
v-model="data.code"
|
||||
:type="'productInfoCode'"
|
||||
:count="15"/>
|
||||
</div>
|
||||
</template>
|
||||
<template #name="{data}">
|
||||
<div>
|
||||
<KeywordSearch
|
||||
v-model="data.name"
|
||||
:type="'productInfoName'"
|
||||
:count="15"/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 新增等操作按钮 -->
|
||||
<template #actionMore>
|
||||
<el-button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<el-autocomplete
|
||||
v-model="inputValue"
|
||||
:fetch-suggestions="querySearch"
|
||||
@change="changeInput"
|
||||
clearable
|
||||
v-bind="attr"
|
||||
>
|
||||
<template #default="{item}">
|
||||
<div>
|
||||
<span v-html="toHighlightText(item.value,inputValue)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="KeywordSearch">
|
||||
//@ts-nocheck
|
||||
|
||||
import {KeywordApi} from "@/api/base/keyword";
|
||||
import {computed} from "vue";
|
||||
|
||||
/** 稿件图片库 */
|
||||
defineOptions({name: 'ProductInfoList'})
|
||||
const emit = defineEmits(['update:modelValue', 'update:visible', 'submit']) // 定义 success 事件，用于操作成功后的回调
|
||||
|
||||
const {t} = useI18n() // 国际化
|
||||
const $attrs = useAttrs();
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String],
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'productInfoCode'
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 15
|
||||
},
|
||||
filter: { // 前置过滤
|
||||
type: [Object,String] ,
|
||||
default: () => ""
|
||||
}
|
||||
})
|
||||
const attr = computed(() => {
|
||||
return {
|
||||
placeholder: t("common.keywordPlaceholder"),
|
||||
width: '100%',
|
||||
...$attrs
|
||||
}
|
||||
})
|
||||
const changeInput = (val) => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
const inputValue = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
})
|
||||
|
||||
const that = reactive({
|
||||
codeKeywordList: [],
|
||||
})
|
||||
|
||||
const keys = [];
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
let results = getResult(queryString);
|
||||
if (!results || results.length === 0) {
|
||||
console.log(444)
|
||||
// 后台查询
|
||||
getList(queryString, props.count).then(res => {
|
||||
results = getResult(queryString);
|
||||
cb(results)
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log("results", results)
|
||||
cb(results)
|
||||
}
|
||||
|
||||
}
|
||||
const getResult = (queryString) => {
|
||||
return queryString
|
||||
? that.codeKeywordList.filter((item) => {
|
||||
return `${item.value}`.toUpperCase().indexOf(queryString.toUpperCase()) != -1
|
||||
})
|
||||
: that.codeKeywordList
|
||||
}
|
||||
let preFilter = computed(()=>{
|
||||
if(props.filter && typeof props.filter === 'object'){
|
||||
return JSON.stringify(props.filter)
|
||||
}
|
||||
return props.filter || ""
|
||||
})
|
||||
|
||||
const getList = (queryString: string, count: number) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
KeywordApi.list(preFilter.value,props.type, queryString, count).then(res => {
|
||||
if (res.length > 0) {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if (!keys.includes(item.value)) {
|
||||
keys.push(item.value);
|
||||
that.codeKeywordList.push({
|
||||
value: item.value,
|
||||
label: item.label,
|
||||
})
|
||||
}
|
||||
}
|
||||
resolve(that.codeKeywordList);
|
||||
} else {
|
||||
resolve(that.codeKeywordList);
|
||||
}
|
||||
|
||||
}).catch((err) => {
|
||||
reject(err);
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const toHighlightText = (originalText: string, keyword: string) => {
|
||||
if (originalText && keyword) {
|
||||
const keyArray = parseKeywordList(keyword)
|
||||
if (keyArray.length > 0) {
|
||||
const arr = originalText.split("")
|
||||
let highlightedText = ""
|
||||
arr.forEach(s => {
|
||||
// @ts-ignore
|
||||
if (s && keyArray.includes(s.toUpperCase())) {
|
||||
highlightedText += `<span style="color: #ff0000">${s}</span>`
|
||||
} else {
|
||||
highlightedText += `${s}`;
|
||||
}
|
||||
})
|
||||
// 将高亮后的 HTML 插入到元素中
|
||||
return highlightedText;
|
||||
}
|
||||
}
|
||||
return originalText;
|
||||
}
|
||||
const parseKeywordList = (keyword: string): [] => {
|
||||
//@ts-ignore
|
||||
const arr = []
|
||||
if (keyword) {
|
||||
// 去空串
|
||||
keyword = keyword.replace(/\s/g, '')
|
||||
const strings = keyword.toUpperCase().split('')
|
||||
strings.forEach(s => {
|
||||
//@ts-ignore
|
||||
if (!arr.includes(s)) {
|
||||
arr.push(s)
|
||||
}
|
||||
})
|
||||
}
|
||||
//@ts-ignore
|
||||
return arr
|
||||
}
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList("", props.count * 2)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -10,6 +10,7 @@ const props = defineProps({
|
|||
title: propTypes.string.def('Dialog'),
|
||||
fullscreen: propTypes.bool.def(false),
|
||||
width: propTypes.oneOfType([String, Number]).def('40%'),
|
||||
top: propTypes.oneOfType([String]).def('2%'),
|
||||
scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
|
||||
maxHeight: propTypes.oneOfType([String, Number]).def('400px')
|
||||
})
|
||||
|
|
@ -63,6 +64,7 @@ const dialogStyle = computed(() => {
|
|||
:close-on-click-modal="true"
|
||||
:fullscreen="isFullscreen"
|
||||
:width="width"
|
||||
:top="top"
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
draggable
|
||||
|
|
|
|||
Loading…
Reference in New Issue