From bd13b70a88bd4ca19d05e74ec2322e598ecb6b21 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 1 Mar 2024 18:57:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BB=A3=E7=A0=81=E6=8A=BD=E7=A6=BB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E8=A1=A5=E5=85=85=E6=96=B0=E5=A2=9E=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ne/neInfo.ts                         |  53 +-
 src/views/ne/neInfo/components/EditModal.vue | 687 +++++++++++++
 src/views/ne/neInfo/index.vue                | 988 +------------------
 3 files changed, 792 insertions(+), 936 deletions(-)
 create mode 100644 src/views/ne/neInfo/components/EditModal.vue

diff --git a/src/api/ne/neInfo.ts b/src/api/ne/neInfo.ts
index 87d90d81..d10e4768 100644
--- a/src/api/ne/neInfo.ts
+++ b/src/api/ne/neInfo.ts
@@ -14,9 +14,60 @@ export function listNeInfo(query: Record<string, any>) {
   });
 }
 
+/**
+ * 查询网元信息详细
+ * @param infoId 信息ID
+ * @returns object
+ */
+export function getNeInfo(infoId: string | number) {
+  return request({
+    url: `/ne/info/${infoId}`,
+    method: 'get',
+  });
+}
+
+/**
+ * 网元信息新增
+ * @param data 网元对象
+ * @returns object
+ */
+export function addNeInfo(data: Record<string, any>) {
+  return request({
+    url: `/ne/info`,
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 网元信息修改
+ * @param data 网元对象
+ * @returns object
+ */
+export function updateNeInfo(data: Record<string, any>) {
+  return request({
+    url: `/ne/info`,
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 网元信息删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delNeInfo(infoIds: string | number) {
+  return request({
+    url: `/ne/info/${infoIds}`,
+    method: 'delete',
+    timeout: 60_000,
+  });
+}
+
 /**
  * 查询网元列表全部无分页
- * @param query 查询参数
+ * @param query 查询参数 neType neId bandStatus
  * @returns object
  */
 export function listAllNeInfo(query: Record<string, any>) {
diff --git a/src/views/ne/neInfo/components/EditModal.vue b/src/views/ne/neInfo/components/EditModal.vue
new file mode 100644
index 00000000..f1d22d11
--- /dev/null
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -0,0 +1,687 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, watch } from 'vue';
+import { message, Form } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { testNeHost } from '@/api/ne/neHost';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  editId: {
+    type: String,
+    default: '',
+  },
+});
+
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
+/**
+ * 对话框弹出测试连接
+ */
+function fnModalTest() {
+  testNeHost({})
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.ne.neHost.testOk'),
+          duration: 2,
+        });
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+    });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '网元',
+  from: {
+    id: undefined,
+    neId: '001',
+    neType: 'OMC',
+    neName: '',
+    ip: '',
+    port: 3030,
+    pvFlag: 'PNF',
+    rmUid: '4400HX1OMC001',
+    neAddress: '',
+    dn: '',
+    vendorName: '',
+    province: '',
+    // 主机
+    hosts: [
+      {
+        hostId: undefined,
+        hostType: 'ssh',
+        groupId: '0',
+        title: '',
+        addr: '',
+        port: 22,
+        user: 'user',
+        authMode: '0',
+        password: 'user',
+        privateKey: '',
+        passPhrase: '',
+        remark: '',
+      },
+      {
+        hostId: undefined,
+        hostType: 'telnet',
+        groupId: '0',
+        title: '',
+        addr: '',
+        port: 4100,
+        user: 'user',
+        password: 'user',
+        remark: '',
+      },
+    ],
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message: '请输入网元类型',
+      },
+    ],
+    neId: [
+      {
+        required: true,
+        message: '请输入网元标识',
+      },
+    ],
+    rmUid: [
+      {
+        required: true,
+        message: '请输入资源唯一标识',
+      },
+    ],
+    ip: [
+      {
+        required: true,
+        message: '请输入网元IP地址',
+      },
+    ],
+    neName: [
+      {
+        required: true,
+        message: '请输入网元名称',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param editId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(editId: string) {
+  if (!editId) {
+    modalStateFrom.resetFields();
+    modalState.title = t('views.configManage.neManage.addNe');
+    modalState.visibleByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getNeInfo(editId).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = '编辑网元信息';
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('common.getInfoFail'), 2);
+      }
+    });
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+      const hide = message.loading(t('common.loading'), 0);
+      result
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: '操作成功',
+              duration: 3,
+            });
+            // 刷新缓存的网元信息
+            useNeInfoStore().fnRefreshNelist();
+            emit('ok');
+            fnModalCancel();
+          } else {
+            message.error({
+              content: `${t('views.configManage.neManage.operFail')}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalStateFrom.resetFields();
+  emit('cancel');
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) fnModalVisibleByEdit(props.editId);
+  }
+);
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.neHostGroupId = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+});
+</script>
+
+<template>
+  <DraggableModal
+    width="800px"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="modalState.visibleByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.neType')"
+            name="neType"
+            v-bind="modalStateFrom.validateInfos.neType"
+          >
+            <a-auto-complete
+              v-model:value="modalState.from.neType"
+              :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+            >
+              <a-input
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="32"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.configManage.neManage.neTypeTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-auto-complete>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.pvflag')"
+            name="pvFlag"
+            v-bind="modalStateFrom.validateInfos.pvFlag"
+          >
+            <a-select
+              v-model:value="modalState.from.pvFlag"
+              default-value="PNF"
+            >
+              <a-select-opt-group :label="t('views.configManage.neManage.pnf')">
+                <a-select-option value="PNF">PNF</a-select-option>
+              </a-select-opt-group>
+              <a-select-opt-group :label="t('views.configManage.neManage.vnf')">
+                <a-select-option value="VNF">VNF</a-select-option>
+              </a-select-opt-group>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.neId')"
+            name="neId"
+            v-bind="modalStateFrom.validateInfos.neId"
+          >
+            <a-input
+              v-model:value="modalState.from.neId"
+              allow-clear
+              :maxlength="32"
+            ></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.neName')"
+            name="neName"
+            v-bind="modalStateFrom.validateInfos.neName"
+          >
+            <a-input
+              v-model:value="modalState.from.neName"
+              allow-clear
+              :maxlength="64"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.ip')"
+            name="ip"
+            v-bind="modalStateFrom.validateInfos.ip"
+          >
+            <a-input
+              v-model:value="modalState.from.ip"
+              allow-clear
+              :maxlength="128"
+              @change=""
+            ></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.port')"
+            name="port"
+            v-bind="modalStateFrom.validateInfos.port"
+          >
+            <a-input-number
+              v-model:value="modalState.from.port"
+              style="width: 100%"
+              :min="1"
+              :max="65535"
+              placeholder="<=65535"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>{{ t('views.configManage.neManage.portTip') }}</div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input-number>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item
+        :label="t('views.configManage.neManage.uid')"
+        name="rmUid"
+        v-bind="modalStateFrom.validateInfos.rmUid"
+        :label-col="{ span: 3 }"
+        :labelWrap="true"
+      >
+        <a-input
+          v-model:value="modalState.from.rmUid"
+          allow-clear
+          :maxlength="40"
+          :placeholder="t('views.configManage.neManage.uidTip')"
+        >
+        </a-input>
+      </a-form-item>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.mac')"
+            name="neAddress"
+          >
+            <a-input
+              v-model:value="modalState.from.neAddress"
+              allow-clear
+              :maxlength="64"
+              ><template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>{{ t('views.configManage.neManage.macTip') }}</div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip> </template
+            ></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.configManage.neManage.dn')" name="dn">
+            <a-input
+              v-model:value="modalState.from.dn"
+              allow-clear
+              :maxlength="255"
+            ></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.vendorName')"
+            name="vendorName"
+          >
+            <a-input
+              v-model:value="modalState.from.vendorName"
+              allow-clear
+              :maxlength="64"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.configManage.neManage.province')"
+            name="province"
+          >
+            <a-input
+              v-model:value="modalState.from.province"
+              allow-clear
+              :maxlength="32"
+            ></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 主机连接配置 -->
+      <a-collapse class="collapse" ghost>
+        <a-collapse-panel key="ssh" header="配置SSH">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.province')"
+                name="province"
+              >
+                <a-input
+                  v-model:value="modalState.from.province"
+                  allow-clear
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.sync')"
+                name="province"
+              >
+                <a-switch
+                  v-model:checked="modalState.from.sync"
+                  :checked-children="t('views.configManage.neManage.open')"
+                  :un-checked-children="t('views.configManage.neManage.close')"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-collapse-panel>
+        <a-collapse-panel
+          :key="`${host.hostType}_${host.title}`"
+          :header="host.hostType.toUpperCase()"
+          v-for="host in modalState.from.hosts"
+        >
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.ne.neHost.hostType')"
+                name="hostType"
+              >
+                <a-select
+                  v-model:value="host.hostType"
+                  default-value="ssh"
+                  :options="dict.neHostType"
+                >
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item :label="t('views.ne.neHost.groupId')" name="groupId">
+                <a-select
+                  v-model:value="modalState.from.groupId"
+                  default-value="0"
+                  :options="dict.neHostGroupId"
+                >
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item
+            :label="t('views.ne.neHost.title')"
+            name="title"
+            v-bind="modalStateFrom.validateInfos.title"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.title"
+              allow-clear
+              :maxlength="50"
+            >
+            </a-input>
+          </a-form-item>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.ne.neHost.addr')"
+                name="addr"
+                v-bind="modalStateFrom.validateInfos.addr"
+              >
+                <a-input
+                  v-model:value="modalState.from.addr"
+                  allow-clear
+                  :maxlength="50"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item :label="t('views.ne.neHost.port')" name="port">
+                <a-input-number
+                  v-model:value="modalState.from.port"
+                  :min="10"
+                  :max="65535"
+                  :step="1"
+                  style="width: 100%"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.ne.neHost.user')"
+                name="user"
+                v-bind="modalStateFrom.validateInfos.user"
+              >
+                <a-input v-model:value="modalState.from.user" allow-clear>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.ne.neHost.authMode')"
+                name="authMode"
+              >
+                <a-select
+                  v-model:value="modalState.from.authMode"
+                  default-value="0"
+                  :options="dict.neHostAuthMode"
+                >
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item
+            v-if="modalState.from.authMode === '0'"
+            :label="t('views.ne.neHost.password')"
+            name="password"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.password"
+              allow-clear
+              :maxlength="256"
+            >
+            </a-input>
+          </a-form-item>
+
+          <template v-if="modalState.from.authMode === '1'">
+            <a-form-item
+              :label="t('views.ne.neHost.privateKey')"
+              name="privateKey"
+              :label-col="{ span: 3 }"
+              :label-wrap="true"
+            >
+              <a-textarea
+                v-model:value="modalState.from.privateKey"
+                :auto-size="{ minRows: 4, maxRows: 6 }"
+                :maxlength="3000"
+                :show-count="true"
+              />
+            </a-form-item>
+
+            <a-form-item
+              :label="t('views.ne.neHost.passPhrase')"
+              name="passPhrase"
+              :label-col="{ span: 3 }"
+              :label-wrap="true"
+            >
+              <a-input v-model:value="modalState.from.passPhrase" allow-clear>
+              </a-input>
+            </a-form-item>
+          </template>
+
+          <a-form-item
+            :label="t('views.ne.neHost.remark')"
+            name="remark"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-textarea
+              v-model:value="modalState.from.remark"
+              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :maxlength="450"
+              :show-count="true"
+            />
+          </a-form-item>
+
+          <a-form-item
+            :label="t('views.ne.neHost.test')"
+            name="test"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-button
+              type="primary"
+              shape="round"
+              @click="fnModalTest"
+              :loading="modalState.confirmLoading"
+            >
+              <template #icon><LinkOutlined /></template>
+            </a-button>
+          </a-form-item>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-form>
+  </DraggableModal>
+</template>
+
+<style lang="less" scoped>
+.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>
diff --git a/src/views/ne/neInfo/index.vue b/src/views/ne/neInfo/index.vue
index f9fd5aa4..8d3135ff 100644
--- a/src/views/ne/neInfo/index.vue
+++ b/src/views/ne/neInfo/index.vue
@@ -1,45 +1,18 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/lib/table';
-import {
-  exportSet,
-  startNf,
-  restartNf,
-  stopNf,
-  importFile,
-  listServerFile,
-} from '@/api/configManage/neManage';
 import useI18n from '@/hooks/useI18n';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import EditModal from './components/EditModal.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
-import {
-  listNeInfo,
-  getNeInfo,
-  addNeInfo,
-  updateNeInfo,
-  delNeInfo,
-} from '@/api/ne/neInfo';
+import { listNeInfo, delNeInfo } from '@/api/ne/neInfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
-import { testNeHost } from '@/api/ne/neHost';
-import useDictStore from '@/store/modules/dict';
-const { getDict } = useDictStore();
 const { t } = useI18n();
 
-/**表格所需option */
-const neManageOption = reactive({
-  importType: [
-    { label: t('views.configManage.neManage.server'), value: 'server' },
-    { label: t('views.configManage.neManage.local'), value: 'local' },
-  ],
-  serverFileName: <any[]>[],
-});
-
 /**查询参数 */
 let queryParams = reactive({
   /**网元类型 */
@@ -85,7 +58,7 @@ let tableState: TabeStateType = reactive({
   loading: false,
   size: 'middle',
   striped: false,
-  seached: false,
+  seached: true,
   data: [],
   selectedRowKeys: [],
 });
@@ -185,55 +158,12 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
   tableState.selectedRowKeys = keys;
 }
 
-/**字典数据 */
-let dict: {
-  /**主机类型 */
-  neHostType: DictType[];
-  /**分组 */
-  neHostGroupId: DictType[];
-  /**认证模式 */
-  neHostAuthMode: DictType[];
-} = reactive({
-  neHostType: [],
-  neHostGroupId: [],
-  neHostAuthMode: [],
-});
-
-/**
- * 对话框弹出测试连接
- */
-function fnModalTest() {
-  testNeHost({})
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('views.ne.neHost.testOk'),
-          duration: 2,
-        });
-      } else {
-        message.error({
-          content: `${res.msg}`,
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      modalState.confirmLoading = false;
-    });
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
-  /**导入是否显示 */
-  visibleByImport: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**导入表单数据 */
-  importFrom: Record<string, any>;
+  /**新增框或修改框ID */
+  editId: string;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -241,317 +171,38 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   visibleByEdit: false,
-  visibleByImport: false,
-  title: '网元',
-  from: {
-    id: undefined,
-    neId: '001',
-    neType: 'OMC',
-    neName: '',
-    ip: '',
-    port: 3030,
-    pvFlag: 'PNF',
-    rmUid: '4400HX1OMC001',
-    neAddress: '',
-    dn: '',
-    vendorName: '',
-    province: '',
-    // 主机
-    hosts: [
-      {
-        hostId: undefined,
-        hostType: 'ssh',
-        groupId: '0',
-        title: '',
-        addr: '',
-        port: 22,
-        user: 'user',
-        authMode: '0',
-        password: 'user',
-        privateKey: '',
-        passPhrase: '',
-        remark: '',
-      },
-      {
-        hostId: undefined,
-        hostType: 'telnet',
-        groupId: '0',
-        title: '',
-        addr: '',
-        port: 4100,
-        user: 'user',
-        password: 'user',
-        remark: '',
-      },
-    ],
-  },
-  importFrom: {
-    neId: '',
-    neType: '',
-    importType: '',
-    file: undefined,
-    fileList: [],
-    fileName: '',
-  },
+  editId: '',
   confirmLoading: false,
 });
 
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    neType: [
-      {
-        required: true,
-        message: '请输入网元类型',
-      },
-    ],
-    neId: [
-      {
-        required: true,
-        message: '请输入网元标识',
-      },
-    ],
-    rmUid: [
-      {
-        required: true,
-        message: '请输入资源唯一标识',
-      },
-    ],
-    ip: [
-      {
-        required: true,
-        message: '请输入网元IP地址',
-      },
-    ],
-    neName: [
-      {
-        required: true,
-        message: '请输入网元名称',
-      },
-    ],
-  })
-);
-
-/**导入对话框内表单属性和校验规则 */
-const importStateFrom = Form.useForm(
-  modalState.importFrom,
-  reactive({
-    file: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.updateFilePlease'),
-      },
-    ],
-    importType: [
-      {
-        required: true,
-        message: t('views.configManage.neManage.selectPlease'),
-      },
-    ],
-    fileName: [
-      {
-        required: true,
-        message: t('views.configManage.neManage.fileSelect'),
-      },
-    ],
-  })
-);
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
  */
 function fnModalVisibleByEdit(row?: Record<string, any>) {
   if (!row) {
-    modalStateFrom.resetFields();
-    modalState.title = t('views.configManage.neManage.addNe');
-    modalState.visibleByEdit = true;
+    modalState.editId = '';
   } else {
-    if (modalState.confirmLoading) return;
-    const hide = message.loading(t('common.loading'), 0);
-    modalState.confirmLoading = true;
-    getNeInfo(row.id).then(res => {
-      modalState.confirmLoading = false;
-      hide();
-      if (res.code === RESULT_CODE_SUCCESS) {
-        modalState.from = Object.assign(modalState.from, res.data);
-        modalState.title = '编辑网元信息';
-        modalState.visibleByEdit = true;
-      } else {
-        message.error(t('common.getInfoFail'), 2);
-      }
-    });
+    modalState.editId = row.id;
   }
+  modalState.visibleByEdit = true;
 }
 
 /**
  * 对话框弹出确认执行函数
  * 进行表达规则校验
  */
-function fnModalOk() {
-  modalStateFrom
-    .validate()
-    .then(e => {
-      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      const result = from.id ? updateNeInfo(from) : addNeInfo(from);
-      const hide = message.loading(t('common.loading'), 0);
-      result
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: '操作成功',
-              duration: 3,
-            });
-            fnModalCancel();
-            fnGetList(1);
-            // 刷新缓存的网元信息
-            useNeInfoStore().fnRefreshNelist();
-          } else {
-            message.error({
-              content: `${t('views.configManage.neManage.operFail')}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
+function fnModalEditOk() {
+  fnGetList(1);
 }
 
 /**
  * 对话框弹出关闭执行函数
  * 进行表达规则校验
  */
-function fnModalCancel() {
+function fnModalEditCancel() {
+  modalState.editId = '';
   modalState.visibleByEdit = false;
-  modalStateFrom.resetFields();
-}
-
-/**
- * 导入对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnImportModalOk() {
-  const from = toRaw(modalState.importFrom);
-  let validateName = ['importType'];
-  if (from.file) {
-    validateName.push('file');
-  } else {
-    validateName.push('fileName');
-  }
-
-  importStateFrom
-    .validate(validateName)
-    .then(e => {
-      modalState.confirmLoading = true;
-      const hide = message.loading(t('common.loading'), 0);
-      importFile(from)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: modalState.title }),
-              duration: 3,
-            });
-            modalState.visibleByEdit = false;
-            modalStateFrom.resetFields();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-          // 获取列表数据
-          fnGetList(1);
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 导入对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnImportModalCancel() {
-  modalState.visibleByImport = false;
-  importStateFrom.resetFields();
-}
-
-/**
- * 网元导出配置
- * @param row 网元编号ID
- */
-function fnRecordExport(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.neManage.exportSure', { msg: row.neName }),
-    onOk() {
-      const key = 'exportSet';
-      message.loading({ content: t('common.loading'), key });
-      exportSet(row).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('views.configManage.neManage.exportTip'),
-            key,
-            duration: 2,
-          });
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**查询网元远程服务器备份文件 */
-function typeChange(value: any) {
-  if (value === 'server') {
-    listServerFile(modalState.importFrom).then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        neManageOption.serverFileName = [];
-        res.data.forEach((item: any) => {
-          neManageOption.serverFileName.push({
-            label: item.fileName,
-            value: item.fileName,
-          });
-        });
-      }
-    });
-  }
-}
-
-/**上传前检查或转换压缩 */
-function fnBeforeUploadFile(file: FileType) {
-  if (modalState.confirmLoading) return false;
-  // const fileName = file.name;
-  // const suff = fileName.substring(fileName.lastIndexOf('.'));
-  return true;
-}
-
-/**上传文件 */
-function fnUploadFile(up: UploadRequestOption) {
-  // 改为完成状态
-  const file = modalState.importFrom.fileList[0];
-  file.percent = 100;
-  file.status = 'done';
-  // 预置到表单
-  modalState.importFrom.file = up.file;
 }
 
 /**
@@ -559,7 +210,7 @@ function fnUploadFile(up: UploadRequestOption) {
  * @param id  编号
  */
 function fnRecordDelete(id: string) {
-  if (!id) return;
+  if (!id || modalState.confirmLoading) return;
   let msg = '';
   if (id === '0') {
     const neInfo: any = tableState.data.find(
@@ -606,6 +257,36 @@ function fnRecordDelete(id: string) {
   });
 }
 
+/**
+ * 记录多项选择
+ */
+function fnRecordMore(type: string | number, row: Record<string, any>) {
+  if (type === 'delete') {
+    // fnRecordDelete(row);
+    return;
+  }
+
+  if (type === 'export') {
+    // fnRecordExport(row);
+  }
+
+  if (type === 'start') {
+    // fnRecordStart(row);
+  }
+
+  if (type === 'restart') {
+    // fnRecordRestart(row);
+  }
+
+  if (type === 'stop') {
+    // fnRecordStop(row);
+  }
+
+  if (type === 'reload') {
+    // fnNeReload(row);
+  }
+}
+
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -680,62 +361,10 @@ function fnGetList(pageNum?: number) {
   });
 }
 
-/**
- * 记录多项选择
- */
-function fnRecordMore(type: string | number, row: Record<string, any>) {
-  if (type === 'delete') {
-    // fnRecordDelete(row);
-    return;
-  }
-
-  if (type === 'export') {
-    // fnRecordExport(row);
-  }
-
-  if (type === 'start') {
-    // fnRecordStart(row);
-  }
-
-  if (type === 'restart') {
-    // fnRecordRestart(row);
-  }
-
-  if (type === 'stop') {
-    // fnRecordStop(row);
-  }
-
-  if (type === 'reload') {
-    // fnNeReload(row);
-  }
-
-  if (type === 'import') {
-    modalState.importFrom = Object.assign(modalState.importFrom, row);
-    modalState.title = t('views.configManage.neManage.import');
-    modalState.visibleByImport = true;
-  }
-}
-
 onMounted(() => {
-  // 初始字典数据
-  Promise.allSettled([
-    getDict('ne_host_type'),
-    getDict('ne_host_groupId'),
-    getDict('ne_host_authMode'),
-  ])
-    .then(resArr => {
-      if (resArr[0].status === 'fulfilled') {
-        dict.neHostType = resArr[0].value;
-      }
-      if (resArr[1].status === 'fulfilled') {
-        dict.neHostGroupId = resArr[1].value;
-      }
-      if (resArr[2].status === 'fulfilled') {
-        dict.neHostAuthMode = resArr[2].value;
-      }
-      // 刷新缓存的网元信息
-      return useNeInfoStore().fnRefreshNelist();
-    })
+  // 刷新缓存的网元信息
+  useNeInfoStore()
+    .fnRefreshNelist()
     .finally(() => {
       // 获取列表数据
       fnGetList();
@@ -1043,519 +672,12 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      width="800px"
-      :keyboard="false"
-      :mask-closable="false"
+    <EditModal
       :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :labelWrap="true"
-      >
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.neType')"
-              name="neType"
-              v-bind="modalStateFrom.validateInfos.neType"
-            >
-              <a-auto-complete
-                v-model:value="modalState.from.neType"
-                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
-              >
-                <a-input
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="32"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.configManage.neManage.neTypeTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
-              </a-auto-complete>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.pvflag')"
-              name="pvFlag"
-              v-bind="modalStateFrom.validateInfos.pvFlag"
-            >
-              <a-select
-                v-model:value="modalState.from.pvFlag"
-                default-value="PNF"
-              >
-                <a-select-opt-group
-                  :label="t('views.configManage.neManage.pnf')"
-                >
-                  <a-select-option value="PNF">PNF</a-select-option>
-                </a-select-opt-group>
-                <a-select-opt-group
-                  :label="t('views.configManage.neManage.vnf')"
-                >
-                  <a-select-option value="VNF">VNF</a-select-option>
-                </a-select-opt-group>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.neId')"
-              name="neId"
-              v-bind="modalStateFrom.validateInfos.neId"
-            >
-              <a-input
-                v-model:value="modalState.from.neId"
-                allow-clear
-                :maxlength="32"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.neName')"
-              name="neName"
-              v-bind="modalStateFrom.validateInfos.neName"
-            >
-              <a-input
-                v-model:value="modalState.from.neName"
-                allow-clear
-                :maxlength="64"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.ip')"
-              name="ip"
-              v-bind="modalStateFrom.validateInfos.ip"
-            >
-              <a-input
-                v-model:value="modalState.from.ip"
-                allow-clear
-                :maxlength="128"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.port')"
-              name="port"
-              v-bind="modalStateFrom.validateInfos.port"
-            >
-              <a-input-number
-                v-model:value="modalState.from.port"
-                style="width: 100%"
-                :min="1"
-                :max="65535"
-                placeholder="<=65535"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      <div>{{ t('views.configManage.neManage.portTip') }}</div>
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
-                </template>
-              </a-input-number>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item
-          :label="t('views.configManage.neManage.uid')"
-          name="rmUid"
-          v-bind="modalStateFrom.validateInfos.rmUid"
-          :label-col="{ span: 3 }"
-          :labelWrap="true"
-        >
-          <a-input
-            v-model:value="modalState.from.rmUid"
-            allow-clear
-            :maxlength="40"
-            :placeholder="t('views.configManage.neManage.uidTip')"
-          >
-          </a-input>
-        </a-form-item>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.mac')"
-              name="neAddress"
-            >
-              <a-input
-                v-model:value="modalState.from.neAddress"
-                allow-clear
-                :maxlength="64"
-                ><template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      <div>{{ t('views.configManage.neManage.macTip') }}</div>
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip> </template
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.configManage.neManage.dn')" name="dn">
-              <a-input
-                v-model:value="modalState.from.dn"
-                allow-clear
-                :maxlength="255"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.vendorName')"
-              name="vendorName"
-            >
-              <a-input
-                v-model:value="modalState.from.vendorName"
-                allow-clear
-                :maxlength="64"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.province')"
-              name="province"
-            >
-              <a-input
-                v-model:value="modalState.from.province"
-                allow-clear
-                :maxlength="32"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- 主机连接配置 -->
-        <a-collapse class="collapse" ghost>
-          <a-collapse-panel key="ssh" header="配置SSH">
-            <a-row :gutter="16">
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.configManage.neManage.province')"
-                  name="province"
-                >
-                  <a-input
-                    v-model:value="modalState.from.province"
-                    allow-clear
-                  ></a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.configManage.neManage.sync')"
-                  name="province"
-                >
-                  <a-switch
-                    v-model:checked="modalState.from.sync"
-                    :checked-children="t('views.configManage.neManage.open')"
-                    :un-checked-children="
-                      t('views.configManage.neManage.close')
-                    "
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-collapse-panel>
-          <a-collapse-panel
-            :key="`${host.hostType}_${host.title}`"
-            :header="host.hostType.toUpperCase()"
-            v-for="host in modalState.from.hosts"
-          >
-            <a-row :gutter="16">
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.ne.neHost.hostType')"
-                  name="hostType"
-                >
-                  <a-select
-                    v-model:value="host.hostType"
-                    default-value="ssh"
-                    :options="dict.neHostType"
-                  >
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.ne.neHost.groupId')"
-                  name="groupId"
-                >
-                  <a-select
-                    v-model:value="modalState.from.groupId"
-                    default-value="0"
-                    :options="dict.neHostGroupId"
-                  >
-                  </a-select>
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <a-form-item
-              :label="t('views.ne.neHost.title')"
-              name="title"
-              v-bind="modalStateFrom.validateInfos.title"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-input
-                v-model:value="modalState.from.title"
-                allow-clear
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-
-            <a-row :gutter="16">
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.ne.neHost.addr')"
-                  name="addr"
-                  v-bind="modalStateFrom.validateInfos.addr"
-                >
-                  <a-input
-                    v-model:value="modalState.from.addr"
-                    allow-clear
-                    :maxlength="50"
-                  >
-                  </a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item :label="t('views.ne.neHost.port')" name="port">
-                  <a-input-number
-                    v-model:value="modalState.from.port"
-                    :min="10"
-                    :max="65535"
-                    :step="1"
-                    style="width: 100%"
-                  ></a-input-number>
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <a-row :gutter="16">
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.ne.neHost.user')"
-                  name="user"
-                  v-bind="modalStateFrom.validateInfos.user"
-                >
-                  <a-input v-model:value="modalState.from.user" allow-clear>
-                  </a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item
-                  :label="t('views.ne.neHost.authMode')"
-                  name="authMode"
-                >
-                  <a-select
-                    v-model:value="modalState.from.authMode"
-                    default-value="0"
-                    :options="dict.neHostAuthMode"
-                  >
-                  </a-select>
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <a-form-item
-              v-if="modalState.from.authMode === '0'"
-              :label="t('views.ne.neHost.password')"
-              name="password"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-input
-                v-model:value="modalState.from.password"
-                allow-clear
-                :maxlength="256"
-              >
-              </a-input>
-            </a-form-item>
-
-            <template v-if="modalState.from.authMode === '1'">
-              <a-form-item
-                :label="t('views.ne.neHost.privateKey')"
-                name="privateKey"
-                :label-col="{ span: 3 }"
-                :label-wrap="true"
-              >
-                <a-textarea
-                  v-model:value="modalState.from.privateKey"
-                  :auto-size="{ minRows: 4, maxRows: 6 }"
-                  :maxlength="3000"
-                  :show-count="true"
-                />
-              </a-form-item>
-
-              <a-form-item
-                :label="t('views.ne.neHost.passPhrase')"
-                name="passPhrase"
-                :label-col="{ span: 3 }"
-                :label-wrap="true"
-              >
-                <a-input v-model:value="modalState.from.passPhrase" allow-clear>
-                </a-input>
-              </a-form-item>
-            </template>
-
-            <a-form-item
-              :label="t('views.ne.neHost.remark')"
-              name="remark"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-textarea
-                v-model:value="modalState.from.remark"
-                :auto-size="{ minRows: 4, maxRows: 6 }"
-                :maxlength="450"
-                :show-count="true"
-              />
-            </a-form-item>
-
-            <a-form-item
-              :label="t('views.ne.neHost.test')"
-              name="test"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-button
-                type="primary"
-                shape="round"
-                @click="fnModalTest"
-                :loading="modalState.confirmLoading"
-              >
-                <template #icon><LinkOutlined /></template>
-              </a-button>
-            </a-form-item>
-          </a-collapse-panel>
-        </a-collapse>
-      </a-form>
-    </DraggableModal>
-
-    <!-- 导入框 -->
-    <a-modal
-      width="800px"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByImport"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnImportModalOk"
-      @cancel="fnImportModalCancel"
-    >
-      <a-form name="importStateFrom" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.neType')"
-              name="neType"
-              v-bind="importStateFrom.validateInfos.neType"
-            >
-              <a-input
-                v-model:value="modalState.importFrom.neType"
-                disabled
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.neManage.neId')"
-              name="neId"
-              v-bind="importStateFrom.validateInfos.neId"
-            >
-              <a-input
-                v-model:value="modalState.importFrom.neId"
-                disabled
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item
-          :label="t('views.configManage.neManage.fileForm')"
-          name="importType"
-          v-bind="importStateFrom.validateInfos.importType"
-        >
-          <a-select
-            v-model:value="modalState.importFrom.importType"
-            default-value="server"
-            :options="neManageOption.importType"
-            @change="typeChange"
-          >
-          </a-select>
-        </a-form-item>
-
-        <a-form-item
-          :label="t('views.configManage.neManage.server')"
-          name="fileName"
-          v-bind="importStateFrom.validateInfos.fileName"
-          v-show="modalState.importFrom.importType === 'server'"
-        >
-          <a-select
-            v-model:value="modalState.importFrom.fileName"
-            :options="neManageOption.serverFileName"
-          >
-          </a-select>
-        </a-form-item>
-
-        <a-form-item
-          :label="t('views.configManage.neManage.local')"
-          name="file"
-          v-bind="importStateFrom.validateInfos.file"
-          v-show="modalState.importFrom.importType === 'local'"
-        >
-          <a-upload
-            name="file"
-            v-model:file-list="modalState.importFrom.fileList"
-            list-type="text"
-            :max-count="1"
-            :show-upload-list="true"
-            :before-upload="fnBeforeUploadFile"
-            :custom-request="fnUploadFile"
-          >
-            <a-button type="default" :loading="modalState.confirmLoading">
-              {{ t('views.configManage.neManage.fileSelect') }}
-            </a-button>
-          </a-upload>
-        </a-form-item>
-      </a-form>
-    </a-modal>
+      :edit-id="modalState.editId"
+      @ok="fnModalEditOk"
+      @cancel="fnModalEditCancel"
+    ></EditModal>
   </PageContainer>
 </template>
 
@@ -1567,8 +689,4 @@ onMounted(() => {
 .table :deep(.ant-pagination) {
   padding: 0 24px;
 }
-.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
-  padding-left: 0;
-  padding-right: 0;
-}
 </style>