✨ feat(期刊): 联调部分接口

src/api/article.js

@@ -46,5 +46,15 @@ export default {
       url: `/luoo-music/cms/journal/publish/${id}?state=${state}`,
       method: "put"
     });
+  },
+  /**
+   * 创建人
+   * @returns
+   */
+  createrList() {
+    return request({
+      url: "/tag/tag/creator/list",
+      method: "get"
+    });
   }
 };

src/views/article/articleDetail.vue

@@ -12,16 +12,28 @@
       label-width="100px"
     >
       <el-form-item prop="volid" label="期刊编号">
-        <el-input size="small" placeholder="期刊编号"></el-input>
+        <el-input
+          v-model="data.number"
+          size="small"
+          placeholder="期刊编号"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="title" label="期刊标题">
-        <el-input size="small" placeholder="请输入期刊标题"></el-input>
+        <el-input
+          v-model="data.name"
+          size="small"
+          placeholder="请输入期刊标题"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="tag" label="期刊标签">
         <el-input size="small" placeholder="请选择"></el-input>
       </el-form-item>
       <el-form-item prop="author" label="期刊作者">
-        <el-input size="small" placeholder="不填写则默认为发布者"></el-input>
+        <el-input
+          v-model="data.userId"
+          size="small"
+          placeholder="不填写则默认为发布者"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="image" label="上传封面">
         <el-upload
@@ -32,7 +44,7 @@
           multiple
           :limit="1"
           :on-exceed="handleExceed"
-          :file-list="fileList"
+          :file-list="coverUploadFileList"
         >
           <el-button size="small" type="primary" icon="el-icon-receiving"
             >上传图片</el-button
@@ -66,7 +78,7 @@
     </el-form>
     <el-table
       size="mini"
-      :data="data.songTableData"
+      :data="data.songs"
       style="width: calc(50% + 400px); margin: 0 0 auto auto;"
       stripe
       class="draggable-table"
@@ -81,17 +93,22 @@
           <i class="el-icon-rank"></i>
         </template>
       </el-table-column>
-      <el-table-column label="专辑封面"></el-table-column>
+      <el-table-column prop="picture" label="专辑封面"></el-table-column>
       <el-table-column prop="name" label="歌曲名称"></el-table-column>
-      <el-table-column label="歌手/乐队"></el-table-column>
-      <el-table-column label="所属专辑"></el-table-column>
-      <el-table-column label="时长"></el-table-column>
+      <el-table-column prop="artist" label="歌手/乐队"></el-table-column>
+      <el-table-column prop="album" label="所属专辑"></el-table-column>
+      <el-table-column prop="duration" label="时长"></el-table-column>
       <el-table-column label="操作" fixed="right" width="300">
         <template slot-scope="scope">
           <el-button plain icon="el-icon-edit" type="primary" size="mini"
             >编辑</el-button
           >
-          <el-button plain icon="el-icon-success" type="success" size="mini"
+          <el-button
+            plain
+            icon="el-icon-success"
+            type="success"
+            size="mini"
+            @click="handleLyricClick(scope.row)"
             >歌词</el-button
           >
           <el-popconfirm
@@ -123,13 +140,32 @@
       <el-form-item prop="volid" label="期刊文案">
         <quill-editor
           ref="text"
-          v-model="data.content"
+          v-model="data.summary"
           style="height: 500px;"
           class="myQuillEditor"
           :options="editorOption"
         />
       </el-form-item>
     </el-form>
+    <el-dialog
+      title="歌词"
+      :visible="true"
+      v-if="lyricDialog.visible"
+      width="40%"
+      top="60px"
+      append-to-body
+      :before-close="handleLyricDialogBeforeClose"
+    >
+      <el-input type="textarea" v-model="lyricDialog.data"></el-input>
+      <span slot="footer">
+        <el-button size="small" type="primary" @click="handleLyricDialogSubmit"
+          >保存</el-button
+        >
+        <el-button size="small" @click="handleLyricDialogCancel"
+          >取消</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -144,11 +180,25 @@ export default {
   props: {
     data: {
       type: Object,
-      default: {}
+      default: {
+        id: null,
+        name: null,
+        tag: [],
+        number: null,
+        userId: null,
+        coverPhoto: null,
+        songs: []
+      }
     }
   },
   data() {
     return {
+      lyricDialog: {
+        visible: false,
+        songId: null,
+        data: ""
+      },
+      coverUploadFileList: [],
       // editorOption里是放图片上传配置参数用的，例如：
       // action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
       // methods: 'post',  // 必填参数 图片上传方式
@@ -157,10 +207,6 @@ export default {
       // size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
       // accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
       editorOption: {},
-      data: {
-        songTableData: [{ name: 1 }, { name: 2 }],
-        content: null
-      },
       rules: {}
     };
   },
@@ -203,6 +249,51 @@ export default {
     },
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    /**
+     * 弹窗关闭按扭点击事件
+     */
+    handleLyricDialogBeforeClose(done) {
+      for (let sIndex in this.data.songs) {
+        if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
+          this.data.songs[sIndex].lyric = this.lyricDialog.data;
+        }
+        break;
+      }
+      this.lyricDialog.data = "";
+      this.lyricDialog.songId = null;
+      this.lyricDialog.visible = false;
+      done();
+    },
+    /**
+     * 弹窗提交按扭点击事件
+     */
+    handleLyricDialogSubmit() {
+      for (let sIndex in this.data.songs) {
+        if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
+          this.data.songs[sIndex].lyric = this.lyricDialog.data;
+        }
+        break;
+      }
+      this.lyricDialog.data = "";
+      this.lyricDialog.songId = null;
+      this.lyricDialog.visible = false;
+    },
+    /**
+     * 弹窗取消按扭点击事件
+     */
+    handleLyricDialogCancel() {
+      this.lyricDialog.data = "";
+      this.lyricDialog.songId = null;
+      this.lyricDialog.visible = false;
+    },
+    /**
+     * 打开弹窗按扭点击事件
+     */
+    handleLyricClick(row) {
+      this.lyricDialog.songId = row.id;
+      this.lyricDialog.data = row.lyric;
+      this.lyricDialog.visible = true;
     }
   }
 };

src/views/article/index.vue

@@ -237,7 +237,7 @@
       :before-close="handleModifyDialogBeforeClose"
     >
       <div style="height: 70vh;overflow: auto;">
-        <ArticleDetailDialog></ArticleDetailDialog>
+        <ArticleDetailDialog :data="modifyDialog.data"></ArticleDetailDialog>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" type="primary" @click="handleDialogSubmit"
@@ -306,10 +306,7 @@ export default {
       modifyDialog: {
         visible: false,
         type: 0, // 0for新增 1for编辑 2for详情
-        form: {
-          rules: {},
-          data: {}
-        }
+        data: {} // 弹窗内数据
       }
     };
   },
@@ -382,25 +379,25 @@ export default {
               songCount: 1,
               songs: [
                 {
-                  album: "album",
-                  artist: "artist",
-                  duration: "duration",
-                  id: "0",
-                  journal: [],
-                  lyric: "xx",
-                  name: "name",
-                  picture: "picture",
-                  size: "size",
-                  state: "state",
+                  album: "范特西",
+                  artist: "周杰伦",
+                  duration: "1h30min",
+                  id: "1",
+                  journal: [1, 2, 3],
+                  lyric: "lllll llll lll",
+                  name: "双节棍",
+                  picture: "/pic/pic",
+                  size: "1.3m",
+                  state: "1",
                   tags: [1, 2],
                   updateTime: "2023-01-01",
-                  url: "/url",
-                  userId: "userId"
+                  url: "/music/music",
+                  userId: "1"
                 }
               ],
               state: "1",
               status: "1",
-              summary: "2",
+              summary: "领军 \n 灵精了",
               tag: [],
               userId: "1"
             }
@@ -418,12 +415,15 @@ export default {
      * 创建人下拉框
      */
     fetchCreaterList() {
-      // tagApi.createrList().then(res => {
+      // articleApi.createrList().then(res => {
       //   if (res.code === 200) {
       //     this.queryForm.remoteData.publisher = res.data;
       //   }
       // });
-      this.queryForm.remoteData.publisher = [];
+      this.queryForm.remoteData.publisher = [
+        { id: 1, name: "落在低处" },
+        { id: 2, name: "左岸以西" }
+      ];
     },
     /**
      * 高级筛选tag
@@ -431,18 +431,20 @@ export default {
     fetchSuperFilterTags() {
       this.queryForm.remoteData.superFilterTags = [
         {
+          id: 1,
           name: "语言类型",
           tags: [
-            { id: 1, name: "abc" },
-            { id: 2, name: "bcasdd" },
-            { id: 21, name: "becd" }
+            { id: 3, name: "中文" },
+            { id: 4, name: "日文" },
+            { id: 5, name: "英文" }
           ]
         },
         {
+          id: 10,
           name: "期刊标签",
           tags: [
-            { id: 4, name: "abc11" },
-            { id: 5, name: "bcd22" }
+            { id: 11, name: "民谣" },
+            { id: 12, name: "摇滚" }
           ]
         }
       ];
@@ -484,16 +486,16 @@ export default {
      * 新建标签点击事件
      */
     handleAddClick() {
-      // TODO: 新建给默认值
       let newData = {
-        "id": null,
-        "name": null,
-        "tag": [],
-        "number": null,
-        "userId": null,
-        "coverPhoto": null,
-        
-      }
+        id: null,
+        name: null,
+        tag: [],
+        number: null,
+        userId: null,
+        coverPhoto: null,
+        songs: []
+      };
+      this.modifyDialog.data = newData;
       this.modifyDialog.type = 0;
       this.modifyDialog.visible = true;
     },
@@ -501,8 +503,7 @@ export default {
      * 编辑标签点击事件
      */
     handleModifyClick(row) {
-      // TODO: 编辑把值带进去
-
+      this.modifyDialog.data = JSON.parse(JSON.stringify(row));
       this.modifyDialog.type = 1;
       this.modifyDialog.visible = true;
     },

src/views/article/superFilterTagDrawer.vue

@@ -12,6 +12,7 @@
         v-for="group in remoteTagData"
         :title="group.name"
         :name="group.name"
+        :key="group.name"
       >
         <el-button
           type="primary"
@@ -26,6 +27,7 @@
           style="margin-left: 10px;margin-top: 2px;"
           size="mini"
           v-for="tag in group.tags"
+          :key="tag.id"
           @click="tagClick(tag)"
           >{{ tag.name }}</el-button
         >