fix: 配置参数下拉选择宽度固定

This commit is contained in:
TsMask
2023-11-06 16:38:25 +08:00
parent 5db5c50f73
commit 4e3e07f603
4 changed files with 95 additions and 248 deletions

View File

@@ -18,7 +18,7 @@ export async function getParamConfigTopTab(neType: string) {
url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/param_config`, url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/param_config`,
method: 'get', method: 'get',
params: { params: {
SQL: `SELECT top_display,top_tag FROM param_config WHERE ne_type = '${neType}'`, SQL: `SELECT top_display,top_tag,method FROM param_config WHERE ne_type = '${neType}'`,
}, },
}); });
// 解析数据 // 解析数据

View File

@@ -1084,11 +1084,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ paddingTop: '0px' }"> <a-card :bordered="false" :body-style="{ paddingTop: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<a-space <a-space :size="8" align="center" v-if="false">
:size="8"
align="center"
v-if="false"
>
<a-popconfirm <a-popconfirm
placement="topLeft" placement="topLeft"
title="网元配置重新载入" title="网元配置重新载入"
@@ -1166,6 +1162,7 @@ onMounted(() => {
v-model:value="tableState.editRecord['value']" v-model:value="tableState.editRecord['value']"
:min="0" :min="0"
:max="65535" :max="65535"
style="min-width: 180px;"
></a-input-number> ></a-input-number>
<a-switch <a-switch
v-else-if="record['type'] === 'bool'" v-else-if="record['type'] === 'bool'"
@@ -1177,6 +1174,7 @@ onMounted(() => {
v-else-if="record['type'] === 'enum'" v-else-if="record['type'] === 'enum'"
v-model:value="tableState.editRecord['value']" v-model:value="tableState.editRecord['value']"
:allow-clear="true" :allow-clear="true"
style="min-width: 180px;"
> >
<a-select-option <a-select-option
:value="+v" :value="+v"
@@ -1218,7 +1216,7 @@ onMounted(() => {
v-show="tableState.type === 'array'" v-show="tableState.type === 'array'"
class="table" class="table"
row-key="index" row-key="index"
:columns="tableState.arrayColumns" :columns="tab.method === 'get' ? tableState.arrayColumns.filter((s:any)=>s.key !== 'index') : tableState.arrayColumns"
:loading="tableState.loading" :loading="tableState.loading"
:data-source="tableState.arrayData" :data-source="tableState.arrayData"
:size="tableState.size" :size="tableState.size"
@@ -1229,7 +1227,12 @@ onMounted(() => {
v-model:expanded-row-keys="tableState.arrayChildExpandKeys" v-model:expanded-row-keys="tableState.arrayChildExpandKeys"
> >
<template #title> <template #title>
<a-button type="primary" @click.prevent="arrayAdd" size="small"> <a-button
type="primary"
@click.prevent="arrayAdd"
size="small"
v-if="tab.method !== 'get'"
>
<template #icon> <PlusOutlined /> </template> <template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }} {{ t('common.addText') }}
</a-button> </a-button>
@@ -1319,6 +1322,7 @@ onMounted(() => {
v-model:value=" v-model:value="
tableState.editRecord[text.name]['value'] tableState.editRecord[text.name]['value']
" "
style="width: 100%"
></a-input> ></a-input>
<a-input-number <a-input-number
v-else-if="text['type'] === 'int'" v-else-if="text['type'] === 'int'"
@@ -1327,6 +1331,7 @@ onMounted(() => {
" "
:min="0" :min="0"
:max="65535" :max="65535"
style="width: 100%"
></a-input-number> ></a-input-number>
<a-switch <a-switch
v-else-if="text['type'] === 'bool'" v-else-if="text['type'] === 'bool'"
@@ -1340,12 +1345,12 @@ onMounted(() => {
v-else-if="text['type'] === 'enum'" v-else-if="text['type'] === 'enum'"
v-model:value=" v-model:value="
tableState.editRecord[text.name]['value'] tableState.editRecord[text.name]['value']
" "
:allow-clear="true" style="min-width: 180px;"
> >
<a-select-option <a-select-option
:value="v" :value="+v"
:key="v" :key="+v"
v-for="(k, v) in JSON.parse(text['filter'])" v-for="(k, v) in JSON.parse(text['filter'])"
> >
{{ k }} {{ k }}
@@ -1490,6 +1495,7 @@ onMounted(() => {
'value' 'value'
] ]
" "
style="width: 100%;"
></a-input> ></a-input>
<a-input-number <a-input-number
v-else-if="text['type'] === 'int'" v-else-if="text['type'] === 'int'"
@@ -1500,6 +1506,7 @@ onMounted(() => {
" "
:min="0" :min="0"
:max="65535" :max="65535"
style="width: 100%;"
></a-input-number> ></a-input-number>
<a-switch <a-switch
v-else-if="text['type'] === 'bool'" v-else-if="text['type'] === 'bool'"
@@ -1519,10 +1526,11 @@ onMounted(() => {
] ]
" "
:allow-clear="true" :allow-clear="true"
style="min-width: 180px;"
> >
<a-select-option <a-select-option
:value="v" :value="+v"
:key="v" :key="+v"
v-for="(k, v) in JSON.parse(text['filter'])" v-for="(k, v) in JSON.parse(text['filter'])"
> >
{{ k }} {{ k }}

View File

@@ -1,64 +0,0 @@
<script setup lang="ts">
import { reactive, toRaw, watch, ref } from 'vue';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { listNeVersion } from '@/api/configManage/softwareManage';
import { parseDateToStr } from '@/utils/date-utils';
import useNeInfoStore from '@/store/modules/neinfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
title: {
type: String,
default: '标题',
},
visible: {
type: Boolean,
default: false,
},
data: {
type: Object,
required: true,
},
});
/**弹框取消按钮事件 */
function fnModalCancel() {
emit('cancel');
}
/**显示弹框时初始数据 */
function init() {
console.log(props.data);
}
/**监听是否显示,初始数据 */
watch(
() => props.visible,
val => {
if (val) init();
}
);
</script>
<template>
<a-modal
width="800px"
:title="props.title"
:visible="props.visible"
:keyboard="false"
:mask-closable="false"
@cancel="fnModalCancel"
:footer="null"
>
{{ props }}
</a-modal>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

View File

@@ -20,7 +20,6 @@ import { toRaw } from 'vue';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils'; import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import { DataNode, EventDataNode } from 'ant-design-vue/lib/tree'; import { DataNode, EventDataNode } from 'ant-design-vue/lib/tree';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/lib/table';
import ArrayChildren from './components/array-children.vue';
const { t } = useI18n(); const { t } = useI18n();
/**网元参数 */ /**网元参数 */
@@ -990,34 +989,6 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
return result; return result;
} }
/**网元重新加载状态 */
let neReloadLoading = ref<boolean>(false);
/**网元重新加载 */
function fnNeReload() {
// 获取数据
const neType = neTypeSelect.value[0];
const neId = neTypeSelect.value[1];
neReloadLoading.value = true;
updateNeConfigReload(neType, neId)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `网元重新加载完成`,
duration: 3,
});
} else {
message.error({
content: `网元重新加载失败`,
duration: 3,
});
}
})
.finally(() => {
neReloadLoading.value = false;
});
}
onMounted(() => { onMounted(() => {
// 获取网元网元列表 // 获取网元网元列表
useNeInfoStore() useNeInfoStore()
@@ -1307,32 +1278,7 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
<!-- 网元类型 --> <!-- 网元类型 -->
<a-card :bordered="false" title="网元类型" :loading="state.treeLoading"> <a-card :bordered="false" title="网元类型" :loading="state.treeLoading">
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra> </template>
<a-space
:size="8"
align="center"
v-show="!['PCF', 'IMS'].includes(neTypeSelect[0])"
>
<a-popconfirm
placement="rightTop"
title="确认对该网元进行配置重新载入"
:ok-text="t('common.ok')"
:cancel-text="t('common.cancel')"
:disabled="neReloadLoading"
@confirm="fnNeReload"
>
<a-button
type="dashed"
danger
:loading="neReloadLoading"
size="small"
>
<template #icon><SyncOutlined /></template>
重新载入
</a-button>
</a-popconfirm>
</a-space>
</template>
<a-form layout="vertical" autocomplete="off"> <a-form layout="vertical" autocomplete="off">
<a-form-item name="neId "> <a-form-item name="neId ">
@@ -1367,7 +1313,7 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
{{ state.title }} {{ state.title }}
</a-typography-text> </a-typography-text>
<a-typography-text type="danger" v-else> <a-typography-text type="danger" v-else>
左侧命令导航中选择要操作项 左侧配置中选择要操作项
</a-typography-text> </a-typography-text>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
@@ -1439,14 +1385,14 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
) )
" "
v-model:value="state.editRecord['value']" v-model:value="state.editRecord['value']"
:placeholder="record['filter']" style="min-width: 200px"
></a-input> ></a-input>
<a-input-number <a-input-number
v-else-if="record['type'] === 'int'" v-else-if="record['type'] === 'int'"
v-model:value="state.editRecord['value']" v-model:value="state.editRecord['value']"
:min="0" :min="0"
:max="65535" :max="65535"
:placeholder="record['filter']" style="min-width: 200px"
></a-input-number> ></a-input-number>
<a-switch <a-switch
v-else-if="record['type'] === 'bool'" v-else-if="record['type'] === 'bool'"
@@ -1457,8 +1403,8 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
<a-select <a-select
v-else-if="record['type'] === 'enum'" v-else-if="record['type'] === 'enum'"
v-model:value="state.editRecord['value']" v-model:value="state.editRecord['value']"
:placeholder="record['filter']"
:allow-clear="true" :allow-clear="true"
style="min-width: 200px"
> >
<a-select-option <a-select-option
:value="+v" :value="+v"
@@ -1520,109 +1466,86 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
<a-form <a-form
class="form" class="form"
v-show="state.treeSelectNode.title.indexOf('Index-') === 0" v-show="state.treeSelectNode.title.indexOf('Index-') === 0"
layout="vertical" layout="horizontal"
autocomplete="off" autocomplete="off"
:validate-on-rule-change="false" :validate-on-rule-change="false"
:validateTrigger="[]" :validateTrigger="[]"
> >
<a-row :gutter="16"> <a-form-item
<a-col v-for="item in state.treeSelectNode.record"
:lg="6" :label="item.display"
:md="12" :name="item.name"
:xs="24" :required="item.optional === 'false'"
v-for="item in state.treeSelectNode.record" >
> <a-tooltip placement="topLeft">
<a-form-item <template #title v-if="item.comment">
:label="item.display" {{ item.comment }}
:name="item.name" </template>
:required="item.optional === 'false'" <div class="editable-cell">
> {{ state.editRecord[item.name] }}
<a-tooltip placement="topLeft"> <div
<template #title v-if="item.comment"> v-if="
{{ item.comment }} !Array.isArray(item.array) &&
</template> state.editRecord[item.name] !== undefined
<div class="editable-cell"> "
{{ state.editRecord[item.name] }} class="editable-cell__input-wrapper"
<div >
<a-space :size="16" align="center" direction="horizontal">
<a-input
v-if=" v-if="
!Array.isArray(item.array) && ['string', 'ipv6', 'ipv4', 'regex'].includes(
state.editRecord[item.name] !== undefined item['type']
)
" "
class="editable-cell__input-wrapper" v-model:value="state.editRecord[item.name]['value']"
></a-input>
<a-input-number
v-else-if="item['type'] === 'int'"
v-model:value="state.editRecord[item.name]['value']"
:min="0"
:max="65535"
></a-input-number>
<a-switch
v-else-if="item['type'] === 'bool'"
v-model:checked="state.editRecord[item.name]['value']"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
></a-switch>
<a-select
v-else-if="item['type'] === 'enum'"
v-model:value="state.editRecord[item.name]['value']"
:allow-clear="true"
style="width: 100%"
> >
<a-space <a-select-option
:size="16" :value="+v"
align="center" :key="+v"
direction="horizontal" v-for="(k, v) in JSON.parse(item['filter'])"
> >
<a-input {{ k }}
v-if=" </a-select-option>
['string', 'ipv6', 'ipv4', 'regex'].includes( </a-select>
item['type'] </a-space>
) </div>
" <a-button
v-model:value="state.editRecord[item.name]['value']" type="link"
:placeholder="item['filter']" size="small"
></a-input> @click.prevent=""
<a-input-number v-else-if="Array.isArray(item.array)"
v-else-if="item['type'] === 'int'" >
v-model:value="state.editRecord[item.name]['value']" 详情
:min="0" </a-button>
:max="65535" <div v-else class="editable-cell__text-wrapper">
:placeholder="item['filter']" {{ `${item.value}` }}
></a-input-number> </div>
<a-switch </div>
v-else-if="item['type'] === 'bool'" </a-tooltip>
v-model:checked=" </a-form-item>
state.editRecord[item.name]['value']
"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
></a-switch>
<a-select
v-else-if="item['type'] === 'enum'"
v-model:value="state.editRecord[item.name]['value']"
:placeholder="item['filter']"
:allow-clear="true"
>
<a-select-option
:value="v"
:key="v"
v-for="(k, v) in JSON.parse(item['filter'])"
>
{{ k }}
</a-select-option>
</a-select>
</a-space>
</div>
<a-button
type="link"
size="small"
@click.prevent=""
v-else-if="Array.isArray(item.array)"
>
详情
</a-button>
<div v-else class="editable-cell__text-wrapper">
{{ `${item.value}` }}
</div>
</div>
</a-tooltip>
</a-form-item>
</a-col>
</a-row>
</a-form> </a-form>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<!-- Array子列表 -->
<ArrayChildren
v-model:visible="modalArrayChildState.visible"
:title="modalArrayChildState.title"
v-model:data="modalArrayChildState.data"
></ArrayChildren>
<a-card <a-card
:bordered="false" :bordered="false"
:body-style="{ :body-style="{
@@ -1664,27 +1587,7 @@ let modalArrayChildState: ModalArrayChildStateType = reactive({
<a-card :bordered="false" :body-style="{ paddingTop: '0px' }"> <a-card :bordered="false" :body-style="{ paddingTop: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title> </template>
<a-space
:size="8"
align="center"
v-show="!['PCF', 'IMS'].includes(neTypeSelect[0])"
>
<a-popconfirm
placement="topLeft"
title="网元配置重新载入"
:ok-text="t('common.ok')"
:cancel-text="t('common.cancel')"
:disabled="neReloadLoading"
@confirm="fnNeReload"
>
<a-button type="dashed" danger :loading="neReloadLoading">
<template #icon><SyncOutlined /></template>
重新载入
</a-button>
</a-popconfirm>
</a-space>
</template>
<a-tabs <a-tabs
v-model:activeKey="tabState.tabActiveTopTag" v-model:activeKey="tabState.tabActiveTopTag"
:tab-position="tabState.tabPosition" :tab-position="tabState.tabPosition"