支持工单功能(2/10)

*前端部分

views/tickets/_form.php

@@ -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);
+?>

views/tickets/create.php

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

views/tickets/view.php

@@ -1,43 +1,140 @@
 <?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>
+        <h1><?= Html::encode($this->title) ?></h1>
+        <br>
 
-    <p>
-        <?= Html::a('关闭工单', ['delete', 'id' => $model->id], [
-            'class' => 'btn btn-danger',
-            'data' => [
-                'confirm' => 'Are you sure you want to delete this item?',
-                'method' => 'post',
-            ],
-        ]) ?>
-    </p>
 
-    <?= DetailView::widget([
+        <div class="row">
-        'model' => $model,
+            <div class="col-md-3">
-        'attributes' => [
+                <!-- DetailView -->
-            'id',
+                <?= DetailView::widget([
-            'user_id',
+                    'model' => $model,
-            'title',
+                    'attributes' => [
-            'description:ntext',
+                        'id',
-            'status',
+                        [
-            'created_at',
+                            'attribute' => 'status',
-            'updated_at',
+                            'label' => '状态',
-            'ip',
+                            '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',
+                        'data' => [
+                            'confirm' => 'Are you sure you want to delete this item?',
+                            'method' => 'post',
+                        ],
+                    ]) ?>
+                </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">
 
-</div>
+                    </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>
+<?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);
+?>

web/css/tickets.css

@@ -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;
+}