wl-design-mobile 0.8.7 → 0.8.9

package/order/comps/order-node-header.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="node-header">
+    <div class="avatar-wrapper">
+      <div class="node-avatar" :class="{ 'avatar-no-image': !nodeInfo.handleUserAvatar }">
+        <img v-if="nodeInfo.handleUserAvatar" :src="nodeInfo.handleUserAvatar" alt="" />
+        <span v-else>{{ nodeInfo.handleUserName ? nodeInfo.handleUserName.charAt(0) : (nodeIndex + 1) }}</span>
+      </div>
+      <div class="status-badge" :class="'badge-' + getStatusClass(nodeInfo.status)">
+        <van-icon :name="getStatusIcon(nodeInfo.status)" :size="badgeIconSize"></van-icon>
+      </div>
+    </div>
+    <div class="node-info">
+      <div class="node-title-row">
+        <span class="task-name">{{ nodeInfo.taskName }}</span>
+        <slot name="extra"></slot>
+      </div>
+      <div class="node-user-row" v-if="nodeInfo.handleUserName">
+        <span class="user-name">{{ nodeInfo.handleUserName }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStatusIcon, getStatusClass } from './order-util.js'
+
+export default {
+  name: 'OrderNodeHeader',
+  props: {
+    nodeInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    nodeIndex: {
+      type: Number,
+      default: 0
+    },
+    avatarSize: {
+      type: Number,
+      default: 40
+    },
+    badgeIconSize: {
+      type: String,
+      default: '10'
+    }
+  },
+  methods: {
+    getStatusIcon,
+    getStatusClass
+  }
+}
+</script>
+
+<style scoped>
+.node-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.avatar-wrapper {
+  position: relative;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.node-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1989fa;
+  color: #fff;
+  font-size: 16px;
+  overflow: hidden;
+}
+
+.node-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-no-image {
+  background: #1989fa;
+}
+
+.status-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+}
+
+.badge-success { background: #07c160; color: #fff; }
+.badge-process { background: #1989fa; color: #fff; }
+.badge-warning { background: #ff976a; color: #fff; }
+.badge-wait { background: #dcdee0; color: #fff; }
+.badge-error { background: #ee0a24; color: #fff; }
+
+.node-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.node-title-row {
+  display: flex;
+  align-items: center;
+}
+
+.task-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #323233;
+}
+
+.node-user-row {
+  margin-top: 2px;
+}
+
+.user-name {
+  font-size: 13px;
+  color: #969799;
+}
+</style>

package/order/comps/order-util.js

@@ -0,0 +1,132 @@
+/**
+ * 工单组件公共工具方法（Vant 移动端版）
+ */
+
+/**
+ * 获取状态图标
+ * @param {string} status - 节点状态
+ * @returns {string} Vant 图标名称
+ */
+export function getStatusIcon(status) {
+  const iconMap = {
+    completed: 'passed',
+    processing: 'clock-o',
+    transferred: 'replay',
+    pending: 'circle'
+  }
+  return iconMap[status] || iconMap.pending
+}
+
+/**
+ * 获取状态样式类名
+ * @param {string} status - 节点状态
+ * @returns {string} 样式类名
+ */
+export function getStatusClass(status) {
+  const classMap = {
+    completed: 'success',
+    processing: 'process',
+    transferred: 'warning',
+    pending: 'wait'
+  }
+  return classMap[status] || classMap.pending
+}
+
+/**
+ * 获取状态文本
+ * @param {string} status - 节点状态
+ * @returns {string} 状态文本
+ */
+export function getStatusText(status) {
+  const textMap = {
+    completed: '已完成',
+    processing: '处理中',
+    transferred: '已转办',
+    pending: '待处理'
+  }
+  return textMap[status] || '待处理'
+}
+
+/**
+ * 获取处理结果样式类名
+ * @param {string} handleResult - 处理结果
+ * @returns {string} 样式类名
+ */
+export function getHandleResultClass(handleResult) {
+  const classMap = {
+    '10': 'pending',
+    '20': 'processing',
+    '30': 'completed'
+  }
+  return classMap[handleResult] || 'default'
+}
+
+/**
+ * 获取处理结果文本
+ * @param {string} handleResult - 处理结果
+ * @returns {string} 结果文本
+ */
+export function getHandleResultText(handleResult) {
+  const textMap = {
+    '10': '待处理',
+    '20': '处理中',
+    '30': '已处理'
+  }
+  return textMap[handleResult] || '处理'
+}
+
+/**
+ * 获取处理结果图标
+ * @param {string} handleResult - 处理结果
+ * @returns {string} Vant 图标名称
+ */
+export function getHandleIcon(handleResult) {
+  const iconMap = {
+    '10': 'clock-o',
+    '20': 'replay',
+    '30': 'passed'
+  }
+  return iconMap[handleResult] || 'circle'
+}
+
+/**
+ * 获取文件图标
+ * @param {string} fileName - 文件名
+ * @returns {string} 图标名称
+ */
+export function getFileIcon(fileName) {
+  if (!fileName) return 'description'
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  const iconMap = {
+    pdf: 'pdf',
+    doc: 'description',
+    docx: 'description',
+    xls: 'description',
+    xlsx: 'description',
+    ppt: 'description',
+    pptx: 'description',
+    jpg: 'photograph',
+    jpeg: 'photograph',
+    png: 'photograph',
+    gif: 'photograph',
+    zip: 'description',
+    rar: 'description'
+  }
+  return iconMap[ext] || 'description'
+}
+
+/**
+ * 格式化文件大小
+ * @param {number} size - 文件大小（字节）
+ * @returns {string} 格式化后的大小
+ */
+export function formatFileSize(size) {
+  if (!size) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  let index = 0
+  while (size >= 1024 && index < units.length - 1) {
+    size /= 1024
+    index++
+  }
+  return `${size.toFixed(1)} ${units[index]}`
+}

package/order/detail/order-detail.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="order-detail-container">
+    <!-- 工单头部信息 -->
+    <div class="order-header" v-if="showHeader">
+      <div class="order-header-left">
+        <div class="order-title">
+          <span class="order-name">{{ orderInfo.orderName || '工单处理详情' }}</span>
+        </div>
+        <div class="order-meta" v-if="orderInfo.createTime || orderInfo.createUser">
+          <div v-if="orderInfo.createUser" class="meta-item">
+            <span class="meta-label">发起人：</span>
+            <span class="meta-value">{{ orderInfo.createUser }}</span>
+          </div>
+          <div v-if="orderInfo.createTime" class="meta-item">
+            <span class="meta-label">发起时间：</span>
+            <span class="meta-value">{{ orderInfo.createTime }}</span>
+          </div>
+        </div>
+      </div>
+      <img :src="getOrderStatusImage()" class="order-status-image" />
+    </div>
+
+    <!-- 工单节点时间线 -->
+    <div class="order-timeline">
+      <template v-for="(item, index) in sortedOrderNodes">
+        <!-- 折叠占位 -->
+        <div v-if="!isNodesExpanded && shouldShowCollapseBtn() && index === 2" :key="'collapse-' + index"
+          class="collapse-placeholder">
+          <div class="timeline-col">
+            <div class="timeline-dot dot-more">
+              <van-icon name="more-o" size="14"></van-icon>
+            </div>
+            <div class="timeline-line"></div>
+          </div>
+          <div class="content-col">
+            <div class="expand-btn" @click="isNodesExpanded = true">
+              <van-icon name="down"></van-icon>
+              展开更多节点（{{ sortedOrderNodes.length - 4 }}个）
+            </div>
+          </div>
+        </div>
+
+        <!-- 节点显示 -->
+        <div v-if="isNodesExpanded || shouldShowNode(index)" :key="index" class="timeline-item">
+          <!-- 左侧时间线 -->
+          <div class="timeline-col">
+            <div class="timeline-dot" :class="'dot-' + getStatusClass(item.status)">
+              <van-icon :name="getStatusIcon(item.status)" size="14"></van-icon>
+            </div>
+            <div class="timeline-line" v-if="index !== sortedOrderNodes.length - 1"></div>
+          </div>
+
+          <!-- 右侧内容 -->
+          <div class="content-col">
+            <!-- 节点头部信息 -->
+            <OrderNodeHeader
+              :node-info="item"
+              :node-index="index"
+            />
+
+            <!-- 处理详情卡片 -->
+            <OrderNodeCard
+              v-if="item.handleResult || item.handleComment || item.handleTime || item.applyDescription"
+              :node-info="item"
+              :is-apply-node="index === 0"
+            >
+              <template slot="attachments">
+                <OrderAttachmentList
+                  v-if="item.attachments && item.attachments.length > 0"
+                  :attachments="item.attachments"
+                  @click="handleAttachmentClick"
+                />
+              </template>
+            </OrderNodeCard>
+
+            <!-- 待处理提示 -->
+            <div class="pending-tip" v-else-if="item.status === 'pending'">
+              <van-icon name="clock-o" size="14" color="#ff976a"></van-icon>
+              <span>等待处理中...</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 收起按钮 -->
+      <div v-if="isNodesExpanded && shouldShowCollapseBtn()" class="collapse-btn-wrapper">
+        <div class="collapse-btn" @click="isNodesExpanded = false">
+          <van-icon name="up"></van-icon>
+          收起节点
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="sortedOrderNodes.length === 0" class="order-empty">
+        <van-icon name="info-o" size="48" color="#ccc"></van-icon>
+        <p>暂无工单节点信息</p>
+      </div>
+    </div>
+
+    <!-- 附件预览弹窗 -->
+    <OrderAttachmentModal
+      :visible.sync="previewModalVisible"
+      :file-url="previewFileUrl"
+      :file-name="previewFileName"
+      :modal-width="previewModalWidth"
+    />
+  </div>
+</template>
+
+<script>
+import OrderNodeHeader from '../comps/order-node-header.vue'
+import OrderNodeCard from '../comps/order-node-card.vue'
+import OrderAttachmentList from '../comps/order-attachment-list.vue'
+import OrderAttachmentModal from '../comps/order-attachment-modal.vue'
+import { fileGetUrl } from '../../api/doc'
+import {
+  getStatusIcon,
+  getStatusClass
+} from '../comps/order-util.js'
+
+export default {
+  name: 'OrderDetail',
+  components: {
+    OrderNodeHeader,
+    OrderNodeCard,
+    OrderAttachmentList,
+    OrderAttachmentModal
+  },
+  props: {
+    /**
+     * 工单基本信息
+     * @property {string} orderName - 工单名称
+     * @property {string} createUser - 发起人
+     * @property {string} createTime - 发起时间
+     */
+    orderInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 工单节点数组
+     * @property {number} seq - 节点序号
+     * @property {string} taskName - 节点任务名称
+     * @property {string} handleUserName - 处理人姓名
+     * @property {string} handleUserAvatar - 处理人头像
+     * @property {string} status - 节点状态
+     * @property {string} handleResult - 处理结果
+     * @property {string} handleTime - 处理时间
+     * @property {string} startTime - 开始时间
+     * @property {string} endTime - 结束时间
+     * @property {string} handleComment - 处理意见
+     * @property {string} applyDescription - 申请描述
+     * @property {Array} attachments - 附件列表
+     */
+    orderNodes: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 是否显示头部区域
+     * @default true
+     */
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否启用节点折叠功能
+     * @default true
+     */
+    enableCollapse: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isNodesExpanded: false,
+      previewModalVisible: false,
+      previewFileUrl: '',
+      previewFileName: '',
+      previewModalWidth: '320px'
+    }
+  },
+  computed: {
+    sortedOrderNodes() {
+      return [...this.orderNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
+    },
+    overallOrderStatus() {
+      const nodes = this.sortedOrderNodes
+      if (nodes.length === 0) return 'processing'
+      if (nodes.every(n => n.status === 'completed')) return 'completed'
+      if (nodes.some(n => n.status === 'processing')) return 'processing'
+      return 'processing'
+    }
+  },
+  methods: {
+    getStatusIcon,
+    getStatusClass,
+    getOrderStatusImage() {
+      const statusMap = {
+        completed: require('../comps/icons/approved.svg'),
+        processing: require('../comps/icons/underway.svg'),
+        pending: require('../comps/icons/underway.svg')
+      }
+      return statusMap[this.overallOrderStatus] || statusMap.processing
+    },
+    handleAttachmentClick(file) {
+      this.$emit('attachment-click', file)
+      if (!file || !file.fileName) {
+        this.$toast({ message: '文件信息无效，无法预览', position: 'middle' })
+        return
+      }
+      const previewUrl = file.fileUrl || (file.fileId ? fileGetUrl + file.fileId : '')
+      if (!previewUrl) {
+        this.$toast({ message: '文件信息无效，无法预览', position: 'middle' })
+        return
+      }
+      this.previewFileUrl = previewUrl
+      this.previewFileName = file.fileName
+      this.previewModalVisible = true
+    },
+    shouldShowCollapseBtn() {
+      return this.enableCollapse && this.sortedOrderNodes.length > 4
+    },
+    shouldShowNode(index) {
+      if (!this.enableCollapse) return true
+      const total = this.sortedOrderNodes.length
+      if (total <= 4) return true
+      return index < 2 || index >= total - 2
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-detail-container {
+  border-radius: 4px;
+  padding: 16px;
+  background: #fff;
+}
+
+.order-header {
+  position: relative;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  padding-right: 80px;
+}
+
+.order-header-left {
+  flex: 1;
+}
+
+.order-title {
+  margin-bottom: 8px;
+}
+
+.order-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.order-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+}
+
+.meta-label {
+  color: #8c8c8c;
+}
+
+.meta-value {
+  color: #595959;
+}
+
+.order-status-image {
+  position: absolute;
+  top: 2px;
+  right: 0;
+  height: 70px;
+  width: auto;
+  z-index: 10;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
+}
+
+.order-timeline {
+  position: relative;
+}
+
+.timeline-item {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.timeline-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.timeline-dot {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border: 2px solid #fff;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.timeline-dot.dot-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.timeline-dot.dot-process {
+  background: #1989fa;
+  color: #fff;
+}
+
+.timeline-dot.dot-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.timeline-dot.dot-wait {
+  background: #f0f0f0;
+  color: #999;
+}
+
+.timeline-dot.dot-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.timeline-dot.dot-more {
+  background: #e8eaed;
+  color: #8c8c8c;
+}
+
+.timeline-line {
+  width: 2px;
+  flex: 1;
+  background: #e8e8e8;
+  margin-top: 4px;
+  min-height: 20px;
+}
+
+.content-col {
+  flex: 1;
+  padding-bottom: 8px;
+}
+
+.pending-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #fff7e6;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #fa8c16;
+}
+
+.collapse-placeholder {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  background: #f7f8fa;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #1989fa;
+  cursor: pointer;
+}
+
+.collapse-btn-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.collapse-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  background: #f7f8fa;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #8c8c8c;
+  cursor: pointer;
+}
+
+.order-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #ccc;
+}
+
+.order-empty p {
+  margin-top: 12px;
+  font-size: 14px;
+}
+</style>