ohplay_system/src/views/music/menu/detail.vue

<!-- 音频管理 歌单详情 -->
<template>
  <div class="app-container">
    <el-form
      class="form"
      :model="form"
      ref="form"
      :rules="rules"
      label-width="100px"
      :disabled="disabled"
    >
      <el-form-item label="歌单名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入歌单名称" />
      </el-form-item>
      <el-form-item label="歌单介绍：" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10 }"
          maxlength="300"
          show-word-limit
          placeholder="请输入歌单介绍"
        />
      </el-form-item>
      <el-form-item label="创建者：" prop="avatarNickName">
        <el-input
          v-model="form.avatarNickName"
          placeholder="请输入歌单创建者名称"
        />
      </el-form-item>
      <el-form-item label="资源平台：" prop="platformId">
        <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>
      </el-form-item>
      <el-form-item label="付费类型：" prop="payType">
        <el-select v-model="form.payType" placeholder="请选择付费类型">
          <el-option
            v-for="item in payTypeOptions.slice(0, 2)"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.payType === 2" label="原价：" prop="price">
        <el-input-number
          v-model="form.price"
          placeholder="请输入原价"
          :min="1"
          :precision="2"
          :controls="false"
        />
      </el-form-item>
      <el-form-item v-if="form.payType === 2" label="折扣价" prop="discount">
        <el-input-number
          v-model="form.discount"
          placeholder="请输入折扣价"
          :min="0"
          :precision="2"
          :controls="false"
        />
      </el-form-item>
      <el-form-item label="歌单封面：" prop="coverUrl">
        <Upload
          listType="picture-card"
          :url="form.coverUrl"
          @upload="upload($event, 'coverUrl')"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="头像：" prop="avatarNickHead">
        <Upload
          listType="picture-card"
          :url="form.avatarNickHead"
          @upload="upload($event, 'avatarNickHead')"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="歌曲列表：" style="width: 100%">
        <el-button type="primary" icon="el-icon-plus" @click="getDialog"
          >添加歌曲</el-button
        >
        <el-table class="table" :data="form.programList">
          <el-table-column label="ID" prop="id" align="center" />
          <el-table-column
            label="歌曲名称"
            prop="name"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="歌手名称"
            prop="singerName"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column label="播放时长" prop="playTime" align="center" />
          <el-table-column
            label="当前状态"
            prop="status"
            align="center"
            :formatter="statusFormatter"
          />

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <Audio :src="scope.row.progaramUrl" />
              <el-button type="delete"   :disabled="disabled" @click="getDelete(scope.$index)"
                >删除</el-button>
                
            <!-- 向上移动 -->
            <el-button
              type="text"
              icon="el-icon-caret-top"
              @click="getChange(true, scope.$index,scope.$index - 1)"
              :disabled="(scope.$index < 1&& !disabled)||disabledPlatformId(form.platformId)"
            />

            <!-- 向下移动 -->
            <el-button
              type="text"
              icon="el-icon-caret-bottom"
              @click="getChange(false,scope.$index, scope.$index + 1)"
              :disabled="(scope.$index > form.programList.length-2&& !disabled)||disabledPlatformId(form.platformId)"
            />

            </template>
          </el-table-column>

        </el-table>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit"
        >确定</el-button
      >
    </div>

    <!-- 弹窗 -->
    <!-- @change="handleCheckedTreeNodeAll($event, 'menu')" -->
    <el-dialog :visible.sync="dialogVisible" title="添加歌曲" width="1100px">
      <el-form inline size="mini" style="width: 100%">
        <el-form-item label="歌曲Id：">
          <el-input
            v-model="dialogForm.id"
            placeholder="请输入歌曲Id"
            clearable
          />
        </el-form-item>
        <el-form-item label="歌曲名称：">
          <el-input
            v-model="dialogForm.name"
            placeholder="请输入歌曲名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="歌手名称：">
          <el-input
            v-model="dialogForm.singerName"
            placeholder="请输入歌手名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="资源平台：">
          <el-select
            v-model="dialogForm.platformId"
            placeholder="请选择资源平台"
          >
            <el-option
              v-for="item in platformOptions.filter(
                (i) => !i.joinType.includes('1')
              )"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        </el-form-item>
      </el-form>

        <el-table :data="tableData" 
        ref="multipleTable"
        :row-key="tableKey"
        v-loading="loading" 
        @selection-change="handleSelectionChange">

          <el-table-column
          type="selection"
          align="center"
          key="selection"
          reserve-selection
        />

          <el-table-column
            label="歌曲Id"
            prop="id"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            label="歌曲名称"
            prop="name"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            label="歌手名称"
            prop="singerName"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column label="播放时长" prop="playTime" align="center" />

          <!-- <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="getChecked(scope.row)"
                :disabled="disabledList(scope.row)"
              >
                选择
              </el-button>
            </template>
          </el-table-column> -->

        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="dialogForm.pageNum"
          :limit.sync="dialogForm.pageSize"
          @pagination="getList"
        /></p
    ></el-dialog>
  </div>
</template>

<script>
import { list } from "@/api/music/list";
import { detail, submit } from "@/api/music/menu";
import Audio from "@/components/Audio/index.vue";
import { onOrOffMixin, payTypeMixin, platformMixin } from "@/mixin/index";
export default {
  mixins: [platformMixin, onOrOffMixin, payTypeMixin],
  components: {
    Audio,
  },
  data() {
    // 判断原价是否大于折扣价
    var checkPrice = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入原价"));
      } else {
        if (this.form.discount && value <= this.form.discount) {
          callback(new Error("原价必须大于折扣价"));
        }
        callback();
      }
    };
    // 判断折扣价是否小于原价
    var checkDiscount = (rule, value, callback) => {
      if (this.form.price && value >= this.form.price) {
        callback(new Error("折扣价必须小于原价"));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        programList: [], // 歌曲列表
        status: 1,
        type: 2,
        payType: 1,
      },

      // 校验
      rules: {
        name: [
          {
            required: true,
            message: "请输入歌单名称",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入歌单介绍",
            trigger: "blur",
          },
        ],
        avatarNickName: [
          {
            required: true,
            message: "请输入歌单创建者名称",
            trigger: "blur",
          },
        ],
        platformId: [
          {
            required: true,
            message: "请选择资源平台",
            trigger: "change",
          },
        ],
        payType: [
          {
            required: true,
            message: "请选择付费类型",
            trigger: "change",
          },
        ],
        price: [
          {
            required: true,
            validator: checkPrice,
            trigger: "blur",
          },
        ],
        discount: [
          {
            validator: checkDiscount,
            trigger: "blur",
          },
        ],
        coverUrl: [
          {
            required: true,
            message: "请上传歌单封面",
            trigger: "change",
          },
        ],
        avatarNickHead: [
          {
            required: true,
            message: "请上传创建者头像",
            trigger: "change",
          },
        ],
      },
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        platformId: null,
      },

      // 总数据
      total: 0,
      // 弹窗列表
      tableData: [],
      // 只读
      disabled: false,
      // 是否已选
      disabledChecked: false,
      ///被选中数据是否加载完
      isLoad: false,
      ///是否可以调整顺序
      canOrder: true,
    };
  },
  mounted() {
    // 获取资源平台
    this.getPlatform({
      audioType: 10,
    });
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.disabled = Boolean(this.$route.query.disabled);
      this.getDetail();
    }
  },
  methods: {
    // 排序
    getChange(top, index, laterIndex) {
      var row = this.form.programList[index];
      var laterRow = this.form.programList[laterIndex];
      if (top) {
        this.form.programList[index] = laterRow;
        this.form.programList[laterIndex] = row;
      } else {
        this.form.programList[laterIndex] = row;
        this.form.programList[index] = laterRow;
      }
      this.form.programList = this.form.programList.filter((i) => i);
    },

    tableKey(row) {
      return row.id;
    },

    handleSelectionChange(val) {
      // if (this.isLoad) {
      //   this.form.programList = JSON.parse(JSON.stringify(val));
      //   this.form.programList = this.form.programList.filter((i) => i);
      //   this.$message.success("操作成功！");
      // }

      if (this.isLoad) {
        if (this.form.programList.length == 0) {
          this.form.programList = JSON.parse(JSON.stringify(val));
        } else {
          ///查找dialogTableData里面有的
          var tempDialogHas = [];
          for (var i = 0; i < this.tableData.length; i++) {
            for (var j = 0; j < val.length; j++) {
              if (this.tableData[i].id === val[j].id) {
                tempDialogHas.push(this.tableData[i]);
                break;
              }
            }
          }

          ///查找dialogTableData里面没有的
          var tempDialogNot = [];
          if (tempDialogHas.length == 0) {
            tempDialogNot = JSON.parse(JSON.stringify(this.tableData));
          } else {
            for (var i = 0; i < this.tableData.length; i++) {
              var has = false;
              for (var j = 0; j < tempDialogHas.length; j++) {
                if (this.tableData[i].id === tempDialogHas[j].id) {
                  has = true;
                  break;
                }
              }
              if (!has) {
                tempDialogNot.push(this.tableData[i]);
              }
            }
          }

          ///减少val没有的
          if (tempDialogNot.length > 0) {
            for (var i = 0; i < tempDialogNot.length; i++) {
              for (var j = 0; j < this.form.programList.length; j++) {
                if (tempDialogNot[i].id === this.form.programList[j].id) {
                  this.form.programList.splice(j, 1);
                  break;
                }
              }
            }
          }

          ///添加adminPodCastProgramDetailResp没有的
          for (var i = 0; i < val.length; i++) {
            var isHas = false;
            for (var j = 0; j < this.form.programList.length; j++) {
              if (val[i].id === this.form.programList[j].id) {
                isHas = true;
                break;
              }
            }
            if (!isHas) {
              this.form.programList.push(val[i]);
            }
          }
        }
        this.form.programList = this.form.programList.filter((i) => i);
        this.$message.success("操作成功！");
      }
    },

    // 详情
    // platformId:7 HIFIVE音加加
    getDetail() {
      detail(this.form.id).then((res) => {
        if (res.code === 0) {
          this.form = res.data;
          ///qq音乐和喜马拉雅
          if (this.form.platformId == 6 || this.form.platformId == 12) {
            this.canOrder = false;
          }
          this.form.programList =
            res.data.programList === null ? [] : res.data.programList;
        }
      });
    },
    // 上传
    upload(e, key) {
      this.form[key] = e.file;
    },

    // 添加歌曲
    getDialog() {
      this.dialogVisible = true;
      this.dialogForm.platformId = this.platformOptions.filter(
        (i) => !i.joinType.includes("1")
      )[0].value;
      this.getList();
    },

    // 列表
    getList() {
      this.loading = true;
      list(this.dialogForm).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.loading = false;

          // this.isLoad = false;
          // if (this.form.programList.length > 0) {
          //   var temp = [];
          //   for (var i = 0; i < this.tableData.length; i++) {
          //     for (var j = 0; j < this.form.programList.length; j++) {
          //       if (this.form.programList[j].id === this.tableData[i].id) {
          //         temp.push(this.tableData[i]);
          //         break;
          //       }
          //     }
          //   }

          //   if (temp.length > 0) {
          //     temp.forEach((item) => {
          //       this.$refs.multipleTable.toggleRowSelection(item, true);
          //     });
          //   }
          // }
          // this.isLoad = true;

          this.isLoad = false;
          this.$refs.multipleTable.clearSelection();
          if (this.form.programList.length > 0) {
            var temp = [];
            for (var i = 0; i < this.tableData.length; i++) {
              for (var j = 0; j < this.form.programList.length; j++) {
                if (this.form.programList[j].id === this.tableData[i].id) {
                  temp.push(this.tableData[i]);
                  break;
                }
              }
            }

            if (temp.length > 0) {
              temp.forEach((item) => {
                this.$refs.multipleTable.toggleRowSelection(item, true);
              });
            }
          }
          this.isLoad = true;
        }
      });
    },

    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1;
      this.getList();
    },

    // 重置
    getRefresh() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        platformId: this.platformOptions[0].value,
      };
      this.getList();
    },

    // 选择
    getChecked(row) {
      this.form.programList.push({
        id: row.id,
        name: row.name,
        singerName: row.singerName,
        playTime: row.playTime,
        status: row.status,
        progaramUrl: row.progaramUrl,
      });
      this.$message.success("添加成功！");
    },

    // 删除已选歌曲
    getDelete(index) {
      this.form.programList.splice(index, 1);
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let arr = [];
          this.form.programList.map((i) => {
            arr.push(i.id);
          });
          this.form.programList = arr;
          submit(this.form).then((res) => {
            if (res.code === 0) {
              this.$message.success(`提交成功！`);
              this.cancel();
            }
          });
        } else {
          return false;
        }
      });
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/music/musicMenu");
    },

    // 字典翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.onOrOffOptions, row.status);
    },

    // 已有的歌曲不可重复选择
    disabledTableData(row) {
      if (this.tableData.length > 0) {
        return this.tableData.findIndex((i) => i.id === row.id) === -1
          ? false
          : true;
      }
    },

    // 已有的歌曲不可重复选择
    disabledList(row) {
      if (this.form.programList.length > 0) {
        return this.form.programList.findIndex((i) => i.id === row.id) === -1
          ? false
          : true;
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  .el-form-item {
    width: 500px;
  }
}
</style>