From efb98ac577e2cfadb9ee39859fdd9a2e3c889b02 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sun, 28 Apr 2024 10:22:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=8C=89=E7=B1=BB=E5=9E=8B=E5=A4=9A=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/UploadLicenseFile.vue          | 216 ++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 src/views/ne/neLicense/components/UploadLicenseFile.vue

diff --git a/src/views/ne/neLicense/components/UploadLicenseFile.vue b/src/views/ne/neLicense/components/UploadLicenseFile.vue
new file mode 100644
index 00000000..70b11e77
--- /dev/null
+++ b/src/views/ne/neLicense/components/UploadLicenseFile.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { reactive, onMounted, watch } from 'vue';
+import { message, Upload } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { uploadFile } from '@/api/tool/file';
+import { changeNeLicense, listNeLicense } from '@/api/ne/neLicense';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByUploadFile: boolean;
+  /**标题 */
+  title: string;
+  /**模式 */
+  mode: '5GC' | 'AUSF-UDM-IMS';
+  /**授权文件路径 */
+  licensePath: string;
+  /**上传文件 */
+  uploadFiles: any[];
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByUploadFile: false,
+  mode: '5GC',
+  licensePath: '',
+  uploadFiles: [],
+  title: '授权文件',
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  if (modalState.confirmLoading || !modalState.licensePath) return;
+  modalState.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
+  listNeLicense({
+    neType: undefined,
+    neId: '',
+    version: '',
+    pageNum: 1,
+    pageSize: 20,
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+        if (modalState.mode === '5GC') {
+          return res.rows.filter(
+            s => !['OMC', 'AUSF', 'UDM', 'IMS'].includes(s.neType)
+          );
+        }
+        if (modalState.mode === 'AUSF-UDM-IMS') {
+          return res.rows.filter(s =>
+            ['AUSF', 'UDM', 'IMS'].includes(s.neType)
+          );
+        }
+      }
+      return [];
+    })
+    .then(arr => {
+      return Promise.all(
+        arr.map(s => {
+          s.licensePath = modalState.licensePath;
+          return changeNeLicense(s);
+        })
+      );
+    })
+    .then(resArr => {
+      message.success(t('common.operateOk'), 3);
+      emit('ok', resArr);
+      fnModalCancel();
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByUploadFile = false;
+  modalState.confirmLoading = false;
+  modalState.mode = '5GC';
+  modalState.licensePath = '';
+  modalState.uploadFiles = [];
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  const fileName = file.name;
+  if (!fileName.endsWith('.ini')) {
+    message.error('只支持上传文件格式 .ini', 3);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('文件必须小于2MB', 3);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+}
+
+/**表单上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  let formData = new FormData();
+  formData.append('file', up.file);
+  formData.append('subPath', 'license');
+  uploadFile(formData)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success('upload success', 3);
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        const { fileName } = res.data;
+        modalState.licensePath = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      modalState.title = 'Upload License File';
+      modalState.visibleByUploadFile = true;
+    }
+  }
+);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <a-modal
+    width="500px"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="modalState.visibleByUploadFile"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :wrapper-col="{ span: 18 }"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-form-item label="License File" name="file">
+        <a-input-group compact>
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.uploadFiles"
+            accept=".ini"
+            list-type="text"
+            :multiple="true"
+            :max-count="1"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+            :disabled="modalState.confirmLoading"
+          >
+            <a-button type="primary">
+              <template #icon>
+                <UploadOutlined />
+              </template>
+              Upload
+            </a-button>
+          </a-upload>
+          <a-select v-model:value="modalState.mode" style="width: 142px">
+            <a-select-option value="5GC">5GC</a-select-option>
+            <a-select-option value="AUSF-UDM-IMS">AUSF-UDM-IMS</a-select-option>
+          </a-select>
+        </a-input-group>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>