add 添加流程表单配置

gssong

2024-03-21 f50ed6b2c54615fa3e540bc6788a08239084d8e2

add 添加流程表单配置

 src/api/workflow/formDefinition/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { FormDefinitionVO, FormDefinitionForm, FormDefinitionQuery } from '@/api/workflow/formDefinition/types';


/**
 * æŸ¥è¯¢è¡¨å•é…ç½®è¯¦ç»†
 * @param id
 */
export const getByDefId = (definitionId: string | number): AxiosPromise<FormDefinitionVO> => {
  return request({
    url: '/workflow/formDefinition/getByDefId/' + definitionId,
    method: 'get'
  });
};

/**
 * æ–°å¢žè¡¨å•é…ç½®
 * @param data
 */
export const saveOrUpdate = (data: FormDefinitionForm) => {
  return request({
    url: '/workflow/formDefinition/saveOrUpdate',
    method: 'post',
    data: data
  });
};

/**
 * åˆ é™¤è¡¨å•é…ç½®
 * @param id
 */
export const delFormDefinition = (id: string | number | Array<string | number>) => {
  return request({
    url: '/workflow/formDefinition/' + id,
    method: 'delete'
  });
};

 src/api/workflow/formDefinition/types.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,81 @@
export interface FormDefinitionVO {
  /**
   * ä¸»é”®
   */
  id: string | number;

  /**
   * è·¯ç”±åœ°å€
   */
  path: string;

  /**
   * æµç¨‹å®šä¹‰ID
   */
  definitionId: string | number;

  /**
   * æµç¨‹KEY
   */
  processKey: string;

  /**
   * å¤‡æ³¨
   */
  remark: string;

}

export interface FormDefinitionForm extends BaseEntity {
  /**
   * ä¸»é”®
   */
  id?: string | number;

  /**
   * è·¯ç”±åœ°å€
   */
  path?: string;

  /**
   * æµç¨‹å®šä¹‰ID
   */
  definitionId?: string | number;

  /**
   * æµç¨‹KEY
   */
  processKey?: string;

  /**
   * å¤‡æ³¨
   */
  remark?: string;

}

export interface FormDefinitionQuery extends PageQuery {

  /**
   * è·¯ç”±åœ°å€
   */
  path?: string;

  /**
   * æµç¨‹å®šä¹‰ID
   */
  definitionId?: string | number;

  /**
   * æµç¨‹KEY
   */
  processKey?: string;

  /**
   * æ—¥æœŸèŒƒå›´å‚æ•°
   */
  params?: any;
}




 src/api/workflow/leave/types.ts

@@ -5,6 +5,7 @@
  endDate: string;
  leaveDays: number;
  remark: string;
  processInstanceVo: any;
}

export interface LeaveForm extends BaseEntity {
@@ -14,6 +15,7 @@
  endDate?: string;
  leaveDays?: number;
  remark?: string;
  processInstanceVo: any;
}

export interface LeaveQuery extends PageQuery {

 src/api/workflow/task/types.ts

@@ -36,6 +36,8 @@
  processDefinitionKey: string;
  participantVo: ParticipantVo;
  multiInstance: boolean;
  businessKey: string;
  wfFormDefinitionVo: any;
}

export interface VariableVo {

 src/components/Process/approvalRecord.vue

@@ -10,7 +10,11 @@
            <el-table :data="historyList" style="width: 100%" border fit>
              <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
              <el-table-column prop="name" label="任务名称" sortable align="center"></el-table-column>
              <el-table-column prop="nickName" label="办理人" sortable align="center"></el-table-column>
              <el-table-column prop="nickName" label="办理人" sortable align="center">
                <template #default="scope">
                  <el-tag type="success">{{ scope.row.nickName||'无' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="状态" sortable align="center">
                <template #default="scope">
                  <el-tag type="success">{{ scope.row.statusName }}</el-tag>

 src/router/index.ts

@@ -162,6 +162,20 @@
        meta: { title: '修改生成配置', activeMenu: '/tool/gen', icon: '' }
      }
    ]
  },
  {
    path: '/demo/leaveEdit',
    component: Layout,
    hidden: true,
    permissions: ['demo:leave:edit'],
    children: [
      {
        path: 'index/:id/:type',
        component: () => import('@/views/workflow/leave/leaveEdit.vue'),
        name: 'leaveEdit',
        meta: { title: '请假申请', activeMenu: '/demo/leave',noCache:true },
      }
    ]
  }
];


 src/views/workflow/leave/index.vue

@@ -80,14 +80,11 @@
            >
              <el-button v-hasPermi="['demo:leave:remove']" 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="handleView(scope.row)"></el-button>
            </el-tooltip>
            <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 v-if="scope.row.processInstanceVo.businessStatus === 'waiting' || 
            scope.row.processInstanceVo.businessStatus === 'finish'||
            scope.row.processInstanceVo.businessStatus === 'termination'||
            scope.row.processInstanceVo.businessStatus === 'invalid'" content="审批记录" placement="top">
              <el-button link type="primary" icon="Document" @click="handleApprovalRecord(scope.row.processInstanceVo.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
@@ -95,66 +92,23 @@

      <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="800px" append-to-body>
      <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-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
            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="请输入请假天数" />
        </el-form-item>
        <el-form-item label="请假原因" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="info" @click="submitForm('draft')">暂 å­˜</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submitForm('submit')">提 äº¤</el-button>
          <el-button @click="cancel">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- æäº¤ç»„件 -->
    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
    <!-- å®¡æ‰¹è®°å½• -->
    <approvalRecord ref="approvalRecordRef" />
  </div>
</template>

<script setup name="Leave" lang="ts">
import { addLeave, delLeave, getLeave, listLeave, updateLeave } from '@/api/workflow/leave';
import { delLeave, listLeave } from '@/api/workflow/leave';
import { cancelProcessApply } from '@/api/workflow/processInstance';
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;

const leaveList = ref<LeaveVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const leaveTime = ref<Array<string>>([]);
const options = [
  {
    value: '1',
@@ -173,51 +127,21 @@
    label: '婚假'
  }
];
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

const queryFormRef = ref<ElFormInstance>();
const leaveFormRef = ref<ElFormInstance>();

const submitFormData = ref<Record<string, any>>({
  businessKey: '',
  processKey: '',
  variables: {}
});
const taskVariables = ref<Record<string, any>>({});

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: LeaveForm = {
  id: undefined,
  leaveType: undefined,
  startDate: undefined,
  endDate: undefined,
  leaveDays: undefined,
  remark: undefined
};
const data = reactive<PageData<LeaveForm, LeaveQuery>>({
  form: { ...initFormData },
  form: {  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    startLeaveDays: undefined,
    endLeaveDays: undefined
  },
  rules: {
    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
    leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
    leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
    leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
  }
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);
const { queryParams } = toRefs(data);

/** æŸ¥è¯¢è¯·å‡åˆ—表 */
const getList = async () => {
@@ -226,19 +150,6 @@
  leaveList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** å–消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** è¡¨å•é‡ç½® */
const reset = () => {
  form.value = { ...initFormData };
  leaveTime.value = [];
  leaveFormRef.value?.resetFields();
};

/** æœç´¢æŒ‰é’®æ“ä½œ */
@@ -262,63 +173,20 @@

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
const handleAdd = () => {
  dialog.visible = true;
  dialog.title = '添加请假申请';
  nextTick(() => {
    reset();
  });
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push(`/demo/leaveEdit/index/add/add`);
};

const changeLeaveTime = () => {
  const startDate = new Date(leaveTime.value[0]).getTime();
  const endDate = new Date(leaveTime.value[1]).getTime();
  const diffInMilliseconds = endDate - startDate;
  form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
};
/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
const handleUpdate = (row?: LeaveVO) => {
  buttonLoading.value = false;
  dialog.visible = true;
  dialog.title = '修改请假申请';
  nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0];
    const res = await getLeave(_id);
    Object.assign(form.value, res.data);
    leaveTime.value = [];
    leaveTime.value.push(form.value.startDate);
    leaveTime.value.push(form.value.endDate);
  });
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push(`/demo/leaveEdit/index/${row.id}/update`);;
};

/** æäº¤æŒ‰é’® */
const submitForm = (status: string) => {
  if (leaveTime.value.length === 0) {
    proxy?.$modal.msgError('请假时间不能为空');
    return;
  }
  leaveFormRef.value?.validate(async (valid: boolean) => {
    form.value.startDate = leaveTime.value[0];
    form.value.endDate = leaveTime.value[1];
    if (valid) {
      buttonLoading.value = true;
      let res: AxiosResponse<LeaveVO>;
      if (form.value.id) {
        res = await updateLeave(form.value);
      } else {
        res = await addLeave(form.value);
      }
      form.value = res.data;
      if (status === 'draft') {
        buttonLoading.value = false;
        proxy?.$modal.msgSuccess('暂存成功');
        dialog.visible = false;
        await getList();
      } else {
        await handleStartWorkFlow(res.data);
      }
    }
  });
/** æŸ¥çœ‹æŒ‰é’®æ“ä½œ */
const handleView = (row?: LeaveVO) => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push(`/demo/leaveEdit/index/${row.id}/view`);
};

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
@@ -341,35 +209,6 @@
  );
};

//提交申请
const handleStartWorkFlow = async (data: LeaveVO) => {
  submitFormData.value.processKey = 'leave1';
  submitFormData.value.businessKey = data.id;
  //流程变量
  taskVariables.value = {
    entity: data,
    leaveDays: data.leaveDays,
    userList: [1, 2],
    userList2: [1, 2]
  };
  submitFormData.value.variables = taskVariables.value;
  const resp = await startWorkFlow(submitFormData.value);
  if (submitVerifyRef.value) {
    buttonLoading.value = false;
    submitVerifyRef.value.openDialog(resp.data.taskId);
  }
};
//审批记录
const handleApprovalRecord = (id: string) => {
  if (approvalRecordRef.value) {
    approvalRecordRef.value.init(id);
  }
};
//提交回调
const submitCallback = async () => {
  dialog.visible = false;
  handleQuery();
};
/** æ’¤é”€æŒ‰é’®æ“ä½œ */
const handleCancelProcessApply = async (id: string) => {
  await proxy?.$modal.confirm('是否确认撤销当前单据？');

 src/views/workflow/leave/leaveEdit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,237 @@
<template>
  <div class="p-2">
    <el-card shadow="never">
        <div style="display: flex;justify-content: space-between;">
          <div>
            <el-button :loading="buttonLoading" 
            v-if="routeParams.type === 'add' || (routeParams.type === 'update' && form.processInstanceVo.businessStatus && (form.processInstanceVo.businessStatus === 'draft' || form.processInstanceVo.businessStatus === 'cancel' || form.processInstanceVo.businessStatus === 'back'))"
            type="info" @click="submitForm('draft')">暂存</el-button>
            <el-button :loading="buttonLoading" v-if="routeParams.type === 'add' || (routeParams.type === 'update' && form.processInstanceVo && (form.processInstanceVo.businessStatus === 'draft' || form.processInstanceVo.businessStatus === 'cancel' || form.processInstanceVo.businessStatus === 'back'))"
            type="primary" @click="submitForm('submit')">提 äº¤</el-button>
            <el-button :loading="buttonLoading" v-if="routeParams.type === 'approval' && form.processInstanceVo && form.processInstanceVo.businessStatus === 'waiting'"
            type="primary" @click="approvalVerifyOpen">审批</el-button>
            <el-button @click="handleApprovalRecord" type="primary" v-if="processInstanceId">流程进度</el-button>
          </div>
          <div>
            <el-button style="float: right" @click="goBack()">返回</el-button>
          </div>
        </div>
    </el-card>
    <el-card shadow="never">
      <el-form ref="leaveFormRef" :disabled="routeParams.type ==='view'" 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-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
            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="请输入请假天数" />
        </el-form-item>
        <el-form-item label="请假原因" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" />
        </el-form-item>
      </el-form>
    </el-card>
    <!-- æäº¤ç»„件 -->
    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
    <!-- å®¡æ‰¹è®°å½• -->
    <approvalRecord ref="approvalRecordRef" />
  </div>
</template>

<script setup name="Leave" lang="ts">
import { addLeave, getLeave, updateLeave } from '@/api/workflow/leave';
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;

const buttonLoading = ref(false);
const loading = ref(true);
const leaveTime = ref<Array<string>>([]);
//流程实例id
const processInstanceId = ref('');
//路由参数 
const routeParams = ref<Record<string, any>>({})
const options = [
  {
    value: '1',
    label: '事假'
  },
  {
    value: '2',
    label: '调休'
  },
  {
    value: '3',
    label: '病假'
  },
  {
    value: '4',
    label: '婚假'
  }
];
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

const leaveFormRef = ref<ElFormInstance>();

const submitFormData = ref<Record<string, any>>({
  businessKey: '',
  processKey: '',
  variables: {}
});
const taskVariables = ref<Record<string, any>>({});


const initFormData: LeaveForm = {
  id: undefined,
  leaveType: undefined,
  startDate: undefined,
  endDate: undefined,
  leaveDays: undefined,
  remark: undefined,
  processInstanceVo: {}
};
const data = reactive<PageData<LeaveForm, LeaveQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    startLeaveDays: undefined,
    endLeaveDays: undefined
  },
  rules: {
    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
    leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
    leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
    leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
  }
});

const { form, rules } = toRefs(data);


/** è¡¨å•é‡ç½® */
const reset = () => {
  form.value = { ...initFormData };
  leaveTime.value = [];
  leaveFormRef.value?.resetFields();
};

const changeLeaveTime = () => {
  const startDate = new Date(leaveTime.value[0]).getTime();
  const endDate = new Date(leaveTime.value[1]).getTime();
  const diffInMilliseconds = endDate - startDate;
  form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
};
/** èŽ·å–详情 */
const getInfo = () => {
  loading.value = true
  buttonLoading.value = false;
  nextTick(async () => {
    const res = await getLeave(routeParams.value.id);
    Object.assign(form.value, res.data);
    leaveTime.value = [];
    leaveTime.value.push(form.value.startDate);
    leaveTime.value.push(form.value.endDate);
    if(form.value.processInstanceVo){
      processInstanceId.value = form.value.processInstanceVo.id
    }
    loading.value = false
    buttonLoading.value = false;
  });
};

/** æäº¤æŒ‰é’® */
const submitForm = (status: string) => {
  if (leaveTime.value.length === 0) {
    proxy?.$modal.msgError('请假时间不能为空');
    return;
  }
  leaveFormRef.value?.validate(async (valid: boolean) => {
    form.value.startDate = leaveTime.value[0];
    form.value.endDate = leaveTime.value[1];
    if (valid) {
      buttonLoading.value = true;
      let res: AxiosResponse<LeaveVO>;
      if (form.value.id) {
        res = await updateLeave(form.value);
      } else {
        res = await addLeave(form.value);
      }
      form.value = res.data;
      if (status === 'draft') {
        buttonLoading.value = false;
        proxy?.$modal.msgSuccess('暂存成功');
        proxy.$tab.closePage(proxy.$route);
        proxy.$router.go(-1)
      } else {
        await handleStartWorkFlow(res.data);
      }
    }
  });
};

//提交申请
const handleStartWorkFlow = async (data: LeaveVO) => {
  submitFormData.value.processKey = 'test';
  submitFormData.value.businessKey = data.id;
  //流程变量
  taskVariables.value = {
    entity: data,
    leaveDays: data.leaveDays,
    userList: [1, 2],
    userList2: [1, 2]
  };
  submitFormData.value.variables = taskVariables.value;
  const resp = await startWorkFlow(submitFormData.value);
  if (submitVerifyRef.value) {
    buttonLoading.value = false;
    submitVerifyRef.value.openDialog(resp.data.taskId);
  }
};
//审批记录
const handleApprovalRecord = () => {
  approvalRecordRef.value.init(processInstanceId.value);
};
//提交回调
const submitCallback = async () => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1)
};

//返回
const goBack = () => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1)
}
//审批
const approvalVerifyOpen = async () => {
  submitVerifyRef.value.openDialog(proxy.$route.query.taskId);
};
onMounted(() => {
  nextTick(async () => {
      routeParams.value = proxy?.$route.params
      reset();
      if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'submit') {
        getInfo()
      }
  })
});
</script>

 src/views/workflow/model/index.vue

@@ -57,18 +57,18 @@
            </el-row>
          </template>

          <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
          <el-table border v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column fixed align="center" prop="name" label="模型名称"></el-table-column>
            <el-table-column align="center" 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" prop="createTime" label="创建时间" width="160"></el-table-column>
            <el-table-column align="center" prop="lastUpdateTime" label="更新时间" width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <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="150" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">

 src/views/workflow/processDefinition/index.vue

@@ -53,12 +53,12 @@
            </el-row>
          </template>

          <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
          <el-table border v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column fixed align="center" prop="name" label="流程定义名称"></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="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column align="center" prop="name" label="流程定义名称"></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" min-width="80" :show-overflow-tooltip="true">
@@ -71,14 +71,14 @@
                <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="50">
              <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 fixed="right" label="操作" align="center" width="170" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
@@ -101,9 +101,17 @@
                    <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="Document" @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)">
                      åŽ†å²ç‰ˆæœ¬
                    </el-button>
                    <el-dropdown>
                      <el-button type="text" size="small">
                        æ›´å¤š<el-icon class="el-icon--right"><arrow-down /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)">历史版本</el-dropdown-item>
                          <el-dropdown-item @click="handleFormOpen(scope.row)">表单配置</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </template>
@@ -158,8 +166,8 @@
    <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-column type="selection" width="55" align="center" />
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column align="center" prop="name" label="流程定义名称"></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>
@@ -208,6 +216,29 @@
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- è¡¨å•é…ç½® -->
    <el-dialog v-model="formDialog.visible" :title="formDialog.title" width="650px" append-to-body :close-on-click-modal="false">
      <el-form :model="formDefinitionForm" label-width="auto">
        <el-form-item label="流程KEY">
          <el-input v-model="formDefinitionForm.processKey" disabled/>
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model="formDefinitionForm.path" placeholder="请假示例路由请填写：/demo/leaveEdit/index"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formDefinitionForm.remark" type="textarea" resize="none"/>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="formDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="handlerSaveForm">
            ä¿å­˜
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

@@ -224,8 +255,10 @@
} from '@/api/workflow/processDefinition';
import ProcessPreview from './components/processPreview.vue';
import { listCategory } from '@/api/workflow/category';
import { getByDefId,saveOrUpdate } from '@/api/workflow/formDefinition';
import { CategoryVO } from '@/api/workflow/category/types';
import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types';
import { FormDefinitionForm } from '@/api/workflow/formDefinition/types';
import { UploadRequestOptions } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -254,6 +287,7 @@
const categoryName = ref('');
/** éƒ¨ç½²æ–‡ä»¶åˆ†ç±»é€‰æ‹© */
const selectCategory = ref();
const formDefinitionForm = ref<FormDefinitionForm>({});

const uploadDialog = reactive<DialogOption>({
  visible: false,
@@ -263,6 +297,11 @@
const processDefinitionDialog = reactive<DialogOption>({
  visible: false,
  title: '历史版本'
});

const formDialog = reactive<DialogOption>({
  visible: false,
  title: '表单配置'
});

// æŸ¥è¯¢å‚æ•°
@@ -429,4 +468,28 @@
    });
  return;
};
//打开表单配置
const handleFormOpen = async (row: ProcessDefinitionVO) => {
   formDialog.visible = true
   formDefinitionForm.value.processKey = row.key
   formDefinitionForm.value.definitionId = row.id
   const resp = await getByDefId(row.id)
   if(resp.data){
    formDefinitionForm.value = resp.data
   }else{
    formDefinitionForm.value.path = undefined
    formDefinitionForm.value.remark = undefined
   }
}
//保存表单
const handlerSaveForm = async () => {
  await proxy?.$modal.confirm('是否确认保存？');
  saveOrUpdate(formDefinitionForm.value).then(resp=>{
    if(resp.code === 200){
      proxy?.$modal.msgSuccess('操作成功');
      formDialog.visible = false
      getList();
    }
  })
}
</script>

 src/views/workflow/processInstance/index.vue

@@ -56,12 +56,11 @@
            </el-row>
          </template>

          <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
          <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column v-if="false" fixed align="center" prop="id" label="id"></el-table-column>
            <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
            <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column align="center" prop="processDefinitionName" label="流程定义名称"></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>
@@ -127,7 +126,7 @@
    </el-row>
    <el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%">
      <el-table v-loading="loading" :data="processDefinitionHistoryList">
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="流程定义名称"></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">

 src/views/workflow/task/allTaskWaiting.vue

@@ -39,9 +39,9 @@
        </el-row>
      </template>

      <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="任务名称"></el-table-column>

 src/views/workflow/task/myDocument.vue

@@ -42,9 +42,9 @@
            </el-row>
          </template>

          <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange">
          <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column v-if="false" fixed align="center" prop="id" label="id"></el-table-column>
            <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
            <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>

 src/views/workflow/task/taskCopyList.vue

@@ -28,9 +28,9 @@
        </el-row>
      </template>

      <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="任务名称"></el-table-column>

 src/views/workflow/task/taskFinish.vue

@@ -28,9 +28,9 @@
        </el-row>
      </template>

      <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="任务名称"></el-table-column>

 src/views/workflow/task/taskWaiting.vue

@@ -28,9 +28,9 @@
        </el-row>
      </template>

      <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
        <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
        <el-table-column fixed align="center" prop="name" label="任务名称"></el-table-column>
@@ -54,22 +54,14 @@
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button link type="primary" size="small" icon="Document" @click="handleApprovalRecord(scope.row)">审批记录</el-button>
              </el-col>
              <el-col v-if="scope.row.participantVo && (scope.row.participantVo.claim === null || scope.row.participantVo.claim === true)" :span="1.5">
                <el-button link type="primary" size="small" icon="Edit" @click="submitVerifyOpen(scope.row.id)">办理</el-button>
              </el-col>
              <el-col v-if="scope.row.participantVo && scope.row.participantVo.claim === true" :span="1.5">
                <el-button link type="primary" size="small" icon="Document" @click="handleReturnTask(scope.row.id)">归还</el-button>
              </el-col>
              <el-col v-if="scope.row.participantVo && scope.row.participantVo.claim === false" :span="1.5">
                <el-button link type="primary" size="small" icon="Document" @click="handleClaimTask(scope.row.id)">认领</el-button>
              </el-col>
            </el-row>
              <el-button v-if="scope.row.participantVo && (scope.row.participantVo.claim === null || scope.row.participantVo.claim === true)"
               type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
              <el-button v-if="scope.row.participantVo && scope.row.participantVo.claim === true"
               type="primary" size="small" icon="Document" @click="handleReturnTask(scope.row.id)">归还</el-button>
              <el-button v-if="scope.row.participantVo && scope.row.participantVo.claim === false"
               type="primary" size="small" icon="Document" @click="handleClaimTask(scope.row.id)">认领</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -81,22 +73,13 @@
        @pagination="handleQuery"
      />
    </el-card>
    <!-- å®¡æ‰¹è®°å½• -->
    <approvalRecord ref="approvalRecordRef" />
    <!-- æäº¤ç»„件 -->
    <submitVerify ref="submitVerifyRef" @submit-callback="handleQuery" />
  </div>
</template>

<script lang="ts" setup>
import { getPageByTaskWait, claim, returnTask } from '@/api/workflow/task';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// é®ç½©å±‚
@@ -124,12 +107,6 @@
onMounted(() => {
  getWaitingList();
});
//审批记录
const handleApprovalRecord = (row: TaskVO) => {
  if (approvalRecordRef.value) {
    approvalRecordRef.value.init(row.processInstanceId);
  }
};
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  getWaitingList();
@@ -156,10 +133,18 @@
    loading.value = false;
  });
};
//提交
const submitVerifyOpen = async (id: string) => {
  if (submitVerifyRef.value) {
    submitVerifyRef.value.openDialog(id);
//办理
const handleOpen = async (row: TaskVO) => {
  if(row.wfFormDefinitionVo){
    proxy.$tab.closePage(proxy.$route);
    proxy.$router.push({
      path: `${row.wfFormDefinitionVo.path}/${row.businessKey}/approval`,
      query: {
        taskId: row.id
      }
    })
  }else{
    proxy?.$modal.msgError('请到流程定义菜单配置路由！');
  }
};