歌单管理-宽度

ruoyi-ui/src/views/playlist/normal/index.vue

@@ -48,7 +48,7 @@
       <el-table-column label="序号" align="center" type="index" width="60" />
       <el-table-column label="音乐名称" align="center" prop="name" :show-overflow-tooltip="true" />
       <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
-      <el-table-column label="音乐图片" align="center" prop="imgAddr" width="120">
+      <el-table-column label="音乐图片" align="center" prop="imgAddr">
         <template slot-scope="scope">
           <el-image
             v-if="scope.row.imgAddr"
@@ -111,7 +111,11 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="120" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
         <template slot-scope="scope">
           <el-button
@@ -222,6 +226,7 @@
 import { listNormalSong, getNormalSong, delNormalSong, addNormalSong, updateNormalSong } from "@/api/playlist/normal";
 import { listTags } from "@/api/playlist/tag";
 import { getImageUrl } from "@/utils/image";
+import { parseTime } from "@/utils/ruoyi";
 import request from '@/utils/request';
 
 export default {
@@ -248,10 +253,30 @@ export default {
       form: {},
       rules: {
         name: [
-          { required: true, message: "音乐名称不能为空", trigger: "blur" }
+          { required: true, message: "音乐名称不能为空", trigger: "blur" },
+          { 
+            validator: (rule, value, callback) => {
+              if (value && (value.trim() === '' || value !== value.trim())) {
+                callback(new Error('音乐名称不能为纯空格或包含首尾空格'));
+              } else {
+                callback();
+              }
+            }, 
+            trigger: "blur" 
+          }
         ],
         author: [
-          { required: true, message: "作者不能为空", trigger: "blur" }
+          { required: true, message: "作者不能为空", trigger: "blur" },
+          { 
+            validator: (rule, value, callback) => {
+              if (value && (value.trim() === '' || value !== value.trim())) {
+                callback(new Error('作者不能为纯空格或包含首尾空格'));
+              } else {
+                callback();
+              }
+            }, 
+            trigger: "blur" 
+          }
         ],
         vip: [
           { required: true, message: "VIP权限不能为空", trigger: "change" }
@@ -380,6 +405,24 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          // 提交前清理数据，去除首尾空格
+          if (this.form.name) {
+            this.form.name = this.form.name.trim();
+          }
+          if (this.form.author) {
+            this.form.author = this.form.author.trim();
+          }
+          
+          // 再次验证清理后的数据
+          if (!this.form.name || this.form.name === '') {
+            this.$modal.msgError("音乐名称不能为空或纯空格");
+            return;
+          }
+          if (!this.form.author || this.form.author === '') {
+            this.$modal.msgError("作者不能为空或纯空格");
+            return;
+          }
+          
           if (this.form.id != null) {
             updateNormalSong(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");