✨ feat(期刊 曲库): 期刊修改单独路由 添加试听

.gitignore

@@ -14,3 +14,4 @@ package-lock.json
 *.njsproj
 *.sln
 yarn.lock
+docker

src/views/article/articleModify.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zhangjiabao
  * @Date: 2024-01-24 10:09:33
- * @LastEditors: Please set LastEditors
+ * @LastEditors: zhangjiabao
- * @LastEditTime: 2024-01-30 00:35:07
+ * @LastEditTime: 2024-01-30 13:41:15
  * @FilePath: /luoo_manage_fe/src/views/article/articleModify.vue
 -->
 <!--
@@ -53,8 +53,7 @@
         placeholder="输入发布人名称"
         label="期刊作者"
       >
-        <el-input v-model="data.userId"></el-input>
+        <el-select
-        <!-- <el-select
           placeholder="输入发布人名称"
           size="small"
           v-model="data.userId"
@@ -65,7 +64,7 @@
             :value="item.id"
             :key="item.id"
           ></el-option>
-        </el-select> -->
+        </el-select>
       </el-form-item>
       <el-form-item prop="image" label="上传封面">
         <img style="width: 170px;height: 120px;" :src="data.image" />
@@ -157,7 +156,12 @@
       <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="操作" width="300">
+      <el-table-column label="试听" width="255">
+        <template slot-scope="scope">
+          <audio style="width:230px" :src="scope.row.url" controls></audio>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="280">
         <template slot-scope="scope">
           <el-button
             plain
@@ -402,7 +406,9 @@ export default {
     };
   },
   filters: {},
-  created() {},
+  created() {
+    this.syncTagDataToComponent();
+  },
   components: {
     quillEditor,
     MusicModify

src/views/article/index.vue

@@ -50,12 +50,7 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-input
+          <el-select
-            placeholder="输入发布人名称"
-            size="medium"
-            v-model="queryForm.data.creatorId"
-          ></el-input>
-          <!-- <el-select
             placeholder="输入发布人名称"
             size="medium"
             v-model="queryForm.data.creatorId"
@@ -66,7 +61,7 @@
               :value="item.id"
               :key="item.id"
             ></el-option>
-          </el-select> -->
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-date-picker
@@ -128,9 +123,9 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="期刊封面" >
+        <el-table-column label="期刊封面">
           <template slot-scope="scope">
-            <img style="height: 50px;" :src="scope.row.image">
+            <img style="height: 50px;" :src="scope.row.image" />
           </template>
         </el-table-column>
         <el-table-column label="期刊编号" prop="journalNo"></el-table-column>
@@ -219,7 +214,7 @@
       </el-pagination>
     </el-card>
     <el-dialog
-      :title="['新建期刊', '编辑期刊', '详情'][modifyDialog.type]"
+      title="详情"
       class="popup-dialog"
       :visible="true"
       v-if="modifyDialog.visible"
@@ -231,16 +226,6 @@
         v-loading="modifyDialog.loading"
         style="height: 70vh;overflow: auto;padding-left:20px;padding-right:20px"
       >
-        <ArticleModify
-          ref="modifyDialog"
-          v-if="
-            modifyDialog.visible &&
-              (modifyDialog.type === 0 || modifyDialog.type === 1)
-          "
-          :data="modifyDialog.data"
-          :remoteTagList="queryForm.remoteData.superFilterTags"
-          :publisher="queryForm.remoteData.publisher"
-        ></ArticleModify>
         <ArticleDetail
           v-if="modifyDialog.visible && modifyDialog.type === 2"
           :data="modifyDialog.data"
@@ -249,11 +234,7 @@
         ></ArticleDetail>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button
+        <el-button size="small" type="primary" @click="handleDialogCancel"
-          v-if="modifyDialog.type === 0 || modifyDialog.type === 1"
-          size="small"
-          type="primary"
-          @click="handleDialogSubmit"
           >确定</el-button
         >
         <el-button size="small" @click="handleDialogCancel">取消</el-button>
@@ -327,7 +308,6 @@
 import articleApi from "@/api/article";
 import tagApi from "@/api/tag";
 import SuperFilterTagDrawer from "./superFilterTagDrawer.vue";
-import ArticleModify from "./articleModify.vue";
 import ArticleDetail from "./articleDetail.vue";
 
 export default {
@@ -380,7 +360,6 @@ export default {
     };
   },
   components: {
-    ArticleModify,
     ArticleDetail,
     SuperFilterTagDrawer
   },
@@ -554,37 +533,13 @@ export default {
      * 新建标签点击事件
      */
     handleAddClick() {
-      let newData = {
+      this.$router.push(`/mainPage/article?type=add`);
-        id: null,
-        title: null,
-        tag: [],
-        journalNo: null,
-        userId: null,
-        image: null,
-        songs: []
-      };
-      this.modifyDialog.data = newData;
-      this.modifyDialog.type = 0;
-      this.modifyDialog.visible = true;
-      this.modifyDialog.loading = false;
     },
     /**
      * 编辑标签点击事件
      */
     handleModifyClick(row) {
-      this.modifyDialog.visible = true;
+      this.$router.push(`/mainPage/article?id=${row.id}&type=modify`);
-      this.modifyDialog.loading = true;
-      articleApi.getDetail(row.id).then(res => {
-        if (res.code === 200) {
-          this.modifyDialog.data = JSON.parse(JSON.stringify(res.data));
-          this.modifyDialog.type = 1;
-          this.modifyDialog.loading = false;
-        } else {
-          this.modifyDialog.visible = false;
-          this.modifyDialog.loading = false;
-          this.$message.error(res.message);
-        }
-      });
     },
     /**
      * 发布点击事件
@@ -629,69 +584,6 @@ export default {
     handlePublishDialogCancel() {
       this.publishDialog.visible = false;
     },
-    /**
-     * 弹窗确定按扭点击事件
-     */
-    handleDialogSubmit() {
-      this.$refs.modifyDialog.$refs.modifyDialogForm.validate(valid => {
-        if (valid) {
-          let orgData = this.$refs.modifyDialog.data;
-          let param = {
-            id: orgData["id"],
-            content: orgData["content"],
-            image: orgData["image"],
-            journalNo: orgData["journalNo"],
-            songs: [],
-            tag: orgData["tag"],
-            title: orgData["title"],
-            userId: orgData["userId"]
-          };
-          let newMusicIdList = [];
-          if (orgData.songs) {
-            for (let i in orgData.songs) {
-              newMusicIdList.push(orgData.songs[i].id);
-            }
-          }
-          param.songs = newMusicIdList;
-          console.log(param);
-
-          // 新增
-          if (this.modifyDialog.type === 0) {
-            articleApi.add(param).then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.message);
-                this.modifyDialog.visible = false;
-                this.table.page.current = 1;
-                // 新增时重置查询条件
-                this.handleResetClick();
-                this.fetchData(this.queryForm.lastQuery);
-              } else {
-                this.$message.error(res.message);
-              }
-            });
-            console.log("新增");
-            return;
-          }
-          // 编辑
-          if (this.modifyDialog.type === 1) {
-            articleApi.update(param.id, param).then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.message);
-                this.modifyDialog.visible = false;
-                this.fetchData(this.queryForm.lastQuery);
-              } else {
-                this.$message.error(res.message);
-              }
-            });
-            console.log("编辑");
-            return;
-          }
-        } else {
-          this.$message.error("请完善表单相关信息！");
-          return false;
-        }
-      });
-    },
     /**
      * 发布弹窗确认按扭
      */

src/views/article/publish.vue

@@ -8,7 +8,9 @@
   <div class="app-container">
     <el-card class="box-card">
       <div slot="header" class="card-header clearfix">
-        <span class="card-header-text">期刊发布</span>
+        <span class="card-header-text">{{
+          ["期刊发布", "期刊编辑"][type]
+        }}</span>
         <el-button
           style="float: right; margin-top: -5px;"
           type="primary"
@@ -18,12 +20,27 @@
           >保存期刊</el-button
         >
       </div>
+      <el-result v-if="resultShow" icon="success" title="保存成功">
+        <template slot="extra">
+          <el-button
+            @click="handleBackToList"
+            plain
+            type="primary"
+            size="medium"
+            >返回期刊列表</el-button
+          >
+          <el-button @click="handleNew" plain type="default" size="medium"
+            >新建期刊</el-button
+          >
+        </template>
+      </el-result>
       <ArticleModify
         style="margin-left: -200px;"
         ref="modifyDialog"
+        v-if="contentShow"
         :data="data"
         :remoteTagList="remoteData.tags"
-        :publisher="[]"
+        :publisher="remoteData.publisher"
       ></ArticleModify>
     </el-card>
   </div>
@@ -38,7 +55,10 @@ export default {
   name: "ArticlePublish",
   data() {
     return {
-      remoteData: { tags: [] },
+      type: 0,
+      remoteData: { tags: [], publisher: [] },
+      contentShow: false,
+      resultShow: false,
       data: {
         id: null,
         title: null,
@@ -58,9 +78,41 @@ export default {
   },
   filters: {},
   created() {
+    if (this.$route.query.type && this.$route.query.type === "modify") {
+      if (this.$route.query.id) {
+        this.fetchDetail(this.$route.query.id);
+      }
+    } else {
+      this.contentShow = true;
+    }
     this.fetchSuperFilterTags();
+    this.fetchCreaterList();
   },
   methods: {
+    fetchDetail(id) {
+      articleApi.getDetail(id).then(res => {
+        if (res.code === 200) {
+          this.data = JSON.parse(JSON.stringify(res.data));
+          this.type = 1;
+          this.contentShow = true;
+        } else {
+          this.type = 0;
+          this.$message.error(res.message);
+        }
+      });
+    },
+    /**
+     * 创建人下拉框
+     */
+    fetchCreaterList() {
+      tagApi.createrList().then(res => {
+        if (res.code === 200) {
+          this.remoteData.publisher = res.data;
+        } else {
+          this.remoteData.publisher = [];
+        }
+      });
+    },
     /**
      * 高级筛选tag
      */
@@ -82,6 +134,30 @@ export default {
         this.remoteData.tags = newList;
       });
     },
+    handleBackToList() {
+      this.$router.push("/article/index");
+    },
+    handleNew() {
+      this.data = {
+        id: null,
+        title: null,
+        tag: [],
+        journalNo: null,
+        userId: null,
+        image: null,
+        songs: [],
+        size: 0,
+        content: "",
+        duration: 0
+      };
+      this.type = 0;
+      this.resultShow = false;
+      this.contentShow = true;
+      this.$refs.modifyDialog.selectTag = [];
+    },
+    /**
+     * 保存
+     */
     save() {
       this.$refs.modifyDialog.$refs.modifyDialogForm.validate(valid => {
         if (valid) {
@@ -106,29 +182,60 @@ export default {
           console.log(param);
 
           // 新增
-          articleApi.add(param).then(res => {
+          if (this.type === 0) {
-            if (res.code === 200) {
+            articleApi.add(param).then(res => {
-              this.data = {
+              if (res.code === 200) {
-                id: null,
+                this.data = {
-                title: null,
+                  id: null,
-                tag: [],
+                  title: null,
-                journalNo: null,
+                  tag: [],
-                userId: null,
+                  journalNo: null,
-                image: null,
+                  userId: null,
-                songs: [],
+                  image: null,
-                size: 0,
+                  songs: [],
-                content: "",
+                  size: 0,
-                duration: 0
+                  content: "",
-              };
+                  duration: 0
-              this.$refs.modifyDialog.selectTag = [];
+                };
+                this.$refs.modifyDialog.selectTag = [];
 
-              this.$message.success(res.message);
+                this.contentShow = false;
-            } else {
+                this.resultShow = true;
-              this.$message.error(res.message);
+                this.$message.success(res.message);
-            }
+              } else {
-          });
+                this.$message.error(res.message);
-          console.log("新增");
+              }
-          return;
+            });
+            console.log("新增");
+            return;
+          }
+          if (this.type === 1) {
+            articleApi.update(param.id, param).then(res => {
+              if (res.code === 200) {
+                this.data = {
+                  id: null,
+                  title: null,
+                  tag: [],
+                  journalNo: null,
+                  userId: null,
+                  image: null,
+                  songs: [],
+                  size: 0,
+                  content: "",
+                  duration: 0
+                };
+                this.$refs.modifyDialog.selectTag = [];
+
+                this.contentShow = false;
+                this.resultShow = true;
+                this.$message.success(res.message);
+              } else {
+                this.$message.error(res.message);
+              }
+            });
+            console.log("新增");
+            return;
+          }
         } else {
           this.$message.error("请完善表单相关信息！");
           return false;

src/views/song/index.vue

@@ -21,12 +21,7 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-input
+          <el-select
-            v-model="queryForm.data.creatorId"
-            placeholder="输入发布人名称"
-            size="medium"
-          ></el-input>
-          <!-- <el-select
             placeholder="输入发布人名称"
             size="medium"
             v-model="queryForm.data.creatorId"
@@ -37,7 +32,7 @@
               :value="item.id"
               :key="item.id"
             ></el-option>
-          </el-select> -->
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-date-picker
@@ -132,7 +127,17 @@
           sortable
           label="修改时间"
         ></el-table-column>
-        <el-table-column fixed="right" label="启停用" width="100">
+        <el-table-column label="上传人员">
+          <template slot-scope="scope">
+            <span>{{ getAuthorNameById(scope.row.userId) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="试听" width="255">
+          <template slot-scope="scope">
+            <audio style="width:230px" :src="scope.row.url" controls></audio>
+          </template>
+        </el-table-column>
+        <el-table-column label="启停用" width="70">
           <template slot-scope="scope">
             <el-switch
               style="margin-bottom: 4px;"
@@ -145,12 +150,7 @@
             ></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="上传人员">
+        <el-table-column label="操作" width="280">
-          <template slot-scope="scope">
-            <span>{{ getAuthorNameById(scope.row.userId) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column fixed="right" label="操作" width="300">
           <template slot-scope="scope">
             <el-button
               plain
@@ -248,7 +248,11 @@
       :before-close="handleLyricDialogBeforeClose"
     >
       <div v-loading="lyricDialog.loading">
-        <el-input rows="30" type="textarea" v-model="lyricDialog.data"></el-input>
+        <el-input
+          rows="30"
+          type="textarea"
+          v-model="lyricDialog.data"
+        ></el-input>
       </div>
       <span slot="footer">
         <el-button size="small" type="primary" @click="handleLyricDialogSubmit"