lc_garage/frontend/src/view/parking/parkingInfo/lotDetail.vue

<template>
  <div v-loading="loading">
    <el-descriptions
      v-if="detail.ID"
      :column="3"
      border
    >
      <el-descriptions-item label="ID">{{ detail.ID }}</el-descriptions-item>
      <el-descriptions-item label="区域编码">{{ detail.lot_code }}</el-descriptions-item>
      <el-descriptions-item label="区域名称">{{ detail.lot_name }}</el-descriptions-item>
      <el-descriptions-item label="总车位">{{ detail.capacity }}</el-descriptions-item>
      <el-descriptions-item label="已占用">
        <span class="space-value occupied">{{ detail.occupied || 0 }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="剩余车位">
        <span class="space-value" :class="{ full: detail.available === 0 }">{{ detail.available || 0 }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="满位准入" :span="3">
        <div class="policy-tags">
          <el-tag :type="detail.allow_temporary_when_full ? 'success' : 'info'" effect="plain">
            临时车{{ detail.allow_temporary_when_full ? '允许' : '禁止' }}
          </el-tag>
          <el-tag :type="detail.allow_monthly_when_full ? 'success' : 'info'" effect="plain">
            月租车{{ detail.allow_monthly_when_full ? '允许' : '禁止' }}
          </el-tag>
          <el-tag :type="detail.allow_vip_when_full ? 'success' : 'info'" effect="plain">
            VIP 车{{ detail.allow_vip_when_full ? '允许' : '禁止' }}
          </el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="3">{{ detail.description || '-' }}</el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="3">{{ detail.CreatedAt || '-' }}</el-descriptions-item>
      <el-descriptions-item label="更新时间" :span="3">{{ detail.UpdatedAt || '-' }}</el-descriptions-item>
    </el-descriptions>

    <div v-if="!detail.ID && !loading" style="text-align: center; color: #999; margin-top: 40px;">
      请从左侧选择一个停车场
    </div>

    <div v-if="detail.ID" class="action-bar">
      <el-button type="primary" icon="Edit" @click="handleEdit">编辑</el-button>
      <el-button type="danger" icon="Delete" @click="handleDelete">删除</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { obtainPullOverId } from '@/api/pullOver'

const props = defineProps({
  parkId: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['edit', 'delete'])

const loading = ref(false)
const detail = ref({})

const fetchDetail = async (id) => {
  if (!id || id === 0) {
    detail.value = {}
    return
  }
  loading.value = true
  try {
    const res = await obtainPullOverId(id)
    if (res.code === 0) {
      detail.value = res.data || {}
    }
  } finally {
    loading.value = false
  }
}

const handleEdit = () => {
  emit('edit', detail.value)
}

const handleDelete = () => {
  emit('delete', detail.value.ID)
}

watch(
  () => props.parkId,
  (val) => {
    fetchDetail(val)
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.action-bar {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.space-value {
  color: #16805b;
  font-weight: 600;
}

.space-value.occupied {
  color: #b26a00;
}

.space-value.full {
  color: #c03639;
}

.policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>