!84 fix: 修复数据库备份与恢复问题

* refactor dbScheduler
* fix: 按团队名称检索团队
* feat: 创建数据库资源时支持全选数据库
* refactor dbScheduler
* fix: 修复数据库备份与恢复问题

mayfly_go_web/src/views/ops/db/DbEdit.vue

@@ -52,20 +52,23 @@
                     <el-input v-model.trim="form.name" placeholder="请输入数据库别名" auto-complete="off"></el-input>
                 </el-form-item>
 
-                <el-form-item prop="database" label="数据库名" required>
+                <el-form-item prop="database" label="数据库名">
                     <el-select
-                        @change="changeDatabase"
-                        v-model="databaseList"
+                        v-model="dbNamesSelected"
                         multiple
                         clearable
                         collapse-tags
                         collapse-tags-tooltip
                         filterable
+                        :filter-method="filterDbNames"
                         allow-create
                         placeholder="请确保数据库实例信息填写完整后获取库名"
                         style="width: 100%"
                     >
-                        <el-option v-for="db in allDatabases" :key="db" :label="db" :value="db" />
+                        <template #header>
+                            <el-checkbox v-model="checkAllDbNames" :indeterminate="indeterminateDbNames" @change="handleCheckAll"> 全选 </el-checkbox>
+                        </template>
+                        <el-option v-for="db in state.dbNamesFiltered" :key="db" :label="db" :value="db" />
                     </el-select>
                 </el-form-item>
 
@@ -90,6 +93,7 @@ import { dbApi } from './api';
 import { ElMessage } from 'element-plus';
 import TagTreeSelect from '../component/TagTreeSelect.vue';
 import { TagResourceTypeEnum } from '@/common/commonEnum';
+import type { CheckboxValueType } from 'element-plus';
 
 const props = defineProps({
     visible: {
@@ -139,13 +143,18 @@ const rules = {
     ],
 };
 
+const checkAllDbNames = ref(false);
+const indeterminateDbNames = ref(false);
+
 const dbForm: any = ref(null);
 const tagSelectRef: any = ref(null);
 
 const state = reactive({
     dialogVisible: false,
     allDatabases: [] as any,
-    databaseList: [] as any,
+    dbNamesSelected: [] as any,
+    dbNamesFiltered: [] as any,
+    filterString: '',
     form: {
         id: null,
         tagId: [],
@@ -158,7 +167,7 @@ const state = reactive({
     instances: [] as any,
 });
 
-const { dialogVisible, allDatabases, form, databaseList } = toRefs(state);
+const { dialogVisible, allDatabases, form, dbNamesSelected } = toRefs(state);
 
 const { isFetching: saveBtnLoading, execute: saveDbExec } = dbApi.saveDb.useApi(form);
 
@@ -171,25 +180,18 @@ watch(props, async (newValue: any) => {
         state.form = { ...newValue.db };
 
         // 将数据库名使用空格切割，获取所有数据库列表
-        state.databaseList = newValue.db.database.split(' ');
+        state.dbNamesSelected = newValue.db.database.split(' ');
     } else {
         state.form = {} as any;
-        state.databaseList = [];
+        state.dbNamesSelected = [];
     }
 });
 
 const changeInstance = () => {
-    state.databaseList = [];
+    state.dbNamesSelected = [];
     getAllDatabase();
 };
 
-/**
- * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
- */
-const changeDatabase = () => {
-    state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
-};
-
 const getAllDatabase = async () => {
     if (state.form.instanceId > 0) {
         state.allDatabases = await dbApi.getAllDatabase.request({ instanceId: state.form.instanceId });
@@ -210,7 +212,7 @@ const getInstances = async (instanceName: string = '', id = 0) => {
 const open = async () => {
     if (state.form.instanceId) {
         // 根据id获取，因为需要回显实例名称
-        getInstances('', state.form.instanceId);
+        await getInstances('', state.form.instanceId);
     }
     await getAllDatabase();
 };
@@ -230,7 +232,7 @@ const btnOk = async () => {
 };
 
 const resetInputDb = () => {
-    state.databaseList = [];
+    state.dbNamesSelected = [];
     state.allDatabases = [];
     state.instances = [];
 };
@@ -242,5 +244,62 @@ const cancel = () => {
         resetInputDb();
     }, 500);
 };
+
+const checkDbSelect = (val: string[]) => {
+    const selected = val.filter((dbName: string) => {
+        return dbName.includes(state.filterString);
+    });
+    if (selected.length === 0) {
+        checkAllDbNames.value = false;
+        indeterminateDbNames.value = false;
+        return;
+    }
+    if (selected.length === state.dbNamesFiltered.length) {
+        checkAllDbNames.value = true;
+        indeterminateDbNames.value = false;
+        return;
+    }
+    indeterminateDbNames.value = true;
+};
+
+watch(dbNamesSelected, (val: string[]) => {
+    checkDbSelect(val);
+    state.form.database = val.join(' ');
+});
+
+watch(allDatabases, (val: string[]) => {
+    state.dbNamesFiltered = val.map((dbName: string) => dbName);
+});
+
+const handleCheckAll = (val: CheckboxValueType) => {
+    const otherSelected = state.dbNamesSelected.filter((dbName: string) => {
+        return !state.dbNamesFiltered.includes(dbName);
+    });
+    if (val) {
+        state.dbNamesSelected = otherSelected.concat(state.dbNamesFiltered);
+    } else {
+        state.dbNamesSelected = otherSelected;
+    }
+};
+
+const filterDbNames = (filterString: string) => {
+    const dbNamesCreated = state.dbNamesSelected.filter((dbName: string) => {
+        return !state.allDatabases.includes(dbName);
+    });
+    if (filterString.length === 0) {
+        state.dbNamesFiltered = dbNamesCreated.concat(state.allDatabases);
+        checkDbSelect(state.dbNamesSelected);
+        return;
+    }
+    state.dbNamesFiltered = dbNamesCreated.concat(state.allDatabases).filter((dbName: string) => {
+        if (dbName == filterString) {
+            return false;
+        }
+        return dbName.includes(filterString);
+    });
+    state.dbNamesFiltered.unshift(filterString);
+    state.filterString = filterString;
+    checkDbSelect(state.dbNamesSelected);
+};
 </script>
 <style lang="scss"></style>