feature: 面板

This commit is contained in:
zhuyu 2025-05-27 09:30:20 +08:00
parent 27310f5a3c
commit 910edcb047
3 changed files with 96 additions and 11 deletions

View File

@ -30,6 +30,7 @@
/* 卡片样式 */
.card {
position: relative; /* ✅ 这行是关键,必须有 */
background: #fff;
border: 1px solid #e0e4e8;
border-radius: 6px;
@ -40,6 +41,7 @@
gap: 8px;
transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
@ -67,6 +69,27 @@
color: #999;
}
/* 状态角标 */
.badge {
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
color: white;
background-color: #999;
z-index: 1; /* 避免被遮挡 */
}
/* 按状态区分颜色 */
.status-1 { background-color: #f39c12; } /* 待完成 - 橙色 */
.status-2 { background-color: #2ecc71; } /* 已完成 - 绿色 */
.status-3 { background-color: #3498db; } /* 待审核 - 蓝色 */
.status-4 { background-color: #1abc9c; } /* 已通过 - 青色 */
.status-5 { background-color: #e74c3c; } /* 已驳回 - 红色 */
.status-6 { background-color: #9b59b6; } /* 待执行 - 紫色 */
/* 响应式小屏变成1列 */
@media (max-width: 1024px) {
.dashboard {
@ -92,11 +115,20 @@
<h3 class="section-title">每日任务</h3>
{if $day}
{foreach $day as $item}
{if $item->status != 1}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
{if $item->status == 1 || $item->status == 5}
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{/if}
<div class="badge status-{$item.status}">
{if $item.status == 1}待完成
{elseif $item.status == 2}已完成
{elseif $item.status == 3}待审核
{elseif $item.status == 4}已通过
{elseif $item.status == 5}已驳回
{elseif $item.status == 6}待执行
{/if}
</div>
<div class="title">{$item->title}</div>
<div class="note">{$item->desc}</div>
</div>
@ -111,11 +143,20 @@
<h3 class="section-title">每周任务</h3>
{if $week}
{foreach $week as $item}
{if $item->status != 1}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
{if $item->status == 1 || $item->status == 5}
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{/if}
<div class="badge status-{$item.status}">
{if $item.status == 1}待完成
{elseif $item.status == 2}已完成
{elseif $item.status == 3}待审核
{elseif $item.status == 4}已通过
{elseif $item.status == 5}已驳回
{elseif $item.status == 6}待执行
{/if}
</div>
<div class="title">{$item->title}</div>
<div class="note">{$item->desc}</div>
</div>
@ -130,11 +171,20 @@
<h3 class="section-title">每月任务</h3>
{if $month}
{foreach $month as $item}
{if $item->status != 1}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
{if $item->status == 1 || $item->status == 5}
<div class="card spec_add_btn" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{else}
<div class="card completed" data-url="/admin/dashboard/task_complete/ids/{$item->id}">
{/if}
<div class="badge status-{$item.status}">
{if $item.status == 1}待完成
{elseif $item.status == 2}已完成
{elseif $item.status == 3}待审核
{elseif $item.status == 4}已通过
{elseif $item.status == 5}已驳回
{elseif $item.status == 6}待执行
{/if}
</div>
<div class="title">{$item->title}</div>
<div class="note">{$item->desc}</div>
</div>

View File

@ -16,7 +16,7 @@
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Prove_desc')}:</label>
<div class="col-xs-12 col-sm-8">
<textarea id="c-prove_desc" class="form-control" name="row[prove_desc]" rows="3"></textarea>
<textarea id="c-prove_desc" class="form-control" name="row[prove_desc]" rows="3">{$row.prove_desc|htmlentities}</textarea>
</div>
</div>
@ -24,9 +24,10 @@
<label class="control-label col-xs-12 col-sm-3">文件地址</label>
<div class="col-xs-12">
<div class="input-group">
<input id="c-prove_file_path" class="form-control" size="50" name="row[prove_file_path]" type="text" value="">
<input id="c-prove_file_path" class="form-control" size="50" name="row[prove_file_path]" type="text" value="{$row.path|htmlentities}">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-path" class="btn btn-danger plupload" data-input-id="c-prove_file_path" data-mimetype="*" data-multiple="false" data-preview-id="p-path"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><a href="{$row.url}" class="btn btn-primary btn-info btn-preview" data-type="{$row.filetype}">预览</a></span>
</div>
<span class="msg-box n-right" for="c-prove_file_path"></span>
</div>

View File

@ -96,6 +96,40 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
},
task_complete: function () {
$(document).on('click', '.btn-preview', function (e) {
e.preventDefault();
var fileType = $(this).data('type'); // 自动从 data-type 获取,比如 pdf, jpg, doc
var url = $(this).data('url');
if (fileType === 'pdf') {
Layer.open({
type: 2,
title: '预览PDF文件',
area: ['80%', '80%'],
content: url
});
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileType)) {
Layer.photos({
photos: {
"title": "图片预览",
"data": [{"src": url}]
},
anim: 5
});
} else if (['mp4', 'webm', 'ogg'].includes(fileType)) {
Layer.open({
type: 1,
title: '视频预览',
area: ['800px', '500px'],
content: `<video src="${url}" width="100%" height="100%" controls autoplay></video>`
});
} else {
window.open(url, '_blank');
}
});
Form.api.bindevent($("form[role=form]"), function(data, ret){
//这里是表单提交处理成功后的回调函数接收来自php的返回数据
Fast.api.close(data);//这里是重点