his/openhis-ui-vue3/src/views/inspection/observation/components/observationDialog.vue

<template>
  <div class="app-container">
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="visible" width="955px" append-to-body>
      <el-form
          :model="form"
          :rules="rules"
          ref="observationDialogRef"
          label-width="110px"
          label-position="left"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="观测类型" prop="observationTypeEnum">
              <el-tree-select
                  v-model="form.observationTypeEnum"
                  :data="observationTypeEnum"
                  :props="{ value: 'value', label: 'info', children: 'children' }"
                  :disabled="false"
                  value-key="value"
                  placeholder="请选择观测类型"
                  check-strictly
                  clearable
              />
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="观测名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入观测名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="观测代码" prop="code">
              <el-input v-model="form.code" placeholder="请输入观测代码" clearable></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="参考范围" prop="referenceRange">
              <el-input v-model="form.referenceRange" placeholder="请输入参考范围" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仪器信息" prop="instrumentId">
              <el-select
                  v-model="form.instrumentId"
                  placeholder="请选择"
                  clearable
              >
                <el-option
                    v-for="dict in instrumentIdOption"
                    :key="dict.value"
                    :label="dict.info"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态" prop="statusEnum">
             <el-select
               v-model="form.statusEnum"
               placeholder="请选择"
               clearable
             >
               <el-option
                 v-for="dict in statusFlagOptions"
                 :key="dict.value"
                 :label="dict.info"
                 :value="dict.value"
               ></el-option>
             </el-select>
              </el-form-item >
         </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="title != '查看'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ObservationDialog">
import {addObservation, editObservation} from './observation.js';

const { proxy } = getCurrentInstance();
const title = ref('');
const visible = ref(false);
const emits = defineEmits(['submit']); // 声明自定义事件
const observationTypeEnum = ref([]); // 仪器分类
const statusFlagOptions = ref([]); // 状态标记
const instrumentIdOption = ref([]);

const data = reactive({
  form: {},
  rules: {

  },
});

const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  item: {
    type: Object,
    required: false,
  },
  title: {
    type: String,
    required: false,
  },
  observationTypeEnum: {
    type: Object,
    required: false,
  },
  statusFlagOptions: {
    type: Object,
    required: false,
  },
  instrumentIdOption:{
    type: Object,
    required: false,
  },
});

// 显示弹框
function show() {
  reset();
  title.value = '';
  title.value = props.title;
  observationTypeEnum.value = props.observationTypeEnum;
  statusFlagOptions.value = props.statusFlagOptions;
  instrumentIdOption.value = props.instrumentIdOption;
  visible.value = true;

}

// 显示弹框
function edit() {
  reset();
  title.value = '';
  title.value = props.title;
  form.value = props.item;
  observationTypeEnum.value = props.observationTypeEnum;
  statusFlagOptions.value = props.statusFlagOptions;
  instrumentIdOption.value = props.instrumentIdOption;
  visible.value = true;
}
/** 重置操作表单 */
function reset() {
  form.value = {
    id: undefined,
    name : undefined,
    code : undefined,
    observationType: undefined,
    observationTypeEnum: undefined,
    referenceRange: undefined,
    instrumentId: undefined,
    statusEnum: 2, // 替换为 1

  };
  proxy.resetForm('observationDialogRef');
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['observationDialogRef'].validate((valid) => {
    if (valid) {
      console.log(form.value, 'form.value');
      if (form.value.id != undefined) {
        editObservation(form.value).then((response) => {
          // 触发自定义事件，并传递数据给父组件
          emits('submit');
          proxy.$modal.msgSuccess('修改成功');
          visible.value = false;
          reset(); // 重置表单数据
        });
      } else {
        addObservation(form.value).then((response) => {
          // 触发自定义事件，并传递数据给父组件
          emits('submit');
          proxy.$modal.msgSuccess('新增成功');
          visible.value = false;
          reset(); // 重置表单数据
        });
      }
    }
  });
}

function formatValue(str) {
  if (str === null || str === undefined || str === '' || str === 'null') {
    return undefined;
  }
  return str;
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

defineExpose({
  show,
  edit,
});
</script>
<style scoped>
.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 10px !important;
}

/* 使用深度选择器 */
.custom-label-spacing :deep(.el-form-item__label) {
  line-height: 1.2; /* 调整行间距 */
  margin-bottom: 4px; /* 调整 label 和输入框之间的间距 */
}
</style>