|  | @@ -0,0 +1,230 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div>
 | 
	
		
			
				|  |  | +    <el-alert title="教材信息" :closable="false" class="alert" type="info" />
 | 
	
		
			
				|  |  | +    <el-form
 | 
	
		
			
				|  |  | +      :model="form"
 | 
	
		
			
				|  |  | +      label-width="120px"
 | 
	
		
			
				|  |  | +      class="form"
 | 
	
		
			
				|  |  | +      ref="form"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <el-form-item
 | 
	
		
			
				|  |  | +        label="教材名称"
 | 
	
		
			
				|  |  | +        prop="name"
 | 
	
		
			
				|  |  | +        :rules="[
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            required: true,
 | 
	
		
			
				|  |  | +            message: '请输入教材名称',
 | 
	
		
			
				|  |  | +            trigger: 'blur',
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +        ]"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <el-input v-model="form.name" style="width: 100%"></el-input>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item
 | 
	
		
			
				|  |  | +        label="适用分部"
 | 
	
		
			
				|  |  | +        prop="organId"
 | 
	
		
			
				|  |  | +        :rules="[
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            required: true,
 | 
	
		
			
				|  |  | +            message: '请选择适用分部',
 | 
	
		
			
				|  |  | +            trigger: 'change',
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +        ]"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <select-all
 | 
	
		
			
				|  |  | +          v-model.trim="form.organId"
 | 
	
		
			
				|  |  | +           style="width: 100%"
 | 
	
		
			
				|  |  | +          class="organSelect"
 | 
	
		
			
				|  |  | +          filterable
 | 
	
		
			
				|  |  | +          placeholder="请选择分部"
 | 
	
		
			
				|  |  | +          multiple
 | 
	
		
			
				|  |  | +          clearable
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <el-option
 | 
	
		
			
				|  |  | +            v-for="(item, index) in selects.branchs"
 | 
	
		
			
				|  |  | +            :key="index"
 | 
	
		
			
				|  |  | +            :label="item.name"
 | 
	
		
			
				|  |  | +            :value="item.id"
 | 
	
		
			
				|  |  | +          ></el-option>
 | 
	
		
			
				|  |  | +        </select-all>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item
 | 
	
		
			
				|  |  | +        label="音源设置"
 | 
	
		
			
				|  |  | +        prop="soundResource"
 | 
	
		
			
				|  |  | +        :rules="[
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            required: true,
 | 
	
		
			
				|  |  | +            message: '请选择音源设置',
 | 
	
		
			
				|  |  | +            trigger: 'change',
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +        ]"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <el-select filterable placeholder="请选择音源设置" clearable v-model="form.soundResource" style="width: 100% !important">
 | 
	
		
			
				|  |  | +          <el-option label="NotePerformer音源" value="NOTEPERFORMER"></el-option>
 | 
	
		
			
				|  |  | +          <el-option label="标准音源" value="TANG"></el-option>
 | 
	
		
			
				|  |  | +          <el-option label="官方音源" value="OFFICIAL"></el-option>
 | 
	
		
			
				|  |  | +        </el-select>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item
 | 
	
		
			
				|  |  | +        label="教材封面图"
 | 
	
		
			
				|  |  | +        prop="coverImg"
 | 
	
		
			
				|  |  | +        :rules="[
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            required: true,
 | 
	
		
			
				|  |  | +            message: '请上传教材封面图',
 | 
	
		
			
				|  |  | +            trigger: 'blur',
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +        ]"
 | 
	
		
			
				|  |  | +        label-width="120px"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <upload
 | 
	
		
			
				|  |  | +          class="uploadImg"
 | 
	
		
			
				|  |  | +          v-model="form.coverImg"
 | 
	
		
			
				|  |  | +          :imageWidthM="350"
 | 
	
		
			
				|  |  | +          :imageHeightM="140"
 | 
	
		
			
				|  |  | +          ref="uploadImg"
 | 
	
		
			
				|  |  | +        ></upload>
 | 
	
		
			
				|  |  | +        <p style="color: red">
 | 
	
		
			
				|  |  | +          请上传350*140像素,大小2M以内,格式为jpg、png、gif图片
 | 
	
		
			
				|  |  | +        </p>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +    </el-form>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import Upload from "@/components/Upload/index";
 | 
	
		
			
				|  |  | +import {
 | 
	
		
			
				|  |  | +  addsysMusicScore,
 | 
	
		
			
				|  |  | +  getSysMusicScoreDetail,
 | 
	
		
			
				|  |  | +  resetsysMusicScore,
 | 
	
		
			
				|  |  | +} from "../api";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  props: ["activeRow"],
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    Upload,
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      form: {
 | 
	
		
			
				|  |  | +        organId: [],
 | 
	
		
			
				|  |  | +        name: null,
 | 
	
		
			
				|  |  | +        coverImg: "",
 | 
	
		
			
				|  |  | +        soundResource: null,
 | 
	
		
			
				|  |  | +        sysMusicScoreCategoriesList: [],
 | 
	
		
			
				|  |  | +        delCategoriesIds: [],
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      index: 0,
 | 
	
		
			
				|  |  | +      treeProps: {
 | 
	
		
			
				|  |  | +        children: "sysMusicScoreCategoriesList",
 | 
	
		
			
				|  |  | +        label: "name",
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  async mounted() {
 | 
	
		
			
				|  |  | +    await this.$store.dispatch("setBranchs");
 | 
	
		
			
				|  |  | +    if (this.activeRow?.id) {
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const res = await getSysMusicScoreDetail({ id: this.activeRow.id });
 | 
	
		
			
				|  |  | +        this.form.name = res.data.name;
 | 
	
		
			
				|  |  | +        this.form.organId = res.data.organId.split(",").map((item) => {
 | 
	
		
			
				|  |  | +          return Number(item);
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +        this.form.coverImg = res.data.coverImg;
 | 
	
		
			
				|  |  | +        this.form.soundResource = res.data.soundResource;
 | 
	
		
			
				|  |  | +        this.form.sysMusicScoreCategoriesList =
 | 
	
		
			
				|  |  | +          this.recursionDate(res.data.sysMusicScoreCategoriesList) || [];
 | 
	
		
			
				|  |  | +      } catch (e) {}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    // 递归遍历数组
 | 
	
		
			
				|  |  | +    recursionDate(arr) {
 | 
	
		
			
				|  |  | +      // 这里来了
 | 
	
		
			
				|  |  | +      if (arr.length > 0) {
 | 
	
		
			
				|  |  | +        let newArr = [];
 | 
	
		
			
				|  |  | +        for (let i = 0; i < arr.length; i++) {
 | 
	
		
			
				|  |  | +          let obj = {
 | 
	
		
			
				|  |  | +            ...arr[i],
 | 
	
		
			
				|  |  | +            index: arr[i].id,
 | 
	
		
			
				|  |  | +          };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          if (
 | 
	
		
			
				|  |  | +            arr[i].sysMusicScoreCategoriesList &&
 | 
	
		
			
				|  |  | +            arr[i].sysMusicScoreCategoriesList.length > 0
 | 
	
		
			
				|  |  | +          ) {
 | 
	
		
			
				|  |  | +            obj.sysMusicScoreCategoriesList = this.recursionDate(
 | 
	
		
			
				|  |  | +              arr[i].sysMusicScoreCategoriesList
 | 
	
		
			
				|  |  | +            );
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          newArr.push(obj);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        return newArr;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    addSubmit() {
 | 
	
		
			
				|  |  | +      this.$refs.form.validate(async (flag) => {
 | 
	
		
			
				|  |  | +        if (flag) {
 | 
	
		
			
				|  |  | +          let { organId, delCategoriesIds, ...rest } = this.form;
 | 
	
		
			
				|  |  | +          let obj = {
 | 
	
		
			
				|  |  | +            ...rest,
 | 
	
		
			
				|  |  | +            organId: organId.join(","),
 | 
	
		
			
				|  |  | +            delCategoriesIds: delCategoriesIds.join(","),
 | 
	
		
			
				|  |  | +          };
 | 
	
		
			
				|  |  | +          try {
 | 
	
		
			
				|  |  | +            if (this.activeRow?.id) {
 | 
	
		
			
				|  |  | +              obj.id = this.activeRow.id;
 | 
	
		
			
				|  |  | +              await resetsysMusicScore(obj);
 | 
	
		
			
				|  |  | +              this.$message.success("修改成功");
 | 
	
		
			
				|  |  | +              this.$emit("getList");
 | 
	
		
			
				|  |  | +              this.$emit("close");
 | 
	
		
			
				|  |  | +            } else {
 | 
	
		
			
				|  |  | +              await addsysMusicScore(obj);
 | 
	
		
			
				|  |  | +              this.$message.success("添加成功");
 | 
	
		
			
				|  |  | +              this.$emit("getList");
 | 
	
		
			
				|  |  | +              this.$emit("close");
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          } catch (e) {
 | 
	
		
			
				|  |  | +            console.log(e);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    uploadImg() {
 | 
	
		
			
				|  |  | +      this.$refs.uploadImg.$refs.upload.submit();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {},
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.alert {
 | 
	
		
			
				|  |  | +  margin-bottom: 20px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.form {
 | 
	
		
			
				|  |  | +  /deep/.el-form-item {
 | 
	
		
			
				|  |  | +    margin-right: 0 !important;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.addCateBtn {
 | 
	
		
			
				|  |  | +  margin-bottom: 20px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.custom-tree-node {
 | 
	
		
			
				|  |  | +  .title {
 | 
	
		
			
				|  |  | +    font-size: 16px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  font-size: 14px;
 | 
	
		
			
				|  |  | +  i {
 | 
	
		
			
				|  |  | +    // font-size: 20px;
 | 
	
		
			
				|  |  | +    margin-left: 5px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.uploadImg {
 | 
	
		
			
				|  |  | +  /deep/.avatar {
 | 
	
		
			
				|  |  | +    width: 350px;
 | 
	
		
			
				|  |  | +    height: 140px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |