|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
|
|
|
<el-form-item label="素材名称" prop="assetName">
|
|
|
<el-input
|
|
|
v-model="queryParams.assetName"
|
|
|
@@ -15,16 +15,31 @@
|
|
|
v-for="dict in media_asset_type"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
+ :value="String(dict.value)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="是否被播放方案引用：0否，1是，由系统维护" prop="quotedFlag">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.quotedFlag"
|
|
|
- placeholder="请输入是否被播放方案引用：0否，1是，由系统维护"
|
|
|
- clearable
|
|
|
- @keyup.enter="handleQuery"
|
|
|
+ <el-form-item label="引用状态" prop="quotedFlag">
|
|
|
+ <el-select v-model="queryParams.quotedFlag" placeholder="请选择引用状态" clearable style="width: 160px">
|
|
|
+ <el-option label="未引用" value="0" />
|
|
|
+ <el-option label="已引用" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="启用状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable style="width: 160px">
|
|
|
+ <el-option label="启用" value="1" />
|
|
|
+ <el-option label="停用" value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 240px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
@@ -38,20 +53,10 @@
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
plain
|
|
|
- icon="Plus"
|
|
|
+ icon="Upload"
|
|
|
@click="handleAdd"
|
|
|
v-hasPermi="['base:mediAasset:add']"
|
|
|
- >新增</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- plain
|
|
|
- icon="Edit"
|
|
|
- :disabled="single"
|
|
|
- @click="handleUpdate"
|
|
|
- v-hasPermi="['base:mediAasset:edit']"
|
|
|
- >修改</el-button>
|
|
|
+ >上传素材</el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
@@ -77,35 +82,92 @@
|
|
|
|
|
|
<el-table v-loading="loading" :data="mediAassetList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="主键ID" align="center" prop="id" />
|
|
|
- <el-table-column label="素材名称" align="center" prop="assetName" />
|
|
|
- <el-table-column label="素材类型" align="center" prop="assetType">
|
|
|
+ <el-table-column label="缩略图" align="center" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="asset-thumb" @click="handlePreview(scope.row)">
|
|
|
+ <image-preview
|
|
|
+ v-if="getPreviewImage(scope.row)"
|
|
|
+ :src="getPreviewImage(scope.row)"
|
|
|
+ :width="54"
|
|
|
+ :height="54"
|
|
|
+ />
|
|
|
+ <div v-else class="video-thumb">
|
|
|
+ <el-icon><VideoPlay /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="素材名称" align="left" prop="assetName" min-width="180" show-overflow-tooltip />
|
|
|
+ <el-table-column label="素材类型" align="center" prop="assetType" width="100">
|
|
|
<template #default="scope">
|
|
|
- <dict-tag :options="media_asset_type" :value="scope.row.assetType"/>
|
|
|
+ <dict-tag :options="media_asset_type" :value="scope.row.assetType != null ? String(scope.row.assetType) : ''" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="缩略图地址" align="center" prop="thumbnailUrl" />
|
|
|
- <el-table-column label="文件大小" align="center" prop="fileSize" />
|
|
|
- <el-table-column label="文件格式" align="center" prop="fileFormat" />
|
|
|
- <el-table-column label="文件MIME类型，如image/jpeg、video/mp4" align="center" prop="mimeType" />
|
|
|
- <el-table-column label="视频时长，单位秒；图片为空" align="center" prop="durationSeconds" />
|
|
|
- <el-table-column label="分辨率，如1920x1080" align="center" prop="resolution" />
|
|
|
- <el-table-column label="启用状态：0停用，1启用" align="center" prop="status" />
|
|
|
- <el-table-column label="是否被播放方案引用：0否，1是，由系统维护" align="center" prop="quotedFlag" />
|
|
|
- <el-table-column label="备注" align="center" prop="remark" />
|
|
|
- <el-table-column label="创建时间/上传时间" align="center" prop="createTime" width="180">
|
|
|
+ <el-table-column label="文件格式" align="center" prop="fileFormat" width="90">
|
|
|
<template #default="scope">
|
|
|
- <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ <el-tag v-if="scope.row.fileFormat" type="info">{{ scope.row.fileFormat }}</el-tag>
|
|
|
+ <span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <el-table-column label="文件大小" align="center" prop="fileSize" width="110">
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['base:mediAasset:edit']">修改</el-button>
|
|
|
+ <span>{{ formatFileSize(scope.row.fileSize) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="视频时长" align="center" prop="durationSeconds" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ formatDuration(scope.row.durationSeconds) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分辨率" align="center" prop="resolution" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.resolution || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="引用状态" align="center" prop="quotedFlag" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="String(scope.row.quotedFlag) === '1'" type="warning">已引用</el-tag>
|
|
|
+ <el-tag v-else-if="String(scope.row.quotedFlag) === '0'" type="info">未引用</el-tag>
|
|
|
+ <el-tag v-else type="info">-</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="启用状态" align="center" prop="status" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="String(scope.row.status) === '1'" type="success">启用</el-tag>
|
|
|
+ <el-tag v-else-if="String(scope.row.status) === '0'" type="info">停用</el-tag>
|
|
|
+ <el-tag v-else type="info">-</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="上传时间" align="center" prop="createTime" width="170">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="240" fixed="right" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" icon="View" @click="handlePreview(scope.row)">预览</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="String(scope.row.status) !== '1'"
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="CircleCheck"
|
|
|
+ @click="handleStatusChange(scope.row, '1')"
|
|
|
+ v-hasPermi="['base:mediAasset:edit']"
|
|
|
+ >启用</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="String(scope.row.status) === '1'"
|
|
|
+ link
|
|
|
+ type="warning"
|
|
|
+ icon="CircleClose"
|
|
|
+ @click="handleStatusChange(scope.row, '0')"
|
|
|
+ v-hasPermi="['base:mediAasset:edit']"
|
|
|
+ >停用</el-button>
|
|
|
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['base:mediAasset:edit']">编辑</el-button>
|
|
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['base:mediAasset:remove']">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
-
|
|
|
+
|
|
|
<pagination
|
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
|
@@ -115,64 +177,92 @@
|
|
|
/>
|
|
|
|
|
|
<!-- 添加或修改素材资源对话框 -->
|
|
|
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
|
- <el-form ref="mediAassetRef" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <el-dialog :title="title" v-model="open" width="760px" append-to-body>
|
|
|
+ <el-form ref="mediAassetRef" :model="form" :rules="rules" label-width="110px">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="素材名称" prop="assetName">
|
|
|
- <el-input v-model="form.assetName" placeholder="请输入素材名称" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="素材类型" prop="assetType">
|
|
|
- <el-select v-model="form.assetType" placeholder="请选择素材类型">
|
|
|
- <el-option
|
|
|
- v-for="dict in media_asset_type"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="素材文件地址" prop="fileUrl">
|
|
|
- <el-input v-model="form.fileUrl" type="textarea" placeholder="请输入内容" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="缩略图地址" prop="thumbnailUrl">
|
|
|
- <el-input v-model="form.thumbnailUrl" type="textarea" placeholder="请输入内容" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.assetName"
|
|
|
+ maxlength="100"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="请输入素材名称"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="文件大小" prop="fileSize">
|
|
|
- <el-input v-model="form.fileSize" placeholder="请输入文件大小" />
|
|
|
+ <el-form-item label="素材文件" prop="fileUrl">
|
|
|
+ <el-alert
|
|
|
+ v-if="form.id"
|
|
|
+ title="当前为编辑已有素材，可只修改素材名称、启用状态和备注；如需替换文件，再重新上传素材文件。"
|
|
|
+ type="info"
|
|
|
+ show-icon
|
|
|
+ :closable="false"
|
|
|
+ class="upload-edit-tip"
|
|
|
+ />
|
|
|
+ <el-upload
|
|
|
+ class="asset-uploader"
|
|
|
+ drag
|
|
|
+ :action="uploadUrl"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
|
|
+ <div class="el-upload__text">拖拽文件到此处，或 <em>点击上传</em></div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ {{ form.id ? '如需替换素材文件，请重新上传；不上传则保留原文件。' : '支持 jpg/png/webp 图片和 mp4 视频，文件信息由系统自动解析。' }}
|
|
|
+ <span class="upload-api-tip">当前上传功能需后端完成 /base/mediAasset/upload 接口后可用。</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="文件格式" prop="fileFormat">
|
|
|
- <el-input v-model="form.fileFormat" placeholder="请输入文件格式" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="视频时长，单位秒；图片为空" prop="durationSeconds">
|
|
|
- <el-input v-model="form.durationSeconds" placeholder="请输入视频时长，单位秒；图片为空" />
|
|
|
- </el-form-item>
|
|
|
+ <el-col :span="24" v-if="form.fileUrl">
|
|
|
+ <el-descriptions title="文件信息" :column="2" border class="file-info">
|
|
|
+ <el-descriptions-item label="素材类型">
|
|
|
+ <dict-tag :options="media_asset_type" :value="form.assetType != null ? String(form.assetType) : ''" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="文件格式">{{ form.fileFormat || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="文件大小">{{ formatFileSize(form.fileSize) }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="MIME 类型">{{ form.mimeType || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="视频时长">{{ formatDuration(form.durationSeconds) }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="分辨率">{{ form.resolution || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="文件地址" :span="2">
|
|
|
+ <el-link
|
|
|
+ v-if="form.fileUrl"
|
|
|
+ type="primary"
|
|
|
+ :href="form.fileUrl"
|
|
|
+ target="_blank"
|
|
|
+ class="file-url-link"
|
|
|
+ >
|
|
|
+ {{ form.fileUrl }}
|
|
|
+ </el-link>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="分辨率，如1920x1080" prop="resolution">
|
|
|
- <el-input v-model="form.resolution" placeholder="请输入分辨率，如1920x1080" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="是否被播放方案引用：0否，1是，由系统维护" prop="quotedFlag">
|
|
|
- <el-input v-model="form.quotedFlag" placeholder="请输入是否被播放方案引用：0否，1是，由系统维护" />
|
|
|
+ <el-form-item label="启用状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio label="1">启用</el-radio>
|
|
|
+ <el-radio label="0">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="请输入备注"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -184,11 +274,30 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 素材预览 -->
|
|
|
+ <el-dialog title="素材预览" v-model="previewOpen" width="820px" append-to-body @closed="previewAsset = {}">
|
|
|
+ <div class="preview-box">
|
|
|
+ <img
|
|
|
+ v-if="previewAsset.assetType === 'image'"
|
|
|
+ :src="previewAsset.fileUrl"
|
|
|
+ class="preview-image"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ v-else-if="previewAsset.assetType === 'video'"
|
|
|
+ :src="previewAsset.fileUrl"
|
|
|
+ class="preview-video"
|
|
|
+ controls
|
|
|
+ />
|
|
|
+ <el-empty v-else description="暂无可预览内容" />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="MediAasset">
|
|
|
import { listMediAasset, getMediAasset, delMediAasset, addMediAasset, updateMediAasset } from "@/api/base/mediAasset"
|
|
|
+import useUserStore from '@/store/modules/user'
|
|
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const { media_asset_type } = useDict('media_asset_type')
|
|
|
@@ -198,11 +307,21 @@ const open = ref(false)
|
|
|
const loading = ref(true)
|
|
|
const showSearch = ref(true)
|
|
|
const ids = ref([])
|
|
|
+const selectedRows = ref([])
|
|
|
const single = ref(true)
|
|
|
const multiple = ref(true)
|
|
|
const total = ref(0)
|
|
|
const title = ref("")
|
|
|
|
|
|
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/base/mediAasset/upload')
|
|
|
+const uploadHeaders = ref({
|
|
|
+ Authorization: 'Bearer ' + useUserStore()?.token
|
|
|
+})
|
|
|
+
|
|
|
+const previewOpen = ref(false)
|
|
|
+const previewAsset = ref({})
|
|
|
+const dateRange = ref([])
|
|
|
+
|
|
|
const data = reactive({
|
|
|
form: {},
|
|
|
queryParams: {
|
|
|
@@ -210,48 +329,57 @@ const data = reactive({
|
|
|
pageSize: 10,
|
|
|
assetName: undefined,
|
|
|
assetType: undefined,
|
|
|
- mimeType: undefined,
|
|
|
- status: undefined,
|
|
|
quotedFlag: undefined,
|
|
|
+ status: undefined,
|
|
|
+ params: {}
|
|
|
},
|
|
|
rules: {
|
|
|
assetName: [
|
|
|
- { required: true, message: "素材名称不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
- assetType: [
|
|
|
- { required: true, message: "素材类型不能为空", trigger: "change" }
|
|
|
+ { required: true, message: "素材名称不能为空", trigger: "blur" },
|
|
|
+ { max: 100, message: "素材名称不能超过 100 字", trigger: "blur" }
|
|
|
],
|
|
|
fileUrl: [
|
|
|
- { required: true, message: "素材文件地址不能为空", trigger: "blur" }
|
|
|
+ { required: true, message: "请先上传素材文件", trigger: "change" }
|
|
|
],
|
|
|
status: [
|
|
|
- { required: true, message: "启用状态：0停用，1启用不能为空", trigger: "change" }
|
|
|
- ],
|
|
|
- quotedFlag: [
|
|
|
- { required: true, message: "是否被播放方案引用：0否，1是，由系统维护不能为空", trigger: "blur" }
|
|
|
+ { required: true, message: "请选择启用状态", trigger: "change" }
|
|
|
],
|
|
|
+ remark: [
|
|
|
+ { max: 500, message: "备注不能超过 500 字", trigger: "blur" }
|
|
|
+ ]
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data)
|
|
|
|
|
|
-/** 查询素材资源列表 */
|
|
|
function getList() {
|
|
|
loading.value = true
|
|
|
- listMediAasset(queryParams.value).then(response => {
|
|
|
- mediAassetList.value = response.rows
|
|
|
- total.value = response.total
|
|
|
+ const params = {
|
|
|
+ ...queryParams.value,
|
|
|
+ params: {
|
|
|
+ ...(queryParams.value.params || {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (dateRange.value && dateRange.value.length === 2) {
|
|
|
+ params.params.beginCreateTime = dateRange.value[0]
|
|
|
+ params.params.endCreateTime = dateRange.value[1]
|
|
|
+ }
|
|
|
+ listMediAasset(params).then(response => {
|
|
|
+ mediAassetList.value = response.rows || []
|
|
|
+ total.value = response.total || 0
|
|
|
+ }).catch(() => {
|
|
|
+ mediAassetList.value = []
|
|
|
+ total.value = 0
|
|
|
+ }).finally(() => {
|
|
|
loading.value = false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-/** 取消按钮 */
|
|
|
function cancel() {
|
|
|
open.value = false
|
|
|
reset()
|
|
|
}
|
|
|
|
|
|
-/** 表单重置 */
|
|
|
function reset() {
|
|
|
form.value = {
|
|
|
id: null,
|
|
|
@@ -264,8 +392,8 @@ function reset() {
|
|
|
mimeType: null,
|
|
|
durationSeconds: null,
|
|
|
resolution: null,
|
|
|
- status: null,
|
|
|
- quotedFlag: null,
|
|
|
+ status: '1',
|
|
|
+ quotedFlag: '0',
|
|
|
remark: null,
|
|
|
createBy: null,
|
|
|
createTime: null,
|
|
|
@@ -275,55 +403,72 @@ function reset() {
|
|
|
proxy.resetForm("mediAassetRef")
|
|
|
}
|
|
|
|
|
|
-/** 搜索按钮操作 */
|
|
|
function handleQuery() {
|
|
|
queryParams.value.pageNum = 1
|
|
|
getList()
|
|
|
}
|
|
|
|
|
|
-/** 重置按钮操作 */
|
|
|
function resetQuery() {
|
|
|
+ dateRange.value = []
|
|
|
proxy.resetForm("queryRef")
|
|
|
handleQuery()
|
|
|
}
|
|
|
|
|
|
-/** 多选框选中数据 */
|
|
|
function handleSelectionChange(selection) {
|
|
|
+ selectedRows.value = selection
|
|
|
ids.value = selection.map(item => item.id)
|
|
|
single.value = selection.length != 1
|
|
|
multiple.value = !selection.length
|
|
|
}
|
|
|
|
|
|
-/** 新增按钮操作 */
|
|
|
function handleAdd() {
|
|
|
reset()
|
|
|
open.value = true
|
|
|
- title.value = "添加素材资源"
|
|
|
+ title.value = "上传素材"
|
|
|
}
|
|
|
|
|
|
-/** 修改按钮操作 */
|
|
|
function handleUpdate(row) {
|
|
|
reset()
|
|
|
const _id = row.id || ids.value
|
|
|
getMediAasset(_id).then(response => {
|
|
|
- form.value = response.data
|
|
|
+ const data = response.data || {}
|
|
|
+ form.value = {
|
|
|
+ ...data,
|
|
|
+ assetType: data.assetType != null ? String(data.assetType) : null,
|
|
|
+ status: data.status != null ? String(data.status) : '1',
|
|
|
+ quotedFlag: data.quotedFlag != null ? String(data.quotedFlag) : '0'
|
|
|
+ }
|
|
|
open.value = true
|
|
|
- title.value = "修改素材资源"
|
|
|
+ title.value = "编辑素材"
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-/** 提交按钮 */
|
|
|
function submitForm() {
|
|
|
proxy.$refs["mediAassetRef"].validate(valid => {
|
|
|
if (valid) {
|
|
|
+ const payload = {
|
|
|
+ id: form.value.id,
|
|
|
+ assetName: form.value.assetName,
|
|
|
+ assetType: form.value.assetType,
|
|
|
+ fileUrl: form.value.fileUrl,
|
|
|
+ thumbnailUrl: form.value.thumbnailUrl,
|
|
|
+ fileSize: form.value.fileSize,
|
|
|
+ fileFormat: form.value.fileFormat,
|
|
|
+ mimeType: form.value.mimeType,
|
|
|
+ durationSeconds: form.value.durationSeconds,
|
|
|
+ resolution: form.value.resolution,
|
|
|
+ status: String(form.value.status),
|
|
|
+ quotedFlag: form.value.quotedFlag || '0',
|
|
|
+ remark: form.value.remark
|
|
|
+ }
|
|
|
if (form.value.id != null) {
|
|
|
- updateMediAasset(form.value).then(() => {
|
|
|
+ updateMediAasset(payload).then(() => {
|
|
|
proxy.$modal.msgSuccess("修改成功")
|
|
|
open.value = false
|
|
|
getList()
|
|
|
})
|
|
|
} else {
|
|
|
- addMediAasset(form.value).then(() => {
|
|
|
+ addMediAasset(payload).then(() => {
|
|
|
proxy.$modal.msgSuccess("新增成功")
|
|
|
open.value = false
|
|
|
getList()
|
|
|
@@ -333,10 +478,15 @@ function submitForm() {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-/** 删除按钮操作 */
|
|
|
function handleDelete(row) {
|
|
|
const _ids = row.id || ids.value
|
|
|
- proxy.$modal.confirm('是否确认删除素材资源编号为"' + _ids + '"的数据项？').then(function() {
|
|
|
+ let confirmMsg = '确认删除选中的素材吗？如素材已被播放方案引用，将无法删除。'
|
|
|
+ if (row && String(row.quotedFlag) === '1') {
|
|
|
+ confirmMsg = '该素材已被播放方案引用，删除可能会失败。确认继续删除吗？'
|
|
|
+ } else if (!row && selectedRows.value.some(item => String(item.quotedFlag) === '1')) {
|
|
|
+ confirmMsg = '选中的素材中包含已被播放方案引用的素材，删除可能会失败。确认继续删除吗？'
|
|
|
+ }
|
|
|
+ proxy.$modal.confirm(confirmMsg).then(function() {
|
|
|
return delMediAasset(_ids)
|
|
|
}).then(() => {
|
|
|
getList()
|
|
|
@@ -344,12 +494,174 @@ function handleDelete(row) {
|
|
|
}).catch(() => {})
|
|
|
}
|
|
|
|
|
|
-/** 导出按钮操作 */
|
|
|
function handleExport() {
|
|
|
- proxy.download('base/mediAasset/export', {
|
|
|
- ...queryParams.value
|
|
|
- }, `mediAasset_${new Date().getTime()}.xlsx`)
|
|
|
+ const params = {
|
|
|
+ ...queryParams.value,
|
|
|
+ params: {
|
|
|
+ ...(queryParams.value.params || {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (dateRange.value && dateRange.value.length === 2) {
|
|
|
+ params.params.beginCreateTime = dateRange.value[0]
|
|
|
+ params.params.endCreateTime = dateRange.value[1]
|
|
|
+ }
|
|
|
+ proxy.download('base/mediAasset/export', params, `素材管理_${new Date().getTime()}.xlsx`)
|
|
|
+}
|
|
|
+
|
|
|
+function getPreviewImage(row) {
|
|
|
+ if (row.thumbnailUrl) return row.thumbnailUrl
|
|
|
+ if (String(row.assetType) === 'image' && row.fileUrl) return row.fileUrl
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
+function formatFileSize(size) {
|
|
|
+ const value = Number(size)
|
|
|
+ if (!value) return '-'
|
|
|
+ if (value < 1024) return value + ' B'
|
|
|
+ if (value < 1024 * 1024) return (value / 1024).toFixed(1) + ' KB'
|
|
|
+ if (value < 1024 * 1024 * 1024) return (value / 1024 / 1024).toFixed(1) + ' MB'
|
|
|
+ return (value / 1024 / 1024 / 1024).toFixed(1) + ' GB'
|
|
|
+}
|
|
|
+
|
|
|
+function formatDuration(seconds) {
|
|
|
+ const value = Number(seconds)
|
|
|
+ if (!value) return '-'
|
|
|
+ const m = Math.floor(value / 60)
|
|
|
+ const s = value % 60
|
|
|
+ return m > 0 ? `${m}分${s}秒` : `${s}秒`
|
|
|
+}
|
|
|
+
|
|
|
+function beforeUpload(file) {
|
|
|
+ const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'video/mp4']
|
|
|
+ const isAllowed = allowedTypes.includes(file.type)
|
|
|
+ const isLt500M = file.size / 1024 / 1024 < 500
|
|
|
+ if (!isAllowed) {
|
|
|
+ proxy.$modal.msgError('仅支持 jpg、png、webp 图片和 mp4 视频')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!isLt500M) {
|
|
|
+ proxy.$modal.msgError('素材文件大小不能超过 500MB')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
+function handleUploadSuccess(response) {
|
|
|
+ const data = response.data || response || {}
|
|
|
+ const isSuccess = response.code === 200 || response.code === undefined
|
|
|
+ if (!isSuccess) {
|
|
|
+ proxy.$modal.msgError(response.msg || '上传失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ form.value.assetName = form.value.assetName || data.assetName || data.originalFilename || data.fileName || data.newFileName || ''
|
|
|
+ form.value.assetType = data.assetType || form.value.assetType
|
|
|
+ form.value.fileUrl = data.fileUrl || data.url || form.value.fileUrl
|
|
|
+ form.value.thumbnailUrl = data.thumbnailUrl || data.fileUrl || data.url || form.value.thumbnailUrl
|
|
|
+ form.value.fileSize = data.fileSize || form.value.fileSize
|
|
|
+ form.value.fileFormat = data.fileFormat || form.value.fileFormat
|
|
|
+ form.value.mimeType = data.mimeType || form.value.mimeType
|
|
|
+ form.value.durationSeconds = data.durationSeconds || form.value.durationSeconds
|
|
|
+ form.value.resolution = data.resolution || form.value.resolution
|
|
|
+ proxy.$modal.msgSuccess('上传成功')
|
|
|
+ proxy.$refs["mediAassetRef"]?.validateField?.("fileUrl")
|
|
|
+}
|
|
|
+
|
|
|
+function handleUploadError() {
|
|
|
+ proxy.$modal.msgError('素材上传接口暂不可用，请后端完成 /base/mediAasset/upload 后再联调')
|
|
|
+}
|
|
|
+
|
|
|
+function handlePreview(row) {
|
|
|
+ if (!row.fileUrl) {
|
|
|
+ proxy.$modal.msgWarning('暂无可预览文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!['image', 'video'].includes(String(row.assetType))) {
|
|
|
+ proxy.$modal.msgWarning('暂不支持该素材类型预览')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ previewAsset.value = {
|
|
|
+ ...row,
|
|
|
+ assetType: String(row.assetType || '')
|
|
|
+ }
|
|
|
+ previewOpen.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function handleStatusChange(row, status) {
|
|
|
+ const actionText = status === '1' ? '启用' : '停用'
|
|
|
+ proxy.$modal.confirm('确认' + actionText + '素材“' + row.assetName + '”吗？').then(() => {
|
|
|
+ return updateMediAasset({
|
|
|
+ id: row.id,
|
|
|
+ assetName: row.assetName,
|
|
|
+ assetType: row.assetType,
|
|
|
+ fileUrl: row.fileUrl,
|
|
|
+ thumbnailUrl: row.thumbnailUrl,
|
|
|
+ fileSize: row.fileSize,
|
|
|
+ fileFormat: row.fileFormat,
|
|
|
+ mimeType: row.mimeType,
|
|
|
+ durationSeconds: row.durationSeconds,
|
|
|
+ resolution: row.resolution,
|
|
|
+ quotedFlag: row.quotedFlag || '0',
|
|
|
+ remark: row.remark,
|
|
|
+ status
|
|
|
+ })
|
|
|
+ }).then(() => {
|
|
|
+ proxy.$modal.msgSuccess(actionText + '成功')
|
|
|
+ getList()
|
|
|
+ }).catch(() => {})
|
|
|
}
|
|
|
|
|
|
getList()
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.asset-thumb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.video-thumb {
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.file-info {
|
|
|
+ margin: 10px 0 18px;
|
|
|
+}
|
|
|
+.preview-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 360px;
|
|
|
+}
|
|
|
+.preview-image {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 70vh;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+.preview-video {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 70vh;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+.upload-edit-tip {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+.upload-api-tip {
|
|
|
+ display: block;
|
|
|
+ margin-top: 4px;
|
|
|
+ color: #e6a23c;
|
|
|
+}
|
|
|
+.file-url-link {
|
|
|
+ max-width: 100%;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+</style>
|
