用户管理-未选择用户组时操作禁用

src/views/newUserManagement/index.vue

@@ -62,21 +62,21 @@
         <div class="newUserManagement-content-right-top">
           <div class="head flex">
             <div class="title">账号组信息</div>
-            <el-button @click="handleSave" type="primary" size="small">保存</el-button>
+            <el-button @click="handleSave" type="primary" size="small" :disabled="editGroupDisabled">保存</el-button>
           </div>
           <div class="contents">
             <el-form :inline="true" :rules="rules" ref="form" :model="formInline" class="demo-form-inline">
               <el-form-item prop="user_group_name" label="账号组名称">
-                <el-input style="width:260px;margin-right: 30px;" size="small" v-model="formInline.user_group_name" placeholder="请输入账号组名称"></el-input>
+                <el-input style="width:260px;margin-right: 30px;" size="small" v-model="formInline.user_group_name" placeholder="请输入账号组名称" :disabled="editGroupDisabled"></el-input>
               </el-form-item>
               <el-form-item prop="up_user_group_name" label="上级用户组">
-                <el-select style="width:260px;margin-right: 30px;" size="small" clearable v-model="formInline.up_user_group_id" placeholder="请选择上级用户组">
+                <el-select style="width:260px;margin-right: 30px;" size="small" clearable v-model="formInline.up_user_group_id" placeholder="请选择上级用户组" :disabled="editGroupDisabled">
                   <el-option v-for="item in arrTree" :key="item.user_group_id" :label="item.user_group_name" :value="item.user_group_id">
                   </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="描述">
-                <el-input style="width:260px;" size="small" v-model="formInline.user_group_comment" placeholder="请输入描述"></el-input>
+                <el-input style="width:260px;" size="small" v-model="formInline.user_group_comment" placeholder="请输入描述" :disabled="editGroupDisabled"></el-input>
               </el-form-item>
             </el-form>
           </div>
@@ -84,7 +84,7 @@
         <div class="newUserManagement-content-right-bottom">
           <div class="head flex">
             <div class="title">账号列表</div>
-            <el-button @click="handleTableAdd" type="primary" size="small">新增</el-button>
+            <el-button @click="handleTableAdd" type="primary" size="small" :disabled="addUserDisabled">新增</el-button>
           </div>
           <div class="contents">
             <el-table :data="tableData" height="100%" border style="width: 100%">
@@ -259,7 +259,7 @@ export default {
       paswordFlag: false,//修改密码
       tableFlag: false,
       title: '新增',
-      type: 'add',
+      type: '',
       dataType: 'add',
       dataTitle: '新增账号',
       dataObj: {},
@@ -299,6 +299,12 @@ export default {
     dataList () {
       return this.arrs
     },
+    editGroupDisabled() {
+      return !this.type
+    },
+    addUserDisabled() {
+      return !this.treeCheckId
+    }
   },
   methods: {
     async getTreeData () {
@@ -316,16 +322,16 @@ export default {
       return data.user_group_name.indexOf(value) !== -1;
     },
     handleAdd () {
-      const datas = this.arrs.filter(item => item.user_group_name == '新建账号组')
-      if (datas && datas.length) {
-        return
-      }
-      this.arrs.push({ user_group_name: '新建账号组', user_group_id: 'test' })
       this.type = 'add'
       this.treeCheckId = null
       this.tableData = []
       this.clearForm()
       this.formInline.user_group_name = '新建账号组'
+      const datas = this.arrs.filter(item => item.user_group_name == '新建账号组')
+      if (datas && datas.length) {
+        return
+      }
+      this.arrs.push({ user_group_name: '新建账号组', user_group_id: 'test' })
       // console.log(this.arrs)
       // this.treeCheckId = this.arrs[this.arrs.length-1].user_group_id
     },