社区服务，提交内容

application/admin/controller/Servicegrade.php

@@ -3,6 +3,8 @@
 namespace app\admin\controller;
 
 use app\common\controller\Backend;
+use app\admin\model\Servicequestion;
+use think\Db;
 
 /**
  * 社区服务提交内容
@@ -69,4 +71,63 @@ class Servicegrade extends Backend
         return $this->view->fetch();
     }
 
+    /**
+     * 详情
+     */
+    public function detail($ids = null)
+    {
+        $row = $this->getDetail($ids);
+        if (!$row) {
+            $this->error(__('No Results were found'));
+        }
+        $adminIds = $this->getDataLimitAdminIds();
+        if (is_array($adminIds)) {
+            if (!in_array($row[$this->dataLimitField], $adminIds)) {
+                $this->error(__('You have no permission'));
+            }
+        }
+//        dump($row);exit;
+        $this->view->assign("row", $row);
+        return $this->view->fetch();
+    }
+
+    /**
+     * 详情
+     */
+    public function one($ids = null)
+    {
+        $row = $this->getDetail($ids);
+        return json($row, 1);
+    }
+
+    /**
+     * 获取并处理详情数据
+     *
+     * @param $ids
+     * @return \app\admin\model\exam\GradeModel|array
+     */
+    protected function getDetail($ids)
+    {
+        $row = $this->model->get($ids);
+        if (!$row) {
+            $this->error(__('No Results were found'));
+        }
+
+        if (
+            (!isset($row['question_ids']) || !$row['question_ids']) ||
+            (!isset($row['user_answers']) || !$row['user_answers'])
+        ) {
+            $this->error('答卷数据缺少，无法查看（可能是旧版本未记录数据导致）');
+        }
+        $Servicequestion = new Servicequestion();
+        $row['questions'] = $Servicequestion->whereIn('id', $row['question_ids'])
+            ->orderRaw("find_in_set(id, '" . $row['question_ids'] . "')")
+            ->select();
+        $row['user_answers']    = json_decode($row['user_answers'], true);
+        $row['createtime_text'] = date('Y-m-d H:i:s', $row['createtime']);
+       // dump($row['questions']);exit;
+        return $row;
+    }
+
+
 }

application/admin/lang/zh-cn/servicepaper.php

@@ -2,7 +2,7 @@
 
 return [
     'Id'         => 'ID',
-    'Name'       => '名称',
+    'Name'       => '社区服务类型',
     'Status'     => '状态',
     'Status 1'   => '显示',
     'Set status to 1'=> '设为显示',

application/admin/model/Servicequestion.php

@@ -28,6 +28,21 @@ class Servicequestion extends Model
         'kind_text',
         'status_text'
     ];
+
+    public function getOptionsJsonAttr($value)
+    {
+        if ($value = json_decode($value, true)) {
+            $data = [];
+            foreach ($value as $key => $row) {
+                $arr['key']         = $key;
+                $arr['value']       = $row;
+                $arr['click_index'] = false;
+                array_push($data, $arr);
+            }
+            return $data;
+        }
+        return [];
+    }
     
 
     protected static function init()

application/admin/view/servicegrade/detail.html

@@ -0,0 +1,270 @@
+<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
+<script src="__CDN__/assets/addons/exam/js/vue.js"></script>
+<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/css/common.css"></link>
+
+<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/js/element-ui/index.css"/>
+<script src="__CDN__/assets/addons/exam/js/element-ui/index.js"></script>
+
+<div id="app">
+
+    <el-card class="box-card" style="margin-bottom: 20px;">
+        <div slot="header" class="clearfix">
+            <span>用户答题情况</span>
+            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
+        </div>
+
+        <div v-for="(question, index) in row.questions" :key="index" class="question-item">
+            <div class="el-descriptions">
+                <div class="el-descriptions__body">
+                    <table class="el-descriptions__table is-bordered">
+                        <tbody>
+
+                        <tr class="el-descriptions-row">
+                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">标题</th>
+                            <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">{{index+1}}.<span v-html="question.title"></span></td>
+                        </tr>
+                        <tr class="el-descriptions-row">
+                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">选项</th>
+                            <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">
+                                <div v-if="question.kind !== 'FILL'">
+                                    <div v-for="(option, indexOption) in question.options_json" :key="indexOption" class="option-item">
+                                        {{option.key}}：{{option.value}}
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                        <tbody>
+                        <tr class="el-descriptions-row">
+                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">题型</th>
+                            <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content th-fix-width">
+                                <el-tag size="small" effect="plain" v-if="question.kind == 'JUDGE'">判断题</el-tag>
+                                <el-tag size="small" effect="plain" v-else-if="question.kind == 'SINGLE'" type="success">单选题</el-tag>
+                                <el-tag size="small" effect="plain" v-else-if="question.kind == 'MULTI'" type="info">多选题</el-tag>
+
+                            </td>
+
+
+                            <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">用户答案</th>
+                            <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content" v-if="question.kind == 'JUDGE' || question.kind == 'SINGLE' || question.kind == 'MULTI'" :class="getUserAnswer(index) == question.answer ? ['answer-right'] : ['answer-fail']">
+                                <div>{{getUserAnswer(index) || '未答'}}</div>
+                            </td>
+
+
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </el-card>
+
+</div>
+
+<script>
+    var row = {:html_entity_decode(str_replace('&quot;', "'", json_encode($row)))};
+    console.log(row);
+    var app = new Vue({
+        el: '#app',
+        data: {
+            row: row,
+        },
+        computed: {
+            /**
+             * 获取填空题正确答案
+             * @returns {(function(*): (string|string))|*}
+             */
+            getRightFillAnswer() {
+                return function (question) {
+                    if (question && question.answer) {
+                        let html = '';
+                        question.answer.forEach(function (item, index) {
+                            html += '<span class="fill-answer-item">填空位' + (index + 1) + '答案：<b>' + item.answers.join(',') + '</b></span>';
+                        });
+                        return html;
+                    }
+                    return '';
+                }
+            },
+            /**
+             * 获取简答题正确答案
+             * @returns {(function(*): (string|string))|*}
+             */
+            getRightShortAnswer() {
+                return function (question) {
+                    if (question && question.answer) {
+                        let html = '正确答案：<b>' + question.answer.answer + '</b></br>';
+                        question.answer.config.forEach(function (item, index) {
+                            html += '<p class="fill-answer-item">关键词' + (index + 1) + '：<b>' + item.answer + '(' + item.score + '分)' + '</b></p>';
+                        });
+                        return html;
+                    }
+                    return '';
+                }
+            },
+            /**
+             * 获取用户答案
+             * @returns {function(*): string|*}
+             */
+            getUserAnswer() {
+                return function (questionIndex) {
+                    return this.row.user_answers && this.row.user_answers[questionIndex] ? this.row.user_answers[questionIndex].answer : '';
+                }
+            },
+            /**
+             * 获取用户填空题答案
+             * @returns {(function(*): (string|string))|*}
+             */
+            getUserFillAnswer() {
+                return function (questionIndex) {
+                    if (this.row.user_answers && this.row.user_answers[questionIndex]) {
+                        return this.row.user_answers[questionIndex].answer.join(',');
+                    }
+                    return '';
+                }
+            },
+            /**
+             * 获取用户简答题答案
+             * @returns {(function(*): (string|string))|*}
+             */
+            getUserShortAnswer() {
+                return function (questionIndex) {
+                    if (this.row.user_answers && this.row.user_answers[questionIndex]) {
+                        let html = '';
+                        if (this.row.user_answers[questionIndex].answer_score) {
+                            for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
+                                let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
+                                html += '<p class="fill-answer-item">' + short_user_answer.answer + '</p>';
+                            }
+                        }
+                        return html
+                        // return this.row.user_answers[questionIndex].answer.join(',');
+                    }
+                    return '';
+                }
+            },
+            /**
+             * 获取用户简答题得分
+             * @returns {(function(*): (string|string))|*}
+             */
+            // getUserShortAnswerScore() {
+            //     return function (questionIndex) {
+            //         let score = 0;
+            //         if (this.row.user_answers && this.row.user_answers[questionIndex]) {
+            //             if (this.row.user_answers[questionIndex].answer_score) {
+            //                 for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
+            //                     let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
+            //                     score += short_user_answer.score;
+            //                 }
+            //             }
+            //             // return this.row.user_answers[questionIndex].answer.join(',');
+            //         }
+            //         return score;
+            //     }
+            // },
+            /**
+             * 获取单个题目得分数
+             * @returns {function(*): string|*}
+             */
+            getSingleScore() {
+                return function (question, questionIndex) {
+                    var score = 0;
+                    if (this.row.mode == 'FIX') {
+                        score = question.score;
+                    } else {
+                        score = this.getConfigsScore(question.kind, question.difficulty);
+                    }
+
+                    if (this.row.user_answers && this.row.user_answers[questionIndex]) {
+                        if (question.kind === 'FILL') {
+                            if (this.row.user_answers[questionIndex].is_right) {
+                                return score;
+                            }
+                        } else if (question.kind === 'SHORT') {
+                            let score = 0;
+                            if (this.row.user_answers && this.row.user_answers[questionIndex]) {
+
+                                if (this.row.user_answers[questionIndex].answer_score) {
+                                    for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
+                                        let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
+                                        score += parseInt(short_user_answer.score);
+                                    }
+                                }
+                                // return this.row.user_answers[questionIndex].answer.join(',');
+                            }
+                            return score;
+                        } else {
+                            if (this.row.user_answers[questionIndex].answer === question.answer) {
+                                return score;
+                            }
+                        }
+                    }
+
+                    return 0;
+                }
+            },
+        },
+        created() {
+
+        },
+        methods: {
+            /**
+             * 获取单个题目得分数
+             * @returns {function(*): string|*}
+             */
+            getConfigsScore(kind, difficulty) {
+                const configs = this.row.configs[kind.toLowerCase()];
+                if (configs && configs['use_difficulty']) {
+                    return configs['difficulty'][difficulty.toLowerCase()]['score'];
+                }
+                return configs['score'];
+            },
+
+            /**
+             * 格式化秒数
+             * @param second
+             * @returns {string}
+             */
+            formatSecond: function (second) {
+                if (second == 0) return '不限时'
+
+                let result = parseInt(second)
+                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
+                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
+                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
+
+                let res = '';
+                if (h !== '00') res += `${h}时`;
+                if (m !== '00') res += `${m}分`;
+                res += `${s}秒`;
+                return res;
+            }
+        }
+    })
+</script>
+<style>
+    .answer-right {
+        background: #E1F3D8;
+    }
+
+    .answer-fail {
+        background: #FDE2E2;
+    }
+
+    .question-item {
+        padding: 15px;
+    }
+
+    .option-item {
+        margin-left: 10px;
+    }
+
+    .th-fix-width {
+        width: 100px;
+        text-align: center !important;
+    }
+
+    .fill-answer-item {
+        margin-right: 20px;
+    }
+</style>

application/admin/view/servicegrade/index.html

@@ -19,6 +19,7 @@
                     <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                            data-operate-edit="{:$auth->check('servicegrade/edit')}"
                            data-operate-del="{:$auth->check('servicegrade/del')}"
+                           data-operate-detail="{:$auth->check('servicegrade/detail')}"
                            width="100%">
                     </table>
                 </div>

public/assets/js/backend/servicegrade.js

@@ -7,8 +7,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 extend: {
                     index_url: 'servicegrade/index' + location.search,
                     add_url: 'servicegrade/add',
-                    edit_url: 'servicegrade/edit',
-                    del_url: 'servicegrade/del',
+                    // edit_url: 'servicegrade/edit',
+                    // del_url: 'servicegrade/del',
                     multi_url: 'servicegrade/multi',
                     import_url: 'servicegrade/import',
                     table: 'service_grade',
@@ -17,6 +17,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
 
             var table = $("#table");
 
+            //当内容渲染完成给编辑按钮添加`data-area`属性，点击列表编辑按钮时全屏
+            table.on('post-body.bs.table', function (e, settings, json, xhr) {
+                $(".btn-detail").data("area", ["80%", "80%"]);
+            });
+
             // 初始化表格
             table.bootstrapTable({
                 url: $.fn.bootstrapTable.defaults.extend.index_url,
@@ -36,7 +41,15 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                         // {field: 'question_ids', title: __('Question_ids'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                         {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                         {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
-                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
+                        {field: 'operate', title: __('Operate'),
+                            buttons: [{
+                                name: 'detail',
+                                text: __('Detail'),
+                                icon: 'fa fa-list',
+                                classname: 'btn btn-info btn-xs btn-detail btn-dialog',
+                                url: 'servicegrade/detail/ids/{ids}?dialog=1',
+                            }],
+                            table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                     ]
                 ]
             });
@@ -50,6 +63,9 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
         edit: function () {
             Controller.api.bindevent();
         },
+        detail: function () {
+            Controller.api.bindevent();
+        },
         api: {
             bindevent: function () {
                 Form.api.bindevent($("form[role=form]"));