【优化】BPM 界面优化：工作流程/审批中心/我的流程

src/views/bpm/processInstance/index.vue

@@ -10,7 +10,7 @@
       :inline="true"
       :inline="true"
       label-width="68px"
       label-width="68px"
     >
     >
-      <el-form-item label="流程名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
         <el-input
           v-model="queryParams.name"
           v-model="queryParams.name"
           placeholder="请输入流程名称"
           placeholder="请输入流程名称"
@@ -19,21 +19,56 @@
           class="!w-240px"
           class="!w-240px"
         />
         />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="所属流程" prop="processDefinitionKey">
-        <el-input
-          v-model="queryParams.processDefinitionKey"
-          placeholder="请输入流程定义的标识"
+      
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          v-hasPermi="['bpm:process-instance:query']"
+          @click="handleCreate(undefined)"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+        </el-button>
+      </el-form-item>
+
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+          <el-select
+            v-model="queryParams.category"
+            placeholder="请选择流程分类"
             clearable
             clearable
-          @keyup.enter="handleQuery"
             class="!w-240px"
             class="!w-240px"
+          >
+            <el-option
+              v-for="category in categoryList"
+              :key="category.code"
+              :label="category.name"
+              :value="category.code"
             />
             />
+          </el-select>
       </el-form-item>
       </el-form-item>
-      <el-form-item label="流程分类" prop="category">
+
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+      <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List" >
+        高级筛选
+      </el-button>
+
+      <el-popover
+        ref="popoverRef"
+        trigger="click"
+        virtual-triggering
+        persistent
+        :width="400"
+        :show-arrow="false"
+        placement="bottom-end"
+      >
+        <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">   
           <el-select
           <el-select
             v-model="queryParams.category"
             v-model="queryParams.category"
-          placeholder="请选择流程分类"
+            placeholder="请选择流程发起人"
             clearable
             clearable
-          class="!w-240px"
+            class="!w-390px"
           >
           >
             <el-option
             <el-option
               v-for="category in categoryList"
               v-for="category in categoryList"
@@ -43,12 +78,22 @@
             />
             />
           </el-select>
           </el-select>
         </el-form-item>
         </el-form-item>
-      <el-form-item label="流程状态" prop="status">
+        <el-form-item label="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey">
+        <el-input
+          v-model="queryParams.processDefinitionKey"
+          placeholder="请输入流程定义的标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-390px"
+        />
+        </el-form-item>
+        
+        <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
           <el-select
           <el-select
             v-model="queryParams.status"
             v-model="queryParams.status"
             placeholder="请选择流程状态"
             placeholder="请选择流程状态"
             clearable
             clearable
-          class="!w-240px"
+            class="!w-390px"
           >
           >
             <el-option
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
               v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
@@ -58,7 +103,7 @@
             />
             />
           </el-select>
           </el-select>
         </el-form-item>
         </el-form-item>
-      <el-form-item label="发起时间" prop="createTime">
+        <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
           <el-date-picker
           <el-date-picker
             v-model="queryParams.createTime"
             v-model="queryParams.createTime"
             value-format="YYYY-MM-DD HH:mm:ss"
             value-format="YYYY-MM-DD HH:mm:ss"
@@ -69,18 +114,9 @@
             class="!w-240px"
             class="!w-240px"
           />
           />
         </el-form-item>
         </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          v-hasPermi="['bpm:process-instance:query']"
-          @click="handleCreate(undefined)"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
-        </el-button>
+      </el-popover>
       </el-form-item>
       </el-form-item>
+
     </el-form>
     </el-form>
   </ContentWrap>
   </ContentWrap>
 
 
@@ -114,7 +150,7 @@
         width="180"
         width="180"
         :formatter="dateFormatter"
         :formatter="dateFormatter"
       />
       />
-      <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
+      <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
         <template #default="scope">
         <template #default="scope">
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
         </template>
         </template>
@@ -126,7 +162,7 @@
           </el-button>
           </el-button>
         </template>
         </template>
       </el-table-column>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
+      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />-->
       <el-table-column label="操作" align="center" fixed="right" width="180">
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
         <template #default="scope">
           <el-button
           <el-button
@@ -162,6 +198,7 @@
   </ContentWrap>
   </ContentWrap>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
+import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import { ElMessageBox } from 'element-plus'
@@ -270,4 +307,17 @@ onMounted(async () => {
   await getList()
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 })
+
+import { ref, unref } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
 </script>
 </script>
+<style>
+.bold-label .el-form-item__label {
+  font-weight: bold; /* 将字体加粗 */
+}
+</style>
\ No newline at end of file