style：审核流管理模块功能页面布局页面调整

smsb-plus-ui/src/components/UserSelect/index.vue

@@ -4,7 +4,7 @@
       <el-row :gutter="20">
         <!-- 部门树 -->
         <el-col :lg="4" :xs="24" style="">
-          <el-card shadow="hover">
+          <el-card shadow="hover" style="height: 65vh">
             <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
             <el-tree
               ref="deptTreeRef"
@@ -22,7 +22,7 @@
         </el-col>
         <el-col :lg="20" :xs="24">
           <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-            <div v-show="showSearch" class="mb-[10px]">
+            <div v-show="showSearch" class="mb-[10px]" style="height: 60px">
               <el-card shadow="hover">
                 <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                   <el-form-item label="用户名称" prop="userName">
@@ -40,7 +40,7 @@
             </div>
           </transition>
 
-          <el-card shadow="hover">
+          <el-card shadow="hover" style="height: 58vh">
             <template v-if="prop.multiple" #header>
               <el-tag v-for="user in selectUserList" :key="user.userId" closable style="margin: 2px" @close="handleCloseTag(user)">
                 {{ user.userName }}

smsb-plus-ui/src/views/workflow/category/index.vue

@@ -1,34 +1,30 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="search">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-          <el-form-item label="分类名称" prop="categoryName">
-            <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item label="分类编码" prop="categoryCode">
-            <el-input v-model="queryParams.categoryCode" placeholder="请输入分类编码" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
+            <el-form-item label="分类名称" prop="categoryName">
+              <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery"/>
+            </el-form-item>
+            <el-form-item label="分类编码" prop="categoryCode">
+              <el-input v-model="queryParams.categoryCode" placeholder="请输入分类编码" clearable @keyup.enter="handleQuery"/>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              <el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+                新增
+              </el-button>
+              <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
       </div>
     </transition>
 
     <el-card shadow="never">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
       <el-table
         ref="categoryTableRef"
         v-loading="loading"
@@ -37,46 +33,59 @@
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <el-table-column label="分类名称" prop="categoryName" />
+        <el-table-column label="分类名称" align="left" prop="categoryName" />
         <el-table-column label="分类编码" align="center" prop="categoryCode" />
         <el-table-column label="排序" align="center" prop="sortNum" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
+              <el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
             </el-tooltip>
             <el-tooltip content="新增" placement="top">
-              <el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
+              <el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" >新增</el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
+              <el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" >删除</el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
     <!-- 添加或修改流程分类对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
       <el-form ref="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父级分类" prop="parentId">
-          <el-tree-select
-            v-model="form.parentId"
-            :data="categoryOptions"
-            :props="{ value: 'id', label: 'categoryName', children: 'children' }"
-            value-key="id"
-            placeholder="请选择父级id"
-            check-strictly
-          />
-        </el-form-item>
-        <el-form-item label="分类名称" prop="categoryName">
-          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="分类编码" prop="categoryCode">
-          <el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sortNum">
-          <el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" />
-        </el-form-item>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="父级分类" prop="parentId">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="categoryOptions"
+                :props="{ value: 'id', label: 'categoryName', children: 'children' }"
+                value-key="id"
+                placeholder="请选择父级id"
+                check-strictly
+                :default-expand-all="isExpandAll"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="排序" prop="sortNum">
+              <el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="分类名称" prop="categoryName">
+              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="分类编码" prop="categoryCode">
+              <el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -89,8 +98,8 @@
 </template>
 
 <script setup name="Category" lang="ts">
-import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
-import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
+import {addCategory, delCategory, getCategory, listCategory, updateCategory} from '@/api/workflow/category';
+import {CategoryForm, CategoryQuery, CategoryVO} from '@/api/workflow/category/types';
 
 type CategoryOption = {
   id: number;
@@ -98,7 +107,7 @@ type CategoryOption = {
   children?: CategoryOption[];
 };
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 
 const categoryList = ref<CategoryVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
@@ -188,7 +197,7 @@ const resetQuery = () => {
 /** 新增按钮操作 */
 const handleAdd = (row?: CategoryVO) => {
   dialog.visible = true;
-  dialog.title = '添加流程分类';
+  dialog.title = '添加';
   nextTick(() => {
     reset();
     getTreeselect();
@@ -218,7 +227,7 @@ const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
 const handleUpdate = (row: CategoryVO) => {
   loading.value = true;
   dialog.visible = true;
-  dialog.title = '修改流程分类';
+  dialog.title = '修改';
   nextTick(async () => {
     reset();
     await getTreeselect();
@@ -250,7 +259,7 @@ const submitForm = () => {
 
 /** 删除按钮操作 */
 const handleDelete = async (row: CategoryVO) => {
-  await proxy?.$modal.confirm('是否确认删除流程分类编号为"' + row.id + '"的数据项？');
+  await proxy?.$modal.confirm('是否确认删除已选择的数据项？');
   loading.value = true;
   await delCategory(row.id).finally(() => (loading.value = false));
   await getList();

smsb-plus-ui/src/views/workflow/formManage/index.vue

@@ -1,68 +1,55 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="search">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-          <el-form-item label="表单名称" prop="formName">
-            <el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="表单名称" prop="formName">
+              <el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable @keyup.enter="handleQuery"/>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              <el-button v-hasPermi="['workflow:formManage:add']" type="primary" plain icon="Plus" @click="handleAdd">
+                新增
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
       </div>
     </transition>
 
     <el-card shadow="never">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['workflow:formManage:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['workflow:formManage:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-              >修改</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['workflow:formManage:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-              >删除</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['workflow:formManage:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" :data="formManageList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="表单名称" align="center" prop="formName" />
-        <el-table-column label="表单类型" align="center">
-          <template #default="scope">
-            <dict-tag :options="wf_form_type" :value="scope.row.formType"></dict-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="地址" align="center" prop="router" />
-        <el-table-column label="备注" align="center" prop="remark" />
+      <div class="table-content">
+        <el-table v-loading="loading" :data="formManageList" @selection-change="handleSelectionChange">
+          <el-table-column label="表单名称" align="center" prop="formName"/>
+          <el-table-column label="表单类型" align="center">
+            <template #default="scope">
+              <dict-tag :options="wf_form_type" :value="scope.row.formType"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="地址" align="center" prop="router"/>
+          <el-table-column label="备注" align="center" prop="remark"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['workflow:formManage:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+              <el-button v-hasPermi="['workflow:formManage:edit']" link type="primary" icon="Edit"
+                         @click="handleUpdate(scope.row)">修改</el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['workflow:formManage:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+              <el-button v-hasPermi="['workflow:formManage:remove']" link type="primary" icon="Delete"
+                         @click="handleDelete(scope.row)">删除</el-button>
             </el-tooltip>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
+      </div>
 
       <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改表单管理对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
       <el-form ref="formManageFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="表单名称" prop="formName">
           <el-input v-model="form.formName" placeholder="请输入表单名称" />
@@ -83,7 +70,7 @@
           </el-input>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="form.remark" :rows=3 type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -97,10 +84,11 @@
 </template>
 
 <script setup name="FormManage" lang="ts">
-import { listFormManage, getFormManage, delFormManage, addFormManage, updateFormManage } from '@/api/workflow/formManage';
-import { FormManageVO, FormManageQuery, FormManageForm } from '@/api/workflow/formManage/types';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wf_form_type } = toRefs<any>(proxy?.useDict('wf_form_type'));
+import {addFormManage, delFormManage, getFormManage, listFormManage, updateFormManage} from '@/api/workflow/formManage';
+import {FormManageForm, FormManageQuery, FormManageVO} from '@/api/workflow/formManage/types';
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {wf_form_type} = toRefs<any>(proxy?.useDict('wf_form_type'));
 
 const formManageList = ref<FormManageVO[]>([]);
 const buttonLoading = ref(false);

smsb-plus-ui/src/views/workflow/model/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-2">
-    <el-row :gutter="20">
+    <el-row>
       <!-- 流程分类树 -->
       <el-col :lg="4" :xs="24" style="">
-        <el-card shadow="hover">
-          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+        <el-card shadow="hover" style="height: 90vh;margin-top: 10px">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable/>
           <el-tree
             ref="categoryTreeRef"
             class="mt-2"
@@ -22,53 +22,40 @@
       <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[10px]">
-            <el-card shadow="hover">
+            <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
               <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
                 <el-form-item label="模型名称" prop="name">
-                  <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery"/>
                 </el-form-item>
-                <el-form-item label="模型KEY" prop="key">
-                  <el-input v-model="queryParams.key" placeholder="请输入模型KEY" clearable @keyup.enter="handleQuery" />
+                <el-form-item label="KEY" prop="key">
+                  <el-input v-model="queryParams.key" placeholder="请输入模型KEY" clearable @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                   <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
                 </el-form-item>
               </el-form>
             </el-card>
           </div>
         </transition>
-        <el-card shadow="hover">
-          <template #header>
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="primary" plain :disabled="multiple" icon="Download" @click="clickExportZip()">导出</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-            </el-row>
-          </template>
-
-          <el-table v-loading="loading" border :data="modelList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column fixed align="center" type="index" label="序号" width="80"></el-table-column>
-            <el-table-column align="center" :show-overflow-tooltip="true" prop="name" label="模型名称" width="200"></el-table-column>
-            <el-table-column align="center" prop="key" label="模型KEY"></el-table-column>
-            <el-table-column align="center" prop="version" label="版本号" width="90">
-              <template #default="scope"> v{{ scope.row.version }}.0</template>
-            </el-table-column>
-            <el-table-column align="center" prop="metaInfo" label="备注说明" min-width="130"></el-table-column>
-            <el-table-column align="center" :show-overflow-tooltip="true" prop="createTime" label="创建时间" width="160"></el-table-column>
-            <el-table-column align="center" :show-overflow-tooltip="true" prop="lastUpdateTime" label="更新时间" width="160"></el-table-column>
-            <el-table-column fixed="right" label="操作" align="center" width="170" class-name="small-padding fixed-width">
+        <el-card shadow="hover" style="border: none">
+          <div class="table-content" style="height: 72vh;">
+            <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
+              <el-table-column fixed align="center" type="index" label="序号" width="80"></el-table-column>
+              <el-table-column align="left" :show-overflow-tooltip="true" prop="name" label="模型名称"
+                               width="200"></el-table-column>
+              <el-table-column align="left" prop="key" label="模型KEY"></el-table-column>
+              <el-table-column align="left" prop="version" label="版本号" width="90">
+                <template #default="scope"> v{{ scope.row.version }}.0</template>
+              </el-table-column>
+              <el-table-column align="left" prop="metaInfo" label="备注说明" min-width="130"></el-table-column>
+              <el-table-column align="left" :show-overflow-tooltip="true" prop="createTime" label="创建时间"
+                               width="160"></el-table-column>
+              <el-table-column align="left" :show-overflow-tooltip="true" prop="lastUpdateTime" label="更新时间"
+                               width="160"></el-table-column>
+              <el-table-column fixed="right" label="操作" align="center" width="180"
+                               class-name="small-padding fixed-width">
               <template #default="scope">
                 <el-row :gutter="10" class="mb8">
                   <el-col :span="1.5">
@@ -85,12 +72,15 @@
                     </el-button>
                   </el-col>
                   <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopy(scope.row)"> 复制模型 </el-button>
+                    <el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopy(scope.row)">
+                      复制模型
+                    </el-button>
                   </el-col>
                 </el-row>
               </template>
-            </el-table-column>
-          </el-table>
+              </el-table-column>
+            </el-table>
+          </div>
           <pagination
             v-show="total > 0"
             v-model:page="queryParams.pageNum"
@@ -105,14 +95,20 @@
     <Design ref="designRef" @close-call-back="handleQuery"></Design>
     <!-- 设计流程结束 -->
     <!-- 添加模型对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="850px" append-to-body :close-on-click-modal="false">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="模型名称：" prop="name">
-          <el-input v-model="form.name" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
-        </el-form-item>
-        <el-form-item label="模型KEY：" prop="key">
-          <el-input v-model="form.key" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="模型名称：" prop="name">
+              <el-input v-model="form.name" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="模型KEY：" prop="key">
+              <el-input v-model="form.key" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="流程分类" prop="categoryCode">
           <el-tree-select
             v-model="form.categoryCode"
@@ -121,10 +117,11 @@
             value-key="categoryCode"
             placeholder="请选择流程分类"
             check-strictly
+            :default-expand-all="true"
           />
         </el-form-item>
         <el-form-item label="备注：" prop="description">
-          <el-input v-model="form.description" type="textarea" maxlength="200" show-word-limit></el-input>
+          <el-input v-model="form.description" type="textarea" :rows="4" maxlength="200" show-word-limit></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -139,12 +136,11 @@
 
 <script lang="ts" setup name="Model">
 import Design from '../../../components/BpmnDesign/index.vue';
-import { listModel, addModel, delModel, modelDeploy, getInfo, update } from '@/api/workflow/model';
-import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types';
-import { listCategory } from '@/api/workflow/category';
-import { copyModel } from '@/api/workflow/model';
+import {addModel, copyModel, delModel, getInfo, listModel, modelDeploy, update} from '@/api/workflow/model';
+import {ModelForm, ModelQuery, ModelVO} from '@/api/workflow/model/types';
+import {listCategory} from '@/api/workflow/category';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 
 const formRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();

smsb-plus-ui/src/views/workflow/processDefinition/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-2">
-    <el-row :gutter="20">
+    <el-row>
       <!-- 流程分类树 -->
-      <el-col :lg="4" :xs="24" style="">
-        <el-card shadow="hover">
-          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+      <el-col :lg="4" :xs="24">
+        <el-card shadow="hover" style="height: 90vh;margin-top: 10px">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable/>
           <el-tree
             ref="categoryTreeRef"
             class="mt-2"
@@ -22,49 +22,43 @@
       <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[10px]">
-            <el-card shadow="hover">
+            <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
               <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
                 <el-form-item label="流程定义名称" prop="name">
-                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item label="流程定义KEY" prop="key">
-                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" clearable @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" clearable @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                   <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">部署流程文件</el-button>
                 </el-form-item>
               </el-form>
             </el-card>
           </div>
         </transition>
-        <el-card shadow="hover">
-          <template #header>
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">部署流程文件</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-            </el-row>
-          </template>
-
-          <el-table v-loading="loading" border :data="processDefinitionList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-            <el-table-column align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true"></el-table-column>
-            <el-table-column align="center" prop="key" label="标识KEY" width="80"></el-table-column>
-            <el-table-column align="center" prop="version" label="版本号" width="80">
-              <template #default="scope"> v{{ scope.row.version }}.0</template>
-            </el-table-column>
-            <el-table-column align="center" prop="resourceName" label="流程XML" width="100" :show-overflow-tooltip="true">
-              <template #default="scope">
-                <el-link type="primary" @click="clickPreview(scope.row.id, 'xml')">{{ scope.row.resourceName }}</el-link>
-              </template>
+        <el-card shadow="hover" style="border: none">
+          <div class="table-content" style="height: 72vh;">
+            <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
+              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+              <el-table-column align="left" prop="name" label="流程定义名称"
+                               :show-overflow-tooltip="true"></el-table-column>
+              <el-table-column align="left" prop="key" label="标识KEY" width="140"></el-table-column>
+              <el-table-column align="left" prop="version" label="版本号" width="80">
+                <template #default="scope"> v{{ scope.row.version }}.0</template>
+              </el-table-column>
+              <el-table-column align="left" prop="resourceName" label="流程XML" width="140"
+                               :show-overflow-tooltip="true">
+                <template #default="scope">
+                  <el-link type="primary" @click="clickPreview(scope.row.id, 'xml')">{{
+                      scope.row.resourceName
+                    }}
+                  </el-link>
+                </template>
             </el-table-column>
-            <el-table-column align="center" prop="diagramResourceName" label="流程图片" width="100" :show-overflow-tooltip="true">
+            <el-table-column align="left" prop="diagramResourceName" label="流程图片" width="140" :show-overflow-tooltip="true">
               <template #default="scope">
                 <el-link type="primary" @click="clickPreview(scope.row.id, 'bpmn')">{{ scope.row.diagramResourceName }}</el-link>
               </template>
@@ -75,8 +69,8 @@
                 <el-tag v-else type="danger">挂起</el-tag>
               </template>
             </el-table-column>
-            <el-table-column align="center" prop="deploymentTime" label="部署时间" width="120" :show-overflow-tooltip="true"></el-table-column>
-            <el-table-column align="center" label="表名/表单KEY" width="120" :show-overflow-tooltip="true">
+            <el-table-column align="left" prop="deploymentTime" label="部署时间" width="160" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column align="left" label="表名/表单KEY" width="135" :show-overflow-tooltip="true">
               <template #default="scope">
                 <span v-if="scope.row.wfDefinitionConfigVo">
                   {{ scope.row.wfDefinitionConfigVo.tableName }}
@@ -108,15 +102,20 @@
                 </el-row>
                 <el-row :gutter="10" class="mb8">
                   <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
+                    <el-button link type="primary" size="small" icon="Sort" @click="handleConvertToModel(scope.row)">
+                      转换模型
+                    </el-button>
                   </el-col>
                   <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(scope.row)">绑定业务</el-button>
+                    <el-button link type="primary" size="small" icon="Tickets"
+                               @click="handleDefinitionConfigOpen(scope.row)">绑定业务
+                    </el-button>
                   </el-col>
                 </el-row>
               </template>
             </el-table-column>
-          </el-table>
+            </el-table>
+          </div>
           <pagination
             v-show="total > 0"
             v-model:page="queryParams.pageNum"
@@ -131,7 +130,7 @@
     <process-preview ref="previewRef" />
 
     <!-- 部署文件 -->
-    <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%">
+    <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="40%">
       <div v-loading="uploadDialogLoading">
         <div class="mb5">
           <el-text class="mx-1" size="large"><span class="text-danger">*</span>请选择部署流程分类：</el-text>
@@ -144,6 +143,7 @@
             :render-after-expand="false"
             check-strictly
             style="width: 240px"
+            :default-expand-all="true"
           />
         </div>
         <el-upload
@@ -164,32 +164,34 @@
 
     <!-- 历史版本 -->
     <el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%">
-      <el-table v-loading="loading" :data="processDefinitionHistoryList" @selection-change="handleSelectionChange">
+      <el-table border v-loading="loading" :data="processDefinitionHistoryList" @selection-change="handleSelectionChange">
+<!--
         <el-table-column type="selection" width="55" align="center" />
+-->
         <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-        <el-table-column align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true" min-width="80"></el-table-column>
-        <el-table-column align="center" prop="key" label="标识KEY"></el-table-column>
-        <el-table-column align="center" prop="version" label="版本号" width="90">
+        <el-table-column align="left" prop="name" label="流程定义名称" :show-overflow-tooltip="true" min-width="80"></el-table-column>
+        <el-table-column align="left" prop="key" label="标识KEY"></el-table-column>
+        <el-table-column align="left" prop="version" label="版本号" width="80">
           <template #default="scope"> v{{ scope.row.version }}.0</template>
         </el-table-column>
-        <el-table-column align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
+        <el-table-column align="left" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
           <template #default="scope">
             <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
+        <el-table-column align="left" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
           <template #default="scope">
             <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="suspensionState" label="状态" min-width="70">
+        <el-table-column align="center" prop="suspensionState" label="状态" min-width="60">
           <template #default="scope">
             <el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag>
             <el-tag v-else type="danger">挂起</el-tag>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
+        <el-table-column align="left" prop="deploymentTime" label="部署时间" width="160" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column fixed="right" label="操作" align="center" width="180" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
@@ -228,15 +230,15 @@
       append-to-body
       :close-on-click-modal="false"
     >
-      <el-form :model="definitionConfigForm" label-width="auto">
-        <el-form-item label="流程KEY">
+      <el-form :model="definitionConfigForm" label-width="40">
+        <el-form-item label="KEY">
           <el-input v-model="definitionConfigForm.processKey" disabled />
         </el-form-item>
         <el-form-item label="表名" prop="formId">
           <el-input v-model="definitionConfigForm.tableName" placeholder="示例:test_leave" />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="definitionConfigForm.remark" type="textarea" resize="none" />
+          <el-input v-model="definitionConfigForm.remark" :rows="3" type="textarea" resize="none" />
         </el-form-item>
       </el-form>
 
@@ -252,24 +254,23 @@
 
 <script lang="ts" setup name="processDefinition">
 import {
-  listProcessDefinition,
-  definitionImage,
+  convertToModel,
   definitionXml,
   deleteProcessDefinition,
-  updateDefinitionState,
-  convertToModel,
   deployProcessFile,
-  getListByKey
+  getListByKey,
+  listProcessDefinition,
+  updateDefinitionState
 } from '@/api/workflow/processDefinition';
-import { getByTableNameNotDefId, getByDefId, saveOrUpdate } from '@/api/workflow/definitionConfig';
+import {getByDefId, getByTableNameNotDefId, saveOrUpdate} from '@/api/workflow/definitionConfig';
 import ProcessPreview from './components/processPreview.vue';
-import { listCategory } from '@/api/workflow/category';
-import { CategoryVO } from '@/api/workflow/category/types';
-import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types';
-import { DefinitionConfigForm } from '@/api/workflow/definitionConfig/types';
-import { UploadRequestOptions, ElMessage, ElMessageBox } from 'element-plus';
+import {listCategory} from '@/api/workflow/category';
+import {CategoryVO} from '@/api/workflow/category/types';
+import {ProcessDefinitionQuery, ProcessDefinitionVO} from '@/api/workflow/processDefinition/types';
+import {DefinitionConfigForm} from '@/api/workflow/definitionConfig/types';
+import {ElMessageBox, UploadRequestOptions} from 'element-plus';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 
 const previewRef = ref<InstanceType<typeof ProcessPreview>>();
 const queryFormRef = ref<ElFormInstance>();

smsb-plus-ui/src/views/workflow/processInstance/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-2">
-    <el-row :gutter="20">
+    <el-row>
       <!-- 流程分类树 -->
       <el-col :lg="4" :xs="24" style="">
-        <el-card shadow="hover">
-          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+        <el-card shadow="hover" style="height: 90vh;margin-top: 10px">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable/>
           <el-tree
             ref="categoryTreeRef"
             class="mt-2"
@@ -21,7 +21,7 @@
       </el-col>
       <el-col :lg="20" :xs="24">
         <div class="mb-[10px]">
-          <el-card shadow="hover" class="text-center">
+          <el-card shadow="hover" class="text-center" style="height: 60px">
             <el-radio-group v-model="tab" @change="changeTab(tab)">
               <el-radio-button value="running">运行中</el-radio-button>
               <el-radio-button value="finish">已完成</el-radio-button>
@@ -30,13 +30,13 @@
         </div>
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[10px]">
-            <el-card shadow="hover">
+            <el-card shadow="hover" style="height: 60px">
               <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
                 <el-form-item label="流程定义名称" prop="name">
-                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item label="流程定义KEY" prop="key">
-                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -46,68 +46,53 @@
             </el-card>
           </div>
         </transition>
-        <el-card shadow="hover">
-          <template #header>
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-            </el-row>
-          </template>
-
-          <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-            <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-              <template #default="scope">
-                <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-            <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
-              <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
-            </el-table-column>
-            <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
-              <template #default="scope">
-                <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
-                <el-tag v-else type="danger">挂起</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="流程状态" min-width="70">
-              <template #default="scope">
-                <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
-            <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column>
-            <el-table-column label="操作" align="center" :width="130">
-              <template #default="scope">
-                <el-row v-if="tab === 'running'" :gutter="10" class="mb8">
-                  <el-col :span="1.5">
-                    <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300">
-                      <el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="请输入作废原因" />
-                      <div style="text-align: right; margin: 5px 0px 0px 0px">
-                        <el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button>
-                        <el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button>
-                      </div>
-                      <template #reference>
-                        <el-button link type="primary" size="small" icon="CircleClose">作废</el-button>
-                      </template>
-                    </el-popover>
-                  </el-col>
-                  <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="10" class="mb8">
-                  <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
-                  </el-col>
-                </el-row>
-              </template>
-            </el-table-column>
-          </el-table>
+        <el-card shadow="hover" style="border: none">
+          <div class="table-content" style="height: 68vh;">
+            <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
+              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="left" label="流程定义名称">
+                <template #default="scope">
+                  <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+                </template>
+              </el-table-column>
+              <el-table-column align="left" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+              <el-table-column align="left" prop="processDefinitionVersion" label="版本号" width="90">
+                <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
+              </el-table-column>
+              <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
+                <template #default="scope">
+                  <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                  <el-tag v-else type="danger">挂起</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="流程状态" min-width="70">
+                <template #default="scope">
+                  <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="left" prop="startTime" label="启动时间" width="160"></el-table-column>
+              <el-table-column v-if="tab === 'finish'" align="left" prop="endTime" label="结束时间"
+                               width="160"></el-table-column>
+              <el-table-column label="操作" align="center" :width="220">
+                <template #default="scope">
+                  <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300">
+                    <el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="请输入作废原因"/>
+                    <div style="text-align: right; margin: 5px 0px 0px 0px">
+                      <el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button>
+                      <el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button>
+                    </div>
+                    <template #reference>
+                      <el-button link type="primary" size="small" icon="CircleClose">作废</el-button>
+                    </template>
+                  </el-popover>
+                  <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除
+                  </el-button>
+                  <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
           <pagination
             v-show="total > 0"
             v-model:page="queryParams.pageNum"
@@ -145,21 +130,21 @@
 
 <script lang="ts" setup>
 import {
-  getPageByRunning,
-  getPageByFinish,
-  deleteRunAndHisInstance,
   deleteFinishAndHisInstance,
-  deleteRunInstance
+  deleteRunAndHisInstance,
+  deleteRunInstance,
+  getPageByFinish,
+  getPageByRunning
 } from '@/api/workflow/processInstance';
-import { getListByKey, migrationDefinition } from '@/api/workflow/processDefinition';
-import { listCategory } from '@/api/workflow/category';
-import { CategoryVO } from '@/api/workflow/category/types';
-import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
+import {getListByKey, migrationDefinition} from '@/api/workflow/processDefinition';
+import {listCategory} from '@/api/workflow/category';
+import {CategoryVO} from '@/api/workflow/category/types';
+import {ProcessInstanceQuery, ProcessInstanceVO} from '@/api/workflow/processInstance/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
 //审批记录组件
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {wf_business_status} = toRefs<any>(proxy?.useDict('wf_business_status'));
 const queryFormRef = ref<ElFormInstance>();
 const categoryTreeRef = ref<ElTreeInstance>();
 

smsb-plus-ui/src/views/workflow/task/allTaskWaiting.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-2">
     <div class="mb-[10px]">
-      <el-card shadow="hover" class="text-center">
+      <el-card shadow="hover" class="text-center" style="height: 60px;">
         <el-radio-group v-model="tab" @change="changeTab(tab)">
           <el-radio-button value="waiting">待办任务</el-radio-button>
           <el-radio-button value="finish">已办任务</el-radio-button>
@@ -10,7 +10,7 @@
     </div>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
+        <el-card shadow="hover" style="height: 60px">
           <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="任务名称" prop="name">
               <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
@@ -24,42 +24,35 @@
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              <el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUpdate">修改办理人</el-button>
             </el-form-item>
           </el-form>
         </el-card>
       </div>
     </transition>
     <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUpdate">修改办理人</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-          <template #default="scope">
-            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
-        <el-table-column align="center" prop="assigneeName" label="办理人">
-          <template v-if="tab === 'waiting'" #default="scope">
-            <template v-if="scope.row.participantVo && scope.row.assignee === null">
-              <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
-                {{ item }}
-              </el-tag>
+      <div class="table-content" style="height: 68vh;">
+        <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center"/>
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column :show-overflow-tooltip="true" align="left" label="流程定义名称">
+            <template #default="scope">
+              <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
             </template>
-            <template v-else>
-              <el-tag type="success">
-                {{ scope.row.assigneeName || '无' }}
-              </el-tag>
+          </el-table-column>
+          <el-table-column align="left" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+          <el-table-column align="left" prop="name" label="任务名称"></el-table-column>
+          <el-table-column align="left" prop="assigneeName" label="办理人">
+            <template v-if="tab === 'waiting'" #default="scope">
+              <template v-if="scope.row.participantVo && scope.row.assignee === null">
+                <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
+                  {{ item }}
+                </el-tag>
+              </template>
+              <template v-else>
+                <el-tag type="success">
+                  {{ scope.row.assigneeName || '无' }}
+                </el-tag>
             </template>
           </template>
           <template v-else-if="tab === 'finish'" #default="scope">
@@ -74,8 +67,8 @@
             <el-tag v-else type="success">已完成</el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-if="tab === 'waiting'" align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
-        <el-table-column v-if="tab === 'finish'" align="center" prop="startTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column v-if="tab === 'waiting'" align="left" prop="createTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column v-if="tab === 'finish'" align="left" prop="startTime" label="创建时间" width="160"></el-table-column>
         <el-table-column label="操作" align="center" :width="tab === 'finish' ? '80' : '151'">
           <template #default="scope">
             <el-row :gutter="10" class="mb8">
@@ -88,15 +81,20 @@
             </el-row>
             <el-row v-if="scope.row.multiInstance" :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button link type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">减签</el-button>
+                <el-button link type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">
+                  减签
+                </el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button link type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(scope.row)">加签</el-button>
+                <el-button link type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(scope.row)">
+                  加签
+                </el-button>
               </el-col>
             </el-row>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
+      </div>
       <pagination
         v-show="total > 0"
         v-model:page="queryParams.pageNum"
@@ -133,12 +131,12 @@
 </template>
 
 <script lang="ts" setup>
-import { getPageByAllTaskWait, getPageByAllTaskFinish, updateAssignee, getInstanceVariable } from '@/api/workflow/task';
+import {getInstanceVariable, getPageByAllTaskFinish, getPageByAllTaskWait, updateAssignee} from '@/api/workflow/task';
 import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
 import UserSelect from '@/components/UserSelect';
-import { TaskQuery, TaskVO, VariableVo } from '@/api/workflow/task/types';
+import {TaskQuery, TaskVO, VariableVo} from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
 //审批记录组件
 //加签组件
 const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();

smsb-plus-ui/src/views/workflow/task/myDocument.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-2">
-    <el-row :gutter="20">
+    <el-row>
       <!-- 流程分类树 -->
       <el-col :lg="4" :xs="24" style="">
-        <el-card shadow="hover">
-          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+        <el-card shadow="hover" style="height: 90vh;margin-top: 10px">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable/>
           <el-tree
             ref="categoryTreeRef"
             class="mt-2"
@@ -22,10 +22,10 @@
       <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[10px]">
-            <el-card shadow="hover">
+            <el-card shadow="hover" style="height: 60px">
               <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
                 <el-form-item label="流程定义名称" prop="name">
-                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery"/>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -35,64 +35,62 @@
             </el-card>
           </div>
         </transition>
-        <el-card shadow="hover">
-          <template #header>
-            <el-row :gutter="10" class="mb8">
-              <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-            </el-row>
-          </template>
-
-          <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-            <el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
-            <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-              <template #default="scope">
-                <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-            <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
-              <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
-            </el-table-column>
-            <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
-              <template #default="scope">
-                <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
-                <el-tag v-else type="danger">挂起</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="流程状态" min-width="70">
-              <template #default="scope">
-                <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
-            <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-              <template #default="scope">
-                <el-tooltip
-                  v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'"
-                  content="修改"
-                  placement="top"
-                >
-                  <el-button link type="primary" icon="Edit" @click="handleOpen(scope.row, 'update')"></el-button>
-                </el-tooltip>
-                <el-tooltip
+        <el-card shadow="hover" style="border: none;">
+          <div class="table-content" style="height: 72vh;">
+            <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
+              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+              <el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="left" label="流程定义名称">
+                <template #default="scope">
+                  <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+                </template>
+              </el-table-column>
+              <el-table-column align="left" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+              <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
+                <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template>
+              </el-table-column>
+              <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
+                <template #default="scope">
+                  <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                  <el-tag v-else type="danger">挂起</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="流程状态" min-width="70">
+                <template #default="scope">
+                  <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="left" prop="startTime" label="启动时间" width="160"></el-table-column>
+              <el-table-column v-if="tab === 'finish'" align="left" prop="endTime" label="结束时间"
+                               width="160"></el-table-column>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template #default="scope">
+                  <el-tooltip
+                    v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'"
+                    content="修改"
+                    placement="top"
+                  >
+                    <el-button link type="primary" icon="Edit" @click="handleOpen(scope.row, 'update')"></el-button>
+                  </el-tooltip>
+                  <el-tooltip
                   v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'"
                   content="删除"
                   placement="top"
                 >
                   <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-                </el-tooltip>
-                <el-tooltip placement="top" content="查看">
-                  <el-button link type="primary" icon="View" @click="handleOpen(scope.row, 'view')"></el-button>
-                </el-tooltip>
-                <el-tooltip v-if="scope.row.businessStatus === 'waiting'" content="撤销" placement="top">
-                  <el-button link type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.businessKey)"></el-button>
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </el-table>
+                  </el-tooltip>
+                  <el-tooltip placement="top" content="查看">
+                    <el-button link type="primary" icon="View" @click="handleOpen(scope.row, 'view')">查看</el-button>
+                  </el-tooltip>
+                  <el-tooltip v-if="scope.row.businessStatus === 'waiting'" content="撤销" placement="top">
+                    <el-button link type="primary" icon="Notification"
+                               @click="handleCancelProcessApply(scope.row.businessKey)">撤销
+                    </el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
           <pagination
             v-show="total > 0"
             v-model:page="queryParams.pageNum"
@@ -109,14 +107,15 @@
 </template>
 
 <script lang="ts" setup>
-import { getPageByCurrent, deleteRunAndHisInstance, cancelProcessApply } from '@/api/workflow/processInstance';
-import { listCategory } from '@/api/workflow/category';
-import { CategoryVO } from '@/api/workflow/category/types';
-import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
+import {cancelProcessApply, deleteRunAndHisInstance, getPageByCurrent} from '@/api/workflow/processInstance';
+import {listCategory} from '@/api/workflow/category';
+import {CategoryVO} from '@/api/workflow/category/types';
+import {ProcessInstanceQuery, ProcessInstanceVO} from '@/api/workflow/processInstance/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {wf_business_status} = toRefs<any>(proxy?.useDict('wf_business_status'));
 const queryFormRef = ref<ElFormInstance>();
 const categoryTreeRef = ref<ElTreeInstance>();
 
@@ -148,7 +147,7 @@ const tab = ref('running');
 // 查询参数
 const queryParams = ref<ProcessInstanceQuery>({
   pageNum: 1,
-  pageSize: 10,
+  pageSize: 20,
   name: undefined,
   categoryCode: undefined
 });

smsb-plus-ui/src/views/workflow/task/taskCopyList.vue

@@ -2,16 +2,16 @@
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
           <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="任务名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
-              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
-              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -22,23 +22,18 @@
       </div>
     </transition>
     <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-          <template #default="scope">
-            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
-        <el-table-column align="center" prop="assigneeName" label="办理人">
+      <div class="table-content" style="height: 75vh">
+        <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center"/>
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
+            <template #default="scope">
+              <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+          <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
+          <el-table-column align="center" prop="assigneeName" label="办理人">
           <template #default="scope">
             <template v-if="scope.row.participantVo && scope.row.assignee === null">
               <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
@@ -57,12 +52,13 @@
             <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="200">
-          <template #default="scope">
-            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <pagination
         v-show="total > 0"
         v-model:page="queryParams.pageNum"
@@ -75,14 +71,14 @@
 </template>
 
 <script lang="ts" setup>
-import { getPageByTaskCopy } from '@/api/workflow/task';
-import { TaskQuery } from '@/api/workflow/task/types';
+import {getPageByTaskCopy} from '@/api/workflow/task';
+import {TaskQuery} from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
 //审批记录组件
 const queryFormRef = ref<ElFormInstance>();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {wf_business_status} = toRefs<any>(proxy?.useDict('wf_business_status'));
 // 遮罩层
 const loading = ref(true);
 // 选中数组

smsb-plus-ui/src/views/workflow/task/taskFinish.vue

@@ -2,16 +2,16 @@
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
           <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="任务名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
-              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
-              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -22,36 +22,31 @@
       </div>
     </transition>
     <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-          <template #default="scope">
-            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
-        <el-table-column align="center" prop="assigneeName" label="办理人">
+      <div class="table-content" style="height: 75vh">
+        <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column :show-overflow-tooltip="true" align="left" label="流程定义名称">
+            <template #default="scope">
+              <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="left" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+          <el-table-column align="left" prop="name" label="任务名称"></el-table-column>
+        <el-table-column align="left" prop="assigneeName" label="办理人">
           <template #default="scope">
             <el-tag type="success">
               {{ scope.row.assigneeName || '无' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="startTime" label="创建时间" width="160"></el-table-column>
-        <el-table-column label="操作" align="center" width="200">
-          <template #default="scope">
-            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column align="left" prop="startTime" label="创建时间" width="160"></el-table-column>
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <pagination
         v-show="total > 0"
         v-model:page="queryParams.pageNum"
@@ -64,13 +59,13 @@
 </template>
 
 <script lang="ts" setup>
-import { getPageByTaskFinish } from '@/api/workflow/task';
-import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+import {getPageByTaskFinish} from '@/api/workflow/task';
+import {TaskQuery, TaskVO} from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
 //审批记录组件
 const queryFormRef = ref<ElFormInstance>();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 // 遮罩层
 const loading = ref(true);
 // 选中数组

smsb-plus-ui/src/views/workflow/task/taskWaiting.vue

@@ -2,16 +2,16 @@
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
           <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="任务名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
-              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
-              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -22,48 +22,43 @@
       </div>
     </transition>
     <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称">
-          <template #default="scope">
-            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
-        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
-        <el-table-column align="center" prop="assigneeName" label="办理人">
-          <template #default="scope">
-            <template v-if="scope.row.participantVo && scope.row.assignee === null">
-              <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
-                {{ item }}
-              </el-tag>
+      <div class="table-content" style="height: 75vh">
+        <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column :show-overflow-tooltip="true" align="left" label="流程定义名称">
+            <template #default="scope">
+              <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="left" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+          <el-table-column align="left" prop="name" label="任务名称"></el-table-column>
+          <el-table-column align="left" prop="assigneeName" label="办理人">
+            <template #default="scope">
+              <template v-if="scope.row.participantVo && scope.row.assignee === null">
+                <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
+                  {{ item }}
+                </el-tag>
+              </template>
+              <template v-else>
+                <el-tag type="success">
+                  {{ scope.row.assigneeName || '无' }}
+                </el-tag>
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="流程状态" min-width="70">
+            <template #default="scope">
+              <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
             </template>
-            <template v-else>
-              <el-tag type="success">
-                {{ scope.row.assigneeName || '无' }}
-              </el-tag>
+          </el-table-column>
+          <el-table-column align="left" prop="createTime" label="创建时间" width="160"></el-table-column>
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
             </template>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="流程状态" min-width="70">
-          <template #default="scope">
-            <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
-        <el-table-column label="操作" align="center" width="200">
-          <template #default="scope">
-            <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          </el-table-column>
+        </el-table>
+      </div>
       <pagination
         v-show="total > 0"
         v-model:page="queryParams.pageNum"
@@ -76,12 +71,13 @@
 </template>
 
 <script lang="ts" setup>
-import { getPageByTaskWait } from '@/api/workflow/task';
-import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+import {getPageByTaskWait} from '@/api/workflow/task';
+import {TaskQuery, TaskVO} from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
-import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+import {RouterJumpVo} from '@/api/workflow/workflowCommon/types';
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {wf_business_status} = toRefs<any>(proxy?.useDict('wf_business_status'));
 //提交组件
 const queryFormRef = ref<ElFormInstance>();
 // 遮罩层