mayfly-go/mayfly_go_web/src/views/ops/component/SshTunnelSelect.vue

<template>
    <div style="width: 100%">
        <el-select @focus="getSshTunnelMachines" @change="change" style="width: 100%" v-model="sshTunnelMachineId"
            @clear="clear" placeholder="请选择SSH隧道机器" clearable>
            <el-option v-for="item in sshTunnelMachineList" :key="item.id" :label="`${item.ip}:${item.port} [${item.name}]`"
                :value="item.id">
            </el-option>
        </el-select>
    </div>
</template>

<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { machineApi } from '../machine/api';

const props = defineProps({
    modelValue: {
        type: Number,
    },
})

//定义事件
const emit = defineEmits(['update:modelValue'])

const state = reactive({
    // 单选则为id，多选为id数组
    sshTunnelMachineId: null as any,
    sshTunnelMachineList: [] as any,
});

const {
    sshTunnelMachineId,
    sshTunnelMachineList,
} = toRefs(state)

onMounted(async () => {
    if (!props.modelValue || props.modelValue <= 0) {
        state.sshTunnelMachineId = null;
    } else {
        state.sshTunnelMachineId = props.modelValue;
    }
    await getSshTunnelMachines();
});

const getSshTunnelMachines = async () => {
    if (state.sshTunnelMachineList.length == 0) {
        const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
        state.sshTunnelMachineList = res.list;
    }
};

const clear = () => {
    state.sshTunnelMachineId = null;
    change();
}

const change = () => {
    emit('update:modelValue', state.sshTunnelMachineId);
};
</script>
<style lang="scss"></style>