pet-system-merchant-web/src/views/order/management/components/RemarkDialog.vue

<template>
  <el-dialog :model-value="visible" @update:model-value="updateVisible" title="订单备注" width="500px">
    <div style="margin-bottom:10px; font-size:13px; color:#909399;">
      <span v-if="data">订单号：{{ data.orderNo }}</span>
    </div>
    <el-input
      v-model="remarkForm"
      type="textarea"
      :rows="5"
      placeholder="请输入订单备注信息..."
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存备注</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: Boolean,
  data: Object
})

const emit = defineEmits(['update:visible', 'success'])

const remarkForm = ref('')

watch(() => props.visible, (val) => {
  if (val && props.data) {
    remarkForm.value = props.data.remark || ''
  }
})

const updateVisible = (val) => {
  emit('update:visible', val)
}

const handleSubmit = () => {
  if (props.data) {
    props.data.remark = remarkForm.value
    ElMessage.success('备注已更新')
    updateVisible(false)
    emit('success', remarkForm.value)
  }
}
</script>