dy-admin-manager/src/views/organManager/components/memberSetting.vue

<!--  -->
<template>
  <div>
    <el-alert
      title="机构学练宝设置"
      type="info"
      :closable="false"
      style="margin-bottom: 20px"
    ></el-alert>
    <el-form
      ref="form"
      label-position="top"
      :model="form"
      label-width="140px"
      :inline="true"
    >
      <el-form-item
        label="按天会员激活金额"
        prop="day_divide"
        :rules="[
          { required: true, message: '请输入会员激活金额', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="isDisabled"
          placeholder="请输入会员激活金额"
          v-model="form.day_divide"
          @keyup.native="keyupEvent($event)"
          style="width: 238px;"
        >
          <div slot="append">元/天/人</div>
        </el-input>
      </el-form-item>
      <el-form-item
        label="月度会员激活价"
        prop="month_divide"
        :rules="[
          { required: true, message: '请输入会员激活价', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="isDisabled"
          placeholder="请输入会员激活价"
          v-model="form.month_divide"
          @keyup.native="keyupEvent($event)"
          style="width: 238px;"
        >
          <div slot="append">元/月/人</div>
        </el-input>
      </el-form-item>
      <!-- <el-form-item
        label="季度会员激活价"
        prop="quarter_divide"
        :rules="[
          { required: true, message: '请输入会员激活价', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="isDisabled"
          placeholder="请输入会员激活价"
          v-model="form.quarter_divide"
          @keyup.native="keyupEvent($event)"
          style="width: 238px;"
        >
          <div slot="append">元/季/人</div>
        </el-input>
      </el-form-item> -->
      <el-form-item
        label="半年会员激活价"
        prop="half_year_divide"
        :rules="[
          { required: true, message: '请输入会员激活价', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="isDisabled"
          placeholder="请输入会员激活价"
          @keyup.native="keyupEvent($event)"
          v-model="form.half_year_divide"
          style="width: 238px;"
        >
          <div slot="append">元/半年/人</div>
        </el-input>
      </el-form-item>
      <el-form-item
        label="年度会员激活价"
        prop="year_divide"
        :rules="[
          { required: true, message: '请输入会员激活价', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="isDisabled"
          placeholder="请输入会员激活价"
          @keyup.native="keyupEvent($event)"
          v-model="form.year_divide"
          style="width: 238px;"
        >
          <div slot="append">元/年/人</div>
        </el-input>
      </el-form-item>
      <el-form-item label="可用教材" prop="teachingMaterialId">
        <el-cascader
          v-model.trim="form.teachingMaterialId"
          :disabled="isDisabled"
          v-show="!isDisabled"
          style="width: 300px !important"
          :options="teachList"
          :props="{ multiple: true }"
          :show-all-levels="false"
          collapse-tags
          ref="cascader"
          @change="onChange"
          clearable
        ></el-cascader>

        <el-tag
          :key="tag.id"
          v-show="isDisabled"
          v-for="tag in dynamicTags"
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// {
//     "member_config": {
//         "month_divide": "10",
//         "quarter_divide": "20",
//         "half_year_divide": "30",
//         "year_divide": "40"
//     },
//     "cloud_room_rule": {
//         "cloud_room_up_limit": "2",
//         "cloud_room_config": {
//             "3": "10",
//             "4": "20",
//             "5": "30"
//         }
//     }
// }
// import { getSysMusicScoreList } from '@/views/teachManager/api'
import { queryTree } from "../../accompaniment/api";
import _ from "lodash";
export default {
  props: ["type", "data"],
  data() {
    return {
      form: {
        day_divide: null,
        month_divide: null,
        quarter_divide: null,
        half_year_divide: null,
        year_divide: null,
        teachingMaterialId: [] // 可用教材
      },
      teachList: [], // 教材列表
      dynamicTags: []
    };
  },
  async mounted() {
    await this.__init();
    if (this.data) {
      const { config, teachingMaterialId } = this.data;
      const tmpConfig = config ? JSON.parse(config) : {};
      let tempIdArr = [];
      if (teachingMaterialId) {
        const tempIds = teachingMaterialId.split(",").map(i => Number(i));
        tempIds.forEach(id => {
          tempIdArr.push(this.formatParentId(id, this.teachList));
        });
      }
      this.form = {
        ...tmpConfig.member_config,
        teachingMaterialId: tempIdArr
      };
      this.$nextTick(() => {
        this.onChange();
      });
    }
  },
  computed: {
    isDisabled() {
      return this.type == "setting" ? true : false;
    }
  },
  methods: {
    async __init() {
      try {
        // 不管是添加、查看、修改都传-1
        const tenantId = -1;
        const res = await queryTree({ enable: 1, tenantId, queryType: 'ALL' });
        const rows = res.data || [];
        rows.forEach(item => {
          let children = [];
          item.label = item.name;
          item.value = item.id;
          let childList = item.sysMusicScoreCategoriesList
            ? item.sysMusicScoreCategoriesList
            : [];
          if (childList.length > 0) {
            childList.forEach(child => {
              child.label = child.name;
              child.value = child.id;
              child.sysMusicScoreCategoriesList = [];
              children.push(child);
            });
          }
          item.children = children.length > 0 ? children : null;
          this.teachList.push(item);
        });
      } catch (e) {
        console.log(e);
      }
    },
    onChange() {
      let childNodes = this.$refs.cascader.getCheckedNodes(true);
      this.dynamicTags = [];
      childNodes.forEach(node => {
        this.dynamicTags.push({
          name: node.label,
          id: node.value
        });
      });
    },
    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;
    },
    handleClose(tag) {},
    onSubmit() {
      let status = false;
      this.$refs.form.validate(_ => {
        status = _;
      });
      return status;
    },
    getValues() {
      const { teachingMaterialId, ...res } = this.form;
      let tempArr = [];
      teachingMaterialId.forEach(ids => {
        tempArr.push(_.last(ids));
      });
      return {
        member_config: { ...res },
        teachingMaterialId: tempArr
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-input,
.el-select,
.el-cascader__dropdown {
  width: 300px !important;
}
.el-cascader-menu {
  width: 100%;
}
</style>