update 流程定义预览 优化

src/api/workflow/leave/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { LeaveVO, LeaveForm, LeaveQuery } from '@/api/demo/leave/types';
+import { LeaveVO, LeaveQuery, LeaveForm } from '@/api/workflow/leave/types';
 
 /**
  * 查询请假列表
@@ -31,7 +31,7 @@ export const getLeave = (id: string | number): AxiosPromise<LeaveVO> => {
  * 新增请假
  * @param data
  */
-export const addLeave = (data: LeaveForm) => {
+export const addLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
   return request({
     url: '/demo/leave',
     method: 'post',
@@ -43,7 +43,7 @@ export const addLeave = (data: LeaveForm) => {
  * 修改请假
  * @param data
  */
-export const updateLeave = (data: LeaveForm) => {
+export const updateLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
   return request({
     url: '/demo/leave',
     method: 'put',

src/api/workflow/leave/types.ts

@@ -1,74 +1,22 @@
 export interface LeaveVO {
-  /**
-   * 主键
-   */
   id: string | number;
-
-  /**
-   * 请假类型
-   */
   leaveType: string;
-
-  /**
-   * 开始时间
-   */
   startDate: string;
-
-  /**
-   * 结束时间
-   */
   endDate: string;
-
-  /**
-   * 请假天数
-   */
   leaveDays: number;
-
-  /**
-   * 请假原因
-   */
   remark: string;
 }
 
 export interface LeaveForm extends BaseEntity {
-  /**
-   * 主键
-   */
   id?: string | number;
-
-  /**
-   * 请假类型
-   */
   leaveType?: string;
-
-  /**
-   * 开始时间
-   */
   startDate?: string;
-
-  /**
-   * 结束时间
-   */
   endDate?: string;
-
-  /**
-   * 请假天数
-   */
   leaveDays?: number;
-
-  /**
-   * 请假原因
-   */
   remark?: string;
 }
 
 export interface LeaveQuery extends PageQuery {
-  /**
-   * 请假天数
-   */
   startLeaveDays?: number;
-  /**
-   * 请假天数
-   */
   endLeaveDays?: number;
 }

src/api/workflow/model/index.ts

@@ -1,11 +1,13 @@
 import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ModelForm, ModelQuery, ModelVO } from '@/api/workflow/model/types';
 
 /**
  * 查询模型列表
  * @param query
  * @returns {*}
  */
-export const listModel = (query: object) => {
+export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => {
   return request({
     url: '/workflow/model/list',
     method: 'get',
@@ -15,10 +17,10 @@ export const listModel = (query: object) => {
 
 /**
  * 新增模型
- * @param query
+ * @param data
  * @returns {*}
  */
-export const addModel = (data: object) => {
+export const addModel = (data: ModelForm): AxiosPromise<void> => {
   return request({
     url: '/workflow/model/rest/models',
     method: 'post',
@@ -28,10 +30,10 @@ export const addModel = (data: object) => {
 
 /**
  * 按id删除模型
- * @param {模型id} id
  * @returns {*}
+ * @param id 模型id
  */
-export function delModel(id: object) {
+export function delModel(id: string | string[]): AxiosPromise<void> {
   return request({
     url: '/workflow/model/' + id,
     method: 'delete'
@@ -40,10 +42,10 @@ export function delModel(id: object) {
 
 /**
  * 模型部署
- * @param {模型id} id
  * @returns {*}
+ * @param id 模型id
  */
-export const modelDeploy = (id: string) => {
+export const modelDeploy = (id: string): AxiosPromise<void> => {
   return request({
     url: `/workflow/model/modelDeploy/${id}`,
     method: 'post'

src/api/workflow/model/types.ts

@@ -6,7 +6,58 @@ export interface ModelForm {
 }
 
 export interface ModelQuery extends PageQuery {
+  name?: string;
+  key?: string;
+  categoryCode?: string;
+}
+
+export interface OriginalPersistentState {
+  metaInfo: string;
+  editorSourceValueId: string;
+  createTime: string;
+  deploymentId?: string;
+  name: string;
+  tenantId: string;
+  category?: string;
+  version: number;
+  editorSourceExtraValueId?: string;
+  key: string;
+  lastUpdateTime: string;
+}
+
+export interface PersistentState {
+  metaInfo: string;
+  editorSourceValueId: string;
+  createTime: string;
+  deploymentId?: string;
+  name: string;
+  tenantId: string;
+  category?: string;
+  version: number;
+  editorSourceExtraValueId?: string;
+  key: string;
+  lastUpdateTime: string;
+}
+
+export interface ModelVO {
+  id: string;
+  revision: number;
+  originalPersistentState: OriginalPersistentState;
   name: string;
   key: string;
-  categoryCode: string;
+  category?: string;
+  createTime: string;
+  lastUpdateTime: string;
+  version: number;
+  metaInfo: string;
+  deploymentId?: string;
+  editorSourceValueId: string;
+  editorSourceExtraValueId?: string;
+  tenantId: string;
+  persistentState: PersistentState;
+  revisionNext: number;
+  idPrefix: string;
+  inserted: boolean;
+  updated: boolean;
+  deleted: boolean;
 }

src/directive/common/copyText.ts

@@ -2,9 +2,10 @@
  * v-copyText 复制文本内容
  * Copyright (c) 2022 ruoyi
  */
+import { DirectiveBinding } from 'vue';
 
 export default {
-  beforeMount(el: any, { value, arg }: any) {
+  beforeMount(el: any, { value, arg }: DirectiveBinding) {
     if (arg === 'callback') {
       el.$copyCallback = value;
     } else {

src/views/workflow/category/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div v-show="showSearch" class="search">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
           <el-form-item label="分类名称" prop="categoryName">
             <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
@@ -21,36 +21,43 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['workflow:category:add']">新增</el-button>
+            <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" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
-      <el-table v-loading="loading" :data="categoryList" row-key="id" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" ref="categoryTableRef">
+      <el-table
+        ref="categoryTableRef"
+        v-loading="loading"
+        :data="categoryList"
+        row-key="id"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
         <el-table-column label="分类名称" 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">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:category:edit']" />
+              <el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
             </el-tooltip>
             <el-tooltip content="新增" placement="top">
-              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['workflow:category:add']" />
+              <el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:category:remove']" />
+              <el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
     <!-- 添加或修改流程分类对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
+      <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"
@@ -82,20 +89,16 @@
 </template>
 
 <script setup name="Category" lang="ts">
-import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/workflow/category";
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
 import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm, ElTable } from 'element-plus';
-
 
 type CategoryOption = {
   id: number;
   categoryName: string;
   children?: CategoryOption[];
-}
+};
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const categoryList = ref<CategoryVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
@@ -104,23 +107,22 @@ const showSearch = ref(true);
 const isExpandAll = ref(true);
 const loading = ref(false);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const categoryFormRef = ref(ElForm);
+const categoryFormRef = ref<ElFormInstance>();
-const categoryTableRef = ref(ElTable)
+const categoryTableRef = ref<ElTableInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
 
-
 const initFormData: CategoryForm = {
   id: undefined,
   categoryName: undefined,
   categoryCode: undefined,
   parentId: undefined,
-    sortNum: 0,
+  sortNum: 0
-}
+};
 
 const data = reactive<PageData<CategoryForm, CategoryQuery>>({
   form: { ...initFormData },
@@ -128,21 +130,13 @@ const data = reactive<PageData<CategoryForm, CategoryQuery>>({
     pageNum: 1,
     pageSize: 10,
     categoryName: undefined,
-    categoryCode: undefined,
+    categoryCode: undefined
   },
   rules: {
-    id: [
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
-      { required: true, message: "主键不能为空", trigger: "blur" }
+    categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-    ],
+    categoryCode: [{ required: true, message: '分类编码不能为空', trigger: 'blur' }],
-    categoryName: [
+    parentId: [{ required: true, message: '父级id不能为空', trigger: 'blur' }]
-      { required: true, message: "分类名称不能为空", trigger: "blur" }
-    ],
-    categoryCode: [
-      { required: true, message: "分类编码不能为空", trigger: "blur" }
-    ],
-    parentId: [
-      { required: true, message: "父级id不能为空", trigger: "blur" }
-    ],
   }
 });
 
@@ -152,49 +146,49 @@ const { queryParams, form, rules } = toRefs(data);
 const getList = async () => {
   loading.value = true;
   const res = await listCategory(queryParams.value);
-  const data = proxy?.handleTree<CategoryVO>(res.data, "id", "parentId");
+  const data = proxy?.handleTree<CategoryVO>(res.data, 'id', 'parentId');
   if (data) {
     categoryList.value = data;
     loading.value = false;
   }
-}
+};
 
 /** 查询流程分类下拉树结构 */
 const getTreeselect = async () => {
   const res = await listCategory();
   categoryOptions.value = [];
   const data: CategoryOption = { id: 0, categoryName: '顶级节点', children: [] };
-  data.children = proxy?.handleTree<CategoryOption>(res.data, "id", "parentId");
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
   categoryOptions.value.push(data);
-}
+};
 
 // 取消按钮
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 // 表单重置
 const reset = () => {
-  form.value = {...initFormData}
+  form.value = { ...initFormData };
-  categoryFormRef.value.resetFields();
+  categoryFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = (row?: CategoryVO) => {
   dialog.visible = true;
-  dialog.title = "添加流程分类";
+  dialog.title = '添加流程分类';
   nextTick(() => {
     reset();
     getTreeselect();
@@ -204,27 +198,27 @@ const handleAdd = (row?: CategoryVO) => {
       form.value.parentId = 0;
     }
   });
-}
+};
 
 /** 展开/折叠操作 */
 const handleToggleExpandAll = () => {
   isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(categoryList.value, isExpandAll.value)
+  toggleExpandAll(categoryList.value, isExpandAll.value);
-}
+};
 
 /** 展开/折叠操作 */
 const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
   data.forEach((item) => {
-    categoryTableRef.value.toggleRowExpansion(item, status)
+    categoryTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  })
+  });
-}
+};
 
 /** 修改按钮操作 */
 const handleUpdate = (row: CategoryVO) => {
   loading.value = true;
   dialog.visible = true;
-  dialog.title = "修改流程分类";
+  dialog.title = '修改流程分类';
   nextTick(async () => {
     reset();
     await getTreeselect();
@@ -235,7 +229,7 @@ const handleUpdate = (row: CategoryVO) => {
     loading.value = false;
     Object.assign(form.value, res.data);
   });
-}
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -243,25 +237,25 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateCategory(form.value).finally(() => buttonLoading.value = false);
+        await updateCategory(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addCategory(form.value).finally(() => buttonLoading.value = false);
+        await addCategory(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
-      getList();
+      await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row: CategoryVO) => {
   await proxy?.$modal.confirm('是否确认删除流程分类编号为"' + row.id + '"的数据项？');
   loading.value = true;
-  await delCategory(row.id).finally(() => loading.value = false);
+  await delCategory(row.id).finally(() => (loading.value = false));
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
-}
+};
 
 onMounted(() => {
   getList();

src/views/workflow/leave/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div v-show="showSearch" class="search">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
           <el-form-item label="请假天数" prop="startLeaveDays">
             <el-input v-model="queryParams.startLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
           </el-form-item>
-          <el-form-item prop="endLeaveDays">
+          <el-form-item prop="endLeaveDays"> 至 </el-form-item>
-            至
-          </el-form-item>
           <el-form-item prop="endLeaveDays">
             <el-input v-model="queryParams.endLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
           </el-form-item>
@@ -24,21 +22,21 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['demo:leave:add']">新增</el-button>
+            <el-button v-hasPermi="['demo:leave:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:leave:export']">导出</el-button>
+            <el-button v-hasPermi="['demo:leave:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="leaveList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键" align="center" prop="id" v-if="false" />
+        <el-table-column v-if="false" label="主键" align="center" prop="id" />
         <el-table-column label="请假类型" align="center">
           <template #default="scope">
-            <el-tag type="primary">{{ options.find(e=>e.value === scope.row.leaveType)?.label }}</el-tag>
+            <el-tag>{{ options.find((e) => e.value === scope.row.leaveType)?.label }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="开始时间" align="center" prop="startDate">
@@ -61,41 +59,56 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip
+              v-if="
+                scope.row.processInstanceVo.businessStatus === 'draft' ||
+                scope.row.processInstanceVo.businessStatus === 'cancel' ||
+                scope.row.processInstanceVo.businessStatus === 'back'
+              "
               content="修改"
               placement="top"
-              v-if="scope.row.processInstanceVo.businessStatus === 'draft' || scope.row.processInstanceVo.businessStatus === 'cancel' || scope.row.processInstanceVo.businessStatus === 'back'"
             >
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:leave:edit']"></el-button>
+              <el-button v-hasPermi="['demo:leave:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip
+              v-if="
+                scope.row.processInstanceVo.businessStatus === 'draft' ||
+                scope.row.processInstanceVo.businessStatus === 'cancel' ||
+                scope.row.processInstanceVo.businessStatus === 'back'
+              "
               content="删除"
               placement="top"
-              v-if="scope.row.processInstanceVo.businessStatus === 'draft' || scope.row.processInstanceVo.businessStatus === 'cancel' || scope.row.processInstanceVo.businessStatus === 'back'"
             >
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:leave:remove']"></el-button>
+              <el-button v-hasPermi="['demo:leave:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
             </el-tooltip>
-            <el-tooltip content="撤销" placement="top" v-if="scope.row.processInstanceVo.businessStatus === 'waiting'">
+            <el-tooltip v-if="scope.row.processInstanceVo.businessStatus === 'waiting'" content="撤销" placement="top">
               <el-button link type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.processInstanceVo.id)"></el-button>
             </el-tooltip>
-            <el-tooltip content="审批记录" placement="top" v-if="scope.row.processInstanceVo.businessStatus === 'waiting'">
+            <el-tooltip v-if="scope.row.processInstanceVo.businessStatus === 'waiting'" content="审批记录" placement="top">
               <el-button link type="primary" icon="Document" @click="handleApprovalRecord(scope.row.processInstanceVo.id)"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改请假对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
-      <el-form ref="leaveFormRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
+      <el-form ref="leaveFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="请假类型" prop="leaveType">
-          <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%;">
+          <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="请假时间">
-          <el-date-picker @change="changeLeaveTime()" v-model="leaveTime" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
+          <el-date-picker
+            v-model="leaveTime"
+            type="daterange"
+            range-separator="To"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="changeLeaveTime()"
+          />
         </el-form-item>
         <el-form-item label="请假天数" prop="leaveDays">
           <el-input v-model="form.leaveDays" disabled type="number" placeholder="请输入请假天数" />
@@ -113,19 +126,20 @@
       </template>
     </el-dialog>
     <!-- 提交组件 -->
-    <submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" :taskVariables="taskVariables" />
+    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
     <!-- 审批记录 -->
     <approvalRecord ref="approvalRecordRef" />
   </div>
 </template>
 
 <script setup name="Leave" lang="ts">
-import { listLeave, getLeave, delLeave, addLeave, updateLeave } from '@/api/workflow/leave';
+import { addLeave, delLeave, getLeave, listLeave, updateLeave } from '@/api/workflow/leave';
 import { cancelProcessApply } from '@/api/workflow/processInstance';
-import { LeaveVO, LeaveQuery, LeaveForm } from '@/api/workflow/leave/types';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
 import { startWorkFlow } from '@/api/workflow/task';
 import SubmitVerify from '@/components/Process/submitVerify.vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import { AxiosResponse } from 'axios';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -155,14 +169,14 @@ const options = [
     value: '4',
     label: '婚假'
   }
-]
+];
 //提交组件
 const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 //审批记录组件
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const leaveFormRef = ref(ElForm);
+const leaveFormRef = ref<ElFormInstance>();
 
 const submitFormData = ref<Record<string, any>>({
   businessKey: '',
@@ -171,7 +185,6 @@ const submitFormData = ref<Record<string, any>>({
 });
 const taskVariables = ref<Record<string, any>>({});
 
-
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -221,8 +234,8 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
-  leaveTime.value = []
+  leaveTime.value = [];
-  leaveFormRef.value.resetFields();
+  leaveFormRef.value?.resetFields();
 };
 
 /** 搜索按钮操作 */
@@ -233,7 +246,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 };
 
@@ -254,11 +267,10 @@ const handleAdd = () => {
 };
 
 const changeLeaveTime = () => {
-  const startDate = new Date(leaveTime.value[0]).getTime()
+  const startDate = new Date(leaveTime.value[0]).getTime();
-  const endDate = new Date(leaveTime.value[1]).getTime()
+  const endDate = new Date(leaveTime.value[1]).getTime();
-  const diffInMilliseconds = endDate - startDate
+  const diffInMilliseconds = endDate - startDate;
-  const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24))
+  form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
-  form.value.leaveDays = diffInDays
 };
 /** 修改按钮操作 */
 const handleUpdate = (row?: LeaveVO) => {
@@ -270,9 +282,9 @@ const handleUpdate = (row?: LeaveVO) => {
     const _id = row?.id || ids.value[0];
     const res = await getLeave(_id);
     Object.assign(form.value, res.data);
-    leaveTime.value = []
+    leaveTime.value = [];
-    leaveTime.value.push(form.value.startDate)
+    leaveTime.value.push(form.value.startDate);
-    leaveTime.value.push(form.value.endDate)
+    leaveTime.value.push(form.value.endDate);
   });
 };
 
@@ -280,27 +292,27 @@ const handleUpdate = (row?: LeaveVO) => {
 const submitForm = (status: string) => {
   if (leaveTime.value.length === 0) {
     proxy?.$modal.msgError('请假时间不能为空');
-     return
+    return;
   }
-  leaveFormRef.value.validate(async (valid: boolean) => {
+  leaveFormRef.value?.validate(async (valid: boolean) => {
-    form.value.startDate = leaveTime.value[0]
+    form.value.startDate = leaveTime.value[0];
-    form.value.endDate = leaveTime.value[1]
+    form.value.endDate = leaveTime.value[1];
     if (valid) {
       buttonLoading.value = true;
-      let res = {};
+      let res: AxiosResponse<LeaveVO>;
       if (form.value.id) {
-        res = await updateLeave(form.value)
+        res = await updateLeave(form.value);
       } else {
-        res = await addLeave(form.value)
+        res = await addLeave(form.value);
       }
-      form.value = res.data
+      form.value = res.data;
       if (status === 'draft') {
-        buttonLoading.value = false
+        buttonLoading.value = false;
         proxy?.$modal.msgSuccess('暂存成功');
         dialog.visible = false;
-        getList()
+        await getList();
       } else {
-        handleStartWorkFlow(res.data);
+        await handleStartWorkFlow(res.data);
       }
     }
   });
@@ -327,7 +339,7 @@ const handleExport = () => {
 };
 
 //提交申请
-const handleStartWorkFlow = async (data: any) => {
+const handleStartWorkFlow = async (data: LeaveVO) => {
   submitFormData.value.processKey = 'leave1';
   submitFormData.value.businessKey = data.id;
   //流程变量
@@ -335,14 +347,13 @@ const handleStartWorkFlow = async (data: any) => {
     entity: data,
     leaveDays: data.leaveDays,
     userList: [1, 2]
-  }
+  };
   submitFormData.value.variables = taskVariables.value;
-  startWorkFlow(submitFormData.value).then((response: any) => {
+  const resp = await startWorkFlow(submitFormData.value);
   if (submitVerifyRef.value) {
-      buttonLoading.value = false
+    buttonLoading.value = false;
-      submitVerifyRef.value.openDialog(response.data.taskId);
+    submitVerifyRef.value.openDialog(resp.data.taskId);
   }
-  });
 };
 //审批记录
 const handleApprovalRecord = (id: string) => {
@@ -360,7 +371,7 @@ const handleCancelProcessApply = async (id: string) => {
   await proxy?.$modal.confirm('是否确认撤销当前单据？');
   loading.value = true;
   await cancelProcessApply(id).finally(() => (loading.value = false));
-  getList();
+  await getList();
   proxy?.$modal.msgSuccess('撤销成功');
 };
 onMounted(() => {

src/views/workflow/model/design.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="Flowable工作流在线流程设计器" width="90%" height="100%" v-model="visible" v-if="visible" :before-close="handleClose">
+  <el-dialog v-if="visible" v-model="visible" title="Flowable工作流在线流程设计器" width="90%" height="100%" :before-close="handleClose">
     <div class="modeler">
       <iframe class="iframe" :src="src"></iframe>
     </div>
@@ -7,12 +7,15 @@
 </template>
 
 <script lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const baseURL = import.meta.env.VITE_APP_BASE_API;
 import { getToken } from '@/utils/auth';
 export default {
   props: {
-    modelId: String
+    modelId: propTypes.string.isRequired
   },
+  emits: ['handleClose'],
 
   data() {
     return {
@@ -31,7 +34,7 @@ export default {
     },
     clientid() {
       return import.meta.env.VITE_APP_CLIENT_ID;
-    },
+    }
   },
   mounted() {
     //全局存入当前vue实例
@@ -39,10 +42,10 @@ export default {
   },
   methods: {
     async handleClose() {
-      await this.$modal.confirm('请记得点击左上角保存按钮，确定关闭设计窗口?').finally(() => (this as any).loading = false);
+      await this.$modal.confirm('请记得点击左上角保存按钮，确定关闭设计窗口?').finally(() => ((this as any).loading = false));
       this.visible = false;
       // 刷新数据
-      this.$emit("handleClose")
+      this.$emit('handleClose');
     }
   }
 };
@@ -51,6 +54,6 @@ export default {
 .iframe {
   width: 100%;
   height: calc(100vh - 120px);
-  border: 0px;
+  border: 0;
 }
 </style>

src/views/workflow/model/index.vue

@@ -4,10 +4,10 @@
       <!-- 流程分类树 -->
       <el-col :lg="4" :xs="24" style="">
         <el-card shadow="hover">
-          <el-input placeholder="请输入流程分类名" v-model="categoryName" prefix-icon="Search" clearable />
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
           <el-tree
-            class="mt-2"
             ref="categoryTreeRef"
+            class="mt-2"
             node-key="id"
             :data="categoryOptions"
             :props="{ label: 'categoryName', children: 'children' }"
@@ -21,9 +21,9 @@
       </el-col>
       <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-          <div class="mb-[10px]" v-show="showSearch">
+          <div v-show="showSearch" class="mb-[10px]">
             <el-card shadow="hover">
-              <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="80px">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
                 <el-form-item label="模型名称" prop="name">
                   <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery" />
                 </el-form-item>
@@ -45,9 +45,9 @@
                 <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
               </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
             </el-row>
           </template>
 
@@ -74,7 +74,9 @@
                 </el-row>
                 <el-row :gutter="10" class="mb8">
                   <el-col :span="1.5">
-                    <el-button link type="primary" size="small" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)"> 流程部署 </el-button>
+                    <el-button link type="primary" size="small" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)">
+                      流程部署
+                    </el-button>
                   </el-col>
                   <el-col :span="1.5">
                     <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
@@ -83,12 +85,18 @@
               </template>
             </el-table-column>
           </el-table>
-          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
         </el-card>
       </el-col>
     </el-row>
     <!-- 设计流程开始 -->
-    <design ref="designModel" :modelId="modelId" @handleClose="getList" />
+    <design ref="designModel" :model-id="modelId" @handle-close="getList" />
     <!-- 设计流程结束 -->
     <!-- 添加模型对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
@@ -110,7 +118,7 @@
           />
         </el-form-item>
         <el-form-item label="备注：" prop="description">
-          <el-input type="textarea" v-model="form.description" maxlength="30" show-word-limit></el-input>
+          <el-input v-model="form.description" type="textarea" maxlength="30" show-word-limit></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -124,36 +132,34 @@
 </template>
 
 <script lang="ts" setup name="Model">
-import { listModel, addModel, delModel, modelDeploy } from '@/api/workflow/model';
-import { ModelQuery, ModelForm } from '@/api/workflow/model/types';
-import { ComponentInternalInstance } from 'vue';
 import Design from './design.vue';
-import { listCategory } from "@/api/workflow/category";
+import { listModel, addModel, delModel, modelDeploy } from '@/api/workflow/model';
-import { ElTree } from 'element-plus';
+import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types';
+import { listCategory } from '@/api/workflow/category';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const designModel = ref<InstanceType<typeof Design>>();
-const formRef = ref(ElForm);
+const formRef = ref<ElFormInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
 
 type CategoryOption = {
   categoryCode: string;
   categoryName: string;
   children?: CategoryOption[];
-}
+};
 
 const buttonLoading = ref(false);
 const loading = ref(true);
-const ids = ref<Array<string | number>>([]);
+const ids = ref<string[]>([]);
 const single = ref(true);
 const multiple = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
-const modelList = ref<any[]>([]);
+const modelList = ref<ModelVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
 const categoryName = ref('');
-const categoryTreeRef = ref(ElTree);
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -194,18 +200,20 @@ onMounted(() => {
 const handleNodeClick = (data: ModelForm) => {
   queryParams.value.categoryCode = data.categoryCode;
   if (data.categoryCode === 'ALL') {
-    queryParams.value.categoryCode = ''
+    queryParams.value.categoryCode = '';
-  }
-  handleQuery()
   }
+  handleQuery();
+};
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
-  if (!value) return true
+  if (!value) return true;
-  return data.categoryName.indexOf(value) !== -1
+  return data.categoryName.indexOf(value) !== -1;
-}
+};
 /** 根据名称筛选部门树 */
 watchEffect(
-  () => { categoryTreeRef.value.filter(categoryName.value); },
+  () => {
+    categoryTreeRef.value?.filter(categoryName.value);
+  },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
@@ -218,34 +226,33 @@ const handleQuery = () => {
 };
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   queryParams.value.categoryCode = '';
   queryParams.value.pageNum = 1;
   queryParams.value.pageSize = 10;
   handleQuery();
 };
 // 多选框选中数据
-const handleSelectionChange = (selection: any) => {
+const handleSelectionChange = (selection: ModelVO[]) => {
-  ids.value = selection.map((item: any) => item.id);
+  ids.value = selection.map((item: ModelVO) => item.id);
   single.value = selection.length !== 1;
   multiple.value = !selection.length;
 };
 //分页
-const getList = () => {
+const getList = async () => {
   loading.value = true;
-  listModel(queryParams.value).then((resp) => {
+  const resp = await listModel(queryParams.value);
   modelList.value = resp.rows;
   total.value = resp.total;
   loading.value = false;
-  });
 };
 /** 删除按钮操作 */
-const handleDelete = async (row: any) => {
+const handleDelete = async (row?: ModelVO) => {
-  const id = row.id || ids.value;
+  const id = row?.id || ids.value;
   await proxy?.$modal.confirm('是否确认删除模型id为【' + id + '】的数据项？');
   loading.value = true;
   await delModel(id).finally(() => (loading.value = false));
-  getList();
+  await getList();
   proxy?.$modal.msgSuccess('删除成功');
 };
 // 流程部署
@@ -253,7 +260,7 @@ const clickDeploy = async (id: string, key: string) => {
   await proxy?.$modal.confirm('是否部署模型key为【' + key + '】流程？');
   loading.value = true;
   await modelDeploy(id).finally(() => (loading.value = false));
-  getList();
+  await getList();
   proxy?.$modal.msgSuccess('部署成功');
 };
 const handleAdd = () => {
@@ -270,7 +277,7 @@ const submitForm = () => {
       await addModel(form.value);
       proxy?.$modal.msgSuccess('新增成功');
       dialog.visible = false;
-      getList();
+      await getList();
     }
   });
 };
@@ -303,7 +310,7 @@ const getTreeselect = async () => {
   const res = await listCategory();
   categoryOptions.value = [];
   const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
-  data.children = proxy?.handleTree<CategoryOption>(res.data, "id", "parentId");
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
   categoryOptions.value.push(data);
-}
+};
 </script>