wl-design-mobile 0.8.2 → 0.8.4

package/flow/lambo-flow-edit.vue

@@ -1,30 +1,15 @@
 <template>
-  <div>
-
-  </div>
+  <FlowSubmit v-bind="$attrs" v-on="$listeners" />
 </template>
+
 <script>
+import FlowSubmit from './submit/flow-submit.vue'
 
 export default {
   name: 'LamboFlowEdit',
-  components: {},
-  props: {},
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-
-  },
-  created() {
-
+  components: {
+    FlowSubmit
   },
-  mounted() {
-
-  }
+  inheritAttrs: false
 }
 </script>
-<style scoped>
-@import "../styles/index.less";
-</style>

package/flow/submit/flow-submit.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="flow-submit-container">
+    <!-- 流程头部信息 -->
+    <div class="flow-header" v-if="showHeader">
+      <div class="flow-title">
+        <span class="flow-name">{{ flowInfo.flowName || '审批流程提交' }}</span>
+      </div>
+      <FlowCopyUsers
+        :copy-users="copyUsers"
+        :available-users="availableCopyUsers"
+        :editable="copyUsersEditable"
+        @change="handleCopyUsersChange"
+      />
+    </div>
+
+    <!-- 流程节点时间线 -->
+    <div class="flow-timeline">
+      <div v-for="(item, index) in sortedFlowNodes" :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 !== sortedFlowNodes.length - 1"></div>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="content-col">
+          <!-- 节点头部信息 -->
+          <FlowNodeHeader
+            :node-info="item"
+            :node-index="index"
+          />
+
+          <!-- 第一个节点：申请描述输入 + 附件上传 -->
+          <div v-if="index === 0" class="submit-card">
+            <div class="submit-label">申请描述</div>
+            <van-field
+              v-model="applyDescription"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入申请描述..."
+            />
+
+            <!-- 附件上传 -->
+            <FlowAttachmentList
+              :attachments="attachments"
+              :show-title="true"
+              :editable="true"
+              @click="handleAttachmentClick"
+              @upload-success="handleUploadSuccess"
+              @remove="removeAttachment"
+            />
+
+            <div class="submit-actions">
+              <van-button type="primary" @click="handleSubmit" :loading="submitting" block>
+                提交审批
+              </van-button>
+            </div>
+          </div>
+
+          <!-- 其他节点：显示待审批提示 -->
+          <div v-else class="pending-tip">
+            <van-icon name="clock-o" size="14" color="#ff976a"></van-icon>
+            <span>等待审批中...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="sortedFlowNodes.length === 0" class="flow-empty">
+        <van-icon name="info-o" size="48" color="#ccc"></van-icon>
+        <p>暂无流程节点信息</p>
+      </div>
+    </div>
+
+    <!-- 附件预览弹窗 -->
+    <FlowAttachmentModal
+      :visible.sync="previewModalVisible"
+      :file-url="previewFileUrl"
+      :file-name="previewFileName"
+      :modal-width="previewModalWidth"
+    />
+  </div>
+</template>
+
+<script>
+import FlowNodeHeader from '../comps/flow-node-header.vue'
+import FlowAttachmentList from '../comps/flow-attachment-list.vue'
+import FlowAttachmentModal from '../comps/flow-attachment-modal.vue'
+import FlowCopyUsers from '../comps/flow-copy-users.vue'
+import { fileGetUrl } from '../../api/doc'
+import {
+  getStatusIcon,
+  getStatusClass
+} from '../comps/flow-util.js'
+
+export default {
+  name: 'FlowSubmit',
+  components: {
+    FlowNodeHeader,
+    FlowAttachmentList,
+    FlowAttachmentModal,
+    FlowCopyUsers
+  },
+  props: {
+    /**
+     * 流程基本信息
+     * @property {string} flowName - 流程名称
+     */
+    flowInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 流程节点数组
+     * @property {number} seq - 节点序号
+     * @property {string} taskName - 节点任务名称
+     * @property {string} auditUserName - 审批人姓名
+     * @property {string} auditUserAvatar - 审批人头像
+     * @property {string} status - 节点状态
+     */
+    flowNodes: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 是否显示头部区域
+     * @default true
+     */
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    initAttachments: {
+      type: Array,
+      default: () => []
+    },
+    copyUsersEditable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 抄送人列表
+     * @property {string} id - 抄送人ID
+     * @property {string} name - 抄送人姓名
+     * @property {string} avatar - 抄送人头像地址
+     */
+    copyUsers: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 可选抄送人列表
+     */
+    availableCopyUsers: {
+      type: Array,
+      default: () => [
+        { id: '1', name: '张三' },
+        { id: '2', name: '李四' },
+        { id: '3', name: '王五' },
+        { id: '4', name: '赵六' },
+        { id: '5', name: '钱七' },
+        { id: '6', name: '孙八' }
+      ]
+    }
+  },
+  data() {
+    return {
+      applyDescription: '',
+      submitting: false,
+      attachments: [...this.initAttachments],
+      previewModalVisible: false,
+      previewFileUrl: '',
+      previewFileName: '',
+      previewModalWidth: '320px'
+    }
+  },
+  computed: {
+    sortedFlowNodes() {
+      return [...this.flowNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
+    }
+  },
+  watch: {
+    initAttachments: {
+      deep: true,
+      handler(val) {
+        this.attachments = [...val]
+      }
+    }
+  },
+  methods: {
+    getStatusIcon,
+    getStatusClass,
+    handleCopyUsersChange(users) {
+      this.$emit('update:copyUsers', users)
+    },
+    handleUploadSuccess(fileData) {
+      this.attachments.push(fileData)
+    },
+    removeAttachment(index) {
+      this.attachments.splice(index, 1)
+    },
+    handleAttachmentClick(file) {
+      if (!file || !file.fileName) return
+      const previewUrl = file.fileUrl || (file.fileId ? fileGetUrl + file.fileId : '')
+      if (!previewUrl) return
+      this.previewFileUrl = previewUrl
+      this.previewFileName = file.fileName
+      this.previewModalVisible = true
+    },
+    handleSubmit() {
+      if (!this.applyDescription.trim()) {
+        this.$toast({ message: '请输入申请描述', position: 'middle' })
+        return
+      }
+      this.submitting = true
+      this.$emit('submit', {
+        applyDescription: this.applyDescription,
+        flowInfo: this.flowInfo,
+        flowNodes: this.sortedFlowNodes,
+        copyUsers: this.copyUsers,
+        attachments: this.attachments
+      })
+      this.submitting = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.flow-submit-container {
+  border-radius: 4px;
+  padding: 16px;
+  background: #fff;
+}
+
+.flow-header {
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+}
+
+.flow-title {
+  margin-bottom: 8px;
+}
+
+.flow-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.flow-timeline {
+  position: relative;
+}
+
+.timeline-item {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.timeline-item:last-child {
+  margin-bottom: 0;
+}
+
+.timeline-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 12px;
+  width: 28px;
+  flex-shrink: 0;
+}
+
+.timeline-dot {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f0f0;
+  color: #999;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  z-index: 2;
+}
+
+.timeline-dot.dot-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.timeline-dot.dot-process {
+  background: #1989fa;
+  color: #fff;
+  animation: pulse 2s infinite;
+}
+
+.timeline-dot.dot-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.timeline-dot.dot-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.timeline-dot.dot-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);
+  }
+}
+
+.timeline-line {
+  width: 2px;
+  flex: 1;
+  min-height: 24px;
+  background: #e8e8e8;
+  margin-top: 4px;
+}
+
+.content-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.submit-card {
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+}
+
+.submit-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+  margin-bottom: 8px;
+}
+
+.submit-actions {
+  margin-top: 16px;
+}
+
+.pending-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #fff7e8;
+  border: 1px solid #ffd9b3;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #ff976a;
+}
+
+.flow-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.flow-empty p {
+  margin: 12px 0 0 0;
+  font-size: 14px;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "",
   "main": "index.js",
   "author": "finch",