feat: 我的导入导出

src/api/interface/system/importExport.ts

@@ -0,0 +1,96 @@
+import { PageQuery, BaseEntity } from '@/api/interface/index'
+export interface ImportExportVO extends BaseEntity {
+  /**
+   * 唯一编码
+   */
+  id: string | number
+
+  /**
+   * 文件名称
+   */
+  name: string
+
+  /**
+   * 文件地址
+   */
+  url: string
+
+  /**
+   * 日志信息
+   */
+  logInfo: string
+
+  /**
+   * 状态(1正常  0异常)
+   */
+  status: string
+
+  /**
+   * 文件Id
+   */
+  ossId: number
+}
+
+export interface ImportExportForm {
+  /**
+   * 唯一编码
+   */
+  id?: string | number
+
+  /**
+   * 文件名称
+   */
+  name?: string
+
+  /**
+   * 文件地址
+   */
+  url?: string
+
+  /**
+   * 文件地址
+   */
+  ossId?: number
+
+  /**
+   * 日志信息
+   */
+  logInfo?: string
+
+  /**
+   * 状态(1正常  0异常)
+   */
+  status?: number
+
+  /**
+   * 乐观锁
+   */
+  version?: number
+}
+
+export interface ImportExportQuery extends PageQuery {
+  /**
+   * 文件名称
+   */
+  name?: string
+
+  /**
+   * 文件地址
+   */
+  url?: string
+
+  /**
+   * 日志信息
+   */
+  logInfo?: string
+
+  /**
+   * 状态(1正常  0异常)
+   */
+  status?: number
+
+  /**
+   * 日期范围参数
+   */
+  params?: any
+}

src/api/modules/system/importExport.ts

@@ -0,0 +1,19 @@
+import http from '@/api'
+import { ImportExportVO, ImportExportQuery } from '@/api/interface/system/importExport'
+/**
+ * @name 查询导入导出日志列表
+ * @param query 参数
+ * @returns 返回列表
+ */
+export const listImportExportApi = (query: ImportExportQuery) => {
+  return http.get<ImportExportVO[]>('/system/importExport/list', query, { loading: false })
+}
+
+/**
+ * @name 查询导入导出日志详细
+ * @param id id
+ * @returns returns
+ */
+export const getImportExportApi = (id: string | number) => {
+  return http.get<ImportExportVO>(`/system/importExport/${id}`)
+}

src/components/TaskDialog/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :title="parameter.title" :destroy-on-close="true" width="600" top="8vh" draggable>
+    <div style="text-align: center" v-if="parameter.type === 'import'">
+      <h3>数据导入中...</h3>
+      <div class="info-text">关闭弹窗后可在[<el-link type="primary" @click="link">头像-我的导入导出-导入信息</el-link>] 中查看导入记录。</div>
+    </div>
+    <div style="text-align: center" v-else>
+      <h3>文件导出中...</h3>
+      <div class="info-text">关闭弹窗后可在[<el-link type="primary" @click="link">头像-我的导入导出-导出信息</el-link>] 下载查看。</div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleCancel">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <IEDrawer ref="drawerRef" />
+</template>
+
+<script setup lang="ts" name="TaskDialog">
+import IEDrawer from '@/views/import-export/index.vue'
+import { ref } from 'vue'
+
+export interface DialogProps {
+  title: string // 标题
+  type: 'import' | 'export' // 导入导出类型
+}
+// dialog状态
+const dialogVisible = ref(false)
+// 父组件传过来的参数
+let parameter = ref<DialogProps>({
+  title: '导入信息',
+  type: 'import'
+})
+
+// 取消按钮，重置表单，关闭弹框
+const handleCancel = () => {
+  dialogVisible.value = false
+}
+const drawerRef = ref<InstanceType<typeof IEDrawer> | null>(null)
+const link = () => {
+  drawerRef.value?.acceptParams()
+  dialogVisible.value = false
+}
+// 接收父组件参数
+const openImportDialog = () => {
+  dialogVisible.value = true
+}
+const openExportDialog = () => {
+  dialogVisible.value = true
+  parameter.value = {
+    title: '导出信息',
+    type: 'export'
+  }
+}
+
+defineExpose({
+  openImportDialog,
+  openExportDialog,
+  handleCancel
+})
+</script>
+<style setup lang="scss">
+.info-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/layouts/components/Header/components/Avatar.vue

@@ -11,6 +11,9 @@
         <el-dropdown-item @click="toProfile()">
           <el-icon><User /></el-icon>{{ $t('header.personalCenter') }}
         </el-dropdown-item>
+        <el-dropdown-item divided @click="openDrawer()">
+          <el-icon><Files /></el-icon>导入导出
+        </el-dropdown-item>
         <el-dropdown-item divided @click="logout">
           <el-icon><SwitchButton /></el-icon>{{ $t('header.logout') }}
         </el-dropdown-item>
@@ -19,6 +22,7 @@
   </el-dropdown>
   <InfoDialog ref="infoRef"></InfoDialog>
   <PasswordDialog ref="passwordRef"></PasswordDialog>
+  <IEDrawer ref="drawerRef" />
 </template>
 
 <script setup lang="ts">
@@ -26,8 +30,10 @@ import { LOGIN_URL } from '@/config'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import IEDrawer from '@/views/import-export/index.vue'
 import InfoDialog from './InfoDialog.vue'
 import PasswordDialog from './PasswordDialog.vue'
+import { ref } from 'vue'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -51,6 +57,11 @@ const logout = () => {
     ElMessage.success('退出登录成功！')
   })
 }
+// 打开 drawer(新增、查看、编辑)
+const drawerRef = ref<InstanceType<typeof IEDrawer> | null>(null)
+const openDrawer = () => {
+  drawerRef.value?.acceptParams()
+}
 </script>
 
 <style scoped lang="scss">

src/views/import-export/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="950px" :title="drawerProps.title">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="导入日志" name="1">
+        <div class="drawer-table-box">
+          <ProTable
+            :columns="iColumns"
+            :height="400"
+            :tool-button="false"
+            row-key="id"
+            :init-param="{ type: '0' }"
+            :request-api="listImportExportApi"
+          >
+            <template #status="scope">
+              <div class="i-text">
+                <span v-show="scope.row.status == 1" style="margin-right: 8px">
+                  <i class="dot-class" style="background-color: #67c23a"></i>
+                </span>
+                <span v-show="scope.row.status == 0" style="margin-right: 8px">
+                  <i class="dot-class" style="background-color: #f56c6c"></i>
+                </span>
+                <span v-show="scope.row.status == 2" style="margin-right: 8px">
+                  <i class="dot-class" style="background-color: #e6a23c"></i>
+                </span>
+                <span> </span>
+              </div>
+            </template>
+            <!-- 表格操作 -->
+            <template #operation="scope">
+              <el-button type="primary" link @click="handleDownload(scope.row)"> 下载 </el-button>
+              <el-button type="primary" link @click="handleLog(scope.row)"> 日志 </el-button>
+            </template>
+          </ProTable>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="导出日志" name="second">
+        <div class="drawer-table-box">
+          <ProTable
+            :columns="eColumns"
+            :height="400"
+            :tool-button="false"
+            row-key="id"
+            :init-param="{ type: '1' }"
+            :request-api="listImportExportApi"
+          >
+            <!-- 表格操作 -->
+            <template #operation="scope">
+              <el-button type="primary" link @click="handleDownload(scope.row)"> 下载 </el-button>
+              <el-button type="primary" link @click="handleLog(scope.row)"> 日志 </el-button>
+            </template>
+          </ProTable>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="IEDrawer">
+import { ColumnProps } from '@/components/ProTable/interface'
+import { listImportExportApi } from '@/api/modules/system/importExport'
+import useDownload from '@/hooks/useDownload'
+import { ImportExportVO } from '@/api/interface/system/importExport'
+import { ElMessageBox } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { getDictsApi } from '@/api/modules/system/dictData'
+
+const activeName = ref('1')
+interface DrawerProps {
+  title: string
+}
+
+const drawerVisible = ref(false)
+const drawerProps = ref<DrawerProps>({
+  title: '我的导入导出'
+})
+
+// const tableData = [
+//   {
+//     id: 11,
+//     name: 'Tom',
+//     status: '1',
+//     createBy: 'wanggaokun',
+//     updateTime: '2024-06-21 17:25:33'
+//   }
+// ]
+/** 下载按钮操作 */
+const handleDownload = (row: ImportExportVO) => {
+  useDownload.oss(row.ossId)
+}
+const handleLog = (row: ImportExportVO) => {
+  ElMessageBox.alert(row.logInfo, '日志信息', {
+    dangerouslyUseHTMLString: true
+  })
+}
+
+// 导入信息表格配置项
+const iColumns = reactive<ColumnProps<any>[]>([
+  {
+    type: 'index',
+    label: '序号',
+    width: 60
+  },
+  {
+    prop: 'name',
+    label: '文件名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    enum: () => getDictsApi('sys_normal_disable'),
+    search: {
+      el: 'select'
+    },
+    width: 120
+  },
+  {
+    prop: 'createByName',
+    label: '操作人',
+    search: {
+      el: 'input'
+    },
+    width: 220
+  },
+  {
+    prop: 'createTime',
+    label: '操作时间',
+    width: 220
+  },
+  { prop: 'operation', label: '操作' }
+])
+// 导出信息表格配置项
+const eColumns = reactive<ColumnProps<any>[]>([
+  {
+    type: 'index',
+    label: '序号',
+    width: 60
+  },
+  {
+    prop: 'name',
+    label: '文件名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'createByName',
+    label: '操作人',
+    width: 220
+  },
+  {
+    prop: 'createTime',
+    label: '操作时间',
+    width: 220
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    tag: true,
+    enum: () => getDictsApi('sys_normal_disable'),
+    search: {
+      el: 'select'
+    },
+    width: 120
+  },
+  { prop: 'operation', label: '操作' }
+])
+
+// 接收父组件传过来的参数
+const acceptParams = () => {
+  drawerVisible.value = true
+}
+
+defineExpose({
+  acceptParams
+})
+</script>
+<style scoped lang="scss">
+.dot-class {
+  display: block;
+  width: 10px;
+  height: 10px;
+  margin-left: 10px; // 这个用于圆点居中
+  border-radius: 50%;
+}
+.i-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>