feat: 使用标签替代项目

mayfly_go_web/src/views/ops/mongo/MongoEdit.vue

@@ -2,17 +2,10 @@
     <div>
         <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
             <el-form :model="form" ref="mongoForm" :rules="rules" label-width="85px">
-                <el-form-item prop="projectId" label="项目" required>
-                    <el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
+                <el-form-item prop="tagId" label="标签:" required>
+                    <tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
                 </el-form-item>
 
-                <el-form-item prop="envId" label="环境" required>
-                    <el-select @change="changeEnv" style="width: 100%" v-model="form.envId" placeholder="请选择环境">
-                        <el-option v-for="item in envs" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
                 <el-form-item prop="name" label="名称" required>
                     <el-input v-model.trim="form.name" placeholder="请输入名称" auto-complete="off"></el-input>
                 </el-form-item>
@@ -58,19 +51,19 @@
 <script lang="ts">
 import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
 import { mongoApi } from './api';
-import { projectApi } from '../project/api.ts';
 import { machineApi } from '../machine/api.ts';
 import { ElMessage } from 'element-plus';
+import TagSelect from '../component/TagSelect.vue';
 
 export default defineComponent({
     name: 'MongoEdit',
+    components: {
+        TagSelect,
+    },
     props: {
         visible: {
             type: Boolean,
         },
-        projects: {
-            type: Array,
-        },
         mongo: {
             type: [Boolean, Object],
         },
@@ -82,33 +75,22 @@ export default defineComponent({
         const mongoForm: any = ref(null);
         const state = reactive({
             dialogVisible: false,
-            projects: [],
-            envs: [],
-            sshTunnelMachineList: [],
+            sshTunnelMachineList: [] as any,
             form: {
                 id: null,
                 name: null,
                 uri: null,
                 enableSshTunnel: -1,
                 sshTunnelMachineId: null,
-                project: null,
-                projectId: null,
-                envId: null,
-                env: null,
+                tagId: null as any,
+                tagPath: null as any,
             },
             btnLoading: false,
             rules: {
-                projectId: [
+                tagId: [
                     {
                         required: true,
-                        message: '请选择项目',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                envId: [
-                    {
-                        required: true,
-                        message: '请选择环境',
+                        message: '请选择标签',
                         trigger: ['change', 'blur'],
                     },
                 ],
@@ -134,12 +116,9 @@ export default defineComponent({
             if (!state.dialogVisible) {
                 return;
             }
-            state.projects = newValue.projects;
             if (newValue.mongo) {
-                getEnvs(newValue.mongo.projectId);
                 state.form = { ...newValue.mongo };
             } else {
-                state.envs = [];
                 state.form = { db: 0 } as any;
             }
             getSshTunnelMachines();
@@ -152,30 +131,6 @@ export default defineComponent({
             }
         };
 
-        const getEnvs = async (projectId: any) => {
-            state.envs = await projectApi.projectEnvs.request({ projectId });
-        };
-
-        const changeProject = (projectId: number) => {
-            for (let p of state.projects as any) {
-                if (p.id == projectId) {
-                    state.form.project = p.name;
-                }
-            }
-            state.form.envId = null;
-            state.form.env = null;
-            state.envs = [];
-            getEnvs(projectId);
-        };
-
-        const changeEnv = (envId: number) => {
-            for (let p of state.envs as any) {
-                if (p.id == envId) {
-                    state.form.env = p.name;
-                }
-            }
-        };
-
         const btnOk = async () => {
             mongoForm.value.validate(async (valid: boolean) => {
                 if (valid) {
@@ -206,9 +161,7 @@ export default defineComponent({
         return {
             ...toRefs(state),
             mongoForm,
-            changeProject,
             getSshTunnelMachines,
-            changeEnv,
             btnOk,
             cancel,
         };