排版表页面优化

frontend_web/src/views/duty/detail/index.vue

@@ -2,74 +2,82 @@
   <d2-container>
     <template slot="header"
               style="padding: 5px;">
-      <el-form :model="dutyDetail"
-               label-width="100px">
-        <el-row :gutter="20">
-          <el-col :span="8">
+      <el-form :model="dutyDetail">
+        <el-row>
+          <el-col :span="4">
             <el-form-item label="标题"
                           label-width="120px">
               {{dutyDetail.Title}}
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="4">
             <el-form-item label="学年"
                           label-width="120px">
               {{dutyDetail.Year}}年
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="4">
             <el-form-item label="学期"
                           label-width="120px">
               {{this.termName}}
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="值班人员"
-                          size="mini"
-                          label-width="120px">
-              <el-tag @click="personClick(item.Id)"
-                      v-for="item in PeopleList"
-                      :key="item.Id"
-                      :label="item.Id">{{item.PersonnelName}}</el-tag>
-            </el-form-item>
-
+        </el-row>
+        <el-row>
+          <el-form-item label="地点"
+                        size="mini"
+                        label-width="120px">
+            <el-checkbox-group v-model="selectLocal">
+              <el-checkbox-button v-for="item in LocalList"
+                                  :label="item.ItemValue"
+                                  :key="item.ItemValue"
+                                  style="float:left">{{item.ItemName}}</el-checkbox-button>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="值班时间"
+                        size="mini"
+                        label-width="120px">
+            <el-checkbox-group v-model="selectTime">
+              <el-checkbox-button v-for="item in TimeList"
+                                  :label="item.ItemValue"
+                                  :key="item.ItemValue"
+                                  style="float:left">{{item.ItemName}}</el-checkbox-button>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="值班人员"
+                        size="mini"
+                        label-width="120px">
+            <el-button @click="personClick(item.Id)"
+                       v-for="item in PeopleList"
+                       :key="item.Id"
+                       :label="item.Id"
+                       style="float:left">{{item.PersonnelName}}</el-button>
+          </el-form-item>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="18">
+            &nbsp;
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="地点"
-                          size="mini"
-                          label-width="120px">
-              <el-checkbox-group v-model="selectLocal">
-                <el-checkbox v-for="item in LocalList"
-                             :label="item.ItemValue"
-                             :key="item.ItemValue">{{item.ItemName}}</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
+          <el-col :span="2">
+            <el-button size="mini"
+                       @click="addList()"
+                       type="success">生成值班表</el-button>
           </el-col>
-
-          <el-col :span="8">
-            <el-form-item label="值班时间"
-                          size="mini"
-                          label-width="120px">
-              <el-checkbox-group v-model="selectTime">
-                <el-checkbox v-for="item in TimeList"
-                             :label="item.ItemValue"
-                             :key="item.ItemValue">{{item.ItemName}}</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
+          <el-col :span="2">
+            <el-button size="mini"
+                       type="primary"
+                       @click="addDuytDetail()">保存值班表</el-button>
+          </el-col>
+          <el-col :span="2">
+            <el-button size="mini"
+                       type="warning"
+                       @click="closePage()">关闭</el-button>
           </el-col>
         </el-row>
-        <el-button size="mini"
-                   @click="addList()"
-                   type="success"
-                   style="margin-right:6px">生成值班表</el-button>
-        <el-button size="mini"
-                   type="primary"
-                   style="margin-left:10px"
-                   @click="addDuytDetail()">保存值班表</el-button>
-        <el-button size="mini"
-                   type="warning"
-                   style="margin-right:6px"
-                   @click="closePage()">关闭</el-button>
       </el-form>
     </template>
     <el-table :data="list"