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": { & ...
随机推荐
- [Admin]CCTV文件分类
#建立远程服务器的文件夹映射 $pw = ConvertTo-SecureString '密码' -AsPlainText -Force $Creds = New-Object -Typename S ...
- ubuntu + subversion + apache2 设置
1.下载安装subversion,apache2 sudo apt-get updatesudo apt-get upgrade sudo apt-get install apache2sudo a ...
- shopnc编译安装IM服务器node.js
编译安装IM服务器node.js下载地址http://www.nodejs.org/download/ 选择Source Code node-v0.12.0 # ./configure # make ...
- [ZZ] HDR the bungie way
http://blog.csdn.net/toughbro/article/details/6755394 bufferencoding游戏float算法 bungie 06年,gamefest上的p ...
- Apache Spark源码走读之6 -- 存储子系统分析
欢迎转载,转载请注明出处,徽沪一郎. 楔子 Spark计算速度远胜于Hadoop的原因之一就在于中间结果是缓存在内存而不是直接写入到disk,本文尝试分析Spark中存储子系统的构成,并以数据写入和数 ...
- Nginx的fastcgi_cache
nginx的proxy_cache是缓存后端内容,而fastcgi_cache则是缓存Nginx+php的fastcgi,即缓存php动态内容. fastcgi_cache默认已包含在nginx0.7 ...
- NSQ部署
一. 简介 NSQ主要有三个主要程序和一个Web服务程序: nsqd:是守护进程,接收,缓存,并投递消息给客户端 nsqlookupd:是一个守护进程,为消费者提供运行时发现服务,来查找指定 ...
- nginx安全相关设置
Nginx默认是显示版本号,隐藏 # vim nginx.conf 在http {—}里加上server_tokens off; 如: http { ……省略 server_tokens off; h ...
- Siddhi CEP Window机制
https://docs.wso2.com/display/CEP400/SiddhiQL+Guide+3.0#SiddhiQLGuide3.0-Window https://docs.wso2.co ...
- DefaultHttpClient使用
转自:http://username2.iteye.com/blog/1664995 博客分类: java 工具类 javaio ]; } json = JSONObject.fromObject ...