276 lines
11 KiB
Vue
276 lines
11 KiB
Vue
|
<template>
|
||
|
|
<el-dialog title="修改场景" :visible.sync="dialogVisible" width="1000px" :before-close="doClose" center custom-class="sceneModifyOut">
|
||
|
|
<el-form ref="form" :rules="rules" :model="formModel" label-width="120px" class="sceneModify">
|
||
|
|
<el-form-item label="场景名称" :required="true" prop="name">
|
||
|
|
<el-input v-model="formModel.name" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场景描述" :required="true" prop="description">
|
||
|
|
<el-input v-model="formModel.description" type="textarea" :style="{width: '80%'}" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="处置流程" :required="true" prop="disposalProcesses">
|
||
|
|
<el-input v-model="formModel.disposalProcesses" type="textarea" :style="{width: '80%'}" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="步骤描述" :required="true" prop="stepVOs">
|
||
|
|
<el-button type="primary" size="small" style="margin-bottom:10px" @click="addStepVO">添加</el-button>
|
||
|
|
<el-table :data="formModel.stepVOs" border style="width: 661px;">
|
||
|
|
<el-table-column prop="description" label=" 简介" width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- <el-form-item :prop="'stepVOs[' + scope.$index + '].description'"> -->
|
||
|
|
<el-input v-model="scope.row.description" type="text" :style="{width: '170px'}" size="small" />
|
||
|
|
<!-- </el-form-item> -->
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="startActionId" label=" 首动作" width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- <el-form-item :prop="'stepVOs+[' + scope.$index + '].startActionId'"> -->
|
||
|
|
<el-select v-model="scope.row.startActionId" type="textarea" :style="{width: '170px'}" size="small">
|
||
|
|
<el-option
|
||
|
|
v-for="option in actionList"
|
||
|
|
:key="option.id"
|
||
|
|
:label="option.name"
|
||
|
|
:value="option.id"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
<!-- </el-form-item> -->
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="endActionId" label=" 尾动作" width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-model="scope.row.endActionId" type="textarea" :style="{width: '170px'}" size="small">
|
||
|
|
<el-option
|
||
|
|
v-for="option in actionList"
|
||
|
|
:key="option.id"
|
||
|
|
:label="option.name"
|
||
|
|
:value="option.id"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="60">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label=" 指令下达规则" :required="true" prop="commandPublishStatistics">
|
||
|
|
<el-button type="primary" size="small" style="margin-bottom:10px" @click="addStatistics">添加</el-button>
|
||
|
|
<el-table :data="formModel.commandPublishStatistics" border style="width: 751px;">
|
||
|
|
<el-table-column prop="keyWords" label=" 语音识别关键词列表" width="250">
|
||
|
|
<template slot-scope="scope" style="font-size:0">
|
||
|
|
<el-tag v-for="(tag,index) in scope.row.keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.$index,index)">{{ tag }}</el-tag>
|
||
|
|
<el-input
|
||
|
|
v-if="scope.row.inputVisible"
|
||
|
|
:ref="'saveTagInput'+scope.$index"
|
||
|
|
v-model="scope.row.inputValue"
|
||
|
|
size="small"
|
||
|
|
class="input-new-tag"
|
||
|
|
@keyup.enter.native="handleInputConfirm(scope.$index)"
|
||
|
|
@blur="handleInputConfirm(scope.$index)"
|
||
|
|
/>
|
||
|
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index)">添加</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="actionId" label="动作" width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select v-model="scope.row.actionId" type="textarea" :style="{width: '170px'}" size="small">
|
||
|
|
<el-option
|
||
|
|
v-for="option in actionList"
|
||
|
|
:key="option.id"
|
||
|
|
:label="option.name"
|
||
|
|
:value="option.id"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="timeOut" label="超时时间" width="150">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input-number
|
||
|
|
v-model="scope.row.timeOut"
|
||
|
|
:style="{width: '100px'}"
|
||
|
|
:min="0"
|
||
|
|
size="small"
|
||
|
|
:max="Infinity"
|
||
|
|
:step="1"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="score" label="总分值" width="150">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input-number
|
||
|
|
v-model="scope.row.score"
|
||
|
|
:style="{width: '100px'}"
|
||
|
|
:min="0"
|
||
|
|
size="small"
|
||
|
|
:max="Infinity"
|
||
|
|
:step="1"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="运营部分总分" :required="true" prop="operationScore">
|
||
|
|
<el-input-number v-model="formModel.operationScore" :controls="true" :min="0" :max="100" :step="1" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="关联剧本" :required="true" prop="scriptId">
|
||
|
|
<!-- <el-input-number v-model="formModel.scriptId" :controls="true" :min="0" :max="100" :step="1" /> -->
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button type="primary" @click="doUpdate">{{ $t('global.confirm') }}</el-button>
|
||
|
|
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'UpdateScene',
|
||
|
|
props: {
|
||
|
|
scriptList:{
|
||
|
|
type: Array,
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogVisible:false,
|
||
|
|
sceneId:'',
|
||
|
|
actionList:[],
|
||
|
|
formModel:{
|
||
|
|
name:'', // 场景名称
|
||
|
|
description:'', // 场景描述
|
||
|
|
disposalProcesses:'', // 处置流程
|
||
|
|
scriptId:'', // 剧本id
|
||
|
|
operationScore:0, // 运营部分总分（站间停车等）
|
||
|
|
main:true, // 是否主场景
|
||
|
|
stepVOs:[], // 步骤描述
|
||
|
|
commandPublishStatistics:[] // 指令下达规则列表
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
rules() {
|
||
|
|
const crules = {
|
||
|
|
name: [
|
||
|
|
{ required: true, validator: this.validateSceneName, trigger: 'blur' },
|
||
|
|
{ required: true, validator: this.validateSceneName, trigger: 'change' }
|
||
|
|
],
|
||
|
|
description: [
|
||
|
|
{ required: true, validator: this.validateDescription, trigger: 'blur' },
|
||
|
|
{ required: true, validator: this.validateDescription, trigger: 'change' }
|
||
|
|
],
|
||
|
|
disposalProcesses: [
|
||
|
|
{ required: true, validator: this.validateDisposalProcesses, trigger: 'blur' },
|
||
|
|
{ required: true, validator: this.validateDisposalProcesses, trigger: 'change' }
|
||
|
|
],
|
||
|
|
scriptId:[
|
||
|
|
{ required: true, message: '请选择剧本', trigger: 'change' }
|
||
|
|
],
|
||
|
|
operationScore:[
|
||
|
|
{ required: true, message: '请输入运营部分总分', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
return crules;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
validateSceneName(rule, value, callback) {
|
||
|
|
if (value.trim().length === 0) {
|
||
|
|
this.formModel.name = this.formModel.name.replace(/\s/g, '');
|
||
|
|
return callback(new Error('请输入场景名称'));
|
||
|
|
} else {
|
||
|
|
return callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
validateDescription(rule, value, callback) {
|
||
|
|
if (value.trim().length === 0) {
|
||
|
|
this.formModel.description = this.formModel.description.replace(/\s/g, '');
|
||
|
|
return callback(new Error('请输入场景描述'));
|
||
|
|
} else {
|
||
|
|
return callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
validateDisposalProcesses(rule, value, callback) {
|
||
|
|
if (value.trim().length === 0) {
|
||
|
|
this.formModel.disposalProcesses = this.formModel.disposalProcesses.replace(/\s/g, '');
|
||
|
|
return callback(new Error('请输入处置流程'));
|
||
|
|
} else {
|
||
|
|
return callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
doShow(sceneId) {
|
||
|
|
this.dialogVisible = true;
|
||
|
|
this.sceneId = sceneId;
|
||
|
|
|
||
|
|
},
|
||
|
|
doClose() {
|
||
|
|
this.$refs.form.resetFields();
|
||
|
|
this.dialogVisible = false;
|
||
|
|
},
|
||
|
|
doUpdate() {
|
||
|
|
|
||
|
|
},
|
||
|
|
addStepVO() {
|
||
|
|
this.formModel.stepVOs.push({competitionId:this.sceneId, description:'', startActionId:'', endActionId:''});
|
||
|
|
},
|
||
|
|
addStatistics() {
|
||
|
|
this.formModel.commandPublishStatistics.push({competitionId:this.sceneId, keyWords:[], actionId:'', timeOut:0, inputVisible:false, inputValue:'', score:0 });
|
||
|
|
},
|
||
|
|
handleDelete(index) {
|
||
|
|
this.formModel.stepVOs.splice(index, 1);
|
||
|
|
},
|
||
|
|
handleClose(index, tagIndex) {
|
||
|
|
const keyWords = this.formModel.commandPublishStatistics[index].keyWords;
|
||
|
|
keyWords.splice(tagIndex, 1);
|
||
|
|
},
|
||
|
|
handleInputConfirm(index) {
|
||
|
|
const inputValue = this.formModel.commandPublishStatistics[index].inputValue;
|
||
|
|
if (inputValue) {
|
||
|
|
this.formModel.commandPublishStatistics[index].keyWords.push(inputValue);
|
||
|
|
}
|
||
|
|
this.formModel.commandPublishStatistics[index].inputVisible = false;
|
||
|
|
this.formModel.commandPublishStatistics[index].inputValue = '';
|
||
|
|
},
|
||
|
|
showInput(index) {
|
||
|
|
this.formModel.commandPublishStatistics[index].inputVisible = true;
|
||
|
|
this.$nextTick(_ => {
|
||
|
|
this.$refs['saveTagInput' + index].$refs.input.focus();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.deleteScene{
|
||
|
|
font-size: 24px;
|
||
|
|
color: #f00;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.sceneModify{
|
||
|
|
height:500px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.input-new-tag {
|
||
|
|
width: 60px;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
.button-new-tag{
|
||
|
|
margin-bottom:10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.sceneModifyOut.el-dialog--center .el-dialog__body {
|
||
|
|
text-align: initial;
|
||
|
|
padding: 25px 10px 30px 10px;
|
||
|
|
}
|
||
|
|
.el-tag {
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
vertical-align:top;
|
||
|
|
}
|
||
|
|
</style>
|