dy-admin-manager/src/views/accompaniment/modals/edit-music.vue

<template>
  <div>
    <el-steps
      :space="200"
      :active="currentStep"
      simple
      finish-status="success"
      style="margin-bottom: 12px"
    >
      <el-step title="选择曲目"></el-step>
      <el-step title="设置曲目信息"></el-step>
    </el-steps>

    <div v-if="currentStep === 0">
      <el-form
        ref="form"
        :model="searchForm"
        :inline="true"
        class="system-menu-search"
      >
        <el-form-item prop="keyword">
          <el-input
            v-model="searchForm.keyword"
            @submit="onSearch"
            @reset="onReSet"
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.form.save();
                onSearch();
              }
            "
            clearable
            placeholder="关键词"
          />
        </el-form-item>
        <!-- <el-form-item prop="musicSheetType">
          <el-select
            v-model="searchForm.musicSheetType"
            clearable
            filterable
            placeholder="多声轨渲染"
          >
            <el-option label="是" value="CONCERT"></el-option>
            <el-option label="否" value="SINGLE"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="subjectId">
          <el-select
            v-model="searchForm.subjectId"
            clearable
            placeholder="声部"
          >
            <el-option
              v-for="item in selects.subjects"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="composer">
          <el-input
            v-model="searchForm.composer"
            @submit="onSearch"
            @reset="onReSet"
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                onSearch();
              }
            "
            clearable
            placeholder="音乐人"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            size="default"
            type="primary"
            class="ml10"
            @click="onSearch"
          >
            查询
          </el-button>
          <el-button class="ml10" @click="onReSet"> 重置</el-button>
        </el-form-item>
      </el-form>

      <p style="padding-bottom: 12px">
        你选择了<span style="color: red; padding: 0 8px">{{
          chioseIdList.length
        }}</span>
        条曲目
      </p>

      <!--         @selection-change="handleSelectionChange"
        @select="onTableSelect" -->
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        @select-all="handleSelectionChange"
        @select="onTableSelect"
        ref="multipleSelection"
        key="tableList"
      >
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column prop="id" label="曲目编号" /> -->
        <el-table-column
          prop="name"
          label="曲目名称(编号)"
          width="180"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div>
              {{ scope.row.name }}
              <p>({{ scope.row.id }})</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="曲目封面">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.musicCover"
              fit="cover"
              :preview-src-list="[scope.row.musicCover]"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="subjectNames"
          label="可用声部"
          show-overflow-tooltip
        ></el-table-column>

        <!-- <el-table-column
          prop="composer"
          label="音乐人"
          show-overflow-tooltip
        ></el-table-column> -->

        <!-- <el-table-column
          prop="musicSheetType"
          label="多声轨渲染"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div>
              {{ scope.row.musicSheetType === "SINGLE" ? "否" : "是" }}
            </div>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        save-key="accompaniment-edit-music"
        sync
        :total.sync="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
    </div>

    <div v-if="currentStep === 1">
      <el-table
        :data="formLists"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        style="margin-bottom: 12px;"
        key="formLists"
      >
        <el-table-column prop="name" label="曲目名称(编号)" width="180">
          <template #default="scope">
            <div>
              {{ scope.row.name }}
              <p>({{ scope.row.id }})</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="曲目封面" width="150">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.musicCover"
              fit="cover"
              :preview-src-list="[scope.row.musicCover]"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="subjectNames"
          label="可用声部"
          show-overflow-tooltip
          width="150"
        ></el-table-column>

        <!-- <el-table-column
          prop="composer"
          label="音乐人"
          show-overflow-tooltip
        ></el-table-column> -->

        <!-- <el-table-column
          prop="musicSheetType"
          label="多声轨渲染"
          width="150"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div>
              {{ scope.row.musicSheetType === "SINGLE" ? "否" : "是" }}
            </div>
          </template>
        </el-table-column> -->

        <el-table-column prop="musicSheetCategoryId" width="180">
          <template #header>
            曲谱分类
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="onDialogEdit('musicSheetCategoryId')"
            ></i>
          </template>
          <template #default="scope">
            <!-- <el-form-item label-width="auto" :show-message="false"> -->
            <!-- <el-select
              v-model="formLists[scope.$index].musicSheetCategoryId"
              placeholder="请选择曲谱分类"
              clearable
              filterable
              style="width:150px !important"
            >
              <el-option
                v-for="option in tree"
                :key="option.id"
                :label="option.name"
                :value="option.id"
              ></el-option>
            </el-select> -->
            <el-cascader
              popper-class="myCascader"
              v-model="formLists[scope.$index].musicSheetCategoryId"
              placeholder="请选择曲谱分类"
              filterable
              style="width:150px !important"
              clearable
              :options="tree"
              :props="treeProps"
            ></el-cascader>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>

        <el-table-column prop="rankType" width="180">
          <template #header>
            收费方式
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="onDialogEdit('rankType')"
            ></i>
          </template>
          <template #default="scope">
            <!-- <el-form-item label-width="auto" :show-message="false"> -->
            <el-select
              v-model="formLists[scope.$index].rankType"
              clearable
              filterable
              placeholder="请选择是否收费"
              style="width:150px !important"
            >
              <el-option value="0" label="免费"></el-option>
              <el-option value="1" label="收费"></el-option>
            </el-select>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>

        <el-table-column prop="scoreType" width="180">
          <template #header>
            默认谱面
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="onDialogEdit('scoreType')"
            ></i>
          </template>
          <template #default="scope">
            <el-select
              v-model="formLists[scope.$index].scoreType"
              clearable
              filterable
              placeholder="请选择默认谱面"
              style="width:150px !important"
            >
              <el-option
                v-for="(item, index) in scoreTypeList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="isConvertibleScore" width="180">
          <template #header>
            是否可转谱
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="onDialogEdit('isConvertibleScore')"
            ></i>
          </template>
          <template #default="scope">
            <el-select
              v-model="formLists[scope.$index].isConvertibleScore"
              clearable
              filterable
              placeholder="请选择是否可转谱"
              style="width:150px !important"
            >
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="sortNumber" width="180">
          <template #header>
            排序
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="onDialogEdit('sortNumber')"
            ></i>
          </template>
          <template #default="scope">
            <!-- <el-form-item label-width="auto" :show-message="false"> -->
            <el-input-number
              style="width:150px !important"
              v-model="formLists[scope.$index].sortNumber"
              :min="0"
              :max="9999"
              placeholder="请输入排序"
              :controls="false"
              clearable
            />
            <!-- </el-form-item> -->
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" center>
          <template #default="scope">
            <el-button
              size="small"
              type="text"
              @click="onRemoveMusic(scope.row)"
              >移除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <!-- </el-form> -->
    </div>

    <div class="dialog-footer">
      <el-button @click="onCancel">
        {{ currentStep === 0 ? "取消" : "上一步" }}
      </el-button>
      <el-button type="primary" @click="onSubmit" v-preventReClick>
        {{ currentStep === 1 ? "确定" : "下一步" }}</el-button
      >
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="450px"
      append-to-body
    >
      <div v-if="dialogType === 'musicSheetCategoryId'">
        <el-cascader
          popper-class="myCascader"
          v-model="dialogForms.musicSheetCategoryId"
          placeholder="请选择曲谱分类"
          filterable
          style="width: 100% !important"
          clearable
          :options="tree"
          :props="treeProps"
        ></el-cascader>
      </div>
      <div v-if="dialogType === 'rankType'">
        <el-select
          v-model="dialogForms.rankType"
          clearable
          filterable
          placeholder="请选择是否收费"
          style="width: 100% !important"
        >
          <el-option value="0" label="免费"></el-option>
          <el-option value="1" label="收费"></el-option>
        </el-select>
      </div>
      <div v-if="dialogType === 'sortNumber'">
        <el-input-number
          placeholder="请输入排序值"
          v-model="dialogForms.sortNumber"
          :min="0"
          :max="9999"
          :controls="false"
          style="width: 100% !important"
        />
      </div>
      <div v-if="dialogType === 'scoreType'">
        <el-select
          v-model="dialogForms.scoreType"
          clearable
          filterable
          placeholder="请选择默认谱面"
          style="width: 100% !important"
        >
          <el-option
            v-for="(item, index) in scoreTypeList"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </div>
      <div v-if="dialogType === 'isConvertibleScore'">
        <el-select
          v-model="dialogForms.isConvertibleScore"
          clearable
          filterable
          placeholder="请选择是否可转谱"
          style="width: 100% !important"
        >
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="onDialogConfirm" v-preventReClick>
            确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  api_pageByApplication,
  musicSheetApplicationExtendSaveBatch
} from "../api";
import { scoreTypeList } from "@/utils/searchArray";
export default {
  name: "edit-music",
  props: ["tree"],
  components: {
    pagination
  },
  data() {
    return {
      scoreTypeList,
      currentStep: 0,
      chioseIdList: [], // 选中的数据
      searchForm: {
        keyword: "",
        // musicSheetType: "",
        subjectId: null,
        composer: null
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      dialogTitle: "",
      dialogType: "musicSheetCategoryId",
      dialogForms: {
        musicSheetCategoryId: null,
        rankType: null,
        sortNumber: null,
        isConvertibleScore: null,
        scoreType: null
      },
      dialogVisible: false,
      tableList: [],
      formLists: [],
      treeProps: {
        value: "id",
        label: "name",
        children: "sysMusicScoreCategoriesList",
        // checkStrictly: true,
        expandTrigger: "hover"
      }
    };
  },
  mounted() {
    this.$store.dispatch("setSubjects");
    this.getList();

    console.log(this.tree, "tree");
  },
  methods: {
    onSearch() {
      this.$set(this.pageInfo, "page", 1);
      this.$refs.form.validate(valid => {
        if (valid) {
          this.getList();
        }
      });
    },
    onReSet() {
      this.$refs.form.resetFields();
      this.getList();
    },
    async getList() {
      const { data } = await api_pageByApplication({
        page: this.pageInfo.page,
        rows: this.pageInfo.limit,
        ...this.searchForm
      });
      const rows = data.rows || [];
      rows.forEach(row => {
        row.currentPage = this.pageInfo.page;
      });
      this.tableList = rows || [];
      this.pageInfo.total = data.total;

      let idList = this.chioseIdList.map(music => {
        return music.id;
      });
      // this.isNewPage = true
      this.$nextTick(() => {
        this.tableList.forEach(course => {
          if (idList.indexOf(course.id) != -1) {
            multipleSelection.value.toggleRowSelection(course, true);
          }
        });
        // this.isNewPage = false
      });

      console.log(this.pageInfo, "pageInfo");
    },
    onFormatSelectData(arr, row) {
      try {
        let currentPageList = [];
        const otherPageList = [];
        this.chioseIdList.forEach(item => {
          if (item.currentPage == this.pageInfo.page) {
            currentPageList.push(item);
          } else {
            otherPageList.push(item);
          }
        });

        const lastPage = [];
        if (row && row.id) {
          const index = currentPageList.findIndex(child => child.id === row.id);
          if (index === -1) {
            lastPage.push(row);
          } else {
            currentPageList.splice(index, 1);
          }
        } else {
          if (arr.length > 0) {
            arr.forEach(item => {
              const index = currentPageList.findIndex(
                child => child.id === item.id
              );
              if (index === -1) {
                lastPage.push(item);
              }
            });
          } else {
            currentPageList = [];
          }
        }

        this.chioseIdList = [
          ...lastPage,
          ...otherPageList,
          ...currentPageList
        ].sort((a, b) => a.id - b.id);
      } catch (e) {}
    },
    handleSelectionChange(arr) {
      this.onFormatSelectData(arr);
    },
    onTableSelect(arr, row) {
      this.onFormatSelectData(arr, row);
    },
    onCancel() {
      //
      if (this.currentStep === 0) {
        this.$listeners.close();
      } else if (this.currentStep === 1) {
        this.currentStep = 0;
      }
    },
    async onSubmit() {
      if (this.currentStep === 0) {
        if (this.chioseIdList.length <= 0) {
          this.$message.warning("请选择曲目");
          return;
        }
        this.currentStep = 1;
        const tempList = [];
        this.chioseIdList.forEach(item => {
          tempList.push({
            id: item.id,
            name: item.name,
            musicCover: item.musicCover,
            subjectNames: item.subjectNames,
            composer: item.composer,
            sourceType: item.sourceType,
            musicSheetCategoryId: null,
            rankType: null,
            sortNumber: null,
            isConvertibleScore: null,
            scoreType: null
          });
        });
        this.formLists = tempList;
        console.log(this.formLists, "formLists");
      } else if (this.currentStep === 1) {
        // 提交数据
        try {
          const params = [];
          for (let i = 0; i < this.formLists.length; i++) {
            const item = this.formLists[i];
            if (
              !item.musicSheetCategoryId ||
              item.musicSheetCategoryId.length == 0
            ) {
              this.$message.error("曲目标签不能为空");
              return;
            }
            if (!item.rankType) {
              this.$message.error("收费方式不能为空");
              return;
            }
            if (!item.scoreType) {
              this.$message.error("默认谱面不能为空");
              return;
            }
            if (
              item.isConvertibleScore === null ||
              item.isConvertibleScore === undefined ||
              item.isConvertibleScore === ""
            ) {
              this.$message.error("是否可转谱不能为空");
              return;
            }
            if (
              item.sortNumber === null ||
              item.sortNumber === undefined ||
              item.sortNumber === ""
            ) {
              this.$message.error("排序不能为空");
              return;
            }
            params.push({
              ...item,
              musicSheetId: item.id,
              musicSheetCategoryId:
                item.musicSheetCategoryId.length > 0
                  ? item.musicSheetCategoryId[
                      item.musicSheetCategoryId.length - 1
                    ]
                  : null,
              id: null
            });
          }
          await musicSheetApplicationExtendSaveBatch(params);
          this.$message.success(`添加成功`);
          this.$emit("getList");
          this.$emit("close");
        } catch (e) {
          //
          console.log(e, "e");
        }
      }
    },
    onDialogEdit(type, index = 0) {
      console.log(type, "type");
      try {
        if (type === "musicSheetCategoryId") {
          this.dialogTitle = "曲谱分类";
        } else if (type === "rankType") {
          this.dialogTitle = "收费方式";
        } else if (type === "sortNumber") {
          this.dialogTitle = "排序";
        } else if (type === "scoreType") {
          this.dialogTitle = "默认谱面";
        } else if (type === "isConvertibleScore") {
          this.dialogTitle = "是否可转谱";
        }
        this.dialogForms.musicSheetCategoryId = null;
        this.dialogForms.rankType = null;
        this.dialogForms.sortNumber = null;
        this.dialogForms.scoreType = null;
        this.dialogForms.isConvertibleScore = null;
        this.dialogVisible = true;
        this.dialogType = type;
      } catch (e) {
        cosnole.log(e, "e");
      }
    },
    /** 确认修改 */
    onDialogConfirm() {
      this.formLists.forEach(item => {
        if (this.dialogType === "musicSheetCategoryId") {
          item.musicSheetCategoryId = this.dialogForms.musicSheetCategoryId;
        } else if (this.dialogType === "rankType") {
          item.rankType = this.dialogForms.rankType;
        } else if (this.dialogType === "sortNumber") {
          item.sortNumber = this.dialogForms.sortNumber;
        } else if (this.dialogType === "scoreType") {
          item.scoreType = this.dialogForms.scoreType;
        } else if (this.dialogType === "isConvertibleScore") {
          item.isConvertibleScore = this.dialogForms.isConvertibleScore;
        }
      });
      this.dialogVisible = false;
    },
    onRemoveMusic(row) {
      this.$confirm(`是否删除该数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        try {
          const index = this.formLists.findIndex(item => {
            if (item.id == row.id) {
              return true;
            }
          });
          if (index > -1) {
            this.formLists.splice(index, 1);
          }
          const index1 = this.chioseIdList.findIndex(item => {
            if (item.id == row.id) {
              return true;
            }
          });
          if (index1 > -1) {
            this.chioseIdList.splice(index, 1);
          }

          console.log(this.chioseIdList, "chioseIdList");
        } catch {}
      });
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: right;
}
.numberInput {
  width: 100%;
}
/deep/ .el-input-number {
  .el-input__inner {
    text-align: left !important;
  }
}
</style>