cronsun/web/ui/src/components/JobEditRule.vue

80 lines
2.6 KiB
Vue

<template>
<div style="margin-bottom:20px;">
<h4 class="ui horizontal divider header">{{$L('timer')}} - {{index}} <a href="#" v-on:click.prevent="remove">{{$L('delete')}}</a></h4>
<div class="two fields">
<div class="field">
<div class="ui icon input">
<input type="text" v-bind:value="rule.timer" v-on:input="change('timer', $event.target.value)" :placeholder="$L('0 * * * * *, rules see the 「?」on the right')"/>
<i ref="ruletip" class="large help circle link icon" data-position="top right" :data-html="$L('<sec> <min> <hr> <day> <month> <week>, rules is same with Cron')" data-variation="wide"></i>
</div>
</div>
<div class="field">
<Dropdown :title="$L('node group')" v-bind:items="nodeGroups" v-bind:selected="rule.gids" multiple="true" v-on:change="changeNodeGroups($event)"></Dropdown>
</div>
</div>
<div class="field">
<label>{{$L('and please running on those nodes')}}</label>
<Dropdown :title="$L('select nodes')" v-bind:items="activityNodes" v-bind:selected="rule.nids" v-on:change="changeIncludeNodes($event)" multiple="true"></Dropdown>
</div>
<div class="field">
<label>{{$L('do not running on those nodes')}}</label>
<Dropdown :title="$L('select nodes')" v-bind:items="activityNodes" v-bind:selected="rule.exclude_nids" v-on:change="changeExcludeNodes($event)" multiple="true"></Dropdown>
</div>
</div>
</template>
<script>
import Dropdown from './basic/Dropdown.vue';
export default {
name: 'job-edit-rule',
props: ['index', 'rule'],
data: function(){
return {
nodeGroups: [],
activityNodes: []
}
},
mounted: function(){
var vm = this;
this.activityNodes = this.$store.getters.dropdownNodes;
this.$rest.GET('node/groups').onsucceed(200, (resp)=>{
var groups = [];
for (var i in resp) {
groups.push({value: resp[i].id, name: resp[i].name});
}
vm.nodeGroups = groups;
}).do();
$(this.$refs.ruletip).popup();
},
methods: {
remove: function(){
this.$emit('remove', this.index);
},
change: function(key, val){
this.$emit('change', this.index, key, val);
},
changeNodeGroups: function(val){
var gids = val.trim().length === 0 ? [] : val.split(',');
this.change('gids', gids);
},
changeIncludeNodes: function(val){
var nids = val.trim().length === 0 ? [] : val.split(',');
this.change('nids', nids);
},
changeExcludeNodes: function(val){
var exclude_nids = val.trim().length === 0 ? [] : val.split(',');
this.change('exclude_nids', exclude_nids);
}
},
components: {
Dropdown
}
}
</script>