You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
1 month ago
|
<template>
|
||
|
|
<el-dialog v-model="dialogVisible" @close="handleClose" title="选择图件" style="width: 800px;height: 580px;"
|
||
|
|
:close-on-click-modal="false">
|
||
|
|
<el-tabs type="border-card" tab-position="top" v-model="activeTab">
|
||
|
|
<el-tab-pane label="地质图件" name="geologyImg">
|
||
|
|
<GeologyImg @selected-rows="selectedGeologyImgData" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="地质参数图件" name="geologyParamImg">
|
||
|
|
<GeologyParamImg @selected-rows="selectedGeologyParamImgData" />
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="oper-bottom">
|
||
|
|
<el-button type="warning" :icon="Close" @click="handleClose">取消</el-button>
|
||
|
|
|
||
|
|
<el-button type="primary" :icon="Check" @click="handleConfirm">确定</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { Check, Close } from "@element-plus/icons-vue";
|
||
|
|
const { $toastMessage } = useNuxtApp();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
isVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits(['updateSelected', 'update:changeShowDialog']);
|
||
|
|
|
||
|
|
const activeTab = ref("geologyImg");
|
||
|
|
let selectedData = [];
|
||
|
|
const selectedGeologyImg = ref(null);
|
||
|
|
const selectedGeologyParamImg = ref(null);
|
||
|
|
|
||
|
|
// 控制弹出框显示
|
||
|
|
const dialogVisible = ref(props.isVisible);
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
dialogVisible.value = false;
|
||
|
|
emit('update:changeShowDialog', false);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 确定选择事件
|
||
|
|
const handleConfirm = () => {
|
||
|
|
if (selectedGeologyImg.value?.length > 0 || selectedGeologyParamImg.value?.length > 0) {
|
||
|
|
if (selectedGeologyImg.value) {
|
||
|
|
selectedGeologyImg.value.forEach(item => {
|
||
|
|
selectedData.push(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (selectedGeologyParamImg.value) {
|
||
|
|
selectedGeologyParamImg.value.forEach(item => {
|
||
|
|
selectedData.push(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
emit('updateSelected', selectedData);
|
||
|
|
handleClose();
|
||
|
|
} else {
|
||
|
|
$toastMessage.warning("请选择图件!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const selectedGeologyImgData = (data) => {
|
||
|
|
selectedGeologyImg.value = data;
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectedGeologyParamImgData = (data) => {
|
||
|
|
selectedGeologyParamImg.value = data;
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.oper-bottom {
|
||
|
|
padding: 5px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
vertical-align: middle;
|
||
|
|
height: 40px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|