完成资源管理去vue

This commit is contained in:
yubaolee 2024-07-19 16:39:29 +08:00
parent 9a674ac4db
commit d2cadace34
4 changed files with 51 additions and 74 deletions

View File

@ -25,11 +25,11 @@
<!--添加/编辑窗口--> <!--添加/编辑窗口-->
<div id="divEdit" style="display: none"> <div id="divEdit" style="display: none">
<form class="layui-form layui-form-pane" action="" id="formEdit"> <form class="layui-form layui-form-pane" action="" id="formEdit" lay-filter="formEdit">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">资源标识</label> <label class="layui-form-label">资源标识</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="Id" v-model="tmp.Id" required lay-verify="required" <input type="text" name="Id" required lay-verify="required"
placeholder="名称" autocomplete="off" class="layui-input"> placeholder="名称" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
@ -37,7 +37,7 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">名称</label> <label class="layui-form-label">名称</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="Name" v-model="tmp.Name" required lay-verify="required" <input type="text" name="Name" required lay-verify="required"
placeholder="名称" autocomplete="off" class="layui-input"> placeholder="名称" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
@ -45,7 +45,7 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">描述</label> <label class="layui-form-label">描述</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="Description" v-model="tmp.Description" required lay-verify="required" <input type="text" name="Description" required lay-verify="required"
placeholder="描述" autocomplete="off" class="layui-input"> placeholder="描述" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
@ -53,8 +53,8 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">所属应用</label> <label class="layui-form-label">所属应用</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input id="AppName" name="AppName" v-model="tmp.AppName" class="layui-input" /> <input id="AppName" name="AppName" class="layui-input" />
<input id="AppId" name="AppId" v-model="tmp.AppId" type="hidden" /> <input id="AppId" name="AppId" type="hidden" />
</div> </div>
</div> </div>
@ -68,6 +68,6 @@
</div> </div>
<script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/userJs/resources.js?v=3.2.1"></script> <script type="text/javascript" src="/userJs/resources.js?v4"></script>

View File

@ -107,4 +107,4 @@
</div> </div>
<script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/userJs/users.js?v3.0"></script> <script type="text/javascript" src="/userJs/users.js?v3"></script>

View File

@ -1,6 +1,6 @@
layui.config({ layui.config({
base: "/js/" base: "/js/"
}).use(['form', 'vue', 'ztree', 'layer', 'jquery', 'table', 'droptree', 'openauth', 'utils'], function () { }).use(['form', 'ztree', 'layer', 'jquery', 'table', 'droptree', 'openauth', 'utils'], function () {
var form = layui.form, var form = layui.form,
layer = layui.layer, layer = layui.layer,
$ = layui.jquery; $ = layui.jquery;
@ -10,36 +10,43 @@
$("#menus").loadMenus("Resource"); $("#menus").loadMenus("Resource");
var initVal = { //初始化的值
Id: "",
Name: '',
Description: "",
AppName: "",
AppId: ""
}
//加载表头 //加载表头
$.getJSON('/Resources/Load', $.getJSON('/Resources/Load',
{ page: 1, limit: 1 }, {page: 1, limit: 1},
function (data) { function (data) {
var columns = data.columnFields.filter(u => u.IsList ===true).map(function (e) { var columns = data.columnFields.filter(u => u.IsList === true).map(function (e) {
return { return {
field: e.ColumnName, field: e.ColumnName,
title: e.Comment title: e.Comment
}; };
}); });
columns.unshift({ columns.unshift({
type: 'checkbox', type: 'checkbox',
fixed: 'left' fixed: 'left'
}); });
table.render({ table.render({
elem: '#mainList', elem: '#mainList',
page: true, page: true,
url: '/Resources/Load', url: '/Resources/Load',
cols: [columns] cols: [columns]
, response: { , response: {
statusCode: 200 //规定成功的状态码默认0 statusCode: 200 //规定成功的状态码默认0
} }
}); });
}); });
//主列表加载,可反复调用进行刷新 //主列表加载,可反复调用进行刷新
var config = {}; //table的参数如搜索key点击tree的id var config = {}; //table的参数如搜索key点击tree的id
var mainList = function(options) { var mainList = function (options) {
if (options != undefined) { if (options != undefined) {
$.extend(config, options); $.extend(config, options);
} }
@ -49,16 +56,14 @@
where: config where: config
, response: { , response: {
statusCode: 200 //规定成功的状态码默认0 statusCode: 200 //规定成功的状态码默认0
} }
}); });
}; };
mainList(); mainList();
//添加(编辑)对话框 //添加(编辑)对话框
var editDlg = function () { var editDlg = function () {
var vm; var show = function (update, data) {
var update = false; //是否为更新
var show = function (data) {
var title = update ? "编辑信息" : "添加"; var title = update ? "编辑信息" : "添加";
layer.open({ layer.open({
title: title, title: title,
@ -66,32 +71,12 @@
type: 1, type: 1,
content: $('#divEdit'), content: $('#divEdit'),
success: function () { success: function () {
if(vm == undefined){ layui.droptree("/Applications/GetList", "#AppName", "#AppId", false);
vm = new Vue({ if (data == undefined) {
el: "#formEdit", form.val("formEdit", initVal);
data(){ } else {
return { form.val("formEdit", data);
tmp:data //使用一个tmp封装一下后面可以直接用vm.tmp赋值 }
}
},
watch:{
tmp(val){
this.$nextTick(function () {
form.render(); //刷新select等
layui.droptree("/Applications/GetList", "#AppName", "#AppId", false);
})
}
},
mounted(){
form.render();
layui.droptree("/Applications/GetList", "#AppName", "#AppId", false);
}
});
}else{
vm.tmp = Object.assign({}, vm.tmp,data)
}
}, },
end: mainList end: mainList
}); });
@ -113,14 +98,10 @@
} }
return { return {
add: function () { //弹出添加 add: function () { //弹出添加
update = false; show(false);
show({
Id: ''
});
}, },
update: function (data) { //弹出编辑框 update: function (data) { //弹出编辑框
update = true; show(true, data);
show(data);
} }
}; };
}(); }();
@ -140,7 +121,9 @@
var checkStatus = table.checkStatus('mainList') var checkStatus = table.checkStatus('mainList')
, data = checkStatus.data; , data = checkStatus.data;
openauth.del("/Resources/Delete", openauth.del("/Resources/Delete",
data.map(function (e) { return e.Id; }), data.map(function (e) {
return e.Id;
}),
mainList); mainList);
} }
, btnAdd: function () { //添加 , btnAdd: function () { //添加
@ -157,7 +140,7 @@
} }
, search: function () { //搜索 , search: function () { //搜索
mainList({ key: $('#key').val() }); mainList({key: $('#key').val()});
} }
, btnRefresh: function () { , btnRefresh: function () {
mainList(); mainList();

View File

@ -86,17 +86,11 @@ layui.config({
type: 1, type: 1,
content: $('#divEdit'), content: $('#divEdit'),
success: function() { success: function() {
layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds", true);
if (data == undefined) { if (data == undefined) {
form.val("formEdit", initVal); form.val("formEdit", initVal);
} else { } else {
layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds", true,function (ids, names) {
form.val("formEdit", {
Organizations: names,
OrganizationIds: ids
});
});
form.val("formEdit", data); form.val("formEdit", data);
} }
}, },
end: mainList end: mainList