<!DOCTYPE html>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>任务首页</title>
|
<meta name="author" content="小柒2012" />
|
<meta name="site" content="https://blog.52itstyle.com" />
|
<link rel="stylesheet" th:href="@{/iview/iview.css}">
|
<script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
|
<script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
|
<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
|
<script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
|
<style type="text/css">
|
[v-cloak] {
|
display: none;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" v-cloak style="margin: 30px">
|
<template>
|
<i-form v-ref:form-quartz :model="formQuartz" :rules="ruleValidate" :label-width="80">
|
<Form-item label="主键" prop="id" style="display: none">
|
<i-input v-model="formQuartz.id" :value.sync="formQuartz.id" ></i-input>
|
</Form-item>
|
<Form-item label="系统名称" prop="sysName">
|
<i-input v-model="formQuartz.sysName" :value.sync="formQuartz.sysName" placeholder="请输入系统名称"></i-input>
|
</Form-item>
|
<Form-item label="分发地址" prop="address" >
|
<i-input v-model="formQuartz.address" :value.sync="formQuartz.address" placeholder="请输入分发地址"></i-input>
|
</Form-item>
|
<Form-item label="接口描述" prop="description">
|
<i-input v-model="formQuartz.description" :value.sync="formQuartz.description" placeholder="请输入接口描述"></i-input>
|
</Form-item>
|
<Form-item label="关联接口" prop="association">
|
<select v-model="formQuartz.association" class="ivu-input" :default-value="formQuartz.association">
|
<option
|
v-for="(item,index) in associationList"
|
:label="item.jobName"
|
:value="item.jobName">
|
</option>
|
</select>
|
</Form-item>
|
<Form-item label="是否启用" prop="isEnable">
|
<select v-model="formQuartz.isEnable" class="ivu-input" :default-value="formQuartz.isEnable">
|
<option value="启用">启用</option>
|
<option value="不启用">不启用</option>
|
</select>
|
</Form-item>
|
|
<Form-item label="操作时间" prop="cronExpression">
|
<input type="date" v-model="formQuartz.cronExpression" :value.sync="formQuartz.cronExpression" class="ivu-input">
|
</Form-item>
|
</i-form>
|
</template>
|
</div>
|
<script type="text/javascript">
|
function dateToString(date) {
|
return (
|
date.getFullYear() +
|
'-' +
|
pad(date.getMonth() + 1) +
|
'-' +
|
pad(date.getDate())
|
)
|
}
|
function pad(n, s = String(n)) {
|
return s.length < 2 ? `0${s}` : s
|
}
|
var vm = new Vue({
|
el : '#app',
|
data : {
|
associationList:[],
|
formQuartz: {
|
id : '',
|
sysName : '',
|
address : '',
|
description : '',
|
association : '',
|
isEnable : '',
|
cronExpression:dateToString(new Date())
|
},
|
ruleValidate: {
|
sysName: [
|
{ required: true, message: '系统名称不能为空', trigger: 'blur' }
|
],
|
address: [
|
{ required: true, message: '分发地址不能为空', trigger: 'blur' }
|
],
|
description: [
|
{ required: true, message: '接口描述不能为空', trigger: 'blur' }
|
],
|
association: [
|
{ required: true, message: '关联接口不能为空', trigger: 'blur' }
|
],
|
isEnable: [
|
{ required: true, message: '是否启用不能为空', trigger: 'blur' }
|
],
|
cronExpression: [
|
{ required: true, message: '操作时间不能为空', trigger: 'blur' }
|
]
|
}
|
},
|
|
methods : {
|
//新建任务(略简单)
|
acceptClick : function(){
|
//Validate不起作用MD
|
var quartz = vm.formQuartz;
|
if(vm.formQuartz.sysName==""||vm.formQuartz.address==""||vm.formQuartz.description==""
|
||vm.formQuartz.association==""||vm.formQuartz.isEnable==""||vm.formQuartz.cronExpression==""){
|
alert("请输入以上完整信息");
|
return;
|
}
|
$.ajax({
|
url:"../distribution/add",
|
type:"post",
|
data:quartz,
|
success: function(result) {
|
if(result.code=="0"){
|
window.parent.location.reload();
|
}else{
|
vm.$Notice.error({
|
desc: '系统异常'
|
});
|
}
|
}
|
});
|
},
|
//查询主数据接口
|
getMdmInterfaces(){
|
$.ajax({
|
url:"../job/all",
|
type:"post",
|
success: function(result) {
|
vm.associationList = result.data;
|
console.log(vm.associationList);
|
}
|
|
});
|
}
|
},
|
mounted() {
|
//查询主数据接口
|
this.getMdmInterfaces();
|
},
|
created : function() {
|
|
}
|
})
|
|
</script>
|
</body>
|
</html>
|
