kev/Drawer/drawer-htmlroot/components/DrawParamDialog.vue

<template>
    <el-dialog v-model="visible" title="设置勾绘参数" @close="handleClose" width="800px">
     <el-tabs v-model="activeLeftName" position="top">
        <el-tab-pane label="参数显示" name="params">            
            <el-table ref="drawParamRef" :data="drawParams"
                @selection-change="handleSelectionChange" class="param-table" row-key="PillarName">
                <el-table-column type="selection" width="40" fixed></el-table-column>
                <el-table-column prop="PillarName" label="名称" width="150" fixed></el-table-column>
                <el-table-column prop="GridCount" width="60" label="数目">
                    <template #default="scope">
                        <el-input v-model="scope.row.GridCount" size="small"
                            @input="handleInputChange(scope.row, 'GridCount')" />
                    </template>
                </el-table-column>
                <!-- 加密列（可编辑） -->
                <el-table-column prop="Times" width="60" label="加密">
                    <template #default="scope">
                        <el-input v-model="scope.row.Times" size="small"
                            @input="handleInputChange(scope.row, 'Times')" />
                    </template>
                </el-table-column>
                <!-- 平滑列（可编辑） -->
                <el-table-column prop="Smooth" width="60" label="平滑">
                    <template #default="scope">
                        <el-input v-model="scope.row.Smooth" size="small"
                            @input="handleInputChange(scope.row, 'Smooth')" />
                    </template>
                </el-table-column>
                <!-- 算法列（枚举下拉选择框） -->
                <el-table-column prop="Algor" label="算法" width="150">
                    <template #default="scope">
                        <el-select v-model="scope.row.Algor" size="small" placeholder="请选择算法"
                            @change="handleAlgorChange(scope.row)">
                            <el-option v-for="option in algorOptions" :key="option.value"
                                :label="option.label" :value="option.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <!-- 等值线间隔列（可编辑） -->
                <el-table-column prop="LableSpace" label="等值线间隔" width="100">
                    <template #default="scope">
                        <el-input v-model="scope.row.LableSpace" size="small"
                            @input="handleInputChange(scope.row, 'LableSpace')" />
                    </template>
                </el-table-column>
                <!-- 步长列（可编辑） -->
                <el-table-column prop="CurveSpace" label="步长">
                    <template #default="scope">
                        <el-input v-model="scope.row.CurveSpace" size="small"
                            @input="handleInputChange(scope.row, 'CurveSpace')" />
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="井显示" name="wells">
            <el-table ref="drawWellRef" :data="wellData" @selection-change="handleWellSelectionChange" class="param-table" row-key="JH">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="JH" label="井号"></el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs> 
    <div class="oper">
        <el-button type="primary" :icon="Select" @click="handleConfirm">确定</el-button>
    </div>
</el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Select } from "@element-plus/icons-vue";
import { emitter } from "~/utils/eventBus";
const { $toastMessage } = useNuxtApp();
import { fetchFlatGridParamData, fetchFlatGridWellData, generateFlatResults} from '~/services/drawParamService'

// 绘制参数
const drawParams = ref(null);
const drawParamRef = ref(null);
const wellData = ref(null);
const drawWellRef = ref(null);

// const selectedWells = computed(()=>{selectedWellRows.value.map(row => row.JH)});

const props = defineProps({
    showSetParam: {
        type: Boolean,
        default: false,
        required: true
    }
});

const visible = ref(props.showSetParam);

const algorOptions = [
    { label: '最小张力', value: '最小张力' },
    { label: '反距离加权', value: '反距离加权' },
    { label: '自然临近', value: '自然临近' },
    { label: '最小曲率', value: '最小曲率' },
    { label: '快速网格化', value: '快速网格化' }
];

const activeLeftName = ref("params");
const selectedParamsRows = ref([]);
const selectedWellRows = ref([]);

const emit = defineEmits(['update:changeShowSetParam']);

watchEffect(() => {
    if (props.showSetParam) {
        if (drawParamRef.value) {
            drawParamRef.value.toggleAllSelection();
        }

        if (drawWellRef.value) {
            const checkWells = wellData.value.filter(item => item.Check == true);
            checkWells.forEach(item => {
                if (item.Check) {
                    drawWellRef.value.toggleRowSelection(item, true);
                }
            });
        }
    }
});

const handleClose = () => {
    visible.value = false;
    // visible.value = false;
    emit("update:changeShowSetParam", false);
};

// 获取选中项
const handleSelectionChange = (selection) => {
        selectedParamsRows.value = selection;
};

const handleWellSelectionChange = (selection) => {
    selectedWellRows.value = selection;
    console.log("WellData选中的数据：", selection);
};

// 获取参数
const getParams = async () => {
    const response = await fetchFlatGridParamData();
    console.log("获取参数结果：", response);
    if (!response) {
        $toastMessage.error("获取参数失败！");
        return;
    }
    drawParams.value = response;  
};

// 获取井数据
const getWellDatas = async () => {
    const response = await fetchFlatGridWellData();
    console.log("获取井结果：", response);
    if (!response) {
        $toastMessage.error("获取井数据失败！");
        return;
    }
    wellData.value = response;
   
};

// 确定按钮事件
const handleConfirm = async() => {
    if (!selectedParamsRows.value) {
        $toastMessage.warning('请选择绘制参数！');
        return;
    }

    if (!selectedWellRows.value) {
        $toastMessage.warning('请选择井数据！');
        return;
    }

    const selectedWells = selectedWellRows.value.map(item => item.JH);
    console.log("选中的井数据：", selectedWells, selectedWellRows.value);

    const generateRequest = {
        JHs: selectedWells,
        FlatGridParameter: selectedParamsRows.value
    };

    const response = await generateFlatResults(generateRequest);
    if (response) {
        console.log("执行结果：", response);
        emitter.emit('confirmDraw', selectedParamsRows.value);
        handleClose();
    }
    else {
        $toastMessage.error("勾绘失败，请稍后重试！");
        return;
    }
    
};

onMounted(() => {
    nextTick();
    getParams();
    getWellDatas();
});
</script>
<style scoped>

.tabs{
    margin: 0;
    padding:0;
     border: solid 1px #ccc;
}

.param-table {
    width: 100%;
    overflow: auto;
    height: 500px;
    border: solid 1px #ccc;
    margin: 0;
    padding: 0;
}

.oper{
    display: flex;
    justify-content: right;
    flex-flow: inline-end;
    margin-top: 15px;
}
</style>