vue 显示查询、批量提交、上传文件
@{
Layout = null;
}
<!DOCTYPE html>
<script src="~/Scripts/Vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="box">
<div>
<div style="background-color: yellow; width: 100px">
<a href="/api/kam/DownloadExecl?file=1">
<h3>下载</h3>
</a>
</div>
<input id="imginput" class="imginput" type="file" accept="images/* " v-on:change="fileimg">
<input id="Button1" type="button" class="btn btn-primary" value="上传" v-on:click="upfileimg" />
</div>
<br />
<input id="Text1" type="text" style="width: 200px" placeholder="输入品牌编号……" class="form-control" v-model="txtbrandCode" />
<div style="Float: left">
<button class="btn btn-info" v-on:click="get">查询</button>
<button class="btn btn-success" v-on:click="Submit">提交</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>
<input id="Checkbox1" type="checkbox" class="ckAll" v-on:click="letsGetThisFuckingCheck" />{{isCheckAll?'取消全选':'选择全部'}}</th>
<th>品牌编号</th>
<th>品牌名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for=" item in datalist" key="item.BrandCode">
<td>
<input id="item.BrandCode" type="checkbox" :value="item.BrandCode" v-model="checkbox" v-on:click="setclickAll(item.BrandCode)" /></td>
<td>{{item.BrandCode}}</td>
<td>{{item.BrandName}}</td>
<td>
<input id="Button1" type="button" value="删除" v-on:click="del(item.BrandCode)" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#box',
data: {
url: '/api/控制器/',//访问控制器路径
txtbrandCode: "",//文本框双向绑定数据
datalist: {}, //加载数据
argumentimg: {},//上传路径
checkbox: [], //选中复选框
},
created: function () {
this.get();
},
computed: { //计算属性 基于它的依赖缓存 只有相关依赖发生改变时才会重新取值
//判断是否全部选中
isCheckAll: function () {
if (this.checkbox.length == this.datalist.length) {
return true;
}
return false;
}
},
methods: { //方法属性 在重新渲染的时候，函数总会重新调用执行
//显示
get: function () {
this.$http.get(this.url + 'JsonGet',
{
//传参数
params: {
brandid: this.txtbrandCode
}
}
).then(function (res) {
//返回结果
this.datalist = res.data.dt
}, function () {
alert('请求失败处理');
});
},
//上传
fileimg: function (argument) {
this.argumentimg = argument.target.files[0];
},
upfileimg: function () {
var files = this.argumentimg;
if (files == null || files == "") {
alert("请选择要上传的文件!");
return false;
}
var AllImgExt = ".xls|.xlsx|";
var extName = files.name.substring(files.name.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
if (AllImgExt.indexOf(extName + "|") == -1) {
ErrMsg = "该文件类型不允许上传。请上传 " + AllImgExt + " 类型的文件，当前文件类型为" + extName;
alert(ErrMsg);
return false;
}
var fileForm = new FormData();
fileForm.append("fileget", files);
this.$http.post(this.url + "JsonPost", fileForm, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then(function (res) {
alert(res.body)
}, function (res) {
alert(res.body)
})
},
//删除
del: function (id) {
//发送 post 请求
this.$http.post(this.url + 'DeletePost', { BrandCode: id }, { emulateJSON: true }).then(function (res) {
alert(res.body)
}, function (res) {
alert('请求失败处理');
console.log(res.status);
});
},
//复选框
setclickAll: function (i) {
var idx = this.checkbox.indexOf(i);
//如果已经选中了，那就取消选中，如果没有，则选中
if (idx > -1) {
this.checkbox.splice(idx, 1);
} else {
this.checkbox.push(i);
}
},
//全选和取消全选
letsGetThisFuckingCheck: function () {
if (this.isCheckAll) {
this.checkbox = []; //清空所有选中
}
else { //全选
var len = this.datalist.length;
this.checkbox = [];
for (var i = 0; i < len; i++) {
this.checkbox.push(this.datalist[i].BrandCode);
}
}
},
//批量提交数据
Submit: function () {
if (this.checkbox.length == 0) {
alert("请选择一条或多条数据提交!");
return false;
}
//发送get请求
this.$http.get(this.url + 'SubmitPost', { //传参数
params: {
checkbox: this.checkbox.toString()
}
}, { emulateJSON: true }).then(function (res) {
alert(res.body)
}, function (res) {
alert('请求失败处理');
console.log(res.status);
});
},
}
});
</script>
