|
@@ -168,6 +168,12 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <div class="floor">
|
|
|
+ <!-- <div class="remove"
|
|
|
+ @click="removeListItem">删除</div> -->
|
|
|
+ <div class='add'
|
|
|
+ @click="addListItem">添加</div>
|
|
|
+ </div>
|
|
|
<div class="btnWrap"
|
|
|
style="margin-top:30px">
|
|
|
<div class="closeBtn"
|
|
@@ -176,6 +182,41 @@
|
|
|
v-permission="{child: 'musicGroup/updateSubjectInfo', parent: '/resetTeaming/resetSound'}"
|
|
|
@click="saveInfo">保存</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog title="声部选择"
|
|
|
+ :visible.sync="dialogTableVisible"
|
|
|
+ :modal-append-to-body="false">
|
|
|
+ <div class="soundWrap">
|
|
|
+ <div class="itemList">
|
|
|
+ <div class="categroy"
|
|
|
+ v-for="(item,index) in soundList"
|
|
|
+ :key="index">
|
|
|
+ <p>{{item.name }}</p>
|
|
|
+ <el-checkbox-group v-model="soundLists[index]"
|
|
|
+ @change='changeList'>
|
|
|
+ <!-- sound: this.activeSoundList[item].name, // id
|
|
|
+ jihua: '10', //计划招生人数
|
|
|
+ yuji: '10', // 预计收费
|
|
|
+ zhonglei: [], // 可选乐器种类
|
|
|
+ fangshi: 2, // 乐器提供方式
|
|
|
+ jiaopu: 'jiaopu1', // 教辅组合
|
|
|
+ type: 1, // 操作
|
|
|
+ id: this.activeSoundList[item].id, //声部id
|
|
|
+ visible: false, // 当前乐器提供方式的pop提示框显示隐藏 -->
|
|
|
+ <el-checkbox :label="sound.id"
|
|
|
+ @change="checkinlist({'id':sound.id,'sound':sound.name,'jihua':0,'yuji':0,'zhonglei':[],'fangshi':'','fangshiprice':1500,'jiaopu':'','type':1,'typeVisible':false,'provideVisible':false,'markVisible':false,'goodsList':[],'markList':[],'markChioseList':[]})"
|
|
|
+ v-for="(sound,indexs) in item.subjects"
|
|
|
+ :key="indexs">{{sound.name }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class='soundSubP'>当前选择声部数:{{chioseSoundNum}}</p>
|
|
|
+ <div class="btnWrapss">
|
|
|
+ <div class="dialogBtn"
|
|
|
+ @click="generates">确定</div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -183,13 +224,15 @@ import { findMusicGroupSubjectInfo, resetSubjectPlan, getSoundTree, getGoods, up
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
+ dialogTableVisible: false,
|
|
|
tableList: [],
|
|
|
teamid: '',
|
|
|
activeSoundList: [],
|
|
|
soundList: [],
|
|
|
checkList: [],
|
|
|
multipleSelection: [], // 列表选择的集合
|
|
|
-
|
|
|
+ soundList: [],
|
|
|
+ soundLists: [], // 存储选中项的声部id 记录变量
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
@@ -197,11 +240,23 @@ export default {
|
|
|
this.teamid = this.$route.query.id
|
|
|
this.getSound();
|
|
|
sessionStorage.setItem('resetCode', '2');
|
|
|
+ // 获取所有声部
|
|
|
+ getSoundTree().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.soundList = res.data.rows;
|
|
|
+ // // 生成动态的checkList
|
|
|
+ for (let key in this.soundList) {
|
|
|
+ this.$set(this.soundLists, key, [])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeList (e) {
|
|
|
+ },
|
|
|
getSound () {
|
|
|
-
|
|
|
findMusicGroupSubjectInfo({ musicGroupId: this.teamid }).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
this.activeSoundList = res.data.musicGroupSubjectPlans.map(item => {
|
|
@@ -338,6 +393,33 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 勾选选中框处理数据,存储勾选过的checkbox值
|
|
|
+ checkinlist (obj) {
|
|
|
+ let flag = false;
|
|
|
+ this.activeSoundList.map(item => {
|
|
|
+ if (item.id == obj.id) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (!flag) {
|
|
|
+ this.activeSoundList.push(obj)
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < this.activeSoundList.length; i++) {
|
|
|
+ if (this.activeSoundList[i].id == obj.id) {
|
|
|
+ this.activeSoundList.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加声部
|
|
|
+ // 点击添加按钮
|
|
|
+ addListItem () {
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ },
|
|
|
+ // 点击确认按钮生成表单
|
|
|
+ generates () {
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ },
|
|
|
|
|
|
}, filters: {
|
|
|
zhongleiFilter (val, list) {
|
|
@@ -396,8 +478,108 @@ export default {
|
|
|
// let goods = val.goods.join(',');
|
|
|
// let price = val.price
|
|
|
// }
|
|
|
- },
|
|
|
+ }, computed: {
|
|
|
+ // 返回当前选中声部数量
|
|
|
+ chioseSoundNum () {
|
|
|
+ let num = 0;
|
|
|
+ for (let key in this.soundList) {
|
|
|
+ num += this.soundLists[key].length;
|
|
|
+
|
|
|
+ }
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
+.floor {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ background: rgba(237, 238, 240, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #444;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .remove {
|
|
|
+ width: 98px;
|
|
|
+ height: 32px;
|
|
|
+ background: rgba(248, 80, 67, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 164px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 98px;
|
|
|
+ height: 32px;
|
|
|
+ background: rgba(20, 146, 138, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.soundWrap {
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ .itemList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 300px;
|
|
|
+ max-height: 300px;
|
|
|
+ overflow: auto;
|
|
|
+ .categroy {
|
|
|
+ width: 150px;
|
|
|
+ min-width: 150px;
|
|
|
+ .el-checkbox {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ display: block;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #edeef0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.soundSubP {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #edeef0;
|
|
|
+ padding-left: 25px;
|
|
|
+}
|
|
|
+.btnWrapss {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 150px;
|
|
|
+ .dialogBtn {
|
|
|
+ width: 188px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(249, 114, 21, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|