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": { & ...
随机推荐
- 如何"格式化"用过的磁带,让他被新磁带机重复利用
1. 2. 套用翁磊的话: 勾上表示和之前的磁带信息进行协商(但是会失败), 不勾则表示强行擦除.
- 【转载】wireshark：no interface can be used for capturing in this system with the current configuration
转自:wireshark:no interface can be used for capturing in this system with the current configuration 通过 ...
- 10. 求N分之一序列前N项和
求N分之一序列前N项和 #include <stdio.h> int main() { int i, n; double item, sum; while (scanf("%d& ...
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [3] 首页 APP 接口开发方案 ② 读取缓存方式
以静态缓存为例. 修改 file.php line:11 去掉 path 参数(方便),加上缓存时间参数: public function cacheData($k,$v = '',$cacheTim ...
- Linux文件管理命令
cd /home 进入 '/ home' 目录' cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd - 返回上次所在的目 ...
- 用php随机生成福彩双色球号码的2种方法
不瞒您说,俺也是个双色球爱好者,经常买,但迟迟没有中过一等奖,哈哈.这里为大家介绍用php随机生成福彩双色球号码的二种方法,供朋友们学习参考.新的一年,祝大家中大奖,发大财. 方法一 复制代码代码如下 ...
- php常用Stream函数集介绍
php常用Stream函数集介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-24 本篇文章是对php中的常用Stream函数集进行了详细的分析介绍,需要的朋友参考下 ...
- powershell 批量生成文件
缘由 由于现在替省厅工作,年底了要向地市收很多文件,哪些地市已报,哪些没报,需要一目了然. 我的处理方式是收什么文件就针对该文件新建一个目录,然后在该目录下为所有地市建一个占位文件. 等收到项某市的材 ...
- cursor:pointer
.cursor_hand{ cursor:pointer; }
- 每个配置xml的含义作用
参考链接 web.xml xxx-servlet.xml(例如:dispatcher-servlet.xml)是Spring MVC里的,控制器,拦截url,转发view,对应的是controller ...