完成字典,组织去vue

This commit is contained in:
yubaolee 2024-07-19 17:00:26 +08:00
parent d2cadace34
commit c417859da7
4 changed files with 104 additions and 139 deletions

View File

@ -1,15 +1,17 @@
@section header @section header
{ {
<link rel="stylesheet" href="/css/treetable.css" /> <link rel="stylesheet" href="/css/treetable.css"/>
<link rel="stylesheet" href="/js/dtree/dtree.css" /> <link rel="stylesheet" href="/js/dtree/dtree.css"/>
<link rel="stylesheet" href="/js/dtree/font/dtreefont.css" /> <link rel="stylesheet" href="/js/dtree/font/dtreefont.css"/>
} }
<blockquote class="layui-elem-quote news_search toolList" id="menus"> <blockquote class="layui-elem-quote news_search toolList" id="menus">
</blockquote> </blockquote>
<table id="mainList" <table id="mainList"
lay-data="{height: 'full-80',cellMinWidth:80, page:true, id:'mainList'}" lay-data="{height: 'full-80',cellMinWidth:80, page:true, id:'mainList'}"
lay-filter="list" lay-size="sm"></table> lay-filter="list" lay-size="sm">
</table>
<script type="text/html" id="barList"> <script type="text/html" id="barList">
@*<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>*@ @*<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>*@
@ -19,19 +21,19 @@
<!--用户添加/编辑窗口--> <!--用户添加/编辑窗口-->
<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" <input type="text" name="Id"
placeholder="请输入类型标识" autocomplete="off" class="layui-input"> placeholder="请输入类型标识" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
<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>
@ -39,16 +41,16 @@
<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="TypeName" name="TypeName" v-model="tmp.TypeName" required lay-verify="required" class="layui-input" /> <input id="TypeName" name="TypeName" required lay-verify="required" class="layui-input"/>
<input id="TypeId" name="TypeId" v-model="tmp.TypeId" required lay-verify="required" type="hidden" /> <input id="TypeId" name="TypeId" required lay-verify="required" type="hidden"/>
</div> </div>
</div> </div>
<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" <input type="text" name="Description"
placeholder="请输入描述" autocomplete="off" class="layui-input"> placeholder="请输入描述" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
@ -63,4 +65,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/categories.js?v=3.2"></script> <script type="text/javascript" src="/userJs/categories.js?v3"></script>

View File

@ -1,10 +1,11 @@
@section header @section header
{ {
<link rel="stylesheet" href="/css/treetable.css" /> <link rel="stylesheet" href="/css/treetable.css"/>
<link rel="stylesheet" href="/js/dtree/dtree.css" /> <link rel="stylesheet" href="/js/dtree/dtree.css"/>
<link rel="stylesheet" href="/js/dtree/font/dtreefont.css" /> <link rel="stylesheet" href="/js/dtree/font/dtreefont.css"/>
} }
<blockquote class="layui-elem-quote news_search toolList" id ="menus">
<blockquote class="layui-elem-quote news_search toolList" id="menus">
</blockquote> </blockquote>
<div class="layui-row"> <div class="layui-row">
@ -39,21 +40,21 @@
<!--用户添加/编辑窗口--> <!--用户添加/编辑窗口-->
<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">
<input type="hidden" name="Id" v-model="tmp.Id" /> <input type="hidden" name="Id"/>
<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>
<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="SortNo" v-model="tmp.SortNo" required lay-verify="required" <input type="text" name="SortNo" required lay-verify="required"
placeholder="请输入排序号" autocomplete="off" class="layui-input"> placeholder="请输入排序号" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
@ -61,9 +62,9 @@
<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="ParentName" name="ParentName" v-model="tmp.ParentName" class="layui-input" /> <input id="ParentName" name="ParentName" class="layui-input"/>
<input id="ParentId" name="ParentId" v-model="tmp.ParentId" type="hidden" /> <input id="ParentId" name="ParentId" type="hidden"/>
</div> </div>
</div> </div>
@ -77,4 +78,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/orgs.js?v=1"></script> <script type="text/javascript" src="/userJs/orgs.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', 'vue', '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;
@ -9,33 +9,41 @@ layui.config({
$("#menus").loadMenus("Category"); $("#menus").loadMenus("Category");
var initVal = { //初始化的值
Id: '',
Name: '',
TypeName: '',
TypeId: '',
Description: ''
}
//加载表头 //加载表头
$.getJSON('/Categories/All', $.getJSON('/Categories/All',
{ 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: '/Categories/All', url: '/Categories/All',
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);
@ -45,49 +53,26 @@ layui.config({
where: config where: config
, response: { , response: {
statusCode: 200 //规定成功的状态码默认0 statusCode: 200 //规定成功的状态码默认0
} }
}); });
} }
//添加(编辑)对话框 //添加(编辑)对话框
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,
area: ["500px", "400px"], area: ["500px", "400px"],
type: 1, type: 1,
content: $('#divEdit'), content: $('#divEdit'),
success: function() { success: function () {
if(vm == undefined){ layui.droptree("/Categories/AllTypes", "#TypeName", "#TypeId", 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等
})
}
},
mounted(){
form.render();
var _this = this;
layui.droptree("/Categories/AllTypes", "#TypeName", "#TypeId", false,function (ids, names) {
_this.tmp.TypeName = ids;
_this.tmp.TypeId = names;
});
}
});
}else{
vm.tmp = Object.assign({}, vm.tmp,data)
}
}, },
end: mainList end: mainList
}); });
@ -97,10 +82,10 @@ layui.config({
} }
//提交数据 //提交数据
form.on('submit(formSubmit)', form.on('submit(formSubmit)',
function(data) { function (data) {
$.post(url, $.post(url,
data.field, data.field,
function(data) { function (data) {
layer.msg(data.Message); layer.msg(data.Message);
}, },
"json"); "json");
@ -109,24 +94,20 @@ layui.config({
} }
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);
} }
}; };
}(); }();
//监听表格内部按钮 //监听表格内部按钮
table.on('tool(list)', function (obj) { table.on('tool(list)', function (obj) {
var data = obj.data; var data = obj.data;
if (obj.event === 'detail') { //查看 if (obj.event === 'detail') { //查看
layer.msg('ID' + data.Id + ' 的查看操作'); layer.msg('ID' + data.Id + ' 的查看操作');
} }
}); });
@ -136,26 +117,28 @@ layui.config({
var checkStatus = table.checkStatus('mainList') var checkStatus = table.checkStatus('mainList')
, data = checkStatus.data; , data = checkStatus.data;
openauth.del("/Categories/Delete", openauth.del("/Categories/Delete",
data.map(function (e) { return e.Id; }), data.map(function (e) {
return e.Id;
}),
mainList); mainList);
} }
, btnAdd: function () { //添加 , btnAdd: function () { //添加
editDlg.add(); editDlg.add();
} }
, btnEdit: function () { //编辑 , btnEdit: function () { //编辑
var checkStatus = table.checkStatus('mainList') var checkStatus = table.checkStatus('mainList')
, data = checkStatus.data; , data = checkStatus.data;
if (data.length != 1) { if (data.length != 1) {
layer.msg("请选择编辑的行,且同时只能编辑一行"); layer.msg("请选择编辑的行,且同时只能编辑一行");
return; return;
} }
editDlg.update(data[0]); editDlg.update(data[0]);
} }
, search: function () { //搜索 , search: function () { //搜索
mainList({ key: $('#key').val() }); mainList({key: $('#key').val()});
} }
, btnRefresh: function() { , btnRefresh: function () {
mainList(); mainList();
} }
}; };

View File

@ -8,6 +8,14 @@
var openauth = layui.openauth; var openauth = layui.openauth;
$("#menus").loadMenus("Org"); $("#menus").loadMenus("Org");
var initVal = { //初始化的值
Id: '',
Name: '',
SortNo: '',
ParentName: '',
ParentId: ''
}
//主列表加载,可反复调用进行刷新 //主列表加载,可反复调用进行刷新
var config= {}; //table的参数如搜索key点击tree的id var config= {}; //table的参数如搜索key点击tree的id
@ -66,9 +74,7 @@
//添加(编辑)对话框 //添加(编辑)对话框
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,
@ -76,34 +82,12 @@
type: 1, type: 1,
content: $('#divEdit'), content: $('#divEdit'),
success: function() { success: function() {
if(vm == undefined){ layui.droptree("/UserSession/GetOrgs", "#ParentName", "#ParentId", false);
vm = new Vue({ if (data == undefined) {
el: "#formEdit", form.val("formEdit", initVal);
data(){
return {
tmp:data //使用一个tmp封装一下后面可以直接用vm.tmp赋值
}
},
watch:{
tmp(val){
this.$nextTick(function () {
form.render(); //刷新select等
})
}
},
mounted(){
form.render();
var _this = this;
layui.droptree("/UserSession/GetOrgs", "#ParentName", "#ParentId", false,function (ids, names) {
_this.tmp.ParentId = ids;
_this.tmp.ParentName = names;
});
}
});
} else { } else {
vm.tmp = Object.assign({}, vm.tmp,data) form.val("formEdit", data);
} }
}, },
end: mainList end: mainList
}); });
@ -128,15 +112,10 @@
} }
return { return {
add: function() { //弹出添加 add: function() { //弹出添加
update = false; show(false);
show({
Id: '',
SortNo:1
});
}, },
update: function(data) { //弹出编辑框 update: function(data) { //弹出编辑框
update = true; show(true,data);
show(data);
} }
}; };
}(); }();