优化dialog关闭重开校验bug

src/components/UserSearch/index.vue

@@ -20,7 +20,9 @@ export default {
     },
     defaultList: {
       type: Array,
-      default: []
+      default: () => {
+        return []
+      }
     },
     fetchApi: {
       type: Function,

src/pages/system/account/index.vue

@@ -12,7 +12,7 @@
         <div class="filter-item">
           <label>角色</label>
           <div  class="filter-select">
-            <el-select v-model="filter.role_id" placeholder="请选择角色" size="mini">
+            <el-select v-model="filter.role_id" placeholder="请选择角色" size="mini" clearable>
               <el-option v-for="item in roleList" :label="item.display_name" :value="item.id" :key="item.id"> </el-option>
             </el-select>
           </div>
@@ -41,7 +41,7 @@
           </el-table-column>
           <el-table-column label="角色" min-width="80">
             <template slot-scope="{ row }">
-              <span v-for="(item, index) in row.roles" :key="item.name">{{index > 0 ? '、':''}}{{item.display_name}}</span>
+              <p class="table-item-role" v-for="item in row.roles" :key="item.name"><span :class="{doted: true, 'color-red': item.id === 47, 'color-blue': item.id === 56}" v-if="[47, 56].includes(item.id)">·</span>{{item.display_name}}</p>
               <span v-if="!row.roles || !row.roles.length">-</span>
             </template>
           </el-table-column>
@@ -52,7 +52,7 @@
           </el-table-column>
           <el-table-column label="操作" min-width="80" v-if="isSuperAdmin">
             <template slot-scope="scope">
-              <el-button type="text" size="small" @click="handleDelete(scope.row.userid)">删除</el-button>
+              <!-- <el-button type="text" size="small" @click="handleDelete(scope.row.userid)">删除</el-button> -->
               <el-button type="text" size="small" @click="handleEdit(scope.row)">配置权限</el-button>
             </template>
           </el-table-column>
@@ -62,10 +62,10 @@
         <el-pagination :current-page.sync="curPage" :page-size.sync="pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes, jumper" :total="total" @current-change="pageChange" @size-change="pageChange" style="text-align:right;"></el-pagination>
       </div>
     </div>
-    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center>
+    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center @close="handleDialogClose">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
         <template  v-if="dialogType === 'add'">
-          <el-form-item label="ID" prop="userid">
+          <el-form-item label="ID" prop="user_id" :rules="{ required: true, message: '请选择ID', trigger: 'change' }">
             <user-search v-model="form.user_id" @select="handleSelect" :fetchApi="fetchApiSearch" :options="{ size: 'small' }"/>
           </el-form-item>
           <el-form-item label="名称">
@@ -79,7 +79,7 @@
           </el-form-item>
         </template>
         <template v-else>
-          <el-form-item label="角色" prop="role_id">
+          <el-form-item label="角色" prop="role_id" :rules="{ required: true, message: '请选择角色', trigger: 'change' }">
             <el-select v-model="form.role_id" placeholder="请选择角色" size="mini" style="width:100%;">
               <el-option v-for="item in roleList" :label="item.display_name" :value="item.id" :key="item.id"> </el-option>
             </el-select>
@@ -88,7 +88,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handleBtn" size="mini">确 定</el-button>
-        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+        <el-button @click="handleDialogClose" size="mini">取 消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -122,10 +122,7 @@ export default {
       dialogVisible: false,
       dialogType: 'add',
       form: Object.assign({}, defaultForm),
-      rules: {
-        user_id: [{ required: true, message: '请选择ID', trigger: 'change' }],
-        role_id: [{ required: true, message: '请选择角色', trigger: 'change' }]
-      },
+      rules: {},
       loading: false,
       fetchApiSearch: searchUserList,
       roleList: []
@@ -160,9 +157,14 @@ export default {
       Object.keys(this.filter).map(key => { this.filter[key] = '' })
       this.fetchAccountList()
     },
+    handleDialogClose() {
+      this.$refs.ruleForm.resetFields();
+      this.dialogVisible = false
+      this.form = Object.assign({}, defaultForm)
+    },
     handleEdit(data) {
       this.form.user_id = data.user_id
-      this.form.role_id = data.roles[0].id
+      this.form.role_id = data.roles[0] ? data.roles[0].id : ''
       this.dialogType = 'permissions'
       this.dialogVisible = true
     },
@@ -256,7 +258,6 @@ export default {
         role_id: form.role_id,
         sso_ids: form.user_id
       }
-      console.log(this.form)
       roleToUser(params).then(res => {
         if (res.code === 0 && res.data && res.data.status) {
           this.$message.success('配置权限成功')
@@ -295,6 +296,14 @@ h5{
 .table-container{
   flex:1;
 }
+.table-item-role .doted{
+  font-size:40px;
+  color:#409EFF;
+  vertical-align: bottom;
+}
+.table-item-role .doted.color-red{
+  color:#c01540;
+}
 .search-filter{
   display:flex;
   flex-wrap: wrap;

src/pages/system/role/index.vue

@@ -20,7 +20,7 @@
       </el-table>
       <el-pagination :current-page.sync="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" @current-change="pageChange" style="float:right;"></el-pagination>
     </div>
-    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center>
+    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center @close="handleDialogClose">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
         <el-form-item label="角色名称" prop="display_name">
           <el-input v-model="form.display_name" size="small"></el-input>
@@ -34,7 +34,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handleEnter" size="mini">确 定</el-button>
-        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+        <el-button @click="handleDialogClose" size="mini">取 消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -79,6 +79,11 @@ export default {
     handleUsers(val) {
       this.$router.push({ path: '/system/roleToUser', query: { id: val.id } })
     },
+    handleDialogClose() {
+      this.$refs.ruleForm.resetFields();
+      this.dialogVisible = false
+      this.form = Object.assign({}, defaultForm)
+    },
     handlePermission(val) {
       console.log(val)
     },

src/pages/tencent/account/index.vue

@@ -51,7 +51,7 @@
         <el-pagination :current-page.sync="curPage" :page-size.sync="pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes, jumper" :total="total" @current-change="pageChange" @size-change="pageChange" style="text-align:right;"></el-pagination>
       </div>
     </div>
-    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center>
+    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center @close="handleDialogClose">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
         <el-form-item label="ID" prop="userid" v-if="dialogType === 'edit'">
           <el-input v-model="form.userid" size="small" disabled></el-input>
@@ -71,7 +71,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handleBtn" size="mini">确 定</el-button>
-        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+        <el-button @click="handleDialogClose" size="mini">取 消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -81,7 +81,13 @@ import UserSearch from '@/components/UserSearch/index'
 import { searchUserList, operateLog } from '@api/common'
 import { createTxAccount, getTxAccountList, updateTxAccount, deleteTxAccount } from '@api/tencent'
 import { mapGetters } from 'vuex'
-import _ from 'lodash'
+// import _ from 'lodash'
+const defaultForm = {
+  username: '',
+  phone: '',
+  email: '',
+  userid: ''
+}
 export default {
   components: { UserSearch },
   data () {
@@ -120,12 +126,7 @@ export default {
       selection: [],
       dialogVisible: false,
       dialogType: 'add',
-      form: {
-        userid: '',
-        username: '',
-        phone: '',
-        email: ''
-      },
+      form: Object.assign({}, defaultForm),
       rules: {
         userid: [{ required: true, message: '请选择ID', trigger: 'change' }],
         username: [{ required: true, message: '请输入名称', trigger: 'blur' }],
@@ -170,8 +171,16 @@ export default {
       Object.keys(this.filter).map(key => { this.filter[key] = '' })
       this.fetchAccountList()
     },
+    handleDialogClose() {
+      this.$refs.ruleForm.resetFields();
+      this.dialogVisible = false
+      this.form = Object.assign({}, defaultForm)
+    },
     handleEdit(data) {
-      this.form = _.cloneDeep(data)
+      // this.form = _.cloneDeep(data)
+      for (const key in this.form) {
+        this.form[key] = data[key]
+      }
       this.dialogType = 'edit'
       this.dialogVisible = true
     },