办件中心样式优化

client/src/api/oa/workflow/index.ts

@@ -160,16 +160,55 @@ export const isVoid = async (data: { flowInstanceId: string }) => {
   )
 }
 
+//办件中心“作废”操作
+export const saveINullyApply = async (data: {
+  nullyApply: {
+    id: string
+    nullyApplyUserId: string
+    flowInstanceId: string
+    voidFlowInstanceId: string
+    iNullied: string
+    voidFlowCode: string
+    voidFlowDesc: string
+    voidFlowName: string
+    nullyApplyTime: string
+    nullyReason: string
+  }
+}) => {
+  const keys = Object.keys(data)
+  const formData = new FormData()
+  keys.forEach((key) => {
+    if (data[key] instanceof Object) {
+      formData.append(key, JSON.stringify(data[key]))
+    } else {
+      formData.append(key, data[key])
+    }
+  })
+  return await request.postOriginal(
+    {
+      url: '/INullyApply/save',
+      data: data,
+      headersType: 'application/form-data'
+    },
+    '/workflow'
+  )
+}
+
 //公共待办件提示
 export const openOfficeTip = async (data: {
   activityInsId: string
   particiPantId: string
-  isView: true
+  isView: boolean
 }) => {
+  const keys = Object.keys(data)
+  const formData = new FormData()
+  keys.forEach((key) => {
+    formData.append(key, data[key])
+  })
   return await request.postOriginal(
     {
       url: '/HandlerCaseCenter/openOfficeTip',
-      data: data,
+      data: formData,
       headersType: 'application/form-data'
     },
     '/workflow'

client/src/views/OaSystem/oaLayout/menus.vue

@@ -305,7 +305,8 @@ onMounted(() => {
   .menus-tabs {
     width: 100%;
     height: calc(100% - 250px);
-
+    overflow-x: hidden;
+    overflow-y: auto;
     .menuDiv {
       position: relative;
 

client/src/views/OaSystem/officeCenter/mainOfficeCenter/common.ts

@@ -8,28 +8,26 @@ export const TabColumns = {
       frozen: true,
       fixed: true
     },
-    { label: '业务编号', align: 'center', name: 'CODE', width: 250, fixed: true },
+    { label: '业务编号', align: 'center', name: 'CODE', width: 250 },
     {
       label: '环节状态',
       align: 'center',
       name: 'statusVal',
-      width: 90,
-      fixed: true
+      width: 90
     },
     {
       label: '流程描述',
       align: 'left',
       name: 'DESCRIBTION',
-      minwidth: 600
+      width: 600
     },
-    { label: '流程名称', align: 'left', name: 'NAME', width: 130, fixed: true },
-    { label: '办理环节', align: 'center', name: 'ACTIVITYNAME', width: 160, fixed: true },
+    { label: '流程名称', align: 'left', name: 'NAME', width: 130 },
+    { label: '办理环节', align: 'center', name: 'ACTIVITYNAME', width: 160 },
     {
       label: '接件时间',
       align: 'center',
       name: 'RECEIVE_TIME',
-      width: 160,
-      fixed: true
+      width: 160
     }
   ],
   //已完成
@@ -37,34 +35,32 @@ export const TabColumns = {
     {
       label: '操作',
       name: 'action',
-      width: 138,
+      width: 200,
       frozen: true,
       fixed: true
     },
-    { label: '业务编号', align: 'center', name: 'CODE', width: 250, fixed: true },
+    { label: '业务编号', align: 'center', name: 'CODE', width: 200 },
     {
       label: '环节完成情况',
       align: 'center',
       name: 'statusVal',
-      width: 90,
-      fixed: true
+      width: 150
     },
     {
       label: '流程描述',
       align: 'left',
       name: 'DESCRIBTION',
-      minwidth: 600
+      width: 600
     },
-    { label: '流程名称', align: 'left', name: 'NAME', width: 130, fixed: true },
-    { label: '完成环节', align: 'center', name: 'ACTIVITYNAME', width: 160, fixed: true },
+    { label: '流程名称', align: 'left', name: 'NAME', width: 130 },
+    { label: '完成环节', align: 'center', name: 'ACTIVITYNAME', width: 160 },
     {
       label: '完成时间',
       align: 'center',
       name: 'FINISH_TIME',
-      width: 160,
-      fixed: true
+      width: 160
     },
-    { label: '当前在办环节', align: 'center', name: 'currentActivityVal', width: 180, fixed: true }
+    { label: '当前在办环节', align: 'center', name: 'currentActivityVal', width: 200 }
   ],
   //已退回
   '40': [
@@ -75,23 +71,23 @@ export const TabColumns = {
       frozen: true,
       fixed: true
     },
-    { label: '业务编号', align: 'center', name: 'CODE', width: 250, fixed: true },
+    { label: '业务编号', align: 'center', name: 'CODE', width: 250 },
     {
       label: '退至环节完成情况',
       align: 'center',
       name: 'statusVal',
-      width: 90,
+      width: 160,
       fixed: true
     },
     {
       label: '流程描述',
       align: 'left',
       name: 'DESCRIBTION',
-      minwidth: 600
+      width: 600
     },
-    { label: '流程名称', align: 'left', name: 'NAME', width: 130, fixed: true },
-    { label: '被退环节', align: 'center', name: 'BACTIVITYNAME', width: 160, fixed: true },
-    { label: '退至环节', align: 'center', name: 'ACTIVITYNAME', width: 160, fixed: true },
+    { label: '流程名称', align: 'left', name: 'NAME', width: 130 },
+    { label: '被退环节', align: 'center', name: 'BACTIVITYNAME', width: 160 },
+    { label: '退至环节', align: 'center', name: 'ACTIVITYNAME', width: 160 },
     {
       label: '退回时间',
       align: 'center',
@@ -105,7 +101,7 @@ export const TabColumns = {
     {
       label: '操作',
       name: 'action',
-      width: 138,
+      width: 228,
       frozen: true,
       fixed: true
     },
@@ -116,15 +112,15 @@ export const TabColumns = {
       width: 250,
       fixed: true
     },
-    { label: '业务编号', align: 'center', name: 'flowCode', width: 250, fixed: true },
+    { label: '业务编号', align: 'center', name: 'flowCode', width: 250 },
     {
       label: '流程描述',
       align: 'left',
       name: 'DESCRIBTION',
-      minwidth: 600
+      width: 600
     },
-    { label: '流程名称', align: 'left', name: 'flowName', width: 130, fixed: true },
-    { label: '挂起时间', align: 'center', name: 'hangUpTime', width: 160, fixed: true },
+    { label: '流程名称', align: 'left', name: 'flowName', width: 130 },
+    { label: '挂起时间', align: 'center', name: 'hangUpTime', width: 160 },
     {
       label: '解挂后截止时间',
       align: 'center',
@@ -138,24 +134,24 @@ export const TabColumns = {
     {
       label: '操作',
       name: 'action',
-      width: 138,
+      width: 320,
       frozen: true,
       fixed: true
     },
-    { label: '作废人', align: 'center', name: 'nullyUserName', width: 250, fixed: true },
-    { label: '业务编号', align: 'center', name: 'flowCode', width: 250, fixed: true },
+    { label: '作废人', align: 'center', name: 'nullyUserName', width: 200 },
+    { label: '业务编号', align: 'center', name: 'flowCode', width: 250 },
     {
       label: '流程描述',
       align: 'left',
       name: 'DESCRIBTION',
-      minwidth: 600
+      width: 600
     },
-    { label: '流程名称', align: 'left', name: 'flowName', width: 130, fixed: true },
+    { label: '流程名称', align: 'left', name: 'flowName', width: 130 },
     {
       label: '作废时间',
       align: 'center',
       name: 'nullyTime',
-      width: 160,
+      width: 180,
       fixed: true
     }
   ]

client/src/views/OaSystem/officeCenter/mainOfficeCenter/index.scss

@@ -0,0 +1,102 @@
+
+.flowTemplateBox {
+  white-space: nowrap;
+  padding: 20px;
+  > li {
+    display: inline-block;
+    vertical-align: top;
+    &:not(:first-child) {
+      margin-left: 50px;
+    }
+    > .title {
+      font-weight: bold;
+      font-size: 17px;
+      margin: 0px;
+      color: #333;
+      margin-bottom: 15px;
+      display: block;
+    }
+    > ul {
+      > li {
+        padding: 8px 5px;
+        font-size: 14px;
+        border-radius: 3px;
+        cursor: pointer;
+        color: #333;
+      }
+    }
+  }
+}
+.mainOfficeCenter {
+  background-color: #fff;
+  padding: 15px;
+  width: 100%;
+  height: 100%;
+  > .header {
+    display: flex;
+    position: relative;
+    margin-bottom: 15px;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      border-bottom: 1px solid #dee0e3;
+      bottom: 1px;
+    }
+    :deep(.el-form-item--default) {
+      margin-bottom: 0px;
+    }
+    > .tabs {
+      margin: 0px 10px;
+      > li {
+        display: inline-block;
+        padding: 0px 20px;
+        height: 38px;
+        line-height: 32px;
+        color: #626b70;
+        border-top: 2px;
+        font-size: 15px;
+        cursor: pointer;
+        &.active {
+          border-top: 2px solid #2e77e6;
+          border-left: 1px solid #dee0e3;
+          border-right: 1px solid #dee0e3;
+          color: #2e77e6;
+          position: relative;
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            left: 0px;
+            right: 0px;
+            height: 2px;
+            bottom: -1px;
+            background-color: #fff;
+            z-index: 9999999;
+          }
+        }
+      }
+    }
+  }
+  > .table_box {
+    width: 100%;
+    height: calc(100% - 64px);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    > .table {
+      display: block;
+      width: 100%;
+      flex-grow: 1;
+      position: relative;
+    }
+    > .pageBox {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}

client/src/views/OaSystem/officeCenter/mainOfficeCenter/index.vue

@@ -65,8 +65,7 @@
       <div class="table" ref="tableRef">
         <el-table
           :data="tableData"
-          style="width: 100%; height: 100%"
-          :style="{ height: tableHeight + 'px' }"
+          :style="{ width: '100%', height: tableHeight + 'px' }"
           stripe
           :header-cell-style="{
             background: '#E5F0FB',
@@ -80,20 +79,28 @@
             :key="index"
             :label="item['label']"
             :prop="item['name']"
+            :width="item['width']"
+            :fixed="item['fixed']"
           >
             <template v-if="item['name'] === 'statusVal'" #default="scope">
               <span v-html="scope.row[item['name']]"></span>
             </template>
             <template v-else-if="item['name'] === 'action'" #default="scope">
               <template v-if="currentTab === '1'">
-                <el-dropdown split-button type="primary">
+                <el-dropdown
+                  split-button
+                  type="primary"
+                  @click="flowApplyHandle(scope.row)"
+                  @command="commandHandle"
+                >
                   办理
                   <template #dropdown>
                     <el-dropdown-menu>
                       <el-dropdown-item
                         v-for="(bItem, bIndex) in scope.row.btnArrJson"
                         :key="bIndex"
-                        :disabled="!bItem['isEnable']"
+                        :disabled="!bItem['iEnable']"
+                        :command="bItem['value']"
                         >{{ bItem['value'] }}</el-dropdown-item
                       >
                     </el-dropdown-menu>
@@ -174,6 +181,7 @@ import {
   addIHangUp,
   addINullyApply,
   completelyVoidINullyApply,
+  saveINullyApply,
   openOfficeTip,
   saveAndGetUrl
 } from '@/api/oa/workflow'
@@ -194,7 +202,7 @@ const pageParam = reactive<{
 })
 const sendData = {
   _search: false,
-  status: 90,
+  status: 1,
   flowTemIds: [],
   searchVal: '',
   isMobile: false,
@@ -216,9 +224,7 @@ const queryHandlerCaseCenterList = () => {
   getHandlerCaseCenterList(formData).then((result: any) => {
     if (result.rows && result.rows.length > 0) {
       result.rows.forEach((item) => {
-        if (item['btnArrJson']) {
-          item['btnArrJson'] = JSON.parse(item['btnArrJson'])
-        }
+        item['btnArrJson'] = item['btnArrJson'] ? JSON.parse(item['btnArrJson']) : []
       })
     }
     tableData.value = result.rows
@@ -275,15 +281,16 @@ const queryHandlerCaseCenterCount = () => {
   getHandlerCaseCenterCount(formData).then((result) => {
     tabList[0]['value'] = result['NORMAL']
     tabList[1]['value'] = result['FINISH']
-    tabList[2]['value'] = result['OBSOLETE']
+    tabList[2]['value'] = result['CALLBACK']
     tabList[3]['value'] = result['HANG_UP']
-    tabList[4]['value'] = result['CALLBACK']
+    tabList[4]['value'] = result['OBSOLETE']
   })
 }
 queryHandlerCaseCenterCount()
 //切换tab流程状态选项卡
 const switchTabHandle = (item) => {
   currentTab.value = item['key']
+  currentColumn.value = TabColumns[currentTab.value]
   queryFlowTemplateTreeDataByUser(item['key'])
   sendData['status'] = item['key']
   pageParam['pageNo'] = 1
@@ -337,6 +344,49 @@ const searchForm = ref({
 const searchHandle = () => {
   handleCurrentChange(1)
 }
+/**
+ * 流程办理
+ */
+const flowApplyHandle = (item) => {
+  const saveAndGetUrlReqParam = {
+    activityInsId: item['ACTIVITYINSID'],
+    flowInsId: item['FLOWINSID'],
+    particiPantId: item['PARTICIPANTID'],
+    status: item['STATUS'],
+    userId: '',
+    isView: false
+  }
+  openOfficeTip({
+    activityInsId: item['ACTIVITYINSID'],
+    particiPantId: item['PARTICIPANTID'],
+    isView: false
+  }).then((res: any) => {
+    saveAndGetUrl(saveAndGetUrlReqParam).then((result: any) => {
+      const officeUrl = result.officeUrl
+      openFlow(router, officeUrl, '流程办理')
+    })
+  })
+}
+const commandHandle = (item) => {
+  console.log(item)
+  return
+  saveINullyApply({
+    id: '',
+    nullyApplyUserId: '91507848-736f-4327-887e-22aec122d5c7',
+    flowInstanceId: '0191021ed6a800011ab09091724c091b',
+    voidFlowInstanceId: '0191020bbc9c00011ab09091724c0912',
+    iNullied: '10',
+    voidFlowCode: 'LX2024070011',
+    voidFlowDesc: '',
+    voidFlowName: '立项申请',
+    nullyApplyTime: '2024-07-30',
+    nullyReason: ''
+  })
+}
+/**
+ * 待办组合操作：退回、挂起、作废
+ */
+const flowOperateGroup = () => {}
 /***
  * 双击查看流程详情
  */
@@ -356,7 +406,7 @@ const lookHandle = (item: any) => {
     flowInsId: item['FLOWINSID'],
     particiPantId: item['PARTICIPANTID'],
     status: item['STATUS'],
-    userId: null,
+    userId: '',
     isView: true
   }
   //非待办件、委托直接打开
@@ -454,99 +504,5 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.flowTemplateBox {
-  white-space: nowrap;
-  padding: 20px;
-  > li {
-    display: inline-block;
-    vertical-align: top;
-    &:not(:first-child) {
-      margin-left: 50px;
-    }
-    > .title {
-      font-weight: bold;
-      font-size: 17px;
-      margin: 0px;
-      color: #333;
-      margin-bottom: 15px;
-      display: block;
-    }
-    > ul {
-      > li {
-        padding: 8px 5px;
-        font-size: 14px;
-        border-radius: 3px;
-        cursor: pointer;
-        color: #333;
-      }
-    }
-  }
-}
-.mainOfficeCenter {
-  background-color: #fff;
-  padding: 15px;
-  height: 100%;
-  > .header {
-    display: flex;
-    position: relative;
-    margin-bottom: 15px;
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 0px;
-      right: 0px;
-      border-bottom: 1px solid #dee0e3;
-      bottom: 1px;
-    }
-    :deep(.el-form-item--default) {
-      margin-bottom: 0px;
-    }
-    > .tabs {
-      margin: 0px 10px;
-      > li {
-        display: inline-block;
-        padding: 0px 20px;
-        height: 38px;
-        line-height: 32px;
-        color: #626b70;
-        border-top: 2px;
-        font-size: 15px;
-        cursor: pointer;
-        &.active {
-          border-top: 2px solid #2e77e6;
-          border-left: 1px solid #dee0e3;
-          border-right: 1px solid #dee0e3;
-          color: #2e77e6;
-          position: relative;
-          &::after {
-            content: '';
-            display: block;
-            position: absolute;
-            width: 100%;
-            left: 0px;
-            right: 0px;
-            height: 2px;
-            bottom: -1px;
-            background-color: #fff;
-            z-index: 9999999;
-          }
-        }
-      }
-    }
-  }
-  > .table_box {
-    height: calc(100% - 64px);
-    display: flex;
-    flex-direction: column;
-    > .table {
-      flex-grow: 1;
-    }
-    > .pageBox {
-      margin-top: 20px;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-}
+@import './index.scss';
 </style>