agilebuilder-ui 1.1.29-dingtalkphoto2 → 1.1.30

package/packages/workflow-history-list/src/workflow-history-list.vue

@@ -1,177 +1,112 @@
 <template>
   <el-table
-		  v-if="loaded"
-		  ref="historyList"
-		  :data="histories"
-		  :height="tableHeight"
-		  :load="getChildren"
-		  :max-height="tableMaxHeight"
-		  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-		  border
-		  element-loading-text="Loading"
-		  fit
-		  highlight-current-row
-		  lazy
-		  row-key="uuid"
-		  style="width: 100%"
+    v-if="loaded"
+    ref="historyList"
+    :data="histories"
+    :height="tableHeight"
+    :load="getChildren"
+    :max-height="tableMaxHeight"
+    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    border
+    element-loading-text="Loading"
+    fit
+    highlight-current-row
+    lazy
+    row-key="uuid"
+    style="width: 100%"
   >
-	  <el-table-column
-			  :label="$t('workflowHistoryList.index')"
-			  align="left"
-			  width="80px"
-	  >
-		  <template v-slot="scope">
-			  {{ scope.$index + 1 }}
-		  </template>
-	  </el-table-column>
-	  <el-table-column
-			  :label="$t('workflowHistoryList.taskName')"
-			  align="left"
-			  width="250"
-	  >
-		  <template v-slot="scope">
-        <span
-		        v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_START'
-          "
-          >{{ $t('workflowHistoryList.processStart') }}</span
-        >
-        <span
-          v-else-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-          >{{ $t('workflowHistoryList.processEnd') }}</span
-        >
-        <span v-else-if="scope.row.current" style="color: #e6a23c">{{
-          i18nTaskName(scope.row)
+    <el-table-column :label="$t('workflowHistoryList.index')" align="left" width="80px">
+      <template v-slot="scope">
+        {{ scope.$index + 1 }}
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('workflowHistoryList.taskName')" align="left" width="250">
+      <template v-slot="scope">
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_START'">{{
+          $t('workflowHistoryList.processStart')
         }}</span>
-        <span v-else-if="!scope.row.special">{{
-          i18nTaskName(scope.row)
+        <span v-else-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'">{{
+          $t('workflowHistoryList.processEnd')
         }}</span>
+        <span v-else-if="scope.row.current" style="color: #e6a23c">{{ i18nTaskName(scope.row) }}</span>
+        <span v-else-if="!scope.row.special">{{ i18nTaskName(scope.row) }}</span>
         <span v-else-if="scope.row.special === true" style="color: red">{{
-          i18nTaskName(scope.row) +
-          '[' +
-          $t('workflowHistoryList.specailText') +
-          ']'
+          i18nTaskName(scope.row) + '[' + $t('workflowHistoryList.specailText') + ']'
         }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.operator')"
-      align="left"
-      width="250"
-    >
+    <el-table-column :label="$t('workflowHistoryList.operator')" align="left" width="250">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.creatorName }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.operatorLg')"
-      align="left"
-      width="250"
-    >
+    <el-table-column :label="$t('workflowHistoryList.operatorLg')" align="left" width="250">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.creator }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.operatorDept')"
-      align="left"
-      width="150"
-    >
+    <el-table-column :label="$t('workflowHistoryList.operatorDept')" align="left" width="150">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.departmentName }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.operationTime')"
-      align="left"
-      width="200"
-    >
+    <el-table-column :label="$t('workflowHistoryList.operationTime')" align="left" width="200">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.formatCreatedTime }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.operation')"
-      align="left"
-      width="400"
-    >
+    <el-table-column :label="$t('workflowHistoryList.operation')" align="left" width="400">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else-if="scope.row.current" style="color: #e6a23c"
-          >{{ scope.row.transactionResult }}
-          {{ $t('workflowHistoryList.toDoText') }}</span
+          >{{ scope.row.transactionResult }} {{ $t('workflowHistoryList.toDoText') }}</span
         >
         <span v-else>{{ i18nOperation(scope.row) }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :label="$t('workflowHistoryList.opinion')"
-      align="left"
-      width="400"
-    >
+    <el-table-column :label="$t('workflowHistoryList.opinion')" align="left" width="400">
       <template v-slot="scope">
-        <span
-          v-if="
-            scope.row.historyType && scope.row.historyType === 'PROCESS_END'
-          "
-        />
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.opinion }}</span>
       </template>
     </el-table-column>
+    <el-table-column :label="$t('workflowHistoryList.remark')" align="left" width="400">
+      <template v-slot="scope">
+        <span>{{ scope.row.remark }}</span>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 
 <script>
-import {i18nOperation} from '../../../src/utils/workflow-util'
-import {getLanguageWithLocale} from '../../../src/utils/util'
+import { i18nOperation } from '../../../src/utils/workflow-util'
+import { getLanguageWithLocale } from '../../../src/utils/util'
 import ApiJs from './api'
 
 export default {
-	name: 'WorkflowHistoryList',
-	props: {
-		workflowId: {
-			type: Number,
-			default: null,
-		},
-		// 流转历史列表，在图形流转历史中查看子流程流转历史需要使用
-		historyList: {
-			type: Array,
-			default: null,
-		},
-		// 主子流程的国际化配置
-		allProcessI18n: {
-			type: Object,
-			default: null,
-		},
-		maxHeight: {
+  name: 'WorkflowHistoryList',
+  props: {
+    workflowId: {
+      type: Number,
+      default: null
+    },
+    // 流转历史列表，在图形流转历史中查看子流程流转历史需要使用
+    historyList: {
+      type: Array,
+      default: null
+    },
+    // 主子流程的国际化配置
+    allProcessI18n: {
+      type: Object,
+      default: null
+    },
+    maxHeight: {
       type: [String, Number],
-      default: null,
+      default: null
     },
     beanName: {
       type: String,
@@ -193,16 +128,16 @@ export default {
       processI18n: null,
       processNameI18n: null,
       tableMaxHeight: null,
-	    tableHeight: null
+      tableHeight: null
     }
   },
   computed: {},
   provide() {
     return {}
   },
-	created() {
+  created() {
     console.log('historyList---workflowId==', this.workflowId)
-    if(this.workflowId !== undefined && this.workflowId !== null){
+    if (this.workflowId !== undefined && this.workflowId !== null) {
       this.getI18nSet().then((processI18n) => {
         this.processI18n = processI18n
         if (!this.histories || this.histories === null) {
@@ -212,37 +147,43 @@ export default {
         }
       })
     } else {
-        // 页面设计器预览页面时会用该方法
-        this.initTableData()
+      // 页面设计器预览页面时会用该方法
+      this.initTableData()
     }
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.tableHeight = window.innerHeight - 120
-		})
-	},
-	methods: {
-		...ApiJs,
-		getData() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight - 120
+    })
+  },
+  methods: {
+    ...ApiJs,
+    getData() {
       if (this.beanName || this.entityName) {
         const params = {
           beanName: this.beanName,
           entityName: this.entityName,
           workflowId: this.workflowId
         }
-        this.$http.post(window.$vueApp.config.globalProperties.baseURL + '/dsc/workflow-commons/instance-histories', params).then(data => {
-          this.handleHistory(data)
-        }).catch(error => {
-          console.log(error)
-          this.loaded = true
-        })
+        this.$http
+          .post(window.$vueApp.config.globalProperties.baseURL + '/dsc/workflow-commons/instance-histories', params)
+          .then((data) => {
+            this.handleHistory(data)
+          })
+          .catch((error) => {
+            console.log(error)
+            this.loaded = true
+          })
       } else {
-        this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/wf-editor/instance-histories/' + this.workflowId).then(data => {
-          this.handleHistory(data)
-        }).catch(error => {
-          console.log(error)
-          this.loaded = true
-        })
+        this.$http
+          .get(window.$vueApp.config.globalProperties.baseAPI + '/wf-editor/instance-histories/' + this.workflowId)
+          .then((data) => {
+            this.handleHistory(data)
+          })
+          .catch((error) => {
+            console.log(error)
+            this.loaded = true
+          })
       }
     },
     handleHistory(data) {
@@ -263,7 +204,7 @@ export default {
       }
     },
     initTableData(data) {
-      if(data) {
+      if (data) {
         this.histories = data.histories
         if (data && data.currentTasks) {
           this.histories = this.histories.concat(data.currentTasks)
@@ -341,7 +282,7 @@ export default {
     },
     getChildren(row, treeNode, resolve) {
       resolve(row.children)
-    },
-  },
+    }
+  }
 }
 </script>

package/src/components/Affix/index.vue

@@ -1,15 +1,15 @@
 <template>
-    <div ref="affixMainRef" class="yx-affix">
-      <div v-if="isFixed" :style="placeholderStyle" class="yx-affix-placeholder" />
+    <div ref="affixMainRef" class="yx-affix" :style="{ height: isFixed ? placeholderStyle.height : undefined }">
       <div
         ref="affixRef"
+        v-resize="onResize"
         :style="affixStyle"
         :class="{
-          'yx-affix-content': true,
           'is-fixed': isFixed,
           'is-top': props.position === 'top',
           'is-bottom': props.position === 'bottom'
         }"
+        class="yx-affix-content"
       >
         <slot />
       </div>
@@ -75,6 +75,12 @@
   const scrollContainer = ref<HTMLElement | Window>(window);
   const adjustedOffset = ref<number>(0);
   const intervalId = ref<number | null>(null);
+
+  const onResize = (entry: { contentRect: { height: string | undefined; }; }) => {
+    if (entry.contentRect.height) {
+      placeholderStyle.value.height = entry.contentRect.height
+    }
+  }
   
   // 用于获取 距离顶部 底部 距离 
   const getAffixOffset = (containerRect: DOMRect) => {
@@ -157,6 +163,7 @@
   
   // 更新固定状态
   const updateFixedState = (shouldFix: boolean, rect: DOMRect) => {
+    if (!rect.height) return
     if (shouldFix !== isFixed.value || placeholderStyle.value?.height !== `${rect.height}px`) {
       isFixed.value = shouldFix;
       emits('change', shouldFix);
@@ -228,7 +235,7 @@
   
   // 计算样式
   const affixStyle = computed(() => {
-    if (isFixed.value) {
+    if (isFixed.value && affixRef.value?.offsetWidth) {
       return {
         position: 'fixed',
         width: `${affixRef.value?.offsetWidth}px`,
@@ -244,20 +251,20 @@
       
 <style lang="scss" scoped>
 .yx-affix {
-  &:has(.yx-affix-content:empty) {
-      display: none;
+  &:empty {
+    display: none;
   }
+
   .yx-affix-content {
+    &:empty {
+      display: none;
+    }
     &.is-fixed {
       &.is-top {
-        & > .yx-fixed-box-container {
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       }
       &.is-bottom {
-        & > .yx-fixed-box-container {
-          box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
-        }
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
       }
     }
   }