Vue 模板
界面：
html:
@using Abp.Web.Mvc.Extensions
@{
ViewBag.CurrentPage = "BasicDatas";
} @section scripts
{
@Html.IncludeScript("~/Views/Admin/BasicDatas.js")
}
<div id="main_content" class="ict-basicdatas">
<div class="main-content-wrapper">
<div class="ict-tabs">
<ul id="ulTab" class="nav nav-tabs">
<li class="active"><a href="#alloy_code" data-toggle="tab" aria-expanded="false" v-on:click='TypeChange(0)'>@L("AlloyCode")</a></li>
<li><a href="#alloy_code" data-toggle="tab" aria-expanded="false" v-on:click='TypeChange(1)'>@L("CopperSuppliers")</a></li>
<li><a href="#alloy_code" data-toggle="tab" aria-expanded="false" v-on:click='TypeChange(2)'>@L("PrdGrades")</a></li>
<li><a href="#alloy_code" data-toggle="tab" aria-expanded="false" v-on:click='TypeChange(3)'>@L("QualityProblems")</a></li>
</ul>
<div class="tab-content">
<div id="alloy_code" role="tabpanel" class="tab-pane fade in active">
<div class="tab-panel-wrapper ict-alloy-code-list w60p">
<div class="sec-header">
<div class="sec-action">
<button class="btn btn-primary" v-on:click="Add()">@L("AddAlloyCode")</button>
</div>
</div>
<table class="table ict-table">
<tbody>
<tr>
<th>@L("Idx")</th>
<th>@L("Name")</th>
<th>@L("Value")</th>
<th>默认值</th>
<th> </th> </tr>
<tr v-for="item in List">
<td class="sn-col">{{$index+1}}</td>
<td class="name-col">{{item.label}}</td>
<td class="name-col">{{item.value}}</td>
<td class="name-col">{{item.isDefault==true?'是':'否'}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
</tbody>
</table>
@*分页*@
<div class="ict-pager clearfix" v-show="TotalCount>0">
<div class="ict-pager-navs w50p tal">
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a>
<div class="ict-pager-displayer">
<span class="ict-pager-current-page">{{CurrentPage}}</span>
<span class="ict-pager-spliter">/</span>
<span class="ict-pager-total-pages">{{TotalPages}}</span>
</div>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a>
</div>
<div class="ict-pager-pagesize w50p tar">
<div class="ict-pager-pagesize-setter">
<label>@L("EntriesPerPage"):</label>
<select v-model="PageSize" v-on:change="GoToPage(CurrentPage)">
<option vale="5" selected="selected">5</option>
<option vale="25">25</option>
<option vale="50">50</option>
<option vale="100">100</option>
</select>
</div>
</div>
</div>
</div>
@*提示框*@
<form id="dvForm" role="form" class="form-validation ict-form form-horizontal" method="post" v-on:submit.prevent="">
<div id="dvDialog" class="ict-modal ict-effect">
<div class="ict-modal-content">
<div class="ict-popup-model-header f24">@L("Action")</div>
<div class="ict-popup-model-content">
<div>
@*<div class="form-group">
<label class="control-label col-lg-3">@L("Type"):</label>
<div class="col-lg-7">
<select name="Type" class="form-control" v-model="selectedItem.type">
<option value="@L("AlloyCode")">@L("AlloyCode")</option>
<option value="@L("CopperSuppliers")">@L("CopperSuppliers")</option>
<option value="@L("PrdGrades")">@L("PrdGrades")</option>
<option value="@L("QualityProblems")">@L("QualityProblems")</option>
</select>
</div>
</div>*@
<div class="form-group">
<label class="control-label col-lg-3">@L("DisplayName"):</label>
<div class="col-lg-7"><input name="label" type="text" value="" v-model="selectedItem.label" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">@L("Value"):</label>
<div class="col-lg-7"><input name="value" type="text" value="" v-model="selectedItem.value" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">默认值:</label>
<div class="col-lg-7"><input name="isdefault" type="checkbox" value="" v-model="selectedItem.isDefault" class="form-control" autocomplete="off" /></div>
</div>
</div>
</div>
<div class="ict-popup-model-footer">
<button type="reset" class="btn btn-default" onclick="ICT.Popup.HideAnimatePopup('dvDialog');">@L("Cancel")</button>
<button type="submit" class="btn btn-primary" v-on:click="Save()"><i class="fa fa-save"></i> @L("Save")</button>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div> @Html.Partial("_LeftSidebar")
js：
var defaultVue = new Vue({
el: '#main_content',
data: {
Type: "合金牌号",
List:[],
CurrentPage:1,
PageSize:10,
TotalPages:0,
TotalCount:0,
selectedItem:{
id:0,
type: this.Type,
value:"",
label:"",
isDefault:false
}
},
watch: {
'CurrentPage': function (val, oldVal) {
if (val < 1) { this.CurrentPage = 1 };
if (val >= this.TotalPages) { this.CurrentPage = this.TotalPages; }
this.GoToPage(this.CurrentPage);
},
},
ready: function () {
this.validateInit();
this.GoToPage(1);
},
methods: {
validateInit: function () {
$("#dvForm").validate({ meta: "validate" });
},
"TypeChange": function (index) {
var link = $("#ulTab").find("li:eq(" + index + ")");
var type = link.find("a").text();
var self = this;
self.Type = type;
self.GoToPage(1);
},
"GoToPage":function(CurrentPage){
var self = this;
var obj = {};
self.CurrentPage = CurrentPage;
obj.CurrentPage = CurrentPage;
obj.PageSize = self.PageSize;
obj.Type = self.Type;
//obj.num = Math.random();
abp.services.app.basicData.getData(obj).done(function (data) {
self.List = data.data;
self.TotalPages = data.totalPages;
self.TotalCount = data.totalCount;
//self.$set('List', data.data);
//self.$set('TotalPages', data.totalPages);
//self.$set('TotalCount', data.totalCount);
//console.dir(self);
//console.dir(this);
});
},
"Add":function(){
ICT.Popup.ShowAnimatePopup('dvDialog');
var self = this;
var selectedItem = {
id: 0,
type: self.Type,
value: "",
label: "",
isDefault: false
};
self.$set('selectedItem', selectedItem);
},
"Edit": function (item) {
var self = this;
self.selectedItem = item;
//self.$set('selectedItem', item);
ICT.Popup.ShowAnimatePopup('dvDialog');
},
"Delete":function(item){
var self = this;
abp.message.confirm('你确定删除该数据吗？', '', function (result) {
if (result) {
item.IsDelete = true;
abp.services.app.basicData.updateData(item).done(function (data) {
self.GoToPage(1);
abp.notify.success('删除成功！');
}).always(function () {
});
}
});
},
"Save": function () {
var dialog = $("#dvForm");
if (!dialog.valid()) return false;
var self = this;
var item = self.selectedItem;
//abp.ui.setBusy("#dvForm");
if (item.id > 0) {
abp.services.app.basicData.updateData(item).done(function (data) {
abp.notify.success('修改成功！');
self.GoToPage(1);
}).always(function () {
});
} else {
abp.services.app.basicData.createData(item).done(function (data) {
abp.notify.success('新增成功！');
self.GoToPage(1);
}).always(function () {
});
}
//abp.ui.clearBusy('#dvForm');
ICT.Popup.HideAnimatePopup('dvDialog');
}
}
});
工厂化的多tab版本
html:
@using Abp.Web.Mvc.Extensions
@{
ViewBag.CurrentPage = "BasicDatas";
} @section scripts
{
@Html.IncludeScript("~/Views/Admin/BasicDatas.js")
}
<div id="main_content" class="ict-basicdatas">
<div class="main-content-wrapper">
<div class="ict-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#alloy_code" data-toggle="tab" aria-expanded="false">@L("AlloyCode")</a></li>
<li><a href="#copper_suppliers" data-toggle="tab" aria-expanded="false">@L("CopperSuppliers")</a></li>
<li><a href="#product_grades" data-toggle="tab" aria-expanded="false">@L("PrdGrades")</a></li>
<li><a href="#quality_problems" data-toggle="tab" aria-expanded="false">@L("QualityProblems")</a></li>
</ul>
<div class="tab-content">
<div id="alloy_code" role="tabpanel" class="tab-pane fade in active">
<div class="tab-panel-wrapper ict-alloy-code-list w60p">
<div class="sec-header">
<div class="sec-action">
<button class="btn btn-primary" v-on:click="Add()">@L("AddAlloyCode")</button>
</div>
</div>
<table class="table ict-table">
<tbody>
<tr>
<th>@L("Idx")</th>
<th>@L("Name")</th>
<th>@L("Value")</th>
<th>默认值</th>
<th> </th> </tr>
<tr v-for="item in List">
<td class="sn-col">{{$index+1}}</td>
<td class="name-col">{{item.label}}</td>
<td class="name-col">{{item.value}}</td>
<td class="name-col">{{item.isDefault==true?'是':'否'}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
</tbody>
</table>
@*分页*@
<div class="ict-pager clearfix" v-show="TotalCount>0">
<div class="ict-pager-navs w50p tal">
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a>
<div class="ict-pager-displayer">
<span class="ict-pager-current-page">{{CurrentPage}}</span>
<span class="ict-pager-spliter">/</span>
<span class="ict-pager-total-pages">{{TotalPages}}</span>
</div>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a>
</div>
<div class="ict-pager-pagesize w50p tar">
<div class="ict-pager-pagesize-setter">
<label>@L("EntriesPerPage"):</label>
<select v-model="PageSize" v-on:change="GoToPage(CurrentPage)">
<option vale="5" selected="selected">5</option>
<option vale="25">25</option>
<option vale="50">50</option>
<option vale="100">100</option>
</select>
</div>
</div>
</div>
</div>
@*提示框*@
<form id="dvForm" role="form" class="form-validation ict-form form-horizontal" method="post" v-on:submit.prevent="">
<div id="dvDialog" class="ict-modal ict-effect">
<div class="ict-modal-content">
<div class="ict-popup-model-header f24">@L("Action")</div>
<div class="ict-popup-model-content">
<div>
@*<div class="form-group">
<label class="control-label col-lg-3">@L("Type"):</label>
<div class="col-lg-7">
<select name="Type" class="form-control" v-model="selectedItem.type">
<option value="@L("AlloyCode")">@L("AlloyCode")</option>
<option value="@L("CopperSuppliers")">@L("CopperSuppliers")</option>
<option value="@L("PrdGrades")">@L("PrdGrades")</option>
<option value="@L("QualityProblems")">@L("QualityProblems")</option>
</select>
</div>
</div>*@
<div class="form-group">
<label class="control-label col-lg-3">@L("DisplayName"):</label>
<div class="col-lg-7"><input name="label" type="text" value="" v-model="selectedItem.label" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">@L("Value"):</label>
<div class="col-lg-7"><input name="value" type="text" value="" v-model="selectedItem.value" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">默认值:</label>
<div class="col-lg-7"><input name="isdefault" type="checkbox" value="" v-model="selectedItem.isDefault" class="form-control" autocomplete="off" /></div>
</div>
</div>
</div>
<div class="ict-popup-model-footer">
<button type="reset" class="btn btn-default" onclick="ICT.Popup.HideAnimatePopup('dvDialog');">@L("Cancel")</button>
<button type="submit" class="btn btn-primary" v-on:click="Save()"><i class="fa fa-save"></i> @L("Save")</button>
</div>
</div>
</div>
</form>
</div> <div id="copper_suppliers" role="tabpanel" class="tab-pane fade in">
<div class="tab-panel-wrapper ict-supplier-list w60p">
<div class="sec-header">
<div class="sec-action">
<button class="btn btn-primary" v-on:click="Add()">@L("AddSupplier")</button>
</div>
</div>
<table class="table ict-table">
<tbody>
<tr>
<th>@L("Idx")</th>
<th>@L("Name")</th>
<th>@L("Value")</th>
<th>默认值</th>
<th> </th>
</tr>
<tr v-for="item in List">
<td class="sn-col">{{$index+1}}</td>
<td class="name-col">{{item.label}}</td>
<td class="name-col">{{item.value}}</td>
<td class="name-col">{{item.isDefault==true?'是':'否'}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
</tbody>
</table>
@*分页*@
<div class="ict-pager clearfix" v-show="TotalCount>0">
<div class="ict-pager-navs w50p tal">
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a>
<div class="ict-pager-displayer">
<span class="ict-pager-current-page">{{CurrentPage}}</span>
<span class="ict-pager-spliter">/</span>
<span class="ict-pager-total-pages">{{TotalPages}}</span>
</div>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a>
</div>
<div class="ict-pager-pagesize w50p tar">
<div class="ict-pager-pagesize-setter">
<label>@L("EntriesPerPage"):</label>
<select v-model="PageSize" v-on:change="GoToPage(CurrentPage)">
<option vale="15" selected="selected">15</option>
<option vale="25">25</option>
<option vale="50">50</option>
<option vale="100">100</option>
</select>
</div>
</div>
</div>
</div>
@*提示框*@
<form id="dvForm2" role="form" class="form-validation ict-form form-horizontal" method="post" v-on:submit.prevent="">
<div id="dvDialog2" class="ict-modal ict-effect">
<div class="ict-modal-content">
<div class="ict-popup-model-header f24">@L("Action")</div>
<div class="ict-popup-model-content">
<div>
<div class="form-group">
<label class="control-label col-lg-3">@L("DisplayName"):</label>
<div class="col-lg-7"><input name="label" type="text" value="" v-model="selectedItem.label" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">@L("Value"):</label>
<div class="col-lg-7"><input name="value" type="text" value="" v-model="selectedItem.value" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">默认值:</label>
<div class="col-lg-7"><input name="isdefault" type="checkbox" value="" v-model="selectedItem.isDefault" class="form-control" autocomplete="off" /></div>
</div>
</div>
</div>
<div class="ict-popup-model-footer">
<button type="reset" class="btn btn-default" onclick="ICT.Popup.HideAnimatePopup('dvDialog2');">@L("Cancel")</button>
<button type="submit" class="btn btn-primary" v-on:click="Save()"><i class="fa fa-save"></i> @L("Save")</button>
</div>
</div>
</div>
</form>
</div> <div id="product_grades" role="tabpanel" class="tab-pane fade in">
<div class="tab-panel-wrapper ict-prdgrade-list w60p">
<div class="sec-header">
<div class="sec-action">
<button class="btn btn-primary" v-on:click="Add()">@L("AddPrdGrade")</button>
</div>
</div>
<table class="table ict-table">
<tbody>
<tr>
<th>@L("Idx")</th>
<th>@L("Name")</th>
<th>@L("Value")</th>
<th>默认值</th>
<th> </th>
</tr>
<tr v-for="item in List">
<td class="sn-col">{{$index+1}}</td>
<td class="name-col">{{item.label}}</td>
<td class="name-col">{{item.value}}</td>
<td class="name-col">{{item.isDefault==true?'是':'否'}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
</tbody>
</table>
@*分页*@
<div class="ict-pager clearfix" v-show="TotalCount>0">
<div class="ict-pager-navs w50p tal">
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a>
<div class="ict-pager-displayer">
<span class="ict-pager-current-page">{{CurrentPage}}</span>
<span class="ict-pager-spliter">/</span>
<span class="ict-pager-total-pages">{{TotalPages}}</span>
</div>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a>
</div>
<div class="ict-pager-pagesize w50p tar">
<div class="ict-pager-pagesize-setter">
<label>@L("EntriesPerPage"):</label>
<select v-model="PageSize" v-on:change="GoToPage(CurrentPage)">
<option vale="15" selected="selected">15</option>
<option vale="25">25</option>
<option vale="50">50</option>
<option vale="100">100</option>
</select>
</div>
</div>
</div>
</div>
@*提示框*@
<form id="dvForm3" role="form" class="form-validation ict-form form-horizontal" method="post" v-on:submit.prevent="">
<div id="dvDialog3" class="ict-modal ict-effect">
<div class="ict-modal-content">
<div class="ict-popup-model-header f24">@L("Action")</div>
<div class="ict-popup-model-content">
<div>
<div class="form-group">
<label class="control-label col-lg-3">@L("DisplayName"):</label>
<div class="col-lg-7"><input name="label" type="text" value="" v-model="selectedItem.label" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">@L("Value"):</label>
<div class="col-lg-7"><input name="value" type="text" value="" v-model="selectedItem.value" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">默认值:</label>
<div class="col-lg-7"><input name="isdefault" type="checkbox" value="" v-model="selectedItem.isDefault" class="form-control" autocomplete="off" /></div>
</div>
</div>
</div>
<div class="ict-popup-model-footer">
<button type="reset" class="btn btn-default" onclick="ICT.Popup.HideAnimatePopup('dvDialog3');">@L("Cancel")</button>
<button type="submit" class="btn btn-primary" v-on:click="Save()"><i class="fa fa-save"></i> @L("Save")</button>
</div>
</div>
</div>
</form>
</div> <div id="quality_problems" role="tabpanel" class="tab-pane fade in">
<div class="tab-panel-wrapper ict-problem-list w60p">
<div class="sec-header">
<div class="sec-action">
<button class="btn btn-primary" v-on:click="Add()">@L("AddQualityProblem")</button>
</div>
</div>
<table class="table ict-table">
<tbody>
<tr>
<th>@L("Idx")</th>
<th>@L("Name")</th>
<th>@L("Value")</th>
<th>默认值</th>
<th> </th>
</tr>
<tr v-for="item in List">
<td class="sn-col">{{$index+1}}</td>
<td class="name-col">{{item.label}}</td>
<td class="name-col">{{item.value}}</td>
<td class="name-col">{{item.isDefault==true?'是':'否'}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
</tbody>
</table>
@*分页*@
<div class="ict-pager clearfix" v-show="TotalCount>0">
<div class="ict-pager-navs w50p tal">
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-first {{CurrentPage==1?'disabled':''}}" v-on:click="CurrentPage=1">@L("PageFirst")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-prev {{CurrentPage<2?'disabled':''}}" v-on:click="CurrentPage=CurrentPage-1">@L("PagePrev")</a>
<div class="ict-pager-displayer">
<span class="ict-pager-current-page">{{CurrentPage}}</span>
<span class="ict-pager-spliter">/</span>
<span class="ict-pager-total-pages">{{TotalPages}}</span>
</div>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-next {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=CurrentPage+1">@L("PageNext")</a>
<a href="javascript:;" class="ict-pager-nav ict-pager-nav-last {{CurrentPage>TotalPages-1?'disabled':''}}" v-on:click="CurrentPage=TotalPages">@L("PageLast")</a>
</div>
<div class="ict-pager-pagesize w50p tar">
<div class="ict-pager-pagesize-setter">
<label>@L("EntriesPerPage"):</label>
<select v-model="PageSize" v-on:change="GoToPage(CurrentPage)">
<option vale="15" selected="selected">15</option>
<option vale="25">25</option>
<option vale="50">50</option>
<option vale="100">100</option>
</select>
</div>
</div>
</div>
</div>
@*提示框*@
<form id="dvForm4" role="form" class="form-validation ict-form form-horizontal" method="post" v-on:submit.prevent="">
<div id="dvDialog4" class="ict-modal ict-effect">
<div class="ict-modal-content">
<div class="ict-popup-model-header f24">@L("Action")</div>
<div class="ict-popup-model-content">
<div>
<div class="form-group">
<label class="control-label col-lg-3">@L("DisplayName"):</label>
<div class="col-lg-7"><input name="label" type="text" value="" v-model="selectedItem.label" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">@L("Value"):</label>
<div class="col-lg-7"><input name="value" type="text" value="" v-model="selectedItem.value" class="form-control {validate: { required :true} }" autocomplete="off" /></div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">默认值:</label>
<div class="col-lg-7"><input name="isdefault" type="checkbox" value="" v-model="selectedItem.isDefault" class="form-control" autocomplete="off" /></div>
</div>
</div>
</div>
<div class="ict-popup-model-footer">
<button type="reset" class="btn btn-default" onclick="ICT.Popup.HideAnimatePopup('dvDialog4');">@L("Cancel")</button>
<button type="submit" class="btn btn-primary" v-on:click="Save()"><i class="fa fa-save"></i> @L("Save")</button>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div> @Html.Partial("_LeftSidebar")
js：
var defaultVue = new Vue({
el: '#alloy_code',
data: {
Type: "合金牌号",
List:[],
CurrentPage:1,
PageSize:10,
TotalPages:0,
TotalCount:0,
selectedItem:{
id:0,
type: this.Type,
value:"",
label:"",
isDefault:false
}
},
watch: {
'CurrentPage': function (val, oldVal) {
if (val < 1) { this.CurrentPage = 1 };
if (val >= this.TotalPages) { this.CurrentPage = this.TotalPages; }
this.GoToPage(this.CurrentPage);
},
},
ready: function () {
this.validateInit();
this.GoToPage(1);
},
methods: {
validateInit: function () {
$("#dvForm").validate({ meta: "validate" });
},
"GoToPage":function(CurrentPage){
var self = this;
var obj = {};
self.CurrentPage = CurrentPage;
obj.CurrentPage = CurrentPage;
obj.PageSize = self.PageSize;
obj.Type = self.Type;
//obj.num = Math.random();
abp.services.app.basicData.getData(obj).done(function (data) {
self.List = data.data;
self.TotalPages = data.totalPages;
self.TotalCount = data.totalCount;
//self.$set('List', data.data);
//self.$set('TotalPages', data.totalPages);
//self.$set('TotalCount', data.totalCount);
//console.dir(self);
//console.dir(this);
});
},
"Add":function(){
ICT.Popup.ShowAnimatePopup('dvDialog');
var self = this;
var selectedItem = {
id: 0,
type: self.Type,
value: "",
label: "",
isDefault: false
};
self.$set('selectedItem', selectedItem);
},
"Edit": function (item) {
var self = this;
self.selectedItem = item;
//self.$set('selectedItem', item);
ICT.Popup.ShowAnimatePopup('dvDialog');
},
"Delete":function(item){
var self = this;
abp.message.confirm('你确定删除该数据吗？', '', function (result) {
if (result) {
item.IsDelete = true;
abp.services.app.basicData.updateData(item).done(function (data) {
self.List.$remove(item);
abp.notify.success('删除成功！');
}).always(function () {
});
}
});
},
"Save": function () {
var dialog = $("#dvForm");
if (!dialog.valid()) return false;
var self = this;
var item = self.selectedItem;
//abp.ui.setBusy("#dvForm");
if (item.id > 0) {
abp.services.app.basicData.updateData(item).done(function (data) {
abp.notify.success('修改成功！');
self.GoToPage(1);
}).always(function () {
});
} else {
abp.services.app.basicData.createData(item).done(function (data) {
abp.notify.success('新增成功！');
self.GoToPage(1);
}).always(function () {
});
}
//abp.ui.clearBusy('#dvForm');
ICT.Popup.HideAnimatePopup('dvDialog');
}
}
});
//====================================铜材供应商==============================================
var defaultVue2 = new Vue({
el: '#copper_suppliers',
data: {
Type: "铜材供应商",
List: [],
CurrentPage: 1,
PageSize: 10,
TotalPages: 0,
TotalCount: 0,
selectedItem: {
id: 0,
type: this.Type,
value: "",
label: "",
isDefault: false
}
},
watch: {
'CurrentPage': function (val, oldVal) {
if (val < 1) { this.CurrentPage = 1 };
if (val >= this.TotalPages) { this.CurrentPage = this.TotalPages; }
this.GoToPage(this.CurrentPage);
},
},
ready: function () {
this.validateInit();
this.GoToPage(1);
},
methods: {
validateInit: function () {
$("#dvForm2").validate({ meta: "validate" });
},
"GoToPage": function (CurrentPage) {
var self = this;
var obj = {};
self.CurrentPage = CurrentPage;
obj.CurrentPage = CurrentPage;
obj.PageSize = self.PageSize;
obj.Type = self.Type;
//obj.num = Math.random();
abp.services.app.basicData.getData(obj).done(function (data) {
self.List = data.data;
self.TotalPages = data.totalPages;
self.TotalCount = data.totalCount;
});
},
"Add": function () {
ICT.Popup.ShowAnimatePopup('dvDialog2');
var self = this;
var selectedItem = {
id: 0,
type: self.Type,
value: "",
label: "",
isDefault: false
};
self.$set('selectedItem', selectedItem);
},
"Edit": function (item) {
var self = this;
self.selectedItem = item;
ICT.Popup.ShowAnimatePopup('dvDialog2');
},
"Delete": function (item) {
var self = this;
abp.message.confirm('你确定删除该数据吗？', '', function (result) {
if (result) {
item.IsDelete = true;
abp.services.app.basicData.updateData(item).done(function (data) {
self.List.$remove(item);
abp.notify.success('删除成功！');
}).always(function () {
});
}
});
},
"Save": function () {
var dialog = $("#dvForm2");
if (!dialog.valid()) return false;
var self = this;
var item = self.selectedItem;
if (item.id > 0) {
abp.services.app.basicData.updateData(item).done(function (data) {
abp.notify.success('修改成功！');
self.GoToPage(1);
}).always(function () {
});
} else {
abp.services.app.basicData.createData(item).done(function (data) {
abp.notify.success('新增成功！');
self.GoToPage(1);
}).always(function () {
});
}
ICT.Popup.HideAnimatePopup('dvDialog2');
}
}
});
//====================================产品等级==============================================
var defaultVue3 = new Vue({
el: '#product_grades',
data: {
Type: "产品等级",
List: [],
CurrentPage: 1,
PageSize: 10,
TotalPages: 0,
TotalCount: 0,
selectedItem: {
id: 0,
type: this.Type,
value: "",
label: "",
isDefault: false
}
},
watch: {
'CurrentPage': function (val, oldVal) {
if (val < 1) { this.CurrentPage = 1 };
if (val >= this.TotalPages) { this.CurrentPage = this.TotalPages; }
this.GoToPage(this.CurrentPage);
},
},
ready: function () {
this.validateInit();
this.GoToPage(1);
},
methods: {
validateInit: function () {
$("#dvForm3").validate({ meta: "validate" });
},
"GoToPage": function (CurrentPage) {
var self = this;
var obj = {};
self.CurrentPage = CurrentPage;
obj.CurrentPage = CurrentPage;
obj.PageSize = self.PageSize;
obj.Type = self.Type;
//obj.num = Math.random();
abp.services.app.basicData.getData(obj).done(function (data) {
self.List = data.data;
self.TotalPages = data.totalPages;
self.TotalCount = data.totalCount;
});
},
"Add": function () {
ICT.Popup.ShowAnimatePopup('dvDialog3');
var self = this;
var selectedItem = {
id: 0,
type: self.Type,
value: "",
label: "",
isDefault: false
};
self.$set('selectedItem', selectedItem);
},
"Edit": function (item) {
var self = this;
self.selectedItem = item;
ICT.Popup.ShowAnimatePopup('dvDialog3');
},
"Delete": function (item) {
var self = this;
abp.message.confirm('你确定删除该数据吗？', '', function (result) {
if (result) {
item.IsDelete = true;
abp.services.app.basicData.updateData(item).done(function (data) {
self.List.$remove(item);
abp.notify.success('删除成功！');
}).always(function () {
});
}
});
},
"Save": function () {
var dialog = $("#dvForm3");
if (!dialog.valid()) return false;
var self = this;
var item = self.selectedItem;
if (item.id > 0) {
abp.services.app.basicData.updateData(item).done(function (data) {
abp.notify.success('修改成功！');
self.GoToPage(1);
}).always(function () {
});
} else {
abp.services.app.basicData.createData(item).done(function (data) {
abp.notify.success('新增成功！');
self.GoToPage(1);
}).always(function () {
});
}
ICT.Popup.HideAnimatePopup('dvDialog3');
}
}
});
//====================================质量问题==============================================
var defaultVue4 = new Vue({
el: '#quality_problems',
data: {
Type: "质量问题",
List: [],
CurrentPage: 1,
PageSize: 10,
TotalPages: 0,
TotalCount: 0,
selectedItem: {
id: 0,
type: this.Type,
value: "",
label: "",
isDefault: false
}
},
watch: {
'CurrentPage': function (val, oldVal) {
if (val < 1) { this.CurrentPage = 1 };
if (val >= this.TotalPages) { this.CurrentPage = this.TotalPages; }
this.GoToPage(this.CurrentPage);
},
},
ready: function () {
this.validateInit();
this.GoToPage(1);
},
methods: {
validateInit: function () {
$("#dvForm4").validate({ meta: "validate" });
},
"GoToPage": function (CurrentPage) {
var self = this;
var obj = {};
self.CurrentPage = CurrentPage;
obj.CurrentPage = CurrentPage;
obj.PageSize = self.PageSize;
obj.Type = self.Type;
//obj.num = Math.random();
abp.services.app.basicData.getData(obj).done(function (data) {
self.List = data.data;
self.TotalPages = data.totalPages;
self.TotalCount = data.totalCount;
});
},
"Add": function () {
ICT.Popup.ShowAnimatePopup('dvDialog4');
var self = this;
var selectedItem = {
id: 0,
type: self.Type,
value: "",
label: "",
isDefault: false
};
self.$set('selectedItem', selectedItem);
},
"Edit": function (item) {
var self = this;
self.selectedItem = item;
ICT.Popup.ShowAnimatePopup('dvDialog4');
},
"Delete": function (item) {
var self = this;
abp.message.confirm('你确定删除该数据吗？', '', function (result) {
if (result) {
item.IsDelete = true;
abp.services.app.basicData.updateData(item).done(function (data) {
self.List.$remove(item);
abp.notify.success('删除成功！');
}).always(function () {
});
}
});
},
"Save": function () {
var dialog = $("#dvForm4");
if (!dialog.valid()) return false;
var self = this;
var item = self.selectedItem;
if (item.id > 0) {
abp.services.app.basicData.updateData(item).done(function (data) {
abp.notify.success('修改成功！');
self.GoToPage(1);
}).always(function () {
});
} else {
abp.services.app.basicData.createData(item).done(function (data) {
abp.notify.success('新增成功！');
self.GoToPage(1);
}).always(function () {
});
}
ICT.Popup.HideAnimatePopup('dvDialog4');
}
}
});
日期列表显示
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
"H+": this.getHours(),
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"f": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
Vue.filter("format", function (value) {
var date = new Date(value);
return date.Format("yyyy-MM-dd");
});
html:
<tr v-for="item in List">
<td>{{$index+1}}</td>
<td>{{item.code}}</td>
<td>{{item.supplierName}}</td>
<td>{{item.copperTypeName}}</td>
<td>{{item.weight}}</td>
<td>{{item.inStockWeight}}</td>
<td>{{item.entryDate|format'}}</td>
<td>{{item.userName}}</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Edit(item)"><span class="ict-editicon dib"></span></a>
</td>
<td class="action-col">
<a href="javascript:void(0);" v-on:click="Delete(item)"><span class="ict-deleteicon dib"></span></a>
</td>
</tr>
http://www.cnblogs.com/lily1010/p/5834187.html
Vue 模板的更多相关文章
- sublime SublimeTmpl 添加vue模板
sublime2安装时候报错在control中加下面的代码 重新启动,可以进行安装 import urllib2,os; pf='Package Control.sublime-package'; i ...
- Vue模板内容
前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...
- Vue模板逻辑
前面的话 上一篇介绍了Vue的模板内容,而对于一般的模板引擎来说,除了模板内容,还包括模板逻辑.常用的模板逻辑包括条件和循环.本文将详细介绍Vue模板逻辑 条件渲染 在Vue中,实现条件逻辑依靠条件指 ...
- （英文版）VScode一键生成.vue模板
1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
- webpack4.x加vue模板文件简单还原vue-cli
1.首先 npm init -y 创建一个项目 2.安装vue npm install vue --save 3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack- ...
- vs code 快速生成vue 模板
vs code 快速生成vue 模板 1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择.(或 文件>首选项>用户代码片断里面,输入 vue.json ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- vsc 自定义快速生成vue模板
1.安装vscode 官网地址:https://code.visualstudio.com/ 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加 ...
- vscode自定义vue模板代码
File--->preference -->user Snippets-->搜索html.json 编辑 加入以下自定义代码内容 "Html5-Vue": { & ...
随机推荐
- 通过Sysprep封装系统
<?xml version="1.0" encoding="utf-8"?> <unattend xmlns="urn:schema ...
- debug阶段工作期站立会议2（进度推进）
组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...
- 词频统计（WEB版）
通过点击浏览按钮输入文件: 点击查询按钮后返回结果: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" ...
- 连连看的设计与实现——四人小组项目（NABCD）
小组名称:天天向上 成员:王森.张政,张金生,栾骄阳 题目:连连看游戏 NABCD N(需求) 游戏最大的乐趣在于玩法,我们要想在众多的连连看游戏当中脱颖而出,就需要增加更多富有乐趣.吸引用户的玩法. ...
- Java实战equals()与hashCode()
一.equals()方法详解 equals()方法在object类中定义如下: 代码 public boolean equals(Object obj) { return (this == obj); ...
- HDU 4825 Xor Sum（经典01字典树+贪心）
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Total ...
- FZU 1025 状压dp 摆砖块
云峰菌曾经提到过的黄老师过去讲课时的摆砖块 那时百度了一下题目 想了想并没有想好怎么dp 就扔了 这两天想补动态规划知识 就去FZU做专题 然后又碰到了 就认真的想并且去做了 dp思想都在代码注释里 ...
- 程序设计第二次作业<1>
面向对象程序设计第二次作业<1> Github 链接:https://github.com/Wasdns/object-oriented 题目: <1>第一次尝试 我立马认识到 ...
- Javascript 笔记与总结（2-4）Javascript 内置对象
① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...
- json解析json字符串时候，数组必须对应jsonObjectArray，不能对应JsonObject。否则会解析错误。
json第三方解析json字符串时候,json数组必须对应jsonObjectArray,不能对应JsonObject.->只要是[]开头的都是json数组字符串,就要用jsonArray解析 ...