费项规则

sa-view/tb-fee-item/tb-fee-item-add.html

@@ -29,6 +29,7 @@
 			.rows .row {
 				float: left;
 				width: 33.3333%;
+				min-width: 25rem;
 			}
 
 			.rows .row .out {
@@ -59,31 +60,42 @@
 							</el-col>
 						</el-row>
 						<div>
-							<div><el-button type="primary" icon="el-icon-plus" @click="addRules">添加规则</el-button></div>
+							<div><el-button type="primary" icon="el-icon-plus" @click="addRules">收费规则</el-button></div>
 						</div>
 						<div class="rows">
-							<div v-for="(rule,index) in rules" class="row">
-								<div class="out">
-									<el-divider content-position="left">规则{{index+1}}
-										<i class="el-icon-delete" style="color: red;margin-left: 20px;cursor: pointer;"
-											@click="delRules(rule.index)"></i>
-									</el-divider>
-									<div class="c-item br">
-										<label class="c-label"><label style="color: red">*</label>选择品目：</label>
-										<el-select multiple v-model="rule.goodsCodes" placeholder="请选择" filterable
-											size="mini">
-											<el-option v-for="(item,index) in goodsList" :key="index" :label="item.name"
-												:value="item.code"> </el-option>
-										</el-select>
+							<el-form ref="dynamicValidateForm" :model="form" label-width="100px" class="demo-dynamic">
+								<div v-for="(rule,index) in form.rules" class="row">
+									<div class="out">
+										<el-divider content-position="left">规则{{index+1}}
+											<i class="el-icon-delete"
+												style="color: red;margin-left: 20px;cursor: pointer;"
+												@click="delRules(rule.index)"></i>
+										</el-divider>
+										<div class="c-item br">
+											<el-form-item :prop="'rules.' + index + '.goodsCodes'" label="选择品目:" :rules="[
+											  { required: true, message: '请输入选择品目', trigger: 'blur' }
+											]">
+												<el-select multiple v-model="rule.goodsCodes" placeholder="请选择"
+													filterable size="mini">
+													<el-option v-for="(item,index) in goodsList" :key="index"
+														:label="item.name" :value="item.code"> </el-option>
+												</el-select>
+												<label @click="addAllGoods(rule)" v-if="rule.goodsCodes.length==0"
+													style="font-size: 10px;cursor: pointer;padding: 5px 5px; color: white;background-color: #1890ff;border-radius: 2px;">全部</label>
+												<label @click="rule.goodsCodes=[]" v-else
+													style="font-size: 10px;cursor: pointer;padding: 5px 5px; color: white;background-color: red;border-radius: 2px;">清除</label>
+
+											</el-form-item>
+										</div>
+										<sa-item type="enum" name="类型" v-model="rule.feeType"
+											:jv="{2: '固定金额',1: '按交易额', 3:'按吨收费'}" jtype="3" br></sa-item>
+										<sa-item type="num" v-if="rule.feeType==1||rule.feeType==3" name="百分比(%)"
+											v-model="rule.percent" br></sa-item>
+										<sa-item type="num" v-if="rule.feeType==2" name="金额(元)" v-model="rule.feeMoney"
+											br></sa-item>
 									</div>
-									<sa-item type="enum" name="类型" v-model="rule.feeType"
-										:jv="{2: '固定金额',1: '按交易额', 3:'按吨收费'}" jtype="3" br></sa-item>
-									<sa-item type="num" v-if="rule.feeType==1||rule.feeType==3" name="百分比(%)"
-										v-model="rule.percent" br></sa-item>
-									<sa-item type="num" v-if="rule.feeType==2" name="金额(元)" v-model="rule.feeMoney"
-										br></sa-item>
 								</div>
-							</div>
+							</el-form>
 						</div>
 					</el-form>
 				</div>
@@ -103,13 +115,16 @@
 				data: {
 					id: sa.p('id', 0), // 获取超链接中的id参数（0=添加，非0=修改） 
 					m: null, // 实体对象 
-					rules: [{
-						index: 0,
-						goodsCodes: [],
-						feeType: 2,
-						percent: 10,
-						feeMoney: 30
-					}],
+					form: {
+						rules: [{
+							index: 0,
+							goodsCodes: [],
+							feeType: 2,
+							percent: 10,
+							feeMoney: 30
+						}],
+					},
+
 					companyList: [],
 					goodsList: []
 				},
@@ -122,10 +137,10 @@
 							percent: 10,
 							feeMoney: 30
 						}
-						this.rules.push(rule);
+						this.form.rules.push(rule);
 					},
 					delRules(index) {
-						let rules = this.rules;
+						let rules = this.form.rules;
 						if (rules.length == 1) {
 							sa.error('只是保留一条规则')
 							return;
@@ -133,6 +148,9 @@
 						let i = rules.map(obj => obj.index).indexOf(index);
 						rules.splice(i, 1);
 					},
+					addAllGoods(rule) {
+						rule.goodsCodes = this.goodsList.map(obj => obj.code);
+					},
 					getGoodsList: function() {
 						sa.ajax('/level-one-server/TbGoods/getList', {
 							pageSize: 100
@@ -164,37 +182,52 @@
 					},
 					// 提交数据 
 					ok: function() {
-						// 表单校验 
+						// 表单校验
 						let m = this.m;
-						sa.checkNull(m.name, '请输入 [名称]');
+						sa.checkNull(m.name, '请输入 [费项名称]');
 						sa.checkNull(m.companyId, '请选择 [收费企业]');
-						if (m.feeType == 1 && !m.percent) {
-							sa.error('请输入百分比')
-							return;
-						}
-						if (m.feeType == 2 && !m.feeMoney) {
-							sa.error('请输入金额')
-							return;
-						}
-						if (m.feeType == 1) {
-							m.feeMoney = 0;
-						}
-						if (m.feeType == 2) {
-							m.percent = 0;
-						}
 						m.companyName = this.companyList.filter(obj => obj.id == m.companyId).pop().name;
-						// 开始增加或修改
-						this.m.createTime = undefined; // 不提交属性：创建时间
-						this.m.updateTime = undefined; // 不提交属性：更新时间
-						if (this.id <= 0) { // 添加
-							sa.ajax('/level-two-server/TbFeeItem/add', m, function(res) {
-								sa.alert('增加成功', this.clean);
-							}.bind(this));
-						} else { // 修改
-							sa.ajax('/level-two-server/TbFeeItem/update', m, function(res) {
-								sa.alert('修改成功', this.clean);
-							}.bind(this));
-						}
+						this.$refs.dynamicValidateForm.validate((valid) => {
+							if (valid) {
+								let rules = JSON.parse(JSON.stringify(this.form.rules));
+								for (let i in rules) {
+									let rule = rules[i];
+									if (rule.feeType == 1 && !rule.percent) {
+										sa.error('请输入百分比')
+										return;
+									}
+									if (rule.feeType == 2 && !rule.feeMoney) {
+										sa.error('请输入金额')
+										return;
+									}
+									if (rule.feeType == 1) {
+										rule.feeMoney = 0;
+									}
+									if (rule.feeType == 2) {
+										rule.percent = 0;
+									}
+									rule.goodsCodes = rule.goodsCodes.join(',');
+								}
+								// 开始增加或修改
+								m.rules = rules;
+								console.log(m);
+
+
+								if (this.id <= 0) { // 添加
+									sa.ajaxJson('/level-two-server/TbFeeItem/add', sa.removeNull(m),
+										function(res) {
+											sa.alert('增加成功', this.clean);
+										}.bind(this));
+								} else { // 修改
+									sa.ajaxJson('/level-two-server/TbFeeItem/update', sa.removeNull(m),
+										function(res) {
+											sa.alert('修改成功', this.clean);
+										}.bind(this));
+								}
+							} else {
+								return false;
+							}
+						});
 					},
 					// 添加/修改 完成后的动作
 					clean: function() {
@@ -214,6 +247,22 @@
 						this.m = this.createModel();
 					} else {
 						sa.ajax('/level-two-server/TbFeeItem/getById?id=' + this.id, function(res) {
+							let data = res.data;
+							let rules = data.rules;
+							let list=[];
+							for (let i in rules) {
+								let rule = rules[i];
+								let obj = {
+									index: sa.randomString(),
+									goodsCodes: rule.goodsCodes.split(','),
+									feeType: rule.feeType,
+									percent: rule.percent,
+									feeMoney: rule.feeMoney
+								}
+								list.push(obj);
+							}
+							console.log(list);
+							this.form.rules=list;
 							this.m = res.data;
 							if (res.data == null) {
 								sa.alert('未能查找到 id=' + this.id + " 详细数据");

sa-view/tb-fee-item/tb-fee-item-list.html

@@ -30,9 +30,6 @@
 					<sa-td type="index" name="序号"></sa-td>
 					<sa-td name="收费企业" prop="companyName" ></sa-td>
 					<sa-td name="名称" prop="name" ></sa-td>
-					<sa-td name="类型" prop="feeType" type="enum" :jv="{1: '按交易额收取', 2: '按次收取'}"></sa-td>
-					<sa-td name="收费%(按交易额)" prop="percent" ></sa-td>
-					<sa-td name="收费金额(按次收)" prop="feeMoney" ></sa-td>
 					<sa-td name="状态" prop="status"  type="switch" :jv="{0: '禁用[red]', 1: '启用[green]'}" @change="s => updateStatus(s.row)"></sa-td>
 					<sa-td name="创建时间" prop="createTime" type="datetime" width="160"></sa-td>
 					<sa-td name="更新时间" prop="updateTime" type="datetime" width="160"></sa-td>
@@ -95,7 +92,7 @@
 					},
 					// 修改
 					update: function(data) {
-						sa.showIframe('修改数据', 'tb-fee-item-add.html?id=' + data.id, '600px', '500px');
+						sa.showIframe('修改数据', 'tb-fee-item-add.html?id=' + data.id, '90%', '90%');
 					},
 					// 新增
 					add: function(data) {

sa-view/tb-item-rules/tb-item-rules-add.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>费项因子-添加/修改</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<!-- 所有的 css js 资源 -->
+		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
+		<link rel="stylesheet" href="../../static/sa.css">
+		<script src="../../static/kj/vue.min.js"></script>
+		<script src="../../static/kj/element-ui/index.js"></script>
+		<script src="../../static/kj/httpVueLoader.js"></script>
+		<script src="../../static/kj/jquery.min.js"></script>
+		<script src="../../static/kj/layer/layer.js"></script>
+		<script src="../../static/sa.js"></script>
+		<style type="text/css">
+			.c-panel .el-form .c-label{width: 7em !important;}
+			.c-panel .el-form .el-input, .c-panel .el-form .el-textarea__inner{width: 250px;}
+		</style>
+	</head>
+	<body>
+		<div class="vue-box" :class="{sbot: id}" style="display: none;" :style="'display: block;'">
+			<!-- ------- 内容部分 ------- -->
+			<div class="s-body">
+				<div class="c-panel">
+                    <div class="c-title" v-if="id == 0">数据添加</div>
+					<div class="c-title" v-else>数据修改</div>
+					<el-form v-if="m">
+						<sa-item type="text" name="指定的商品" v-model="m.goodsCodes" br></sa-item>
+						<!-- date-create字段： m.createTime - 创建时间 -->
+						<sa-item type="text" name="更新者id" v-model="m.updateBy" br></sa-item>
+						<sa-item type="text" name="更新者名称" v-model="m.updateByName" br></sa-item>
+						<!-- date-update字段： m.updateTime - 更新时间 -->
+						<sa-item type="text" name="更新人" v-model="m.updateById" br></sa-item>
+						<sa-item type="enum" name="类型" v-model="m.feeType" :jv="{1: '按交易额收取', 2: '按次收取', 3: '按吨'}" jtype="3" br></sa-item>
+						<sa-item type="text" name="百分比fee_type=1时生效" v-model="m.percent" br></sa-item>
+						<sa-item type="text" name="收费金额fee_type=2时生效" v-model="m.feeMoney" br></sa-item>
+						<sa-item name="" class="s-ok" br>
+							<el-button type="primary" icon="el-icon-plus" @click="ok()">保存</el-button>
+						</sa-item>
+					</el-form>
+				</div>
+			</div>
+			<!-- ------- 底部按钮 ------- -->
+			<div class="s-foot">
+				<el-button type="primary" @click="ok()">确定</el-button>
+				<el-button @click="sa.closeCurrIframe()">取消</el-button>
+			</div>
+		</div>
+        <script>
+			
+			var app = new Vue({
+				components: {
+					"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue')
+				},
+				el: '.vue-box',
+				data: {
+					id: sa.p('id', 0),		// 获取超链接中的id参数（0=添加，非0=修改） 
+					m: null,		// 实体对象 
+				},
+				methods: {
+					// 创建一个 默认Model 
+					createModel: function() {
+						return {
+							id: '',		// 主键 
+							goodsCodes: '',		// 指定的商品 
+							// createTime: '',		// 创建时间 
+							updateBy: '',		// 更新者id 
+							updateByName: '',		// 更新者名称 
+							// updateTime: '',		// 更新时间 
+							updateById: '',		// 更新人 
+							feeType: '',		// 类型(1=按交易额收取,2=按次收取,3=按吨) 
+							percent: '',		// 百分比fee_type=1时生效 
+							feeMoney: '',		// 收费金额 fee_type=2时生效 
+						}
+					},
+					// 提交数据 
+					ok: function(){
+						// 表单校验 
+						let m = this.m;
+						// sa.checkNull(m.id, '请输入 [主键]');
+						sa.checkNull(m.goodsCodes, '请输入 [指定的商品]');
+						// sa.checkNull(m.createTime, '请输入 [创建时间]');
+						sa.checkNull(m.updateBy, '请输入 [更新者id]');
+						sa.checkNull(m.updateByName, '请输入 [更新者名称]');
+						// sa.checkNull(m.updateTime, '请输入 [更新时间]');
+						sa.checkNull(m.updateById, '请输入 [更新人]');
+						sa.checkNull(m.feeType, '请输入 [类型]');
+						sa.checkNull(m.percent, '请输入 [百分比fee_type=1时生效]');
+						sa.checkNull(m.feeMoney, '请输入 [收费金额fee_type=2时生效]');
+				
+						// 开始增加或修改
+						this.m.createTime = undefined;		// 不提交属性：创建时间
+						this.m.updateTime = undefined;		// 不提交属性：更新时间
+						if(this.id <= 0) {	// 添加
+							sa.ajax('/TbItemRules/add', m, function(res){
+								sa.alert('增加成功', this.clean); 
+							}.bind(this));
+						} else {	// 修改
+							sa.ajax('/TbItemRules/update', m, function(res){
+								sa.alert('修改成功', this.clean);
+							}.bind(this));
+						}
+					},
+					// 添加/修改 完成后的动作
+					clean: function() {
+						if(this.id == 0) {
+							this.m = this.createModel();
+						} else {
+							parent.app.f5();		// 刷新父页面列表
+							sa.closeCurrIframe();	// 关闭本页 
+						}
+					}
+				},
+				mounted: function(){
+					// 初始化数据 
+					if(this.id <= 0) {	
+						this.m = this.createModel();
+					} else {	
+						sa.ajax('/TbItemRules/getById?id=' + this.id, function(res) {
+							this.m = res.data;
+							if(res.data == null) {
+								sa.alert('未能查找到 id=' + this.id + " 详细数据");
+							}
+						}.bind(this))
+					}
+				}
+			})
+			
+		</script>
+	</body>
+</html>

sa-view/tb-item-rules/tb-item-rules-info.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>费项因子-详情</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<!-- 所有的 css js 资源 -->
+		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
+		<link rel="stylesheet" href="../../static/sa.css">
+		<script src="../../static/kj/vue.min.js"></script>
+		<script src="../../static/kj/element-ui/index.js"></script>
+		<script src="../../static/kj/httpVueLoader.js"></script>
+		<script src="../../static/kj/jquery.min.js"></script>
+		<script src="../../static/kj/layer/layer.js"></script>
+		<script src="../../static/sa.js"></script>
+		<style type="text/css">
+			.c-panel .c-label{width: 8em;}
+		</style>
+	</head>
+	<body>
+		<div class="vue-box sbot" style="display: none;" :style="'display: block;'">
+			<!-- ------- 内容部分 ------- -->
+			<div class="s-body">
+				<div class="c-panel">
+					<el-form v-if="m">
+						<sa-info type="num" name="主键" :value="m.id" br></sa-info>
+						<sa-info name="指定的商品" br>{{m.goodsCodes}}</sa-info>
+						<sa-info type="datetime" name="创建时间" :value="m.createTime" br></sa-info>
+						<sa-info name="更新者id" br>{{m.updateBy}}</sa-info>
+						<sa-info name="更新者名称" br>{{m.updateByName}}</sa-info>
+						<sa-info type="datetime" name="更新时间" :value="m.updateTime" br></sa-info>
+						<sa-info name="更新人" br>{{m.updateById}}</sa-info>
+						<sa-info type="enum" name="类型" :value="m.feeType" :jv="{1: '按交易额收取', 2: '按次收取', 3: '按吨'}" br></sa-info>
+						<sa-info name="百分比fee_type=1时生效" br>{{m.percent}}</sa-info>
+						<sa-info name="收费金额fee_type=2时生效" br>{{m.feeMoney}}</sa-info>
+					</el-form>
+				</div>
+			</div>
+			<!-- ------- 底部按钮 ------- -->
+			<div class="s-foot">
+				<el-button type="success" @click="sa.closeCurrIframe()">确定</el-button>
+				<el-button @click="sa.closeCurrIframe()">取消</el-button>
+			</div>
+		</div>
+		<script>
+			var app = new Vue({
+				components: {
+					"sa-info": httpVueLoader('../../sa-frame/com/sa-info.vue')
+				},
+				el: '.vue-box',
+				data: {
+					id: sa.p('id', 0),	// 获取数据ID 
+					m: null
+				},
+				methods: {
+				},
+				mounted: function() {
+					sa.ajax('/TbItemRules/getById?id=' + this.id, function(res) {
+						this.m = res.data;
+						if(res.data == null) {
+							sa.alert('未能查找到 id=' + this.id + " 详细数据");
+						}
+					}.bind(this))
+				}
+			})
+			
+		</script>
+	</body>
+</html>

sa-view/tb-item-rules/tb-item-rules-list.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>费项因子-列表</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<!-- 所有的 css & js 资源 -->
+		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
+		<link rel="stylesheet" href="../../static/sa.css">
+		<script src="../../static/kj/vue.min.js"></script>
+		<script src="../../static/kj/element-ui/index.js"></script>
+		<script src="../../static/kj/httpVueLoader.js"></script>
+		<script src="../../static/kj/jquery.min.js"></script>
+		<script src="../../static/kj/layer/layer.js"></script>
+		<script src="../../static/sa.js"></script>
+	</head>
+	<body>
+		<div class="vue-box" style="display: none;" :style="'display: block;'">
+			<div class="c-panel">
+				<!-- ------------- 检索参数 ------------- -->
+				<div class="c-title">检索参数</div>
+				<el-form ref="form" :model='p' @submit.native.prevent>
+					<sa-item type="num" name="主键" v-model="p.id"></sa-item>
+					<sa-item type="text" name="指定的商品" v-model="p.goodsCodes"></sa-item>
+					<sa-item type="text" name="更新者id" v-model="p.updateBy"></sa-item>
+					<sa-item type="text" name="更新者名称" v-model="p.updateByName"></sa-item>
+					<sa-item type="text" name="更新人" v-model="p.updateById"></sa-item>
+					<sa-item type="enum" name="类型" v-model="p.feeType" 
+						:jv="{1: '按交易额收取', 2: '按次收取', 3: '按吨'}" jtype="2" def="不限"></sa-item>
+					<sa-item type="text" name="百分比fee_type=1时生效" v-model="p.percent"></sa-item>
+					<sa-item type="text" name="收费金额fee_type=2时生效" v-model="p.feeMoney"></sa-item>
+					<el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
+				</el-form>
+				<div class="fast-btn">
+					<el-button v-if="sa.isAuth('tb-item-rules-add')" size="mini" type="primary" @click="add()">新增</el-button>
+					<el-button size="mini" type="success" @click="getBySelect()">查看</el-button>
+					<el-button size="mini" type="info" @click="sa.f5()">重置</el-button>
+				</div>
+				<!-- ------------- 数据列表 ------------- -->
+				<el-table class="data-table" ref="data-table" :data="dataList" >
+					<sa-td type="selection"></sa-td>
+					<sa-td name="主键" prop="id" type="num"></sa-td>
+					<sa-td name="指定的商品" prop="goodsCodes" ></sa-td>
+					<sa-td name="创建时间" prop="createTime" type="datetime"></sa-td>
+					<sa-td name="更新者id" prop="updateBy" ></sa-td>
+					<sa-td name="更新者名称" prop="updateByName" ></sa-td>
+					<sa-td name="更新时间" prop="updateTime" type="datetime"></sa-td>
+					<sa-td name="更新人" prop="updateById" ></sa-td>
+					<sa-td name="类型" prop="feeType" type="enum" :jv="{1: '按交易额收取', 2: '按次收取', 3: '按吨'}"></sa-td>
+					<sa-td name="百分比fee_type=1时生效" prop="percent" ></sa-td>
+					<sa-td name="收费金额fee_type=2时生效" prop="feeMoney" ></sa-td>
+					<el-table-column label="操作" fixed="right"  width="240px">
+						<template slot-scope="s">
+							<el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">查看</el-button>
+							<el-button v-if="sa.isAuth('tb-item-rules-edit')" class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row)">修改</el-button>
+							<el-button v-if="sa.isAuth('tb-item-rules-del')" class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<!-- ------------- 分页 ------------- -->
+				<sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount" @change="f5()"></sa-item>
+			</div>
+		</div>
+		<script>
+			var app = new Vue({
+				components: {
+					"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),  
+					"sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),		
+				},
+				el: '.vue-box',
+				data: {
+					p: { // 查询参数  
+						id: '',		// 主键 
+						goodsCodes: '',		// 指定的商品 
+						updateBy: '',		// 更新者id 
+						updateByName: '',		// 更新者名称 
+						updateById: '',		// 更新人 
+						feeType: '',		// 类型(1=按交易额收取,2=按次收取,3=按吨) 
+						percent: '',		// 百分比fee_type=1时生效 
+						feeMoney: '',		// 收费金额 fee_type=2时生效 
+						pageNo: 1,		// 当前页 
+						pageSize: 10,	// 页大小 
+						sortType: 0		// 排序方式 
+					},
+					dataCount: 0,
+					dataList: [], // 数据集合 
+				},
+				methods: {
+					// 刷新
+					f5: function() {
+						sa.ajax('/TbItemRules/getList', sa.removeNull(this.p), function(res) {
+							this.dataList = res.data; // 数据
+							this.dataCount = res.dataCount; // 数据总数 
+							sa.f5TableHeight();		// 刷新表格高度 
+						}.bind(this));
+					},
+					// 查看
+					get: function(data) {
+						sa.showIframe('数据详情', 'tb-item-rules-info.html?id=' + data.id, '1050px', '90%');
+					},
+					// 查看 - 根据选中的
+					getBySelect: function(data) {
+						var selection = this.$refs['data-table'].selection;
+						if(selection.length == 0) {
+							return sa.msg('请选择一条数据')
+						}
+						this.get(selection[0]);
+					},
+					// 修改
+					update: function(data) {
+						sa.showIframe('修改数据', 'tb-item-rules-add.html?id=' + data.id, '1000px', '90%');
+					},
+					// 新增
+					add: function(data) {
+						sa.showIframe('新增数据', 'tb-item-rules-add.html?id=-1', '1000px', '90%');
+					},
+					// 删除
+					del: function(data) {
+						sa.confirm('是否删除，此操作不可撤销', function() {
+							sa.ajax('/TbItemRules/delete?id=' + data.id, function(res) {
+								sa.arrayDelete(this.dataList, data);
+								sa.ok('删除成功');
+								sa.f5TableHeight();		// 刷新表格高度 
+							}.bind(this))
+						}.bind(this));
+					},
+					// 批量删除
+					deleteByIds: function() {
+						// 获取选中元素的id列表 
+						let selection = this.$refs['data-table'].selection;
+						let ids = sa.getArrayField(selection, 'id');
+						if(selection.length == 0) {
+							return sa.msg('请至少选择一条数据')
+						}
+						// 提交删除 
+						sa.confirm('是否批量删除选中数据？此操作不可撤销', function() {
+							sa.ajax('/TbItemRules/deleteByIds', {ids: ids.join(',')}, function(res) {
+								sa.arrayDelete(this.dataList, selection);
+								sa.ok('删除成功');
+								sa.f5TableHeight();		// 刷新表格高度 
+							}.bind(this))
+						}.bind(this));
+					},
+				},
+				created: function() {
+					this.f5();
+					sa.onInputEnter();
+				}
+			})
+		</script>
+	</body>
+</html>

static/sa.js

@@ -157,6 +157,103 @@ var sa = {
 		});
 
 	};
+	sa.ajaxJson = function(url, data, success200, cfg) {
+	
+		// 如果是简写模式(省略了data参数)
+		if (typeof data === 'function') {
+			cfg = success200;
+			success200 = data;
+			data = {};
+		}
+	
+		// 默认配置
+		var defaultCfg = {
+			msg: '努力加载中...', // 提示语
+			baseUrl: (url.indexOf('http') === 0 ? '' : sa.cfg.api_url), // 父url，拼接在url前面
+			sleep: 0, // 休眠n毫秒处理回调函数
+			type: 'post', // 默认请求类型
+			success200: success200, // code=200, 代表成功
+			success500: function(res) { // code=500, 代表失败
+				let msg = res.msg;
+				console.log(msg);
+				if (msg === '操作超时') {
+					window.parent.location.href = '../../login.html';
+					return;
+				}
+				return layer.alert('失败：' + res.msg);
+			},
+			success403: function(res) { // code=403, 代表权限不足
+				return layer.alert("权限不足," + res.msg, {
+					icon: 5
+				});
+			},
+			success401: function(res) { // code=401, 代表未登录
+				return layer.confirm("您当前暂未登录，是否立即登录？", {}, function() {
+					layer.closeAll();
+					return sa.$page.openLogin(cfg.login_url);
+				});
+			},
+			errorfn: function(xhr, type, errorThrown) { // ajax发生异常时的默认处理函数
+				if (xhr.status == 0) {
+					return layer.alert('无法连接到服务器，请检查网络');
+				}
+				if(xhr.responseText.indexOf('code=405')>0){
+					window.parent.location.href = '../../login.html';
+					return;
+				}
+				return layer.alert("异常：" + JSON.stringify(xhr));
+			},
+			complete: function(xhr, ts) { // 成功失败都会执行
+	
+			}
+		}
+	
+		// 将调用者的配置和默认配置合并
+		cfg = sa.extendJson(cfg, defaultCfg);
+	
+		// 开始显示loading图标
+		if (cfg.msg != null) {
+			sa.loading(cfg.msg);
+		}
+	
+		// 开始请求ajax
+		return $.ajax({
+			url: cfg.baseUrl + url,
+			type: cfg.type,
+			data: JSON.stringify(data),
+			dataType: 'json',
+			contentType:'application/json',
+			// xhrFields: {
+			// 	withCredentials: true // 携带跨域cookie
+			// },
+			// crossDomain: true,
+			beforeSend: function(xhr) {
+				xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+				// 追加token
+				if (localStorage.tokenName) {
+					xhr.setRequestHeader(localStorage.tokenName, localStorage.tokenValue);
+				}
+			},
+			success: function(res) {
+				setTimeout(function() {
+					sa.hideLoading();
+					// 如果相应的处理函数存在
+					if (cfg['success' + res.code] != undefined) {
+						return cfg['success' + res.code](res);
+					}
+					layer.alert('未知状态码：' + JSON.stringify(res));
+				}, cfg.sleep);
+			},
+			error: function(xhr, type, errorThrown) {
+				setTimeout(function() {
+					sa.hideLoading();
+					return cfg.errorfn(xhr, type, errorThrown);
+				}, cfg.sleep);
+			},
+			complete: cfg.complete
+		});
+	
+	};
 	/** 对ajax的再封装, 这个ajax假设你的接口会返回以下格式的内容
      {
 			"code": 200,