支持工单功能(2/10)
*前端部分
This commit is contained in:
parent
ce0a12c3de
commit
1905267984
GPG Key ID:
D7A9EC07024C3021
@ -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);
|
||||
?>
|
||||
@ -18,3 +18,5 @@ $this->params['breadcrumbs'][] = $this->title;
|
||||
]) ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -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
35
web/css/tickets.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user