<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>业务配置表</title>
<link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/index.css">
<link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/elementui-ext.css">
<script src="${webRoot}/plug-in/vue/vue.js"></script>
<script src="${webRoot}/plug-in/vue/vue-resource.js"></script>
<script src="${webRoot}/plug-in/element-ui/index.js"></script>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<script type="text/javascript">
//编写自定义JS代码
</script>
</head>
<body>
<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" action="tOperationController.do?doAdd&schemeid=${schemeid}" >
<input id="id" name="id" type="hidden" value="${tOperationPage.id }"/>
<table style="width: 600px;" cellpadding="0" cellspacing="1" class="formtable" id="scheme">
<tr hidden="hidden">
<td align="right">
<label class="Validform_label">
方案id:
</label>
</td>
<td class="value">
<input id="sId" name="sId" type="text" maxlength="32" style="width: 150px" class="inputxt" ignore="ignore" />
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">方案id</label>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
一级分类:
</label>
<input name="levelOne" hidden="hidden" v-model="levelOne">
</td>
<td class="value">
<div id="example">
<select v-model="levelOne">
<option v-for="option in arr" :value="option.code">
{{ option.name }}
</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
二级分类:
</label>
<input name="levelTwo" hidden="hidden" v-model="levelTwo">
</td>
<td class="value">
<select v-model="levelTwo">
<option v-for="option in arrTwo" :value="option.code">
{{ option.name }}
</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
三级分类:
</label>
<input name="levelThree" hidden="hidden" v-model="levelThree">
</td>
<td class="value">
<select v-model="levelThree">
<option v-for="option in arrThree" :value="option.code">
{{ option.name }}
</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
数量:
</label>
</td>
<td class="value">
<input id="num" name="num" type="text" maxlength="32" style="width: 150px" class="inputxt" ignore="ignore" />
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">数量</label>
</td>
</tr>
</table>
</t:formvalid>
<script type="text/javascript">
var vm = new Vue({
el: '#scheme',
data: {
arr: [],
arrTwo:[],
arrThree:[],
levelOne:"",
levelTwo:"",
levelThree:""
},
methods: {
init: function () {
//初始化
var a = "";
var that = this;
$.get(
"tOperationController.do?loadAllLevel&level="+a,
function (result) {
var resultjson = eval("(" +
result + ")");
that.arr = resultjson.obj;
});
},
updateLevelTwo: function () {
//初始化
var that = this;
if(this.levelOne != ""){
$.get(
"tOperationController.do?loadAllLevel&level="+that.levelOne,
function (result) {
var resultjson = eval("(" +
result + ")");
that.arrTwo = resultjson.obj;
});
}
},
updateLevelThree: function () {
//初始化
var that = this;
if(this.levelTwo != ""){
$.get(
"tOperationController.do?loadAllLevel&level="+that.levelTwo,
function (result) {
var resultjson = eval("(" +
result + ")");
that.arrThree = resultjson.obj;
});
}else{
that.arrThree = [];
}
}
},
watch: {
levelOne: function () {
this.updateLevelTwo();
this.updateLevelThree();
},
levelTwo: function () {
this.updateLevelThree();
}
}
});
vm.init();
</script>
</body>
