fix 网元输入框自动完成下拉选择

This commit is contained in:
TsMask
2023-09-18 21:06:13 +08:00
parent 429f30c322
commit 307ab8bcf6
3 changed files with 28 additions and 10 deletions

View File

@@ -8,13 +8,16 @@ type NeInfo = {
/**网元列表 */ /**网元列表 */
nelist: Record<string, any>[]; nelist: Record<string, any>[];
/**级联options树结构 */ /**级联options树结构 */
neOtions: Record<string, any>[]; neCascaderOtions: Record<string, any>[];
/**选择器单级父类型 */
neSelectOtions: Record<string, any>[];
}; };
const useNeInfoStore = defineStore('neinfo', { const useNeInfoStore = defineStore('neinfo', {
state: (): NeInfo => ({ state: (): NeInfo => ({
nelist: [], nelist: [],
neOtions: [], neCascaderOtions: [],
neSelectOtions: [],
}), }),
getters: { getters: {
/** /**
@@ -22,8 +25,16 @@ const useNeInfoStore = defineStore('neinfo', {
* @param state 内部属性不用传入 * @param state 内部属性不用传入
* @returns 级联options * @returns 级联options
*/ */
getNeOtions(state) { getNeCascaderOtions(state) {
return state.neOtions; return state.neCascaderOtions;
},
/**
* 选择器单级父类型
* @param state 内部属性不用传入
* @returns 级联options
*/
getNeSelectOtions(state) {
return state.neSelectOtions;
}, },
}, },
actions: { actions: {
@@ -41,6 +52,9 @@ const useNeInfoStore = defineStore('neinfo', {
} }
const res = await getNelistAll(); const res = await getNelistAll();
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) { if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
// 原始列表
this.nelist = res.data;
// 转级联数据 // 转级联数据
const options = parseDataToOptions( const options = parseDataToOptions(
res.data, res.data,
@@ -48,8 +62,10 @@ const useNeInfoStore = defineStore('neinfo', {
'neName', 'neName',
'neId' 'neId'
); );
this.neCascaderOtions = options;
this.neOtions = options; // 转选择器单级父类型
this.neSelectOtions = options.map(item => item);
} }
return res; return res;
}, },

View File

@@ -16,6 +16,7 @@ import {
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { getConfigInfo, updateConfig } from '@/api/configManage/config'; import { getConfigInfo, updateConfig } from '@/api/configManage/config';
import useNeInfoStore from '@/store/modules/neinfo';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@@ -251,7 +252,7 @@ function fnModalVisibleByEdit() {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
modalState.from.configTag = res.data.configTag modalState.from.configTag = res.data.configTag
modalState.from.autoBackupTime = res.data.value modalState.from.autoBackupTime = res.data.value
modalState.title = t('views.configManage.backupManage.SetBackupTask'); modalState.title = t('views.configManage.backupManage.setBackupTask');
modalState.visibleByEdit = true; modalState.visibleByEdit = true;
} else { } else {
message.error(`获取配置信息失败`, 2); message.error(`获取配置信息失败`, 2);
@@ -333,11 +334,12 @@ onMounted(() => {
:label="t('views.configManage.backupManage.neType')" :label="t('views.configManage.backupManage.neType')"
name="neType " name="neType "
> >
<a-input <a-auto-complete
v-model:value="queryParams.neType" v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions"
allow-clear allow-clear
:placeholder="t('views.configManage.backupManage.neTypePlease')" :placeholder="t('views.configManage.backupManage.neTypePlease')"
></a-input> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
@@ -364,7 +366,7 @@ onMounted(() => {
<a-space :size="8" align="center"> <a-space :size="8" align="center">
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()"> <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
<template #icon><FieldTimeOutlined /></template> <template #icon><FieldTimeOutlined /></template>
{{ t('views.configManage.backupManage.SetBackupTask') }} {{ t('views.configManage.backupManage.setBackupTask') }}
</a-button> </a-button>
</a-space> </a-space>
</template> </template>

View File

@@ -97,7 +97,7 @@ onMounted(() => {
<a-form-item label="网元类型" name="neType "> <a-form-item label="网元类型" name="neType ">
<a-cascader <a-cascader
v-model:value="queryParams.neType" v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeOtions" :options="useNeInfoStore().getNeCascaderOtions"
placeholder="请选择网元" placeholder="请选择网元"
/> />
</a-form-item> </a-form-item>