From 1baff582d80bfd916735c7390157181e96cc03a4 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sun, 28 Apr 2024 10:24:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=9F=A5=E7=9C=8B=E5=BC=B9=E5=87=BA=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/ne/neLicense/components/EditModal.vue b/src/views/ne/neLicense/components/EditModal.vue
new file mode 100644
index 00000000..92149fd7
--- /dev/null
+++ b/src/views/ne/neLicense/components/EditModal.vue
@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw, watch } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import {
+  Form,
+  Modal,
+  TableColumnsType,
+  Upload,
+  message,
+} 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 useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
+
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  changeNeLicense,
+  getNeLicense,
+  listNeLicense,
+  stateNeLicense,
+} from '@/api/ne/neLicense';
+import { parseDateToStr } from '@/utils/date-utils';
+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 { useClipboard } from '@vueuse/core';
+import saveAs from 'file-saver';
+const { copy } = useClipboard({ legacy: true });
+const { t } = useI18n();
+const { getDict } = useDictStore();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  editId: {
+    type: String,
+    default: '',
+  },
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: {
+    id: string;
+    neType: string;
+    neId: string;
+    activationRequestCode: string;
+    licensePath: string;
+    remark: string;
+    reload: boolean;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传文件 */
+  uploadFiles: any[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '授权文件',
+  from: {
+    id: '',
+    neType: '',
+    neId: '',
+    activationRequestCode: '',
+    licensePath: '',
+    remark: '',
+    reload: false,
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message: 'Please input NE Type',
+      },
+    ],
+    neId: [
+      {
+        required: true,
+        message: 'Please input NE ID',
+      },
+    ],
+    licensePath: [
+      {
+        required: true,
+        message: 'Please upload file',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  if (modalState.confirmLoading) return;
+
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      const from = toRaw(modalState.from);
+      changeNeLicense(from).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.operateOk'),
+            duration: 3,
+          });
+          emit('ok', from);
+          fnModalCancel();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 3,
+          });
+        }
+        hide();
+        modalState.confirmLoading = false;
+      });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.uploadFiles = [];
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  if (!file.name.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.from.licensePath = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**复制授权申请码 */
+function fnCopyCode() {
+  const code = modalState.from.activationRequestCode;
+  if (!code) return;
+  copy(code).then(() => {
+    message.success('copy success', 3);
+  });
+}
+
+/**下载授权申请码文件 */
+function fnDownCode() {
+  const { activationRequestCode, neType, neId } = modalState.from;
+  if (!activationRequestCode) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: 'Confirm to download the Code as a file for saving?',
+    onOk() {
+      const blob = new Blob([activationRequestCode], {
+        type: 'text/plain',
+      });
+      saveAs(blob, `${neType}_${neId}_code.txt`);
+    },
+  });
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param id id
+ */
+function fnModalVisibleByEdit(id?: string) {
+  if (id) {
+    const hide = message.loading(t('common.loading'), 0);
+    getNeLicense(id)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          Object.assign(modalState.from, res.data);
+          modalState.from.licensePath = '';
+          modalState.title = 'Update License';
+          modalState.visibleByEdit = true;
+        } else {
+          message.error(res.msg, 3);
+        }
+      })
+      .finally(() => {
+        modalState.confirmLoading = false;
+        hide();
+      });
+
+    return;
+  }
+  modalState.title = 'Upload License';
+  modalState.visibleByEdit = true;
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) fnModalVisibleByEdit(props.editId);
+  }
+);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <a-modal
+    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"
+      :wrapper-col="{ span: 18 }"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-form-item
+        :label="t('views.configManage.license.neType')"
+        name="neType"
+        v-bind="modalStateFrom.validateInfos.neType"
+      >
+        <a-input v-model:value="modalState.from.neType" :disabled="true" />
+      </a-form-item>
+      <a-form-item
+        :label="t('views.configManage.license.neId')"
+        name="neId"
+        v-bind="modalStateFrom.validateInfos.neId"
+      >
+        <a-input v-model:value="modalState.from.neId" :disabled="true" />
+      </a-form-item>
+
+      <a-form-item
+        label="ActivationRequestCode"
+        name="activationRequestCode"
+        v-bind="modalStateFrom.validateInfos.activationRequestCode"
+      >
+        <a-input-group compact>
+          <a-input
+            v-model:value="modalState.from.activationRequestCode"
+            :disabled="true"
+            style="width: calc(100% - 64px)"
+          />
+          <a-tooltip title="Copy">
+            <a-button type="default" @click="fnCopyCode()">
+              <template #icon><CopyOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip title="Download">
+            <a-button type="primary" @click="fnDownCode()">
+              <template #icon><DownloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-input-group>
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.configManage.license.updateFile')"
+        name="file"
+        v-bind="modalStateFrom.validateInfos.licensePath"
+      >
+        <a-upload
+          name="file"
+          v-model:file-list="modalState.uploadFiles"
+          accept=".ini"
+          list-type="text"
+          :max-count="1"
+          :show-upload-list="{
+            showPreviewIcon: false,
+            showRemoveIcon: false,
+            showDownloadIcon: false,
+          }"
+          :before-upload="fnBeforeUploadFile"
+          :custom-request="fnUploadFile"
+          :disabled="modalState.confirmLoading"
+        >
+          <a-button type="primary">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            Upload
+          </a-button>
+        </a-upload>
+      </a-form-item>
+
+      <a-form-item label="NE Reload" name="reload">
+        <a-switch v-model:checked="modalState.from.reload"> </a-switch>
+      </a-form-item>
+
+      <a-form-item label="Remark" name="remark">
+        <a-textarea
+          v-model:value="modalState.from.remark"
+          :maxlength="200"
+          :show-count="true"
+          :placeholder="t('common.inputPlease')"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>