dy-admin-manager/src/views/categroyManager/specialSetup/musicalManager.vue

<template>
  <div class='m-container'>
    <!-- <h2>声部管理</h2> -->
    <div class="m-core">
      <!-- <div class='newBand'>添加</div> -->
      <!-- 列表 -->
      <el-row class="music-title">
        <el-col :span="6">
          一级分类
          <el-popover placement="right"
                      width="300"
                      v-permission="'subject/upset/insert'"
                      trigger="click">
            <el-input v-model.trim="oneTypeName"
                      size="medium"
                      style="width: 70%"
                      autocomplete="off"></el-input>
            <el-button style="margin: 0;"
                       @click="onAddMusic"
                       type="primary"
                       size="medium">提交</el-button>
            <el-button slot="reference"
                       type="primary"
                       
                       round
                       icon="el-icon-plus">添加</el-button>
          </el-popover>

        </el-col>
        <el-col :span="18">
          二级分类
        </el-col>
      </el-row>

      <el-row v-for="(item, index) in subjectList"
              :key="item.id">
        <el-col :span="6">
          <el-button @click="subjectDelete(item)" v-permission="'subject/upset/del'"
                     icon="el-icon-delete"
                     circle></el-button>
          <span class="one_name">{{ item.name }}</span>
        </el-col>
        <el-col :span="18"
                class="tow_col">

          <el-tag v-for="s in item.subjects"
                  :key="s.id"
                  type="info"
                  effect="dark"
                  :closable="$helpers.permission('subject/upset/del')"
                  :disable-transitions="false"
                  @close="subjectDelete(s)"> {{s.name}}</el-tag>
          <span style="display: inline-block;">
            <el-input class="input-new-tag"
                      v-if="item.inputStatus"
                      v-model.trim="inputValue[index]"
                      key="tag"
                      ref="saveTagInput"
                      >
            </el-input>
            <el-button v-else
                       key="tag"
                       type="primary"
                       
                       round
                       v-permission="'subject/upset/insert'"
                       icon="el-icon-plus"
                       @click="item.inputStatus = true">添加</el-button>
            <el-button v-if="item.inputStatus"
                       type="info"
                       
                       round
                       icon="el-icon-check"
                       @click="onSave(item, index)">保存</el-button>
          </span>
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { subjectListTree, subjectUpset } from '@/api/specialSetting'
export default {
  components: { pagination },
  name: 'musicalManager',
  data () {
    return {
      oneTypeName: null, // 添加一级分类名称
      subjectList: [],
      inputValue: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    onAddMusic () {
      // 添加一级分类 
      if (!this.oneTypeName) return
      subjectUpset({
        parentSubjectId: 0,
        tenantId: 1,
        name: this.oneTypeName
      }).then(res => {
        this.messageTips('添加', res)
        if (res.code == 200) {
          this.oneTypeName = null
        }
      })
    },
    onSave (item, index) {
      // 添加二级分类 
      if (!this.inputValue[index]) return
      subjectUpset({
        parentSubjectId: item.id,
        tenantId: 1,
        name: this.inputValue[index]
      }).then(res => {
        this.messageTips('添加', res)
        if (res.code == 200) {
          this.inputValue[index] = null
        }
      })
    },
    subjectDelete (item) { // 删除分类
      this.$confirm("是否确认删除分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          subjectUpset({
            delFlag: 'YES',
            id: item.id
          }).then(res => {
            this.messageTips('删除', res)
          })
        })
    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success(title + '成功')
        this.getList()
      } else {
        this.$message.error(res.msg)
      }
    },
    getList () {
      subjectListTree({
        delFlag: 'NO',
        tenantId: 1,
        rows: 9999
      }).then(res => {
        let result = res.data
        if (res.code == 200) {
          let tempArray = []
          result.rows.forEach(item => {
            item.inputStatus = false
            tempArray.push(item)
          })
          this.subjectList = tempArray
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-popover {
  .el-form {
    display: flex;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.music-title {
  font-size: 14px;
  color: #444;
  .el-col {
    background-color: #edeef0;
    padding-left: 36px;
  }
  /deep/.el-button {
    float: right;
    margin-top: 10px;
    margin-right: 16px;
  }
}
.el-row {
  margin-bottom: 12px;
  .el-col {
    line-height: 48px;
  }
  .el-col-18 {
    width: calc(75% - 20px);
    margin-left: 20px;
  }
  .one_name {
    padding-left: 10px;
  }
  .tow_col {
    padding-left: 20px;
    .el-button--primary {
      background: #fff;
      border-color: #979797;
      color: #777;
      &:hover,
      &:active,
      &:focus {
        background: #fff;
        border-color: #979797;
        color: #777;
      }
    }
  }
  .tow_input {
    width: 100px;
    margin-right: 12px;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  width: 98% !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  // margin-left: 10px;
  vertical-align: bottom;
}
.el-tag--dark.el-tag--info {
  background-color: #f0f2f5;
  border-color: #f0f2f5;
  color: #5a5e66;
  /deep/.el-tag__close {
    background-color: #c0c4cc;
  }
}
</style>