wl-design-mobile 0.8.13 → 0.8.15

package/flow/comps/flow-node-card.vue

@@ -1,150 +1,150 @@
-<template>
-  <div class="node-detail-card">
-    <div class="audit-result-badge" :class="'badge-' + getAuditResultClass(nodeInfo.auditResult)" v-if="showResultBadge && !isApplyNode">
-      <van-icon :name="getAuditIcon(nodeInfo.auditResult)" size="12"></van-icon>
-      <span>{{ getAuditResultText(nodeInfo.auditResult) }}</span>
-    </div>
-    <div class="detail-grid">
-      <div class="detail-item">
-        <span class="detail-label">{{ isApplyNode ? '发起时间：' : '审批时间：' }}</span>
-        <span class="detail-value">{{ (isApplyNode ? nodeInfo.applyTime : nodeInfo.auditTime) || '-' }}</span>
-      </div>
-      <div class="detail-item">
-        <span class="detail-label">{{ isApplyNode ? '发起人：' : '审批人：' }}</span>
-        <span class="detail-value">{{ (isApplyNode ? nodeInfo.applyUserName : nodeInfo.auditUserName) || '-' }}</span>
-      </div>
-    </div>
-    <div class="detail-grid" style="margin-top: 8px" v-if="!isApplyNode && (nodeInfo.startTime || nodeInfo.endTime)">
-      <div class="detail-item">
-        <span class="detail-label">开始时间：</span>
-        <span class="detail-value">{{ nodeInfo.startTime || '-' }}</span>
-      </div>
-      <div class="detail-item">
-        <span class="detail-label">结束时间：</span>
-        <span class="detail-value">{{ nodeInfo.endTime || '-' }}</span>
-      </div>
-    </div>
-    <div class="detail-item comment-item" v-if="isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment">
-      <span class="detail-label">{{ isApplyNode ? '申请描述：' : '审批意见：' }}</span>
-      <span class="detail-value">{{ isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment }}</span>
-    </div>
-
-    <!-- 附件列表插槽 -->
-    <slot name="attachments"></slot>
-  </div>
-</template>
-
-<script>
-import { getAuditResultClass, getAuditResultText, getAuditIcon } from './flow-util.js'
-
-export default {
-  name: 'FlowNodeCard',
-  props: {
-    nodeInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    showResultBadge: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 是否为发起节点
-     * @default false
-     */
-    isApplyNode: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    getAuditResultClass,
-    getAuditResultText,
-    getAuditIcon
-  }
-}
-</script>
-
-<style scoped>
-.node-detail-card {
-  border-radius: 4px;
-  padding: 12px;
-  border: 1px solid #e8e8e8;
-  position: relative;
-  overflow: hidden;
-}
-
-.audit-result-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 0 0 0 4px;
-  font-size: 12px;
-  font-weight: 500;
-  z-index: 1;
-}
-
-.audit-result-badge.badge-pass {
-  background: #07c160;
-  color: #fff;
-}
-
-.audit-result-badge.badge-reject {
-  background: #ee0a24;
-  color: #fff;
-}
-
-.audit-result-badge.badge-transfer {
-  background: #ff976a;
-  color: #fff;
-}
-
-.audit-result-badge.badge-return {
-  background: #8c8c8c;
-  color: #fff;
-}
-
-.audit-result-badge.badge-default {
-  background: #d9d9d9;
-  color: #fff;
-}
-
-.detail-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  width: calc(50% - 4px);
-}
-
-@media (max-width: 510px) {
-  .detail-item {
-    width: 100% !important;
-  }
-}
-
-.comment-item {
-  width: 100%;
-  margin-top: 8px;
-}
-
-.detail-label {
-  color: #8c8c8c;
-  flex-shrink: 0;
-}
-
-.detail-value {
-  color: #262626;
-  flex: 1;
-  word-break: break-all;
-}
-</style>
+<template>
+  <div class="node-detail-card">
+    <div class="audit-result-badge" :class="'badge-' + getAuditResultClass(nodeInfo.auditResult)" v-if="showResultBadge && !isApplyNode">
+      <van-icon :name="getAuditIcon(nodeInfo.auditResult)" size="12"></van-icon>
+      <span>{{ getAuditResultText(nodeInfo.auditResult) }}</span>
+    </div>
+    <div class="detail-grid">
+      <div class="detail-item">
+        <span class="detail-label">{{ isApplyNode ? '发起时间：' : '审批时间：' }}</span>
+        <span class="detail-value">{{ (isApplyNode ? nodeInfo.applyTime : nodeInfo.auditTime) || '-' }}</span>
+      </div>
+      <div class="detail-item">
+        <span class="detail-label">{{ isApplyNode ? '发起人：' : '审批人：' }}</span>
+        <span class="detail-value">{{ (isApplyNode ? nodeInfo.applyUserName : nodeInfo.auditUserName) || '-' }}</span>
+      </div>
+    </div>
+    <div class="detail-grid" style="margin-top: 8px" v-if="!isApplyNode && (nodeInfo.startTime || nodeInfo.endTime)">
+      <div class="detail-item">
+        <span class="detail-label">开始时间：</span>
+        <span class="detail-value">{{ nodeInfo.startTime || '-' }}</span>
+      </div>
+      <div class="detail-item">
+        <span class="detail-label">结束时间：</span>
+        <span class="detail-value">{{ nodeInfo.endTime || '-' }}</span>
+      </div>
+    </div>
+    <div class="detail-item comment-item" v-if="isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment">
+      <span class="detail-label">{{ isApplyNode ? '申请描述：' : '审批意见：' }}</span>
+      <span class="detail-value">{{ isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment }}</span>
+    </div>
+
+    <!-- 附件列表插槽 -->
+    <slot name="attachments"></slot>
+  </div>
+</template>
+
+<script>
+import { getAuditResultClass, getAuditResultText, getAuditIcon } from './flow-util.js'
+
+export default {
+  name: 'FlowNodeCard',
+  props: {
+    nodeInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    showResultBadge: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否为发起节点
+     * @default false
+     */
+    isApplyNode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    getAuditResultClass,
+    getAuditResultText,
+    getAuditIcon
+  }
+}
+</script>
+
+<style scoped>
+.node-detail-card {
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  position: relative;
+  overflow: hidden;
+}
+
+.audit-result-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 0 0 0 4px;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.audit-result-badge.badge-pass {
+  background: #07c160;
+  color: #fff;
+}
+
+.audit-result-badge.badge-reject {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.audit-result-badge.badge-transfer {
+  background: #ff976a;
+  color: #fff;
+}
+
+.audit-result-badge.badge-return {
+  background: #8c8c8c;
+  color: #fff;
+}
+
+.audit-result-badge.badge-default {
+  background: #d9d9d9;
+  color: #fff;
+}
+
+.detail-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  font-size: 13px;
+  width: calc(50% - 4px);
+}
+
+@media (max-width: 510px) {
+  .detail-item {
+    width: 100% !important;
+  }
+}
+
+.comment-item {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.detail-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #262626;
+  flex: 1;
+  word-break: break-all;
+}
+</style>

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

@@ -1,172 +1,172 @@
-<template>
-  <div class="node-header">
-    <div class="avatar-wrapper">
-      <div class="node-avatar" :class="{ 'avatar-no-image': !nodeInfo.auditUserAvatar }">
-        <img v-if="nodeInfo.auditUserAvatar" :src="nodeInfo.auditUserAvatar" alt="" />
-        <span v-else>{{ nodeInfo.auditUserName ? nodeInfo.auditUserName.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.auditUserName">
-        <span class="user-name">{{ nodeInfo.auditUserName }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getStatusIcon, getStatusClass } from './flow-util.js'
-
-export default {
-  name: 'FlowNodeHeader',
-  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;
-}
-
-.node-avatar.avatar-no-image {
-  background: #1989fa;
-  color: #fff;
-}
-
-.status-badge {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #fff;
-  background: #f0f0f0;
-  color: #999;
-}
-
-.status-badge.badge-success {
-  background: #07c160;
-  color: #fff;
-}
-
-.status-badge.badge-process {
-  background: #1989fa;
-  color: #fff;
-  animation: pulse 2s infinite;
-}
-
-.status-badge.badge-error {
-  background: #ee0a24;
-  color: #fff;
-}
-
-.status-badge.badge-warning {
-  background: #ff976a;
-  color: #fff;
-}
-
-.status-badge.badge-wait {
-  background: #f0f0f0;
-  color: #999;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(25, 137, 250, 0);
-  }
-}
-
-.node-info {
-  flex: 1;
-  padding-top: 2px;
-  min-width: 0;
-}
-
-.node-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.task-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #262626;
-}
-
-.node-user-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 2px;
-}
-
-.user-name {
-  font-size: 12px;
-  color: #262626;
-}
-</style>
+<template>
+  <div class="node-header">
+    <div class="avatar-wrapper">
+      <div class="node-avatar" :class="{ 'avatar-no-image': !nodeInfo.auditUserAvatar }">
+        <img v-if="nodeInfo.auditUserAvatar" :src="nodeInfo.auditUserAvatar" alt="" />
+        <span v-else>{{ nodeInfo.auditUserName ? nodeInfo.auditUserName.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.auditUserName">
+        <span class="user-name">{{ nodeInfo.auditUserName }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStatusIcon, getStatusClass } from './flow-util.js'
+
+export default {
+  name: 'FlowNodeHeader',
+  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;
+}
+
+.node-avatar.avatar-no-image {
+  background: #1989fa;
+  color: #fff;
+}
+
+.status-badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+  background: #f0f0f0;
+  color: #999;
+}
+
+.status-badge.badge-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.status-badge.badge-process {
+  background: #1989fa;
+  color: #fff;
+  animation: pulse 2s infinite;
+}
+
+.status-badge.badge-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.status-badge.badge-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.status-badge.badge-wait {
+  background: #f0f0f0;
+  color: #999;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(25, 137, 250, 0);
+  }
+}
+
+.node-info {
+  flex: 1;
+  padding-top: 2px;
+  min-width: 0;
+}
+
+.node-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.task-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.node-user-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.user-name {
+  font-size: 12px;
+  color: #262626;
+}
+</style>