片头片尾预览

du

2025-04-18 357082150fac10f8f27b6d45d2e65b6613c748ee

 easegen-front/src/views/File/index.vue

@@ -11,22 +11,23 @@
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="文件类别" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择文件类别" style="width: 180px;">
            <el-option label="片头" :value="VIDEO_TYPE.HEAD" />
            <el-option label="片尾" :value="VIDEO_TYPE.TAIL" />
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="handleQuery">搜索</el-button>
        <el-button size="default" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="default" @click="handleQuery" :icon="Search">搜索</el-button>
        <el-button size="default" @click="resetQuery" :icon="Refresh">重置</el-button>
        <el-button
          type="primary"
          size="default"
          @click="handleAdd"
          :icon="Plus"
        >新增</el-button>
      </el-col>
    </el-row>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="fileList" border>
@@ -45,6 +46,12 @@
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handlePreview(scope.row.url)"
          >预览</el-button>
          <el-button
            size="mini"
            type="text"
@@ -100,6 +107,16 @@
        </div>
      </template>
    </el-dialog>

    <!-- 视频预览弹窗 -->
    <el-dialog title="视频预览" v-model="previewVisible" width="50%" append-to-body>
      <video
        v-if="previewUrl"
        :src="previewUrl"
        controls
        style="width: 100%"
      >您的浏览器不支持 video 标签。</video>
    </el-dialog>
  </div>
</template>

@@ -109,7 +126,11 @@
import  * as DigitalHumansApi from '@/api/system/file/index'
import dayjs from 'dayjs'
const message = useMessage() // 消息弹窗

import {
  Refresh,
  Search,
  Plus,
} from '@element-plus/icons-vue'
// 视频类别常量
const VIDEO_TYPE = {
  HEAD: '1', // 片头
@@ -128,6 +149,7 @@
  pageNo: number
  pageSize: number
  name?: string
  type?: string
}

// 遮罩层
@@ -142,7 +164,8 @@
const queryParams = reactive<QueryParams>({
  pageNo: 1,
  pageSize: 10,
  name: undefined
  name: undefined,
  type: ''
})

// 表单引用
@@ -169,6 +192,10 @@
    { required: true, message: "请上传文件", trigger: "change" }
  ]
})

// 预览弹窗
const previewVisible = ref(false)
const previewUrl = ref('')

// 新增按钮操作
const handleAdd = () => {
@@ -285,6 +312,16 @@
  document.body.removeChild(link)
}

// 预览按钮操作
const handlePreview = (url: string) => {
  if (!url) {
    message.warning("未找到资源文件！")
    return
  }
  previewUrl.value = url
  previewVisible.value = true
}

// 格式化时间
const parseTime = (time: number) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')