gold-vue/src/views/home.vue

<script setup>
// 导航栏在这
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import API from '@/util/http'
import dmmn from '../assets/link.png'
import moment from 'moment'
import ChangePassword from '@/components/changePassword.vue'



const router = useRouter()
const imgrule1 = dmmn
const messageVisible = ref(false)

// 这是获取用户信息的接口
const adminData = ref({
  name: ''
})

const getAdminData = async function () {
  try {
    const result = await API({ url: '/admin/userinfo', data: {} })
    adminData.value = result
    console.log('请求成功', result)
    console.log('用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}
// 获取地区
const areas = ref([])

const currentArea = ref('全部')

const getAreas = async function () {
  try {
    const result = await API({ url: '/general/market', data: {} })
    areas.value = result.data
    console.log('请求成功', result)
  } catch (error) {
    console.log('请求失败', error)
  }
}
// 查看个人信息弹出框
const openMessage = function () {
  messageVisible.value = true
}
const closeMessage = function () {
  messageVisible.value = false
}
const message = function () {
  openMessage()
}

// 导出列表数据
const exportList = ref([])
// 导出列表加载状态
const exportListLoading = ref(false)

// 获取导出列表
const getExportList = async () => {
  exportListLoading.value = true
  try {
    const result = await API({ url: '/export/export' })
    if (result.code === 200) {
      exportList.value = result.data
    } else {
      ElMessage.error(result.msg || '获取导出列表失败')
    }
  } catch (error) {
    console.error('获取导出列表出错:', error)
    ElMessage.error('获取导出列表失败，请稍后重试')
  } finally {
    exportListLoading.value = false
  }
}

//根据状态返回对应的标签类型
const getTagType = (state) => {
  switch (state) {
    case 0:
      return 'info';
    case 1:
      return 'primary';
      case 2:
      return'success';
    case 3:
      return 'danger';
    default:
      return 'info';
  }
}
//根据状态返回对应的标签文案
const getTagText = (state) => {
  switch (state) {
    case 0:
      return '待执行';
    case 1:
      return '执行中';
      case 2:
      return'执行完成';
    case 3:
      return '执行出错';
    default:
      return '未知状态';
  }
}

// 下载导出文件
const downloadExportFile = (item) => {
  if (item.state === 2) {
    const link = document.createElement('a')
    link.href = item.url
    link.download = item.fileName
    link.click()
  } else {
    ElMessage.warning('文件还在导出中，请稍后再试')
  }
}

function logout() {
  const machineId = localStorage.getItem('machineId')
  localStorage.removeItem('token')
  router.push('/login?machineId=' + machineId)
  ElMessage.success('退出成功')
}

// 挂载
onMounted(async function () {
  // 获取用户信息
  getAdminData()
  // 初始化获取导出列表
  await getExportList()
})
// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
const changeDataByArea = (item) => {
  currentArea.value = item
}

// 控制导出列表弹窗显示状态
const exportListVisible = ref(false)
// 显示修改密码弹窗
const showPasswordDialog = ref(false)
// 打开导出列表弹窗
const openExportList = () => {
  getExportList()
  exportListVisible.value = true
}
//打开修改密码弹窗
const openChangePassword = () => {
  showPasswordDialog.value = true
}
</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-aside style="
          width: 15%;
          min-width: 180px;
          position: fixed; /* 固定位置 */
          top: 0;
          left: 0;
          height: 100vh; /* 高度占满视口 */
          z-index: 100; /* 确保侧边栏在其他元素之上 */
        ">
        <div class="logo">
          <img src="../assets/新logo.png" alt="logo" style="width: 80px; height: 80px" />
          <!-- <div style="font-size: 16px; font-weight: bold; color: black; text-align: center;" ><h1>海外金币管理系统</h1></div> -->
        </div>
        <el-card style="min-height: 90%;">

          <el-menu :router="true" class="el-menu-vertical-demo">
            <el-menu-item index="/workspace">
              <el-icon>
                <Folder />
              </el-icon>
              <span>工作台</span>
            </el-menu-item>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Folder />
                </el-icon>
                <span>财务审核</span>
              </template>
              <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
              <el-menu-item index="/refundAudit">退款审核</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/rate">
              <el-icon>
                <Folder />
              </el-icon>
              <span>汇率管理</span>
            </el-menu-item>
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <Folder />
                </el-icon>
                <span>充值管理</span>
              </template>
              <el-menu-item index="/coinRecharge">金币充值</el-menu-item>
              <!-- <el-menu-item index="/beanRecharge">金豆充值</el-menu-item> -->
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <Folder />
                </el-icon>
                <span>消耗管理</span>
              </template>
              <el-menu-item index="/coinConsume">金币消耗</el-menu-item>
              <!-- <el-menu-item index="/beanConsume">金豆消耗</el-menu-item> -->
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>
                <el-icon>
                  <Folder />
                </el-icon>
                <span>退款管理</span>
              </template>
              <el-menu-item index="/coinRefund">金币退款</el-menu-item>
              <!-- <el-menu-item index="/beanRefund">金豆退款</el-menu-item> -->
            </el-sub-menu>
            <el-menu-item index="/usergold">
              <el-icon>
                <Folder />
              </el-icon>
              <span>客户账户明细</span>
            </el-menu-item>
            <el-menu-item index="/permissions">
              <el-icon>
                <Folder />
              </el-icon>
              <span>权限管理</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>
      <el-container style="margin-left: 15%; min-width: 180px">
        <!-- 修改 el-header 样式 -->
        <el-header style="
            position: fixed;
            top: 0;
            left: 15%;
            right: 0;
            z-index: 80;
            background: white;
          ">


          <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
            <el-badge @click="openExportList" class="item" > <!-- 用的el-badgeBadge 徽章 之后可以加数字 -->
              <el-button>查看导出列表</el-button>
            </el-badge>

            <el-sub-menu index="1" class="admin">
              <template #title>
                <el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />
                <span style="margin-left: 10px">{{ adminData.name }}</span>
              </template>
              <el-menu-item @click="message()">查看个人信息</el-menu-item>
              <el-menu-item @click="openChangePassword">修改密码</el-menu-item>
              <el-menu-item @click="logout">退出登录</el-menu-item>
              <el-menu-item index="1-3" @click="openExportList">查看下载列表</el-menu-item>

            </el-sub-menu>

          </el-menu>
        </el-header>
        <el-main style="margin-top: 60px">
          <!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 查看个人信息 -->
    <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
      <el-form :model="adminData">
        <el-form-item label="用户姓名" label-width="100px" label-position="left">
          <span class="message-font">{{ adminData.adminName }}</span>
        </el-form-item>
        <el-form-item label="精网号" label-width="100px" label-position="left">
          <span class="message-font">{{ adminData.account }}</span>
        </el-form-item>
        <el-form-item label="地区" label-width="100px" label-position="left">
          <span class="message-font">{{ adminData.market }}</span>
        </el-form-item>
        <el-form-item label="注册时间" label-width="100px" label-position="left">
          <span class="message-font">{{ adminData.createTime }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="closeMessage()">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导出列表弹窗 -->
    <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
      <el-table :data="exportList" style="width: 100%" :loading="exportListLoading">
        <el-table-column prop="fileName" label="文件名" />
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.state)"
                    :effect="scope.row.state === 3 ? 'light' : 'plain'">
              {{ getTagText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
              :disabled="scope.row.state !== 2">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="exportListVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 自定义密码修改弹窗组件 -->
    <el-dialog
        v-model="showPasswordDialog"
        :center="true"
        width="470px"
    >
      <ChangePassword v-if="showPasswordDialog"  @confirm="showPasswordDialog = false" />
    </el-dialog>


  </div>
</template>

<style scoped>
.message-font {
  font-size: 16px;
  font-weight: bold;
}
.item {
  margin-top: 20px;
  margin-right: 40px;
}
.admin {
  margin-left: auto;
}

.el-aside {
  min-height: 100vh;
  width: 200px;
}

/* background-color: #BFD8D2; */
.logo {
  margin: 20px 0px 20px 20px;
  display: flex;
}

.el-menu-demo {
  border: none;
  /* 去除边框 */
  padding: 0;
  /* 去除内边距 */
  float: right;
  /* 将菜单向右浮动 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
  border: none;
  /* 去除边框 */
}
</style>