his/openhis-ui-vue3/src/views/medicationmanagement/priceAdjustmentFormApproval/components/detailDialog.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'价格调整详情'"
    width="90%"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <div class="detail-container">
      <div class="detail-content" v-if="itemList.length > 0">
        <el-table :data="itemList" style="width: 100%" size="small" border>
          <!-- 挂号调价单特殊显示 -->
          <template v-if="categoryType.includes('挂号调价')">
            <el-table-column label="科室" align="center" prop="orgName" min-width="150" />
            <el-table-column label="号源" align="center" prop="name" min-width="200" />
            <el-table-column
              label="当前进货价"
              align="center"
              prop="originBuyingPrice"
              min-width="100"
            />
            <el-table-column
              label="调后进货价"
              align="center"
              prop="newBuyingPrice"
              min-width="100"
            />
            <el-table-column
              label="当前零售价"
              align="center"
              prop="originRetailPrice"
              min-width="100"
            />
            <el-table-column
              label="调后零售价"
              align="center"
              prop="newRetailPrice"
              min-width="100"
            />
            <el-table-column label="原因" align="center" prop="reason" min-width="200" />
          </template>
          <!-- 其他调价类型标准显示 -->
          <template v-else>
            <el-table-column label="项目编码" align="center" prop="targetId" min-width="180" />
            <el-table-column label="项目名称" align="center" prop="chargeName" min-width="200" />
            <el-table-column label="规格" align="center" prop="volume" min-width="120" />
            <el-table-column
              label="当前进货价"
              align="center"
              prop="originBuyingPrice"
              min-width="100"
            />
            <el-table-column
              label="调后进货价"
              align="center"
              prop="newBuyingPrice"
              min-width="100"
            />
            <el-table-column
              label="当前零售价"
              align="center"
              prop="originRetailPrice"
              min-width="100"
            />
            <el-table-column
              label="调后零售价"
              align="center"
              prop="newRetailPrice"
              min-width="100"
            />
            <el-table-column label="调价原因" align="center" prop="reason" min-width="200" />
          </template>
        </el-table>
        <div class="creator-info">
          <span class="creator-label">制单人：{{ detailData?.createName || '-' }}</span>
        </div>
      </div>
      <div v-else class="empty-tip">暂无调价项目数据</div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <!-- 当状态为驳回或同意时，不显示审核和驳回按钮 -->
        <template
          v-if="
            !detailData.statusEnum_enumText ||
            !['驳回', '同意'].includes(detailData.statusEnum_enumText)
          "
        >
          <el-button type="primary" :plain="true" @click="handleApprove">审核</el-button>
          <el-button type="danger" :plain="true" @click="handleReject">驳回</el-button>
        </template>
        <el-button :plain="true" @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

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

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
  categoryType: {
    type: String,
    default: '',
  },
});

// 定义事件
const emit = defineEmits(['update:visible', 'close']);

// 响应式数据
const dialogVisible = ref(false);

// 计算属性：获取需要显示的数据列表
const itemList = computed(() => {
  console.log('detailData:', props.detailData);

  if (!props.detailData) return [];
  // 优先使用items字段（从index.vue传递的结构）
  if (Array.isArray(props.detailData.items)) {
    return props.detailData.items;
  }

  // 如果detailData本身是数组
  if (Array.isArray(props.detailData)) {
    return props.detailData;
  }

  return [];
});

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);

// 监听dialogVisible变化
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal);
});

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
  emit('close');
};

// 处理审核通过
const handleApprove = () => {
  emit('approve', props.detailData);
};

// 处理驳回
const handleReject = () => {
  // 直接触发事件，由父组件处理API调用和状态管理
  emit('reject', props.detailData);
};
</script>

<style scoped>
.detail-container {
  padding: 10px 0;
}

.creator-info {
  text-align: left;
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}

.creator-label {
  font-size: 14px;
  color: #606266;
}

.empty-tip {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>