dy-admin-manager/src/views/teachManager/modals/addRoot.vue

<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" placeholder="请输入教材名称" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item
        label="适用分部"
        prop="organId"
        v-if="!(activeRow && activeRow.id)"
        :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"
        v-if="level <= 2"
        :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: level > 2 ? false : true,
            message: '请上传教材封面图',
            trigger: 'blur',
          },
        ]"
        label-width="120px"
      >
        <upload
          :class="[imageWidthM == 350 ? 'uploadImg' : 'uploadSmallImg']"
          v-model="form.coverImg"
          :imageWidthM="imageWidthM"
          :imageHeightM="imageHeightM"
          ref="uploadImg"
        ></upload>
        <p style="color: red">
          请上传{{ imageWidthM }}*{{ imageHeightM }}像素，大小2M以内，格式为jpg、png、gif图片
        </p>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close()">取 消</el-button>
      <el-button type="primary" @click="addSubmit">确 定</el-button>
    </span>
  </div>
</template>
<script>
import Upload from "@/components/Upload/index";
import {
  addsysMusicScore,
  getSysMusicScoreDetail,
  resetsysMusicScore,
} from "../api";
export default {
  props: ["type", "activeRow"],
  components: {
    Upload,
  },
  data() {
    return {
      imageWidthM: 350,
      imageHeightM: 140,
      form: {
        organId: [],
        name: null,
        coverImg: "",
        soundResource: null,
        sysMusicScoreCategoriesList: [],
        // delCategoriesIds: [],
      },
      index: 0,
      treeProps: {
        children: "sysMusicScoreCategoriesList",
        label: "name",
      },
      level: 0, // 当前添加或修改第几层
    };
  },
  async mounted() {
    await this.$store.dispatch("setBranchs");
    if (this.activeRow?.id) {
      // 判断是否是根元素处理
      // if(this.activeRow?.parentId != 0) {
        this.imageWidthM = 210
        this.imageHeightM = 268
      // }
      this.level = this.activeRow?.level || 0
      try {
        const res = await getSysMusicScoreDetail({ id: this.activeRow.id });
        if(this.type == 'create') { // 添加一级分类或子级
          this.form.organId = res.data.organId.split(",").map((item) => {
            return Number(item);
          });
        } else if(this.type == 'update') { // 修改分类
          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;
        }
      } catch (e) {}
    }
  },
  methods: {
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.sysMusicScoreCategoriesList) {
          const cIds = this.formatParentId(
            id,
            item.sysMusicScoreCategoriesList,
            [...ids, item.id]
          );
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    addSubmit() {
      this.$refs.form.validate(async (flag) => {
        if (flag) {
          let { organId, ...rest } = this.form;
          let parentId = 0
          if(this.type == 'create') {
            parentId = this.activeRow?.id || 0
          } else if(this.type == 'update') {
            parentId = this.activeRow?.parentId || 0
          }
          let obj = {
            ...rest,
            parentId,
            organId: organId.join(","),
          };
          try {
            if (this.type == 'update') {
              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>
.dialog-footer {
  display: block;
  text-align: right;
}
.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;
  }
}
.uploadSmallImg {
  /deep/.avatar {
    width: 105px;
    height: 134px;
  }
}
</style>