考级

src/main/vue/src/styles/app.less

@@ -407,3 +407,11 @@ li {
         background-color: #fff;
     }
 }
+
+.input1 {
+    width: 200px !important;
+}
+
+.input2 {
+    width: 300px !important;
+}

src/main/vue/src/views/ComplainEdit.vue

@@ -7,114 +7,167 @@
             label-width="100px"
             label-position="right"
             size="small"
-            style="max-width: 700px;"
+            style="max-width: 600px;"
         >
-            <el-divider direction="horizontal" content-position="left">诉求人基本信息</el-divider>
-            <el-form-item prop="source" label="来源渠道">
-                <el-input v-model="formData.source"></el-input>
-            </el-form-item>
-            <el-form-item prop="complainAt" label="来电时间">
-                <el-date-picker
-                    v-model="formData.complainAt"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期时间"
-                >
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="name" label="服务对象">
-                <el-input v-model="formData.name"></el-input>
-            </el-form-item>
-            <el-form-item prop="sex" label="性别">
-                <el-select v-model="formData.sex">
-                    <el-option label="男" value="男"></el-option>
-                    <el-option label="女" value="女"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="phone" label="联系方式">
-                <el-input v-model="formData.phone"></el-input>
-            </el-form-item>
-            <el-divider direction="horizontal" content-position="left">诉求信息</el-divider>
-            <el-form-item prop="content" label="投诉内容">
-                <el-input type="textarea" :rows="5" v-model="formData.content"></el-input>
-            </el-form-item>
-            <el-form-item prop="title" label="投诉目的">
-                <el-input type="textarea" :rows="3" v-model="formData.title"></el-input>
-            </el-form-item>
-            <el-form-item prop="nature" label="问题性质" v-if="formData.id">
-                <el-input v-model="formData.nature"></el-input>
-            </el-form-item>
-            <el-form-item prop="unitType" label="涉及的单位" v-if="formData.id">
-                <el-select v-model="formData.unitType" clearable filterable placeholder="请选择单位类型">
-                    <el-option
-                        v-for="item in unitTypeOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-                <!-- <el-input v-model="formData.unitName" style="width: 68%"></el-input> -->
-                <el-select
-                    v-model="formData.unitName"
-                    clearable
-                    filterable
-                    placeholder="请选择"
-                    style="width: 68%"
-                    v-if="formData.unitType == 'ORGANIZATION'"
-                >
-                    <el-option v-for="item in organizations" :key="item.value" :label="item.label" :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select
-                    v-model="formData.unitName"
-                    clearable
-                    filterable
-                    placeholder="请选择"
-                    style="width: 68%"
-                    v-if="formData.unitType == 'GRADING_ORGANIZATION'"
-                >
-                    <el-option
-                        v-for="item in gradingOrganizations"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
+            <el-collapse v-model="activeNames" accordion>
+                <el-collapse-item title="投诉内容" name="1">
+                    <div>
+                        <el-form-item prop="source" label="来源渠道">
+                            <el-input v-model="formData.source" class="input1" :readonly="!!formData.id"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="complainAt" label="来电时间">
+                            <el-date-picker
+                                class="input1"
+                                v-model="formData.complainAt"
+                                type="datetime"
+                                value-format="yyyy-MM-dd HH:mm:ss"
+                                placeholder="选择日期时间"
+                                :readonly="!!formData.id"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+                        <el-form-item prop="name" label="服务对象">
+                            <el-input class="input1" v-model="formData.name" :readonly="!!formData.id"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="sex" label="性别">
+                            <el-select class="input1" v-model="formData.sex" :disabled="!!formData.id">
+                                <el-option label="男" value="男"></el-option>
+                                <el-option label="女" value="女"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item prop="phone" label="联系方式">
+                            <el-input class="input1" v-model="formData.phone" :readonly="!!formData.id"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="content" label="投诉内容">
+                            <el-input
+                                type="textarea"
+                                :rows="5"
+                                :readonly="!!formData.id"
+                                v-model="formData.content"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="title" label="投诉目的">
+                            <el-input
+                                type="textarea"
+                                :rows="3"
+                                :readonly="!!formData.id"
+                                v-model="formData.title"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="file" label="附件">
+                            <file-upload v-model="formData.file" :readonly="!!formData.id"></file-upload>
+                        </el-form-item>
 
-            <el-form-item prop="file" label="附件" v-if="formData.id">
-                <file-upload v-model="formData.file"></file-upload>
-            </el-form-item>
-            <el-divider direction="horizontal" content-position="left" v-if="formData.id">审查情况</el-divider>
-            <el-form-item prop="processing" label="办理情况" v-if="formData.id">
-                <el-input type="textarea" :rows="5" v-model="formData.processing"></el-input>
-            </el-form-item>
-            <el-form-item prop="situationIsReal" label="情况属实" v-if="formData.id">
-                <el-radio-group v-model="formData.situationIsReal">
-                    <el-radio :label="true">是</el-radio>
-                    <el-radio :label="false">否</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item prop="reviewFile" label="审查附件" v-if="formData.id">
-                <file-upload v-model="formData.reviewFile"></file-upload>
-            </el-form-item>
-            <el-form-item prop="reviewAt" label="审查时间" v-if="formData.id">
-                <el-date-picker
-                    v-model="formData.reviewAt"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期时间"
-                >
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave(true)" :loading="saving" type="primary" v-if="formData.id">提交</el-button>
-                <el-button @click="onSave(false)" :loading="saving" type="success">保存</el-button>
-                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
+                        <el-form-item v-if="!formData.id">
+                            <el-button @click="onSave(true)" :loading="saving" type="primary" v-if="formData.id"
+                                >提交</el-button
+                            >
+                            <el-button @click="onSave(false)" :loading="saving" type="success">保存</el-button>
+                            <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id"
+                                >删除
+                            </el-button>
+                            <el-button @click="$router.go(-1)">取消</el-button>
+                        </el-form-item>
+                    </div>
+                </el-collapse-item>
+                <el-collapse-item title="处理" name="2" v-if="formData.id">
+                    <div>
+                        <el-form-item prop="nature" label="问题性质" v-if="formData.id">
+                            <el-input class="input1" v-model="formData.nature"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="unitType" label="涉及的单位" v-if="formData.id">
+                            <el-row>
+                                <el-col :span="11" :offset="0">
+                                    <el-select
+                                        v-model="formData.unitType"
+                                        clearable
+                                        class="input1"
+                                        filterable
+                                        placeholder="请选择单位类型"
+                                    >
+                                        <el-option
+                                            v-for="item in unitTypeOptions"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                        >
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="13" :offset="0">
+                                    <el-select
+                                        style="width:100%"
+                                        v-model="formData.unitName"
+                                        clearable
+                                        filterable
+                                        placeholder="请选择"
+                                        v-if="formData.unitType == 'ORGANIZATION'"
+                                    >
+                                        <el-option
+                                            v-for="item in organizations"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                        >
+                                        </el-option>
+                                    </el-select>
+                                    <el-select
+                                        v-model="formData.unitName"
+                                        clearable
+                                        style="width:100%"
+                                        filterable
+                                        placeholder="请选择"
+                                        v-if="formData.unitType == 'GRADING_ORGANIZATION'"
+                                    >
+                                        <el-option
+                                            v-for="item in gradingOrganizations"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                        >
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                            </el-row>
+
+                            <!-- <el-input v-model="formData.unitName" style="width: 68%"></el-input> -->
+                        </el-form-item>
+
+                        <el-form-item prop="processing" label="办理情况" v-if="formData.id">
+                            <el-input type="textarea" :rows="5" v-model="formData.processing"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="situationIsReal" label="情况属实" v-if="formData.id">
+                            <el-radio-group v-model="formData.situationIsReal">
+                                <el-radio :label="true">是</el-radio>
+                                <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item prop="reviewFile" label="审查附件" v-if="formData.id">
+                            <file-upload v-model="formData.reviewFile"></file-upload>
+                        </el-form-item>
+                        <el-form-item prop="reviewAt" label="审查时间" v-if="formData.id">
+                            <el-date-picker
+                                v-model="formData.reviewAt"
+                                type="datetime"
+                                value-format="yyyy-MM-dd HH:mm:ss"
+                                placeholder="选择日期时间"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="onSave(true)" :loading="saving" type="primary" v-if="formData.id"
+                                >提交</el-button
+                            >
+                            <el-button @click="onSave(false)" :loading="saving" type="success">保存</el-button>
+                            <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id"
+                                >删除
+                            </el-button>
+                            <el-button @click="$router.go(-1)">返回</el-button>
+                        </el-form-item>
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
         </el-form>
     </div>
 </template>
@@ -132,6 +185,8 @@ export default {
                     console.log(e);
                     this.$message.error(e.error);
                 });
+
+            this.activeNames = '2';
         }
         this.$http
             .post('/gradingOrganization/all', { size: 1000 }, { body: 'json' })
@@ -185,7 +240,8 @@ export default {
                 { label: '考点', value: 'EXAMINATION' }
             ],
             gradingOrganizations: [],
-            organizations: []
+            organizations: [],
+            activeNames: '1'
         };
     },
     methods: {
@@ -239,4 +295,30 @@ export default {
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.edit-view {
+    padding: 0;
+    background-color: transparent;
+
+    /deep/ .el-collapse-item__header {
+        padding: 0 20px;
+        background-color: transparent;
+    }
+
+    /deep/ .el-collapse-item__wrap {
+        padding: 0 20px;
+        background-color: transparent;
+    }
+
+    /deep/.el-collapse-item {
+        background-color: #fff;
+        border-radius: 4px;
+        &:hover {
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+        }
+        & + .el-collapse-item {
+            margin-top: 20px;
+        }
+    }
+}
+</style>

src/main/vue/src/views/ComplainShow.vue

@@ -7,138 +7,192 @@
             label-width="100px"
             label-position="right"
             size="small"
-            style="max-width: 700px;"
+            style="max-width: 630px;"
         >
-            <el-divider direction="horizontal" content-position="left">诉求人基本信息</el-divider>
-            <el-col :span="12">
-                <el-form-item prop="source" label="来源渠道">
-                    <el-input v-model="formData.source"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="12">
-                <el-form-item prop="complainAt" label="来电时间">
-                    <el-date-picker
-                        v-model="formData.complainAt"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-            </el-col>
-            <el-col :span="8">
-                <el-form-item prop="name" label="服务对象">
-                    <el-input v-model="formData.name"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="7">
-                <el-form-item prop="sex" label="性别">
-                    <el-select v-model="formData.sex">
-                        <el-option label="男" value="男"></el-option>
-                        <el-option label="女" value="女"></el-option>
-                    </el-select>
-                </el-form-item>
-            </el-col>
-            <el-col :span="8">
-                <el-form-item prop="phone" label="联系方式">
-                    <el-input v-model="formData.phone"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="24">
-                <el-divider direction="horizontal" content-position="left">诉求信息</el-divider>
-            </el-col>
-            <el-form-item prop="content" label="投诉内容">
-                <el-input type="textarea" :rows="5" v-model="formData.content" readonly></el-input>
-            </el-form-item>
-            <el-form-item prop="title" label="投诉目的">
-                <el-input type="textarea" :rows="3" v-model="formData.title" readonly></el-input>
-            </el-form-item>
-            <el-form-item prop="nature" label="问题性质" v-if="formData.finish">
-                <el-input v-model="formData.nature" readonly></el-input>
-            </el-form-item>
-            <el-form-item prop="unitType" label="涉及的单位" v-if="formData.finish">
-                <el-select v-model="formData.unitType" clearable filterable placeholder="请选择单位类型" disabled>
-                    <el-option
-                        v-for="item in unitTypeOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-                <!-- <el-input v-model="formData.unitName" style="width: 68%"></el-input> -->
-                <el-select
-                    v-model="formData.unitName"
-                    clearable
-                    filterable
-                    placeholder="请选择"
-                    style="width: 68%"
-                    v-if="formData.unitType === 'ORGANIZATION'"
-                    disabled
+            <el-timeline>
+                <el-timeline-item
+                    :timestamp="formData.complainAt"
+                    placement="top"
+                    icon="el-icon-check"
+                    type="success"
+                    size="normal"
                 >
-                    <el-option v-for="item in organizations" :key="item.value" :label="item.label" :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select
-                    v-model="formData.unitName"
-                    clearable
-                    filterable
-                    placeholder="请选择"
-                    style="width: 68%"
-                    v-else-if="formData.unitType === 'GRADING_ORGANIZATION'"
-                    disabled
-                >
-                    <el-option
-                        v-for="item in gradingOrganizations"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
+                    <el-collapse v-model="activeNames">
+                        <el-collapse-item title="发起投诉" name="1">
+                            <div>
+                                <el-form-item prop="source" label="来源渠道">
+                                    <el-input v-model="formData.source" class="input1" readonly></el-input>
+                                </el-form-item>
+                                <el-form-item prop="complainAt" label="来电时间">
+                                    <el-date-picker
+                                        class="input1"
+                                        v-model="formData.complainAt"
+                                        type="datetime"
+                                        value-format="yyyy-MM-dd HH:mm:ss"
+                                        placeholder="选择日期时间"
+                                        readonly
+                                    >
+                                    </el-date-picker>
+                                </el-form-item>
+                                <el-form-item prop="name" label="服务对象">
+                                    <el-input class="input1" v-model="formData.name" readonly></el-input>
+                                </el-form-item>
+                                <el-form-item prop="sex" label="性别">
+                                    <el-select class="input1" v-model="formData.sex" disabled>
+                                        <el-option label="男" value="男"></el-option>
+                                        <el-option label="女" value="女"></el-option>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item prop="phone" label="联系方式">
+                                    <el-input class="input1" v-model="formData.phone" readonly></el-input>
+                                </el-form-item>
+                                <el-form-item prop="content" label="投诉内容">
+                                    <el-input type="textarea" :rows="5" readonly v-model="formData.content"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="title" label="投诉目的">
+                                    <el-input type="textarea" :rows="3" readonly v-model="formData.title"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="file" label="附件">
+                                    <file-upload v-model="formData.file" readonly></file-upload>
+                                </el-form-item>
+
+                                <el-form-item v-if="!formData.finish">
+                                    <el-button @click="$router.go(-1)">返回</el-button>
+                                </el-form-item>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
+                </el-timeline-item>
 
-            <el-form-item prop="file" label="附件" v-if="formData.finish">
-                <file-upload v-model="formData.file" :readonly="true"></file-upload>
-            </el-form-item>
-            <el-divider direction="horizontal" content-position="left" v-if="formData.finish">审查情况</el-divider>
-            <el-form-item prop="processing" label="办理情况" v-if="formData.finish">
-                <el-input type="textarea" :rows="5" v-model="formData.processing" readonly></el-input>
-            </el-form-item>
-            <el-form-item prop="situationIsReal" label="情况属实" v-if="formData.finish">
-                <el-radio-group v-model="formData.situationIsReal">
-                    <el-radio :label="true" disabled>是</el-radio>
-                    <el-radio :label="false" disabled>否</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item prop="reviewFile" label="审查附件" v-if="formData.finish">
-                <file-upload v-model="formData.reviewFile" :readonly="true"></file-upload>
-            </el-form-item>
-            <el-form-item prop="reviewAt" label="审查时间" v-if="formData.finish">
-                <el-date-picker
-                    v-model="formData.reviewAt"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期时间"
-                    readonly
+                <el-timeline-item
+                    :timestamp="formData.reviewAt || formData.complainAt"
+                    placement="top"
+                    :type="formData.finish ? 'success' : 'primary'"
+                    size="normal"
+                    :icon="formData.finish ? 'el-icon-check' : 'el-icon-more'"
                 >
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
+                    <el-collapse v-model="activeNames">
+                        <el-collapse-item :title="formData.finish ? '处理完成' : '处理中'" name="2">
+                            <div v-if="formData.finish">
+                                <el-form-item prop="nature" label="问题性质">
+                                    <el-input class="input1" readonly v-model="formData.nature"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="unitType" label="涉及的单位">
+                                    <el-row>
+                                        <el-col :span="11" :offset="0">
+                                            <el-select
+                                                disabled
+                                                v-model="formData.unitType"
+                                                clearable
+                                                class="input1"
+                                                filterable
+                                                placeholder="请选择单位类型"
+                                            >
+                                                <el-option
+                                                    v-for="item in unitTypeOptions"
+                                                    :key="item.value"
+                                                    :label="item.label"
+                                                    :value="item.value"
+                                                >
+                                                </el-option>
+                                            </el-select>
+                                        </el-col>
+                                        <el-col :span="13" :offset="0">
+                                            <el-select
+                                                style="width:100%"
+                                                v-model="formData.unitName"
+                                                clearable
+                                                filterable
+                                                placeholder="请选择"
+                                                disabled
+                                                v-if="formData.unitType == 'ORGANIZATION'"
+                                            >
+                                                <el-option
+                                                    v-for="item in organizations"
+                                                    :key="item.value"
+                                                    :label="item.label"
+                                                    :value="item.value"
+                                                >
+                                                </el-option>
+                                            </el-select>
+                                            <el-select
+                                                v-model="formData.unitName"
+                                                clearable
+                                                disabled
+                                                style="width:100%"
+                                                filterable
+                                                placeholder="请选择"
+                                                v-if="formData.unitType == 'GRADING_ORGANIZATION'"
+                                            >
+                                                <el-option
+                                                    v-for="item in gradingOrganizations"
+                                                    :key="item.value"
+                                                    :label="item.label"
+                                                    :value="item.value"
+                                                >
+                                                </el-option>
+                                            </el-select>
+                                        </el-col>
+                                    </el-row>
+
+                                    <!-- <el-input v-model="formData.unitName" style="width: 68%"></el-input> -->
+                                </el-form-item>
+
+                                <el-form-item prop="processing" label="办理情况">
+                                    <el-input
+                                        type="textarea"
+                                        readonly
+                                        :rows="5"
+                                        v-model="formData.processing"
+                                    ></el-input>
+                                </el-form-item>
+                                <el-form-item prop="situationIsReal" label="情况属实">
+                                    <el-radio-group disabled v-model="formData.situationIsReal">
+                                        <el-radio :label="true">是</el-radio>
+                                        <el-radio :label="false">否</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                                <el-form-item prop="reviewFile" label="审查附件">
+                                    <file-upload readonly v-model="formData.reviewFile"></file-upload>
+                                </el-form-item>
+                                <el-form-item prop="reviewAt" label="审查时间">
+                                    <el-date-picker
+                                        disabled
+                                        v-model="formData.reviewAt"
+                                        type="datetime"
+                                        value-format="yyyy-MM-dd HH:mm:ss"
+                                        placeholder="选择日期时间"
+                                    >
+                                    </el-date-picker>
+                                </el-form-item>
+
+                                <el-form-item>
+                                    <el-button @click="$router.go(-1)">返回</el-button>
+                                </el-form-item>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
+                </el-timeline-item>
+            </el-timeline>
         </el-form>
     </div>
 </template>
 <script>
 export default {
-    name: 'ComplainShow',
+    name: 'ComplainEdit',
     created() {
         if (this.$route.query.id) {
             this.$http
                 .get('complain/get/' + this.$route.query.id)
                 .then(res => {
                     this.formData = res;
+                    this.$nextTick(() => {
+                        if (res.finish) {
+                            this.activeNames = '2';
+                        } else {
+                            this.activeNames = '1';
+                        }
+                    });
                 })
                 .catch(e => {
                     console.log(e);
@@ -197,7 +251,8 @@ export default {
                 { label: '考点', value: 'EXAMINATION' }
             ],
             gradingOrganizations: [],
-            organizations: []
+            organizations: [],
+            activeNames: ''
         };
     },
     methods: {
@@ -252,14 +307,29 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-/deep/.el-radio__input.is-checked + .el-radio__label {
-    color: #606266;
-}
-/deep/.el-radio__input.is-disabled + span.el-radio__label {
-    color: #606266;
-}
-/deep/ .el-input.is-disabled .el-input__inner {
-    background-color: #ffffff;
-    color: #606266;
+.edit-view {
+    padding: 0;
+    background-color: transparent;
+
+    /deep/ .el-collapse-item__header {
+        padding: 0 20px;
+        background-color: transparent;
+    }
+
+    /deep/ .el-collapse-item__wrap {
+        padding: 0 20px;
+        background-color: transparent;
+    }
+
+    /deep/.el-collapse-item {
+        background-color: #fff;
+        border-radius: 4px;
+        &:hover {
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+        }
+        & + .el-collapse-item {
+            margin-top: 20px;
+        }
+    }
 }
 </style>

src/main/vue/src/views/record/RecordCheck.vue

@@ -7,32 +7,38 @@
             label-width="80px"
             label-position="right"
             size="small"
-            style="max-width: 700px;"
+            style="max-width: 600px;"
         >
-            <el-form-item>
+            <el-form-item label-width="0">
                 <el-button type="primary" size="small" @click="onAddOtherForm()">添加检查记录</el-button>
             </el-form-item>
-            <div class="add-con" v-for="(item, index) in checks" :key="index">
-                <div v-if="!item.del">
-                    <el-form-item prop="content" label="检查情况">
-                        <el-input :rows="5" type="textarea" v-model="item.content"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="file" label="作证材料">
-                        <!-- <file-upload v-model="item.file"></file-upload> -->
-                        <multi-upload v-model="item.file"></multi-upload>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button
-                            class="del"
-                            type="danger"
-                            size="small"
-                            icon="el-icon-delete"
-                            @click="onDeleteOtherForm(item, index)"
-                        ></el-button>
-                    </el-form-item>
-                    <el-divider direction="horizontal" content-position="left"></el-divider>
-                </div>
-            </div>
+            <el-timeline reverse>
+                <el-timeline-item v-for="(item, index) in checks" :key="index" placement="top" size="normal">
+                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
+                        <div v-if="!item.del">
+                            <el-form-item prop="content" label="检查情况">
+                                <el-input :rows="5" type="textarea" v-model="item.content"></el-input>
+                            </el-form-item>
+                            <el-form-item prop="file" label="作证材料">
+                                <!-- <file-upload v-model="item.file"></file-upload> -->
+                                <multi-upload v-model="item.file"></multi-upload>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button
+                                    class="del"
+                                    type="danger"
+                                    size="small"
+                                    icon="el-icon-delete"
+                                    @click="onDeleteOtherForm(item, index)"
+                                ></el-button>
+                            </el-form-item>
+                        </div>
+                    </el-card>
+
+                    <!-- content -->
+                </el-timeline-item>
+            </el-timeline>
+
             <!-- <el-form-item prop="files" label="作证材料">
                 <el-upload class="upload-demo" action="../upload/file" :on-change="handleChange" :file-list="fileList3">
                     <el-button size="small" type="primary">
@@ -170,4 +176,9 @@ export default {
     align-items: center;
     margin-top: 23px;
 }
+
+.edit-view {
+    padding: 0 0;
+    background-color: transparent;
+}
 </style>

src/main/vue/src/views/record/RecordEdit.vue

@@ -9,26 +9,27 @@
             size="small"
             style="max-width: 700px;"
         >
-            <el-form-item prop="examinationName" label="考级活动名称">
-                <el-input v-model="formData.examinationName"></el-input>
-            </el-form-item>
-            <el-form-item prop="examinationStartTime" label="考级活动时间">
-                <el-date-picker
-                    v-model="dateRange"
-                    type="daterange"
-                    value-format="yyyy-MM-dd"
-                    start-placeholder="请选择开始时间"
-                    end-placeholder="请选择结束时间"
-                    range-separator="至"
-                    style="width: 100%"
-                >
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="examinationAgency" label="考级机构名称">
-                <el-input v-model="formData.examinationAgency"></el-input>
-            </el-form-item>
-            <el-form-item prop="category" label="单位类别">
-                <!-- <el-select v-model="formData.category" clearable filterable placeholder="请选择">
+            <el-card shadow="hover" :body-style="{ padding: '20px' }">
+                <el-form-item prop="examinationName" label="考级活动名称">
+                    <el-input class="input1" v-model="formData.examinationName"></el-input>
+                </el-form-item>
+                <el-form-item prop="examinationStartTime" label="考级活动时间">
+                    <el-date-picker
+                        class="input2"
+                        v-model="dateRange"
+                        type="daterange"
+                        value-format="yyyy-MM-dd"
+                        start-placeholder="请选择开始时间"
+                        end-placeholder="请选择结束时间"
+                        range-separator="至"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item prop="examinationAgency" label="考级机构名称">
+                    <el-input class="input1" v-model="formData.examinationAgency"></el-input>
+                </el-form-item>
+                <el-form-item prop="category" label="单位类别">
+                    <!-- <el-select v-model="formData.category" clearable filterable placeholder="请选择">
                     <el-option
                         v-for="item in categoryOptions"
                         :key="item.value"
@@ -37,133 +38,160 @@
                     >
                     </el-option>
                 </el-select> -->
-                <el-input v-model="formData.category"></el-input>
-            </el-form-item>
-            <el-form-item prop="organizer" label="承办单位名称">
-                <el-input v-model="formData.organizer"></el-input>
-            </el-form-item>
-            <el-form-item prop="uscc" label="统一社会信用代码">
-                <el-input v-model="formData.uscc"></el-input>
-            </el-form-item>
-            <el-form-item prop="examinationDistrict" label="考级地点">
-                <el-select v-model="formData.district" style="width: 100%;margin-bottom: 10px">
-                    <el-option
-                        v-for="item in district"
-                        :key="item.id"
-                        :value="item.name"
-                        :label="item.name"
-                    ></el-option>
-                </el-select>
-                <el-input type="textarea" :rows="3" v-model="formData.examinationAddress"></el-input>
-            </el-form-item>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item prop="examCenterQuantity" label="考场数量">
-                        <el-input-number v-model="formData.examCenterQuantity" class="date-width"></el-input-number>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item prop="examQuantity" label="报考人数">
-                        <el-input-number v-model="formData.examQuantity" class="date-width"></el-input-number>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item prop="examinerQuantity" label="考官人数">
-                        <el-input-number v-model="formData.examinerQuantity" class="date-width"></el-input-number>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item prop="examOwner" label="考点负责人名称">
-                        <el-input v-model="formData.examOwner"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item prop="examOwnerPhone" label="手机号">
-                        <el-input v-model="formData.examOwnerPhone"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item prop="securityOwner" label="安全负责人名称">
-                        <el-input v-model="formData.securityOwner"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item prop="securityOwnerPhone" label="手机号">
-                        <el-input v-model="formData.securityOwnerPhone"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item prop="recordTime" label="备案时间">
-                        <el-date-picker
-                            v-model="formData.recordTime"
-                            type="date"
-                            value-format="yyyy-MM-dd"
-                            placeholder="选择日期"
-                        >
-                        </el-date-picker>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-divider direction="horizontal" content-position="left">考级专业</el-divider>
-            <el-table
-                :data="recordSpecialties"
-                row-key="id"
-                ref="table"
-                header-row-class-name="table-header-row"
-                header-cell-class-name="table-header-cell"
-                row-class-name="table-row"
-                cell-class-name="table-cell"
-            >
-                <el-table-column prop="name" label="专业名称" width="100"> </el-table-column>
-                <el-table-column prop="code" label="专业代码"> </el-table-column>
-                <el-table-column prop="level" label="总级数"> </el-table-column>
-                <el-table-column prop="numOfExam" label="考场数量"> </el-table-column>
-                <el-table-column prop="examinerQuantity" label="考官人数">
-                    <template slot-scope="{ row }">
-                        <el-link @click="openDialog(row)">{{ row.examinerQuantity }}</el-link>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-form-item>
-                <div style="margin-top: 10px">
-                    <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
-                    <!-- <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button> -->
-                    <el-button @click="$router.go(-1)">取消</el-button>
-                </div>
-            </el-form-item>
+                    <el-input class="input1" v-model="formData.category"></el-input>
+                </el-form-item>
+                <el-form-item prop="organizer" label="承办单位名称">
+                    <el-input class="input1" v-model="formData.organizer"></el-input>
+                </el-form-item>
+
+                <el-collapse-transition>
+                    <div v-show="showMore">
+                        <el-form-item prop="uscc" label="统一社会信用代码">
+                            <el-input class="input1" v-model="formData.uscc"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examinationDistrict" label="考级地点">
+                            <el-select
+                                class="input1"
+                                v-model="formData.district"
+                                style="margin-bottom: 10px;display:block"
+                            >
+                                <el-option
+                                    v-for="item in district"
+                                    :key="item.id"
+                                    :value="item.name"
+                                    :label="item.name"
+                                ></el-option>
+                            </el-select>
+                            <el-input
+                                type="textarea"
+                                class="input2"
+                                :rows="3"
+                                v-model="formData.examinationAddress"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examCenterQuantity" label="考场数量">
+                            <el-input-number v-model="formData.examCenterQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examQuantity" label="报考人数">
+                            <el-input-number v-model="formData.examQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examinerQuantity" label="考官人数">
+                            <el-input-number v-model="formData.examinerQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examOwner" label="考点负责人">
+                            <el-input
+                                v-model="formData.examOwner"
+                                suffix-icon="el-icon-user-solid"
+                                class="input1"
+                                placeholder="联系人"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examOwnerPhone">
+                            <el-input
+                                v-model="formData.examOwnerPhone"
+                                suffix-icon="el-icon-phone"
+                                class="input1"
+                                placeholder="手机号"
+                            ></el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="securityOwner" label="安全负责人">
+                            <el-input
+                                v-model="formData.securityOwner"
+                                suffix-icon="el-icon-user-solid"
+                                class="input1"
+                                placeholder="联系人"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="securityOwnerPhone" label="">
+                            <el-input
+                                v-model="formData.securityOwnerPhone"
+                                suffix-icon="el-icon-phone"
+                                class="input1"
+                                placeholder="手机号"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="recordTime" label="备案时间">
+                            <el-date-picker
+                                class="input1"
+                                v-model="formData.recordTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+                    </div>
+                </el-collapse-transition>
+
+                <el-button
+                    class="more"
+                    round
+                    type="primary"
+                    :plain="!showMore"
+                    :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                    @click="showMore = !showMore"
+                ></el-button>
+            </el-card>
+
+            <el-card shadow="hover" :body-style="{ padding: '20px' }">
+                <el-table
+                    :data="recordSpecialties"
+                    ref="table"
+                    header-row-class-name="table-header-row"
+                    header-cell-class-name="table-header-cell"
+                    row-class-name="table-row"
+                    cell-class-name="table-cell"
+                    @expand-change="load"
+                >
+                    <el-table-column type="expand">
+                        <template slot-scope="props">
+                            <el-card
+                                shadow="hover"
+                                :body-style="{ padding: '20px' }"
+                                v-loading="!experts.has(props.row.id)"
+                            >
+                                <el-table
+                                    :data="experts.has(props.row.id) ? experts.get(props.row.id) : []"
+                                    row-key="id"
+                                    header-row-class-name="table-header-row"
+                                    header-cell-class-name="table-header-cell"
+                                    row-class-name="table-row"
+                                    cell-class-name="table-cell"
+                                >
+                                    <el-table-column prop="name" label="名称" width="100"> </el-table-column>
+                                    <el-table-column prop="sex" label="性别"> </el-table-column>
+                                    <el-table-column prop="idNo" label="证件号码"> </el-table-column>
+                                    <el-table-column prop="external" label="是否外聘">
+                                        <template slot-scope="{ row }">
+                                            <span v-if="row.external">是</span>
+                                            <span v-else>否</span>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="position" label="职称">
+                                        <template slot-scope="{ row }">
+                                            <span v-if="row.position"> {{ row.position }} </span>
+                                            <span v-else>无</span>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-card>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="专业名称" width="100"> </el-table-column>
+                    <el-table-column prop="code" label="专业代码"> </el-table-column>
+                    <el-table-column prop="level" label="总级数"> </el-table-column>
+                    <el-table-column prop="numOfExam" label="考场数量"> </el-table-column>
+                    <el-table-column prop="examinerQuantity" label="考官人数">
+                        <template slot-scope="{ row }">
+                            <el-link @click="openDialog(row)">{{ row.examinerQuantity }}</el-link>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <!-- card body -->
+            </el-card>
         </el-form>
-        <el-dialog :visible.sync="dialogVisible" width="700px">
-            <el-table
-                :data="experts"
-                row-key="id"
-                header-row-class-name="table-header-row"
-                header-cell-class-name="table-header-cell"
-                row-class-name="table-row"
-                cell-class-name="table-cell"
-            >
-                <el-table-column prop="name" label="名称" width="100"> </el-table-column>
-                <el-table-column prop="sex" label="性别"> </el-table-column>
-                <el-table-column prop="idNo" label="证件号码"> </el-table-column>
-                <el-table-column prop="external" label="是否外聘">
-                    <template slot-scope="{ row }">
-                        <span v-if="row.external"> 是 </span>
-                        <span v-else>否</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="position" label="职称">
-                    <template slot-scope="{ row }">
-                        <span v-if="row.position"> {{ row.position }} </span>
-                        <span v-else>无</span>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-dialog>
+        <el-dialog :visible.sync="dialogVisible" width="700px"> </el-dialog>
     </div>
 </template>
 <script>
@@ -188,7 +216,12 @@ export default {
                     { body: 'json' }
                 )
                 .then(res => {
-                    this.recordSpecialties = res.content;
+                    this.recordSpecialties = res.content.map(item => {
+                        return {
+                            ...item,
+                            children: []
+                        };
+                    });
                 })
                 .catch(e => {
                     console.log(e);
@@ -208,6 +241,7 @@ export default {
     data() {
         return {
             saving: false,
+            activeName: '1',
             formData: {},
             rules: {
                 examOwnerPhone: {
@@ -226,7 +260,8 @@ export default {
             dateRange: [],
             recordSpecialties: [],
             dialogVisible: false,
-            experts: []
+            experts: new Map(),
+            showMore: false
         };
     },
     methods: {
@@ -273,6 +308,26 @@ export default {
                     }
                 });
         },
+        load(row) {
+            if (this.experts.has(row.id)) {
+                return;
+            }
+
+            let experts = new Map([...this.experts]);
+            let list = [];
+            this.$http
+                .post('recordExpert/bySpecialtyId', { recordSpecialtyId: row.id })
+                .then(res => {
+                    if (res.length > 0) {
+                        list = res;
+                    }
+                })
+                .catch(() => {})
+                .then(() => {
+                    experts.set(row.id, list);
+                    this.experts = experts;
+                });
+        },
         openDialog(row) {
             this.dialogVisible = true;
             this.$http
@@ -289,6 +344,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.edit-view {
+    background-color: transparent;
+}
 .date-width {
     width: 100%;
 }
@@ -312,4 +370,20 @@ export default {
 .el-link {
     font-size: 12px;
 }
+.el-card + .el-card {
+    margin-top: 30px;
+}
+/deep/ .el-card__body {
+    position: relative;
+}
+.el-card {
+    overflow: visible;
+}
+.more {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    padding: 9px 9px;
+}
 </style>

src/main/vue/src/views/record/RecordRegulationHistory.vue

@@ -55,7 +55,43 @@
             row-class-name="table-row"
             cell-class-name="table-cell"
             :height="tableHeight"
+            @expand-change="expand"
         >
+            <el-table-column type="expand">
+                <template slot-scope="props">
+                    <el-card v-if="checkMap.has(props.row.id)">
+                        <div v-if="checkMap.get(props.row.id).length === 0">
+                            <div style="text-align:center">暂无数据</div>
+                        </div>
+                        <el-timeline reverse v-else>
+                            <el-timeline-item
+                                :timestamp="item.createdAt"
+                                placement="top"
+                                v-for="item in checkMap.get(props.row.id)"
+                                :key="item.id"
+                            >
+                                <div>
+                                    {{ item.content }}
+                                </div>
+
+                                <div style="margin-top:5px">
+                                    <el-image
+                                        v-for="(img, index) in item.file"
+                                        :key="index"
+                                        :src="img"
+                                        fit="fill"
+                                        :lazy="true"
+                                        style="width:100px;height:100px"
+                                        :preview-src-list="item.file"
+                                    >
+                                    </el-image>
+                                </div>
+                                <!-- content -->
+                            </el-timeline-item>
+                        </el-timeline>
+                    </el-card>
+                </template>
+            </el-table-column>
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
             <el-table-column prop="examinationName" label="考级活动名称" min-width="150"> </el-table-column>
@@ -135,7 +171,8 @@ export default {
             agency: '',
             organizer: '',
             dateRange: '',
-            currentTime: ''
+            currentTime: '',
+            checkMap: new Map()
         };
     },
     computed: {
@@ -196,12 +233,7 @@ export default {
             });
         },
         checkRow(row) {
-            this.$router.push({
-                path: '/recordCheck',
-                query: {
-                    rid: row.id
-                }
-            });
+            this.$refs.table.toggleRowExpansion(row, true);
         },
         download() {
             this.downloading = true;
@@ -284,6 +316,35 @@ export default {
             this.$router.push({
                 path: '/videoList'
             });
+        },
+        expand(row) {
+            let checks = new Map([...this.checkMap]);
+            if (checks.has(row.id)) {
+                return;
+            }
+            this.$http
+                .post(
+                    'recordCheck/all',
+                    {
+                        size: 20,
+                        sort: 'createdAt,asc',
+                        query: { recordId: row.id }
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (!res.empty) {
+                        checks.set(row.id, res.content);
+                    } else {
+                        return Promise.reject();
+                    }
+                })
+                .catch(e => {
+                    checks.set(row.id, []);
+                })
+                .then(() => {
+                    this.checkMap = new Map(checks);
+                });
         }
     }
 };