@ebiz/designer-components 0.1.29 → 0.1.31

package/package.json

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

package/src/components/EbizApproval.vue

@@ -3,7 +3,9 @@
     <t-card>
       <!-- 审批人部分 -->
       <div class="approval-section">
-        <div class="approval-title">审批流程</div>
+        <slot name="title">
+          <div class="approval-title">审批流程</div>
+        </slot>
 
         <div class="section-header">
           <t-icon name="user" class="section-icon" />

package/src/components/EbizApprovalForm.vue

@@ -0,0 +1,482 @@
+<template>
+    <div class="approval-form">
+        <t-form labelWidth="100px" labelAlign="right" class="component-base-style" :data="{}">
+            <!-- 添加审批人选择组件 -->
+            <div v-if="!isInWhiteList && hasNextApprover" style="margin-bottom: 10px;">
+                <ebiz-approval
+                    :showCC="false"
+                    type="all"
+                    :showRootOrg="false"
+                    class="component-base-style"
+                    :required="hasNextApprover"
+                    v-model:approverList="selectedApprover"
+                    :canEdit="hasNextApprover"
+                    v-model:ccList="selectedCCList"
+                >
+                <template #title>
+                    <div></div>
+                </template>
+            </ebiz-approval>
+            </div>
+            <t-form-item label="审批意见">
+                <t-textarea placeholder="请输入" :maxLength="200" :maxCharacter="true" class="component-base-style"
+                    v-model="comments"></t-textarea>
+            </t-form-item>
+            <t-form-item>
+                <div class="button-group">
+                    <div class="more-actions">
+                        <t-dropdown :options="actionOptions" @click="onActionSelected">
+                            <t-button theme="default" variant="outline">
+                                <template #icon>
+                                    <t-icon name="ellipsis" size="large" class="component-base-style"></t-icon>
+                                </template>
+                            </t-button>
+                        </t-dropdown>
+                    </div>
+                    <div>
+                        <t-button theme="primary" type="submit" content="通过" @click="handlePass">
+                            <template #icon>
+                                <t-icon name="check" size="large" class="component-base-style"></t-icon>
+                            </template>
+                        </t-button>
+                        <t-button content="拒绝" the type="reset" style="margin-left: 10px" @click="handleReject">
+                            <template #icon>
+                                <t-icon name="close" size="large" class="component-base-style"></t-icon>
+                            </template>
+                        </t-button>
+                    </div>
+                </div>
+            </t-form-item>
+        </t-form>
+
+        <!-- 转审人员选择 -->
+        <t-dialog header="选择转审人" :visible="showTransferDialog" :confirm-btn="{ content: '确定', theme: 'primary' }"
+            :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="confirmTransfer"
+            @close="showTransferDialog = false">
+            <EbizEmployeeSelector v-model="transferApprover" :single="true"></EbizEmployeeSelector>
+        </t-dialog>
+
+        <!-- 转接待人选择 -->
+        <t-dialog header="选择接待人" :visible="showReceiverDialog" :confirm-btn="{ content: '确定', theme: 'primary' }"
+            :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="confirmReceiver"
+            @close="showReceiverDialog = false">
+            <EbizEmployeeSelector v-model="selectedReceiver" :single="true"></EbizEmployeeSelector>
+        </t-dialog>
+
+        <!-- 加签位置选择 -->
+        <t-dialog header="选择加签位置" :visible="showPositionDialog" :confirm-btn="{ content: '确定', theme: 'primary' }"
+            :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="confirmPosition"
+            @close="showPositionDialog = false">
+            <t-radio-group v-model="addSignPosition">
+                <t-radio value="before">往前加签</t-radio>
+                <t-radio value="after">往后加签</t-radio>
+            </t-radio-group>
+        </t-dialog>
+
+        <!-- 加签人员选择 -->
+        <t-dialog header="选择加签人员" :visible="showAddSignDialog" :confirm-btn="{ content: '确定', theme: 'primary' }"
+            :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="confirmAddSign"
+            @close="showAddSignDialog = false">
+            <EbizEmployeeSelector v-model="selectedAddSignUser" :single="true"></EbizEmployeeSelector>
+        </t-dialog>
+
+        <!-- 退回确认 -->
+        <t-dialog header="退回确认" :visible="showReturnDialog" :confirm-btn="{ content: '确定退回', theme: 'danger' }"
+            :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="confirmReturn"
+            @close="showReturnDialog = false">
+            <p>确定要退回该审批吗？</p>
+            <t-input v-model="returnReason" placeholder="请输入退回原因" />
+        </t-dialog>
+    </div>
+</template>
+
+<script setup>
+import {
+  Form as TForm,
+  FormItem as TFormItem,
+  Button as TButton,
+  Icon as TIcon,
+  Textarea as TTextarea,
+  Dropdown as TDropdown,
+  Dialog as TDialog,
+  Select as TSelect,
+  RadioGroup as TRadioGroup,
+  Radio as TRadio,
+  Input as TInput,
+  MessagePlugin
+} from 'tdesign-vue-next'
+import { defineProps, defineEmits, ref, reactive, computed, onMounted } from 'vue'
+import { dataService, EbizEmployeeSelector, EbizApproval } from '../index'
+
+const request = (params = {}, apiConfig = {}, url = '') => {
+    return dataService.fetch(params, apiConfig, url)
+}
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  approvalDetail: {
+    type: Object,
+    default: () => ({})
+  },
+  taskId: {
+    type: String,
+    default: ''
+  },
+  businessKey: {
+    type: String,
+    default: ''
+  },
+  processInstanceId: {
+    type: String,
+    default: ''
+  },
+  taskDefinitionKey: {
+    type: String,
+    default: ''
+  },
+  utils: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['pass', 'reject', 'refresh'])
+
+// 基础数据
+const comments = ref('')
+const showMoreActions = ref(false)
+const taskType = ref('')
+
+// 下一步审批人相关
+const hasNextApprover = ref(false)
+const isInWhiteList = ref(false)
+const selectedApprover = ref([])
+const selectedCCList = ref([])
+
+// 转审相关
+const showTransferDialog = ref(false)
+const transferApprover = ref(null)
+
+// 转接待人相关
+const showReceiverDialog = ref(false)
+const selectedReceiver = ref(null)
+
+// 加签相关
+const showPositionDialog = ref(false)
+const showAddSignDialog = ref(false)
+const addSignPosition = ref('after')
+const selectedAddSignUser = ref(null)
+
+// 退回相关
+const showReturnDialog = ref(false)
+const returnReason = ref('')
+
+// 员工选择相关
+const employeeLoading = ref(false)
+const employeeOptions = ref([])
+
+// 操作选项
+const actionOptions = computed(() => {
+  const options = [
+    { content: '转审', value: 'transfer' },
+    { content: '加签', value: 'addSign' },
+    { content: '退回', value: 'return' }
+  ]
+
+  // 如果是接待人节点，添加转接待人选项
+  if (props.taskDefinitionKey === 'receiver') {
+    options.unshift({ content: '转接待人', value: 'changeReceiver' })
+  }
+
+  return options
+})
+
+// 获取当前任务节点类型
+const getCurrentTaskType = async () => {
+  try {
+    employeeLoading.value = true
+    const res = await request(
+      { taskId: props.taskId },
+      {},
+      `/tasks/curr-user-task-type`
+    )
+    taskType.value = res.taskType
+  } catch (err) {
+    MessagePlugin.error(err.message || '获取任务类型失败')
+  } finally {
+    employeeLoading.value = false
+  }
+}
+
+// 判断是否需要选择审批人
+const checkHasNextApprover = async () => {
+  try {
+    const res = await request(
+      { taskId: props.taskId },
+      {},
+      '/tasks/next-user-task-type'
+    )
+    hasNextApprover.value = res.hasNextUserTask ? ['sequential', 'parallel'].includes(res.taskType) : false
+  } catch (err) {
+    MessagePlugin.error(err.message || '获取下一步审批信息失败')
+  }
+}
+
+// 检查是否在白名单中
+const checkIsInWhiteList = async () => {
+  if (props.taskDefinitionKey === 'receiver' && props.approvalDetail?.variables?.form?.receiver) {
+    try {
+      const res = await request(
+        {},
+        {
+          key: 'visitor_whitelist_disenable_pagination',
+          apiId: 2282,
+          apiType: 0
+        },
+        ''
+      )
+      isInWhiteList.value = res?.data?.some(item => 
+        item.emp_id === Number(props.approvalDetail.variables.form.receiver)
+      )
+    } catch (err) {
+      MessagePlugin.error(err.message || '获取白名单信息失败')
+    }
+  }
+}
+
+// 获取员工列表
+const getEmployeeList = async () => {
+  try {
+    employeeLoading.value = true
+    const res = await request(
+      {},
+      { key: 'approval_employee_list', apiId: 2269, apiType: '0' },
+      ''
+    )
+    employeeOptions.value = (res || []).map(item => ({
+      label: item.name,
+      value: item.id
+    }))
+  } catch (err) {
+    MessagePlugin.error(err.message || '获取员工列表失败')
+  } finally {
+    employeeLoading.value = false
+  }
+}
+
+// 显示更多操作菜单
+const onShowMore = () => {
+  showMoreActions.value = true
+}
+
+// 选择操作
+const onActionSelected = ({ value }) => {
+  switch (value) {
+    case 'transfer':
+      showTransferDialog.value = true
+      getEmployeeList()
+      break
+    case 'changeReceiver':
+      showReceiverDialog.value = true
+      getEmployeeList()
+      break
+    case 'addSign':
+      if (taskType.value === 'sequential') {
+          showPositionDialog.value = true
+      } else {
+        MessagePlugin.warning('加签仅支持会签模式')
+      }
+      break
+    case 'return':
+      showReturnDialog.value = true
+      break
+  }
+}
+
+// 通过审批
+const handlePass = async () => {
+  // 检查是否需要选择下一步审批人
+  if (!isInWhiteList.value && hasNextApprover.value && (!Array.isArray(selectedApprover.value) || selectedApprover.value.length === 0)) {
+    MessagePlugin.warning('请先选择审批人')
+    return
+  }
+
+  const params = {
+    taskId: props.taskId,
+    comment: comments.value,
+    approve: true,
+    ccList: selectedCCList.value || []
+  }
+
+  if (Array.isArray(selectedApprover.value) && selectedApprover.value.length > 0) {
+    params.approverList = selectedApprover.value
+  }
+
+  try {
+    await emit('pass', params)
+    comments.value = ''
+  } catch (err) {
+    MessagePlugin.error(err.message || '操作失败')
+  }
+}
+
+// 拒绝审批
+const handleReject = async () => {
+  try {
+    await emit('reject', comments.value)
+    comments.value = ''
+  } catch (err) {
+    MessagePlugin.error(err.message || '操作失败')
+  }
+}
+
+// 确认转审
+const confirmTransfer = async () => {
+  if (!transferApprover.value) {
+    MessagePlugin.warning('请选择转审人')
+    return
+  }
+
+  try {
+    const res = await request(
+      {
+        toUserId: String(transferApprover.value),
+        rejectReason: '转审'
+      },
+      {},
+      `/tasks/${props.taskId}/transfer`
+    )
+
+    if (res.success) {
+      MessagePlugin.success(res.message || '转审成功')
+      showTransferDialog.value = false
+      transferApprover.value = null
+      emit('refresh')
+    }
+  } catch (err) {
+    MessagePlugin.error(err.message || '转审失败')
+  }
+}
+
+// 确认转接待人
+const confirmReceiver = async () => {
+  if (!selectedReceiver.value) {
+    MessagePlugin.warning('请选择接待人')
+    return
+  }
+
+  try {
+    const res = await request(
+      {
+        saveData: {
+          id: props.approvalDetail.variables.form.id,
+          receiver: String(selectedReceiver.value),
+          taskId: props.taskId
+        }
+      },
+      {
+        key: 'out_visitor_apply_update_receiver',
+        apiId: 2276,
+        apiType: 5
+      },
+      ''
+    )
+
+    MessagePlugin.success('转接待人成功')
+
+    showReceiverDialog.value = false
+    selectedReceiver.value = null
+    emit('refresh')
+  } catch (err) {
+    MessagePlugin.error(err.message || '转接待人失败')
+  }
+}
+
+// 确认加签位置
+const confirmPosition = () => {
+  showPositionDialog.value = false
+  showAddSignDialog.value = true
+  getEmployeeList()
+}
+
+// 确认加签
+const confirmAddSign = async () => {
+  if (!selectedAddSignUser.value) {
+    MessagePlugin.warning('请选择加签人员')
+    return
+  }
+
+  try {
+    const res = await request(
+      {
+        userIds: [selectedAddSignUser.value],
+        position: addSignPosition.value
+      },
+      {},
+      `/tasks/${props.taskId}/addSign`
+    )
+
+    MessagePlugin.success('加签成功')
+
+    showAddSignDialog.value = false
+    selectedAddSignUser.value = null
+    
+    if (addSignPosition.value === 'before') {
+      emit('refresh')
+    }
+  } catch (err) {
+    MessagePlugin.error(err.message || '加签失败')
+  }
+}
+
+// 确认退回
+const confirmReturn = async () => {
+  try {
+    const res = await request(
+      {
+        reason: returnReason.value || '驳回'
+      },
+      {},
+      `/tasks/${props.taskId}/return`
+    )
+
+    MessagePlugin.success('退回成功')
+
+    showReturnDialog.value = false
+    returnReason.value = ''
+    emit('refresh')
+  } catch (err) {
+    MessagePlugin.error(err.message || '退回失败')
+  }
+}
+
+onMounted(async () => {
+  if (props.taskId) {
+    await getCurrentTaskType()
+    await checkHasNextApprover()
+    await checkIsInWhiteList()
+  }
+})
+</script>
+
+<style scoped>
+.component-base-style {
+  margin: 0px;
+}
+
+.approval-form {
+  position: relative;
+}
+
+.button-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.more-actions {
+  margin-right: 10px;
+}
+</style> 

package/src/components/EbizEmployeeSelector.vue

@@ -2,17 +2,20 @@
   <div class="ebiz-employee-selector">
     <!-- 选择框展示区 -->
     <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
-      <div class="selected-items" v-if="selectedItems && selectedItems.length">
-        <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
-          <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
-          <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
-          <span class="item-info">
-            <span class="item-code">{{ item.no }} - </span>
-            <span class="item-name">{{ item.name }}</span>
-          </span>
-          <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
+      <slot name="selected-items" :event="{ remove: removeItem }" :data="selectedItems">
+        <div class="selected-items" v-if="selectedItems && selectedItems.length">
+          <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
+            <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
+            <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
+            <span class="item-info">
+              <span class="item-code">{{ item.no }} - </span>
+              <span class="item-name">{{ item.name }}</span>
+            </span>
+            <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
+          </div>
         </div>
-      </div>
+      </slot>
+
       <t-button @click="showDialog" variant="text" theme="primary">{{ props.content }}</t-button>
     </div>
 
@@ -110,7 +113,8 @@
             </div>
 
             <div class="employee-list">
-              <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item" style="cursor: pointer;">
+              <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
+                style="cursor: pointer;">
                 <t-checkbox v-model="item.checked" @change="handleCheckChange(item)"></t-checkbox>
                 <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
                   <div class="employee-avatar">
@@ -275,24 +279,24 @@ const getAvatarText = (name) => {
 
 const computedModelValue = computed({
   set(val) {
-    if( props.single ){
-      if( val.length > 0 ){
+    if (props.single) {
+      if (val.length > 0) {
         emit("update:modelValue", val[0]);
-      }else{
+      } else {
         emit("update:modelValue", "");
       }
-      return ;
+      return;
     }
     emit("update:modelValue", val);
   },
   get() {
 
     let value = props.modelValue
-    
+
     if (props.single) {
       value = props.modelValue ? [props.modelValue] : [];
     }
-    value.forEach((val)=>{
+    value.forEach((val) => {
       return Number(val);
     })
 
@@ -504,7 +508,7 @@ const fetchEmployeesByIds = async (ids) => {
     selectedItems.value = [];
     return;
   }
-  if( !(ids instanceof Array) ){
+  if (!(ids instanceof Array)) {
     ids = [ids];
   }
 

package/src/components/EbizSApprovalProcess.vue

@@ -6,7 +6,7 @@
                 <span style="display: inline-block" class="component-base-style">加载中</span>
             </ebiz-tdesign-loading>
 
-            <div v-if="!state.loading" class="card">
+            <div class="card">
                 <div style="margin: 10px 0" class="component-base-style">
                     <span style="display: inline-block" class="title">审批流程</span>
                 </div>
@@ -120,6 +120,9 @@
                                             defaultTab="organization" class="component-base-style"
                                             v-model="state.selectedCCList" @click="handleAddCcUser"
                                             @confirm="onAddCcListConfirm">
+                                            <template #selected-items="{ event, data }">
+                                                <div></div>
+                                            </template>
                                         </ebiz-employee-selector>
                                     </div>
 
@@ -268,47 +271,6 @@ const requestApprovalDetail = (businessKey, type) => {
     }).catch((err) => {
         handleApprovalDetailError(err)
     })
-
-    // 临时测试数据（可以删除）
-    // const testData = {
-    //     "processInstanceId": "130953",
-    //     "businessKey": "357",
-    //     "processDefinitionKey": "Out_Visitor_Application",
-    //     "processDefinitionName": "访客自助登记",
-    //     "processStatus": "ACTIVE",
-    //     "processStatusDesc": "进行中",
-    //     "startTime": "2025-06-13 16:04:52",
-    //     "startUserId": null,
-    //     "endTime": null,
-    //     "ccUserList": [
-    //         {
-    //             "userId": "3180",
-    //             "name": "邓强杰",
-    //             "employeeNo": "4879",
-    //             "photo": "http://oas.guokeai.cn:9003/upload/20250529/20250529_26f77dfaf1324a96b341e4b9b142ae23.jpg",
-    //             "deptName": "技术部"
-    //         }
-    //     ],
-    //     "nodes": [
-    //         {
-    //             "nodeId": "receiver",
-    //             "nodeName": "接待人审批",
-    //             "nodeStatus": "COMPLETED",
-    //             "isMultiInstance": false,
-    //             "approvers": [
-    //                 {
-    //                     "userId": "3176",
-    //                     "userName": "吴跃忠",
-    //                     "employeeNo": "LaiRiFangZhang",
-    //                     "deptName": "技术部",
-    //                     "approvalStatus": "COMPLETED",
-    //                     "completedTime": "2025-06-13 16:06:11"
-    //                 }
-    //             ]
-    //         }
-    //     ]
-    // }
-    // handleApprovalDetailResponse(testData)
 }
 
 // 获取操作类型的样式类
@@ -570,7 +532,11 @@ function onAddCcListConfirm(event) {
         {},
         '/tasks/batchAddCcInfo'
     )
-        .then((res) => { })
+        .then((res) => {
+            // 重新加载数据
+            requestApprovalDetail(String(props.businessKey), props.type)
+            message.success("添加成功")
+        })
         .catch((err) => {
             message.error(err.message)
         })

package/src/index.js

@@ -63,6 +63,7 @@ import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue'
 import EbizTdesignButtonDialog from './components/EbizTdesignButtonDialog.vue'
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next'
 import EbizApproval from './components/EbizApproval.vue'
+import EbizApprovalForm from './components/EbizApprovalForm.vue'
 import EbizDiv from './components/EbizDiv.vue'
 import EbizSApprovalProcess from './components/EbizSApprovalProcess.vue'
 
@@ -221,6 +222,8 @@ export {
   EbizSDialog,
   // 新增 EbizApproval 组件
   EbizApproval,
+  // 审批表单组件
+  EbizApprovalForm,
   EbizDiv,
   // 下拉菜单组件
   EbizDropdown,

package/src/router/index.js

@@ -353,6 +353,12 @@ const routes = [
     component:()=>import('../views/EbizApprovalDemo.vue'),
     meta:{title:"Ebiz审批组件示例"}
   },
+  {
+    path: '/approval-form',
+    name: 'EbizApprovalForm',
+    component: () => import('../views/EbizApprovalFormDemo.vue'),
+    meta: { title: 'Ebiz审批表单组件示例' }
+  },
   {
     path:"/vxe-table",
     name:"EbizVxeTable",