yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 远程搜索下拉框

Browse Source
This commit is contained in:
yangchunlong
2026-07-09 16:36:34 +08:00
parent 472dd212f0
commit b73f4d519f
5 changed files with 74 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/rulesForm/index.vue
View File

@@ -108,17 +108,6 @@
>
</el-radio-group>
</template>
<!-- <template v-if="item.type === 'radio1'">
<el-radio-group v-model="_ruleForm[`${item.prop}`]">
<el-radio
:value="option.value"
:label="option.value"
v-for="(option, optionIndex) in item.options"
:key="optionIndex"
>{{ option.label }}</el-radio
>
</el-radio-group>
</template> -->
<template v-if="item.type === 'upImg'">
<UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
<template #tip>
@@ -149,6 +138,39 @@
/>
</el-select>
</template>
<template v-if="item.type === 'selectRemote'">
<el-select
v-model="_ruleForm[`${item.prop}`]"
:placeholder="item.placeholder"
clearable
remote
filterable
multiple
:debounce="400"
@clear="handleClear(item)"
class="m-2 select"
remote-show-suffix
:remote-method="
(query:any) => {
remoteMethod(
query,
item
);
}
"
:disabled="item.disabled"
style="width: 444px"
>
<el-option
:label="option.name"
:value="option.value"
v-for="option in item.options"
:key="option.value"
/>
</el-select>
<!--item.prop -->
</template>
<template v-if="item.type === 'selectMultiple'">
<el-select
style="width: 240px"
@@ -174,6 +196,7 @@
:data="item.options"
:placeholder="item.placeholder"
:render-after-expand="false"
multiple
show-checkbox
check-strictly
@change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
@@ -219,6 +242,7 @@ interface IProps {
handleSelectChangeEmits?: () => void;
handleRadioGroupEmits?: () => void;
handleTreesSelectChangeEmits?: () => void;
handleSelectRometeEmits?: () => void;
}
const emits = defineEmits<{
(e: "handleInputButton", result?: Record<string, any>): void;
@@ -226,6 +250,7 @@ const emits = defineEmits<{
(e: "handleSelectChangeEmits", result?: Record<string, any>): void;
(e: "handleRadioGroupEmits", result?: any): void;
(e: "handleTreesSelectChangeEmits", result?: any): void;
(e: "handleSelectRometeEmits", result?: any): void;
}>();
const editorRef = ref<any>(null);
const ruleFormRef = ref<FormInstance>();
@@ -250,6 +275,14 @@ const handleSelectChange = (params: any, prop: any) => {
const handleRadioGroup = (value: any) => {
emits("handleRadioGroupEmits", value);
};
const handleClear = (item: any) => {
item.options = [];
};
//远程搜索(供应商)
const remoteMethod = async (query: any, item: any) => {
emits("handleSelectRometeEmits", { query, item });
console.log(query, item);
};
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
ruleForm: _ruleForm,

6
src/views/productManagement/compatibility/constant/table.ts
View File

@@ -80,12 +80,14 @@ export const COLUMNS = [
{
align: "left",
label: "创建时间",
prop: "created_at"
prop: "created_at",
width: 160
},
{
align: "left",
label: "更新时间",
prop: "updated_at"
prop: "updated_at",
width: 160
},
{ prop: "operation", label: "操作", fixed: "right", width: 200 }

7
src/views/productManagement/list/constant/form.ts
View File

@@ -3,7 +3,7 @@ export const FORM_DATA_LV1: any[] = [
{
prop: "compat_id",
placeholder: "请输入",
type: "selectMultiple",
type: "selectRemote",
label: "关联标签: ",
options: []
},
@@ -36,8 +36,9 @@ export const FORM_DATA_LV2: any[] = [
{
prop: "compat_id",
placeholder: "请输入",
type: "selectMultiple",
label: "关联标签: "
type: "selectRemote",
label: "关联标签: ",
options: []
},
{

17
src/views/productManagement/list/edit.vue
View File

@@ -41,6 +41,7 @@
:formData="dataStore.formData"
:rules="dataStore.rules"
ref="formRef"
@handleSelectRometeEmits="handleSelectRometeEmits"
@handleRadioGroupEmits="handleRadioGroupEmits"
/>
</el-tab-pane>
@@ -159,15 +160,18 @@ const getProductCategoryList = async () => {
getProductCategoryList();
//兼容性信息(后端大佬说直接掉列表接口)
const getProductCompatibilityList = async () => {
const result = await getProductCompatibilityListApi({ is_show: 1 });
const getProductCompatibilityList = async (label_name: any) => {
if (!label_name) {
return;
}
const result = await getProductCompatibilityListApi({ is_show: 1, page: 1, size: 50, label_name });
if (result?.code === 0) {
let arr: any[] = [];
if (result?.data?.data?.length) {
result?.data?.data?.forEach((item: any) => {
let obj = {
value: item.id,
label: item.label_name
name: item.label_name
};
arr.push(obj);
});
@@ -176,7 +180,6 @@ const getProductCompatibilityList = async () => {
}
}
};
getProductCompatibilityList();
//相关信息及行远程搜索下拉框点击
const handleRemoteClick = (params: any) => {
@@ -216,11 +219,15 @@ const handleRadioGroupEmits = (params: any) => {
dataStore.formData = cloneDeep(FORM_DATA_LV2);
dataStore.rules = cloneDeep(RULES_LV2);
} else {
dataStore.ruleForm.className = "";
dataStore.ruleForm.series_name = "";
dataStore.formData = cloneDeep(FORM_DATA_LV1);
dataStore.rules = cloneDeep(RULES_LV1);
}
};
const handleSelectRometeEmits = (params: any) => {
console.log(params.query, "=============params=========");
getProductCompatibilityList(params.query);
};
</script>
<style scoped></style>

11
src/views/productManagement/list/utils/edit/initDetailParams.ts
View File

@@ -92,17 +92,26 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
if (data.compat.length) {
dataStore.ruleForm = data.compat[0];
let ids: any[] = [];
let options: any[] = [];
dataStore.ruleForm?.compat.forEach((item: any) => {
ids.push(item.compat_id);
options.push({
value: item.compat_id,
name: item.label_name
});
});
dataStore.ruleForm.compat_id = ids;
//
console.log(options, "===options===");
if (dataStore.ruleForm.show_series_name === 1) {
dataStore.formData = cloneDeep(FORM_DATA_LV2);
dataStore.rules = cloneDeep(RULES_LV2);
dataStore.formData[0].options = options;
} else {
dataStore.ruleForm.className = "";
dataStore.ruleForm.series_name = "";
dataStore.formData = cloneDeep(FORM_DATA_LV1);
dataStore.rules = cloneDeep(RULES_LV1);
dataStore.formData[0].options = options;
}
}
};