feat: 处理批量上传弹窗选择资源平台上传

src/components/Upload/index.vue

@@ -70,10 +70,10 @@ export default {
       type: String,
       default: "text",
     },
-    // platformId: {
-    //   type: Number,
-    //   default: "",
-    // },
+    platformId: {
+      type: Number,
+      default: null,
+    },
     // 是否支持自动上传
     autoUpload: {
       type: Boolean,
@@ -124,13 +124,12 @@ export default {
       },
       // 上传地址
       action: "#",
-      platformId: 0,
       // 请求头部
       headers: {
         Authorization: "Bearer " + getToken(),
       },
       // 额外参数
-      data: { platformId: 6 },
+      data: {},
       // 进度条
       percentage: 0,
       title: "",
@@ -153,7 +152,6 @@ export default {
       }
     },
     listType(val) {
-      console.log("gasdfqwerqwerqwerwqr==xxxxx==" + val);
       this.action = this.obj[val];
     },
 
@@ -164,19 +162,17 @@ export default {
 
   created() {
     // 根据上传类型 变更 上传地址
-    console.log("gasdfqwerqwerqwerwqr==yyyy==" + this.listType);
     this.action = this.obj[this.listType];
     // 回显图片
     this.form.file = this.url;
-    this.form.platformId = this.platformId;
-    this.data.platformId = this.platformId;
+    var platformId = this.$props.platformId;
+    this.form.platformId = this.$props.platformId;
+    this.data.platformId = this.$props.platformId;
   },
+
   methods: {
     // 上传之前
     async beforeUpload(file) {
-      console.log("gasdfqwerqwerqwerwqr==111==" + JSON.stringify(file));
-      console.log("gasdfqwerqwerqwerwqr==aaa==" + JSON.stringify(this.form));
-      console.log("gasdfqwerqwerqwerwqr==bbb==" + JSON.stringify(this.data));
       if (this.width && this.height) {
         const data = await this.readerImg(file);
         let _width =
@@ -204,7 +200,6 @@ export default {
     },
 
     readerImg(file) {
-      console.log("gasdfqwerqwerqwerwqr==222==" + file);
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
@@ -227,16 +222,22 @@ export default {
       this.title = `已上传 ${parseInt(file.percent - 1)}%`;
     },
 
+    // {"data":null,"code":0,"message":"请求成功","requestId":null,"success":true}
     // 上传成功
     onSuccess(file) {
-      console.log("gasdfqwerqwerqwerwqr==333==" + JSON.stringify(file));
       if (file.code === 0) {
         this.form.file = file.data;
         this.$emit("upload", this.form);
         this.title = "上传成功";
         this.type = "success";
+        if (this.form.platformId != null && this.form.platformId != "") {
+          this.$message.success(`上传成功`);
+        }
       } else {
         this.onError();
+        if (this.form.platformId != null && this.form.platformId != "") {
+          this.$message.success(`上传失败`);
+        }
       }
     },
 
@@ -245,6 +246,9 @@ export default {
       this.status = "exception";
       this.type = "danger";
       this.title = "上传失败";
+      if (this.form.platformId != null && this.form.platformId != "") {
+        this.$message.success(`上传失败`);
+      }
     },
 
     // 删除

src/views/music/list/index.vue

@@ -67,14 +67,14 @@
           v-hasPermi="['music:list:down']"
           >批量下架</el-button
         >
-        <Upload
-          listType="mp3"
-          platformId="6"
-          multiple
-          name="multipartFiles"
-          @upload="getList()"
-          style="margin-left: 10px"
-          >批量上传</Upload
+
+        <!-- v-if="form.platformId == ''" -->
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="getDialog()"
+          >批量上传</el-button
         >
       </el-form-item>
     </el-form>
@@ -173,9 +173,57 @@
       :limit.sync="form.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="classTitle"
+      width="500px"
+      :before-close="getInputClose"
+    >
+      <el-select
+        v-model="form.platformId"
+        placeholder="请选择资源平台"
+        :disabled="disabledPlatformId(form.platformId)"
+      >
+        <el-option
+          v-for="item in platformOptions"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+          :disabled="disabledJoinType(item.joinType)"
+        />
+      </el-select>
+
+      <div slot="footer">
+        <el-button @click="getClose">取消</el-button>
+        <!-- platformId="form.platformId" -->
+        <!-- <Upload
+          v-else
+          listType="mp3"
+          multiple
+          :platformId="form.platformId"
+          name="multipartFiles"
+          @upload="getList()"
+          style="margin-left: 10px"
+          >批量上传</Upload
+        > -->
+        <Upload
+          type="primary"
+          @click="getSubmit"
+          listType="mp3"
+          multiple
+          :platformId="form.platformId"
+          name="multipartFiles"
+          style="margin-left: 10px"
+          @upload="uploadSucceed()"
+          >批量上传</Upload
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
+
 <script>
 import { change, list, remove } from "@/api/music/list";
 import Audio from "@/components/Audio/index.vue";
@@ -186,12 +234,17 @@ export default {
   components: {
     Audio,
   },
+
   data() {
     return {
+      classTitle: "选择资源平台",
+      // 弹窗
+      dialogVisible: false,
       // 遮罩层
       loading: false,
       // 表单
       form: {
+        platformId: "",
         pageNum: 1,
         pageSize: 10,
       },
@@ -216,6 +269,26 @@ export default {
     this.getList();
   },
   methods: {
+    uploadSucceed(e) {
+      this.dialogVisible = false;
+    },
+
+    getInputClose() {
+      this.dialogVisible = false;
+    },
+
+    getClose() {
+      this.dialogVisible = false;
+    },
+
+    getSubmit() {
+      this.dialogVisible = false;
+    },
+
+    async getDialog() {
+      this.dialogVisible = true;
+    },
+
     // 列表
     getList() {
       this.loading = true;