Merge branch 'main' of http://192.168.0.229:3180/OMC/ems_frontend_vue3

2023-10-11 16:35:20 +08:00
parent 6541683bd8 ff8bffc247
commit bbf3c20057
5 changed files with 371 additions and 26 deletions
--- a/src/api/mmlManage/udmOperate.ts
+++ b/src/api/mmlManage/udmOperate.ts
@@ -24,3 +24,26 @@ export async function getSubscriberByUDM() {
  }
  return result;
 }
+
+/**
+ * 发送UDM的mml命令
+ * @param neId 网元ID
+ * @param cmdStr 命令串
+ * @returns
+ */
+export async function sendMMlByUDM(
+  neId: string,
+  cmdStr: string
+) {
+  // 发起请求
+  const result = await request({
+    url: `/operationManagement/v1/elementType/UDM/objectType/mml?ne_id=${neId}`,
+    method: 'post',
+    data: { mml: [cmdStr] },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    result.data = result.data.data[0];
+  }
+  return result;
+}
--- a/src/components/CodemirrorEdite/index.vue
+++ b/src/components/CodemirrorEdite/index.vue
@@ -16,7 +16,7 @@
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';

 const emit = defineEmits(['update:value']);
 const props = defineProps({
@@ -49,6 +49,7 @@ const modelValue = ref<string>('');

 /**变更时更新绑定值 */
 function fnChange(value: string, viewUpdate: any) {
+  if (props.disabled) return;
  emit('update:value', value);
 }

@@ -56,6 +57,14 @@ function fnChange(value: string, viewUpdate: any) {
 function fnReady(payload: any) {
  modelValue.value = props.value;
 }
+
+/**监听是否value改变 */
+watch(
+  () => props.value,
+  val => {
+    modelValue.value = val;
+  }
+);
 </script>

 <style lang="less" scoped></style>
--- a/src/constants/result-constants.ts
+++ b/src/constants/result-constants.ts
@@ -21,3 +21,6 @@ export const RESULT_MSG_SERVER_ERROR = 'Server connection error!';

 /**响应-请求地址未找到 */
 export const RESULT_MSG_URL_NOTFOUND = 'Request address not found!';
+
+/**响应-数据正在处理，请勿重复提交 */
+export const RESULT_MSG_URL_RESUBMIT = 'Data is being processed, please do not resubmit!';
--- a/src/plugins/http-fetch.ts
+++ b/src/plugins/http-fetch.ts
@@ -15,6 +15,7 @@ import {
  RESULT_MSG_SUCCESS,
  RESULT_MSG_TIMEOUT,
  RESULT_MSG_URL_NOTFOUND,
+  RESULT_MSG_URL_RESUBMIT,
 } from '@/constants/result-constants';

 /**响应结果类型 */
@@ -76,7 +77,7 @@ type OptionsType = {
 /**默认请求参数 */
 const FATCH_OPTIONS: OptionsType = {
  baseUrl: import.meta.env.VITE_API_BASE_URL,
-  timeout: 30 * 1000,
+  timeout: 10 * 1000,
  url: '',
  method: 'get',
  headers: {
@@ -125,15 +126,18 @@ function beforeRequest(options: OptionsType): OptionsType | Promise<any> {
    const sessionObj: RepeatSubmitType = sessionGetJSON(CACHE_SESSION_FATCH);
    if (sessionObj) {
      const { url, data, time } = sessionObj;
-      const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+      const interval = 2000; // 间隔时间(ms)，小于此时间视为重复提交
      if (
        requestObj.url === url &&
        requestObj.data === data &&
        requestObj.time - time < interval
      ) {
-        const message = '数据正在处理，请勿重复提交';
+        const message = RESULT_MSG_URL_RESUBMIT;
        console.warn(`[${url}]: ${message}`);
-        return Promise.reject(message);
+        return Promise.resolve({
+          code: RESULT_CODE_ERROR,
+          msg: message,
+        });
      } else {
        sessionSetJSON(CACHE_SESSION_FATCH, requestObj);
      }
--- a/src/views/mmlManage/udmOperate/index.vue
+++ b/src/views/mmlManage/udmOperate/index.vue
@@ -3,12 +3,13 @@ import { useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/pro-layout';
 import { Form, message } from 'ant-design-vue/lib';
+import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { regExpIPv4 } from '@/utils/regular-utils';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
-import { getSubscriberByUDM } from '@/api/mmlManage/udmOperate';
+import { getSubscriberByUDM, sendMMlByUDM } from '@/api/mmlManage/udmOperate';
 import { number } from 'echarts/core';
 const { t } = useI18n();
 const route = useRoute();
@@ -22,26 +23,199 @@ let neOtions = ref<Record<string, any>[]>([]);
 /**对象信息状态类型 */
 type StateType = {
  /**网元ID */
-  neId: string | undefined;
+  neId: string;
  /**命令数据 loading */
  mmlLoading: boolean;
  /**命令数据 tree */
  mmlTreeData: any[];
  /**命令选中 */
  mmlSelect: Record<string, any>;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**命令发送日志 */
+  mmlCmdLog: string;
 };

 /**对象信息状态 */
 let state: StateType = reactive({
-  neId: undefined,
+  neId: '',
  mmlLoading: true,
  mmlTreeData: [],
  mmlSelect: {},
+  from: {
+    sendLoading: false,
+  },
+  mmlCmdLog: '',
 });

 /**查询可选命令列表 */
 function fnTreeSelect(_: any, info: any) {
  state.mmlSelect = info.node.dataRef;
+  state.from = {};
+  // state.mmlCmdLog = '';
+}
+
+/**清空控制台日志 */
+function fnCleanCmdLog() {
+  state.mmlCmdLog = '';
+}
+
+/**清空表单 */
+function fnCleanFrom() {
+  state.from = {};
+}
+
+/**命令发送 */
+function fnSendMML() {
+  if (state.from.sendLoading) {
+    return;
+  }
+  const operation = state.mmlSelect.operation;
+  const object = state.mmlSelect.object;
+  let cmdStr = '';
+  // 根据参数取值
+  let argsArr: string[] = [];
+  const param = toRaw(state.mmlSelect.param) || [];
+  const from = toRaw(state.from);
+  for (const item of param) {
+    // 检查是否存在值
+    const hasV = Reflect.has(from, item.name) && !!from[item.name];
+    if (!hasV) {
+      message.warning(`必填参数：${item.display}`, 2);
+      return;
+    }
+    // 检查规则
+    const [ok, msg] = ruleVerification(item, from[item.name]);
+    if (!ok) {
+      message.warning({
+        content: `${msg}`,
+        duration: 3,
+      });
+      return;
+    }
+    argsArr.push(`${item.name}=${from[item.name]}`);
+  }
+
+  // 拼装命令
+  const argsStr = argsArr.join(',');
+  if (object && argsStr) {
+    cmdStr = `${operation} ${object}:${argsStr}`;
+  } else if (object) {
+    cmdStr = `${operation} ${object}`;
+  } else {
+    cmdStr = `${operation} ${argsStr}`;
+  }
+
+  // 发送
+  state.mmlCmdLog += `$> ${cmdStr}\n`;
+  state.from.sendLoading = true;
+  sendMMlByUDM(state.neId, cmdStr).then(res => {
+    state.from.sendLoading = false;
+    if (res.code === RESULT_CODE_SUCCESS) {
+      let resultStr = res.data;
+      resultStr = resultStr.replace(/(\r\n|\n)/g, '\n$> ');
+      state.mmlCmdLog += `$> ${resultStr}\n`;
+    } else {
+      state.mmlCmdLog += `$> ${res.msg}\n`;
+    }
+  });
+}
+
+/**规则校验 */
+function ruleVerification(
+  row: Record<string, any>,
+  value: any
+): (string | boolean)[] {
+  let result = [true, ''];
+  const type = row.type;
+  const filter = row.filter;
+  const display = row.display;
+
+  switch (type) {
+    case 'int':
+      if (filter && filter.indexOf('~') !== -1) {
+        const filterArr = filter.split('~');
+        const minInt = parseInt(filterArr[0]);
+        const maxInt = parseInt(filterArr[1]);
+        debugger;
+        const valueInt = parseInt(value);
+        if (valueInt < minInt || valueInt > maxInt) {
+          return [false, `${display} 参数值不在合理范围 ${filter}`];
+        }
+      }
+      break;
+    case 'ipv4':
+      if (!regExpIPv4.test(value)) {
+        return [false, `${display} 不是合法的IPV4地址`];
+      }
+      break;
+    case 'ipv6':
+      if (!regExpIPv6.test(value)) {
+        return [false, `${display} 不是合法的IPV6地址`];
+      }
+      break;
+    case 'enum':
+      if (filter && filter.indexOf('{') === 1) {
+        let filterJson: Record<string, any> = {};
+        try {
+          filterJson = JSON.parse(filter); //string---json
+        } catch (error) {
+          console.error(error);
+        }
+
+        if (!Object.keys(filterJson).includes(`${value}`)) {
+          return [false, `${display} 不是合理的枚举值`];
+        }
+      }
+      break;
+    case 'bool':
+      if (filter && filter.indexOf('{') === 1) {
+        let filterJson: Record<string, any> = {};
+        try {
+          filterJson = JSON.parse(filter); //string---json
+        } catch (error) {
+          console.error(error);
+        }
+
+        if (!Object.values(filterJson).includes(`${value}`)) {
+          return [false, `${display} 不是合理的布尔类型的值`];
+        }
+      }
+      break;
+    case 'string':
+      if (filter && filter.indexOf('~') !== -1) {
+        try {
+          const filterArr = filter.split('~');
+          let rule = new RegExp(
+            '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+          );
+          if (!rule.test(value)) {
+            return [false, `${display} 参数值不合理`];
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      break;
+    case 'regex':
+      if (filter) {
+        try {
+          let regex = new RegExp(filter);
+          if (!regex.test(value)) {
+            return [false, `${display} 参数值不合理`];
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      break;
+
+    default:
+      console.warn('未知类型', type);
+      return [false, `${display} 输入值是未知类型`];
+  }
+  return result;
 }

 /**查询可选命令列表 */
@@ -78,6 +252,7 @@ function fnGetList() {
          treeItem.children.push({
            key: id,
            title: mmlDisplay,
+            object,
            operation,
            param,
          });
@@ -108,6 +283,11 @@ onMounted(() => {
            // 获取列表数据
            fnGetList();
          }
+        } else {
+          message.warning({
+            content: `暂无UDM网元`,
+            duration: 5,
+          });
        }
      } else {
        message.warning({
@@ -124,8 +304,13 @@ onMounted(() => {
    <a-row :gutter="16">
      <a-col :span="6">
        <!-- 命令导航 -->
-        <a-card :loading="state.mmlLoading">
-          <a-form layout="horizontal" autocomplete="off">
+        <a-card
+          size="small"
+          :bordered="false"
+          title="命令导航"
+          :loading="state.mmlLoading"
+        >
+          <a-form layout="vertical" autocomplete="off">
            <a-form-item name="neId ">
              <a-select
                v-model:value="state.neId"
@@ -140,22 +325,143 @@ onMounted(() => {
        </a-card>
      </a-col>
      <a-col :span="18">
-        <!-- 命令执行 -->
-        <a-card :title="state.mmlSelect.title">
-          {{ state.mmlSelect }}
-          <a-form layout="horizontal" autocomplete="off">
-            <a-form-item name="neId ">
+        <!-- 命令参数输入 -->
+        <a-card
+          size="small"
+          :bordered="false"
+          :loading="!state.mmlSelect.title"
+        >
+          <template #title>
+            <a-typography-text strong v-if="state.mmlSelect.title">
+              {{ state.mmlSelect.title }}
+            </a-typography-text>
+            <a-typography-text type="danger" v-else>
+              左侧命令导航中选择要操作项！
+            </a-typography-text>
+          </template>
+          <!-- 插槽-卡片右侧 -->
+          <template #extra>
+            <a-space :size="8">
+              <a-button
+                type="default"
+                size="small"
+                @click.prevent="fnCleanFrom"
+                v-if="!!state.mmlSelect.param"
+              >
+                <template #icon>
+                  <ClearOutlined />
+                </template>
+                清除表单
+              </a-button>
+              <a-button
+                type="primary"
+                size="small"
+                :disabled="!state.mmlSelect.title"
+                :loading="state.from.sendLoading"
+                @click.prevent="fnSendMML"
+              >
+                <template #icon>
+                  <SendOutlined />
+                </template>
+                执行
+              </a-button>
+            </a-space>
+          </template>
+
+          <a-form
+            layout="vertical"
+            autocomplete="off"
+            :validate-on-rule-change="false"
+            :validateTrigger="[]"
+          >
+            <a-row :gutter="16">
+              <a-col
+                :lg="6"
+                :md="12"
+                :xs="24"
+                v-for="item in state.mmlSelect.param"
+              >
+                <a-form-item
+                  :label="item.display"
+                  :name="item.name"
+                  :required="item.optional === 'false'"
+                >
+                  <a-tooltip>
+                    <template #title v-if="item.comment">
+                      {{ item.comment }}
+                    </template>
+                    <a-input
+                      v-if="
+                        ['string', 'ipv6', 'ipv4', 'regex'].includes(item.type)
+                      "
+                      v-model:value="state.from[item.name]"
+                      :placeholder="state.from[item.filter]"
+                    ></a-input>
+                    <a-input-number
+                      v-else-if="item.type === 'int'"
+                      v-model:value="state.from[item.name]"
+                      :min="0"
+                      :max="65535"
+                      :placeholder="state.from[item.filter]"
+                      style="width: 100%"
+                    ></a-input-number>
+                    <a-switch
+                      v-else-if="item.type === 'bool'"
+                      v-model:checked="state.from[item.name]"
+                      :checked-children="t('common.switch.open')"
+                      :un-checked-children="t('common.switch.shut')"
+                    ></a-switch>
                    <a-select
-                v-model:value="state.neId"
-                :options="neOtions"
-                placeholder="请选择UDM操作命令"
-              />
-            </a-form-item>
-            <a-form-item name="listeningPort">
-              <a-tree :tree-data="state.mmlTreeData" @select="fnTreeSelect" />
+                      v-else-if="item.type === 'enum'"
+                      v-model:value="state.from[item.name]"
+                      :placeholder="state.from[item.filter]"
+                    >
+                      <a-select-option
+                        :value="+v"
+                        :key="+v"
+                        v-for="(k, v) in JSON.parse(state.from[item.filter])"
+                      >
+                        {{ k }}
+                      </a-select-option>
+                    </a-select>
+                  </a-tooltip>
                </a-form-item>
+              </a-col>
+            </a-row>
          </a-form>
        </a-card>
+
+        <!-- 命令展示 -->
+        <a-card
+          title="控制台"
+          :bordered="false"
+          size="small"
+          :body-style="{ padding: 0 }"
+          style="margin-top: 16px"
+          v-show="state.mmlSelect.title"
+        >
+          <!-- 插槽-卡片右侧 -->
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="default"
+                size="small"
+                @click.prevent="fnCleanCmdLog"
+              >
+                <template #icon>
+                  <ClearOutlined />
+                </template>
+                清除日志
+              </a-button>
+            </a-space>
+          </template>
+
+          <CodemirrorEdite
+            v-model:value="state.mmlCmdLog"
+            :disabled="true"
+            placeholder="等待发送命令"
+          ></CodemirrorEdite>
+        </a-card>
      </a-col>
    </a-row>
  </PageContainer>