90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" title="选择导出字段" width="520px" :close-on-click-modal="false" @closed="handleClosed">
|
|
<div class="export-dialog">
|
|
<el-alert title="请选择需要导出的字段" type="info" :closable="false" show-icon />
|
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
|
|
<el-checkbox-group v-model="selectedFields" class="field-group">
|
|
<el-checkbox v-for="item in exportableColumns" :key="item.prop" :value="item.prop">
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确认</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
const emit = defineEmits(['confirm']);
|
|
|
|
const dialogVisible = ref(false);
|
|
const selectedFields = ref([]);
|
|
const exportableColumns = ref([]);
|
|
const checkAll = ref(false);
|
|
const isIndeterminate = ref(false);
|
|
|
|
const allFieldProps = computed(() => exportableColumns.value.map((item) => item.prop));
|
|
|
|
watch(
|
|
selectedFields,
|
|
(value) => {
|
|
const checkedCount = value.length;
|
|
checkAll.value = checkedCount > 0 && checkedCount === allFieldProps.value.length;
|
|
isIndeterminate.value = checkedCount > 0 && checkedCount < allFieldProps.value.length;
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const openDialog = (columns = []) => {
|
|
exportableColumns.value = columns.filter((item) => item?.prop && item?.label);
|
|
selectedFields.value = allFieldProps.value.slice();
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
const handleCheckAllChange = (value) => {
|
|
selectedFields.value = value ? allFieldProps.value.slice() : [];
|
|
isIndeterminate.value = false;
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (!selectedFields.value.length) {
|
|
ElMessage.warning('至少选择一个导出字段');
|
|
return;
|
|
}
|
|
emit('confirm', selectedFields.value.slice());
|
|
dialogVisible.value = false;
|
|
};
|
|
|
|
const handleClosed = () => {
|
|
checkAll.value = false;
|
|
isIndeterminate.value = false;
|
|
exportableColumns.value = [];
|
|
selectedFields.value = [];
|
|
};
|
|
|
|
defineExpose({
|
|
openDialog,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.export-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.field-group {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px 16px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
padding: 4px 0;
|
|
}
|
|
</style> |