his/backup/vxetable-migration-20260602/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
        v-if="itemList.length > 0"
        class="detail-content"
      >
        <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>