wkx-his-web/src/views/patients/nutritionEducation/detailDialog.vue

<template>
  <el-dialog v-model="visible" title="营养诊断详情" width="880px" :close-on-click-modal="false" :destroy-on-close="true" top="20px">
    <el-form label-width="120px" class="detail-form">
      <el-form-item label="营养宣教标题：">
        <el-input :model-value="detail.educationTitle" readonly />
      </el-form-item>
      <el-form-item label="内容描述：">
        <el-input :model-value="detail.description" type="textarea" :rows="3" readonly />
      </el-form-item>
      <el-form-item label="正文：">
        <el-input :model-value="detail.content" type="textarea" :rows="6" readonly />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, defineExpose } from 'vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: Boolean,
  detail: {
    type: Object,
    default: () => ({})
  }
});
const visible = ref(props.modelValue);
watch(
  () => props.modelValue,
  (v) => {
    visible.value = v;
  }
);
watch(visible, (v) => {
  if (!v) emit('update:modelValue', false);
});
defineExpose({ visible });
</script>
<script lang="ts">
export default {};
</script>

<style scoped>
.detail-form {
  padding: 10px 20px 0 20px;
}
.el-form-item {
  margin-bottom: 24px;
}
.el-input[readonly] .el-input__inner {
  background: #f5f7fa;
  color: #333;
}
</style>