pref: 网元授权页面的组件重构

src/views/ne/neLicense/components/EditModal.vue

@@ -120,7 +120,8 @@ function fnModalOk() {
             content: t('common.operateOk'),
             duration: 3,
           });
-          emit('ok', from);
+          // 返回无引用信息
+          emit('ok', JSON.parse(JSON.stringify(from)));
           fnModalCancel();
         } else {
           message.error({

src/views/ne/neLicense/index.vue

@@ -1,36 +1,21 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import {
-  Form,
-  Modal,
-  TableColumnsType,
-  Upload,
-  message,
-} from 'ant-design-vue/lib';
+import { Modal, TableColumnsType, 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 { 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 EditModal = defineAsyncComponent(
+  () => import('./components/EditModal.vue')
+);
 
 /**字典数据-状态 */
 let dictStatus = ref<DictType[]>([]);
@@ -75,7 +60,9 @@ type TabeStateType = {
   /**搜索栏 */
   seached: boolean;
   /**记录数据 */
-  data: object[];
+  data: any[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -84,6 +71,7 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: false,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
@@ -185,6 +173,11 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -216,88 +209,26 @@ function fnGetList(pageNum?: number) {
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: {
-    id: string;
-    neType: string;
-    neId: string;
-    activationRequestCode: string;
-    licensePath: string;
-    remark: string;
-    reload: boolean;
-  };
+  /**授权记录ID */
+  licenseId: string;
   /**确定按钮 loading */
   confirmLoading: boolean;
-  /**上传文件 */
-  uploadFiles: any[];
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   visibleByEdit: false,
-  title: '授权文件',
-  from: {
-    id: '',
-    neType: '',
-    neId: '',
-    activationRequestCode: '',
-    licensePath: '',
-    remark: '',
-    reload: false,
-  },
+  licenseId: '',
   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',
-      },
-    ],
-  })
-);
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param licenseId id
  */
 function fnModalVisibleByEdit(licenseId: string) {
-  if (modalState.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  getNeLicense(licenseId)
-    .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();
-    });
+  modalState.licenseId = licenseId;
+  modalState.visibleByEdit = true;
 }
 
 /**
@@ -305,36 +236,8 @@ function fnModalVisibleByEdit(licenseId: string) {
  * 进行表达规则校验
  */
 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,
-          });
-          fnModalCancel();
-          // 获取列表数据
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            duration: 3,
-          });
-        }
-        hide();
-        modalState.confirmLoading = false;
-      });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
+  // 获取列表数据
+  fnGetList();
 }
 
 /**
@@ -343,87 +246,16 @@ function fnModalOk() {
  */
 function fnModalCancel() {
   modalState.visibleByEdit = false;
-  modalState.confirmLoading = false;
-  modalStateFrom.resetFields();
-  modalState.uploadFiles = [];
-}
-
-/**表单上传前检查或转换压缩 */
-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`);
-    },
-  });
+  modalState.licenseId = '';
 }
 
 /**刷新网元授权信息 */
 function fnRecordRefresh(row: Record<string, any>) {
+  if (modalState.confirmLoading) return;
   Modal.confirm({
     title: t('common.tipTitle'),
     content: 'Refresh Ne License info?',
     onOk() {
-      if (modalState.confirmLoading) return;
       modalState.confirmLoading = true;
       const hide = message.loading(t('common.loading'), 0);
       stateNeLicense(row.neType, row.neId)
@@ -443,6 +275,38 @@ function fnRecordRefresh(row: Record<string, any>) {
   });
 }
 
+/**勾选刷新网元状态 */
+function fnRecordState() {
+  if (modalState.confirmLoading) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `check refresh license state?`,
+    onOk: async () => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      // 勾选的网元数据
+      const selectRows = tableState.data.filter(item =>
+        tableState.selectedRowKeys.includes(item.id)
+      );
+
+      for (const row of selectRows) {
+        if (row.neType.toUpperCase() === 'OMC') {
+          continue;
+        }
+        const res = await stateNeLicense(row.neType, row.neId);
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          row.status = '1';
+          row.serialNum = res.data.sn;
+          row.expiryDate = res.data.expire;
+        }
+      }
+      message.success(t('common.operateOk'), 3);
+      hide();
+      modalState.confirmLoading = false;
+    },
+  });
+}
+
 onMounted(() => {
   // 初始字典数据
   getDict('ne_license_status').then(res => {
@@ -527,7 +391,17 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center"> </a-space>
+        <a-space :size="8" align="center">
+          <a-button
+            type="default" 
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordState()"
+          >
+            <template #icon><SecurityScanOutlined /></template>
+            Refresh Status
+          </a-button>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -586,6 +460,12 @@ onMounted(() => {
         :pagination="tablePagination"
         :scroll="{ x: tableColumns.length * 120 }"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
@@ -631,106 +511,13 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 上传框 -->
-    <a-modal
-      width="800px"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
+    <!-- 文件上传框 -->
+    <EditModal
+      v-model:visible="modalState.visibleByEdit"
+      :edit-id="modalState.licenseId"
       @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>
+    ></EditModal>
   </PageContainer>
 </template>