76 lines
1.7 KiB
Vue
76 lines
1.7 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="500"
|
||
|
|
show-count
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } 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');
|
||
|
|
};
|
||
|
|
</script>
|