84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<template>
|
|
<a-modal
|
|
v-model:open="visible"
|
|
:title="title"
|
|
width="800px"
|
|
:confirm-loading="confirmLoading"
|
|
@ok="handleConfirm"
|
|
@cancel="handleCancel"
|
|
>
|
|
<div style="max-height: 50vh; overflow-y: auto; margin-bottom: 16px">
|
|
<a-descriptions bordered :column="1" size="small">
|
|
<a-descriptions-item
|
|
v-for="item in diffList"
|
|
:key="item.field"
|
|
:label="item.label"
|
|
>
|
|
<span style="color: #ff4d4f; text-decoration: line-through">{{
|
|
item.oldValue
|
|
}}</span>
|
|
<span style="margin: 0 8px">→</span>
|
|
<span style="color: #52c41a">{{ item.newValue }}</span>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<a-form-item label="修改依据">
|
|
<a-textarea
|
|
v-model:value="sourceValue"
|
|
placeholder="请输入修改依据"
|
|
:rows="5"
|
|
:maxlength="160"
|
|
show-count
|
|
/>
|
|
</a-form-item>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
open: boolean;
|
|
confirmLoading?: boolean;
|
|
diffList?: { field: string; label: string; oldValue: string; newValue: string }[];
|
|
title?: string;
|
|
}>(),
|
|
{
|
|
confirmLoading: false,
|
|
diffList: () => [],
|
|
title: '确认修改'
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:open', val: boolean): void;
|
|
(e: 'confirm', sourceValue: string): void;
|
|
(e: 'cancel'): void;
|
|
}>();
|
|
|
|
const sourceValue = ref('');
|
|
|
|
const visible = computed({
|
|
get: () => props.open,
|
|
set: val => emit('update:open', val)
|
|
});
|
|
|
|
const handleConfirm = () => {
|
|
emit('confirm', sourceValue.value);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
sourceValue.value = '';
|
|
emit('cancel');
|
|
};
|
|
|
|
// 每次打开时清空上一次的修改依据，避免缓存残留
|
|
watch(
|
|
() => props.open,
|
|
val => {
|
|
if (val) sourceValue.value = '';
|
|
}
|
|
);
|
|
</script>
|