wl-design-mobile 0.8.19 → 0.8.21

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

@@ -1,133 +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>
+<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

@@ -1,132 +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]}`
-}
+/**
+ * 工单组件公共工具方法（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]}`
+}