|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="state.dialogVisible"
|
|
|
+ draggable
|
|
|
+ :title="state.title + '流程'"
|
|
|
+ ref="dialogRef"
|
|
|
+ @mouseup="mouseup"
|
|
|
+ :style="'transform: ' + state.transform + ';'"
|
|
|
+ append-to-body
|
|
|
+ destroy-on-close
|
|
|
+ @opened="opened"
|
|
|
+ >
|
|
|
+ <el-form :model="state.ruleForm" label-width="100px" ref="ruleFormRef">
|
|
|
+ <el-row :gutter="35">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="!['return'].includes(state.processType)">
|
|
|
+ <el-form-item label="下一环节" prop="nextStepCode" :rules="[{ required: true, message: '请选择下一环节', trigger: 'change' }]">
|
|
|
+ <el-select v-model="state.ruleForm.nextStepCode" placeholder="请选择下一环节" class="w100" @change="selectNextStep">
|
|
|
+ <el-option v-for="item in state.nextStepOptions" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="!['return'].includes(state.processType)">
|
|
|
+ <el-form-item label="处理人" prop="nextHandlers" :rules="[{ required: false, message: '请选择处理人', trigger: 'change' }]">
|
|
|
+ <el-select
|
|
|
+ v-model="state.ruleForm.nextHandlers"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ placeholder="请选择处理人"
|
|
|
+ class="w100"
|
|
|
+ @change="selectHandlers"
|
|
|
+ value-key="key"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option v-for="item in state.handlerOptions" :key="item.key" :label="item.value" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="!['return'].includes(state.processType) && showMainHandler">
|
|
|
+ <el-form-item label="主办" prop="nextMainHandler" :rules="[{ required: false, message: '请选择主办', trigger: 'change' }]">
|
|
|
+ <el-select v-model="state.ruleForm.nextMainHandler" placeholder="请选择主办" class="w100" filterable>
|
|
|
+ <el-option v-for="item in state.handlerMainOptions" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="" prop="acceptSms">
|
|
|
+ <el-checkbox v-model="state.ruleForm.acceptSms" label="短信通知" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col> -->
|
|
|
+ <!-- 办理流程展示期满时间 -->
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="['next'].includes(state.processType)">
|
|
|
+ <el-form-item label="期满时间" prop="expiredTime" :rules="[{ required: true, message: '请选择期满时间', trigger: 'change' }]">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="state.ruleForm.expiredTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择期满时间"
|
|
|
+ value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
+ class="w100"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- 办理流程和开始流程是否发起会签 -->
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="['next', 'start'].includes(state.processType)">
|
|
|
+ <el-form-item
|
|
|
+ label="是否发起会签"
|
|
|
+ prop="isStartCountersign"
|
|
|
+ :rules="[{ required: false, message: '请选择是否发起会签', trigger: 'change' }]"
|
|
|
+ >
|
|
|
+ <el-switch v-model="state.ruleForm.isStartCountersign" inline-prompt active-text="是" inactive-text="否" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item :label="state.title + '意见'" prop="opinion" :rules="[{ required: true, message: '请填写常用意见', trigger: 'blur' }]">
|
|
|
+ <Comment
|
|
|
+ @chooseComment="chooseComment"
|
|
|
+ v-model="state.ruleForm.opinion"
|
|
|
+ placeholder="请填写常用意见"
|
|
|
+ :loading="state.loading"
|
|
|
+ :commonEnum="state.commonEnum"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="附件" prop="additions" :rules="[{ required: false, message: '请填写诉求内容', trigger: 'change' }]">
|
|
|
+ <annex-list></annex-list>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="onCancel" class="default-button">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">提 交</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="processApproval">
|
|
|
+import { defineAsyncComponent, reactive, ref, computed } from 'vue';
|
|
|
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
|
|
|
+import other from '/@/utils/other';
|
|
|
+import { OrderFlowParams, orderStartFlow } from '/@/api/business/order';
|
|
|
+import { workflowNextSteps, workflowNext, workflowRecall, workflowPrevious, workflowRecallParams, workflowStepOptions } from '/@/api/system/workflow';
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const Comment = defineAsyncComponent(() => import('/@/views/business/order/components/Order-comment.vue')); // 常用意见
|
|
|
+const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue')); // 附件列表
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['orderProcessSuccess', 'orderProcessFailed']);
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false, // 弹窗显示隐藏
|
|
|
+ title: '提交', // 弹窗标题
|
|
|
+ ruleForm: {
|
|
|
+ acceptSms: false, // 是否接收短信
|
|
|
+ opinion: '', // 意见
|
|
|
+ nextHandlers: [], // 下一节点处理人
|
|
|
+ nextMainHandler: '', // 主办人
|
|
|
+ expiredTime: '', //期满时间
|
|
|
+ isStartCountersign: false, // 是否发起会签
|
|
|
+ },
|
|
|
+ nextStepOptions: [], // 下一节点
|
|
|
+ handlerOptions: [], // 处理人
|
|
|
+ transform: 'translate(0px, 0px)', // 滚动条位置
|
|
|
+ fileList: [], // 附件列表
|
|
|
+ loading: false, // 提交按钮loading
|
|
|
+ processType: 'next', // 流程状态
|
|
|
+ workflowId: '', // 流程id
|
|
|
+ commonEnum: '', // 常用意见类型
|
|
|
+ handlerClassifies: [], //撤回处理人
|
|
|
+ handlerMainOptions: [], // 主办人
|
|
|
+ handleId: '', // 流程处理ID
|
|
|
+});
|
|
|
+const ruleFormRef = ref<RefType>(); //表单组件
|
|
|
+// 打开弹窗
|
|
|
+const openDialog = async (val: any) => {
|
|
|
+ state.processType = val.processType ?? 'next'; // 流程状态
|
|
|
+ state.ruleForm.workflowId = state.workflowId = val.id ?? ''; // 流程id
|
|
|
+ state.commonEnum = val.commonEnum ?? ''; // 常用意见类型
|
|
|
+ state.title = val.title ?? '提交流程'; // 流程标题
|
|
|
+ let res: any = {};
|
|
|
+ switch (state.processType) {
|
|
|
+ case 'start': //开始流程
|
|
|
+ res = await OrderFlowParams(); //获取开启流程参数
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'recall': // 撤回流程
|
|
|
+ res = await workflowRecallParams(state.workflowId); //撤回参数
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'return': // 退回流程
|
|
|
+ break;
|
|
|
+ case 'next': // 默认下一流程
|
|
|
+ res = await workflowNextSteps(state.workflowId);
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.ruleForm.expiredTime = res.result?.expiredTime ?? '';
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'delay': // 延期
|
|
|
+ res = await workflowNextSteps(state.workflowId);
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.ruleForm.expiredTime = res.result?.expiredTime ?? '';
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'supervise': // 督办
|
|
|
+ res = await workflowNextSteps(state.workflowId);
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.ruleForm.expiredTime = res.result?.expiredTime ?? '';
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ default: // 默认下一流程
|
|
|
+ res = await workflowNextSteps(state.workflowId);
|
|
|
+ state.nextStepOptions = res.result.steps;
|
|
|
+ state.ruleForm.expiredTime = res.result?.expiredTime ?? '';
|
|
|
+ state.handleId = res.result.id;
|
|
|
+ if (state.nextStepOptions.length === 1) {
|
|
|
+ state.ruleForm.nextStepCode = state.nextStepOptions[0].key;
|
|
|
+ getNextStepOption(res.result.id, state.nextStepOptions[0].key);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ state.dialogVisible = true;
|
|
|
+};
|
|
|
+// 打开弹窗清空表单
|
|
|
+const opened = () => {
|
|
|
+ ruleFormRef.value?.clearValidate();
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+};
|
|
|
+// 流程选择下一环节
|
|
|
+const selectNextStep = (val: any) => {
|
|
|
+ ruleFormRef.value?.resetFields('nextHandlers');
|
|
|
+ ruleFormRef.value?.resetFields('nextMainHandler');
|
|
|
+ let next: any;
|
|
|
+ next = state.nextStepOptions.find((item: any) => item.key === val);
|
|
|
+ getNextStepOption(state.handleId, next.key);
|
|
|
+};
|
|
|
+// 查询流程下一节点参数
|
|
|
+const getNextStepOption = async (DefineId: string, Code: string) => {
|
|
|
+ try {
|
|
|
+ const res: any = await workflowStepOptions({ DefineId, Code });
|
|
|
+ state.handlerOptions = res.result ?? [];
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 选择处理人
|
|
|
+const selectHandlers = () => {
|
|
|
+ ruleFormRef.value?.resetFields('nextMainHandler');
|
|
|
+};
|
|
|
+const showMainHandler = computed(() => {
|
|
|
+ return state.ruleForm.nextHandlers.length > 1;
|
|
|
+});
|
|
|
+// 主办从处理人中选择
|
|
|
+state.handlerMainOptions = computed(() => {
|
|
|
+ return state.ruleForm.nextHandlers;
|
|
|
+});
|
|
|
+// 设置抽屉
|
|
|
+const dialogRef = ref<RefType>();
|
|
|
+const mouseup = () => {
|
|
|
+ state.transform = dialogRef.value.dialogContentRef.$el.style.transform;
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
+};
|
|
|
+// 取消
|
|
|
+const onCancel = () => {
|
|
|
+ closeDialog();
|
|
|
+};
|
|
|
+// 选择常用意见 填入填写框
|
|
|
+const chooseComment = (item: any) => {
|
|
|
+ state.ruleForm.opinion += item.content;
|
|
|
+};
|
|
|
+// 提交
|
|
|
+const onSubmit = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
+ ElMessageBox.confirm(`确认提交?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ state.loading = true;
|
|
|
+ state.ruleForm.additions = state.fileList;
|
|
|
+ let submitObj = other.deepClone(state.ruleForm);
|
|
|
+ if (submitObj.nextHandlers && submitObj.nextHandlers.length) {
|
|
|
+ submitObj.nextHandlers = submitObj.nextHandlers.map((item: any) => {
|
|
|
+ return {
|
|
|
+ id: item.key,
|
|
|
+ name: item.value,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ if (submitObj.nextHandlers.length === 1) {
|
|
|
+ submitObj.nextMainHandler = submitObj.nextHandlers[0].id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ switch (state.processType) {
|
|
|
+ case 'start': //开始流程
|
|
|
+ orderStartFlow(state.workflowId, submitObj)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessSuccess');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'recall': // 撤回流程
|
|
|
+ workflowRecall(submitObj)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessSuccess');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessFailed');
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'return': // 退回流程
|
|
|
+ workflowPrevious(submitObj)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessSuccess');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessFailed');
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'next': // 默认下一流程
|
|
|
+ workflowNext(submitObj)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessSuccess');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessFailed');
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ default: // 默认下一流程
|
|
|
+ workflowNext(submitObj)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessSuccess');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
+ emit('orderProcessFailed');
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ });
|
|
|
+};
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
+});
|
|
|
+</script>
|