@ebiz/designer-components 0.1.112 → 0.1.113

package/package.json

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

package/src/components/EbizApprovalDetail.vue

@@ -1,7 +1,15 @@
 <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>
@@ -20,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({
@@ -54,6 +62,15 @@ 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)
@@ -125,7 +142,7 @@ defineExpose({
     position: absolute;
     top: 0;
     left: 0;
-    padding: 24px 12px;
+    padding: 4px 12px;
     color: #000000;
     font-size: 18px;
     font-weight: 600;
@@ -135,7 +152,7 @@ defineExpose({
     position: relative;
     display: flex;
     width: 900px;
-    padding: 60px 12px;
+    padding: 30px 12px;
     background-color: #ffffff;
     border-radius: 4px;
     box-sizing: border-box;

package/src/components/EbizApprovalForm.vue

@@ -35,7 +35,7 @@
                 <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/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';