From b0e77ad9ca41ae80121fe995a1f0f00e770809e4 Mon Sep 17 00:00:00 2001
From: du <13220750630.163.com>
Date: 星期五, 18 四月 2025 10:52:52 +0800
Subject: [PATCH] 片头片尾
---
easegen-front/src/views/File/index.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++
easegen-front/src/api/system/file/index.ts | 22 +++
2 files changed, 327 insertions(+), 0 deletions(-)
diff --git a/easegen-front/src/api/system/file/index.ts b/easegen-front/src/api/system/file/index.ts
new file mode 100644
index 0000000..a50cf30
--- /dev/null
+++ b/easegen-front/src/api/system/file/index.ts
@@ -0,0 +1,22 @@
+import request from '@/config/axios'
+// 鏌ヨ鐗囧ご鐗囧熬
+export const listFile = (params: PageParam) => {
+ return request.get({ url: '/digitalcourse/titles-trailer/page', params })
+}
+// 鏌ヨ鐗囧ご鐗囧熬璇︽儏
+export const getFile = (id: number) => {
+ return request.get({ url: '/digitalcourse/titles-trailer/get?id=' + id })
+}
+// 鏂板鐗囧ご鐗囧熬
+export const createFile = (data: any) => {
+ return request.post({ url: '/digitalcourse/titles-trailer/create', data })
+}
+// 淇敼鐗囧ご鐗囧熬
+export const updateFile = (data: any) => {
+ return request.put({ url: '/digitalcourse/titles-trailer/update', data })
+}
+// 鍒犻櫎鐗囧ご鐗囧熬
+export const deleteFile = (id: number) => {
+ return request.delete({ url: '/digitalcourse/titles-trailer/delete?id=' + id })
+}
+
diff --git a/easegen-front/src/views/File/index.vue b/easegen-front/src/views/File/index.vue
new file mode 100644
index 0000000..d6f1ceb
--- /dev/null
+++ b/easegen-front/src/views/File/index.vue
@@ -0,0 +1,305 @@
+<template>
+ <div class="app-container">
+ <!-- 鎼滅储琛ㄥ崟 -->
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+ <el-form-item label="鏂囦欢鍚�" prop="fileName">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="璇疯緭鍏ユ枃浠跺悕"
+ clearable
+ size="default"
+ @keyup.enter="handleQuery"
+ />
+ </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="handleAdd"
+ >鏂板</el-button>
+ </el-col>
+ </el-row>
+
+ <!-- 琛ㄦ牸 -->
+ <el-table v-loading="loading" :data="fileList" border>
+ <el-table-column type="index" label="搴忓彿" align="center" width="80" />
+ <el-table-column label="鏂囦欢鍚�" prop="name" :show-overflow-tooltip="true" align="center" />
+ <el-table-column label="鏂囦欢绫诲埆" prop="type" align="center">
+ <template #default="scope">
+ {{ scope.row.type === VIDEO_TYPE.HEAD ? '鐗囧ご' : '鐗囧熬' }}
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒涘缓浜�" prop="creatorName" align="center" />
+ <el-table-column label="鍒涘缓鏃堕棿" prop="createTime" align="center">
+ <template #default="scope">
+ <span>{{ parseTime(scope.row.createTime) }}</span>
+ </template>
+ </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-download"
+ @click="handleDownload(scope.row.url,scope.row.name)"
+ >涓嬭浇</el-button>
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-edit"
+ @click="handleUpdate(scope.row)"
+ >淇敼</el-button>
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-delete"
+ @click="handleDelete(scope.row)"
+ style="color: #F56C6C"
+ >鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鍒嗛〉 -->
+ <pagination
+ v-show="total>0"
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+
+ <!-- 鏂板寮圭獥 -->
+ <el-dialog :title="dialogTitle" v-model="open" width="40%" append-to-body>
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+ <el-form-item label="鏂囦欢鍚�" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ユ枃浠跺悕" />
+ </el-form-item>
+ <el-form-item label="鏂囦欢绫诲埆" prop="type">
+ <el-select v-model="form.type" placeholder="璇烽�夋嫨鏂囦欢绫诲埆">
+ <el-option label="鐗囧ご" :value="VIDEO_TYPE.HEAD" />
+ <el-option label="鐗囧熬" :value="VIDEO_TYPE.TAIL" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="涓婁紶鏂囦欢" prop="url">
+ <UploadFile v-model="form.url" :fileType="['mp4']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import type { FormInstance } from 'element-plus'
+import * as DigitalHumansApi from '@/api/system/file/index'
+import dayjs from 'dayjs'
+const message = useMessage() // 娑堟伅寮圭獥
+
+// 瑙嗛绫诲埆甯搁噺
+const VIDEO_TYPE = {
+ HEAD: '1', // 鐗囧ご
+ TAIL: '2' // 鐗囧熬
+}
+
+interface FileItem {
+ id?: number
+ name: string
+ type: string
+ createBy?: string
+ url: string
+}
+
+interface QueryParams {
+ pageNo: number
+ pageSize: number
+ name?: string
+}
+
+// 閬僵灞�
+const loading = ref(true)
+// 鏄剧ず鎼滅储鏉′欢
+const showSearch = ref(true)
+// 鎬绘潯鏁�
+const total = ref(0)
+// 鏂囦欢鍒楄〃
+const fileList = ref<FileItem[]>([])
+// 鏌ヨ鍙傛暟
+const queryParams = reactive<QueryParams>({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined
+})
+
+// 琛ㄥ崟寮曠敤
+const formRef = ref<FormInstance>()
+
+// 鏂板寮圭獥
+const open = ref(false)
+const dialogTitle = ref('鏂板鏂囦欢')
+const form = reactive<FileItem>({
+ id: undefined,
+ name: '',
+ url: '',
+ type: '',
+ createBy: undefined
+})
+const rules = reactive({
+ name: [
+ { required: true, message: "鏂囦欢鍚嶄笉鑳戒负绌�", trigger: "blur" }
+ ],
+ type: [
+ { required: true, message: "璇烽�夋嫨鏂囦欢绫诲埆", trigger: "change" }
+ ],
+ url: [
+ { required: true, message: "璇蜂笂浼犳枃浠�", trigger: "change" }
+ ]
+})
+
+// 鏂板鎸夐挳鎿嶄綔
+const handleAdd = () => {
+ open.value = true
+}
+
+// 鍙栨秷鎸夐挳
+const cancel = () => {
+ open.value = false
+ reset()
+}
+
+// 琛ㄥ崟閲嶇疆
+const reset = () => {
+ form.id = undefined
+ form.name = ''
+ form.url = ''
+ form.type = ''
+ form.createBy = undefined
+ dialogTitle.value = '鏂板鏂囦欢'
+}
+
+// 鎻愪氦鎸夐挳
+const submitForm = async () => {
+ if (!formRef.value) return
+ try {
+ await formRef.value.validate()
+ // 楠岃瘉閫氳繃锛屾墽琛屾彁浜ゆ搷浣�
+ let res
+ if (form.id) {
+ // 淇敼鎿嶄綔
+ res = await DigitalHumansApi.updateFile(form)
+ } else {
+ // 鏂板鎿嶄綔
+ res = await DigitalHumansApi.createFile(form)
+ }
+ console.log(res)
+ open.value = false
+ if (res) {
+ message.success(form.id ? "淇敼鎴愬姛" : "鏂板鎴愬姛")
+ getList()
+ }
+ } catch (error) {
+ // 楠岃瘉澶辫触锛屾樉绀洪敊璇俊鎭�
+ message.error("璇峰～鍐欏畬鏁翠俊鎭�")
+ }
+}
+const handleFileSuccess = (fileType,response) => {
+ if (fileType === 'videoUrl') {
+ form.url = response.data;
+ }
+};
+// 鏌ヨ鏂囦欢鍒楄〃
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DigitalHumansApi.listFile(queryParams)
+ console.log(data)
+ fileList.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+// 鎼滅储鎸夐挳鎿嶄綔
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+// 閲嶇疆鎸夐挳鎿嶄綔
+const resetQuery = () => {
+ queryParams.name = undefined
+ handleQuery()
+}
+
+// 淇敼鎸夐挳鎿嶄綔
+const handleUpdate = (row: FileItem) => {
+ form.id = row.id
+ form.name = row.name || ''
+ form.url = row.url || ''
+ form.type = row.type
+ form.createBy = row.createBy
+ dialogTitle.value = '淇敼鏂囦欢'
+ open.value = true
+}
+
+// 鍒犻櫎鎸夐挳鎿嶄綔
+const handleDelete = async (row: FileItem) => {
+ await message.delConfirm()
+ if (row.id) {
+ const res = await DigitalHumansApi.deleteFile(row.id)
+ if (res) {
+ message.success("鍒犻櫎鎴愬姛")
+ getList()
+ }
+ }
+}
+
+// 涓嬭浇鎸夐挳鎿嶄綔
+const handleDownload = (url, filename) => {
+ if (!url) {
+ message.warning("鏈壘鍒拌祫婧愭枃浠讹紒")
+ return
+ }
+ console.log(url,filename)
+ const link = document.createElement('a')
+ link.href = url
+ link.download = filename || 'download'
+ link.target = '_blank'
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+}
+
+// 鏍煎紡鍖栨椂闂�
+const parseTime = (time: number) => {
+ return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+}
+
+onMounted(() => {
+ getList()
+})
+</script>
+
+<style scoped>
+.app-container {
+ padding: 20px;
+}
+.mb8 {
+ margin-bottom: 8px;
+}
+</style>
--
Gitblit v1.9.3