---固定表格表头

2023-10-26 19:33:13 +08:00
parent f17e998e05
commit 459fc0f2b3
5 changed files with 98 additions and 70 deletions
--- a/src/views/configManage/neManage/index.vue
+++ b/src/views/configManage/neManage/index.vue
@@ -749,7 +749,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: true,y:400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -183,9 +183,9 @@ let modalState: ModalStateType = reactive({
  from: {
    id: '',
    imsi: '',
-    amf: '',
+    amf: '8000',
    ki: '',
-    algoIndex: '',
+    algoIndex: '0',
    opc: '',
  },
  BatchForm: {
@@ -212,7 +212,6 @@ const modalStateFrom = Form.useForm(
    amf: [{ required: true, message: 'AMF不能为空' }],
    ki: [{ required: true, message: 'KI不能为空' }],
    algo: [{ required: true, message: 'algoIndex不能为空' }],
-    opc: [{ required: true, message: 'OPC能为空' }],
  })
 );

@@ -220,15 +219,11 @@ const modalStateFrom = Form.useForm(
 const modalStateBatchFrom = Form.useForm(
  modalState.BatchForm,
  reactive({
-    num: [
-      { required: true, message: '放号数不能为空' },
-      { min: 1, max: 100, message: '放号数必须小于等于100' },
-    ],
+    num: [{ required: true, message: '放号数不能为空' }],
    imsi: [{ required: true, message: 'IMSI不能为空' }],
    amf: [{ required: true, message: 'AMF不能为空' }],
    ki: [{ required: true, message: 'KI不能为空' }],
    algo: [{ required: true, message: 'algoIndex不能为空' }],
-    opc: [{ required: true, message: 'OPC能为空' }],
  })
 );

@@ -236,10 +231,7 @@ const modalStateBatchFrom = Form.useForm(
 const modalStateBatchDelFrom = Form.useForm(
  modalState.BatchDelForm,
  reactive({
-    num: [
-      { required: true, message: '删除个数不能为空' },
-      { min: 1, max: 100, message: '删除个数必须小于等于100' },
-    ],
+    num: [{ required: true, message: '删除个数不能为空' }],
    imsi: [{ required: true, message: '起始IMSI不能为空' }],
  })
 );
@@ -811,7 +803,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: true, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'imsi'">
@@ -905,6 +897,7 @@ onMounted(() => {
                v-model:value="modalState.from.ki"
                allow-clear
                placeholder="请输入KI"
+                :disabled="modalState.from.id!==''"
              >
              </a-input>
            </a-form-item>
@@ -936,6 +929,7 @@ onMounted(() => {
                v-model:value="modalState.from.opc"
                allow-clear
                placeholder="请输入OPC"
+                :disabled="modalState.from.id!==''"
              ></a-input>
            </a-form-item>
          </a-col>
--- a/src/views/neUser/ims/index.vue
+++ b/src/views/neUser/ims/index.vue
@@ -301,7 +301,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: true,y:400 }"
      >
      </a-table>
    </a-card>
--- a/src/views/neUser/sub/index.vue
+++ b/src/views/neUser/sub/index.vue
@@ -204,6 +204,7 @@ let modalState: ModalStateType = reactive({
  visibleByBatchDel: false,
  title: 'UDM签约用户',
  from: {
+    id: '',
    msisdn: '',
    imsi: '',
    ambr: 'def_ambr',
@@ -217,11 +218,11 @@ let modalState: ModalStateType = reactive({
    epsDat: '',
    neId: '',
    epsFlag: '1',
-    epsOdb: [],
-    hplmnOdb: [],
-    ard: [],
-    epstpl: '',
-    contextId: '',
+    epsOdb: [2],
+    hplmnOdb: [3, 4],
+    ard: [1, 7],
+    epstpl: 'def_eps',
+    contextId: '1',
    apnContext: '',
    staticIp: '',
  },
@@ -240,11 +241,11 @@ let modalState: ModalStateType = reactive({
    epsDat: '',
    neId: '',
    epsFlag: '1',
-    epsOdb: [],
-    hplmnOdb: [],
-    ard: [],
-    epstpl: '',
-    contextId: '',
+    epsOdb: [2],
+    hplmnOdb: [3, 4],
+    ard: [1, 7],
+    epstpl: 'def_eps',
+    contextId: '1',
    apnContext: '',
    staticIp: '',
  },
@@ -303,43 +304,6 @@ const modalStateFromOption = reactive({
  ],
 });

-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    imsi: [{ required: true, message: 'IMSI不能为空' }],
-    amf: [{ required: true, message: 'AMF不能为空' }],
-    ki: [{ required: true, message: 'KI不能为空' }],
-    algo: [{ required: true, message: 'algoIndex不能为空' }],
-    opc: [{ required: true, message: 'OPC能为空' }],
-  })
-);
-
-/**对话框内批量添加表单属性和校验规则 */
-const modalStateBatchFrom = Form.useForm(
-  modalState.BatchForm,
-  reactive({
-    num: [
-      { required: true, message: '放号数不能为空' },
-      { min: 1, max: 100, message: '放号数必须小于等于100' },
-    ],
-    imsi: [{ required: true, message: 'IMSI不能为空' }],
-    msisdn: [{ required: true, message: 'MSISDN不能为空' }],
-  })
-);
-
-/**对话框内批量添加表单属性和校验规则 */
-const modalStateBatchDelFrom = Form.useForm(
-  modalState.BatchDelForm,
-  reactive({
-    num: [
-      { required: true, message: '放号数不能为空' },
-      { min: 1, max: 100, message: '放号数必须小于等于100' },
-    ],
-    imsi: [{ required: true, message: 'IMSI不能为空' }],
-  })
-);
-
 /**
 * 针对修改框的截取每位数值
 * @param num 二进制值: 10001 n:长度有几位
@@ -355,11 +319,11 @@ function PrefixZero(num: any, n: any) {
 function fnModalVisibleByBatch(batchFlag?: number) {
  if (batchFlag) {
    modalStateBatchFrom.resetFields(); //重置表单
-    modalState.title = '批量添加鉴权信息';
+    modalState.title = '批量添加签约信息';
    modalState.visibleByBatch = true;
  } else {
    modalStateBatchFrom.resetFields(); //重置表单
-    modalState.title = '批量删除鉴权信息';
+    modalState.title = '批量删除签约信息';
    modalState.visibleByBatchDel = true;
  }
 }
@@ -418,13 +382,27 @@ function fnModalVisibleByEdit(imsi?: string) {
  }
 }

+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    imsi: [{ required: true, message: 'IMSI不能为空' }],
+    smData: [{ required: true, message: 'Subscribed SM Data不能为空' }],
+  })
+);
+
 /**
 * 对话框弹出确认执行函数
 * 进行表达规则校验
 */
 function fnModalOk() {
+  let validateNames = ['imsi'];
+
+  if (modalState.from.id === '') {
+    validateNames.push('smData');
+  }
  modalStateFrom
-    .validate()
+    .validate(validateNames)
    .then(e => {
      modalState.confirmLoading = true;
      const from = toRaw(modalState.from);
@@ -478,6 +456,17 @@ function fnModalOk() {
    });
 }

+/**对话框内批量添加表单属性和校验规则 */
+const modalStateBatchFrom = Form.useForm(
+  modalState.BatchForm,
+  reactive({
+    num: [{ required: true, message: '放号数不能为空' }],
+    imsi: [{ required: true, message: 'IMSI不能为空' }],
+    msisdn: [{ required: true, message: 'MSISDN不能为空' }],
+    smData: [{ required: true, message: 'Subscribed SM Data不能为空' }],
+  })
+);
+
 /**
 * 对话框弹出 批量新增操作确认执行函数
 * 进行表达规则校验
@@ -531,7 +520,11 @@ function fnBatchModalOk() {
          }
        })
        .finally(() => {
+          1;
          hide();
+          from.epsOdb = [];
+          from.hplmnOdb = [];
+          from.ard = [];
          modalState.confirmLoading = false;
        });
    })
@@ -540,6 +533,15 @@ function fnBatchModalOk() {
    });
 }

+/**对话框内批量添加表单属性和校验规则 */
+const modalStateBatchDelFrom = Form.useForm(
+  modalState.BatchDelForm,
+  reactive({
+    num: [{ required: true, message: '放号数不能为空' }],
+    imsi: [{ required: true, message: 'IMSI不能为空' }],
+  })
+);
+
 /**
 * 对话框弹出 批量删除确认执行函数
 * 进行表达规则校验
@@ -995,7 +997,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: true, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'imsi'">
@@ -1216,7 +1218,36 @@ onMounted(() => {
          </a-col>
        </a-row>

-        <a-row :gutter="16">
+        <a-row :gutter="16" v-if="!modalState.from.id">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="Subscribed SM Data"
+              name="smData"
+              v-bind="modalStateFrom.validateInfos.smData"
+            >
+              <a-input v-model:value="modalState.from.smData" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 参数最大长度为128 </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="4G EPS flag" name="epsFlag">
+              <a-tooltip title="是否开启4G EPS 服务,0=不开启,1=开启">
+                <a-select v-model:value="modalState.from.epsFlag">
+                  <a-select-option value="1">Enable</a-select-option>
+                  <a-select-option value="0">Disable</a-select-option>
+                </a-select>
+              </a-tooltip>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16" v-else>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item label="Subscribed SM Data" name="smData">
              <a-input v-model:value="modalState.from.smData" allow-clear>
@@ -1241,7 +1272,6 @@ onMounted(() => {
            </a-form-item>
          </a-col>
        </a-row>
-
        <a-form-item
          label="4G EPS ODB"
          name="epsOdb"
@@ -1565,7 +1595,11 @@ onMounted(() => {

        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="Subscribed SM Data" name="smData">
+            <a-form-item
+              label="Subscribed SM Data"
+              name="smData"
+              v-bind="modalStateBatchFrom.validateInfos.smData"
+            >
              <a-input v-model:value="modalState.BatchForm.smData" allow-clear>
                <template #prefix>
                  <a-tooltip placement="topLeft">
--- a/src/views/neUser/ue/index.vue
+++ b/src/views/neUser/ue/index.vue
@@ -376,7 +376,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: true,y:400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'imsi'">