@ebiz/designer-components 0.1.111 → 0.1.113

package/package.json

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

package/src/components/EbizApprovalDetail.vue

@@ -1,16 +1,22 @@
 <template>
     <div class='ebiz-approval-container'>
         <div class='detail-container'>
-            <div class="title">{{ approvalDetail.variables?.startUserName + '的' + approvalDetail.processDefinitionName }}</div>
+            <div class="title">{{ approvalDetail.variables?.startUserName + '的' + approvalDetail.processDefinitionName }}
+                <ebiz-tag
+                variant="light"
+                size="medium"
+                class="component-base-style"
+                :theme="themeMap[approvalDetail?.state]"
+                :content="approvalDetail.stateDesc || '-'"
+                ></ebiz-tag>
+            </div>
             <!-- 区块详情 -->
             <div class="block-detail">
                 <slot name="block"></slot>
+                <ebiz-s-approval-process ref="approvalprocessRef" :businessKey="businessKey" :type="type"></ebiz-s-approval-process>
             </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>
@@ -22,7 +28,7 @@
 <script lang='ts' setup>
 
 import { ref, onMounted } from 'vue';
-import { dataService, EbizSApprovalProcess, EbizApprovalForm } from '../index'
+import { dataService, EbizSApprovalProcess, EbizApprovalForm, EbizTag } from '../index'
 import { MessagePlugin as message, LoadingPlugin as loading } from 'tdesign-vue-next'
 
 const props = defineProps({
@@ -36,6 +42,8 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits(['loaded'])
+
 // 审批流程组件实例
 const approvalprocessRef = ref(null)
 
@@ -51,9 +59,22 @@ const currTask = ref({})
 // 是否为当前任务的审批人
 const isAssignee = ref(false)
 
+// 加载状态
+const isLoading = ref(false)
+
+const themeMap = {
+    CANCELED: 'default',
+    REJECTED: 'danger',
+    APPROVED: 'success',
+    ACTIVE: 'primary',
+    COMPLETED: 'success',
+    SUSPENDED: 'warning'
+}
+
 // 获取审批详情
 const getApprovalDetail = () => {
     loading(true)
+    isLoading.value = true
     dataService.fetch(
         {
             businessKey: props.businessKey,
@@ -72,8 +93,13 @@ const getApprovalDetail = () => {
             isAssignee.value = false
         }
         loading(false)
+        isLoading.value = false
+        emit('loaded', res)
     }).catch((err) => {
         message.error(err.message)
+        loading(false)
+        isLoading.value = false
+        emit('loaded', err)
     })
 }
 
@@ -96,6 +122,13 @@ const refresh = () => {
 onMounted(() => {
     init()
 })
+
+defineExpose({
+    refresh,
+    currTask,
+    isLoading,
+    isAssignee
+})
 </script>
 
 <style lang='less' scoped>
@@ -109,7 +142,7 @@ onMounted(() => {
     position: absolute;
     top: 0;
     left: 0;
-    padding: 24px 12px;
+    padding: 4px 12px;
     color: #000000;
     font-size: 18px;
     font-weight: 600;
@@ -118,8 +151,8 @@ onMounted(() => {
 .detail-container {
     position: relative;
     display: flex;
-    width: 1000px;
-    padding: 60px 12px;
+    width: 900px;
+    padding: 30px 12px;
     background-color: #ffffff;
     border-radius: 4px;
     box-sizing: border-box;

package/src/components/EbizApprovalForm.vue

@@ -29,13 +29,13 @@
               </t-button>
             </t-dropdown>
           </div>
-          <div>
+          <div style="display: flex;">
             <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">
+            <t-button theme="danger" 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>

package/src/components/EbizTreeSelector.vue

@@ -67,7 +67,8 @@
               <span class="selected-label">{{ item.label }}</span>
               <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
             </div>
-            <div v-if="[...selectPreview, ...selectPreviewPost, ...selectPreviewUser].length === 0" class="no-selection">
+            <div v-if="[...selectPreview, ...selectPreviewPost, ...selectPreviewUser].length === 0"
+              class="no-selection">
               <t-icon name="info-circle" />
               <span style="user-select: none">请在左侧选择部门或成员</span>
             </div>
@@ -148,13 +149,18 @@ const postTree = ref()
 const fetchApiData = async () => {
   loading.value = true
   try {
+    // 加载部门
     dataService.fetch(
       { keyWord: activeTab.value === 'organization' ? searchText.value : '' },
       {},
       '/appdata/execute/plugin?key=organizational_structure'
     ).then(res => {
       organizationData.value = res || []
+      checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
+      console.log("checkedNodes: {}", checkedNodes)
     })
+
+    // 加载用户
     dataService.fetch(
       { postEnable: true, keyWord: activeTab.value === 'employee' ? searchText.value : '' },
       {},
@@ -165,7 +171,10 @@ const fetchApiData = async () => {
         bindid: i.id,
         type: 'employee'
       }));
+      checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
     })
+
+    // 加载岗位
     dataService.fetch({
       apiKey: 'all_active_post',
       queryParams: {
@@ -179,6 +188,7 @@ const fetchApiData = async () => {
         bindid: i.id,
         type: 'GW'
       }))
+      checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
     })
     console.log(postData.value)
   } catch (error) {
@@ -203,9 +213,9 @@ function showDialog() {
   // 获取API数据
   fetchApiData()
   // 重置选中的节点
-  checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
-  checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
-  checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
+  // checkedNodes.value = props.modelValue.filter(i => i.type === 'DEPT').map((item) => item.bindid);
+  // checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
+  // checkedPostNodes.value = props.modelValue.filter(i => i.type === 'GW').map(item => item.bindid);
   dialogVisible.value = true
 }
 
@@ -262,16 +272,21 @@ watch(
   checkedNodes,
   (newValues) => {
     if (!organizationTree.value?.treeRef) return
-    selectPreview.value = (newValues.map(organizationTree.value.treeRef.getItem) ?? []).map((i) => ({
-      label: i?.label,
-      type: i?.data?.type || i?.type,
-      bindid: i?.value
-    }))
+    console.log("部门选择变化", organizationTree.value.treeRef.getItem, newValues)
+    setTimeout(() => {
+      selectPreview.value = (newValues.map(organizationTree.value.treeRef.getItem) ?? []).map((i) => ({
+        label: i?.label,
+        type: i?.data?.type || i?.type,
+        bindid: i?.value
+      }))
+    }, 200)
+
   },
   { deep: true }
 )
 watch(checkedUserNodes, nVal => {
   // 获取新选中的用户数据
+  console.log("用户选择变化")
   const newSelectedUsers = employeeData.value.filter(i => nVal.includes(i.bindid))
   // 获取现有用户的bindid列表，避免重复添加
   const existingBindIds = selectPreviewUser.value.map(user => user.bindid)
@@ -281,6 +296,7 @@ watch(checkedUserNodes, nVal => {
   selectPreviewUser.value = [...selectPreviewUser.value, ...usersToAdd]
 }, { deep: true })
 watch(checkedPostNodes, nVal => {
+  console.log("岗位选择变化")
   selectPreviewPost.value = postData.value.filter(i => nVal.includes(i.bindid))
 }, { deep: true })
 // 监听modelValue变化，同步到选中节点

package/src/components/senior/EbizApprovalList/ApprovalList.vue

@@ -0,0 +1,127 @@
+<template>
+  <div color="#999">
+    <div class="card">
+      <div class="header">
+        <ebiz-tag size="medium" variant="dark" class="component-base-style" :content="{
+            REJECTED: '已驳回',
+            APPROVED: '已通过',
+            ACTIVE: '进行中',
+            CANCELED: '已取消'
+          }[status] || '未知状态'
+          " :theme="{
+              REJECTED: 'danger',
+              APPROVED: 'success',
+              ACTIVE: 'primary',
+              CANCELED: 'default'
+            }[status] || 'default'
+            "></ebiz-tag>
+        <span style="display: inline-block; font-size: 14px">{{ typeDesc || '未知' }}</span>
+        <span style="display: inline-block; font-size: 14px; color: #666; margin-left: auto"
+          class="component-base-style">{{ utils.calcTime(date, 'y/M/d') }}</span>
+      </div>
+      <div v-if="fields.length">
+        <div class="body">
+          <div v-for="(item, index) in fields.sort((a, b) => a.sort - b.sort)" class="component-base-style"
+            :key="index">
+            <span style="display: inline-block" class="label">{{ item.label + ':' }}</span>
+            <span v-if="item.value_type == 'text' || item.value_type == 'textarea'" style="display: inline-block"
+              class="value">{{ item.actual_value }}</span>
+            <ebiz-file-list v-if="item.value_type == 'files' || item.value_type == 'images'" displayMode="grid"
+              :showActions="true" :showFileSize="true" size="mini" class="component-base-style"
+              :files="item.actual_value || []"></ebiz-file-list>
+          </div>
+        </div>
+      </div>
+      <div v-if="!fields.length" style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 15px;
+          height: 100px;
+          flex-direction: column;
+        " class="component-base-style">
+        <ebiz-tdesign-icon name="data-error" size="large" color="#999" style="font-size: 40px"
+          class="component-base-style"></ebiz-tdesign-icon>
+        <span style="display: inline-block; color: #999" class="component-base-style">字段未配置</span>
+      </div>
+      <div v-if="btns?.length" class="footer">
+        <ebiz-tdesign-button v-for="(item, index) in btns ?? []" size="medium" :content="item.label"
+          :theme="item.theme || 'primary'" :disabled="item.disabled" :key="index" :class="item.hidden ? 'hidden' : ''"
+          @click="(...eventArgs) => btnClick(eventArgs, index, item)"></ebiz-tdesign-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizTag, EbizTdesignIcon, EbizTdesignButton, EbizFileList } from ''
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({
+  status: { type: String, default: '' },
+  type: { type: String, default: '' },
+  typeDesc: { type: String, default: '' },
+  date: { type: String, default: '' },
+  fields: { type: Array, default: () => [] },
+  btns: { type: Array, default: () => [] },
+  mode: { type: String, default: 'ing' },
+  item: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['btn-click'])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const { utils } = wrap(function () {
+  return this
+})()
+const state = vue.reactive({})
+wrap({ state })
+
+const btnClick = wrap(function btnClick(event, args0, args1) {
+  this.emit('btnClick', args0, args1)
+})
+
+wrap({ btnClick })
+</script>
+<style scoped>
+.card {
+  padding: 12px;
+  border-radius: 15px;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.body {}
+
+.label {
+  color: #666;
+  min-width: 100px;
+  font-size: 14px;
+}
+
+.value {
+  color: #666;
+  font-size: 14px;
+}
+
+.footer {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.hidden {
+  display: none !important;
+}
+</style>

package/src/components/senior/EbizSForm/item.vue

@@ -73,6 +73,18 @@
                     :clearable="clearable" :format="timeFormat || 'HH:mm:ss'" @change="handleChange" />
             </template>
 
+            <!-- 范围日期选择器 -->
+            <template v-else-if="type === 'date-range'">
+                <t-date-range-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期范围'" :disabled="disabled"
+                    :clearable="clearable" :format="dateFormat || 'YYYY-MM-DD'" :mode="dateMode || 'date'"  @change="handleChange" />
+            </template>
+
+            <!-- 范围日期时间选择器 -->
+            <template v-else-if="type === 'datetime-range'">
+                <t-date-range-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间范围'" :disabled="disabled"
+                    :clearable="clearable" format="YYYY-MM-DD HH:mm:ss" :mode="dateMode || 'date'" enable-time-picker @change="handleChange" />
+            </template>
+
             <!-- 单选框组 -->
             <template v-else-if="type === 'radio'">
                 <t-radio-group v-model="computedModelValue" :disabled="disabled" :options="options"
@@ -305,7 +317,8 @@ import {
     ColorPicker as TColorPicker,
     Table as TTable,
     Button as TButton,
-    Space as TSpace
+    Space as TSpace,
+    DateRangePicker as TDateRangePicker
 } from 'tdesign-vue-next';
 import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
 import EbizEmployeeSelector from '../../EbizEmployeeSelector.vue';