From b1763092c6d933f9d5c62efb3d0d92f85ddb6724 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 7 Sep 2023 15:30:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BD=91=E5=85=83=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/configuration/net-ele.ts          |   2 +
 src/views/configuration/net-ele/index.vue | 371 ++++++++++++----------
 2 files changed, 203 insertions(+), 170 deletions(-)

diff --git a/src/api/configuration/net-ele.ts b/src/api/configuration/net-ele.ts
index 43d4fdb5..773fdc54 100644
--- a/src/api/configuration/net-ele.ts
+++ b/src/api/configuration/net-ele.ts
@@ -80,6 +80,7 @@ export async function getNeInfo(id: string | number) {
  * @returns object
  */
 export function addNeInfo(data: Record<string, any>) {
+  data.port = `${data.port}`
   return request({
     url: `/systemManagement/v1/elementType/${data.ne_type}/objectType/neInfo`,
     method: 'post',
@@ -93,6 +94,7 @@ export function addNeInfo(data: Record<string, any>) {
  * @returns object
  */
 export function updateNeInfo(data: Record<string, any>) {
+  data.port = `${data.port}`
   return request({
     url: `/systemManagement/v1/elementType/${data.ne_type}/objectType/neInfo`,
     method: 'put',
diff --git a/src/views/configuration/net-ele/index.vue b/src/views/configuration/net-ele/index.vue
index dd1fbd13..38047e9e 100644
--- a/src/views/configuration/net-ele/index.vue
+++ b/src/views/configuration/net-ele/index.vue
@@ -6,13 +6,6 @@ import { message, Modal, Form } 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 {
-  listNotice,
-  getNotice,
-  delNotice,
-  addNotice,
-  updateNotice,
-} from '@/api/system/notice';
 import {
   listNeInfo,
   getNeInfo,
@@ -69,8 +62,6 @@ type TabeStateType = {
   loading: boolean;
   /**紧凑型 */
   size: SizeType;
-  /**斑马纹 */
-  striped: boolean;
   /**搜索栏 */
   seached: boolean;
   /**记录数据 */
@@ -83,7 +74,6 @@ type TabeStateType = {
 let tableState: TabeStateType = reactive({
   loading: false,
   size: 'middle',
-  striped: false,
   seached: true,
   data: [],
   selectedRowKeys: [],
@@ -195,16 +185,6 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**表格斑马纹 */
-function fnTableStriped(_record: unknown, index: number) {
-  return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
-}
-
-/**表格多选 */
-function fnTableSelectedRowKeys(keys: (string | number)[]) {
-  tableState.selectedRowKeys = keys;
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
@@ -224,7 +204,19 @@ let modalState: ModalStateType = reactive({
   visibleByView: false,
   visibleByEdit: false,
   title: '网元',
-  from: {},
+  from: {
+    dn: '网络标识',
+    ip: '192.168.4.132',
+    ne_address: '192.160.0.107',
+    ne_id: '网元内部标识',
+    ne_name: '网元名称',
+    ne_type: 'AMF',
+    port: '3030',
+    province: '网元所在省份',
+    pv_flag: '',
+    rm_uid: '资源唯一标识',
+    vendor_name: '厂商名称',
+  },
   confirmLoading: false,
 });
 
@@ -232,51 +224,21 @@ let modalState: ModalStateType = reactive({
 const modalStateFrom = Form.useForm(
   modalState.from,
   reactive({
-    noticeTitle: [
-      { required: true, min: 2, max: 50, message: '请正确输入网元标题' },
-    ],
-    noticeType: [{ required: true, message: '请选择网元类型' }],
-    noticeContent: [
-      {
-        required: true,
-        min: 2,
-        max: 3000,
-        message: '请正确输入网元内容，限10-3000个字符',
-      },
-    ],
+    ne_type: [{ required: true, message: '网元类型不能为空' }],
+    ne_id: [{ required: true, message: '网元内部标识不能为空' }],
+    rm_uid: [{ required: true, message: '资源唯一标识不能为空' }],
+    ip: [{ required: true, message: 'IP地址不能为空' }],
+    port: [{ required: true, message: '端口不能为空' }],
+    pv_flag: [{ required: true, message: '请选择网元虚拟化标识' }],
+    ne_name: [{ required: true, message: '网元名称不能为空' }],
   })
 );
 
-/**
- * 对话框弹出显示为 查看
- * @param noticeId 网元id
- */
-function fnModalVisibleByVive(noticeId: string | number) {
-  if (!noticeId) {
-    message.error(`网元记录存在错误`, 2);
-    return;
-  }
-  if (modalState.confirmLoading) return;
-  const hide = message.loading('正在打开...', 0);
-  modalState.confirmLoading = true;
-  getNotice(noticeId).then(res => {
-    modalState.confirmLoading = false;
-    hide();
-    if (res.code === 200) {
-      modalState.from = Object.assign(modalState.from, res.data);
-      modalState.title = '网元信息';
-      modalState.visibleByView = true;
-    } else {
-      message.error(`获取网元信息失败`, 2);
-    }
-  });
-}
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleByEdit(row: Record<string, any>) {
+function fnModalVisibleByEdit(row?: Record<string, any>) {
   if (!row) {
     modalStateFrom.resetFields();
     modalState.title = '添加网元';
@@ -306,17 +268,17 @@ function fnModalVisibleByEdit(row: Record<string, any>) {
 function fnModalOk() {
   modalStateFrom
     .validate()
-    .then(() => {
+    .then(e => {
       modalState.confirmLoading = true;
       const from = toRaw(modalState.from);
-      const notice = from.noticeId ? updateNeInfo(from) : addNeInfo(from);
+      const result = from.id ? updateNeInfo(from) : addNeInfo(from);
       const hide = message.loading({ content: t('loading') });
-      notice
+      result
         .then(res => {
-          if (res.code === 200) {
+          if (res.code === 1) {
             message.success({
-              content: t('msgSuccess', { msg: modalState.title }),
-              duration: 2,
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
             });
             modalState.visibleByEdit = false;
             modalStateFrom.resetFields();
@@ -324,7 +286,7 @@ function fnModalOk() {
           } else {
             message.error({
               content: `${res.msg}`,
-              duration: 2,
+              duration: 3,
             });
           }
         })
@@ -334,7 +296,7 @@ function fnModalOk() {
         });
     })
     .catch(e => {
-      message.error(t('errorFields', { num: e.errorFields.length }), 2);
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
     });
 }
 
@@ -438,12 +400,12 @@ onMounted(() => {
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList">
                   <template #icon><SearchOutlined /></template>
-                  搜索</a-button
-                >
+                  {{ t('common.search') }}
+                </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
                   <template #icon><ClearOutlined /></template>
-                  重置</a-button
-                >
+                  {{ t('common.reset') }}
+                </a-button>
               </a-space>
             </a-form-item>
           </a-col>
@@ -457,7 +419,7 @@ onMounted(() => {
         <a-space :size="8" align="center">
           <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
             <template #icon><PlusOutlined /></template>
-            添加
+            {{ t('common.addText') }}
           </a-button>
         </a-space>
       </template>
@@ -466,31 +428,22 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <a-tooltip>
-            <template #title>搜索栏</template>
+            <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
               v-model:checked="tableState.seached"
-              checked-children="显"
-              un-checked-children="隐"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
               size="small"
             />
           </a-tooltip>
           <a-tooltip>
-            <template #title>表格斑马纹</template>
-            <a-switch
-              v-model:checked="tableState.striped"
-              checked-children="开"
-              un-checked-children="关"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>刷新</template>
+            <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList">
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
           <a-tooltip>
-            <template #title>密度</template>
+            <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click">
               <a-button type="text">
                 <template #icon><ColumnHeightOutlined /></template>
@@ -500,9 +453,15 @@ onMounted(() => {
                   :selected-keys="[tableState.size as string]"
                   @click="fnTableSize"
                 >
-                  <a-menu-item key="default">默认</a-menu-item>
-                  <a-menu-item key="middle">中等</a-menu-item>
-                  <a-menu-item key="small">紧凑</a-menu-item>
+                  <a-menu-item key="default">{{
+                    t('common.size.default')
+                  }}</a-menu-item>
+                  <a-menu-item key="middle">{{
+                    t('common.size.middle')
+                  }}</a-menu-item>
+                  <a-menu-item key="small">{{
+                    t('common.size.small')
+                  }}</a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
@@ -518,7 +477,6 @@ onMounted(() => {
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
-        :row-class-name="fnTableStriped"
         :pagination="tablePagination"
         :scroll="{ x: true }"
       >
@@ -526,7 +484,7 @@ onMounted(() => {
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>编辑</template>
+                <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record)"
@@ -535,7 +493,7 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip>
-                <template #title>删除</template>
+                <template #title>{{ t('common.deleteText') }}</template>
                 <a-button type="link" @click.prevent="fnRecordDelete(record)">
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
@@ -546,46 +504,6 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
-    <a-modal
-      width="800px"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="网元标题" name="noticeTitle">
-              {{ modalState.from.noticeTitle }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="网元类型" name="noticeType">
-              <DictTag
-                :options="dict.sysNoticeType"
-                :value="modalState.from.noticeType"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="网元状态" name="status">
-              <DictTag
-                :options="dict.sysNoticeStatus"
-                :value="modalState.from.status"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-form-item label="网元内容" name="noticeContent">
-          {{ modalState.from.noticeContent }}
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">关闭</a-button>
-      </template>
-    </a-modal>
-
     <!-- 新增框或修改框 -->
     <a-modal
       width="800px"
@@ -601,68 +519,181 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="网元标题"
-              name="noticeTitle"
-              v-bind="modalStateFrom.validateInfos.noticeTitle"
+              label="网元类型"
+              name="ne_type"
+              v-bind="modalStateFrom.validateInfos.ne_type"
             >
               <a-input
-                v-model:value="modalState.from.noticeTitle"
+                v-model:value="modalState.from.ne_type"
                 allow-clear
-                placeholder="请输入网元标题"
+                placeholder="请输入网元类型"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 填写创建的网元类型,如:SMF </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="网元内部标识"
+              name="ne_id"
+              v-bind="modalStateFrom.validateInfos.ne_id"
+            >
+              <a-input
+                v-model:value="modalState.from.ne_id"
+                allow-clear
+                placeholder="请输入网元内部标识"
               ></a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              label="网元类型"
-              name="noticeType"
-              v-bind="modalStateFrom.validateInfos.noticeType"
+              label="资源唯一标识"
+              name="rm_uid"
+              v-bind="modalStateFrom.validateInfos.rm_uid"
             >
-              <a-select
-                v-model:value="modalState.from.noticeType"
-                default-value="1"
-                placeholder="网元类型"
-                :options="dict.sysNoticeType"
+              <a-input
+                v-model:value="modalState.from.rm_uid"
+                allow-clear
+                placeholder="请输入资源唯一标识"
               >
-              </a-select>
+              </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="网元状态" name="status">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="网元虚拟化标识"
+              name="pv_flag"
+              v-bind="modalStateFrom.validateInfos.pv_flag"
+            >
               <a-select
-                v-model:value="modalState.from.status"
-                default-value="0"
-                placeholder="网元状态"
-                :options="dict.sysNoticeStatus"
+                v-model:value="modalState.from.pv_flag"
+                default-value="PNF"
+                placeholder="请选择网元虚拟化标识"
               >
+                <a-select-opt-group label="物理网元">
+                  <a-select-option value="PNF">PNF</a-select-option>
+                </a-select-opt-group>
+                <a-select-opt-group label="虚拟网元">
+                  <a-select-option value="VNF">VNF</a-select-option>
+                </a-select-opt-group>
               </a-select>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-form-item
-          label="网元内容"
-          name="noticeContent"
-          v-bind="modalStateFrom.validateInfos.noticeContent"
-        >
-          <a-textarea
-            v-model:value="modalState.from.noticeContent"
-            :auto-size="{ minRows: 4, maxRows: 14 }"
-            :maxlength="3000"
-            :show-count="true"
-            placeholder="请输入网元内容"
-          />
-        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="IP地址"
+              name="ip"
+              v-bind="modalStateFrom.validateInfos.ip"
+            >
+              <a-input
+                v-model:value="modalState.from.ip"
+                allow-clear
+                placeholder="请输入IP地址"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="端口号"
+              name="port"
+              v-bind="modalStateFrom.validateInfos.port"
+            >
+              <a-input
+                v-model:value="modalState.from.port"
+                allow-clear
+                placeholder="请输入端口"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> <div>最大范围0~65535</div> </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </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="网元名称"
+              name="ne_name"
+              v-bind="modalStateFrom.validateInfos.ne_name"
+            >
+              <a-input
+                v-model:value="modalState.from.ne_name"
+                allow-clear
+                placeholder="请输入网元名称"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="网元地址" name="ne_address">
+              <a-input
+                v-model:value="modalState.from.ne_address"
+                allow-clear
+                placeholder="请输入网元地址"
+                ><template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      <div>能够定位网元的物理地址（MAC）</div>
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip> </template
+              ></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="网元所在省份" name="province">
+              <a-input
+                v-model:value="modalState.from.province"
+                allow-clear
+                placeholder="请输入网元所在省份"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="6" :xs="24">
+            <a-form-item label="厂商名称" name="vendor_name">
+              <a-input
+                v-model:value="modalState.from.vendor_name"
+                allow-clear
+                placeholder="请输入厂商名称"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="6" :xs="24">
+            <a-form-item label="网络标识" name="dn">
+              <a-input
+                v-model:value="modalState.from.dn"
+                allow-clear
+                placeholder="请输入网络标识"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
     </a-modal>
   </PageContainer>
 </template>
 
 <style lang="less" scoped>
-.table :deep(.table-striped) td {
-  background-color: #fafafa;
-}
-
 .table :deep(.ant-pagination) {
   padding: 0 24px;
 }