DigitalHuman-web/src/views/import-export/index.vue

<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'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { excel_status } = toRefs<any>(proxy?.useDict('excel_status'))
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: excel_status,
    search: {
      el: 'select'
    },
    width: 120
  },
  {
    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: 'operation', label: '操作' }
])
// 导出信息表格配置项
const eColumns = reactive<ColumnProps<any>[]>([
  {
    type: 'index',
    label: '序号',
    width: 60
  },
  {
    prop: 'name',
    label: '文件名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'createBy',
    label: '操作人',
    width: 220
  },
  {
    prop: 'updateTime',
    label: '操作时间',
    width: 220
  },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: excel_status,
    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>