隐患快速录入标题,页面调整

danger-manage-web/src/views/system/book/index.vue

@@ -142,11 +142,7 @@
     <!-- 添加或修改隐患台账对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <div class="boxd" v-if="zhong==2||fast">
-          <div class="box"></div>
-          <div style="font-size: 17px;margin: 0 10px;">隐患信息</div>
-          <div class="box"></div>
-        </div>
+        <el-divider content-position="left"><i class="el-icon-info"></i><span class="boxx">隐患信息</span></el-divider>
         <el-form-item label="隐患名称" prop="troubleName">
           <el-input v-model="form.troubleName" placeholder="请输入隐患名称" />
         </el-form-item>
@@ -268,11 +264,7 @@
         <!--<el-form-item label="投入物资" prop="investmentMaterial" v-if="zhong==1">-->
         <!--<el-input v-model="form.investmentMaterial" placeholder="请输入投入物资" />-->
         <!--</el-form-item>-->
-        <div class="boxd" v-if="zhong==2||fast">
-          <div class="box"></div>
-          <div style="font-size: 17px;margin: 0 10px;">整改信息</div>
-          <div class="box"></div>
-        </div>
+        <el-divider content-position="left" v-if="zhong==2||fast"><i class="el-icon-info"></i><span class="boxx">整改信息</span></el-divider>
         <el-row :gutter="24" class="mb8">
           <el-col :span="12">
             <el-form-item label="整改人" prop="rectification" v-if="zhong==2||fast">
@@ -292,7 +284,7 @@
                               v-model="form.rectificationTime"
                               type="datetime"
                               value-format="yyyy-MM-dd HH:mm:ss"
-                              placeholder="选择复查时间">
+                              placeholder="选择整改时间">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -312,15 +304,12 @@
         <el-form-item label="整改描述" prop="rectificationText" v-if="zhong==2||fast">
           <el-input v-model="form.rectificationText" placeholder="请输入整改描述" />
         </el-form-item>
-
+        <!--
         <el-form-item label="备注" prop="remarks">
           <el-input v-model="form.remarks" placeholder="请输入备注" />
         </el-form-item>
-        <div class="boxd" v-if="!readOnly &&  fast">
-          <div class="box"></div>
-          <div style="font-size: 17px;margin: 0 10px;">复查信息</div>
-          <div class="box"></div>
-        </div>
+        -->
+        <el-divider content-position="left" v-if="!readOnly &&  fast"><i class="el-icon-info"></i><span class="boxx">复查信息</span></el-divider>
         <el-form-item label="复查图片" v-if="!readOnly &&  fast" prop="picture">
           <MyFileUpload
             listType="picture-card"
@@ -370,7 +359,8 @@
     <!--详情-->
     <el-dialog :title="title" :visible.sync="open2" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="隐患名称" >
+      <el-divider content-position="left"><i class="el-icon-info"></i><span class="boxx">隐患信息</span></el-divider>
+        <el-form-item label="隐患名称">
           <el-input v-model="form.troubleName" placeholder="请输入隐患名称" disabled/>
 
         </el-form-item>
@@ -476,12 +466,15 @@
           <el-input type="textarea" v-model="form.proposal" placeholder="请输入整改建议" disabled/>
         </el-form-item>
 
+      <el-divider content-position="left"><i class="el-icon-info"></i><span class="boxx">整改信息</span></el-divider>
         <el-form-item label="投入费用" prop="investmentCost" v-if="zhong==1">
           <el-input v-model="form.investmentCost" placeholder="请输入投入费用" disabled/>
         </el-form-item>
         <el-form-item label="投入物资" prop="investmentMaterial" v-if="zhong==1">
           <el-input v-model="form.investmentMaterial" placeholder="请输入投入物资" disabled/>
         </el-form-item>
+        <el-row :gutter="24" class="mb8">
+          <el-col :span="12">
           <el-form-item label="整改人" prop="rectification" >
             <el-select v-model="form.rectification" filterable placeholder="请选择" disabled>
               <el-option
@@ -492,39 +485,37 @@
               </el-option>
             </el-select>
           </el-form-item>
-
-        <el-form-item label="整改图片"  prop="picture">
-          <img :src="form.rectificationPictrue" style="width: 20%;vertical-align:middle;cursor:pointer;" @click="showPicture(form)"/>
-          <el-image :zIndex="9999" :ref="'a'+form.id" :src="form.rectificationPictrue" v-show="false" :preview-src-list="[form.rectificationPictrue]" v-if="form.rectificationPictrue != '' && form.rectificationPictrue != null"></el-image>
-        </el-form-item>
+          </el-col>
+          <el-col :span="12">
           <el-form-item label="整改时间" prop="rectificationTime" >
             <el-date-picker clearable size="small"
                             v-model="form.rectificationTime"
                             type="datetime"
                             value-format="yyyy-MM-dd HH:mm:ss"
-                          placeholder="选择复查时间" disabled>
+                            placeholder="选择整改时间" disabled>
             </el-date-picker>
           </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="整改图片"  prop="picture">
+          <img :src="form.rectificationPictrue" style="width: 20%;vertical-align:middle;cursor:pointer;" @click="showPicture(form)"/>
+          <el-image :zIndex="9999" :ref="'a'+form.id" :src="form.rectificationPictrue" v-show="false" :preview-src-list="[form.rectificationPictrue]" v-if="form.rectificationPictrue != '' && form.rectificationPictrue != null"></el-image>
+        </el-form-item>
         <el-form-item label="整改描述" prop="rectificationText" >
           <el-input v-model="form.rectificationText" placeholder="请输入整改描述" disabled/>
         </el-form-item>
-
-
+        <!--
+        <el-form-item label="备注" prop="remarks">
+          <el-input v-model="form.remarks" placeholder="请输入备注" disabled/>
+        </el-form-item>
+        -->
+      <el-divider content-position="left"><i class="el-icon-info"></i><span class="boxx">复查信息</span></el-divider>
         <el-form-item label="复查图片" prop="picture">
           <img :src="form.inspectPictrue" style="width: 20%;vertical-align:middle;cursor:pointer;" @click="showPicture(form)"/>
           <el-image :zIndex="9999" :ref="'a'+form.id" :src="form.inspectPictrue" v-show="false" :preview-src-list="[form.inspectPictrue]" v-if="form.picture != '' && form.inspectPictrue != null"></el-image>
         </el-form-item>
-        <el-form-item label="复查时间" prop="inspectTime" >
-          <el-date-picker clearable size="small"
-                          v-model="form.inspectTime"
-                          type="datetime"
-                          value-format="yyyy-MM-dd HH:mm:ss"
-                          placeholder="选择复查时间" disabled>
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="复查描述" prop="inspectResult">
-          <el-input type="textarea" v-model="form.inspectResult" placeholder="请输入复查结果描述" disabled/>
-        </el-form-item>
+        <el-row :gutter="24" class="mb8">
+          <el-col :span="12">
                 <el-form-item label="复查人"  >
                   <el-select v-model="form.personLiable" filterable placeholder="请选择" disabled>
                     <el-option
@@ -535,15 +526,30 @@
                     </el-option>
                   </el-select>
                 </el-form-item>
-        <el-form-item label="备注" prop="remarks">
-          <el-input v-model="form.remarks" placeholder="请输入备注" disabled/>
+          </el-col>
+          <el-col :span="12">
+          <el-form-item label="复查时间" prop="inspectTime" >
+            <el-date-picker clearable size="small"
+                            v-model="form.inspectTime"
+                            type="datetime"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="选择复查时间" disabled>
+            </el-date-picker>
+          </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="复查描述" prop="inspectResult" style="padding-bottom: 16px;">
+          <el-input type="textarea" v-model="form.inspectResult" placeholder="请输入复查结果描述" disabled/>
         </el-form-item>
 
+
+
       </el-form>
     </el-dialog>
     <!--整改复查-->
     <el-dialog :title="title" :visible.sync="open3" width="900px" append-to-body>
       <el-form ref="form" :model="form" label-width="80px">
+      <el-divider content-position="left"><i class="el-icon-info"></i><span class="boxx">隐患信息</span></el-divider>
         <el-form-item label="隐患名称" prop="troubleName">
           <el-input v-model="form.troubleName" placeholder="请输入隐患名称" disabled/>
         </el-form-item>
@@ -654,15 +660,20 @@
         <el-form-item label="整改建议" prop="proposal">
           <el-input type="textarea" v-model="form.proposal" placeholder="请输入整改建议" disabled/>
         </el-form-item>
+        <!--
         <el-form-item label="备注" prop="remarks">
           <el-input v-model="form.remarks" placeholder="请输入备注" disabled/>
         </el-form-item>
-        <!--<el-form-item label="投入费用" prop="investmentCost" v-if="zhong==1">-->
+        -->
+        <!--<el-form-item label="投入费用" prop="investmentCost" v-if="zhong==1">
         <!--<el-input v-model="form.investmentCost" placeholder="请输入投入费用" />-->
         <!--</el-form-item>-->
         <!--<el-form-item label="投入物资" prop="investmentMaterial" v-if="zhong==1">-->
         <!--<el-input v-model="form.investmentMaterial" placeholder="请输入投入物资" />-->
         <!--</el-form-item>-->
+        <el-divider content-position="left" ><i class="el-icon-info"></i><span class="boxx">整改信息</span></el-divider>
+                <el-row :gutter="24" class="mb8">
+                  <el-col :span="12">
                     <el-form-item label="整改人" prop="rectification"  >
                       <el-select v-model="form.rectification" filterable placeholder="请选择" :disabled="disabled">
                         <el-option
@@ -673,6 +684,19 @@
                         </el-option>
                       </el-select>
                     </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="整改时间" prop="rectificationTime" >
+                      <el-date-picker clearable size="small"
+                                      :disabled="disabled"
+                                      v-model="form.rectificationTime"
+                                      type="datetime"
+                                      value-format="yyyy-MM-dd HH:mm:ss"
+                                      placeholder="选择整改时间">
+                      </el-date-picker>
+                    </el-form-item>
+                  </el-col>
+                  </el-row>
         <el-form-item label="整改图片" v-if="!disabled" prop="rectificationPictrue" >
           <MyFileUpload
             listType="picture-card"
@@ -687,19 +711,36 @@
 
           </img>
         </el-form-item>
-        <el-form-item label="整改时间" prop="rectificationTime" >
+
+        <el-form-item label="整改描述" prop="rectificationText" >
+          <el-input type="textarea" v-model="form.rectificationText" placeholder="请输入整改描述" :disabled="disabled" />
+        </el-form-item>
+
+        <el-divider content-position="left" ><i class="el-icon-info"></i><span class="boxx">复查信息</span></el-divider>
+          <el-row :gutter="24" class="mb8">
+            <el-col :span="12">
+              <el-form-item label="复查人" prop="personLiable" v-if="disabled">
+                <el-select v-model="form.personLiable" filterable placeholder="请选择">
+                  <el-option
+                    v-for="item in staffList"
+                    :key="item.staffId"
+                    :label="item.staffName"
+                    :value="item.staffId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="复查时间" prop="inspectTime" >
                 <el-date-picker clearable size="small"
-                          :disabled="disabled"
-                          v-model="form.rectificationTime"
+                                v-model="form.inspectTime"
                                 type="datetime"
                                 value-format="yyyy-MM-dd HH:mm:ss"
-                          placeholder="选择复查时间">
+                                placeholder="选择复查时间" v-if="disabled">
                 </el-date-picker>
               </el-form-item>
-        <el-form-item label="整改描述" prop="rectificationText" >
-          <el-input type="textarea" v-model="form.rectificationText" placeholder="请输入整改描述" :disabled="disabled" />
-        </el-form-item>
-
+            </el-col>
+           </el-row>
 
         <el-form-item label="复查图片" v-if="disabled" prop="picture">
           <MyFileUpload
@@ -722,22 +763,13 @@
         <el-form-item label="复查描述" prop="inspectResult" v-if="disabled">
           <el-input type="textarea" v-model="form.inspectResult" placeholder="请输入复查结果描述" />
         </el-form-item>
-        <el-form-item label="复查人" prop="personLiable" v-if="disabled">
-          <el-select v-model="form.personLiable" filterable placeholder="请选择">
-            <el-option
-              v-for="item in staffList"
-              :key="item.staffId"
-              :label="item.staffName"
-              :value="item.staffId">
-            </el-option>
-          </el-select>
-        </el-form-item>
+
 
 
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel2">取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -899,6 +931,13 @@ export default {
       this.fileList1=[];
       this.fileList2=[];
     },
+    cancel2() {
+      this.open3 = false;
+      this.reset();
+      this.fileList=[];
+      this.fileList1=[];
+      this.fileList2=[];
+     },
     // 表单重置
     reset() {
       this.form = {
@@ -1204,11 +1243,14 @@ export default {
   display: flex;
   justify-content: center;
   margin-bottom: 10px;
-  .box {
-    width: 385px;
-    height: 1px ;
-    border: 1px solid #000;
-    margin-top: 10px;
+
+}
+.boxx {
+    font-size: 17px;
+    font-weight: bold;
+    padding-left: 5px;
   }
+::v-deep .el-dialog__body{
+  padding:0px 20px!important;
 }
 </style>