账号不可编辑

vu/src/views/account/components/AccountDetail.vue

@@ -10,13 +10,13 @@
         <el-row>
 
           <el-col :span="24">
-            <el-form-item style="margin-bottom: 40px;" prop="username" v-if="isShow">
+            <el-form-item v-if="isShow" style="margin-bottom: 40px;" prop="username">
               <MDinput v-model="postForm.username" :maxlength="100" name="username" required disabled="disabled">
                 账号
               </MDinput>
             </el-form-item>
 
-            <el-form-item style="margin-bottom: 40px;" prop="username" v-else>
+            <el-form-item v-else style="margin-bottom: 40px;" prop="username">
               <MDinput v-model="postForm.username" :maxlength="100" name="username" required>
                 账号
               </MDinput>
@@ -27,7 +27,7 @@
         <el-row>
 
           <el-col :span="24">
-            <el-form-item style="margin-bottom: 40px;" prop="password" v-show="is_show">
+            <el-form-item v-show="is_show" style="margin-bottom: 40px;" prop="password">
               <MDinput v-model="postForm.password" :maxlength="100" name="password" required>
                 密码
               </MDinput>
@@ -76,145 +76,144 @@
 </template>
 
 <script>
-  import MDinput from '@/components/MDinput'
-  import Sticky from '@/components/Sticky' // 粘性header组件
-  import {validateURL} from '@/utils/validate'
-  import {CreateAccount, fetchAccountDetail,} from '@/api/account'
-  import {userSearch} from '@/api/remoteSearch'
-
-  const defaultForm = {
-    status: 'draft',
-    username: '',
-    password: '',
-    email: '',
-    phone: '',
-    nick_name: ''
-  }
-
-  export default {
-    name: 'GroupDetail',
-    components: {MDinput, Sticky},
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      const validateRequire = (rule, value, callback) => {
-        value = value.trim()
-        if (value === '') {
-          this.$message({
-            message: rule.field + '为必传项',
-            type: 'error'
-          })
-          callback(new Error(rule.field + '为必传项'))
-        } else {
-          callback()
-        }
-      }
-
-      const validatePasswordLength = (rule, value, callback) => {
-        value = value.trim()
-        if (value === '') {
-          this.$message({
-            message: rule.field + '为必传项',
-            type: 'error'
-          })
-          callback(new Error(rule.field + '为必传项'))
-        } else if ( value.length < 6) {
-          this.$message({
-            message: '密码不得少于6位',
-            type: 'error'
-          })
-          callback(new Error('密码不得少于6位'))
-        } else {
-          callback()
-        }
-      }
-      return {
-        postForm: Object.assign({}, defaultForm),
-        loading: false,
-        userListOptions: [],
-        rules: {
-          username: [{validator: validateRequire, trigger: 'blur'}],
-          nick_name: [{validator: validateRequire, trigger: 'blur'}],
-          email: [{validator: validateRequire, trigger: 'blur'}],
-          password: [{validator: validatePasswordLength, trigger: 'blur'}],
-          phone: [{validator: validateRequire, trigger: 'blur'}],
-        },
-        is_show: true
-      }
-    },
-    created() {
-      if (this.isEdit) {
-        const id = this.$route.params && this.$route.params.id
-        this.fetchData(id)
+import MDinput from '@/components/MDinput'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { validateURL } from '@/utils/validate'
+import { CreateAccount, fetchAccountDetail } from '@/api/account'
+import { userSearch } from '@/api/remoteSearch'
+
+const defaultForm = {
+  status: 'draft',
+  username: '',
+  password: '',
+  email: '',
+  phone: '',
+  nick_name: ''
+}
+
+export default {
+  name: 'GroupDetail',
+  components: { MDinput, Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      value = value.trim()
+      if (value === '') {
+        this.$message({
+          message: rule.field + '为必传项',
+          type: 'error'
+        })
+        callback(new Error(rule.field + '为必传项'))
       } else {
-        this.postForm = Object.assign({}, defaultForm)
+        callback()
       }
+    }
 
-      this.tempRoute = Object.assign({}, this.$route)
-    },
-    methods: {
-      fetchData(id) {
-        fetchAccountDetail(id).then(response => {
-          this.postForm = response.data.data.data
-          this.is_show = false
-        }).catch(err => {
-          console.log(err)
+    const validatePasswordLength = (rule, value, callback) => {
+      value = value.trim()
+      if (value === '') {
+        this.$message({
+          message: rule.field + '为必传项',
+          type: 'error'
+        })
+        callback(new Error(rule.field + '为必传项'))
+      } else if (value.length < 6) {
+        this.$message({
+          message: '密码不得少于6位',
+          type: 'error'
         })
+        callback(new Error('密码不得少于6位'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+        username: [{ validator: validateRequire, trigger: 'blur' }],
+        nick_name: [{ validator: validateRequire, trigger: 'blur' }],
+        email: [{ validator: validateRequire, trigger: 'blur' }],
+        password: [{ validator: validatePasswordLength, trigger: 'blur' }],
+        phone: [{ validator: validateRequire, trigger: 'blur' }]
       },
-      submitForm() {
-        this.$refs.postForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            CreateAccount(this.postForm).then(response => {
-              if (response.data.data.code == 500) {
-                this.$notify({
-                  title: '失败',
-                  message: response.data.data.message,
-                  type: 'error',
-                  duration: 2000
-                })
-                this.loading = false;
-                return false;
-              }
-              this.$notify({
-                title: '成功',
-                message: response.data.data.message,
-                type: 'success',
-                duration: 2000
-              })
-              setTimeout(() => {
-                this.$router.push('/account/list')
-              }, 1000)
+      isShow: false
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
 
-            }).catch(err => {
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchAccountDetail(id).then(response => {
+        this.postForm = response.data.data.data
+        this.isShow = true
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          CreateAccount(this.postForm).then(response => {
+            if (response.data.data.code == 500) {
               this.$notify({
                 title: '失败',
-                message: '操作失败',
-                type: 'danger',
+                message: response.data.data.message,
+                type: 'error',
                 duration: 2000
               })
-            });
+              this.loading = false
+              return false
+            }
+            this.$notify({
+              title: '成功',
+              message: response.data.data.message,
+              type: 'success',
+              duration: 2000
+            })
+            setTimeout(() => {
+              this.$router.push('/account/list')
+            }, 1000)
+          }).catch(err => {
+            this.$notify({
+              title: '失败',
+              message: '操作失败',
+              type: 'danger',
+              duration: 2000
+            })
+          })
 
-            this.postForm.status = 'published'
-            this.loading = false
-          } else {
-            console.log('error submit!!')
-            return false
-          }
-        })
-      },
-      getRemoteUserList(query) {
-        userSearch(query).then(response => {
-          if (!response.data.items) return
-          this.userListOptions = response.data.items.map(v => v.name)
-        })
-      }
+          this.postForm.status = 'published'
+          this.loading = false
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    getRemoteUserList(query) {
+      userSearch(query).then(response => {
+        if (!response.data.items) return
+        this.userListOptions = response.data.items.map(v => v.name)
+      })
     }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>