first commit
This commit is contained in:
root
144
storage/view/admin.blade.php
Executable file
144
storage/view/admin.blade.php
Executable file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>主页</title>
|
||||
<!-- 依 赖 样 式 -->
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<!-- 加 载 样 式 -->
|
||||
<link rel="stylesheet" href="/admin/css/loader.css" />
|
||||
<!-- 布 局 样 式 -->
|
||||
<link rel="stylesheet" href="/admin/css/admin.css" />
|
||||
<!-- 重置样式 -->
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
</head>
|
||||
<!-- 结 构 代 码 -->
|
||||
<body class="layui-layout-body pear-admin">
|
||||
<!-- 布 局 框 架 -->
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<!-- 顶 部 样 式 -->
|
||||
<div class="layui-header">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo">
|
||||
<!-- 标 题 -->
|
||||
<span class="title"></span>
|
||||
</div>
|
||||
<!-- 顶 部 左 侧 功 能 -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="collapse layui-nav-item"><a href="#" class="layui-icon layui-icon-shrink-right"></a></li>
|
||||
<li class="refresh layui-nav-item"><a href="#" class="layui-icon layui-icon-refresh-1" loading = 600></a></li>
|
||||
</ul>
|
||||
<!-- 多 系 统 菜 单 -->
|
||||
<div id="control" class="layui-layout-control"></div>
|
||||
<!-- 顶 部 右 侧 菜 单 -->
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="#" class="menuSearch layui-icon layui-icon-search"></a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
|
||||
<li class="layui-nav-item layui-hide-xs message"></li>
|
||||
<li class="layui-nav-item user">
|
||||
<!-- 头 像 -->
|
||||
<a class="layui-icon layui-icon-username" href="javascript:;"></a>
|
||||
<!-- 功 能 菜 单 -->
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a user-menu-url="/account/index" user-menu-id="10" user-menu-title="基本资料">基本资料</a></dd>
|
||||
<dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<!-- 主 题 配 置 -->
|
||||
<li class="layui-nav-item setting"><a href="#" class="layui-icon layui-icon-more-vertical"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 侧 边 区 域 -->
|
||||
<div class="layui-side layui-bg-black">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo">
|
||||
<!-- 标 题 -->
|
||||
<a href="/"><span class="title"></span></a>
|
||||
</div>
|
||||
<!-- 菜 单 内 容 -->
|
||||
<div class="layui-side-scroll">
|
||||
<div id="sideMenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视 图 页 面 -->
|
||||
<div class="layui-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div class="layui-footer layui-text">
|
||||
<span class="left">
|
||||
Released under the MIT license.
|
||||
</span>
|
||||
<span class="center"></span>
|
||||
</div>
|
||||
<!-- 遮 盖 层 -->
|
||||
<div class="pear-cover"></div>
|
||||
<!-- 加 载 动 画 -->
|
||||
<div class="loader-main">
|
||||
<!-- 动 画 对 象 -->
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移 动 端 便 捷 操 作 -->
|
||||
<div class="pear-collapsed-pe collapse">
|
||||
<a href="#" class="layui-icon layui-icon-shrink-right"></a>
|
||||
</div>
|
||||
<!-- 依 赖 脚 本 -->
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<!-- 框 架 初 始 化 -->
|
||||
<script>
|
||||
|
||||
// Admin
|
||||
window.Admin = {
|
||||
Account: {}
|
||||
};
|
||||
|
||||
layui.use(["admin","jquery","popup","drawer"], function() {
|
||||
var $ = layui.$;
|
||||
var admin = layui.admin;
|
||||
var popup = layui.popup;
|
||||
|
||||
admin.setConfigType("json");
|
||||
admin.setConfigPath("/admin/config");
|
||||
|
||||
admin.render();
|
||||
|
||||
// 登出逻辑
|
||||
admin.logout(function(){
|
||||
$.ajax({
|
||||
url: "/account/logout",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return popup.error(res.msg);
|
||||
}
|
||||
popup.success("注销成功",function(){
|
||||
location.reload();
|
||||
})
|
||||
}
|
||||
});
|
||||
return false;
|
||||
})
|
||||
|
||||
$.ajax({
|
||||
url: "/account/info",
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
window.Admin.Account = res.data;
|
||||
}
|
||||
});
|
||||
|
||||
// 消息点击回调
|
||||
//admin.message(function(id, title, context, form) {});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
409
storage/view/article/index.blade.php
Executable file
409
storage/view/article/index.blade.php
Executable file
@ -0,0 +1,409 @@
|
||||
<?php
|
||||
$articleModule = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\ArticleModuleEnum::cases());
|
||||
|
||||
$articlePublishedStatus = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\ArticlePublishedStatusEnum::cases());
|
||||
|
||||
$articleLocation = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\LocationEnum::cases());
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">创建时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d', strtotime('-1 month')) ?>"
|
||||
name="created_at[]" id="created_at-date-start" class="layui-input inline-block"
|
||||
placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d') ?>" name="created_at[]"
|
||||
id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章类型</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="module">
|
||||
<option value="">请选择</option>
|
||||
<?php foreach ($articleModule as $module): ?>
|
||||
<option value="<?= $module['value'] ?>"><?= $module['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布状态</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="published_status">
|
||||
<option value="">请选择</option>
|
||||
<?php foreach ($articlePublishedStatus as $status): ?>
|
||||
<option value="<?= $status['value'] ?>"><?= $status['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布状态</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="published_status">
|
||||
<option value="">请选择</option>
|
||||
<?php foreach ($articleLocation as $location): ?>
|
||||
<option value="<?= $location['value'] ?>"><?= $location['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
{{-- <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">--}}
|
||||
{{-- <i class="layui-icon layui-icon-delete"></i>删除--}}
|
||||
{{-- </button>--}}
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="publish">发布</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script src="/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const UPDATE_API = "/admin/update";
|
||||
const DELETE_API = "/admin/delete";
|
||||
|
||||
// ----------------------
|
||||
const UPDATE_URL = "/articles/update";
|
||||
|
||||
// page
|
||||
|
||||
|
||||
// api
|
||||
const PUBLISH_API = '/admin/api/article/publish'; // 文章发布
|
||||
const INDEX_API = '/admin/api/news/article'; // 文章列表
|
||||
|
||||
// 新增/预览文章数据
|
||||
const VIEW_API = "/admin/news/view";
|
||||
const INSERT_URL = "/articles/insert";
|
||||
|
||||
// 字段 创建时间 created_at
|
||||
layui.use(["laydate"], function () {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
}, {
|
||||
title: "ID",
|
||||
field: "aid",
|
||||
width: 100,
|
||||
}, {
|
||||
title: "文章标题",
|
||||
field: "title",
|
||||
}, {
|
||||
title: "文章类型",
|
||||
field: "module",
|
||||
}, {
|
||||
field:'published_status', title: '发布状态', templet: function(d){
|
||||
if(d.published_status === '未发布'){
|
||||
return '<span style="color: red">' + d.published_status + '</span>';
|
||||
} else {
|
||||
return '<span style="color: green">' + d.published_status + '</span>';
|
||||
}
|
||||
},
|
||||
// field: "published_status",
|
||||
},{
|
||||
title: "位置",
|
||||
field: "location",
|
||||
},
|
||||
// {
|
||||
// title: "封面",
|
||||
// field: "cover",
|
||||
// templet: function (d) {
|
||||
// return '<img src="'+encodeURI(d['cover'])+'" style="width:100%;height:100%" alt="" />'
|
||||
// },
|
||||
// width: 90,
|
||||
// },
|
||||
{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render() {
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: INDEX_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if (!count) {
|
||||
render();
|
||||
// }
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function (obj) {
|
||||
if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
if (obj.event === "delete") {
|
||||
alert('未生效');
|
||||
} else if (obj.event === "publish") {
|
||||
console.log(obj.data.aid)
|
||||
layer.confirm('确定发布吗？', function (index) {
|
||||
// obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
|
||||
// layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: PUBLISH_API,
|
||||
data: {
|
||||
aid: obj.data.aid
|
||||
},
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: (res) => {
|
||||
layer.close(index);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
},
|
||||
error: function () {
|
||||
return layui.popup.failure("操作失败");
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
|
||||
/*
|
||||
table.reloadData(id, {
|
||||
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function (obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function (data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function (data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function (obj) {
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_API
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function (obj) {
|
||||
let value = obj.data['aid'];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_API + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function (obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function (obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function () {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
16
storage/view/article/module/brand.blade.php
Executable file
16
storage/view/article/module/brand.blade.php
Executable file
@ -0,0 +1,16 @@
|
||||
<?php if ($query['module'] == 0): ?>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">品牌名称</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-group">
|
||||
<input type="text" name="brand_name" id="brand-input" placeholder="请输入品牌名称" value="" autocomplete="off" lay-affix="clear" required lay-verify="required" class="layui-input">
|
||||
<input type="hidden" name="brand" id="brand" placeholder="请输入品牌名称" value="">
|
||||
{{-- <div class="layui-input-split layui-input-suffix" style="cursor: pointer;" id="brand-search">--}}
|
||||
{{-- <i class="layui-icon layui-icon-search"></i>--}}
|
||||
{{-- </div>--}}
|
||||
</div>
|
||||
<res id="datas" style="width: 50px"></res>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
438
storage/view/article/view.blade.php
Executable file
438
storage/view/article/view.blade.php
Executable file
@ -0,0 +1,438 @@
|
||||
<?php
|
||||
$articleLocation = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\LocationEnum::cases());
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>文章新增页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<input type="hidden" name="aid" value="" class="layui-input">
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-group">
|
||||
<input type="text" name="title" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
<div>
|
||||
<span id="translate_title"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('article/module/brand', ['query' => $query])
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">地点</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-col-xs3">
|
||||
<select name="location" lay-search="">
|
||||
<option value="">请选择</option>
|
||||
<?php foreach ($articleLocation as $location): ?>
|
||||
<option value="<?= $location['value'] ?>"><?= $location['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">封面图</label>
|
||||
|
||||
<div class="layui-input-block layui-row">
|
||||
<div class="layui-col-xs3">
|
||||
<img style="width: 30%" class="cover" id="cover" src=""/>
|
||||
<input type="text" style="display:none" name="cover" value="" />
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片合集</label>
|
||||
<div class="layui-upload layui-input-block">
|
||||
<button type="button" class="layui-btn" id="uploadBtn">批量上传</button>
|
||||
<div class="layui-upload-list" id="images-tpl-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="update">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模板 -->
|
||||
<script type="text/html" id="images-tpl">
|
||||
@{{# layui.each(d.list, function(index, item){ }}
|
||||
<div class="img-item" data-id="@{{ index }}">
|
||||
<img src="@{{= item.src }}" class="img-preview">
|
||||
<input type="text" style="display:none" name="images[@{{= index }}][src]" value="@{{= item.src }}" />
|
||||
<div class="img-operate">
|
||||
<i class="layui-icon layui-icon-util"></i>
|
||||
<i class="layui-icon layui-icon-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
@{{# }); }}
|
||||
</script>
|
||||
|
||||
</form>
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
{{--<script src="/admin/js/permission.js"></script>--}}
|
||||
<script>
|
||||
|
||||
// api
|
||||
const UPLOAD_API = "/common/upload-image";
|
||||
const VIEW_API = "/admin/api/article/view";
|
||||
const UPDATE_API = "/admin/api/article/update";
|
||||
|
||||
layui.use(['upload', 'jquery'], function(){
|
||||
const upload = layui.upload;
|
||||
const $ = layui.jquery;
|
||||
|
||||
initViewData()
|
||||
|
||||
// renderPreview();
|
||||
|
||||
|
||||
// let fileList = [];
|
||||
{{--if (fileList) {--}}
|
||||
{{-- initSortable();--}}
|
||||
{{-- initDelete();--}}
|
||||
{{--}--}}
|
||||
|
||||
// console.log(fileList)
|
||||
|
||||
// 图片批量上传
|
||||
// upload.render({
|
||||
// elem: '#uploadBtn',
|
||||
// url: UPLOAD_API,
|
||||
// multiple: true,
|
||||
// accept: 'images',
|
||||
// done: function(res){
|
||||
// if(res.code === 0){
|
||||
// const item = {
|
||||
// // id: res.data.id,
|
||||
// src: res.data.src, // 获取缩略图
|
||||
// // base_path: res.data.base_path // 图片绝对路径
|
||||
// };
|
||||
// // const item = res.data.url
|
||||
//
|
||||
// console.log(fileList)
|
||||
// fileList.push(item);
|
||||
// console.log(fileList)
|
||||
// renderPreview();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
layui.form.on("submit(update)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
function renderImages(data) {
|
||||
const tpl = $('#images-tpl').html();
|
||||
// 始终渲染全部数据但隐藏超出的部分
|
||||
const html = layui.laytpl(tpl).render({
|
||||
list: data
|
||||
});
|
||||
$('#images-tpl-container').html(html);
|
||||
|
||||
// 添加加载更多按钮（仅显示时隐藏部分数据）
|
||||
if(data.length > 30) {
|
||||
$('#images-tpl-container').append(`
|
||||
<div class="load-more-btn">
|
||||
<button type="button" class="pear-btn pear-btn-primary">
|
||||
加载全部图片（剩余${data.length - 30}张）
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// 加载拖动模块
|
||||
initSortable('images-tpl-container');
|
||||
|
||||
// 初始化删除事件
|
||||
initOperate();
|
||||
|
||||
$('.load-more-btn').on('click', function () {
|
||||
$('.img-item:nth-child(n+31)').show();
|
||||
$(this).hide();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 初始化拖拽排序
|
||||
function initSortable(sortElementId) {
|
||||
Sortable.create(document.getElementById(sortElementId), {
|
||||
animation: 150,
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化删除
|
||||
function initOperate() {
|
||||
// 图片删除
|
||||
$('#images-tpl-container').on('click', '.layui-icon-close', function() {
|
||||
const index = $(this).closest('.img-item').data('id');
|
||||
// fileList.splice(index, 1);
|
||||
$(this).closest('.img-item').remove();
|
||||
});
|
||||
|
||||
// 图片编辑
|
||||
$('#images-tpl-container').on('click', '.layui-icon-util', function(e) {
|
||||
var target = e.target;
|
||||
let coverSrc = $(target)?.parent()?.parent()?.find('img')[0]?.currentSrc
|
||||
if (!coverSrc) {
|
||||
layui.popup.failure('设置封面失败。');
|
||||
return;
|
||||
}
|
||||
|
||||
let index = layer.alert('设置', {
|
||||
btn: ['设置为封面'],
|
||||
btnAlign: 'c', // 按钮居中显示
|
||||
btn1: function(){
|
||||
document.querySelector('[id="cover"]').src = coverSrc
|
||||
document.querySelector('[name="cover"]').value = coverSrc
|
||||
// layer.msg('按钮一的回调');
|
||||
layui.layer.close(index)
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$("#brand-search").on('click', function () {
|
||||
console.log($("#brand").val())
|
||||
var brandInput = $("#brand-input");
|
||||
var name = brandInput.val();
|
||||
$("#datas").children().filter('option').remove();
|
||||
$.ajax({
|
||||
method: 'get',
|
||||
url: '/api/v1/articles/brand-search?brand=' + name,
|
||||
success: function (res) {
|
||||
|
||||
var html = '';
|
||||
if (res.code == 0) {
|
||||
$.each(res.data, function (index, obj) {
|
||||
var name = obj.cn_name ? (obj.name + ' [' + obj.cn_name + ']') : obj.name;
|
||||
html += '<option class="res-options" brand-id=' + obj.id + ' brand-name=' + obj.name + '>' + name + '</option>'
|
||||
});
|
||||
$("#datas").append(html);
|
||||
}else{
|
||||
layer.msg(res.msg,{
|
||||
time:500
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}).focus(function () {
|
||||
$("#datas").children().filter('option').remove();
|
||||
});
|
||||
|
||||
$(document).on('click', '.res-options', function(e) {
|
||||
const brandId = $(this).attr('brand-id'); // 获取自定义的 'data-val' 属性
|
||||
const brandName = $(this).attr('brand-name'); // 获取自定义的 'data-val' 属性
|
||||
$('#brand-input').val(brandName)
|
||||
$('#brand').attr('value', brandId)
|
||||
$("#datas").children().filter('option').remove();
|
||||
});
|
||||
|
||||
|
||||
function initViewData() {
|
||||
let viewId = layui.url().search['id']
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
data: {
|
||||
id: viewId
|
||||
},
|
||||
method: 'get',
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 翻译的标题
|
||||
document.getElementById('translate_title').innerHTML = res.data.translate_title
|
||||
|
||||
// 文章封面
|
||||
document.querySelector('[id="cover"]').src = res.data.cover
|
||||
// 文章地点赋值
|
||||
$("select[name=location]").val(res.data.location);
|
||||
layui.form.render("select");
|
||||
|
||||
renderImages(res.data.images);
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 在页面中引入Sortable.js
|
||||
document.write('<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"><\/script>');
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const SAVE_API = "/api/v1/articles/savexxx";
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
console.log(input)
|
||||
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: UPLOAD_API,
|
||||
// value: "/avatar.png",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
// field: "__file__",
|
||||
done: function (res) {
|
||||
console.log(res)
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.src).prev().attr("src", res.data.src + '-w480');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: SAVE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.res-options {
|
||||
padding: 0 10px;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.layui-upload-list {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.img-item {
|
||||
position: relative;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.img-operate {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.img-item:hover .img-operate {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#images-tpl-container .layui-icon-close,
|
||||
#images-tpl-container .layui-icon-util {
|
||||
color: #fff;
|
||||
background: #ff5722;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-upload-list {
|
||||
/* 保持原有样式 */
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
/* 新增显示限制 */
|
||||
.img-item:nth-child(n+31) {
|
||||
display: none;
|
||||
}
|
||||
.load-more-btn {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
358
storage/view/dashboard.blade.php
Executable file
358
storage/view/dashboard.blade.php
Executable file
@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/demos/css/console1.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">未处理文章</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200" t="1591462258798"
|
||||
p-id="942" version="1.1">
|
||||
<path fill="#fcc66f" d="M 262.7 835 c -15.3 0 -28.1 -11.4 -29.8 -26.6 L 174.1 291 c -0.6 -5.1 1 -10.2 4.5 -14 s 8.3 -6 13.4 -6 h 640 c 5.1 0 10 2.2 13.4 6 s 5 8.9 4.5 14 l -58.8 517.4 c -1.7 15.2 -14.5 26.6 -29.8 26.6 H 262.7 Z"
|
||||
p-id="943" />
|
||||
<path fill="#ffd79c" d="M 802 289 l -58.8 517.4 c -0.7 6.1 -5.8 10.6 -11.9 10.6 h 30 c 6.1 0 11.2 -4.6 11.9 -10.6 L 832 289 h -30 Z"
|
||||
p-id="944" />
|
||||
<path fill="#f56e73" d="M 164 307 c -16.5 0 -30 -13.5 -30 -30 v -58 c 0 -16.5 13.5 -30 30 -30 h 696 c 16.5 0 30 13.5 30 30 v 58 c 0 16.5 -13.5 30 -30 30 H 164 Z"
|
||||
p-id="945" />
|
||||
<path fill="#ffa1a8" d="M 860 207 h -30 c 6.6 0 12 5.4 12 12 v 58 c 0 6.6 -5.4 12 -12 12 h 30 c 6.6 0 12 -5.4 12 -12 v -58 c 0 -6.6 -5.4 -12 -12 -12 Z"
|
||||
p-id="946" />
|
||||
<path fill="#65c8ff" d="M 190.9 651.5 c -31.4 0 -56.9 -25.5 -56.9 -56.9 V 219 c 0 -16.5 13.5 -30 30 -30 h 466.2 c 9.9 0 18 8.1 18 18 v 301.1 c 0 34.7 -28.2 62.9 -62.9 62.9 s -62.9 -28.2 -62.9 -62.9 V 393.5 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 68.1 c 0 29.4 -23.9 53.4 -53.4 53.4 s -53.4 -23.9 -53.4 -53.4 v -68.1 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 201.1 c 0.1 31.4 -25.4 56.9 -56.7 56.9 Z"
|
||||
p-id="947" />
|
||||
<path fill="#b3eaff" d="M 277.8 321.5 c -33.1 0 -60 26.9 -60 60 v 201.1 c 0 21.5 -17.4 38.9 -38.9 38.9 c -7.7 0 -14.8 -2.2 -20.8 -6.1 c 6.9 10.9 19 18.1 32.8 18.1 c 21.5 0 38.9 -17.4 38.9 -38.9 V 393.5 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z M 618.3 207 v 289.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -9.3 0 -18 -2.8 -25.2 -7.7 c 8.1 11.9 21.7 19.7 37.2 19.7 c 24.8 0 44.9 -20.1 44.9 -44.9 V 207 h -12 Z M 468.5 321.5 c -33.1 0 -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -6.7 0 -12.9 -1.9 -18.3 -5.1 c 6.2 10.2 17.4 17.1 30.3 17.1 c 19.5 0 35.4 -15.8 35.4 -35.4 v -68.1 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z"
|
||||
p-id="948" />
|
||||
<path fill="#453b56" d="M 698 729.4 m -18 0 a 18 18 0 1 0 36 0 a 18 18 0 1 0 -36 0 Z" p-id="949" />
|
||||
<path fill="#453b56" d="M 860 171 H 632.5 v 0.1 c -0.7 0 -1.5 -0.1 -2.2 -0.1 H 164 c -26.5 0 -48 21.5 -48 48 v 375.6 c 0 41.3 33.6 74.9 74.9 74.9 c 2.7 0 5.4 -0.2 8.1 -0.5 l 16 141.4 c 2.8 24.3 23.3 42.6 47.7 42.6 h 498.6 c 24.4 0 44.9 -18.3 47.7 -42.6 l 55.2 -485.6 c 24.5 -2.1 43.8 -22.7 43.8 -47.8 v -58 c 0 -26.5 -21.5 -48 -48 -48 Z M 190.9 633.5 c -21.5 0 -38.9 -17.4 -38.9 -38.9 V 219 c 0 -6.6 5.4 -12 12 -12 h 466.3 v 301.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -24.8 0 -44.9 -20.1 -44.9 -44.9 V 393.5 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -19.5 0 -35.4 -15.8 -35.4 -35.4 v -68.1 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 201.1 c 0.1 21.5 -17.4 38.9 -38.8 38.9 Z m 582.3 172.9 c -0.7 6.1 -5.8 10.6 -11.9 10.6 H 262.7 c -6.1 0 -11.2 -4.6 -11.9 -10.6 l -6.7 -59 h 396.6 c 9.9 0 18 -8.1 18 -18 s -8.1 -18 -18 -18 H 240 l -6.3 -55.4 c 19.3 -13.6 32.1 -36 32.1 -61.3 V 393.5 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 68.1 c 0 39.4 32 71.4 71.4 71.4 s 71.4 -32 71.4 -71.4 v -68.1 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 114.6 c 0 44.6 36.3 80.9 80.9 80.9 c 44.6 0 80.9 -36.3 80.9 -80.9 V 325 h 161.7 l -54.9 481.4 Z M 872 277 c 0 6.6 -5.4 12 -12 12 H 666.3 v -82 H 860 c 6.6 0 12 5.4 12 12 v 58 Z"
|
||||
p-id="950" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">7日内注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462430908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3170" width="200" height="200">
|
||||
<path d="M532 784.2c0 24.4-19.8 44.3-44.3 44.3s-44.3-19.8-44.3-44.3c0-24.4 44.3-80.3 44.3-80.3s44.3 55.8 44.3 80.3zM766 784.2c0 24.4 19.8 44.3 44.3 44.3 24.4 0 44.3-19.8 44.3-44.3 0-24.4-44.3-80.3-44.3-80.3S766 759.7 766 784.2z"
|
||||
fill="#97DCFF" p-id="3171"></path>
|
||||
<path d="M123.5 471.3c-9.9 0-18-8.1-18-18v-302c0-9.9 8.1-18 18-18h58c9.9 0 18 8.1 18 18v302c0 9.9-8.1 18-18 18h-58z"
|
||||
fill="#FCC66F" p-id="3172"></path>
|
||||
<path d="M181.5 151.3v302h-58v-302h58m0-36h-58c-19.9 0-36 16.1-36 36v302c0 19.9 16.1 36 36 36h58c19.9 0 36-16.1 36-36v-302c0-19.8-16.1-36-36-36z"
|
||||
fill="#453B56" p-id="3173"></path>
|
||||
<path d="M266.4 210.7m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3174"></path>
|
||||
<path d="M430.8 641.1c-9.9 0-18-8.1-18-18v-21.6c0-130.3 106-236.3 236.3-236.3s236.3 106 236.3 236.3v21.6c0 9.9-8.1 18-18 18H430.8z"
|
||||
fill="#FCC66F" p-id="3175"></path>
|
||||
<path d="M649 383.2c-5 0-10 0.2-15 0.6 113.5 7.7 203.3 102.2 203.3 217.7v21.6h30v-21.6c0-120.6-97.7-218.3-218.3-218.3z"
|
||||
fill="#FFD79C" p-id="3176"></path>
|
||||
<path d="M419.6 694.4c-22.1 0-40.1-18-40.1-40.1s18-40.1 40.1-40.1h458.8c22.1 0 40.1 18 40.1 40.1s-18 40.1-40.1 40.1H419.6z"
|
||||
fill="#F56E73" p-id="3177"></path>
|
||||
<path d="M878.4 632.3h-30c12.2 0 22.1 9.9 22.1 22.1s-9.9 22.1-22.1 22.1h30c12.2 0 22.1-9.9 22.1-22.1s-9.9-22.1-22.1-22.1z"
|
||||
fill="#FFA1A8" p-id="3178"></path>
|
||||
<path d="M693.3 846.4c0 24.4-19.8 44.3-44.3 44.3-24.4 0-44.3-19.8-44.3-44.3s44.3-80.3 44.3-80.3 44.3 55.9 44.3 80.3z"
|
||||
fill="#97DCFF" p-id="3179"></path>
|
||||
<path d="M649 908.7c-34.3 0-62.3-27.9-62.3-62.3 0-28.5 36.9-77.2 48.1-91.4 3.4-4.3 8.6-6.8 14.1-6.8s10.7 2.5 14.1 6.8c11.3 14.2 48.1 62.9 48.1 91.4 0.2 34.3-27.8 62.3-62.1 62.3z m0-112.3c-14.1 20.4-26.3 41.9-26.3 50 0 14.5 11.8 26.3 26.3 26.3s26.3-11.8 26.3-26.3c0-8.1-12.1-29.6-26.3-50z"
|
||||
fill="#453B56" p-id="3180"></path>
|
||||
<path d="M903.3 601.9v-0.5c0-134.1-104.4-244.3-236.3-253.6v-30.7c0-68.7-55.9-124.6-124.6-124.6H326.5c-9.9 0-18 8.1-18 18s8.1 18 18 18h215.9c48.8 0 88.6 39.7 88.6 88.6v30.7c-131.8 9.3-236.3 119.4-236.3 253.6v0.5c-19.6 9.3-33.2 29.3-33.2 52.4 0 32 26 58.1 58.1 58.1H459c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.2-27.9 62.2-62.3 0-20.3-18.6-50.7-33.5-71.8h264.9c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.3-27.9 62.3-62.3 0-20.3-18.6-50.7-33.5-71.8h39.4c32 0 58.1-26 58.1-58.1 0-23.1-13.6-43-33.2-52.4zM487.8 810.4c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.2 41.9 26.2 50 0 14.5-11.8 26.3-26.2 26.3z m322.5 0c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.3 41.9 26.3 50-0.1 14.5-11.9 26.3-26.3 26.3zM649 383.2c118.8 0 215.4 94.9 218.1 213.1H430.9c2.8-118.1 99.3-213.1 218.1-213.1z m251.5 271.1c0 12.2-9.9 22.1-22.1 22.1H419.6c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h458.8c12.2 0.1 22.1 10 22.1 22.1z"
|
||||
fill="#453B56" p-id="3181"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">30日内注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462464512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3311" width="200" height="200">
|
||||
<path d="M750.4 216.5h-130v-15.3c0-32.9-26.8-59.7-59.7-59.7h-97.3c-32.9 0-59.7 26.8-59.7 59.7v15.3h-130c-30.7 0-55.6 25-55.6 55.6v72.4c0 9.9 8.1 18 18 18h31.5v478c0 23.2 18.8 42 42 42h405c23.2 0 42-18.8 42-42v-478H788c9.9 0 18-8.1 18-18v-72.4c0-30.6-25-55.6-55.6-55.6z"
|
||||
fill="#FCC66F" p-id="3312"></path>
|
||||
<path d="M708.5 344.5v496c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24v-496h-30z" fill="#FFD79C" p-id="3313"></path>
|
||||
<path d="M309.5 882.5c-23.2 0-42-18.8-42-42V596c0-9.9 8.1-18 18-18h36.8c30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-49.6zM664.9 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8h36.8c9.9 0 18 8.1 18 18v244.5c0 23.2-18.8 42-42 42h-49.6z"
|
||||
fill="#F56E73" p-id="3314"></path>
|
||||
<path d="M708.5 596v244.5c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24V596h-30z" fill="#FFA1A8" p-id="3315"></path>
|
||||
<path d="M475.2 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8 30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-73.6z"
|
||||
fill="#F56E73" p-id="3316"></path>
|
||||
<path d="M560.7 159.5h-18c23 0 41.7 18.7 41.7 41.7V221h18v-19.8c-0.1-23-18.7-41.7-41.7-41.7zM750.4 234.5h-30c20.8 0 37.6 16.8 37.6 37.6v72.4h30v-72.4c0-20.8-16.8-37.6-37.6-37.6z"
|
||||
fill="#FFD79C" p-id="3317"></path>
|
||||
<path d="M750.4 198.5H638.2c-1.4-41.6-35.6-75-77.5-75h-97.3c-41.9 0-76.1 33.4-77.5 75H273.6c-40.6 0-73.6 33-73.6 73.6v72.4c0 19.9 16.1 36 36 36h13.5v460c0 33.1 26.9 60 60 60H714.7c33.1 0 60-26.9 60-60v-460H788c19.9 0 36-16.1 36-36v-72.4c0-40.6-33-73.6-73.6-73.6z m-287.1-39h97.3c22.1 0 40.2 17.2 41.5 39H421.8c1.4-21.8 19.4-39 41.5-39z m-104.2 705h-49.6c-13.3 0-24-10.7-24-24V596h36.8c20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7 0h-73.6V632.8c0-20.3 16.5-36.8 36.8-36.8 20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7-24c0 13.3-10.7 24-24 24h-49.6V632.8c0-20.3 16.5-36.8 36.8-36.8h36.8v244.5z m0-280.5h-36.8c-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8h-36.8v-74.5h279c9.9 0 18-8.1 18-18s-8.1-18-18-18h-279v-69h453V560zM788 344.5H236v-72.4c0-20.8 16.8-37.6 37.6-37.6h476.8c20.8 0 37.6 16.8 37.6 37.6v72.4z"
|
||||
fill="#453B56" p-id="3318"></path>
|
||||
<path d="M621.8 467.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3319"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">总注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462491887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3449" width="200" height="200">
|
||||
<path d="M363.2 807c-9.9 0-18-8.1-18-18v-75.5c0-9.9 8.1-18 18-18h108.5c9.9 0 18 8.1 18 18V789c0 9.9-8.1 18-18 18H363.2z"
|
||||
fill="#F56E73" p-id="3450"></path>
|
||||
<path d="M441.7 713.5h30V789h-30z" fill="#FFA1A8" p-id="3451"></path>
|
||||
<path d="M259.6 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2zM525.1 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2z"
|
||||
fill="#65C8FF" p-id="3452"></path>
|
||||
<path d="M550.2 153.5c-3.2 0-6.2 0.7-9 1.7 9.4 3.6 16.1 12.7 16.1 23.4V380h18V178.6c0.1-13.9-11.2-25.1-25.1-25.1z"
|
||||
fill="#97DCFF" p-id="3453"></path>
|
||||
<path d="M686 330.5H149c-9.9 0-18 8.1-18 18v63c0 9.9 8.1 18 18 18h33.2l45 225c8.7 43.4 47.1 75 91.4 75h197.6c44.3 0 82.7-31.5 91.4-75l45-225H686c9.9 0 18-8.1 18-18v-63c0-9.9-8.1-18-18-18z"
|
||||
fill="#FCC66F" p-id="3454"></path>
|
||||
<path d="M608 411.5L560.1 651c-7 35.2-37.9 60.5-73.8 60.5h30c35.9 0 66.7-25.3 73.8-60.5L638 411.5h-30zM656 348.5h30v63h-30z"
|
||||
fill="#FFD79C" p-id="3455"></path>
|
||||
<path d="M474.2 543.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3456"></path>
|
||||
<path d="M416.9 525.5h-125c-9.9 0-18 8.1-18 18s8.1 18 18 18h125c9.9 0 18-8.1 18-18s-8.1-18-18-18zM893 543.5h-33.4c-65.2 0-118.2 53-118.2 118.2v19.6c0 9.9 8.1 18 18 18s18-8.1 18-18v-19.6c0-45.3 36.9-82.2 82.2-82.2H893c9.9 0 18-8.1 18-18s-8-18-18-18zM772.2 744.2c7-7 7-18.4 0-25.5-7-7-18.4-7-25.5 0s-7 18.4 0 25.5 18.4 7.1 25.5 0z"
|
||||
fill="#453B56" p-id="3457"></path>
|
||||
<path d="M759.5 761.6c-9.9 0-18 8.1-18 18v11.6c0 43.7-35.6 79.3-79.3 79.3H487.3c-26.4 0-48.3-19.9-51.4-45.5h35.8c19.9 0 36-16.1 36-36v-41.5h8.6c52.8 0 98.7-37.6 109.1-89.4l42.1-210.6H686c19.9 0 36-16.1 36-36v-63c0-19.9-16.1-36-36-36h-74.6V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H345.9V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H149c-19.9 0-36 16.1-36 36v63c0 19.9 16.1 36 36 36h18.5l42.1 210.6c10.4 51.8 56.2 89.4 109.1 89.4h8.6V789c0 19.9 16.1 36 36 36h36.6c3.3 45.5 41.2 81.5 87.5 81.5h174.8c63.6 0 115.3-51.7 115.3-115.3v-11.6c0-10-8.1-18-18-18z m-234.4-583c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9H525V178.6z m-265.5 0c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9h-50.3V178.6zM149 411.5v-63h537v63H149z m169.7 300c-35.9 0-66.7-25.3-73.8-60.5l-40.7-203.5h426.6L590.1 651c-7 35.2-37.9 60.5-73.8 60.5H318.7z m44.5 77.5v-41.5h108.5V789H363.2z"
|
||||
fill="#453B56" p-id="3458"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- <div class="layui-row layui-col-space10">--}}
|
||||
{{-- <div class="layui-col-md9">--}}
|
||||
{{-- <div class="layui-card">--}}
|
||||
{{-- <div class="layui-card-body">--}}
|
||||
{{-- <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">--}}
|
||||
{{-- <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- <div class="layui-col-md3">--}}
|
||||
{{-- <div class="layui-card">--}}
|
||||
{{-- <div class="layui-card-header">系统信息</div>--}}
|
||||
{{-- <div class="layui-card-body">--}}
|
||||
{{-- <table class="layui-table">--}}
|
||||
{{-- <colgroup>--}}
|
||||
{{-- <col width="50%">--}}
|
||||
{{-- <col>--}}
|
||||
{{-- </colgroup>--}}
|
||||
{{-- <tbody>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>Workerman版本</td>--}}
|
||||
{{-- <td><?=$workerman_version?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>Webman版本</td>--}}
|
||||
{{-- <td><?=$webman_version?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>WebmanAdmin版本</td>--}}
|
||||
{{-- <td><?=$admin_version?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>PHP版本</td>--}}
|
||||
{{-- <td><?=$php_version?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>MYSQL版本</td>--}}
|
||||
{{-- <td><?=$mysql_version?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- <tr>--}}
|
||||
{{-- <td>操作系统</td>--}}
|
||||
{{-- <td><?=$os?></td>--}}
|
||||
{{-- </tr>--}}
|
||||
{{-- </tbody>--}}
|
||||
{{-- </table>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<script src="/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/admin/component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'echarts', 'element', 'count'], function() {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element,
|
||||
count = layui.count,
|
||||
echarts = layui.echarts;
|
||||
|
||||
{{--count.up("value1", {--}}
|
||||
{{-- time: 4000,--}}
|
||||
{{-- num: <?=$today_user_count?>,--}}
|
||||
{{-- bit: 0,--}}
|
||||
{{-- regulator: 50--}}
|
||||
{{--})--}}
|
||||
|
||||
{{--count.up("value2", {--}}
|
||||
{{-- time: 4000,--}}
|
||||
{{-- num: <?=$day7_user_count?>,--}}
|
||||
{{-- bit: 0,--}}
|
||||
{{-- regulator: 50--}}
|
||||
{{--})--}}
|
||||
|
||||
{{--count.up("value3", {--}}
|
||||
{{-- time: 4000,--}}
|
||||
{{-- num: <?=$day30_user_count?>,--}}
|
||||
{{-- bit: 0,--}}
|
||||
{{-- regulator: 50--}}
|
||||
{{--})--}}
|
||||
|
||||
{{--count.up("value4", {--}}
|
||||
{{-- time: 4000,--}}
|
||||
{{-- bit: 0,--}}
|
||||
{{-- num: <?=$user_count?>,--}}
|
||||
{{-- regulator: 50--}}
|
||||
{{--})--}}
|
||||
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||
var option = {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
bottom: '6%',
|
||||
left: '6%',
|
||||
right: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
//textStyle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(#999)'
|
||||
//}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#939ab6',
|
||||
opacity: .15
|
||||
}
|
||||
},
|
||||
data: <?php //=json_encode(array_keys($day7_detail))?><!---->
|
||||
}, ],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
offset: 15,
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
//textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#999'
|
||||
//}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '2',
|
||||
type: 'line',
|
||||
z: 3,
|
||||
showSymbol: false,
|
||||
smoothMonotone: 'x',
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(59,102,246)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(118,237,252)' // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
shadowBlur: 4,
|
||||
shadowColor: 'rgba(69,126,247,.2)',
|
||||
shadowOffsetY: 4
|
||||
},
|
||||
areaStyle: {
|
||||
//normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(227,233,250,.9)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(248,251,252,.3)' // 100% 处的颜色
|
||||
}]
|
||||
}
|
||||
//}
|
||||
},
|
||||
smooth: true,
|
||||
data: <?php //=json_encode(array_values($day7_detail))?>
|
||||
},]
|
||||
|
||||
};
|
||||
echartsRecords.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
echartsRecords.resize();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
323
storage/view/keywords/index.blade.php
Executable file
323
storage/view/keywords/index.blade.php
Executable file
@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>关键词监控</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">创建时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d', strtotime('-1 month')) ?>"
|
||||
name="created_at[]" id="created_at-date-start" class="layui-input inline-block"
|
||||
placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d') ?>" name="created_at[]"
|
||||
id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="batchExport">
|
||||
<i class="layui-icon layui-icon-export"></i>导出所有关键词
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script src="/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
|
||||
const DELETE_API = '/admin/api/keywords/monitor/delete' // 删除监控词
|
||||
const INDEX_API = '/admin/api/keywords/monitor'; // 表格数据
|
||||
const VIEW_API = "/admin/api/keywords/monitor/view"; // 编辑按钮 - 查看
|
||||
const VIEW_URL = "/admin/keywords/monitor/view"; // 编辑按钮 - 查看
|
||||
const INSERT_API = "/admin/api/news/insert"; // insert 接口
|
||||
const INSERT_URL = "/admin/keywords/monitor/insert"; // insert 页面
|
||||
|
||||
// 字段 创建时间 created_at
|
||||
layui.use(["laydate"], function () {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
}, {
|
||||
title: "关键词",
|
||||
field: "keyword",
|
||||
},{
|
||||
title: "最后查询时间",
|
||||
field: "queried_at",
|
||||
}, {
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render() {
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: INDEX_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if (!count) {
|
||||
render();
|
||||
// }
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function (obj) {
|
||||
if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
if (obj.event === "delete") {
|
||||
layer.confirm('确定删除吗？', function (index) {
|
||||
// obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
|
||||
// layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: {
|
||||
id: obj.data.id
|
||||
},
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: (res) => {
|
||||
layer.close(index);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
},
|
||||
error: function () {
|
||||
return layui.popup.failure("操作失败");
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
|
||||
/*
|
||||
table.reloadData(id, {
|
||||
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function (obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchExport") {
|
||||
batchExport();
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function (data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function (data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function (obj) {
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 下载所有关键词数据
|
||||
let batchExport = function () {
|
||||
window.open('/admin/api/keywords/monitor/export-all', '_blank');
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function (obj) {
|
||||
let value = obj.data['id'];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function (obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function (obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function () {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
69
storage/view/keywords/insert.blade.php
Normal file
69
storage/view/keywords/insert.blade.php
Normal file
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>insert</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<div class="main-container mr-5">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">关键词</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<input type="text" name="keyword" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">监控平台</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="platform[]" value="1" title="百度PC" checked>
|
||||
{{-- <input type="checkbox" name="arr[1]" title="选项2" checked>--}}
|
||||
{{-- <input type="checkbox" name="arr[2]" title="选项3">--}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="insert">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script>
|
||||
// api
|
||||
const INSERT_API = "/admin/api/keywords/monitor/insert"; // 插入新闻
|
||||
|
||||
layui.use(['upload', 'jquery', 'popup'], function(){
|
||||
const $ = layui.jquery;
|
||||
|
||||
layui.form.on("submit(insert)", function (data) {
|
||||
console.log(data)
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
storage/view/keywords/view.blade.php
Normal file
121
storage/view/keywords/view.blade.php
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>insert</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<input type="hidden" name="id" autocomplete="off">
|
||||
<div class="main-container mr-5">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">关键词</label>
|
||||
<div class="layui-input-inline layui-input-wrap">
|
||||
<input type="text" name="keyword" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">监控平台</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="platform[]" value="1" title="百度PC">
|
||||
{{-- <input type="checkbox" name="arr[1]" title="选项2" checked>--}}
|
||||
{{-- <input type="checkbox" name="arr[2]" title="选项3">--}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="test"></div>
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script>
|
||||
// API
|
||||
const VIEW_API = "/admin/api/keywords/monitor/view"; // 获取关键词数据
|
||||
const SAVE_API = "/admin/api/keywords/monitor/save"; // 重新保存数据
|
||||
|
||||
layui.use(['upload', 'jquery', 'popup', 'form'], function(){
|
||||
const $ = layui.jquery;
|
||||
|
||||
initViewData()
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: SAVE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
function initViewData() {
|
||||
let viewId = layui.url().search['id']
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
data: {
|
||||
id: viewId
|
||||
},
|
||||
method: 'get',
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
const form = layui.form;
|
||||
|
||||
const selectedPlatforms = res.data.platform; // 后端数据
|
||||
|
||||
selectedPlatforms.forEach(val => {
|
||||
// 设置 value 对应的 checkbox 为选中
|
||||
document.querySelectorAll('input[name="platform[]"]').forEach(el => {
|
||||
if (el.value == val) {
|
||||
el.checked = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
form.render('checkbox'); // 重新渲染
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
293
storage/view/menu/index.blade.php
Executable file
293
storage/view/menu/index.blade.php
Executable file
@ -0,0 +1,293 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.rule.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.rule.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.rule.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.rule.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script src="/admin/js/common.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
// const SELECT_API = "/rule/select?limit=5000";
|
||||
const INDEX_API = "/admin/api/menu?limit=5000";
|
||||
const DELETE_API = "/rule/delete";
|
||||
const UPDATE_API = "/rule/update";
|
||||
const INSERT_URL = "/admin/menu/insert";
|
||||
const UPDATE_URL = "/admin/menu/update";
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "treetable", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let treeTable = layui.treetable;
|
||||
let util = layui.util;
|
||||
|
||||
// 表格头部列数据
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "标题",
|
||||
field: "title",
|
||||
},{
|
||||
title: "图标",
|
||||
field: "icon",
|
||||
templet: function (d) {
|
||||
return '<i class="layui-icon ' + util.escape(d["icon"]) + '"></i>';
|
||||
}
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "key",
|
||||
field: "key",
|
||||
},{
|
||||
title: "上级菜单",
|
||||
field: "pid",
|
||||
hide: true,
|
||||
templet: function (d) {
|
||||
let field = "pid";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "url",
|
||||
field: "href",
|
||||
},{
|
||||
title: "类型",
|
||||
field: "type",
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
let field = "type";
|
||||
let value = apiResults["type"][d["type"]] || d["type"];
|
||||
let css = {"目录":"layui-bg-blue", "菜单": "layui-bg-green", "权限": "layui-bg-orange"}[value];
|
||||
return '<span class="layui-badge '+css+'">'+util.escape(value)+'</span>';
|
||||
}
|
||||
},{
|
||||
title: "排序",
|
||||
field: "weight",
|
||||
width: 80,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
treeTable.render({
|
||||
elem: "#data-table",
|
||||
url: INDEX_API,
|
||||
treeColIndex: 1,
|
||||
treeIdName: "id",
|
||||
treePidName: "pid",
|
||||
treeDefaultClose: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"]
|
||||
});
|
||||
}
|
||||
|
||||
// 获取下拉菜单及树形组件数据
|
||||
let apis = [];
|
||||
let apiResults = {};
|
||||
apiResults["pid"] = [];
|
||||
apis.push(["pid", "/admin/menu/list?format=tree&type=0,1"]);
|
||||
apiResults["type"] = ["目录","菜单","权限"];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 删除或编辑行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加 批量删除 刷新事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加行
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"520px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑行
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"520px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY], obj);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids, obj) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
return obj ? obj.del() : refreshTable();
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
storage/view/menu/insert.blade.php
Executable file
174
storage/view/menu/insert.blade.php
Executable file
@ -0,0 +1,174 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标识</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="key" required lay-verify="required" autocomplete="off" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" required name="href" value="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="0" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="type" id="type" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="weight" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 接口
|
||||
const INSERT_URL = "/admin/api/menu/insert";
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 上级菜单
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/admin/api/menu/list?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
value: "0",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单类型下拉列表
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
let value = layui.$("#type").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#type",
|
||||
name: "type",
|
||||
initValue: initValue,
|
||||
data: [{"value":"0","name":"目录"},{"value":"1","name":"菜单"},{"value":"2","name":"权限"}],
|
||||
value: "1",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
})
|
||||
});
|
||||
|
||||
// 表单提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_URL,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
208
storage/view/menu/update.blade.php
Executable file
208
storage/view/menu/update.blade.php
Executable file
@ -0,0 +1,208 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标识</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="key" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="href" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="0" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="type" id="type" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="weight" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
let PRIMARY_KEY = "id";
|
||||
const VIEW_API = "/admin/api/menu/view" + location.search;
|
||||
const UPDATE_API = "/admin/api/menu/update";
|
||||
|
||||
// 获取行数据
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 获取上级菜单
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/admin/api/menu/list?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
console.log(value)
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys: initValue},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单类型下拉选择
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
let value = layui.$("#type").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#type",
|
||||
name: "type",
|
||||
initValue: initValue,
|
||||
data: [{"value":"0","name":"目录"},{"value":"1","name":"菜单"},{"value":"2","name":"权限"}],
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
})
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
364
storage/view/news/index.blade.php
Executable file
364
storage/view/news/index.blade.php
Executable file
@ -0,0 +1,364 @@
|
||||
<?php
|
||||
$articleModule = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\ArticleModuleEnum::cases());
|
||||
|
||||
$articlePublishedStatus = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\ArticlePublishedStatusEnum::cases());
|
||||
|
||||
$articleLocation = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\LocationEnum::cases());
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">创建时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d', strtotime('-1 month')) ?>"
|
||||
name="created_at[]" id="created_at-date-start" class="layui-input inline-block"
|
||||
placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d') ?>" name="created_at[]"
|
||||
id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
{{-- <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">--}}
|
||||
{{-- <i class="layui-icon layui-icon-delete"></i>删除--}}
|
||||
{{-- </button>--}}
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script src="/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const UPDATE_API = "/admin/update";
|
||||
const DELETE_API = "/admin/delete";
|
||||
|
||||
// ----------------------
|
||||
const UPDATE_URL = "/articles/update";
|
||||
|
||||
// page
|
||||
|
||||
|
||||
// api
|
||||
const PUBLISH_API = '/admin/api/article/publish'; // 文章发布
|
||||
const INDEX_API = '/admin/api/news'; // 文章列表
|
||||
|
||||
// 新增/预览文章数据
|
||||
const VIEW_API = "/admin/news/view";
|
||||
const INSERT_API = "/admin/api/news/insert";
|
||||
const INSERT_URL = "/admin/news/insert";
|
||||
|
||||
// 字段 创建时间 created_at
|
||||
layui.use(["laydate"], function () {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
}, {
|
||||
title: "文章标题",
|
||||
field: "title",
|
||||
}, {
|
||||
field:'is_record', title: '是否收录', templet: function(d){
|
||||
if(d.is_record == '0'){
|
||||
return '<span style="color: red">' + '未收录' + '</span>';
|
||||
} else {
|
||||
return '<span style="color: green">' + '已收录' + '</span>';
|
||||
}
|
||||
},
|
||||
// field: "published_status",
|
||||
},
|
||||
// {
|
||||
// title: "封面",
|
||||
// field: "cover",
|
||||
// templet: function (d) {
|
||||
// return '<img src="'+encodeURI(d['cover'])+'" style="width:100%;height:100%" alt="" />'
|
||||
// },
|
||||
// width: 90,
|
||||
// },
|
||||
{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render() {
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: INDEX_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if (!count) {
|
||||
render();
|
||||
// }
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function (obj) {
|
||||
if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
if (obj.event === "delete") {
|
||||
alert('未生效');
|
||||
} else if (obj.event === "publish") {
|
||||
console.log(obj.data.aid)
|
||||
layer.confirm('确定发布吗？', function (index) {
|
||||
// obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
|
||||
// layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: PUBLISH_API,
|
||||
data: {
|
||||
aid: obj.data.aid
|
||||
},
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: (res) => {
|
||||
layer.close(index);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
},
|
||||
error: function () {
|
||||
return layui.popup.failure("操作失败");
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
|
||||
/*
|
||||
table.reloadData(id, {
|
||||
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function (obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function (data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function (data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function (obj) {
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function (obj) {
|
||||
let value = obj.data['id'];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_API + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function (obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function (obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function () {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
352
storage/view/news/insert.blade.php
Normal file
352
storage/view/news/insert.blade.php
Normal file
@ -0,0 +1,352 @@
|
||||
<?php
|
||||
$articleLocation = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\LocationEnum::cases());
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>文章新增页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<link
|
||||
href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">关键词</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="keywords" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">描述</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="description" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章封面</label>
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="layui-btn" id="test1">
|
||||
<i class="layui-icon"></i>上传图片
|
||||
</button>
|
||||
<img style="max-height: 150px;" src="" id="cover">
|
||||
<input type="hidden" name="cover" value="" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章内容</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="editor—wrapper">
|
||||
<div id="toolbar-container"><!-- 工具栏 --></div>
|
||||
<div id="editor-container"><!-- 编辑器 --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="update">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
|
||||
<script>
|
||||
// api
|
||||
const INSERT_API = "/admin/api/news/insert"; // 插入新闻
|
||||
const UPLOAD_API = '/upload/image' // 上传图片
|
||||
const { createEditor, createToolbar } = window.wangEditor
|
||||
|
||||
const editorConfig = {
|
||||
placeholder: 'Type here...',
|
||||
onChange(editor) {
|
||||
const html = editor.getHtml()
|
||||
console.log('editor content', html)
|
||||
// 也可以同步到 <textarea>
|
||||
},
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: '/upload/image',
|
||||
fieldName: "file",
|
||||
headers: {}
|
||||
},
|
||||
editorConfig: {
|
||||
// ✅ 启用 base64 粘贴图片
|
||||
paste: {
|
||||
// 默认关闭，要手动开启
|
||||
allowPasteImage: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const editor = createEditor({
|
||||
selector: '#editor-container',
|
||||
html: '<p><br></p>',
|
||||
config: editorConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
|
||||
const toolbarConfig = {}
|
||||
|
||||
const toolbar = createToolbar({
|
||||
editor,
|
||||
selector: '#toolbar-container',
|
||||
config: toolbarConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
|
||||
layui.use(['upload', 'jquery'], function(){
|
||||
const upload = layui.upload;
|
||||
const $ = layui.jquery;
|
||||
|
||||
//执行实例
|
||||
var uploadInst = upload.render({
|
||||
elem: '#test1' //绑定元素
|
||||
,url: UPLOAD_API // 上传接口，实际使用时改成您自己的上传接口即可。
|
||||
,done: function(res){
|
||||
//上传完毕回调
|
||||
console.log(res)
|
||||
// 若上传失败
|
||||
if(res.code > 0){
|
||||
return layer.msg('上传失败');
|
||||
}
|
||||
// 上传成功的一些操作
|
||||
// …
|
||||
document.querySelector('[id="cover"]').src = res.data.url
|
||||
$("input[name=cover]").val(res.data.url);
|
||||
}
|
||||
,error: function(){
|
||||
//请求异常回调
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
layui.form.on("submit(update)", function (data) {
|
||||
if (data) {
|
||||
data.field.content = editor.getHtml()
|
||||
}
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$(document).on('click', '.res-options', function(e) {
|
||||
const brandId = $(this).attr('brand-id'); // 获取自定义的 'data-val' 属性
|
||||
const brandName = $(this).attr('brand-name'); // 获取自定义的 'data-val' 属性
|
||||
$('#brand-input').val(brandName)
|
||||
$('#brand').attr('value', brandId)
|
||||
$("#datas").children().filter('option').remove();
|
||||
});
|
||||
|
||||
|
||||
function initViewData() {
|
||||
let viewId = layui.url().search['id']
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
data: {
|
||||
id: viewId
|
||||
},
|
||||
method: 'get',
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 翻译的标题
|
||||
document.getElementById('translate_title').innerHTML = res.data.translate_title
|
||||
|
||||
// 文章封面
|
||||
document.querySelector('[id="cover"]').src = res.data.cover
|
||||
// 文章地点赋值
|
||||
$("select[name=location]").val(res.data.location);
|
||||
layui.form.render("select");
|
||||
|
||||
renderImages(res.data.images);
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const SAVE_API = "/api/v1/articles/savexxx";
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
console.log(input)
|
||||
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: '',
|
||||
// value: "/avatar.png",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
// field: "__file__",
|
||||
done: function (res) {
|
||||
console.log(res)
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.src).prev().attr("src", res.data.src + '-w480');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: SAVE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#editor—wrapper {
|
||||
border: 1px solid #ccc;
|
||||
z-index: 100; /* 按需定义 */
|
||||
}
|
||||
#toolbar-container {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
#editor-container {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.res-options {
|
||||
padding: 0 10px;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.layui-upload-list {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.img-item {
|
||||
position: relative;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.img-operate {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.img-item:hover .img-operate {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#images-tpl-container .layui-icon-close,
|
||||
#images-tpl-container .layui-icon-util {
|
||||
color: #fff;
|
||||
background: #ff5722;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-upload-list {
|
||||
/* 保持原有样式 */
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
/* 新增显示限制 */
|
||||
.img-item:nth-child(n+31) {
|
||||
display: none;
|
||||
}
|
||||
.load-more-btn {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
16
storage/view/news/module/brand.blade.php
Executable file
16
storage/view/news/module/brand.blade.php
Executable file
@ -0,0 +1,16 @@
|
||||
<?php if ($query['module'] == 0): ?>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">品牌名称</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-group">
|
||||
<input type="text" name="brand_name" id="brand-input" placeholder="请输入品牌名称" value="" autocomplete="off" lay-affix="clear" required lay-verify="required" class="layui-input">
|
||||
<input type="hidden" name="brand" id="brand" placeholder="请输入品牌名称" value="">
|
||||
{{-- <div class="layui-input-split layui-input-suffix" style="cursor: pointer;" id="brand-search">--}}
|
||||
{{-- <i class="layui-icon layui-icon-search"></i>--}}
|
||||
{{-- </div>--}}
|
||||
</div>
|
||||
<res id="datas" style="width: 50px"></res>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
289
storage/view/news/view.blade.php
Normal file
289
storage/view/news/view.blade.php
Normal file
@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>文章新增页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<link
|
||||
href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<input type="hidden" name="id" value="" autocomplete="off">
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">关键词</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="keywords" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">描述</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="description" value="" required lay-verify="required" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章封面</label>
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="layui-btn" id="test1">
|
||||
<i class="layui-icon"></i>上传图片
|
||||
</button>
|
||||
<img style="max-height: 150px;" src="" id="cover">
|
||||
<input type="hidden" name="cover" value="" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章内容</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="editor—wrapper">
|
||||
<div id="toolbar-container"><!-- 工具栏 --></div>
|
||||
<div id="editor-container"><!-- 编辑器 --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
|
||||
<script>
|
||||
// api
|
||||
const SAVE_API = "/admin/api/news/update"; // 更新新闻
|
||||
const UPLOAD_API = '/upload/image' // 上传图片
|
||||
const VIEW_API = '/admin/api/news/view'; // 查看文章信息
|
||||
const { createEditor, createToolbar } = window.wangEditor
|
||||
|
||||
const editorConfig = {
|
||||
placeholder: 'Type here...',
|
||||
onChange(editor) {
|
||||
const html = editor.getHtml()
|
||||
console.log('editor content', html)
|
||||
// 也可以同步到 <textarea>
|
||||
},
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: '/upload/image',
|
||||
fieldName: "file",
|
||||
headers: {}
|
||||
},
|
||||
editorConfig: {
|
||||
// ✅ 启用 base64 粘贴图片
|
||||
paste: {
|
||||
// 默认关闭，要手动开启
|
||||
allowPasteImage: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const editor = createEditor({
|
||||
selector: '#editor-container',
|
||||
html: '<p><br></p>',
|
||||
config: editorConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
|
||||
const toolbarConfig = {}
|
||||
|
||||
const toolbar = createToolbar({
|
||||
editor,
|
||||
selector: '#toolbar-container',
|
||||
config: toolbarConfig,
|
||||
mode: 'default', // or 'simple'
|
||||
})
|
||||
|
||||
layui.use(['upload', 'jquery', 'popup'], function(){
|
||||
const upload = layui.upload;
|
||||
const $ = layui.jquery;
|
||||
|
||||
initViewData()
|
||||
|
||||
//执行实例
|
||||
var uploadInst = upload.render({
|
||||
elem: '#test1' //绑定元素
|
||||
,url: UPLOAD_API // 上传接口，实际使用时改成您自己的上传接口即可。
|
||||
,done: function(res){
|
||||
//上传完毕回调
|
||||
console.log(res)
|
||||
// 若上传失败
|
||||
if(res.code > 0){
|
||||
return layer.msg('上传失败');
|
||||
}
|
||||
// 上传成功的一些操作
|
||||
// …
|
||||
document.querySelector('[id="cover"]').src = res.data.url
|
||||
$("input[name=cover]").val(res.data.url);
|
||||
}
|
||||
,error: function(){
|
||||
//请求异常回调
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
if (data) {
|
||||
data.field.content = editor.getHtml()
|
||||
}
|
||||
layui.$.ajax({
|
||||
url: SAVE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
function initViewData() {
|
||||
let viewId = layui.url().search['id']
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
data: {
|
||||
id: viewId
|
||||
},
|
||||
method: 'get',
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 文章封面
|
||||
document.querySelector('[id="cover"]').src = res.data.cover
|
||||
$("[name=cover]").val(res.data.cover);
|
||||
|
||||
editor.setHtml(res.data.content)
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#editor—wrapper {
|
||||
border: 1px solid #ccc;
|
||||
z-index: 100; /* 按需定义 */
|
||||
}
|
||||
#toolbar-container {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
#editor-container {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.res-options {
|
||||
padding: 0 10px;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.layui-upload-list {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.img-item {
|
||||
position: relative;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.img-operate {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.img-item:hover .img-operate {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#images-tpl-container .layui-icon-close,
|
||||
#images-tpl-container .layui-icon-util {
|
||||
color: #fff;
|
||||
background: #ff5722;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-upload-list {
|
||||
/* 保持原有样式 */
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
gap: 15px;
|
||||
}
|
||||
/* 新增显示限制 */
|
||||
.img-item:nth-child(n+31) {
|
||||
display: none;
|
||||
}
|
||||
.load-more-btn {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
408
storage/view/spider-article/index.blade.php
Executable file
408
storage/view/spider-article/index.blade.php
Executable file
@ -0,0 +1,408 @@
|
||||
<?php
|
||||
|
||||
$articleModule = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\ArticleModuleEnum::cases());
|
||||
|
||||
$articlePublishedStatus = array_map(fn($case) => [
|
||||
'label' => ucfirst($case->toString()),
|
||||
'value' => $case->value,
|
||||
], \App\Enums\SpiderArticlePublishedStatusEnum::cases());
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
<link rel="stylesheet" href="/admin/css/reset.css"/>
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">创建时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d', strtotime('-1 month')) ?>"
|
||||
name="created_at[]" id="created_at-date-start" class="layui-input inline-block"
|
||||
placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" value="<?= date('Y-m-d') ?>" name="created_at[]"
|
||||
id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章类型</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="module">
|
||||
<option value="">请选择</option>
|
||||
<?php foreach ($articleModule as $module): ?>
|
||||
<option value="<?= $module['value'] ?>"><?= $module['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布状态</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="published_status">
|
||||
<?php foreach ($articlePublishedStatus as $status): ?>
|
||||
<option value="<?= $status['value'] ?>"><?= $status['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="pre-publish">预发布</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit">预览数据</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script src="/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const UPDATE_API = "/admin/update";
|
||||
const DELETE_API = "/admin/delete";
|
||||
|
||||
// ----------------------
|
||||
const UPDATE_URL = "/articles/update";
|
||||
|
||||
// page
|
||||
const VIEW_URL = "/admin/spider-article/view";
|
||||
|
||||
// api
|
||||
const INDEX_API = '/admin/api/spider-article';
|
||||
const PRE_PUBLISH_API = '/admin/api/spider-article/pre-publish';
|
||||
|
||||
// 字段 创建时间 created_at
|
||||
layui.use(["laydate"], function () {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
}, {
|
||||
title: "文章标题",
|
||||
field: "title",
|
||||
}, {
|
||||
title: "文章类型",
|
||||
field: "module",
|
||||
}, {
|
||||
field:'published_status', title: '发布状态', templet: function(d){
|
||||
if(d.published_status === '未同步'){
|
||||
return '<span style="color: red">' + d.published_status + '</span>';
|
||||
} else {
|
||||
return '<span style="color: green">' + d.published_status + '</span>';
|
||||
}
|
||||
},
|
||||
// field: "published_status",
|
||||
}, {
|
||||
title: "采集时间",
|
||||
field: "created_at",
|
||||
}, {
|
||||
title: "来源链接",
|
||||
field: "source_url",
|
||||
}, {
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render() {
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: INDEX_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["roles", "/role/select?format=select"]);
|
||||
let apiResults = {};
|
||||
apiResults["roles"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function (obj) {
|
||||
if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
if (obj.event === "delete") {
|
||||
alert('未生效');
|
||||
}
|
||||
|
||||
// 预发布
|
||||
if (obj.event === 'pre-publish') {
|
||||
console.log(obj.data.id)
|
||||
layer.confirm('确定发布吗？', function (index) {
|
||||
// obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
|
||||
// layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: PRE_PUBLISH_API,
|
||||
data: {
|
||||
id: obj.data.id
|
||||
},
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: (res) => {
|
||||
layer.close(index);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
},
|
||||
error: function () {
|
||||
return layui.popup.failure("操作失败");
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
|
||||
/*
|
||||
table.reloadData(id, {
|
||||
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function (obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function (data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function (data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function (obj) {
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function (obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "预览",
|
||||
shade: 0.1,
|
||||
area: [common.isModile() ? "100%" : "98%", common.isModile() ? "100%" : "95%"],
|
||||
content: VIEW_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function (obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function (obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function () {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
208
storage/view/spider-article/update.blade.php
Executable file
208
storage/view/spider-article/update.blade.php
Executable file
@ -0,0 +1,208 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标识</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="key" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="href" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="0" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="type" id="type" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="weight" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script src="/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
let PRIMARY_KEY = "id";
|
||||
const VIEW_API = "/admin/api/menu/view" + location.search;
|
||||
const UPDATE_API = "/admin/api/menu/update";
|
||||
|
||||
// 获取行数据
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 获取上级菜单
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/admin/api/menu/list?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
console.log(value)
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys: initValue},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单类型下拉选择
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
let value = layui.$("#type").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#type",
|
||||
name: "type",
|
||||
initValue: initValue,
|
||||
data: [{"value":"0","name":"目录"},{"value":"1","name":"菜单"},{"value":"2","name":"权限"}],
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
})
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
151
storage/view/spider-article/view.blade.php
Executable file
151
storage/view/spider-article/view.blade.php
Executable file
@ -0,0 +1,151 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">品牌名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="brand" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">源数据</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="source_url" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="module" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图集</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="images"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<style>
|
||||
.images-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<script id="ID-demo-tpl" type="text/html">
|
||||
<div class="layui-col-space1" style="display:grid;grid-template-columns: auto auto auto;">
|
||||
@{{# d.forEach(function(item) { }}
|
||||
<div class="images-item">
|
||||
<img loading="lazy" style="width: 100%" src="@{{= item.src }}" >
|
||||
</div>
|
||||
@{{# }); }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/component/pear/pear.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
let PRIMARY_KEY = "id";
|
||||
|
||||
// api
|
||||
const VIEW_API = "/admin/api/spider-article/view"
|
||||
const UPDATE_API = "/admin/api/menu/update";
|
||||
|
||||
// 获取行数据
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let viewId = layui.url().search['id']
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: VIEW_API,
|
||||
data: {
|
||||
id: viewId
|
||||
},
|
||||
method: 'get',
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data, function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
// if (key === "password") {
|
||||
// obj.attr("placeholder", "不更新密码请留空");
|
||||
// return;
|
||||
// }
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
renderImages(res.data.images);
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 渲染图集
|
||||
function renderImages(images) {
|
||||
var laytpl = layui.laytpl;
|
||||
var template = document.getElementById('ID-demo-tpl').innerHTML; // 获取模板字符
|
||||
var target = document.getElementById('images'); // 输出结果的目标元素
|
||||
|
||||
// 渲染并输出结果
|
||||
laytpl(template).render(images, function(html) {
|
||||
target.innerHTML = html;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user