his/backup/vxetable-migration-20260602/medicationmanagement/priceAdjustmentApprovalManagement/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
        >
          <!-- 挂号调价单特殊显示 -->
          <el-table-column
            v-if="categoryType.includes('挂号调价')"
            label="科室"
            align="center"
            prop="orgName"
          />
          <el-table-column
            v-if="categoryType.includes('挂号调价')"
            label="号源"
            align="center"
            prop="name"
          />
          <el-table-column
            v-else
            label="项目名称"
            align="center"
            prop="itemName"
          />
          <el-table-column
            label="当前进货价"
            align="center"
            prop="originBuyingPrice"
          >
            <template #default="scope">
              <el-tag
                type="danger"
                size="small"
              >
                {{ scope.row.originBuyingPrice ? scope.row.originBuyingPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="调后进货价"
            align="center"
            prop="newBuyingPrice"
          >
            <template #default="scope">
              <el-tag
                type="success"
                size="small"
              >
                {{ scope.row.newBuyingPrice ? scope.row.newBuyingPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="当前零售价"
            align="center"
            prop="originRetailPrice"
          >
            <template #default="scope">
              <el-tag
                type="danger"
                size="small"
              >
                {{ scope.row.originRetailPrice ? scope.row.originRetailPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="调后零售价"
            align="center"
            prop="newRetailPrice"
          >
            <template #default="scope">
              <el-tag
                type="success"
                size="small"
              >
                {{ scope.row.newRetailPrice ? scope.row.newRetailPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="进货价盈负差"
            align="center"
            prop="differenceBuyingPrice"
          >
            <template #default="scope">
              {{ scope.row.differenceBuyingPrice ? scope.row.differenceBuyingPrice + ' 元' : '-' }}
            </template>
          </el-table-column>
          <el-table-column
            label="影响库存数量"
            align="center"
            prop="itemQuantity"
          >
            <template #default="scope">
              {{ scope.row.itemQuantity ? scope.row.itemQuantity + (scope.row.label || '') : '-' }}
            </template>
          </el-table-column>
          <el-table-column
            label="调后零售价盈负差"
            align="center"
            prop="differenceRetailPrice"
          >
            <template #default="scope">
              {{ scope.row.differenceRetailPrice ? scope.row.differenceRetailPrice + ' 元' : '-' }}
            </template>
          </el-table-column>
          <el-table-column
            label="调价原因"
            align="center"
            prop="reason"
          />
        </el-table>
        <div class="creator-info">
          <span class="creator-label">制单人：{{ props.createName || '-' }}</span>
        </div>
      </div>
      <div
        v-else
        class="empty-tip"
      >
        暂无调价项目数据
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

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

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: [Array, Object],
    default: () => [],
  },

  categoryType: {
    type: String,
    default: '',
  },
  createName: {
    type: String,
    default: '',
  },
});
// 定义事件
const emit = defineEmits(['update:visible', 'close']);

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

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

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

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

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
  emit('close');
};
</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>