<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="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="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="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="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>