From 856f47e0ba4b0348d631846ca360b87db3f84693 Mon Sep 17 00:00:00 2001
From: "[li_she]" <[li.she@xujiesoft.com]>
Date: Fri, 6 Aug 2021 16:33:39 +0800
Subject: [PATCH] =?UTF-8?q?el-form-item=20=E9=97=B4=E8=B7=9D=20=E8=A1=8C?=
 =?UTF-8?q?=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/global.scss                  |  14 +-
 src/views/common/login.vue                   |   7 +-
 src/views/modules/sys/user-add-or-update.vue | 367 ++++++++++---------
 3 files changed, 202 insertions(+), 186 deletions(-)

diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 747b763..34c298f 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -101,11 +101,15 @@
 
 
 /* el-form-item 间距 start*/
-.el-form-item__content {
-  line-height: 40px;
-  position: relative;
-  font-size: 14px;
-  margin-top: -20px;
+.el-form--label-top .el-form-item__label {
+  float: none;
+  display: inline-block;
+  text-align: left;
+  padding: 0px 0 0px;
+  line-height: 28px;
+}
+.el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label {
+  line-height: 30px;
 }
 /* el-form-item 间距 end*/
 
diff --git a/src/views/common/login.vue b/src/views/common/login.vue
index e945f9f..30f4531 100644
--- a/src/views/common/login.vue
+++ b/src/views/common/login.vue
@@ -95,7 +95,7 @@
       top: 0;
       left: 0;
       z-index: -1;
-      width: 65%;
+      width: 80%;
       height: 100%;
       content: "";
       background-image: url(~@/assets/img/login_bg.jpg);
@@ -138,7 +138,7 @@
       top: 0;
       right: 0;
       padding: 15% 60px 180px;
-      width: 470px;
+      width: 350px;
       min-height: 100%;
       background-color: #fff;
     }
@@ -165,8 +165,9 @@
       height: 45px;
     }
     .el-button--medium {
+      margin-top: 18px;
       padding: 5px 11px;
-      font-size: 30px;
+      font-size: 25px;
       border-radius: 4px;
     }
   }
diff --git a/src/views/modules/sys/user-add-or-update.vue b/src/views/modules/sys/user-add-or-update.vue
index fa4a23f..37d0f54 100644
--- a/src/views/modules/sys/user-add-or-update.vue
+++ b/src/views/modules/sys/user-add-or-update.vue
@@ -1,198 +1,209 @@
 <template>
-  <el-dialog
-    width="25%"
-    v-drag
-    :title="!dataForm.id ? '新增' : '修改'"
-    :close-on-click-modal="false"
-    :visible.sync="visible">
-    <!-- 取消    :rules="dataRule"-->
-    <el-form :model="dataForm" label-position="top"  ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="用户名" prop="userName">
-        <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
-      </el-form-item>
-      <el-form-item label="手机号" prop="mobile">
-        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
-      </el-form-item>
-      <el-form-item label="工厂" size="mini" prop="site">
-        <el-checkbox-group v-model="dataForm.site">
-          <el-checkbox v-for="item in factorys" :key="item.id" :label="role.roleId">{{ role.roleName }}</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="角色" size="mini" prop="roleIdList">
-        <el-checkbox-group v-model="dataForm.roleIdList">
-          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="状态" size="mini" prop="status">
-        <el-radio-group v-model="dataForm.status">
-          <el-radio :label="0">禁用</el-radio>
-          <el-radio :label="1">正常</el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
+  <div    class="user-add-or-update">
+    <el-dialog
+
+      width="25%"
+      :title="!dataForm.id ? '新增' : '修改'"
+      :close-on-click-modal="false"
+      :visible.sync="visible">
+      <!-- 取消    :rules="dataRule"-->
+      <el-form  :model="dataForm" label-position="top" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+                label-width="80px">
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
+          <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
+          <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile">
+          <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="工厂" size="mini" prop="site">
+          <el-checkbox-group v-model="dataForm.site">
+            <el-checkbox v-for="item in factorys" :key="item.id" :label="role.roleId">{{ role.roleName }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="角色" size="mini" prop="roleIdList">
+          <el-checkbox-group v-model="dataForm.roleIdList">
+            <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{
+                role.roleName
+              }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="状态" size="mini" prop="status">
+          <el-radio-group v-model="dataForm.status">
+            <el-radio :label="0">禁用</el-radio>
+            <el-radio :label="1">正常</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
-  </el-dialog>
+    </el-dialog>
+  </div>
+
 </template>
 
 <script>
-  import { isEmail, isMobile } from '@/utils/validate'
-  import {getFactory} from "@/api/factory";
-  export default {
-    data () {
-      var validatePassword = (rule, value, callback) => {
-        if (!this.dataForm.id && !/\S/.test(value)) {
-          callback(new Error('密码不能为空'))
-        } else {
-          callback()
-        }
+import {isEmail, isMobile} from '@/utils/validate'
+import {getFactory} from "@/api/factory";
+
+export default {
+  data() {
+    var validatePassword = (rule, value, callback) => {
+      if (!this.dataForm.id && !/\S/.test(value)) {
+        callback(new Error('密码不能为空'))
+      } else {
+        callback()
       }
-      var validateComfirmPassword = (rule, value, callback) => {
-        if (!this.dataForm.id && !/\S/.test(value)) {
-          callback(new Error('确认密码不能为空'))
-        } else if (this.dataForm.password !== value) {
-          callback(new Error('确认密码与密码输入不一致'))
-        } else {
-          callback()
-        }
+    }
+    var validateComfirmPassword = (rule, value, callback) => {
+      if (!this.dataForm.id && !/\S/.test(value)) {
+        callback(new Error('确认密码不能为空'))
+      } else if (this.dataForm.password !== value) {
+        callback(new Error('确认密码与密码输入不一致'))
+      } else {
+        callback()
       }
-      var validateEmail = (rule, value, callback) => {
-        if (!isEmail(value)) {
-          callback(new Error('邮箱格式错误'))
-        } else {
-          callback()
-        }
+    }
+    var validateEmail = (rule, value, callback) => {
+      if (!isEmail(value)) {
+        callback(new Error('邮箱格式错误'))
+      } else {
+        callback()
       }
-      var validateMobile = (rule, value, callback) => {
-        if (!isMobile(value)) {
-          callback(new Error('手机号格式错误'))
-        } else {
-          callback()
-        }
+    }
+    var validateMobile = (rule, value, callback) => {
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式错误'))
+      } else {
+        callback()
       }
-      return {
-        visible: false,
-        roleList: [],
-        factorys: [],
-        dataForm: {
-          id: 0,
-          userName: '',
-          password: '',
-          comfirmPassword: '',
-          salt: '',
-          email: '',
-          mobile: '',
-          roleIdList: [],
-          status: 1,
-          site: 0
-        },
-        dataRule: {
-          userName: [
-            { required: true, message: '用户名不能为空', trigger: 'blur' }
-          ],
-          password: [
-            { validator: validatePassword, trigger: 'blur' }
-          ],
-          comfirmPassword: [
-            { validator: validateComfirmPassword, trigger: 'blur' }
-          ],
-          email: [
-            { required: true, message: '邮箱不能为空', trigger: 'blur' },
-            { validator: validateEmail, trigger: 'blur' }
-          ],
-          mobile: [
-            { required: true, message: '手机号不能为空', trigger: 'blur' },
-            { validator: validateMobile, trigger: 'blur' }
-          ]
-        }
+    }
+    return {
+      visible: false,
+      roleList: [],
+      factorys: [],
+      dataForm: {
+        id: 0,
+        userName: '',
+        password: '',
+        comfirmPassword: '',
+        salt: '',
+        email: '',
+        mobile: '',
+        roleIdList: [],
+        status: 1,
+        site: 0
+      },
+      dataRule: {
+        userName: [
+          {required: true, message: '用户名不能为空', trigger: 'blur'}
+        ],
+        password: [
+          {validator: validatePassword, trigger: 'blur'}
+        ],
+        comfirmPassword: [
+          {validator: validateComfirmPassword, trigger: 'blur'}
+        ],
+        email: [
+          {required: true, message: '邮箱不能为空', trigger: 'blur'},
+          {validator: validateEmail, trigger: 'blur'}
+        ],
+        mobile: [
+          {required: true, message: '手机号不能为空', trigger: 'blur'},
+          {validator: validateMobile, trigger: 'blur'}
+        ]
       }
+    }
+  },
+  methods: {
+    // 获取工厂信息
+    factoryList() {
+      getFactory().then((data) => {
+        this.factorys = data.list
+      })
     },
-    methods: {
-      // 获取工厂信息
-      factoryList(){
-        getFactory().then((data) =>{
-          this.factorys = data.list
+    init(id) {
+      this.dataForm.id = id || 0
+      this.factoryList()
+      this.$http({
+        url: this.$http.adornUrl('/sys/role/select'),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then(({data}) => {
+        this.roleList = data && data.code === 0 ? data.list : []
+      }).then(() => {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
         })
-      },
-      init (id) {
-        this.dataForm.id = id || 0
-        this.factoryList()
-        this.$http({
-          url: this.$http.adornUrl('/sys/role/select'),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          this.roleList = data && data.code === 0 ? data.list : []
-        }).then(() => {
-          this.visible = true
-          this.$nextTick(() => {
-            this.$refs['dataForm'].resetFields()
+      }).then(() => {
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.dataForm.userName = data.user.username
+              this.dataForm.salt = data.user.salt
+              this.dataForm.email = data.user.email
+              this.dataForm.mobile = data.user.mobile
+              this.dataForm.roleIdList = data.user.roleIdList
+              this.dataForm.status = data.user.status
+            }
           })
-        }).then(() => {
-          if (this.dataForm.id) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
-              method: 'get',
-              params: this.$http.adornParams()
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.dataForm.userName = data.user.username
-                this.dataForm.salt = data.user.salt
-                this.dataForm.email = data.user.email
-                this.dataForm.mobile = data.user.mobile
-                this.dataForm.roleIdList = data.user.roleIdList
-                this.dataForm.status = data.user.status
-              }
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'userId': this.dataForm.id || undefined,
+              'username': this.dataForm.userName,
+              'password': this.dataForm.password,
+              'salt': this.dataForm.salt,
+              'email': this.dataForm.email,
+              'mobile': this.dataForm.mobile,
+              'status': this.dataForm.status,
+              'roleIdList': this.dataForm.roleIdList
             })
-          }
-        })
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
-              method: 'post',
-              data: this.$http.adornData({
-                'userId': this.dataForm.id || undefined,
-                'username': this.dataForm.userName,
-                'password': this.dataForm.password,
-                'salt': this.dataForm.salt,
-                'email': this.dataForm.email,
-                'mobile': this.dataForm.mobile,
-                'status': this.dataForm.status,
-                'roleIdList': this.dataForm.roleIdList
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
               })
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
-      }
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
     }
   }
+}
 </script>
+<style lang="scss" scoped>
+
+</style>