From 7d29c6319fcbd0c062e917d6a954301759282dc8 Mon Sep 17 00:00:00 2001
From: tuituji111 <tuituji111@163.com>
Date: Sat, 9 Nov 2024 18:47:42 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91BPM=20?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=EF=BC=9A=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B/=E5=AE=A1=E6=89=B9=E4=B8=AD=E5=BF=83/?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/index.vue | 156 ++++++++++++++++--------
 1 file changed, 103 insertions(+), 53 deletions(-)

diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index f3b7439b..f57d159c 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -10,7 +10,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="流程名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入流程名称"
@@ -19,56 +19,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="所属流程" prop="processDefinitionKey">
-        <el-input
-          v-model="queryParams.processDefinitionKey"
-          placeholder="请输入流程定义的标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          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 label="流程状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择流程状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="发起时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </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>
@@ -81,6 +32,91 @@
           <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
+            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 :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
+            v-model="queryParams.category"
+            placeholder="请选择流程发起人"
+            clearable
+            class="!w-390px"
+          >
+            <el-option
+              v-for="category in categoryList"
+              :key="category.code"
+              :label="category.name"
+              :value="category.code"
+            />
+          </el-select>
+        </el-form-item>
+        <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
+            v-model="queryParams.status"
+            placeholder="请选择流程状态"
+            clearable
+            class="!w-390px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+      </el-popover>
+      </el-form-item>
+
     </el-form>
   </ContentWrap>
 
@@ -114,7 +150,7 @@
         width="180"
         :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">
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
         </template>
@@ -126,7 +162,7 @@
           </el-button>
         </template>
       </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">
         <template #default="scope">
           <el-button
@@ -162,6 +198,7 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
+import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
@@ -270,4 +307,17 @@ onMounted(async () => {
   await getList()
   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>
+<style>
+.bold-label .el-form-item__label {
+  font-weight: bold; /* 将字体加粗 */
+}
+</style>
\ No newline at end of file

From 4ba5dad22e9def9a81c72d1e92239d89d87ea802 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 9 Nov 2024 21:36:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=88=91?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E7=9A=84=E5=AE=A1=E6=89=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/index.vue | 208 ++++++++++++------------
 1 file changed, 105 insertions(+), 103 deletions(-)

diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index f57d159c..48dfb58c 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -19,104 +19,102 @@
           class="!w-240px"
         />
       </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-form-item>
 
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
       <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
-          <el-select
-            v-model="queryParams.category"
-            placeholder="请选择流程分类"
-            clearable
-            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 :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
-            v-model="queryParams.category"
-            placeholder="请选择流程发起人"
-            clearable
-            class="!w-390px"
-          >
-            <el-option
-              v-for="category in categoryList"
-              :key="category.code"
-              :label="category.name"
-              :value="category.code"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey">
-        <el-input
-          v-model="queryParams.processDefinitionKey"
-          placeholder="请输入流程定义的标识"
+        <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 -->
+        <el-select
+          v-model="queryParams.category"
+          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
-            v-model="queryParams.status"
-            placeholder="请选择流程状态"
-            clearable
-            class="!w-390px"
-          >
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
-          <el-date-picker
-            v-model="queryParams.createTime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            type="daterange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-240px"
+          class="!w-155px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
           />
-        </el-form-item>
-      </el-popover>
+        </el-select>
       </el-form-item>
 
+      <!-- 高级筛选 -->
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <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
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.code"
+                :label="category.name"
+                :value="category.code"
+              />
+            </el-select>
+          </el-form-item>
+          <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
+              v-model="queryParams.status"
+              placeholder="请选择流程状态"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-240px"
+            />
+          </el-form-item>
+        </el-popover>
+        <!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 -->
+      </el-form-item>
     </el-form>
   </ContentWrap>
 
@@ -131,6 +129,8 @@
         min-width="100"
         fixed="left"
       />
+      <!-- TODO @芋艿：摘要 -->
+      <!-- TODO @tuituji：流程状态。可见需求文档里  -->
       <el-table-column label="流程状态" prop="status" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -162,7 +162,7 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />-->
+      -->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -198,12 +198,13 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。
+import { List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import { ProcessInstanceVO } from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
 
@@ -226,7 +227,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -297,6 +298,15 @@ const handleCancel = async (row) => {
   await getList()
 }
 
+// TODO @tuituji：这个 import 是不是没用哈？
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+// TODO @tuituji：onClickAdvancedSearch。方法名叫这个，会更好一些哇？打开高级搜索。
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
+
 /** 激活时 **/
 onActivated(() => {
   getList()
@@ -307,17 +317,9 @@ onMounted(async () => {
   await getList()
   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>
 <style>
 .bold-label .el-form-item__label {
   font-weight: bold; /* 将字体加粗 */
 }
-</style>
\ No newline at end of file
+</style>