148 lines
3.1 KiB
Vue
148 lines
3.1 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
:title="title"
|
|
:width="width"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
@closed="handleClosed"
|
|
>
|
|
<div class="batch-operation-content">
|
|
<!-- 选中项提示 -->
|
|
<el-alert
|
|
v-if="selectedCount > 0"
|
|
:title="`已选择 ${selectedCount} 项`"
|
|
type="info"
|
|
:closable="false"
|
|
show-icon
|
|
/>
|
|
|
|
<!-- 操作表单 -->
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="formRules"
|
|
label-width="100px"
|
|
class="operation-form"
|
|
>
|
|
<slot name="form" :form-data="formData" />
|
|
</el-form>
|
|
|
|
<!-- 确认提示 -->
|
|
<el-alert
|
|
v-if="confirmMessage"
|
|
:title="confirmMessage"
|
|
type="warning"
|
|
:closable="false"
|
|
show-icon
|
|
class="confirm-alert"
|
|
/>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="handleConfirm"> 确定 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
title: string
|
|
width?: string | number
|
|
selectedCount?: number
|
|
confirmMessage?: string
|
|
formRules?: FormRules
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'confirm', formData: Record<string, any>): void | Promise<void>
|
|
(e: 'cancel'): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
width: '600px',
|
|
selectedCount: 0
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const formRef = ref<FormInstance>()
|
|
const formData = ref<Record<string, any>>({})
|
|
const loading = ref(false)
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => {
|
|
emit('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const handleConfirm = async () => {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
await formRef.value.validate()
|
|
|
|
loading.value = true
|
|
try {
|
|
await emit('confirm', formData.value)
|
|
visible.value = false
|
|
ElMessage.success('操作成功')
|
|
} catch (error) {
|
|
console.error('批量操作失败:', error)
|
|
ElMessage.error('操作失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
} catch {
|
|
ElMessage.warning('请检查表单填写')
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
visible.value = false
|
|
emit('cancel')
|
|
}
|
|
|
|
const handleClosed = () => {
|
|
formRef.value?.resetFields()
|
|
formData.value = {}
|
|
}
|
|
|
|
// 暴露方法供父组件调用
|
|
defineExpose({
|
|
formData
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.batch-operation-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
|
|
.operation-form {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.confirm-alert {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|