Commit d3f6cbc8 authored by liujiangnan's avatar liujiangnan

feat: 表单提交

parent 71506da2
......@@ -8,12 +8,27 @@
<script type="text/javascript" src="../lib/js/jquery-1.12.3.min.js"></script>
<link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="text/javascript" src="../lib/js/vue.min.js"></script>
<!-- 引入样式 -->
<link href="../lib/element-ui/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="../lib/element-ui/index.js"></script>
</head>
<body>
<div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" />
<input id="save" type="button" value="保存" >
<el-form ref="form" label-width="80px">
<el-form-item label="公共教材">
<el-checkbox v-for="row in rows" v-model="row.checked">{{row.text_en}}</el-checkbox>
</el-form-item>
<el-form-item label="FAF教材">
<el-checkbox v-for="row in fafRows" v-model="row.checked">{{row.text_en}}</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script src="./index.js"></script>
......
// 对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "dg_dictation_config";
/*
window.courseware.getData(callback,key); //用于获取数据
window.courseware.setData(data,callback,key); //用于存储数据
var uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
var uploadData = window.courseware.uploadData(); //上传文件必须要的参数
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test";
$(function(){
window.courseware.getData(function(data){
//数据加载完,才算页面加载完成
//获取数据
if(data&&data.test){
$("[name='test']").val(data.test);
}
//绑定点击事件
$('#save').on('click',function(){
var test = $("[name='test']").val();
//保存新增或修改的数据
window.courseware.setData({test: test},function(){
new Vue({
el: '.edit-data',
created() {
window.courseware.getData((checkedArr) => {
//数据加载完,才算页面加载完成
//获取数据
console.log('-----------------');
console.log(checkedArr);
console.log('-----------------');
this.loadRows(checkedArr||[]);
this.loadFaf(checkedArr||[]);
},key);
},
data() {
return {
rows: [],
fafRows: [],
fafId: 4258, // FAF 教材
}
},
methods: {
loadRows(checkedArr) {
$.ajax({
type: "GET",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url: `${this.compDomain}api/dige/non/v1/gradetree/list`,
success: (xhr) => {
},
error: (xhr, e) => {
},
complete: (xhr) => {
this.rows = xhr.responseJSON.rows.filter(item => item.id != 4258).map(item => {
return {...item, checked: checkedArr.includes(item.id)}
});
}
});
},
loadFaf (checkedArr) {
$.ajax({
type: "GET",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url: `${this.compDomain}api/dige/non/v1/gradetree/list?pid=${this.fafId}`,
success: (xhr) => {
},
error: (xhr, e) => {
},
complete: (xhr) => {
this.fafRows = xhr.responseJSON.rows.map(item => {
return {...item, checked: checkedArr.includes(item.id)}
});
}
});
},
save() {
const rows = [];
for (let i = 0; i < this.rows.length; i++) {
const row = this.rows[i];
if(row.checked) {
rows.push(row.id);
}
}
for (let i = 0; i < this.fafRows.length; i++) {
const row = this.fafRows[i];
if(row.checked) {
rows.push(row.id);
}
}
// 保存新增或修改的数据
window.courseware.setData(rows, () => {
//保存数据也是异步的
alert("保存成功!");
},key);
})
},key);
})
\ No newline at end of file
this.$message.success("保存成功");
},key);
}
},
computed: {
compDomain: function () {
const protocolStr = document.location.protocol;
if (document.domain.indexOf("staging-") < 0 && document.domain != 'localhost') {
return `${protocolStr}//openapi.iteachabc.com/`;
}
return `${protocolStr}//staging-openapi.iteachabc.com/`;
},
}
});
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment