WholeProcessPlatform/frontend-sjgl/src/components/ConfirmModal/index.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>