agilebuilder-ui 1.1.38 → 1.1.39-sit1

package/packages/super-grid/src/dynamic-input.vue

@@ -13,6 +13,7 @@
       :additional-settings="controlConfig"
       :parent="parentFormData"
       :prop="column.prop"
+      :custom-params="myCustomParams"
       :row="row"
       :row-index="position ? position.row : null"
       :select-options="options"
@@ -545,7 +546,8 @@ import {
   getEntityFieldValue,
   setEntityFieldValue,
   getPropValueNew,
-  watchPageContextDynamicVariable
+  watchPageContextDynamicVariable,
+  formatCustomParams
 } from '../../../src/utils/util'
 import { getToken } from '../../../src/utils/auth'
 import apis from './apis'
@@ -662,16 +664,17 @@ export default {
     const gridData = gridParams.gridData
     const subTableData = gridParams.subTableData
     const isSubTableShowPage = gridParams.isSubTableShowPage
-    let controlConfig = {}
-    if (this.column.controlConfig) {
-      controlConfig = JSON.parse(this.column.controlConfig)
-    }
+
     const additionalParamMap = getAdditionalParamMap(gridParams)
     const pageContext = gridParams.options.pageContext
     const isMobile = isMobileBrowser()
 
     const componentId = this.listCode + '_' + this.column.prop
     let scanEnable = false
+    let controlConfig = {}
+    if (this.column.controlConfig) {
+      controlConfig = JSON.parse(this.column.controlConfig)
+    }
     if (controlConfig.scanEnable) {
       scanEnable = true
     }
@@ -760,7 +763,8 @@ export default {
       isShowScanIcon,
       baseURL,
       colConfigure, // v10字段配置原信息
-      designProperty // 字段配置
+      designProperty, // 字段配置
+      myCustomParams: {}
     }
   },
   computed: {},
@@ -808,6 +812,12 @@ export default {
   },
   created() {
     const gridParams = store.get(this.listCode)
+    if (this.controlConfig?.customParams) {
+      if (!this.pageContext) {
+        this.pageContext = gridParams.options.pageContext
+      }
+      this.myCustomParams = formatCustomParams(this.controlConfig.customParams, this.pageContext, this.row)
+    }
     this.gridParams = gridParams
     this.isCreateRow = gridParams.isCreateRow
     this.setTreeType()
@@ -901,14 +911,6 @@ export default {
     const that = this
     // 选择文件结束
     eventBus.$on(this.componentId + '-pickFileDone', (data) => {
-      console.log(
-        'superPage666611---pickFileDone--data.componentId=',
-        data.componentId,
-        'data.listCode=',
-        data.listCode,
-        'data=',
-        data
-      )
       if (that.$refs.fileUploadRef) {
         that.$refs.fileUploadRef.pickFileDone(data)
       }
@@ -921,14 +923,6 @@ export default {
     })
     // 扫描结束
     eventBus.$on(this.componentId + '-scanDone', (data) => {
-      console.log(
-        'superPage666611---scanDone--data.componentId=',
-        data.componentId,
-        'data.listCode=',
-        data.listCode,
-        'data=',
-        data
-      )
       that.innerValue = data.result
       that.blurEvent()
       this.callCustomEvent('afterScanDone')

package/packages/super-grid/src/normal-column-content.vue

@@ -96,6 +96,7 @@
             :grid-data="gridData"
             :page-grid-data="pageGridData"
             :current-page="currentPage"
+            :custom-params="controlConfig ? controlConfig.customParams : null"
             @refresh-list="refreshList"
           />
           <row-operation
@@ -106,6 +107,7 @@
             :is-show="operation.isShow"
             :label="operation.props.label ? operation.props.label : row[column.prop]"
             :on-click="operation.onClick"
+            :operation="operation"
             :operation-index="operationIndex"
             :operation-setting="operation.props"
             :event-name="operation.eventName"
@@ -133,6 +135,7 @@
           :additional-param-map="additionalParamMap"
           :additional-settings="additionalSettings"
           :page-context="options?.pageContext"
+          :custom-params="controlConfig ? controlConfig.customParams : null"
         />
       </span>
       <!-- 自定义格式的时候 -->
@@ -170,6 +173,7 @@
           :component-id="componentId"
           :additional-settings="additionalSettings"
           :page-context="options?.pageContext"
+          :custom-params="controlConfig ? controlConfig.customParams : null"
           @prohibitToEdit="prohibitToEdit"
           @refresh-list="refreshList"
       /></span>
@@ -235,15 +239,17 @@
             :title="getMyHyperLinkSetting(row, rowIndex).title"
             :class="textOverflow === 'newline' ? 'wrap-text' : 'ellipsis cell--span'"
             >{{ getMyHyperLinkSetting(row, rowIndex).label }}
-            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
-              <component :is="(getMyHyperLinkSetting(row), rowIndex.icon)" />
-            </el-icon>
+            <SuperIcon
+              v-if="getMyHyperLinkSetting(row, rowIndex).icon"
+              :iconValue="getMyHyperLinkSetting(row, rowIndex).icon"
+            ></SuperIcon>
           </span>
           <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'"
             >{{ getMyHyperLinkSetting(row, rowIndex).label }}
-            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
-              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
-            </el-icon>
+            <SuperIcon
+              v-if="getMyHyperLinkSetting(row, rowIndex).icon"
+              :iconValue="getMyHyperLinkSetting(row, rowIndex).icon"
+            ></SuperIcon>
           </span>
         </el-link>
         <span
@@ -316,15 +322,17 @@
             :title="$escapeHtml(getMyHyperLinkSetting(row, rowIndex).title)"
             :class="textOverflow === 'newline' ? 'wrap-text' : 'ellipsis cell--span'"
             >{{ $escapeHtml(getMyHyperLinkSetting(row, rowIndex).label) }}
-            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
-              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
-            </el-icon>
+            <SuperIcon
+              v-if="getMyHyperLinkSetting(row, rowIndex).icon"
+              :iconValue="getMyHyperLinkSetting(row, rowIndex).icon"
+            ></SuperIcon>
           </span>
           <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'"
             >{{ $escapeHtml(getMyHyperLinkSetting(row, rowIndex).label) }}
-            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
-              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
-            </el-icon>
+            <SuperIcon
+              v-if="getMyHyperLinkSetting(row, rowIndex).icon"
+              :iconValue="getMyHyperLinkSetting(row, rowIndex).icon"
+            ></SuperIcon>
           </span>
         </el-link>
         <!-- 富文本 -->
@@ -387,7 +395,7 @@ import customFormatter from './custom-formatter'
 import RowOperation from './row-operation.vue'
 import apis from './apis'
 import { mapGetters } from 'vuex'
-import { getEntityFieldValue, getParentObjectUtil } from '../../../src/utils/util'
+import { getEntityFieldValue, getParentObjectUtil, formatCustomParams } from '../../../src/utils/util'
 import ViewImageDialog from './view-image-dialog.vue'
 import eventBus from './eventBus'
 import FsPreview from '../../fs-preview'
@@ -700,6 +708,10 @@ export default {
     this.requiredClass = this.isRequired(this.row.$editing) ? 'm-requried' : ''
   },
   mounted() {
+    if (this.controlConfig) {
+      const gridParams = store.get(this.listCode)
+      formatCustomParams(this.controlConfig.customParams, gridParams.pageContext, this.row)
+    }
     // 监听取消自定义编辑事件
     eventBus.$on('clearTableAllStartEditing', () => {
       this.clearAllEditing()

package/packages/super-grid/src/row-operation.vue

@@ -1,10 +1,10 @@
 <template>
   <!--将@click改为@mousedown.native是因为操作列保存按钮时事件和input等组件的@blur冲突，导致保存需要保存两次，因为
       @blur先于@click执行的，所以只会执行@blur，@click就失效了，@mousedown是先于@blur执行的-->
-  <span :style="myStyle">
+  <span class="table-operation-row-btn" :style="myStyle">
     <template v-if="isShowButton()">
       <el-tooltip :disabled="tooltipDisabled" :content="label" placement="top">
-        <template v-if="operationSettingData.permission">
+        <template v-if="operationSettingData?.permission">
           <component
             v-bind="operationSettingData"
             :is="isElementType"
@@ -77,9 +77,13 @@ export default {
       type: String,
       default: null,
     },
+    operation: {
+      type: Object,
+      default: () => ({}),
+    },
     operationSetting: {
       type: Object,
-      default: null,
+      default: () => ({}),
     },
     operationIndex: {
       type: Number,
@@ -148,16 +152,16 @@ export default {
     },
     // 后置图标
     suffixIcon() {
-      if(['right'].includes(this.operationSettingData.iconPosition)) return this.operationSetting.iconValue
+      if(['right'].includes(this.operationSetting.iconPosition)) return this.operationSetting.iconValue
       return undefined
     },
     // 是否显示文字按钮 > 图标模式
     isTextIcon() {
       if (this.isTableBtnLinkShow) {
-        if (this.operationSettingData.isTextIcon === undefined) {
+        if (this.operationSetting.isTextIcon === undefined) {
           return this.isSaveRow || this.isDeleteRow || this.isEditRow || this.isRestoreRow
         }
-        return this.operationSettingData.isTextIcon
+        return this.operationSetting.isTextIcon
       } else {
         return false
       }
@@ -172,14 +176,14 @@ export default {
     },
     // 是否自动开启表格 按钮 转 文字按钮
     isTableBtnLinkShow() {
-      if (this.operationSetting.text) return true
+      if (this.operationSetting?.text) return true
       if (this.isTableBtnLink && this.elementType === 'el-button') {
-        return [this.operationSetting.text, this.operationSetting.plain, this.operationSetting.round].every(v => v === undefined)
+        return [this.operationSetting?.text, this.operationSetting?.plain, this.operationSetting?.round].every(v => v === undefined)
       }
       return false
     },
     operationSettingData() {
-      const dataList = { ...this.operationSetting }
+      const dataList = { ...(this.operationSetting ?? {}) }
       if (this.isTableBtnLinkShow) {
         dataList.underline = false
         delete dataList.text

package/packages/super-grid/src/search-form-item.vue

@@ -148,26 +148,30 @@
     >
       <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
-    <dynamic-source-select
+    <template
       v-else-if="
         column.componentType &&
         (column.componentType === 'multiselect' || column.componentType === 'select') &&
         isDynamicDataSourceSource(column)
       "
-      :allow-create="true"
-      :base-props="{
-        multiple: column.componentType === 'multiselect' ? true : false
-      }"
-      :entity="searchForm"
-      :filterable="true"
-      :is-join-table="isJoinTable"
-      :list-code="code"
-      :list-toolbar-form-data="listToolbarFormData"
-      :options="getDynamicDataSourceOptions(column)"
-      :table-name="tableName"
-      :value="getFormItemValue(column.prop)"
-      @input="setValueToModelProp(column.prop, $event)"
-    />
+    >
+      <dynamic-source-select
+        v-model:value="searchForm[column.prop]"
+        :allow-create="true"
+        :base-props="{
+          multiple: column.componentType === 'multiselect' ? true : false
+        }"
+        :entity="searchForm"
+        :filterable="true"
+        :is-join-table="isJoinTable"
+        :list-code="code"
+        :list-toolbar-form-data="listToolbarFormData"
+        :options="getDynamicDataSourceOptions(column)"
+        :table-name="tableName"
+        @change="multiselectChange"
+        @input="setValueToModelProp(column.prop, $event)"
+      />
+    </template>
     <!--
 									<el-input-number
 										v-else-if="column.componentType && column.componentType==='inputNumber'"
@@ -209,7 +213,18 @@
       :style="column.searchControlWidth"
       @keyup.enter="submitForm('searchForm')"
       @input="setValueToModelProp(column.prop, $event)"
-    />
+      @focus="showEmpty()"
+      @blur="hiddenEmpty()"
+    >
+      <template #suffix>
+        <el-tooltip
+          :content="$t('superGrid.searchEmpty')"
+          placement="bottom"
+        >
+          <el-checkbox v-if="isShowEmtpty" v-model="checkedEmpty" @change="checkEmptyChange"/>
+        </el-tooltip>
+      </template>
+    </el-input>
   </el-form-item>
 </template>
 
@@ -277,7 +292,9 @@ export default {
       dataTwo: null,
       moduleConfig: {},
       dateVal: this.getFormItemValue(this.column.prop),
-      controlConfig: getControlConfig(this.column)
+      controlConfig: getControlConfig(this.column),
+      isShowEmtptyFlag: false,
+      // checkedEmpty: false,
     }
   },
   computed: {
@@ -287,6 +304,23 @@ export default {
         return data.listToolbarFormData
       }
       return null
+    },
+    isShowEmtpty() {
+      return this.isShowEmtptyFlag
+    },
+    checkedEmpty(){
+      if(this.column._emptyValue  && this.column._emptyValue === '#blank#'){
+        return true
+      }
+      if(this.column._resetValue || this.column._resetValue === undefined){
+        if(this.column._resetValue){
+          this.column._resetValue = undefined
+          this.isShowEmtptyFlag = false
+        }
+        return false
+      } else {
+        return true
+      }
     }
   },
   created() {
@@ -471,6 +505,30 @@ export default {
       } else {
         return ['00:00:00']
       }
+    },
+    multiselectChange(arr, selectedItem) {
+      if (arr.indexOf('saveAll') !== -1) {
+        if (this.searchForm[this.column.prop] && typeof this.searchForm[this.column.prop] === 'string') {
+          this.searchForm[this.column.prop] = this.searchForm[this.column.prop].split(',')
+        }
+      } else {
+        this.searchForm[this.column.prop] = arr
+      }
+    },
+    showEmpty(){
+      this.isShowEmtptyFlag = true
+    },
+    hiddenEmpty(){
+      if(!this.checkedEmpty){
+        this.isShowEmtptyFlag = false
+      }
+    },
+    checkEmptyChange(newValue) {
+      if(newValue){
+        this.column._emptyValue='#blank#'
+      } else {
+        this.column._emptyValue=undefined
+      }
     }
   },
   emits: ['submit-form']

package/packages/super-grid/src/search-form-mobile.vue

@@ -157,6 +157,11 @@ export default {
 					}
 					this.setDefaultQueryValue(column, this.searchForm)
 				}
+				// 清空空值状态
+				if(column._emptyValue){
+					column._emptyValue=undefined
+					column._resetValue=true
+				}
 			})
 			// 取消当前选中的条件列表的信息
 			// this.$refs.searchConditionList.editConditionId = null

package/packages/super-grid/src/search-form-ordinarySearch.vue

@@ -162,6 +162,11 @@ export default {
 					}
 					this.setDefaultQueryValue(column, this.searchForm)
 				}
+				// 清空空值状态
+				if(column._emptyValue){
+					column._emptyValue=undefined
+					column._resetValue=true
+				}
 			})
 			// 取消当前选中的条件列表的信息
 			// this.$refs.searchConditionList.editConditionId = null

package/packages/super-grid/src/search-methods.js

@@ -27,6 +27,7 @@ const searchMethods = {
                 param.formatter = column.formatter
                     ? JSON.parse(JSON.stringify(column.formatter))
                     : column.formatter
+                param.isEmptyValue= column._emptyValue && column._emptyValue === '#blank#'?true:false
                 const values = this.getFormItemValue(column.prop)
                 if (column.dataType === 'DATE' || column.dataType === 'TIME') {
                     // 日期 或 时间类型
@@ -440,10 +441,11 @@ const searchMethods = {
                 num++
             })
         } else if (
+            param.isEmptyValue || (
             typeof value !== 'undefined' &&
             value !== '' &&
             value !== null &&
-            !Array.isArray(value)
+            !Array.isArray(value))
         ) {
             // 不是数组
             param.propValue = value

package/packages/utils/organization.ts

@@ -1,5 +1,5 @@
 // 将选中的部门节点添加到结果集合中
-export function addSelectedUserInfo (selectNodeInfo, userData, containBranch) {
+export function addSelectedUserInfo(selectNodeInfo, userData, containBranch) {
   if (selectNodeInfo.userIds.indexOf(userData.id) < 0) {
     // 表示集合中不存在该用户
     selectNodeInfo.userIds.push(userData.id)
@@ -28,7 +28,7 @@ export function addSelectedUserInfo (selectNodeInfo, userData, containBranch) {
     selectNodeInfo.userEnNames.push(userData.enName ? userData.enName : '')
   }
 }
-export function packageSelectResult (user, containBranch) {
+export function packageSelectResult(user, containBranch) {
   let name = user.name
   if (user.enName && user.enName.trim() !== '') {
     name = name + '(' + user.enName + ')'
@@ -47,29 +47,42 @@ export function packageSelectResult (user, containBranch) {
     containBranch: containBranch,
     user: user,
     enName: user.enName ? user.enName : '',
-    subCompanyName: user.subCompanyName
+    subCompanyName: user.subCompanyName,
+    divisionManager: user.divisionManager,
+    divisionManagerName: user.divisionManagerName
   }
   // 表示是勾选单选按钮或 选中树节点
   return selectNodeInfo
 }
 // 根据指定用户信息获得用户集合
-function getSelectUsers (searchField, selectUserInfo, separator) {
+function getSelectUsers(searchField, selectUserInfo, separator) {
   return new Promise((resolve, reject) => {
     if (!searchField) {
       resolve([])
     } else if (!selectUserInfo) {
       resolve([])
     } else {
-      window['$vueApp'].config.globalProperties.$http.get(window['$vueApp'].config.globalProperties.baseAPI + '/component/organization-trees/select-users-mobile?searchField=' + searchField + '&selectUserInfo=' + selectUserInfo + '&separator=' + separator).then(users => {
-        resolve(users)
-      }).catch(error => {
-        reject(error)
-      })
+      window['$vueApp'].config.globalProperties.$http
+        .get(
+          window['$vueApp'].config.globalProperties.baseAPI +
+            '/component/organization-trees/select-users-mobile?searchField=' +
+            searchField +
+            '&selectUserInfo=' +
+            selectUserInfo +
+            '&separator=' +
+            separator
+        )
+        .then((users) => {
+          resolve(users)
+        })
+        .catch((error) => {
+          reject(error)
+        })
     }
   })
 }
 // 部门人员树选中了组织结构树的根节点
-function packageAllUser () {
+function packageAllUser() {
   // 表示集合中不存在该用户，则封装该用户
   const tenantNodeId = -1
   var allUser = {
@@ -79,7 +92,7 @@ function packageAllUser () {
   return allUser
 }
 // 工作组人员树选中了组织结构树的根节点
-function packageAllWgUser () {
+function packageAllWgUser() {
   // 表示集合中不存在该用户，则封装该用户
   const tenantNodeId = -1
   var allUser = {
@@ -88,7 +101,7 @@ function packageAllWgUser () {
   }
   return allUser
 }
-export function initSelectUsers (searchField, selectUserInfo, separator) {
+export function initSelectUsers(searchField, selectUserInfo, separator) {
   return new Promise((resolve, reject) => {
     const selectDepts = []
     if (selectUserInfo) {
@@ -101,11 +114,13 @@ export function initSelectUsers (searchField, selectUserInfo, separator) {
         resolve(selectDepts)
       } else {
         // 表示不是选择的所有用户
-        getSelectUsers(searchField, selectUserInfo, separator).then(users => {
-          resolve(users)
-        }).catch(error => {
-          reject(error)
-        })
+        getSelectUsers(searchField, selectUserInfo, separator)
+          .then((users) => {
+            resolve(users)
+          })
+          .catch((error) => {
+            reject(error)
+          })
       }
     } else {
       resolve(selectDepts)
@@ -113,9 +128,8 @@ export function initSelectUsers (searchField, selectUserInfo, separator) {
   })
 }
 
-
 // import {getLanguageWithLocale} from '../../../src/utils/util'
-export function resizeScrollTargetHeightUtil () {
+export function resizeScrollTargetHeightUtil() {
   const pagePadding = 16
   let height = window.innerHeight - pagePadding
   const header = document.querySelector('.el-page-header')
@@ -129,29 +143,31 @@ export function resizeScrollTargetHeightUtil () {
   return height
 }
 
-
-export function  getUserMainDeptName (user) {
-let deptShowName = ''
-if (user && user.data) {
-  const userData = JSON.parse(user.data)
-  if (userData.mainDepartmentEnName && userData.mainDepartmentEnName !== '' && window['$locale'] && window['$locale'] !== 'cn') {
-    deptShowName = userData.mainDepartmentEnName
-  } else {
-    if (userData.mainDepartmentName && userData.mainDepartmentName !== '') {
-      deptShowName = userData.mainDepartmentName
+export function getUserMainDeptName(user) {
+  let deptShowName = ''
+  if (user && user.data) {
+    const userData = JSON.parse(user.data)
+    if (
+      userData.mainDepartmentEnName &&
+      userData.mainDepartmentEnName !== '' &&
+      window['$locale'] &&
+      window['$locale'] !== 'cn'
+    ) {
+      deptShowName = userData.mainDepartmentEnName
+    } else {
+      if (userData.mainDepartmentName && userData.mainDepartmentName !== '') {
+        deptShowName = userData.mainDepartmentName
+      }
     }
   }
-}
-return deptShowName
+  return deptShowName
 }
 
-
-
-export function  getDeptNamePath (dept) {
-let deptShowName = ''
-if (dept && dept.data) {
-  const deptData = JSON.parse(dept.data)
-  deptShowName = deptData.namePath
-}
-return deptShowName
+export function getDeptNamePath(dept) {
+  let deptShowName = ''
+  if (dept && dept.data) {
+    const deptData = JSON.parse(dept.data)
+    deptShowName = deptData.namePath
+  }
+  return deptShowName
 }

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

@@ -15,7 +15,7 @@
     row-key="uuid"
     style="width: 100%"
   >
-    <el-table-column :label="$t('workflowHistoryList.index')" align="left" width="80px">
+    <el-table-column :label="$t('workflowHistoryList.index')" align="center" width="80">
       <template v-slot="scope">
         {{ scope.$index + 1 }}
       </template>
@@ -35,13 +35,13 @@
         }}</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="120">
       <template v-slot="scope">
         <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="160">
       <template v-slot="scope">
         <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
         <span v-else>{{ scope.row.creator }}</span>
@@ -59,6 +59,28 @@
         <span v-else>{{ scope.row.formatCreatedTime }}</span>
       </template>
     </el-table-column>
+    <el-table-column :label="$t('workflowHistoryList.taskState')" align="left" width="100">
+      <template v-slot="scope">
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
+        <el-tag v-else-if="scope.row.current" type="warning">{{$t('workflowHistoryList.taskStateDoing')}}</el-tag>
+        <el-tag v-else type="success">{{$t('workflowHistoryList.taskStateDone')}}</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('workflowHistoryList.processingDuration')" align="center" width="120">
+      <template v-slot="scope">
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
+        <span v-else-if="!scope.row.copyTask">{{ scope.row.processingDuration }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('workflowHistoryList.isOverdue')" align="center" width="100">
+      <template v-slot="scope">
+        <span v-if="scope.row.historyType && scope.row.historyType === 'PROCESS_END'" />
+        <span v-else>
+          <div v-if="scope.row.overdueDuration && scope.row.overdueDuration > 0" class="red-circle"/>
+          <div v-else class="green-circle"/>
+        </span>
+      </template>
+    </el-table-column>
     <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'" />
@@ -286,3 +308,19 @@ export default {
   }
 }
 </script>
+<style scoped>
+.red-circle {
+  width: 20px;         /* 圆圈的宽度 */
+  height: 20px;        /* 圆圈的高度 */
+  background-color: red; /* 背景色设置为红色 */
+  border-radius: 50%;   /* 边框半径设置为50%，使元素变为圆形 */
+  display: inline-block; /* 确保元素以块级元素显示 */
+}
+.green-circle {
+  width: 20px;         /* 圆圈的宽度 */
+  height: 20px;        /* 圆圈的高度 */
+  background-color: rgb(11, 177, 121); /* 背景色设置为红色 */
+  border-radius: 50%;   /* 边框半径设置为50%，使元素变为圆形 */
+  display: inline-block; /* 确保元素以块级元素显示 */
+}
+</style>