projectmanager/app/project/view/demo/index.html

{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="breadcrumb"}
<span class="layui-breadcrumb">
	<a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
	<a><cite>Demo管理</cite></a>
</span>
{/block}
{block name="body"}
<div class="table-content p-3">
	<div class="layui-form-bar border-t border-x">
		<button class="layui-btn layui-btn-sm " id="add-demo">+ 添加Demo</button>
		<button class="layui-btn layui-btn-sm" id="refresh-btn">刷新</button>
		<button class="layui-btn layui-btn-sm" id="batch_delete">批量删除</button>
	</div>
	<table class="layui-hide" id="demoList" lay-filter="demoList"></table>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool', 'gouguEdit', 'gouguComment', 'gouguSchedule', 'employeepicker', 'editormd'];
	function gouguInit() {
		var table = layui.table, tool = layui.tool;
		var $ = layui.jquery;

		// 刷新按钮
		$("#refresh-btn").on("click", function () {
			location.reload();
		});

		//新增计划按钮
		$("#add-demo").on("click", function () {
			tool.open("/project/demo/add");
		});


		// 合并删除和编辑操作的监听函数
		table.on('tool(demoList)', function (obj) {
			var data = obj.data; // 获取当前行的数据
			var id = data.id; // 获取当前行数据的id

			if (obj.event === 'view') {
				// 查看详情
				layui.layer.open({
					type: 2, // iframe层
					title: 'DEMO详情',
					shadeClose: true,
					shade: 0.8,
					area: ['70%', '90%'], // 宽高
					content: '/project/demo/view/id/' + id,
				});
			} else if (obj.event === 'edit') {
				// 编辑
				layui.layer.open({
					type: 2, // iframe层
					title: '编辑DEMO',
					shadeClose: true,
					shade: 0.8,
					area: ['70%', '90%'], // 宽高
					content: '/project/demo/edit/id/' + id,
				});
			} else if (obj.event === 'delete') {
				// 删除
				layui.layer.confirm(
					"确定删除该内容吗？",
					{ icon: 3, title: "提示" },
					function (index) {
						$.post(
							"/project/demo/delete",
							{ id: data.id },
							function (res) {
								if (res.code === 0) {
									layui.layer.msg(res.msg);
									obj.del(); // 删除表格中的对应行数据
								} else {
									layui.layer.msg(res.msg);
								}
							}
						);
						layui.layer.close(index);
					}
				);
			}
		});

		//批量删除数据
		$("#batch_delete").on("click", function () {
			var checkStatus = table.checkStatus('demoList');
			var data = checkStatus.data;
			var ids = data.map(item => item.id);

			if (ids.length === 0) {
				layui.layer.msg("请选择要删除的数据");
				return;
			}

			layui.layer.confirm(
				"确定删除选中的内容吗？",
				{ icon: 3, title: "提示" },
				function (index) {
					$.post(
						"/project/demo/batch_delete",
						{ ids: ids },
						function (res) {
							if (res.code === 0) {
								layui.layer.msg("批量删除成功");
								location.reload(); // 重新加载表格数据
							} else {
								layui.layer.msg(res.msg);
							}
						}
					);
					layui.layer.close(index);
				}
			);
		});

		//渲染表格
		layui.pageTable = table.render({
			elem: '#demoList',
			title: 'Demo列表',
			cellMinWidth: 80,
			page: true, //开启分页
			limit: 20,
			height: 'full-130',
			url: "/project/demo/index", //数据接口
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print', {
				title: 'Demo列表',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			cols: [[
				{ type: 'checkbox', fixed: 'left' },
				{
					field: 'name', title: '项目名称', align: 'center', width: 250, sort: true, rowspan: 2, templet: function (d) {
						var html = '<span>' + d.name + '</span>';
						return html;
					}
				}, {
					field: 'url', title: '网址(点击复制)', align: 'center', width: 350, rowspan: 2, sort: true, templet: function (d) {
						var html = '<span style="cursor: pointer; color: #01AAED;" onclick="copyToClipboard(\'' + d.url + '\')">' + d.url + '</span>';
						return html;
					}
				}
				, {
					field: 'url_cate', title: '网址类型', align: 'center', width: 120, sort: true, rowspan: 2, templet: function (d) {
						var html = '<span>' + d.url_cate + '</span>';
						return html;
					}
				}, {
					field: 'cate', title: '项目类型', align: 'center', width: 120, sort: true, rowspan: 2, templet: function (d) {
						var html = '<span>' + d.cate + '</span>';
						return html;
					}
				}, {
					field: "language",
					title: "项目语言",
					align: "center",
					rowspan: 2,
					templet: function (d) {
						if (d.language) {
							var html = '<span class="a1-' + d.language + '">' + d.language + "</span>";
							return html;
						} else {
							return "未填写";
						}
					}
				}, {
					field: "remark",
					title: "备注",
					align: "center",
					rowspan: 2,
					templet: function (d) {
						if (d.remark) {
							var html = '<span class="a1-' + d.remark + '">' + d.remark + "</span>";
							return html;
						} else {
							return "";
						}
					},
				}, {
					fixed: 'right',
					title: "操作",
					align: "center",
					width: 220,
					minWidth: 220,
					toolbar: "#barDemo",
				},

			]]
		});

		$('.layui-form-bar').on('click', '.add-project', function () {
			tool.open('/project/index/add');
		});
	}

	// 添加复制到剪切板的函数
	function copyToClipboard(text) {
		navigator.clipboard.writeText(text).then(function () {
			// 复制成功后，使用Layui的layer.msg显示提示
			layer.msg('复制成功', { icon: 1, time: 1000 });
		}, function (err) {
			// 复制失败处理
			layer.msg('复制失败', { icon: 2 });
		});
	}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
{/block}
<!-- /脚本 -->