zy-wcs-master.git

			@@ -1,309 +1,310 @@
			<!DOCTYPE html>
			<html lang="en">
			<html lang="zh-CN">
			<head>
			<meta charset="utf-8">
			<title></title>
			<title>菜单列表</title>
			<meta name="renderer" content="webkit">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
			<link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
			<link rel="stylesheet" href="../../static/css/cool.css" media="all">
			<link rel="stylesheet" href="../../static/css/common.css" media="all">
			<link rel="stylesheet" href="../../static/vue/element/element.css">
			<link rel="stylesheet" href="../../static/css/cool.css">
			<style>
			#detail {
			padding: 25px 30px 0 0;
			:root {
			--card-bg: rgba(255, 255, 255, 0.94);
			--card-border: rgba(216, 226, 238, 0.95);
			--text-main: #243447;
			}
			.ew-tree-table-box {
			height: 100%;

			[v-cloak] {
			display: none;
			}

			html,
			body {
			margin: 0;
			min-height: 100%;
			color: var(--text-main);
			font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
			background:
			radial-gradient(1000px 420px at 0% -10%, rgba(44, 107, 193, 0.12), transparent 56%),
			radial-gradient(900px 400px at 100% 0%, rgba(28, 150, 126, 0.10), transparent 58%),
			linear-gradient(180deg, #f2f6fb 0%, #f8fafc 100%);
			}

			.page-shell {
			max-width: 1700px;
			margin: 0 auto;
			padding: 14px;
			box-sizing: border-box;
			}

			.card-shell {
			border-radius: 24px;
			border: 1px solid var(--card-border);
			background:
			radial-gradient(760px 220px at -8% 0%, rgba(43, 117, 196, 0.05), transparent 55%),
			radial-gradient(680px 200px at 108% 10%, rgba(24, 150, 129, 0.05), transparent 58%),
			var(--card-bg);
			box-shadow: 0 16px 32px rgba(44, 67, 96, 0.08);
			overflow: hidden;
			}

			.toolbar-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			flex-wrap: wrap;
			padding: 12px 16px 10px;
			border-bottom: 1px solid rgba(222, 230, 239, 0.92);
			}

			.toolbar-left,
			.toolbar-right {
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;
			}

			.toolbar-bar .el-button {
			padding: 8px 12px;
			border-radius: 8px;
			}

			.toolbar-title {
			font-size: 13px;
			color: #7a8a9f;
			}

			.toolbar-title strong {
			color: var(--text-main);
			font-size: 15px;
			margin-right: 8px;
			}

			.table-wrap {
			padding: 10px 16px 16px;
			}

			.table-shell {
			border-radius: 20px;
			overflow: hidden;
			border: 1px solid rgba(217, 227, 238, 0.98);
			background: rgba(255, 255, 255, 0.95);
			}

			.table-shell .el-table {
			border-radius: 20px;
			overflow: hidden;
			}

			.table-shell .el-table th {
			background: #f7fafc;
			color: #53677d;
			font-weight: 700;
			}

			.menu-name {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			}

			.status-tag,
			.level-tag {
			min-width: 54px;
			text-align: center;
			}

			.dialog-panel .el-dialog {
			border-radius: 24px;
			overflow: hidden;
			}

			.dialog-panel .el-dialog__header {
			padding: 22px 24px 12px;
			background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
			border-bottom: 1px solid rgba(224, 232, 241, 0.92);
			}

			.dialog-panel .el-dialog__title {
			font-weight: 700;
			color: var(--text-main);
			}

			.dialog-panel .el-dialog__body {
			padding: 18px 24px 8px;
			}

			.dialog-footer {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			}

			.empty-wrap {
			padding: 54px 0 72px;
			}

			@media (max-width: 900px) {
			.page-shell {
			padding: 10px;
			}

			.toolbar-bar,
			.table-wrap {
			padding-left: 12px;
			padding-right: 12px;
			}
			}
			</style>
			</head>
			<body>


			<!-- 正文开始 -->
			<div class="layui-fluid">
			<div class="layui-card">
			<div class="layui-card-body">
			<!-- 数据表格 -->
			<table id="resource"></table>
			<div id="app" class="page-shell" v-cloak>
			<section class="card-shell">
			<div class="toolbar-bar">
			<div class="toolbar-left">
			<div class="toolbar-title"><strong>菜单列表</strong></div>
			</div>
			<div class="toolbar-right">
			<el-button size="small" type="primary" plain icon="el-icon-plus" @click="openCreateDialog">新增</el-button>
			<el-button size="small" type="danger" plain icon="el-icon-delete" :disabled="selection.length === 0" @click="removeSelection">删除</el-button>
			<el-button size="small" plain :icon="expandAll ? 'el-icon-folder-opened' : 'el-icon-folder'" @click="toggleExpandAll">
			{{ expandAll ? '收起全部' : '展开全部' }}
			</el-button>
			<el-button size="small" plain icon="el-icon-refresh" :loading="loading" @click="loadTree">刷新</el-button>
			</div>
			</div>
			</div>

			<div class="table-wrap">
			<div class="table-shell">
			<el-table
			ref="treeTable"
			v-loading="loading"
			:key="'resource-tree-' + tableKey"
			:data="tableData"
			row-key="id"
			border
			stripe
			:default-expand-all="expandAll"
			:tree-props="{ children: 'children' }"
			:height="tableHeight"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="52" align="center"></el-table-column>
			<el-table-column label="菜单名称" min-width="260">
			<template slot-scope="scope">
			<div class="menu-name">
			<span>{{ scope.row.name }}</span>
			</div>
			</template>
			</el-table-column>
			<el-table-column prop="code" label="菜单编码" min-width="220" show-overflow-tooltip></el-table-column>
			<el-table-column label="上级菜单" min-width="180" show-overflow-tooltip>
			<template slot-scope="scope">
			{{ parentName(scope.row.resourceId) \|\| '--' }}
			</template>
			</el-table-column>
			<el-table-column label="类型" width="120" align="center">
			<template slot-scope="scope">
			<el-tag class="level-tag" size="mini" :type="levelTagType(scope.row.level)">
			{{ levelText(scope.row.level) }}
			</el-tag>
			</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" width="90" align="center"></el-table-column>
			<el-table-column label="状态" width="100" align="center">
			<template slot-scope="scope">
			<el-tag class="status-tag" size="mini" :type="Number(scope.row.status) === 1 ? 'success' : 'info'">
			{{ Number(scope.row.status) === 1 ? '正常' : '禁用' }}
			</el-tag>
			</template>
			</el-table-column>
			<el-table-column label="操作" width="150" fixed="right" align="center">
			<template slot-scope="scope">
			<el-button type="text" @click="openEditDialog(scope.row)">修改</el-button>
			<el-button type="text" style="color:#f56c6c;" @click="removeRows([scope.row.id])">删除</el-button>
			</template>
			</el-table-column>
			</el-table>
			<div v-if="!loading && tableData.length === 0" class="empty-wrap">
			<el-empty description="暂无菜单数据"></el-empty>
			</div>
			</div>
			</div>
			</section>

			<el-dialog
			class="dialog-panel"
			:title="dialog.mode === 'create' ? '新增菜单' : '修改菜单'"
			:visible.sync="dialog.visible"
			width="680px"
			:close-on-click-modal="false">
			<el-form
			ref="dialogForm"
			:model="dialogForm"
			:rules="dialogRules"
			label-width="100px"
			size="small">
			<el-row :gutter="16">
			<el-col :span="12">
			<el-form-item label="上级菜单" prop="resourceId">
			<el-cascader
			v-model="dialogForm.resourceId"
			:options="parentOptions"
			:props="parentCascaderProps"
			clearable
			filterable
			style="width: 100%;"
			placeholder="请选择上级菜单">
			</el-cascader>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="菜单编码" prop="code">
			<el-input v-model.trim="dialogForm.code" placeholder="请输入菜单编码"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="类型" prop="level">
			<el-select v-model="dialogForm.level" placeholder="请选择类型" style="width: 100%;">
			<el-option label="一级菜单" :value="1"></el-option>
			<el-option label="二级菜单" :value="2"></el-option>
			<el-option label="按钮" :value="3"></el-option>
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="菜单名称" prop="name">
			<el-input v-model.trim="dialogForm.name" placeholder="请输入菜单名称"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="排序" prop="sort">
			<el-input v-model.number="dialogForm.sort" placeholder="请输入排序"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="状态" prop="status">
			<el-select v-model="dialogForm.status" placeholder="请选择状态" style="width: 100%;">
			<el-option label="正常" :value="1"></el-option>
			<el-option label="禁用" :value="0"></el-option>
			</el-select>
			</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
			<el-button @click="dialog.visible = false">取消</el-button>
			<el-button type="primary" :loading="dialog.submitting" @click="submitDialog">保存</el-button>
			</div>
			</el-dialog>
			</div>

			<script type="text/html" id="operate">
			<a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">删除</a>
			</script>

			<!-- 表单弹窗 -->
			<script type="text/html" id="editDialog">
			<form id="detail" lay-filter="detail" class="layui-form" style="margin: 0">
			<input name="id" type="hidden">
			<input name="uuid" type="hidden">
			<input name="level" type="hidden">
			<div class="layui-row">

			<div class="layui-col-md6">

			<div class="layui-form-item">
			<label class="layui-form-label">上级菜单</label>
			<div class="layui-input-block">
			<div id="resourceParentSel" class="ew-xmselect-tree"></div>
			</div>
			</div>

			<div class="layui-form-item">
			<label class="layui-form-label layui-form-required">菜单编码</label>
			<div class="layui-input-block">
			<input name="code" placeholder="请输入菜单编码" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
			</div>
			</div>

			<div class="layui-form-item">
			<label class="layui-form-label layui-form-required">类型</label>
			<div class="layui-input-block">
			<select name="level" lay-vertype="tips" lay-verify="required" required="">
			<option value="">请选择类型</option>
			<option value="1">一级菜单</option>
			<option value="2">二级菜单</option>
			<option value="3">按钮</option>
			</select>
			</div>
			</div>

			</div>

			<div class="layui-col-md6">

			<div class="layui-form-item">
			<label class="layui-form-label layui-form-required">菜单名称</label>
			<div class="layui-input-block">
			<input name="name" placeholder="请输入菜单名称" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
			</div>
			</div>

			<div class="layui-form-item">
			<label class="layui-form-label">排序</label>
			<div class="layui-input-block">
			<input name="sort" placeholder="请输入排序" class="layui-input" lay-verify="number">
			</div>
			</div>

			<div class="layui-form-item">
			<label class="layui-form-label layui-form-required">状态</label>
			<div class="layui-input-block">
			<select name="status" lay-vertype="tips" lay-verify="required" required="">
			<option value="">请选择状态</option>
			<option value="1">正常</option>
			<option value="0">禁用</option>
			</select>
			</div>
			</div>

			</div>
			</div>
			<hr class="layui-bg-gray">
			<div class="layui-form-item text-right">
			<button class="layui-btn" lay-filter="editSubmit" lay-submit="">保存</button>
			<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
			</div>
			</form>
			</script>
			<script type="text/html" id="typeTpl">
			{{# if( d.level === 1 ){ }}
			<span name="level" class="layui-badge layui-badge-green">菜单</span>
			{{# } else if(d.level === 2){ }}
			<span name="level" class="layui-badge layui-badge-green">菜单</span>
			{{# } else if(d.level === 3){ }}
			<span name="level" class="layui-badge layui-badge-gray">按钮</span>
			{{# } }}
			</script>
			<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/js/common.js?v=20260309_i18n_fix1" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>

			<script>
			layui.config({
			base: baseUrl + "/static/layui/lay/modules/"
			}).use(['form','treeTable', 'admin', 'xmSelect'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var admin = layui.admin;
			var treeTable = layui.treeTable;
			var xmSelect = layui.xmSelect;
			var tbDataList = [];

			var insTb = treeTable.render({
			elem: '#resource',
			url: baseUrl+'/resource/tree/auth',
			headers: {token: localStorage.getItem('token')},
			height: 'full-200',
			toolbar: ['<p>',
			'<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加</button> ',
			'<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button>',
			'</p>'].join(''),
			tree: {
			iconIndex: 2, // 折叠图标显示在第几列
			isPidData: true, // 是否是id、pid形式数据
			idName: 'id', // id字段名称
			pidName: 'resourceId' // pid字段名称
			},
			cols: [[
			{type: 'checkbox', fixed: 'left'}
			,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80, hide: true}
			,{field: 'name', align: 'left',title: '菜单名称'}
			,{field: 'code', align: 'center',title: '菜单编码'}
			// ,{field: 'resourceName', align: 'center',title: '父级菜单'}
			// ,{field: 'level$', align: 'center',title: '菜单等级'}
			,{field: 'type', align: 'center',title: '类型', templet: '#typeTpl', width: 120}
			,{field: 'sort', align: 'center',title: '排序'}

			,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:150}
			]],
			done: function (data) {
			$('.ew-tree-table-box').css('height', '100%');
			// insTb.expandAll();
			tbDataList = data;
			limit();
			}
			});

			/* 表格头工具栏点击事件 */
			treeTable.on('toolbar(resource)', function (obj) {
			if (obj.event === 'add') { // 添加
			showEditModel();
			} else if (obj.event === 'del') { // 删除
			var checkRows = insTb.checkStatus();
			if (checkRows.length === 0) {
			layer.msg('请选择要删除的数据', {icon: 2});
			return;
			}
			var ids = checkRows.map(function (d) {
			if (!d.LAY_INDETERMINATE) {
			return d.id;
			} else {
			return null;
			}
			});
			doDel({ids: ids});
			}
			});

			/* 表格操作列点击事件 */
			treeTable.on('tool(resource)', function (obj) {
			if (obj.event === 'edit') { // 修改
			showEditModel(obj.data);
			} else if (obj.event === 'del') { // 删除
			doDel(obj);
			}
			});

			/* 显示表单弹窗 */
			function showEditModel(mData) {
			admin.open({
			type: 1,
			area: '600px',
			title: (mData ? '修改' : '添加') + '权限',
			content: $('#editDialog').html(),
			success: function (layero, dIndex) {
			// 回显表单数据
			form.val('detail', mData);
			// 表单提交事件
			form.on('submit(editSubmit)', function (data) {
			data.field.resourceId = insXmSel.getValue('valueStr');
			var loadIndex = layer.load(2);
			$.ajax({
			url: baseUrl+"/resource/"+(mData?'update':'add')+"/auth",
			headers: {'token': localStorage.getItem('token')},
			data: data.field,
			method: 'POST',
			success: function (res) {
			layer.close(loadIndex);
			if (res.code === 200){
			layer.close(dIndex);
			layer.msg(res.msg, {icon: 1});
			insTb.refresh();
			setTimeout(function () {
			insTb.expand(data.field.resourceId);
			}, 200)
			} else if (res.code === 403){
			top.location.href = baseUrl+"/";
			}else {
			layer.msg(res.msg, {icon: 2});
			}
			}
			})
			return false;
			});

			// 渲染下拉树
			var insXmSel = xmSelect.render({
			el: '#resourceParentSel',
			height: '250px',
			data: insTb.options.data,
			initValue: mData&&mData.resourceId!=null ? [mData.resourceId] : [],
			model: {label: {type: 'text'}},
			prop: {
			name: 'name',
			value: 'id'
			},
			radio: true,
			clickClose: true,
			tree: {
			show: true,
			indent: 15,
			strict: false,
			expandedKeys: false
			}
			});
			// 弹窗不出现滚动条
			$(layero).children('.layui-layer-content').css('overflow', 'visible');
			layui.form.render('select');
			}
			});
			}

			/* 删除 */
			function doDel(obj) {
			layer.confirm('确定要删除选中数据吗？', {
			skin: 'layui-layer-admin',
			shade: .1
			}, function (i) {
			layer.close(i);
			var loadIndex = layer.load(2);
			var ids;
			if (obj.data) {
			ids = [];
			ids[0] = obj.data.id;
			} else {
			ids = obj.ids;
			}
			$.ajax({
			url: baseUrl+"/resource/delete/auth",
			headers: {'token': localStorage.getItem('token')},
			data: {ids: ids},
			method: 'POST',
			success: function (res) {
			layer.close(loadIndex);
			if (res.code === 200){
			layer.msg(res.msg, {icon: 1});
			insTb.refresh();
			} else if (res.code === 403){
			top.location.href = baseUrl+"/";
			} else {
			layer.msg(res.msg, {icon: 2});
			}
			}
			})
			});
			}

			});
			</script>
			<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
			<script type="text/javascript" src="../../static/vue/element/element.js"></script>
			<script type="text/javascript" src="../../static/js/resource/resource.js?v=20260310_resource_vue" charset="utf-8"></script>
			</body>
			</html>