@ebiz/designer-components 0.1.21 → 0.1.22

package/src/components/EbizDetailView.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="ebiz-detail-view" v-loading="loading">
+    <!-- 空状态 -->
+    <div v-if="!data || Object.keys(data).length === 0" class="empty-state">
+      <t-icon name="info-circle" size="48px" />
+      <p>暂无数据</p>
+    </div>
+    
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-state">
+      <t-icon name="close-circle" size="48px" />
+      <p>{{ error }}</p>
+      <t-button theme="primary" @click="handleRetry">重试</t-button>
+    </div>
+    
+    <!-- 正常内容 -->
+    <div v-else class="detail-content">
+      <div v-for="group in groupedItems" :key="group.groupName" class="detail-group">
+        <!-- 组标题 -->
+        <div v-if="group.groupName" class="group-title">
+          <div class="group-title-bar"></div>
+          <span class="group-title-text">{{ group.groupName }}</span>
+        </div>
+        
+        <!-- 字段列表 -->
+        <div 
+          class="detail-fields" 
+          :class="{ 'vertical-layout': layout === 'vertical' }"
+          :style="{ 
+            'grid-template-columns': `repeat(${columns}, 1fr)`,
+            gap: `${gap}px`
+          }"
+        >
+          <EbizDetailItem
+            v-for="item in group.items"
+            :key="item.key"
+            :label="item.label"
+            :type="item.type"
+            :value="getFieldValue(item.key)"
+            :required="item.required"
+            :description="item.description"
+            :layout="layout"
+            :labelWidth="labelWidth"
+            :labelColor="labelColor"
+            :gap="0"
+            :fileMode="item.fileMode"
+            :showDownload="item.showDownload"
+            @download-file="handleDownloadFile"
+            @user-click="handleUserClick"
+            @link-click="handleLinkClick"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits, ref, watch, onMounted } from 'vue'
+import EbizDetailItem from './EbizDetailItem.vue'
+
+const props = defineProps({
+  // API配置
+  apiUrl: {
+    type: String,
+    default: ''
+  },
+  apiMethod: {
+    type: String,
+    default: 'GET',
+    validator: (value) => ['GET', 'POST'].includes(value)
+  },
+  apiParams: {
+    type: Object,
+    default: () => ({})
+  },
+  apiHeaders: {
+    type: Object,
+    default: () => ({})
+  },
+  
+  // 数据源（优先级高于API）
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  
+  // 布局配置
+  columns: {
+    type: Number,
+    default: 2,
+    validator: (value) => value >= 1 && value <= 6
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
+  },
+  gap: {
+    type: Number,
+    default: 16
+  },
+  labelWidth: {
+    type: Number,
+    default: 120
+  },
+  labelColor: {
+    type: String,
+    default: '#666666'
+  },
+  
+  // 自动加载
+  autoLoad: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emits = defineEmits(['download-file', 'user-click', 'link-click', 'data-loaded', 'error'])
+
+// 响应式数据
+const loading = ref(false)
+const error = ref('')
+const apiData = ref({})
+
+// 计算最终数据源
+const finalData = computed(() => {
+  return Object.keys(props.data).length > 0 ? props.data : apiData.value
+})
+
+// 获取详情项配置（从插槽中获取）
+const detailItems = ref([])
+
+// 按组分组详情项
+const groupedItems = computed(() => {
+  const groups = {}
+  
+  detailItems.value.forEach(item => {
+    const groupName = item.group || '基本信息'
+    if (!groups[groupName]) {
+      groups[groupName] = {
+        groupName,
+        items: []
+      }
+    }
+    groups[groupName].items.push(item)
+  })
+  
+  return Object.values(groups)
+})
+
+// 获取字段值
+const getFieldValue = (key) => {
+  const value = finalData.value[key]
+  return value !== undefined ? value : ''
+}
+
+// 加载数据
+const loadData = async () => {
+  if (!props.apiUrl) return
+  
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const options = {
+      method: props.apiMethod,
+      headers: {
+        'Content-Type': 'application/json',
+        ...props.apiHeaders
+      }
+    }
+    
+    if (props.apiMethod === 'POST') {
+      options.body = JSON.stringify(props.apiParams)
+    } else {
+      const params = new URLSearchParams(props.apiParams)
+      const url = props.apiUrl + (params.toString() ? '?' + params.toString() : '')
+      options.url = url
+    }
+    
+    const response = await fetch(props.apiUrl, options)
+    
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+    
+    const result = await response.json()
+    apiData.value = result.data || result
+    emits('data-loaded', apiData.value)
+  } catch (err) {
+    error.value = err.message || '数据加载失败'
+    emits('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重试加载
+const handleRetry = () => {
+  loadData()
+}
+
+// 事件处理
+const handleDownloadFile = (file) => {
+  emits('download-file', file)
+}
+
+const handleUserClick = (user) => {
+  emits('user-click', user)
+}
+
+const handleLinkClick = (link) => {
+  emits('link-click', link)
+}
+
+// 注册详情项
+const registerItem = (item) => {
+  detailItems.value.push(item)
+}
+
+// 注销详情项
+const unregisterItem = (key) => {
+  const index = detailItems.value.findIndex(item => item.key === key)
+  if (index > -1) {
+    detailItems.value.splice(index, 1)
+  }
+}
+
+// 监听API参数变化
+watch(
+  () => [props.apiUrl, props.apiParams, props.apiHeaders],
+  () => {
+    if (props.autoLoad && props.apiUrl) {
+      loadData()
+    }
+  },
+  { deep: true }
+)
+
+// 组件挂载时自动加载
+onMounted(() => {
+  if (props.autoLoad && props.apiUrl) {
+    loadData()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  loadData,
+  registerItem,
+  unregisterItem
+})
+</script>
+
+<style scoped>
+.ebiz-detail-view {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 6px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.empty-state,
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999999;
+}
+
+.empty-state p,
+.error-state p {
+  margin: 16px 0;
+  font-size: 16px;
+}
+
+.detail-content {
+  width: 100%;
+}
+
+.detail-group {
+  margin-bottom: 32px;
+}
+
+.detail-group:last-child {
+  margin-bottom: 0;
+}
+
+.group-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.group-title-bar {
+  width: 4px;
+  height: 18px;
+  background: #0052d9;
+  margin-right: 12px;
+  border-radius: 2px;
+}
+
+.group-title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+}
+
+.detail-fields {
+  display: grid;
+  gap: 16px;
+}
+
+.detail-fields.vertical-layout {
+  grid-template-columns: 1fr;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .ebiz-detail-view {
+    padding: 16px;
+  }
+  
+  .detail-fields {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .group-title-text {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .ebiz-detail-view {
+    padding: 12px;
+  }
+  
+  .detail-group {
+    margin-bottom: 24px;
+  }
+}
+</style> 

package/src/components/EbizSApprovalProcess.vue

@@ -361,7 +361,7 @@ const getOperationTypeText = (approver) => {
 const getProcessStatusTheme = (status) => {
     const statusMap = {
         'CANCELED': 'default',
-        'REJECT': 'danger',
+        'REJECTED': 'danger',
         'APPROVED': "success",
         'ACTIVE': 'primary',
         'COMPLETED': 'success',
@@ -374,7 +374,7 @@ const getProcessStatusTheme = (status) => {
 const getProcessStatusText = (status) => {
     const statusMap = {
         'CANCELED': '已取消',
-        'REJECT': '已拒绝',
+        'REJECTED': '已拒绝',
         'APPROVED': "已通过",
         'ACTIVE': '进行中',
         'COMPLETED': '已完成',
@@ -383,38 +383,6 @@ const getProcessStatusText = (status) => {
     return statusMap[status] || status
 }
 
-// 获取当前步骤索引
-const getCurrentStepIndex = () => {
-    // 已完成节点数量
-    const completedNodes = state.nodes.filter(node => node.nodeStatus === 'COMPLETED').length
-    return completedNodes
-}
-
-// 获取节点步骤状态
-const getNodeStepStatus = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'finish'
-        case 'ACTIVE':
-            return 'process'
-        default:
-            return 'wait'
-    }
-}
-
-// 获取节点步骤样式类
-const getNodeStepClass = (node) => {
-    switch (node.nodeStatus) {
-        case 'ACTIVE':
-            return 'current-step'
-        case 'PENDING':
-        case 'WAITING':
-            return 'future-step'
-        default:
-            return ''
-    }
-}
-
 // 获取节点状态主题
 const getNodeStatusTheme = (node) => {
     switch (node.nodeStatus) {
@@ -478,26 +446,6 @@ const isProcessCompleted = () => {
     return state.processInfo && state.processInfo.processStatus === 'COMPLETED'
 }
 
-// 获取抄送步骤状态
-const getCcStepStatus = () => {
-    return isProcessCompleted() ? 'finish' : 'wait'
-}
-
-// 获取抄送步骤样式类
-const getCcStepClass = () => {
-    return isProcessCompleted() ? '' : 'future-step'
-}
-
-// 获取抄送状态样式类
-const getCcStatusClass = () => {
-    return isProcessCompleted() ? 'cc-status' : 'cc-pending'
-}
-
-// 获取抄送状态文本
-const getCcStatusText = () => {
-    return isProcessCompleted() ? '已抄送' : '待抄送'
-}
-
 // 获取简单步骤图标类
 const getSimpleStepIconClass = (node) => {
     switch (node.nodeStatus) {

package/src/index.js

@@ -96,6 +96,8 @@ import EbizMobileMeetingRoomSelector from './components/EbizMobileMeetingRoomSel
 import EbizDropdown from './components/EbizDropdown.vue'
 import EbizDropdownItem from './components/EbizDropdownItem.vue'
 import EbizFileList from './components/EbizFileList.vue'
+import EbizDetailView from './components/EbizDetailView.vue'
+import EbizDetailItem from './components/EbizDetailItem.vue'
 
 // 导出组件
 export {
@@ -231,5 +233,8 @@ export {
   // 新增 EbizMobileMeetingRoomSelector 组件
   EbizMobileMeetingRoomSelector,
   // 新增 EbizSApprovalProcess 组件
-  EbizSApprovalProcess
+  EbizSApprovalProcess,
+  // 详情页组件
+  EbizDetailView,
+  EbizDetailItem
 }

package/src/router/index.js

@@ -382,6 +382,12 @@ const routes = [
     name: 'FileListDemo',
     component: () => import('../views/EbizFileListDemo.vue'),
     meta: { title: 'Ebiz文件列表组件示例' }
+  },
+  {
+    path: '/detail-view-demo',
+    name: 'DetailViewDemo',
+    component: () => import('../views/EbizDetailViewDemo.vue'),
+    meta: { title: 'Ebiz详情页组件示例' }
   }
 ]