fix: 添加导入

src/api/common/index.ts

@@ -11,6 +11,8 @@ enum Api {
   getSystemTime = '/system/sysConfig/getTime',
   getDownloadUrl = '/sys/storage/file/download/',
   getPreviewUrl = '/sys/storage/file/preview/',
+  excelSheetDetail = '/excel/sheet/detail',
+  tempDownload = '/archives/patientBasic/export',
 }
 
 export function listDictModel(params?: object) {
@@ -52,3 +54,13 @@ export function getDownloadUrl(id) {
 export function getPreviewUrl(id) {
   return defHttp.get({ url: Api.getPreviewUrl + id });
 }
+
+// 导入数据
+export const excelSheetDetail = (id: string) => {
+  return defHttp.get({ url: Api.excelSheetDetail + '/' + id });
+};
+
+// 下载模板
+export const tempDownload = (params?: Array<string | number>) => {
+  return defHttp.post({ url: Api.tempDownload, params: params });
+};

src/views/monitor/loginLog/importModal/importView.vue

@@ -0,0 +1,153 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    width="500px"
+    title="导入数据"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <Card style="background-color: cornsilk" v-if="statsUpload == 'done'">
+      <h2 style="text-align: center">数据导入中...</h2>
+      <h5 style="text-align: center">请不要离开此页面</h5>
+      <Progress :percent="percentProgress" :showInfo="false" status="active" />
+    </Card>
+    <Card style="background-color: cornsilk" v-else-if="statsUpload == 'success'">
+      <h2 style="text-align: center">成功</h2>
+      <h2 style="text-align: center"><a @click="goOnImport">继续导入</a></h2>
+    </Card>
+    <Card style="background-color: cornsilk" v-else-if="statsUpload == 'fail'">
+      <h2 style="text-align: center">失败</h2>
+      <h2 style="text-align: center" @click="getExportExcel">失败文件</h2>
+      <div style="text-align: center">
+        <span> 失败: {{ importExcelInfo.fail }}</span>
+        <span> 成功: {{ importExcelInfo.success }}</span>
+        <span> 总数: {{ importExcelInfo.total }}</span>
+      </div>
+    </Card>
+    <Card style="background-color: cornsilk" v-else>
+      <h2 style="text-align: center">选择需要导入的文件</h2>
+      <h5 style="text-align: center"
+        >若您是第一次上传文件，可先下载<a @click="downloadFile">文件模板</a>，文件大小不超过5M</h5
+      >
+      <div class="flex flex-col justify-center">
+        <Upload
+          class="button-style"
+          name="file"
+          :beforeUpload="handleBeforeUpload"
+          :maxCount="1"
+          :action="uploadApi"
+          @change="onChange"
+        >
+          <Button type="primary"> 点击上传 </Button>
+        </Upload>
+      </div>
+      <!-- //v-auth="['dialysis:patientbasic:import']" -->
+    </Card>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { Progress } from 'ant-design-vue';
+  import { Upload } from 'ant-design-vue';
+  import { Button } from '/@/components/Button';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { excelSheetDetail, getDownloadUrl, tempDownload } from '/@/api/common/index';
+  const globSetting = useGlobSetting();
+  import { listDictModel } from '/@/api/common';
+  import { downloadByBase64, downloadByUrl } from '/@/utils/file/download';
+  const uploadApi = globSetting.apiUrl + '/archives/patientBasic/import/batch';
+  const fileUpload = ref();
+  const typeOptions = ref();
+  const statsUpload = ref('default');
+  const timer = ref(null);
+  const exportFileId = ref('');
+  const percentProgress = ref(0);
+  const importExcelInfo = reactive({
+    success: 0,
+    fail: 0,
+    total: 0,
+  });
+
+  onBeforeMount(async () => {
+    typeOptions.value = await listDictModel({ dictCode: 'sys_login_log_type' });
+
+    fileUpload.value = '';
+  });
+  // closeModal
+  const [registerModal, { setModalProps }] = useModalInner(async data => {
+    console.log('🚀 ~ file: code.vue:21 ~ data:', data);
+    setModalProps({ confirmLoading: false });
+  });
+  async function handleBeforeUpload(file) {
+    console.log('file', file);
+    fileUpload.value = file;
+  }
+  async function handleSubmit() {
+    console.log('11111');
+  }
+  function handleCancel() {
+    statsUpload.value = 'default';
+  }
+  function goOnImport() {
+    statsUpload.value = 'default';
+  }
+  async function onChange(file) {
+    console.log('onChange', file);
+    console.log('file.file.status', file.file.status);
+    if (file.file.status === 'done') {
+      statsUpload.value = 'done';
+      const id = file.file.response.data;
+      if (id) {
+        timer.value = setInterval(async function () {
+          const importStats = await excelSheetDetail(id);
+          console.log('importStats', importStats);
+          importExcelInfo.fail = importStats.failCount;
+          importExcelInfo.success = importStats.successCount;
+          importExcelInfo.total = importStats.totalCount;
+          // 进度条
+          percentProgress.value =
+            ((importStats.failCount + importStats.successCount) / importStats.totalCount) * 100;
+          console.log('进度条：', percentProgress.value);
+          const isFinish =
+            importStats.failCount + importStats.successCount == importStats.totalCount;
+          if (isFinish) {
+            clearInterval(timer.value);
+            setTimeout(() => {
+              if (importStats.failCount) {
+                statsUpload.value = 'fail';
+                exportFileId.value = importStats.exportFileId;
+                percentProgress.value = 0;
+              } else {
+                statsUpload.value = 'success';
+                percentProgress.value = 0;
+              }
+            }, 3000);
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  async function getExportExcel() {
+    const res = await getDownloadUrl(exportFileId.value);
+    console.log('res', res);
+    downloadByUrl({ url: res });
+  }
+  async function downloadFile() {
+    const res = await tempDownload([]);
+    downloadByBase64(res.base64, res.fileName + '.xlsx');
+  }
+  onUnmounted(() => {
+    timer.value ? clearInterval(timer.value) : null;
+  });
+</script>
+<style lang="less" scoped>
+  .button-style {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

src/views/monitor/loginLog/index.vue

@@ -45,14 +45,7 @@
         </template>
       </template>
       <template #toolbar>
-        <!-- <Button
-          v-auth="['sys:log:add']"
-          type="primary"
-          @click="handleCreate"
-          preIcon="icon-plus|iconfont"
-        >
-          新增
-        </Button> -->
+        <Button type="primary" @click="handleImport"> 导入 </Button>
         <Button
           v-auth="['sys:log:remove']"
           type="primary"
@@ -66,6 +59,7 @@
     </BasicTable>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
     <ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
+    <importView @register="registerModal" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -79,13 +73,14 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import FormDrawer from './formDrawer.vue';
   import ViewDrawer from './viewDrawer.vue';
+  import importView from './importModal/importView.vue';
   import { columns, searchFormSchema } from './data';
 
   import { LogQueryPage, LogRemove } from '/@/api/monitor/LogApi';
   import { listDictModel } from '/@/api/common';
   import { formatDictColor, formatDictValue } from '/@/utils'; //
   import { useDrawer } from '/@/components/Drawer';
-
+  import { useModal } from '/@/components/Modal';
   import { useAppStore } from '/@/store/modules/app';
 
   const typeOptions = ref();
@@ -100,7 +95,7 @@
   });
 
   const { createConfirm, createMessage } = useMessage();
-  // const [registerModal, { openModal }] = useModal();
+  const [registerModal, { openModal }] = useModal();
   const [registerDrawer] = useDrawer(); // , { openDrawer }
   const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
 
@@ -148,12 +143,9 @@
     });
   }
 
-  //   // 新增按钮事件
-  //   function handleCreate() {
-  //     openDrawer(true, {
-  //       isUpdate: false,
-  //     });
-  //   }
+  function handleImport() {
+    openModal(true);
+  }
 
   //   // 编辑按钮事件
   //   function handleEdit(record: Recordable) {