198 lines
8.2 KiB
Vue
198 lines
8.2 KiB
Vue
<template>
|
|
<el-form :model="taskScript" ref="taskScript" :rules="rules" label-width="80px" label-position="right">
|
|
<el-form-item label="角色行为" class="conditionVO" prop="behavior">
|
|
<el-select v-model="taskScript.memberId" placeholder="请选择剧本角色" @change="changeMember">
|
|
<el-option v-for="taskScriptMember in taskScriptList" :key="taskScriptMember.id" :label="taskScriptMember.name" :value="taskScriptMember.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="taskScript.behavior" placeholder="请选择角色行为" @change="changeBehavior">
|
|
<el-option v-for="behavior in behaviorList" :key="behavior.id" :label="behavior.description" :value="behavior.id"></el-option>
|
|
</el-select>
|
|
<el-button type="primary" size="small" @click="addTaskScript">添加</el-button>
|
|
</el-form-item>
|
|
<el-table
|
|
:data="data.scriptBehaviorList" border class="scriptBehaviorList">
|
|
<el-table-column label="剧本角色" width="200" prop="memberName">
|
|
</el-table-column>
|
|
<el-table-column label="角色行为" width="200" prop="behaviorName">
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-row>
|
|
<el-button type="primary" size="mini" @click="deleteOperate(scope.$index)">删除</el-button>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="addTaskScriptList" style="margin-top:30px;">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue';
|
|
import Sortable from 'sortablejs';
|
|
import {saveTaskScript,getQuestRecord} from '@/api/simulation';
|
|
export default {
|
|
name: 'taskScript',
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
mounted(){
|
|
this.rowDrop();
|
|
},
|
|
data() {
|
|
return {
|
|
taskScript:{
|
|
index:"",
|
|
memberId:"",
|
|
behavior:"",
|
|
},
|
|
taskScriptMembername:"",
|
|
behaviorName:"",
|
|
taskScriptList:[],
|
|
behaviorList:[],
|
|
data:{
|
|
scriptBehaviorList:[],
|
|
},
|
|
rules:{
|
|
behavior:[
|
|
{ required: true, message: '请选择角色行为', trigger: 'change' }
|
|
],
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.scriptRecord.memberList': function (val, old){
|
|
this.taskScript.memberId="";
|
|
this.taskScript.behavior="";
|
|
this.taskScriptList=val;
|
|
},
|
|
'$store.state.scriptRecord.script': function (val, old){
|
|
let script=val;
|
|
let memeberList=this.taskScriptList;
|
|
this.setScriptList(memeberList,script);
|
|
}
|
|
},
|
|
methods:{
|
|
setScriptList(memeberList,script){
|
|
if(script.behaviorIdList!=undefined)
|
|
{
|
|
let behaviorIdList=script.behaviorIdList;
|
|
let scriptBehaviorList=[];
|
|
for(var i=0;i<behaviorIdList.length;i++)
|
|
{
|
|
let behaviorId=behaviorIdList[i];
|
|
let scriptBehavior={};
|
|
for(var j=0;j<memeberList.length;j++)
|
|
{
|
|
let behaviorVOList=memeberList[j].behaviorVOList;
|
|
for(var k=0;k<behaviorVOList.length;k++)
|
|
{
|
|
if(behaviorVOList[k].id==behaviorId)
|
|
{
|
|
scriptBehavior.memberId=memeberList[j].id;
|
|
scriptBehavior.memberName=memeberList[j].name;
|
|
scriptBehavior.behavior=behaviorId;
|
|
scriptBehavior.behaviorName=behaviorVOList[k].description;
|
|
scriptBehaviorList.push(scriptBehavior);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.data.scriptBehaviorList=scriptBehaviorList;
|
|
}
|
|
},
|
|
rowDrop(){
|
|
const that = this;
|
|
const tbody = document.querySelector('.scriptBehaviorList .el-table__body-wrapper tbody');
|
|
if (tbody) {
|
|
Sortable.create(tbody, {
|
|
onEnd({newIndex, oldIndex}) {
|
|
that.data.scriptBehaviorList.splice(newIndex, 0, that.data.scriptBehaviorList.splice(oldIndex, 1)[0]);
|
|
var newArray = that.data.scriptBehaviorList.slice(0);
|
|
that.data.scriptBehaviorList = [];
|
|
that.$nextTick(function () {
|
|
that.data.scriptBehaviorList = newArray;
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
changeMember(index)
|
|
{
|
|
this.taskScript.behavior="";
|
|
let taskScriptList=this.taskScriptList;
|
|
for(let i=0;i<taskScriptList.length;i++)
|
|
{
|
|
if(taskScriptList[i].id==index)
|
|
{
|
|
this.taskScriptMembername=taskScriptList[i].name;
|
|
this.behaviorList=taskScriptList[i].behaviorVOList;
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
changeBehavior(index){
|
|
let obj = this.behaviorList.find((item)=>{
|
|
return item.id === index;
|
|
});
|
|
this.behaviorName=obj.description;
|
|
},
|
|
addTaskScript(){
|
|
this.$refs['taskScript'].validate((valid) => {
|
|
if (valid) {
|
|
let scriptBehavior={
|
|
memberId:this.taskScript.memberId,
|
|
behavior:this.taskScript.behavior,
|
|
memberName:this.taskScriptMembername,
|
|
behaviorName:this.behaviorName,
|
|
};
|
|
this.data.scriptBehaviorList.push(scriptBehavior);
|
|
this.behaviorList=[];
|
|
this.taskScript.behavior="";
|
|
this.taskScript.memberId="";
|
|
}
|
|
else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
deleteOperate(data){
|
|
this.data.scriptBehaviorList.splice(data,1);
|
|
},
|
|
addTaskScriptList(){
|
|
if(this.data.scriptBehaviorList.length<=0)
|
|
{
|
|
this.$messageBox(`请添加角色行为`);
|
|
return;
|
|
}
|
|
let behaviorIdList=[];
|
|
for(let i=0;i<this.data.scriptBehaviorList.length;i++)
|
|
{
|
|
behaviorIdList.push(this.data.scriptBehaviorList[i].behavior);
|
|
}
|
|
let group=this.$props.group;
|
|
let that=this;
|
|
saveTaskScript(group,behaviorIdList).then(response=>{
|
|
this.$message.success('保存任务剧本成功');
|
|
this.$store.dispatch('scriptRecord/updateScript', {"behaviorIdList":behaviorIdList});
|
|
}).catch(error => {
|
|
this.$messageBox(`保存任务剧本失败: ${error.message}`);
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
.scriptBehaviorList{
|
|
margin-top:30px;
|
|
margin-left:10px;
|
|
width:601px
|
|
}
|
|
</style>
|