|
|
@@ -0,0 +1,255 @@
|
|
|
+<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"
|
|
|
+ trigger="click">
|
|
|
+ <el-input v-model.trim="oneTypeName"
|
|
|
+ size="medium"
|
|
|
+ style="width: 73%"
|
|
|
+ autocomplete="off"></el-input>
|
|
|
+ <el-button style="margin: 0;"
|
|
|
+ @click="onAddMusic"
|
|
|
+ type="primary"
|
|
|
+ size="medium">提交</el-button>
|
|
|
+ <el-button slot="reference"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ 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)"
|
|
|
+ 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
|
|
|
+ :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"
|
|
|
+ size="small">
|
|
|
+ </el-input>
|
|
|
+ <el-button v-else
|
|
|
+ key="tag"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ round
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="item.inputStatus = true">添加</el-button>
|
|
|
+ <el-button v-if="item.inputStatus"
|
|
|
+ type="info"
|
|
|
+ size="mini"
|
|
|
+ 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: 2,
|
|
|
+ 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: 2,
|
|
|
+ name: this.inputValue[index]
|
|
|
+ }).then(res => {
|
|
|
+ this.messageTips('添加', res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.inputValue[index] = null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ subjectDelete (item) { // 删除分类
|
|
|
+ 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: 0,
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-button--primary {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+/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>
|
