支持工单功能(2/10)

*前端部分
This commit is contained in:
Chenx221 2024-04-17 16:13:34 +08:00
parent ce0a12c3de
commit 1905267984
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
4 changed files with 192 additions and 28 deletions

View File

@ -1,11 +1,13 @@
<?php
use app\assets\QuillAsset;
use yii\helpers\Html;
use yii\widgets\ActiveForm;
/** @var yii\web\View $this */
/** @var app\models\Tickets $model */
/** @var yii\widgets\ActiveForm $form */
QuillAsset::register($this);
?>
<div class="tickets-form">
@ -14,7 +16,15 @@ use yii\widgets\ActiveForm;
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>
<?= $form->field($model, 'description')->hiddenInput()->label(false) ?>
<label class="control-label" for="editor">工单内容</label>
<div id="editor" class="form-control">
</div>
<br>
<div class="form-group">
<?= Html::submitButton('创建', ['class' => 'btn btn-success']) ?>
@ -23,3 +33,23 @@ use yii\widgets\ActiveForm;
<?php ActiveForm::end(); ?>
</div>
<?php
$js = <<<JS
var theme = document.documentElement.getAttribute('data-bs-theme')==='dark'?'bubble':'snow'
const quill = new Quill('#editor', {
theme: theme
});
$('form').on('beforeSubmit', function() {
var length = quill.getLength();
if (length <= 1) {
alert('工单内容不能为空');
return false;
}
var delta = quill.getContents();
var deltaJson = JSON.stringify(delta);
$('#tickets-description').val(deltaJson);
});
JS;
$this->registerJs($js);
?>

View File

@ -18,3 +18,5 @@ $this->params['breadcrumbs'][] = $this->title;
]) ?>
</div>

View File

@ -1,21 +1,76 @@
<?php
use app\assets\FontAwesomeAsset;
use app\assets\QuillAsset;
use app\models\Tickets;
use yii\helpers\Html;
use yii\web\YiiAsset;
use yii\widgets\DetailView;
/** @var yii\web\View $this */
/** @var app\models\Tickets $model */
/** @var string $ticketReplies */
$this->title = '工单: '.$model->title;
$this->title = '工单: ' . $model->title;
$this->params['breadcrumbs'][] = ['label' => '工单支持', 'url' => ['index']];
$this->params['breadcrumbs'][] = '工单ID '.$model->id;
$this->params['breadcrumbs'][] = '工单ID ' . $model->id;
YiiAsset::register($this);
QuillAsset::register($this);
FontAwesomeAsset::register($this);
$this->registerCssFile('@web/css/tickets.css');
?>
<div class="tickets-view">
<div class="tickets-view">
<h1><?= Html::encode($this->title) ?></h1>
<br>
<div class="row">
<div class="col-md-3">
<!-- DetailView -->
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
[
'attribute' => 'status',
'label' => '状态',
'format' => 'raw', // 使用 raw 格式,这样 Yii2 不会对 value 的返回值进行 HTML 编码
'value' => function (Tickets $model) {
switch ($model->status) {
case Tickets::STATUS_OPEN:
return '<span class="badge rounded-pill bg-primary">工单已开启</span>';
case Tickets::STATUS_ADMIN_REPLY:
return '<span class="badge rounded-pill bg-info">管理员已回复</span>';
case Tickets::STATUS_USER_REPLY:
return '<span class="badge rounded-pill bg-secondary">用户已回复</span>';
case Tickets::STATUS_CLOSED:
return '<span class="badge rounded-pill bg-success">工单已关闭</span>';
default:
return '<span class="badge rounded-pill bg-danger">未知状态</span>';
}
}
],
[
'attribute' => 'created_at',
'label' => '创建时间',
'format' => 'raw', // 使用 raw 格式,这样 Yii2 不会对 value 的返回值进行 HTML 编码
'value' => function (Tickets $model) {
$dateTime = new DateTime($model->created_at, new DateTimeZone('GMT+8'));
return $model->created_at . '<br>(' . Yii::$app->formatter->asRelativeTime($dateTime) . ')';
}
],
[
'attribute' => 'updated_at',
'label' => '最近更新时间',
'format' => 'raw', // 使用 raw 格式,这样 Yii2 不会对 value 的返回值进行 HTML 编码
'value' => function (Tickets $model) {
$dateTime = new DateTime($model->updated_at, new DateTimeZone('GMT+8'));
return $model->updated_at . '<br>(' . Yii::$app->formatter->asRelativeTime($dateTime) . ')';
}
]
],
]) ?>
<p>
<?= Html::a('关闭工单', ['delete', 'id' => $model->id], [
'class' => 'btn btn-danger',
@ -25,19 +80,61 @@ YiiAsset::register($this);
],
]) ?>
</p>
</div>
<div class="col-md-9">
<!-- User message input and ticket content -->
<div class="form-control">
<label for="message">回复: </label>
<div id="editor" class="form-control">
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'user_id',
'title',
'description:ntext',
'status',
'created_at',
'updated_at',
'ip',
],
]) ?>
</div>
<br>
<?= Html::button('发送', ['class' => 'btn btn-primary', 'id' => 'send']) ?>
<?= Html::button('重置', ['class' => 'btn btn-link', 'id' => 'reset']) ?>
</div>
<div id="ticket-content" class="form-control">
</div>
</div>
</div>
</div>
</div>
<?php
$core_js = <<<JS
//写的很乱
var theme = document.documentElement.getAttribute('data-bs-theme')==='dark'?'bubble':'snow'
const quill = new Quill('#editor', {
theme: theme
});
function quillGetHTML(inputDelta,skipParse=false) {
var delta = skipParse?inputDelta:JSON.parse(inputDelta);
var tempQuill=new Quill(document.createElement("div"));
tempQuill.setContents(delta);
return tempQuill.root.innerHTML;
}
function generateReply(user, message, date) {
return '<div class="ticket-reply"><div class="ticket-reply-top"><div class="user"><i class="fas fa-user-circle"></i><span class="name">'+user+'</span></div><div class="info"> <span class="type">用户</span> <div class="date">'+date+'</div> </div> </div> <div class="ticket-message">'+message+'</div></div>';
}
function generateAdminReply(user, message, date) {
return '<div class="ticket-reply admin"> <div class="ticket-reply-top"> <div class="user"> <i class="fas fa-user-circle"></i> <span class="name">'+user+'</span> </div> <div class="info"> <span class="type">管理员</span> <div class="date">'+date+'</div> </div> </div> <div class="ticket-message">'+message+'</div></div>';
}
var ticketContent = $model->description;
var ticketContentElement = $('#ticket-content');
ticketContentElement.append(generateReply('您', quillGetHTML(ticketContent,true), '$model->created_at'));
var TicketReplies = $ticketReplies;
for (let i = 0; i < TicketReplies.length; i++) {
let reply = TicketReplies[i];
let message = quillGetHTML(reply.message);
let date = reply.created_at;
if (reply.is_admin !== 1) {
ticketContentElement.append(generateReply(reply.name, message, date));
} else {
ticketContentElement.append(generateAdminReply(reply.name, message, date));
}
}
JS;
$this->registerJs($core_js);
?>

35
web/css/tickets.css Normal file
View File

@ -0,0 +1,35 @@
.ticket-reply {
margin-bottom: 24px;
border: 1px solid #e6e8ec;
background: #fff;
border-radius: 4px;
}
.ticket-reply-top {
border-bottom: 1px solid #e6e8ec;
background: #f6f7f8;
padding: 10px 15px;
}
.ticket-reply .user i {
color: #b9bdc5;
margin-right: 6px;
}
.ticket-reply .info {
display: flex;
justify-content: space-between;
font-size: 12px;
line-height: 18px;
color: #7c8088;
}
.ticket-reply .ticket-message {
padding: 25px 15px;
}
.ticket-reply.admin {
border-color: #d5e7fb;
}
.ticket-reply.admin .ticket-reply-top {
background-color: #e3effc;
border-color: #d5e7fb;
}
.ticket-reply.admin .user i {
color: #1062fe;
}