@ebiz/designer-components 0.1.108 → 0.1.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizApprovalDetail.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class='ebiz-approval-container'>
+        <div class='detail-container'>
+            <div class="title">{{ approvalDetail.variables?.startUserName + '的' + approvalDetail.processDefinitionName }}</div>
+            <!-- 区块详情 -->
+            <div class="block-detail">
+                <slot name="block"></slot>
+            </div>
+            <!-- 审批区域 -->
+            <div class="approval-area">
+                <ebiz-s-approval-process ref="approvalprocessRef" :businessKey="businessKey"
+                    :type="type"></ebiz-s-approval-process>
+
+                <ebiz-approval-form v-if="isAssignee" :taskId="currTask.id" :businessKey="businessKey"
+                    :taskDefinitionKey="currTask.taskDefinitionKey" :approvalDetail="approvalDetail" @pass="refresh"
+                    @reject="refresh" @refresh="refresh"></ebiz-approval-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+
+import { ref, onMounted } from 'vue';
+import { dataService, EbizSApprovalProcess, EbizApprovalForm } from '../index'
+import { MessagePlugin as message, LoadingPlugin as loading } from 'tdesign-vue-next'
+
+const props = defineProps({
+    businessKey: {
+        type: String,
+        default: ''
+    },
+    type: {
+        type: String,
+        default: ''
+    }
+})
+
+// 审批流程组件实例
+const approvalprocessRef = ref(null)
+
+// 当前用户
+const user = ref({})
+
+// 审批详情
+const approvalDetail = ref({})
+
+// 当前任务
+const currTask = ref({})
+
+// 是否为当前任务的审批人
+const isAssignee = ref(false)
+
+// 获取审批详情
+const getApprovalDetail = () => {
+    loading(true)
+    dataService.fetch(
+        {
+            businessKey: props.businessKey,
+            type: props.type
+        },
+        {},
+        '/tasks/process/detail'
+    ).then((res) => {
+        approvalDetail.value = res
+        if (res.activeTasks.length > 0) {
+            //是待处理的任务
+            currTask.value = res.activeTasks[0] //当前任务
+            isAssignee.value = currTask.value.assignee == user.value.userId
+
+        } else {
+            isAssignee.value = false
+        }
+        loading(false)
+    }).catch((err) => {
+        message.error(err.message)
+    })
+}
+
+// 初始化
+const init = () => {
+    approvalDetail.value = {}
+    currTask.value = {}
+    isAssignee.value = false
+    const { businessKey, type } = props
+    getApprovalDetail()
+    user.value = JSON.parse(localStorage.getItem('user'))
+    approvalprocessRef.value?.requestApprovalDetail(businessKey, type)
+}
+
+// 刷新页面
+const refresh = () => {
+    init()
+}
+
+onMounted(() => {
+    init()
+})
+</script>
+
+<style lang='less' scoped>
+.ebiz-approval-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 24px 12px;
+    color: #000000;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.detail-container {
+    position: relative;
+    display: flex;
+    width: 1000px;
+    padding: 60px 12px;
+    background-color: #ffffff;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.block-detail {
+    padding-top: 12px;
+    flex: 3;
+}
+
+.approval-area {
+    padding-left: 16px;
+    flex: 2;
+}
+</style>

package/src/components/EbizFileList.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="ebiz-file-list" :class="{ 'mini-mode': size === 'mini' }">
     <div v-if="computedFiles.length === 0" class="empty-state">
-      <t-icon name="file" size="20px" />
-      <p>暂无文件</p>
+      <div>-</div>
     </div>
     <div v-else class="file-list-container" :class="{ 'mini-container': size === 'mini' }">
       <div v-for="(file, index) in computedFiles" :key="index" class="file-item"
@@ -164,8 +163,47 @@ const computedFiles = computed(() => {
       return [];
     }
 
-    // 判断是单个URL还是逗号分隔的多个URL
-    if (props.files.includes(',')) {
+    // 判断是否为JSON字符串
+    const trimmedFiles = props.files.trim();
+    if (trimmedFiles.startsWith('[') && trimmedFiles.endsWith(']')) {
+      try {
+        // 尝试解析JSON字符串
+        const parsedArray = JSON.parse(trimmedFiles);
+        if (Array.isArray(parsedArray)) {
+          // 解析成功，处理数组中的每个元素
+          fileList = parsedArray.map(item => {
+            if (typeof item === 'string') {
+              // 数组中的字符串元素，作为URL处理
+              return parseFileInfo(item);
+            } else if (item && typeof item === 'object') {
+              // 对象格式的文件信息
+              const url = item.url || item.src || item.path || '';
+              return {
+                name: item.name || extractFileName(url),
+                url: getFullUrl(url),
+                size: item.size || null,
+                extension: item.extension || getFileExtension(url || item.name || ''),
+                ...item
+              };
+            } else {
+              // 其他情况，返回默认对象
+              return {
+                name: '未知文件',
+                url: '',
+                extension: '',
+                size: null
+              };
+            }
+          });
+        } else {
+          // 解析出来不是数组，按普通字符串处理
+          fileList = [parseFileInfo(trimmedFiles)];
+        }
+      } catch (e) {
+        // JSON解析失败，按普通字符串处理
+        fileList = [parseFileInfo(trimmedFiles)];
+      }
+    } else if (props.files.includes(',')) {
       // 逗号分隔的多个URL
       const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
       fileList = urls.map(url => parseFileInfo(url));
@@ -360,8 +398,6 @@ const handleImageError = () => {
   .empty-state {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
     padding: 10px;
     color: #999;
 

package/src/components/EbizQrCode.vue

@@ -2,7 +2,7 @@
   <div>
     <t-qrcode :bg-color="bgColor" :border-less="borderless" :color="color" :icon="icon" :icon-size="iconSize"
       :level="level" :size="size" :type="type" :value="value" @refresh="onRefresh" 
-      @click="onClick" :class="{ 'cursor-pointer': props.dialogShow }">
+      @click="onClick" :class="{ 'no-padding': true, 'cursor-pointer': props.dialogShow }">
     </t-qrcode>
     <t-dialog v-model:visible="dialogVisible" :width="dialogWidth" :confirm-btn="null" :cancel-btn="null">
       <div style="display: flex; justify-content: center;">
@@ -157,9 +157,12 @@ const handleDownload = () => {
 </script>
 
 
-<style scoped>
+<style lang="less" scoped>
 /* 自定义样式 */
 .cursor-pointer {
   cursor: pointer;
 }
+.no-padding {
+  padding: 6px;
+}
 </style>

package/src/index.js

@@ -66,6 +66,7 @@ import EbizApproval from './components/EbizApproval.vue'
 import EbizApprovalForm from './components/EbizApprovalForm.vue'
 import EbizDiv from './components/EbizDiv.vue'
 import EbizSApprovalProcess from './components/EbizSApprovalProcess.vue'
+import EbizApprovalDetail from './components/EbizApprovalDetail.vue'
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
 // import EbizDescriptionsItem from './components/EbizDescriptionsItem.vue'
@@ -313,5 +314,7 @@ export {
   // 二维码组件
   EbizQrCode,
   // 访谈组件
-  LaunchInterview
+  LaunchInterview,
+  // 审批详情组件
+  EbizApprovalDetail
 }