Added regex search in UserManagement

ui/src/pages/power/UserManagement.vue

@@ -23,18 +23,33 @@
                 </template>
             </el-button>
         </el-col>
-        <el-col :span="4">
-            <el-form-item label="名称" class="fill-with">
+        <el-col :span="6">
+            <el-form-item
+                label="名称"
+                class="fill-with"
+                :error="isRegexLegal ? '' : '非法正则表达式'"
+            >
                 <el-input
                     v-model="inputName"
-                    maxlength="20"
                     show-word-limit
                     placeholder="请输入内容"
                     @keyup.enter="handleQuery"
-                />
+                    @change="handleInputChange"
+                >
+                    <template #suffix>
+                        <el-tooltip content="正则表达式">
+                            <el-checkbox
+                                v-model="checkedRegex"
+                                label=".*"
+                                :true-label="1"
+                                @change="handleInputChange"
+                            />
+                        </el-tooltip>
+                    </template>
+                </el-input>
             </el-form-item>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="4">
             <el-select
                 v-model="selectedRole"
                 class="fill-with"
@@ -52,7 +67,7 @@
                 />
             </el-select>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="4">
             <el-select
                 v-model="selectedGroup"
                 class="fill-with"
@@ -200,6 +215,7 @@ import {
     DATABASE_UPDATE_OK
 } from '@/constants/Common.constants.js'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import _ from 'lodash'
 
 export default {
     name: 'UserManagement',
@@ -218,12 +234,15 @@ export default {
             roleOptions: [],
             groupOptions: [],
             searchName: '',
-            searchRole: [],
-            searchGroup: [],
-            searchEnable: -1,
             inputName: '',
+            searchRegex: 0,
+            checkedRegex: 0,
+            isRegexLegal: true,
+            searchRole: [],
             selectedRole: [],
+            searchGroup: [],
             selectedGroup: [],
+            searchEnable: -1,
             selectedEnable: -1,
             currentPage: 1,
             pageSize: 50,
@@ -269,6 +288,13 @@ export default {
     },
     methods: {
         loadUserTable() {
+            if (!this.isRegexLegal) {
+                ElMessage.error({
+                    dangerouslyUseHTMLString: true,
+                    message: '<strong>非法正则表达式</strong>，请重新输入'
+                })
+                return
+            }
             this.tableLoading = true
             request
                 .get('/user', {
@@ -277,7 +303,8 @@ export default {
                     searchName: this.searchName,
                     searchRole: this.searchRole + '',
                     searchGroup: this.searchGroup + '',
-                    searchEnable: this.searchEnable
+                    searchEnable: this.searchEnable,
+                    searchRegex: this.searchRegex ?? 0
                 })
                 .then((res) => {
                     const response = res.data
@@ -494,18 +521,35 @@ export default {
         },
         handleQuery() {
             this.searchName = this.inputName
+            this.searchRegex = _.cloneDeep(this.checkedRegex)
             this.searchRole = this.selectedRole
             this.searchGroup = this.selectedGroup
             this.searchEnable = this.selectedEnable
             this.currentPage = 1
+            this.handleInputChange()
             this.loadUserTable()
         },
         handleClear() {
             this.inputName = ''
+            this.checkedRegex = 0
             this.selectedRole = []
             this.selectedGroup = []
             this.selectedEnable = -1
             this.handleQuery()
+        },
+        handleInputChange() {
+            if (this.checkedRegex) {
+                try {
+                    RegExp(this.inputName)
+                    this.isRegexLegal = !(
+                        this.inputName.includes('{}') || this.inputName.includes('[]')
+                    )
+                } catch (e) {
+                    this.isRegexLegal = false
+                }
+            } else {
+                this.isRegexLegal = true
+            }
         }
     },
     mounted() {