fix: 参数配置Tree树状展开
This commit is contained in:
TsMask
@@ -737,6 +737,7 @@ function arrayChildDelete(row: Record<string, any>) {
|
||||
/**多列表嵌套行新增单行 */
|
||||
function arrayChildAdd() {
|
||||
const len = tableState.arrayChildData.length;
|
||||
debugger
|
||||
let lastItme = {};
|
||||
let newIndex = 0;
|
||||
// 无数据时生成临时记录
|
||||
@@ -1044,7 +1045,9 @@ type StateType = {
|
||||
arrayChildData: Record<string, any>[];
|
||||
/**多列嵌套记录规则 */
|
||||
arrayChildDataRule: Record<string, any>;
|
||||
/**多列嵌套新增行记录Index */
|
||||
/**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
|
||||
arrayChildKey: number;
|
||||
/**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
|
||||
arrayChildNewIndex: number;
|
||||
/**多列嵌套编辑行记录 */
|
||||
arrayChildEditRecord: Record<string, any>;
|
||||
@@ -1066,7 +1069,8 @@ let state: StateType = reactive({
|
||||
arrayChildTitle: '',
|
||||
arrayChildData: [],
|
||||
arrayChildDataRule: {},
|
||||
arrayChildNewIndex: -1,
|
||||
arrayChildKey: -1,
|
||||
arrayChildNewIndex: -3,
|
||||
arrayChildEditRecord: {},
|
||||
});
|
||||
|
||||
@@ -1173,6 +1177,7 @@ function fnLoadConfigNodeData(treeNode: EventDataNode): Promise<void> {
|
||||
function fnSelectConfigNode(_: any, info: any) {
|
||||
console.log('fnSelectConfigNode ', info);
|
||||
state.editRecord = {};
|
||||
arrayChildExpandClose();
|
||||
const node = info.node;
|
||||
// array类型的含子节点使用index子项
|
||||
if (node.title.indexOf('Index-') === 0) {
|
||||
@@ -1239,6 +1244,7 @@ function arrayEdit2(record: Record<string, any>[]) {
|
||||
/**多列表编辑关闭 */
|
||||
function arrayEditClose2() {
|
||||
state.editRecord = {};
|
||||
arrayChildExpandClose();
|
||||
}
|
||||
|
||||
/**多列表编辑确认 */
|
||||
@@ -1306,38 +1312,45 @@ function arrayChildExpand2(row: Record<string, any>) {
|
||||
state.arrayChildData = dataArray;
|
||||
|
||||
// 无数据时,需要临时数据用于新增
|
||||
if (dataArray.length === 0) {
|
||||
let itemTemp: Record<string, any> = {};
|
||||
for (const rule of ruleArr) {
|
||||
itemTemp[rule.name] = rule;
|
||||
}
|
||||
state.arrayChildDataRule = itemTemp;
|
||||
}
|
||||
state.arrayChildDataRule = { title: `Index-0`, key: 0, record: ruleArr };
|
||||
|
||||
// 设置标题
|
||||
state.arrayChildTitle = from['display'];
|
||||
}
|
||||
|
||||
/**多列表嵌套行编辑 */
|
||||
function arrayChildEdit2(records: Record<string, any>[]) {
|
||||
const row: Record<string, any> = {};
|
||||
for (const item of records) {
|
||||
row[item.name] = Object.assign({}, item);
|
||||
}
|
||||
state.arrayChildEditRecord = row;
|
||||
/**多列表关闭展开嵌套行 */
|
||||
function arrayChildExpandClose() {
|
||||
state.arrayChildTitle = '';
|
||||
state.arrayChildDataRule = {};
|
||||
state.arrayChildData = [];
|
||||
state.arrayChildEditRecord = {};
|
||||
state.arrayChildKey = -1;
|
||||
state.arrayChildNewIndex = -3;
|
||||
}
|
||||
|
||||
/**多列表嵌套行编辑关闭 */
|
||||
function arrayChildEditClose2() {
|
||||
if (state.arrayChildNewIndex !== -1) {
|
||||
state.arrayChildNewIndex = -1;
|
||||
if (state.arrayChildNewIndex > -1) {
|
||||
state.arrayChildData.pop();
|
||||
}
|
||||
state.arrayChildKey = -1;
|
||||
state.arrayChildNewIndex = -3;
|
||||
state.arrayChildEditRecord = {};
|
||||
}
|
||||
|
||||
/**多列表嵌套行编辑 */
|
||||
function arrayChildEdit2(item: Record<string, any>, index: number) {
|
||||
const row: Record<string, any> = {};
|
||||
for (const r of item.record) {
|
||||
row[r.name] = Object.assign({}, r);
|
||||
}
|
||||
state.arrayChildEditRecord = row;
|
||||
state.arrayChildKey = item.key;
|
||||
state.arrayChildNewIndex = index;
|
||||
}
|
||||
|
||||
/**多列表嵌套行编辑确认 */
|
||||
function arrayChildEditOk2() {
|
||||
debugger;
|
||||
const from = toRaw(state.arrayChildEditRecord);
|
||||
const loc = `loc/${from['index']['value']}`;
|
||||
const neType = neTypeSelect.value[0];
|
||||
@@ -1357,12 +1370,6 @@ function arrayChildEditOk2() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
// UPF参数不统一
|
||||
// if (neType === 'UPF') {
|
||||
// data[parseFirstUpper(key)] = from[key]['value'];
|
||||
// } else {
|
||||
// data[key] = from[key]['value'];
|
||||
// }
|
||||
data[key] = from[key]['value'];
|
||||
}
|
||||
|
||||
@@ -1373,11 +1380,19 @@ function arrayChildEditOk2() {
|
||||
loc,
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
message.success({
|
||||
content: ` 成功 Index :${from['index']['value']} `,
|
||||
duration: 3,
|
||||
});
|
||||
//state.arrayChildData.pop();
|
||||
state.arrayChildKey = -1;
|
||||
state.arrayChildNewIndex = -3;
|
||||
state.arrayChildEditRecord = {};
|
||||
}
|
||||
|
||||
/**多列表嵌套行删除单行 */
|
||||
function arrayChildDelete2(key: string) {
|
||||
debugger;
|
||||
const loc = `${state.treeSelectNode.key}/${key}`;
|
||||
console.log({
|
||||
neType: neTypeSelect.value[0],
|
||||
@@ -1385,11 +1400,17 @@ function arrayChildDelete2(key: string) {
|
||||
topTag: state.treeSelectKey,
|
||||
loc,
|
||||
});
|
||||
|
||||
state.arrayChildData = state.arrayChildData.filter(
|
||||
(item: any) => item.key !== key
|
||||
);
|
||||
}
|
||||
|
||||
/**多列表嵌套行新增单行 */
|
||||
function arrayChildAdd2() {
|
||||
debugger;
|
||||
if (state.arrayChildNewIndex > -1) {
|
||||
state.arrayChildData.pop();
|
||||
}
|
||||
const len = state.arrayChildData.length;
|
||||
let lastItme = {};
|
||||
let newIndex = 0;
|
||||
@@ -1410,7 +1431,8 @@ function arrayChildAdd2() {
|
||||
newIndex = 0;
|
||||
}
|
||||
row.value = newIndex;
|
||||
state.arrayChildNewIndex = newIndex;
|
||||
from.key = newIndex;
|
||||
from.title = `Index-${newIndex}`;
|
||||
continue;
|
||||
}
|
||||
// 子嵌套的不初始
|
||||
@@ -1467,14 +1489,14 @@ function arrayChildAdd2() {
|
||||
}
|
||||
}
|
||||
|
||||
state.arrayChildEditRecord = from;
|
||||
state.arrayChildData.push(from);
|
||||
arrayChildEdit2(from, newIndex);
|
||||
}
|
||||
|
||||
/**多列表新增单行确认 */
|
||||
function arrayChildAddOk2() {
|
||||
debugger;
|
||||
const from = toRaw(tableState.arrayChildEditRecord);
|
||||
const loc = `${tableState.arrayChildLoc}/${from['index']['value']}`;
|
||||
const from = toRaw(state.arrayChildEditRecord);
|
||||
const loc = `${state.treeSelectKey}/${from['index']['value']}`;
|
||||
const neType = neTypeSelect.value[0];
|
||||
|
||||
let data: Record<string, any> = {};
|
||||
@@ -1498,10 +1520,19 @@ function arrayChildAddOk2() {
|
||||
console.log({
|
||||
neType: neType,
|
||||
neId: neTypeSelect.value[1],
|
||||
topTag: tabState.tabActiveTopTag,
|
||||
topTag: state.treeSelectKey,
|
||||
loc,
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
message.success({
|
||||
content: ` 成功 Index :${from['index']['value']} `,
|
||||
duration: 3,
|
||||
});
|
||||
//state.arrayChildData.pop();
|
||||
state.arrayChildKey = -1;
|
||||
state.arrayChildNewIndex = -3;
|
||||
state.arrayChildEditRecord = {};
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1543,10 +1574,7 @@ function arrayChildAddOk2() {
|
||||
<!-- 配置参数显示内容 -->
|
||||
<a-card :bordered="false" :loading="!state.title">
|
||||
<template #title>
|
||||
<a-typography-text strong v-if="state.arrayChildTitle">
|
||||
{{ state.arrayChildTitle }}
|
||||
</a-typography-text>
|
||||
<a-typography-text strong v-else-if="state.title">
|
||||
<a-typography-text strong v-if="state.title">
|
||||
{{ state.title }}
|
||||
</a-typography-text>
|
||||
<a-typography-text type="danger" v-else>
|
||||
@@ -1569,10 +1597,7 @@ function arrayChildAddOk2() {
|
||||
<!-- array类型数据项显示表单项 -->
|
||||
<a-space
|
||||
:size="8"
|
||||
v-show="
|
||||
state.treeSelectNode.title.indexOf('Index-') === 0 &&
|
||||
!state.arrayChildTitle
|
||||
"
|
||||
v-show="state.treeSelectNode.title.indexOf('Index-') === 0"
|
||||
>
|
||||
<a-button type="default" @click.prevent="arrayEditClose2">
|
||||
<template #icon> <CloseOutlined /> </template>
|
||||
@@ -1590,14 +1615,6 @@ function arrayChildAddOk2() {
|
||||
保存
|
||||
</a-button>
|
||||
</a-space>
|
||||
|
||||
<!-- array类型数据项显示表单项 -->
|
||||
<a-space :size="8" v-show="!!state.arrayChildTitle">
|
||||
<a-button type="default" @click.prevent="arrayEditClose2">
|
||||
<template #icon> <CloseOutlined /> </template>
|
||||
返回
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- list类型显示表格列表 -->
|
||||
@@ -1792,75 +1809,71 @@ function arrayChildAddOk2() {
|
||||
</a-button>
|
||||
|
||||
<div v-else class="editable-cell__text-wrapper">
|
||||
{{ `${item.value || ' ' }` }}
|
||||
{{ `${item.value || ' '}` }}
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<template
|
||||
#extra
|
||||
v-if="
|
||||
Array.isArray(item.array) &&
|
||||
item.display === state.arrayChildTitle
|
||||
"
|
||||
>
|
||||
<!-- array类型多列嵌套数据项显示表单项 -->
|
||||
<template v-if="state.arrayChildTitle">
|
||||
<!-- array类型显示提示内容 -->
|
||||
<a-typography>
|
||||
<a-typography-title :level="3">
|
||||
{{ state.arrayChildTitle }}
|
||||
</a-typography-title>
|
||||
<a-typography-paragraph>
|
||||
可通过右上角操作当前到 {{ state.arrayChildTitle }} 配置
|
||||
<br />
|
||||
当前存在以下配置项：
|
||||
</a-typography-paragraph>
|
||||
<a-typography-text strong v-for="item in state.arrayChildData">
|
||||
<a-space :size="16">
|
||||
<div>{{ item.title }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>新增</template>
|
||||
<a-card
|
||||
bordered
|
||||
size="small"
|
||||
:title="state.arrayChildTitle"
|
||||
v-show="state.arrayChildTitle"
|
||||
>
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="arrayChildAdd2()"
|
||||
>
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>提交</template>
|
||||
<a-popconfirm
|
||||
:title="`确认提交更新 Index 为 【 ${tableState.arrayChildNewIndex} 】 的记录吗？确认提交新增 Index 为 的记录吗？`"
|
||||
placement="left"
|
||||
@confirm="
|
||||
tableState.arrayChildNewIndex === -1
|
||||
? arrayChildEditOk2()
|
||||
: arrayChildAddOk2()
|
||||
"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
size="small"
|
||||
>
|
||||
<template #icon><CheckOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>取消</template>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEditClose2()"
|
||||
>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>删除</template>
|
||||
<a-button
|
||||
type="text"
|
||||
danger
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="arrayChildExpandClose()"
|
||||
>
|
||||
<template #icon> <CloseOutlined /> </template>
|
||||
{{ t('common.close') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<!-- array类型显示提示内容 -->
|
||||
<a-row :gutter="16" v-for="item in state.arrayChildData">
|
||||
<a-col :lg="18" :md="18" :xs="24">
|
||||
<span>{{ item.title }}</span>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="6" :xs="24">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.viewText') }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEdit2(item, -2)"
|
||||
>
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
t('common.deleteText')
|
||||
}}</template>
|
||||
<a-button
|
||||
danger
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildDelete2(item.key)"
|
||||
>
|
||||
@@ -1868,14 +1881,68 @@ function arrayChildAddOk2() {
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</a-typography-text>
|
||||
</a-typography>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card
|
||||
bordered
|
||||
size="small"
|
||||
:title="item.title"
|
||||
v-if="state.arrayChildKey === item.key"
|
||||
>
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8">
|
||||
<a-tooltip v-if="state.arrayChildNewIndex === -2">
|
||||
<template #title>{{
|
||||
t('common.editText')
|
||||
}}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEdit2(item, -1)"
|
||||
>
|
||||
<template #icon><FormOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
{{ state.arrayChildData }}
|
||||
<a-tooltip v-if="state.arrayChildNewIndex > -2">
|
||||
<template #title>{{ t('common.ok') }}</template>
|
||||
<a-popconfirm
|
||||
:title="`确认提交${
|
||||
state.arrayChildNewIndex === -1
|
||||
? '更新'
|
||||
: '新增'
|
||||
} Index 为 【 ${
|
||||
state.arrayChildKey
|
||||
} 】 的记录吗？`"
|
||||
placement="bottomLeft"
|
||||
@confirm="
|
||||
state.arrayChildNewIndex === -1
|
||||
? arrayChildEditOk2()
|
||||
: arrayChildAddOk2()
|
||||
"
|
||||
>
|
||||
<a-button type="text" size="small">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
|
||||
====
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
t('common.close')
|
||||
}}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEditClose2()"
|
||||
>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
{{ state.arrayChildEditRecord }}
|
||||
<a-form
|
||||
class="form"
|
||||
layout="horizontal"
|
||||
@@ -1884,7 +1951,7 @@ function arrayChildAddOk2() {
|
||||
:validateTrigger="[]"
|
||||
>
|
||||
<a-form-item
|
||||
v-for="item in state.arrayChildData"
|
||||
v-for="item in state.arrayChildEditRecord"
|
||||
:label="item.display"
|
||||
:name="item.name"
|
||||
:required="item.optional === 'false'"
|
||||
@@ -1893,14 +1960,231 @@ function arrayChildAddOk2() {
|
||||
<template #title v-if="item.comment">
|
||||
{{ item.comment }}
|
||||
</template>
|
||||
<div class="editable-cell">
|
||||
{{ state.editRecord[item.name] }}
|
||||
<div>
|
||||
<div
|
||||
v-if="
|
||||
!Array.isArray(item.array) &&
|
||||
state.editRecord[item.name] !== undefined
|
||||
state.arrayChildNewIndex > -2 &&
|
||||
state.arrayChildEditRecord[item.name] !==
|
||||
undefined
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-if="
|
||||
[
|
||||
'string',
|
||||
'ipv6',
|
||||
'ipv4',
|
||||
'regex',
|
||||
].includes(item['type'])
|
||||
"
|
||||
v-model:value="
|
||||
state.arrayChildEditRecord[item.name][
|
||||
'value'
|
||||
]
|
||||
"
|
||||
style="width: 100%"
|
||||
></a-input>
|
||||
<a-input-number
|
||||
v-else-if="item['type'] === 'int'"
|
||||
v-model:value="
|
||||
state.arrayChildEditRecord[item.name][
|
||||
'value'
|
||||
]
|
||||
"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
<a-switch
|
||||
v-else-if="item['type'] === 'bool'"
|
||||
v-model:checked="
|
||||
state.arrayChildEditRecord[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.arrayChildEditRecord[item.name][
|
||||
'value'
|
||||
]
|
||||
"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option
|
||||
:value="+v"
|
||||
:key="+v"
|
||||
v-for="(k, v) in JSON.parse(
|
||||
item['filter']
|
||||
)"
|
||||
>
|
||||
{{ k }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ `${item.value || ' '}` }}
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div>{{ state.arrayChildEditRecord }}</div>
|
||||
<div>{{ state.arrayChildNewIndex }}</div>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- array类型多列嵌套数据项显示表单项 -->
|
||||
<a-card
|
||||
bordered
|
||||
size="small"
|
||||
:title="state.arrayChildTitle"
|
||||
v-show="state.arrayChildTitle"
|
||||
>
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="arrayChildAdd2()"
|
||||
>
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.prevent="arrayChildExpandClose()"
|
||||
>
|
||||
<template #icon> <CloseOutlined /> </template>
|
||||
{{ t('common.close') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<!-- array类型显示提示内容 -->
|
||||
<a-row :gutter="16" v-for="item in state.arrayChildData">
|
||||
<a-col :lg="18" :md="18" :xs="24">
|
||||
<span>{{ item.title }}</span>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="6" :xs="24">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.viewText') }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEdit2(item, -2)"
|
||||
>
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.deleteText') }}</template>
|
||||
<a-button
|
||||
danger
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildDelete2(item.key)"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card
|
||||
bordered
|
||||
size="small"
|
||||
:title="item.title"
|
||||
v-if="state.arrayChildKey === item.key"
|
||||
>
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.editText') }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEdit2(item, -1)"
|
||||
>
|
||||
<template #icon><FormOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.ok') }}</template>
|
||||
<a-popconfirm
|
||||
:title="`确认提交${
|
||||
state.arrayChildNewIndex === -1 ? '更新' : '新增'
|
||||
} Index 为 【 ${state.arrayChildKey} 】 的记录吗？`"
|
||||
placement="bottomLeft"
|
||||
@confirm="
|
||||
state.arrayChildNewIndex === -1
|
||||
? arrayChildEditOk2()
|
||||
: arrayChildAddOk2()
|
||||
"
|
||||
>
|
||||
<a-button type="text" size="small">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.close') }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="arrayChildEditClose2()"
|
||||
>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-form
|
||||
class="form"
|
||||
layout="horizontal"
|
||||
autocomplete="off"
|
||||
:validate-on-rule-change="false"
|
||||
:validateTrigger="[]"
|
||||
>
|
||||
<a-form-item
|
||||
v-for="item in state.arrayChildEditRecord"
|
||||
:label="item.display"
|
||||
:name="item.name"
|
||||
:required="item.optional === 'false'"
|
||||
>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="item.comment">
|
||||
{{ item.comment }}
|
||||
</template>
|
||||
<div>
|
||||
<div
|
||||
v-if="
|
||||
!Array.isArray(item.array) &&
|
||||
state.arrayChildNewIndex > -2 &&
|
||||
state.arrayChildEditRecord[item.name] !==
|
||||
undefined
|
||||
"
|
||||
class="editable-cell__input-wrapper"
|
||||
>
|
||||
<a-input
|
||||
v-if="
|
||||
@@ -1908,25 +2192,33 @@ function arrayChildAddOk2() {
|
||||
item['type']
|
||||
)
|
||||
"
|
||||
v-model:value="state.editRecord[item.name]['value']"
|
||||
v-model:value="
|
||||
state.arrayChildEditRecord[item.name]['value']
|
||||
"
|
||||
style="width: 100%"
|
||||
></a-input>
|
||||
<a-input-number
|
||||
v-else-if="item['type'] === 'int'"
|
||||
v-model:value="state.editRecord[item.name]['value']"
|
||||
v-model:value="
|
||||
state.arrayChildEditRecord[item.name]['value']
|
||||
"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
<a-switch
|
||||
v-else-if="item['type'] === 'bool'"
|
||||
v-model:checked="state.editRecord[item.name]['value']"
|
||||
v-model:checked="
|
||||
state.arrayChildEditRecord[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']"
|
||||
v-model:value="
|
||||
state.arrayChildEditRecord[item.name]['value']
|
||||
"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
@@ -1940,27 +2232,174 @@ function arrayChildAddOk2() {
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click.prevent="arrayChildExpand2(item)"
|
||||
v-else-if="Array.isArray(item.array)"
|
||||
>
|
||||
详情
|
||||
</a-button>
|
||||
|
||||
<div v-else class="editable-cell__text-wrapper">
|
||||
{{ `${item.value}` }}
|
||||
<div v-else>
|
||||
{{ `${item.value || ' '}` }}
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div>{{ state.arrayChildEditRecord }}</div>
|
||||
<div>{{ state.arrayChildNewIndex }}</div>
|
||||
</a-card>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-card :bordered="false"
|
||||
:body-style="{
|
||||
marginBottom: '24px',
|
||||
marginTop: '24px',
|
||||
paddingBottom: 0,
|
||||
}">
|
||||
<a-tabs
|
||||
tab-position="left"
|
||||
size="small"
|
||||
v-model:activeKey="tabState.tabActiveTopTag"
|
||||
@change="fnTabActiveTopTag"
|
||||
destroyInactiveTabPane
|
||||
>
|
||||
<template #leftExtra>
|
||||
<a-form
|
||||
layout="inline"
|
||||
autocomplete="off"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<a-form-item name="neId ">
|
||||
<a-cascader
|
||||
v-model:value="neTypeSelect"
|
||||
:options="neCascaderOtions"
|
||||
:allow-clear="false"
|
||||
placeholder="请选择网元"
|
||||
@change="fnGetParamConfigNode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="listeningPort">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.reloadText') }}</template>
|
||||
<a-button
|
||||
type="default"
|
||||
@click.prevent="fnTabActiveTopTag('#')"
|
||||
>
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<a-tab-pane
|
||||
v-for="tab in tabState.tabNames"
|
||||
:key="tab.topTag"
|
||||
:tab="tab.topDisplay"
|
||||
>
|
||||
{{ tab.topDisplay }}
|
||||
<!-- list类型显示表格列表 -->
|
||||
<a-table
|
||||
v-show="state.treeSelectNode.keyType === 'list'"
|
||||
class="table"
|
||||
row-key="name"
|
||||
:columns="listColumns"
|
||||
:data-source="state.treeSelectNode.keyRecordList"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
:scroll="{ x: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'value'">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="record.comment">
|
||||
{{ record.comment }}
|
||||
</template>
|
||||
<div class="editable-cell">
|
||||
<div
|
||||
v-if="state.editRecord['display'] === record['display']"
|
||||
class="editable-cell__input-wrapper"
|
||||
>
|
||||
<a-input
|
||||
v-if="
|
||||
['string', 'ipv6', 'ipv4', 'regex'].includes(
|
||||
record['type']
|
||||
)
|
||||
"
|
||||
v-model:value="state.editRecord['value']"
|
||||
style="width: 100%"
|
||||
></a-input>
|
||||
<a-input-number
|
||||
v-else-if="record['type'] === 'int'"
|
||||
v-model:value="state.editRecord['value']"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
<a-switch
|
||||
v-else-if="record['type'] === 'bool'"
|
||||
v-model:checked="state.editRecord['value']"
|
||||
:checked-children="t('common.switch.open')"
|
||||
:un-checked-children="t('common.switch.shut')"
|
||||
></a-switch>
|
||||
<a-select
|
||||
v-else-if="record['type'] === 'enum'"
|
||||
v-model:value="state.editRecord['value']"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option
|
||||
:value="+v"
|
||||
:key="+v"
|
||||
v-for="(k, v) in JSON.parse(record['filter'])"
|
||||
>
|
||||
{{ k }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-space :size="16" align="center" direction="horizontal">
|
||||
<a-popconfirm
|
||||
title="确认更新该属性值吗？"
|
||||
placement="top"
|
||||
@confirm="listEditOk2()"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
>
|
||||
<template #icon><CheckOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
@click.prevent="listEditClose2()"
|
||||
>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div v-else class="editable-cell__text-wrapper">
|
||||
{{ `${record.value}` || ' ' }}
|
||||
<EditOutlined
|
||||
class="editable-cell__icon"
|
||||
v-if="record.access !== 'read'"
|
||||
@click="listEdit2(record)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{
|
||||
Reference in New Issue
Block a user