pet-system-merchant-web/template/views/orderList/components/RemarkDialog.vue

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

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
    visible: Boolean,
    order: Object
})
const emit = defineEmits(['update:visible', 'submit'])

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
})

const remarkForm = ref('')

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

const handleSubmit = () => {
    emit('submit', remarkForm.value)
    dialogVisible.value = false
}
</script>