PC端 账号管理 3、账号管理的页面优化，不要一个字段一行，改为4个字段一行的形式；

src/views/setting/account/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
     <template slot-scope="{activeKey, data}">
       <div :style="{
         width: '100%',
@@ -74,46 +74,64 @@
         </div>
       </div>
       <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
-        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="120px">
-          <el-form-item label="账号" prop="account">
-            <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
-          </el-form-item>
-          <el-form-item label="用户名" prop="nickName">
-            <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
-          </el-form-item>
-          <el-form-item label="手机号" prop="linkPhone">
-            <el-input v-model="addForm.linkPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
-          </el-form-item>
-          <el-form-item label="角色组" prop="role">
-            <el-select v-model="addForm.role" placeholder="请选择角色组" style="width: 100%;">
-              <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
-                :key="index"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="网点" prop="adminWebsitId">
-            <el-cascader style="width: 100%" :options="departmentList"
-              :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="addForm.adminWebsitId"
-              clearable>
-            </el-cascader>
-          </el-form-item>
-          <el-form-item label="密码" prop="newPassword">
-            <el-input v-model="addForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码"
-              :type="passwordType1"></el-input>
-            <span class="show-pwd" @click="showPwd(1)">
-              <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
-            </span>
-          </el-form-item>
-          <el-form-item label="确认密码" prop="confirmPassword">
-            <el-input v-model="addForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
-              :type="passwordType2"></el-input>
-            <span class="show-pwd" @click="showPwd(2)">
-              <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
-            </span>
-          </el-form-item>
-          <el-form-item label="是否公众号通知" prop="pubNotice">
-            <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949">
-            </el-switch>
-          </el-form-item>
+        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
+          <el-row :gutter="20">
+            <el-col :md="6">
+              <el-form-item label="账号" prop="account">
+                <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="用户名" prop="nickName">
+                <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="手机号" prop="linkPhone">
+                <el-input v-model="addForm.linkPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="角色组" prop="role">
+                <el-select v-model="addForm.role" placeholder="请选择角色组" style="width: 100%;">
+                  <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
+                    :key="index"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="网点" prop="adminWebsitId">
+                <el-cascader style="width: 100%" :options="departmentList"
+                  :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="addForm.adminWebsitId"
+                  clearable>
+                </el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="密码" prop="newPassword">
+                <el-input v-model="addForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码"
+                  :type="passwordType1"></el-input>
+                <span class="show-pwd" @click="showPwd(1)">
+                  <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="确认密码" prop="confirmPassword">
+                <el-input v-model="addForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
+                  :type="passwordType2"></el-input>
+                <span class="show-pwd" @click="showPwd(2)">
+                  <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6">
+              <el-form-item label="是否公众号通知" prop="pubNotice" label-width="120px">
+                <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949">
+                </el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="data.removeTab()">取 消</el-button>
@@ -390,19 +408,19 @@ export default {
     // 重置密码
     handleReset(id) {
       this.$refs.tabPage.addTab({
-				activeKey: "resetpassword",
-				key: "resetpassword",
-				label: "重置密码",
-				triggerEvent: () => {
-					this.cancelResetForm()
-					this.$nextTick(() => {
-						this.resetId = id;
-					})
-				},
-				closeEvent: () => {
+        activeKey: "resetpassword",
+        key: "resetpassword",
+        label: "重置密码",
+        triggerEvent: () => {
           this.cancelResetForm()
-				}
-			})
+          this.$nextTick(() => {
+            this.resetId = id;
+          })
+        },
+        closeEvent: () => {
+          this.cancelResetForm()
+        }
+      })
     },
 
     // 取消重置密码
@@ -432,12 +450,12 @@ export default {
     // 新增编辑 账户
     async addOrEdit(type, id) {
       this.$refs.tabPage.addTab({
-				activeKey: type,
+        activeKey: type,
         key: type,
         label: ({ add: "新增", edit: "编辑" })[type],
-				triggerEvent: async () => {
+        triggerEvent: async () => {
           this.cancelAddForm()
-					this.addFormType = type;
+          this.addFormType = type;
           this.departmentList = await this.getDepartmentList();
           if (type == 'edit') {
             this.editId = id;
@@ -452,11 +470,11 @@ export default {
               }
             })
           }
-				},
-				closeEvent: () => {
-          
-				}
-			})
+        },
+        closeEvent: () => {
+
+        }
+      })
     },
 
     // 取消 新增编辑账户