dy-admin-manager/src/views/categroyManager/components/add-subject.vue

<template>
  <div>
    <el-form :model="forms" size="default" label-width="80px" ref="formRef">
      <!-- <el-form-item
        prop="instrumentIds"
        label="所属分类"
        :rules="[{ required: true, message: '请选择声部分类' }]"
      >
        <el-select
          v-model="forms.instrumentIds"
          placeholder="请选择所属分类"
          clearable
          filterable
          style="width: 50% !important"
        >
          <el-option
            v-for="item in fatherList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item> -->`
      <div
        style="max-height: 400px;min-height: 300px; overflow-x: hidden; overflow-y: auto"
      >
        <el-radio-group v-model="forms.instrumentIds">
          <el-form-item
            v-for="(cbs, index) in cbsSubjectList"
            :key="index"
            :label="cbs.name"
          >
            <template v-if="cbs.instruments && cbs.instruments.length">
              <el-radio
                v-for="(item, index) in cbs.instruments"
                :key="index"
                :label="item.id"
                :disabled="item.added && item.id !== defaultId"
                >{{ item.name }}</el-radio
              >
            </template>
          </el-form-item>
        </el-radio-group>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="onSubmit" v-preventReClick
        >确 认</el-button
      >
    </div>
  </div>
</template>

<script>
import { api_cbsSubjectPage } from "../api";
import { subjectUpset } from "@/api/specialSetting";
export default {
  name: "add-subject",
  props: ["fatherList", "subjectType", "detail"],
  data() {
    return {
      defaultId: null,
      cbsSubjectOption: [],
      cbsSubjectList: [],
      forms: {
        cbsSubjectId: null,
        instrumentIds: null // 分类名称
      }
    };
  },
  mounted() {
    // 修改声部
    if (this.detail.id) {
      this.forms.id = this.detail.id;
      this.forms.instrumentIds = this.detail.instrumentIds
        ? Number(this.detail.instrumentIds)
        : null;
      this.defaultId = this.detail.instrumentIds
        ? Number(this.detail.instrumentIds)
        : null;
      this.getCbsSubject(this.detail.id);
    }
  },
  methods: {
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.instruments) {
          const cIds = this.formatParentId(id, item.instruments, [
            ...ids,
            item.id
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    async getCbsSubject(subjectId) {
      try {
        const { data } = await api_cbsSubjectPage({
          page: 1,
          rows: 999,
          subjectId
        });
        this.cbsSubjectList = data;
      } catch (e) {
        //
        console.log(e, "data");
      }
    },
    async onSubmit() {
      // 提交修改乐器
      if (!this.forms.instrumentIds) {
        this.$message.error("请选择乐器");
        return;
      }
      const ids = this.formatParentId(
        this.forms.instrumentIds,
        this.cbsSubjectList
      );
      this.forms.cbsSubjectId = ids[0];

      subjectUpset({
        tenantId: 1,
        ...this.forms
      }).then(res => {
        if (res.code == 200) {
          this.messageTips("修改", res);
          this.$emit("getList");
          this.$emit("close");
        }
      });
      // this.$refs.formRef.validate(valid => {
      //   if (!valid) return;
      //   // if (this.detail.id) {
      //   //   // 修改
      //   // } else {
      //   //   // 添加
      //   // }

      //   this.$emit("close");
      // });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
      } else {
        this.$message.error(res.msg);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-footer {
  padding-top: 12px;
  text-align: right;
}
/deep/ .el-form-item {
  margin-bottom: 13px;
}
</style>