<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Edit</title>
<link href="/Content/layui-v2.4.5/layui/css/layui.css" rel="stylesheet">
<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script src="/Content/layui-v2.4.5/layui/layui.js"></script>
<script src="/Scripts/vue.min.js"></script>
<script src="/Scripts/axios.min.js"></script>
<link id="layuicss-layer" rel="stylesheet" href="http://localhost:53731/Content/layui-v2.4.5/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all"></head>
<body>
<div style="padding:20px 50px 0px 0px;">
<div class="layui-form" id="appcontainer">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline" style="width:300px;">
<input type="text" name="rcname" v-model="rc.rcname" lay-verify="required" placeholder="请输入规则集名称" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="checkbox" name="rcstate" id="cbRcstate" lay-text="启用|禁用" :checked="rc.rcstate==1?'checked':''" lay-skin="switch">
</div>
<div class="layui-input-inline" style="text-align:right; float:right;">
<button class="layui-btn" lay-submit lay-filter="btnSave">保存</button>
</div>
<div style="clear:both;"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="rcdescription" v-model="rc.rcdescription" placeholder="规则集描述"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline" style="width:300px;">
<select name="rtid" id="cbRuleType" lay-filter="ruleType">
<option value="" selected="selected">请选择</option>
<option v-for="rt in ruleType" :value="rt.rtid">{{rt.rname}}</option>
</select>
</div>
<label class="layui-form-label">规则</label>
<div class="layui-input-inline" style="width:300px;">
<select name="rtid" id="cbRule" lay-filter="rule">
<option value="" selected="selected">请选择</option>
<option v-for="r in rules" :value="r.rid">{{r.rname}}</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">组成</label>
<div class="layui-input-block">
<table id="tblData" class="layui-table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>描述</th>
<th style="width:230px;">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="r in rc.detail">
<td>{{r.rname}}</td>
<td>{{r.rtname}}</td>
<td>{{r.rdescription}}</td>
<td><operation v-on:delrow="delRow" v-model="r" v-bind:rcdid="r.rcdid" v-on:refresh="getDetail"></operation></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="x-template" id="operation">
<div>
<!-- vue组件模板需要一个根元素 -->
<a class="layui-btn layui-btn-xs" lay-event="up" @@click="fnMove(rcdid,1);">上移</a>
<a class="layui-btn layui-btn-xs" lay-event="down" @@click="fnMove(rcdid,2);">下移</a>
<a class="layui-btn layui-btn-xs" lay-event="top" @@click="fnMove(rcdid,3);">置顶</a>
<a class="layui-btn layui-btn-xs" lay-event="bottom" @@click="fnMove(rcdid,4);">置底</a>
<a class="layui-btn layui-btn-xs" lay-event="del" @@click="$emit('delrow',value);">删除</a>
</div>
</script>
<script type="text/javascript">
var app = new Vue({
el: "#appcontainer",
data: {
key: '@ViewBag.Key',
isAdd: '@ViewBag.IsAdd',
ruleType: [],
rules:[],
rc: {
rcid: "",
rcname: "",
rcstate:"0",
rcdescription:"",
detail: []
}
},
components:
{
// 操作组件
"operation":
{
template: "#operation",
props: ["value","rcdid"],
methods: {
fnMove: function (rcdid, op) {
var vm = this;
$.ajax({
type: "POST",
url: "/RuleCollection/Move?key=" + rcdid + "&op=" + op,
dataType: "json",
async: false,
success: function (res) {
// 调用父实例中的方法 刷新数据
vm.$emit("refresh");
layer.msg("操作成功！");
}
});
}
}
}
},
mounted: function () {
this.getRuleType();
if (this.isAdd != "1") {
// 编辑时 需要初始化数据
this.getDetail();
}
},
updated: function () {
var vm = this;
layui.use(['form', 'layer', 'element'], function () {
var form = layui.form,
layer = layui.layer;
// 规则集状态
form.on("switch", function (data) {
vm.rc.rcstate = vm.rc.rcstate == 0 ? 1 : 0;
});
// 规则类型下拉框事件
form.on("select(ruleType)", function (data) {
vm.getRule(data.value);
});
// 规则下拉框事件
form.on("select(rule)", function (data) {
vm.getRuleInfo(data.value);
});
// 提交保存
form.on("submit(btnSave)", function () {
$.ajax({
type: "POST",
url: "/RuleCollection/Save?key=" + vm.key + "&isadd=" + vm.isAdd,
dataType: "json",
data: vm.rc,
async: false,
success: function (res) {
layer.msg(res.msg);
}
});
return false;
});
form.render("select");
});
},
methods: {
delRow: function (r) {
var vm = this;
layer.confirm('确认执行此操作吗?', { btn: ['确定', '取消'], title: "提示" }, function () {
if (r.rcdid != undefined && r.rcdid != "") {
// 从数据库删除 然后更新数据
$.ajax({
type: "POST",
url: "/RuleCollection/DelDetail?key=" + r.rcdid,
dataType: "json",
async: false,
success: function (res) {
// 更新数据
vm.getDetail();
layer.msg("删除成功！");
}
});
return;
}
// 删除行 仅从本地删除
$(vm.rc.detail).each(function (index, element) {
if (this.rid == r.rid) {
vm.rc.detail.splice(index, 1);
layer.msg("删除成功！");
}
});
});
},
getDetail: function () {
// 获取规则集和详情
var vm = this;
$.ajax({
type: "POST",
url: "/RuleCollection/GetDetail?key=" + vm.key,
dataType: "json",
async: false,
success: function (res) {
vm.rc = res.data;
}
});
},
getRuleType: function () {
// 获取规则类型
var vm = this;
$.ajax({
type: "POST",
url: "/RuleType/GetList?page=1&limit=100&rstate=1",
dataType: "json",
async: false,
success: function (res) {
vm.ruleType = res.data;
}
});
},
getRule: function (rtid) {
// 获取可用规则
var vm = this;
$.ajax({
type: "POST",
url: "/Common/GetRuleddl",
dataType: "json",
data: {
rstate: true,
rtid: rtid
},
async: false,
success: function (res) {
vm.rules = res.data;
//layui.form.render("select");
}
});
},
getRuleInfo: function (rid) {
// 根据规则id 获取信息 添加行
var vm = this;
// 检查是否已添加
var isexists = false;
$(this.rc.detail).each(function (index, element) {
if (this.rid == rid) {
isexists = true;
layer.msg("不允许重复添加！");
return;
}
});
if (isexists) {
return;
}
$.ajax({
type: "POST",
url: "/RuleCollection/AddDetail",
dataType: "json",
data: { rcid: vm.key, rid: rid },
async: false,
success: function (res) {
vm.getDetail();
}
});
}
}
});
</script>
</body>
</html>
