feat: 添加导入导出页面

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

@@ -11,14 +11,18 @@
         <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>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-  <InfoDialog ref="infoRef"></InfoDialog>
-  <PasswordDialog ref="passwordRef"></PasswordDialog>
+  <InfoDialog ref="infoRef" />
+  <PasswordDialog ref="passwordRef" />
+  <IEDrawer ref="drawerRef" />
 </template>
 
 <script setup lang="ts">
@@ -27,7 +31,7 @@ import { useUserStore } from '@/stores/modules/user'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import InfoDialog from './InfoDialog.vue'
 import PasswordDialog from './PasswordDialog.vue'
-
+import IEDrawer from '@/views/import-export/index.vue'
 const router = useRouter()
 const userStore = useUserStore()
 
@@ -49,6 +53,12 @@ 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,157 @@
+<template>
+  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="950px" :title="drawerProps.title">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="导入日志" name="1">
+        <div class="table-box">
+          <ProTable :columns="iColumns" :tool-button="false" row-key="id" :data="tableData">
+            <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>
+                {{ scope.row.status }}
+              </div>
+            </template>
+            <!-- 表格操作 -->
+            <template #operation>
+              <el-button type="primary" link> 下载 </el-button>
+            </template>
+          </ProTable>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="导出日志" name="second">
+        <div class="table-box">
+          <ProTable :columns="eColumns" :tool-button="false" row-key="id" :data="tableData">
+            <!-- 表格操作 -->
+            <template #operation>
+              <el-button type="primary" link> 下载 </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'
+
+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 iColumns = reactive<ColumnProps<any>[]>([
+  {
+    prop: 'name',
+    label: '文件名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'status',
+    label: '数据导入状态',
+    search: {
+      el: 'input'
+    },
+    width: 220
+  },
+  {
+    prop: 'createBy',
+    label: '操作人',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'updateTime',
+    label: '操作时间',
+    search: {
+      el: 'date-picker',
+      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    },
+    width: 220
+  },
+  { prop: 'operation', label: '操作', width: 100 }
+])
+// 导出信息表格配置项
+const eColumns = reactive<ColumnProps<any>[]>([
+  {
+    prop: 'name',
+    label: '文件名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'createBy',
+    label: '操作人',
+    search: {
+      el: 'input'
+    },
+    width: 220
+  },
+  {
+    prop: 'updateTime',
+    label: '操作时间',
+    search: {
+      el: 'date-picker',
+      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    },
+    width: 220
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  { prop: 'operation', label: '操作', width: 100 }
+])
+
+// 接收父组件传过来的参数
+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>