素材管理bug修改

src/views/base/mediAasset/index.vue

@@ -2,21 +2,12 @@
   <div class="app-container">
     <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"
-          placeholder="请输入素材名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.assetName" placeholder="请输入素材名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="素材类型" prop="assetType">
         <el-select v-model="queryParams.assetType" placeholder="请选择素材类型" clearable>
-          <el-option
-            v-for="dict in media_asset_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="String(dict.value)"
-          />
+          <el-option v-for="dict in media_asset_type" :key="dict.value" :label="dict.label"
+            :value="String(dict.value)" />
         </el-select>
       </el-form-item>
       <el-form-item label="引用状态" prop="quotedFlag">
@@ -32,15 +23,8 @@
         </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-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>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -50,32 +34,16 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Upload"
-          @click="handleAdd"
-          v-hasPermi="['base:mediAasset:add']"
-        >上传素材</el-button>
+        <el-button type="primary" plain icon="Upload" @click="handleAdd"
+          v-hasPermi="['base:mediAasset:add']">上传素材</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['base:mediAasset:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['base:mediAasset:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['base:mediAasset:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="Download" @click="handleExport"
+          v-hasPermi="['base:mediAasset:export']">导出</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -84,15 +52,13 @@
       <el-table-column type="selection" width="55" align="center" />
       <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 class="asset-thumb">
+            <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>
+              <el-icon>
+                <VideoPlay />
+              </el-icon>
             </div>
           </div>
         </template>
@@ -100,7 +66,8 @@
       <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 != null ? String(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="fileFormat" width="90">
@@ -146,35 +113,20 @@
       <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>
+          <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"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改素材资源对话框 -->
     <el-dialog :title="title" v-model="open" width="760px" append-to-body>
@@ -182,35 +134,19 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="素材名称" prop="assetName">
-              <el-input
-                v-model="form.assetName"
-                maxlength="100"
-                show-word-limit
-                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="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>
+              <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">
@@ -232,13 +168,7 @@
               <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"
-                >
+                <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>
@@ -255,14 +185,8 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
-              <el-input
-                v-model="form.remark"
-                type="textarea"
-                :rows="3"
-                maxlength="500"
-                show-word-limit
-                placeholder="请输入备注"
-              />
+              <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit
+                placeholder="请输入备注" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -278,17 +202,9 @@
     <!-- 素材预览 -->
     <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
-        />
+        <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>
@@ -313,7 +229,7 @@ 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 uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/uploadMediaFile')
 const uploadHeaders = ref({
   Authorization: 'Bearer ' + useUserStore()?.token
 })
@@ -486,12 +402,12 @@ function handleDelete(row) {
   } else if (!row && selectedRows.value.some(item => String(item.quotedFlag) === '1')) {
     confirmMsg = '选中的素材中包含已被播放方案引用的素材，删除可能会失败。确认继续删除吗？'
   }
-  proxy.$modal.confirm(confirmMsg).then(function() {
+  proxy.$modal.confirm(confirmMsg).then(function () {
     return delMediAasset(_ids)
   }).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+  }).catch(() => { })
 }
 
 function handleExport() {
@@ -546,22 +462,78 @@ function beforeUpload(file) {
   return true
 }
 
+
 function handleUploadSuccess(response) {
+  // 打印完整返回值以便调试
+  console.log('上传素材接口返回值:', 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.assetType = null
+  form.value.fileFormat = null
+  form.value.mimeType = null
+  form.value.durationSeconds = null
+  form.value.resolution = null
+  form.value.fileSize = null
+  // 注意：fileUrl 和 thumbnailUrl 稍后赋值，这里不重置，以免闪烁
+  // --- 结束修改 ---
+
+  // 1. 基础字段赋值
+  let rawName = data.assetName || data.originalFilename || data.fileName || data.newFileName || ''
+  
+  // 如果存在文件名，且当前表单中没有手动输入过名称（或者允许覆盖），则处理名称
+  if (rawName) {
+    // 使用正则表达式去除最后一个 '.' 及其后面的内容作为后缀
+    const nameWithoutExt = rawName.replace(/\.[^/.]+$/, "")
+    // 只有在 form.value.assetName 为空或者我们希望强制覆盖时才赋值
+    // 通常上传成功后回显，我们直接赋值处理后的名称
+    // 如果用户之前修改过名称，这里可能会覆盖。如果希望保留用户修改的名称，可以加判断：
+    // if (!form.value.assetName || form.value.assetName === oldRawName) { ... }
+    // 但通常上传新文件意味着这是一个新素材，覆盖名称是预期行为
+    form.value.assetName = nameWithoutExt
+  } else {
+    // 如果没有文件名，保持原样或清空
+    form.value.assetName = form.value.assetName || ''
+  }
+
   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
+  
+  // 直接赋值后端返回的新值，如果后端没返回，则保持上面重置后的 null/undefined，模板中会显示 '-'
+  form.value.fileSize = data.fileSize
+  form.value.fileFormat = data.fileFormat
+  form.value.mimeType = data.mimeType
+  form.value.durationSeconds = data.durationSeconds
+  form.value.resolution = data.resolution
+  
+  // 2. 【新增逻辑】判断 assetType (image 或 video)
+  // 如果后端没有直接返回 assetType，则根据 mimeType 或文件格式推断
+  if (!form.value.assetType) {
+    const mimeType = (data.mimeType || '').toLowerCase()
+    const fileFormat = (data.fileFormat || '').toLowerCase()
+    const fileName = (data.originalFilename || data.fileName || '').toLowerCase()
+    
+    if (mimeType.startsWith('video/') || fileFormat === 'mp4' || fileFormat === 'avi' || fileFormat === 'mov' || fileName.endsWith('.mp4')) {
+      form.value.assetType = 'video'
+    } else if (mimeType.startsWith('image/') || ['jpg', 'jpeg', 'png', 'webp', 'gif'].includes(fileFormat)) {
+      form.value.assetType = 'image'
+    } else {
+      // 默认或者无法识别时，可以根据业务需求设定默认值
+      // form.value.assetType = 'image' 
+    }
+  } else {
+    // 如果后端返回了 assetType，确保格式统一
+    form.value.assetType = String(data.assetType)
+  }
+
   proxy.$modal.msgSuccess('上传成功')
   proxy.$refs["mediAassetRef"]?.validateField?.("fileUrl")
 }
@@ -607,7 +579,7 @@ function handleStatusChange(row, status) {
   }).then(() => {
     proxy.$modal.msgSuccess(actionText + '成功')
     getList()
-  }).catch(() => {})
+  }).catch(() => { })
 }
 
 getList()
@@ -620,6 +592,7 @@ getList()
   justify-content: center;
   cursor: pointer;
 }
+
 .video-thumb {
   width: 54px;
   height: 54px;
@@ -632,34 +605,41 @@ getList()
   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;