Industrial-image-management-system---web/src/views/system/post/PostDetailDrawer.vue

<template>
  <a-drawer
    v-model:visible="visible"
    title="岗位详情"
    width="620px"
    unmount-on-close
    class="post-detail-drawer"
    @close="() => visible = false"
  >
    <a-spin :loading="loading" class="detail-container">
      <div class="detail-card">
        <div class="detail-header">
          <div class="post-name">{{ primaryInfo?.name || '-' }}</div>
          <a-tag class="status-tag" :color="getStatusColor(primaryInfo?.status)">
            {{ getStatusText(primaryInfo?.status) }}
          </a-tag>
        </div>

        <div class="detail-group">
          <div class="group-title">基本信息</div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">岗位ID</div>
              <div class="info-value">{{ primaryInfo?.id || '-' }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">岗位排序</div>
              <div class="info-value">{{ primaryInfo?.sort || '-' }}</div>
            </div>
          </div>
        </div>

        <div v-if="primaryInfo?.remark" class="detail-group">
          <div class="group-title">岗位说明</div>
          <div class="remark-container">
            <div class="remark-content">{{ primaryInfo.remark }}</div>
          </div>
        </div>

        <div class="detail-group">
          <div class="group-title">时间信息</div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">创建时间</div>
              <div class="info-value">{{ primaryInfo?.createTime || '-' }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">更新时间</div>
              <div class="info-value">{{primaryInfo?.updateTime || '-' }}</div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>

    <template #footer>
      <div class="footer-actions">
        <a-button type="primary" @click="handleClose">关闭详情</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { getPostDetail } from '@/apis/system/post'
import { useLoading } from '@/hooks'
//import { formatDate } from '@/utils/date'

defineOptions({ name: 'PostDetailDrawer' })

const visible = ref(false)
const { loading, setLoading } = useLoading()
const primaryInfo = ref<any>(null)

// 获取详情
const getDetail = async (id: string) => {
  try {
    setLoading(true)
    primaryInfo.value = null

    const response = await getPostDetail(id)
    const data = response?.data || response

    if (data && typeof data === 'object') {
      primaryInfo.value = {
        id: data.postId ?? data.id,
        name: data.postName ?? data.name,
        sort: data.postSort,
        status: data.status,
        remark: data.remark,
        createTime: data.createTime,
        updateTime: data.updateTime,
      }
    }
  } catch (error: any) {
    console.error('获取岗位详情失败:', error)
  } finally {
    setLoading(false)
  }
}

// 获取状态文本
const getStatusText = (status: number | string) => {
  if (status === 1 || status === '1') return '正常'
  if (status === 0 || status === '0') return '停用'
  return '未知状态'
}

// 获取状态标签颜色
const getStatusColor = (status: number | string) => {
  if (status === 1 || status === '1') return 'rgb(82, 196, 26)'
  if (status === 0 || status === '0') return 'rgb(245, 34, 45)'
  return 'rgb(150, 150, 150)'
}

// 关闭抽屉
const handleClose = () => {
  visible.value = false
}

// 查看详情
const onDetail = async (id: string) => {
  if (!id) return
  visible.value = true
  await nextTick()
  await getDetail(id)
}

defineExpose({
  onDetail,
})
</script>

<style scoped>
.post-detail-drawer {
  --primary-color: #3498db;
  --light-bg: #f9fafc;
  --border-color: #eaeaea;
  --label-color: #666;
  --value-color: #333;
  --group-title-color: #555;
  --group-bg: #f5f7fa;
}

.detail-container {
  padding: 16px 24px;
}

.detail-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: all 0.3s ease;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.post-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--value-color);
  margin-right: 15px;
  letter-spacing: 0.5px;
}

.status-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  color: white !important;
}

.detail-group {
  margin-bottom: 25px;
  position: relative;
  background-color: var(--group-bg);
  border-radius: 8px;
  padding: 12px 16px;
}

.detail-group:last-child {
  margin-bottom: 0;
}

.group-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--group-title-color);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.group-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: var(--primary-color);
  margin-right: 8px;
  border-radius: 2px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.info-item {
  display: flex;
  flex-direction: column;
  background: white;
  padding: 12px 15px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.info-label {
  font-size: 14px;
  color: var(--label-color);
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.info-label::after {
  content: ':';
  margin-right: 4px;
}

.info-value {
  font-size: 16px;
  color: var(--value-color);
  font-weight: 500;
  word-break: break-word;
}

.remark-container {
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.remark-content {
  color: var(--value-color);
  line-height: 1.7;
  font-size: 15px;
}

.footer-actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
}
</style>