延期申请工作流

guoshilong

2022-12-21 bd4a30e75057eac7186ca9de6f19e00fd8d84595

延期申请工作流

 src/api/application/application.js

@@ -60,7 +60,7 @@
  })
}

// =====================请假流程===========================
// =====================审核流程===========================
/*
 *开始流程
 */

 src/api/applicationDelay/applicationDelay.js

@@ -47,4 +47,43 @@
    data: row
  })
}
// =====================审核流程===========================
/*
 *开始流程
 */
export const startDelayProcess = (row) => {
  return request({
    url: '/apiapplicationDelay/applicationDelay/start-process',
    method: 'post',
    data: row
  })
}

/**
 * 获取申请流程详情
 * @param businessId
 * @returns {AxiosPromise}
 */
export const delayDetail = (businessId) => {
  return request({
    url: '/apiapplicationDelay/applicationDelay/process-detail',
    method: 'get',
    params: {
      businessId
    }
  })
}

/**
 * 审批人员完成任务
 * @param data
 * @returns {AxiosPromise}
 */
export const completeTask = (data) => {
  return request({
    url: '/apiapplicationDelay/applicationDelay/complete-task',
    method: 'post',
    data
  })
}


 src/const/applicationDelay/applicationDelay.js

@@ -1,3 +1,8 @@

const labelWidth = '20%'
import store from "@/store";
const user = store.getters.userInfo
const userId = user.user_id
export default {
  height:'auto',
  calcHeight: 30,
@@ -18,88 +23,149 @@
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      display:false,
    },
    {
      label: "申请表主键",
      prop: "application",
      type: "input",
      label: "申请编号",
      labelWidth:'10%',
      prop: "no",
      span:24,
      type: "select",
      dicUrl: "/api/application/application/getAll?status=10&&userId="+userId,
      props:{
        label:"no",
        value:"no"
      },
      typeformat(item, label, value) {
        console.log(item,label,value)
        return `${item[label]}`
      },
      rules: [{required: true, trigger: ['blur','change'],message:'请输入申请编号'}]
    },
    {
      label: "延期时间",
      prop: "delayTime",
      type: "input",
      label: "通行开始时间",
      labelWidth:labelWidth,
      prop: "delayStartTime",
      type: "date",
      format:'yyyy-MM-dd',
      valueFormat:'yyyy-MM-dd',
      disabled:false,
    },
    {
      label: "租户id",
      prop: "tenantId",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "通行开始时间",
      labelWidth:labelWidth,
      prop: "delayEndTime",
      type: "date",
      format:'yyyy-MM-dd',
      valueFormat:'yyyy-MM-dd',
      disabled:false,
    },
    {
      label: "创建人",
      prop: "createUser",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "行驶路线",
      span:12,
      row: true,
      labelWidth:labelWidth,
      prop: "pathWay",
      type: "textarea",
      minRows:2,
    },
    {
      label: "创建部门",
      prop: "createDept",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "延期原因",
      span: 12,
      row:true,
      labelWidth:labelWidth,
      prop: "reason",
      type: "select",
      dicUrl: "/api/blade-system/dict-biz/dictionary?code=delay_reason",
      props:{
        label:"dictValue",
        value:"dictKey"
      }
    },
    {
      label: "创建时间",
      prop: "createTime",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "备注",
      labelWidth:labelWidth,
      prop: "remark",
      type: "textarea",
      minRows:2,
    },
  ]
}

export const detailOption = {
  height:'auto',
  calcHeight: 30,
  tip: false,
  submitBtn:false,
  emptyBtn:false,
  border: true,
  index: true,
  selection: true,
  dialogClickModal: false,
  detail:true,
  column: [
    {
      label: "申请编号",
      labelWidth:'10%',
      prop: "no",
      span:24,
      type: "select",
      disabled:true,
      dicUrl: "/api/application/application/getAll?status=10",
      props:{
        label:"no",
        value:"no"
      },
    },
    {
      label: "修改人",
      prop: "updateUser",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "通行开始时间",
      labelWidth:labelWidth,
      prop: "delayStartTime",
      type: "date",
      format:'yyyy-MM-dd',
      valueFormat:'yyyy-MM-dd',
      disabled:true,
    },
    {
      label: "修改时间",
      prop: "updateTime",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "通行开始时间",
      labelWidth:labelWidth,
      prop: "delayEndTime",
      type: "date",
      format:'yyyy-MM-dd',
      valueFormat:'yyyy-MM-dd',
      disabled:true,
    },
    {
      label: "状态",
      prop: "status",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "行驶路线",
      span:12,
      row: true,
      labelWidth:labelWidth,
      disabled:true,
      prop: "pathWay",
      type: "textarea",
      minRows:2,
    },
    {
      label: "是否已删除",
      prop: "isDeleted",
      type: "input",
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
      label: "延期原因",
      span: 12,
      row:true,
      labelWidth:labelWidth,
      prop: "reason",
      type: "select",
      dicUrl: "/api/blade-system/dict-biz/dictionary?code=delay_reason",
      props:{
        label:"dictValue",
        value:"dictKey"
      },
      disabled:true,
    },
    {
      label: "备注",
      labelWidth:labelWidth,
      prop: "remark",
      type: "textarea",
      minRows:2,
      disabled:true,
    },
  ]
}

 src/router/views/index.js

@@ -104,6 +104,7 @@
      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
  }]
},
  //通行证审核工作流路由
  {
    path: '/work/process/audit',
    component: Layout,
@@ -136,6 +137,75 @@
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/audit/detail')
      }]
  },
  //通行证延期审核工作流路由
  {
    path: '/work/process/delayAudit',
    component: Layout,
    redirect: '/work/process/delayAudit/form',
    children: [
      {
        path: 'form/:processDefinitionId',
        name: '审核流程',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/delayAudit/form')
      },
      {
        path: 'handle/:taskId/:processInstanceId/:businessId',
        name: '处理审核流程',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/delayAudit/handle')
      },
      {
        path: 'detail/:processInstanceId/:businessId',
        name: '审核流程详情',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/delayAudit/detail')
      }]
  },

  //车辆变更审核工作流路由
  {
    path: '/work/process/carChangeAudit',
    component: Layout,
    redirect: '/work/process/carChangeAudit/form',
    children: [
      {
        path: 'form/:processDefinitionId',
        name: '审核流程',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/carChangeAudit/form')
      },
      {
        path: 'handle/:taskId/:processInstanceId/:businessId',
        name: '处理审核流程',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/carChangeAudit/handle')
      },
      {
        path: 'detail/:processInstanceId/:businessId',
        name: '审核流程详情',
        meta: {
          i18n: 'work'
        },
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/work/process/carChangeAudit/detail')
      }]
  }



 src/views/work/process/carChangeAudit/handle.vue

New file
@@ -0,0 +1,176 @@
<template>
  <basic-container>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row type="flex" class="row-bg" justify="end">
        <el-form-item>
          <el-button type="primary" @click="handleAgree">同意</el-button>
          <el-button type="danger" @click="handleDisagree">驳回</el-button>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-row>
      <el-card shadow="hover">
        <div slot="header">
          <span>审批信息</span>
        </div>

        <avue-form :option="option" v-model="form"/>

        <avue-form :option="commitOption" v-model="commitModel"/>

      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程信息</span>
        </div>
        <el-row type="flex" class="row-bg">
          <el-timeline>
            <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
              <el-card shadow="hover">
                <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程跟踪</span>
        </div>
        <el-row class="row-bg">
          <flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
        </el-row>
      </el-card>
    </el-form>
  </basic-container>
</template>

<script>
import {historyFlowList} from "@/api/work/process";
import {completeTask,delayDetail} from "@/api/applicationDelay/applicationDelay";
import {detailOption} from "@/const/applicationDelay/applicationDelay";

export default {
  name: "handle",
  data() {
    return {
      taskId: '',
      businessId: '',
      processInstanceId: '',
      src: '',
      flowList: [],
      form: {},
      option:detailOption,
      commitModel:{},
      commitOption:{
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "反馈意见",
            prop: "comment",
            span:24,
            type:'textarea',
            hide: true,
            rules: [{
              required: true,
              message: "请输入反馈意见",
              trigger: "blur"
            }]
          },
        ]
      },

    }
  },
  created() {
    this.controlOption("open")
    this.init();
  },
  beforeDestroy() {
    this.controlOption("close")
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
    // 可以访问组件实例 `this`
    if (to.fullPath !== from.fullPath) {
      next();
      this.init();
    }
  },
  methods: {
    init() {
      this.taskId = this.$route.params.taskId;
      this.processInstanceId = this.$route.params.processInstanceId;
      this.businessId = this.$route.params.businessId;
      historyFlowList(this.processInstanceId).then(res => {
        const data = res.data;
        if (data.success) {
          this.flowList = data.data;
        }
      })
      delayDetail(this.businessId).then(res => {
        const data = res.data;
        if (data.success) {
          this.form = data.data;
        }
      })
    },
    handleAgree() {
      const params = {
        taskId: this.taskId,
        processInstanceId: this.processInstanceId,
        flag: 'ok',
        comment: this.commitModel.comment,
      };
      completeTask(params).then(res => {
        const data = res.data;
        if (data.success) {
          this.$message.success(data.msg);
          this.$router.$avueRouter.closeTag();
          this.$router.push({path: `/work/start`});
        } else {
          this.$message.error(data.msg || '提交失败');
        }
      })
    },
    handleDisagree() {
      const params = {
        taskId: this.taskId,
        processInstanceId: this.processInstanceId,
        comment: this.commitModel.comment,
      };
      completeTask(params).then(res => {
        const data = res.data;
        if (data.success) {
          this.$message.success(data.msg);
          this.$router.$avueRouter.closeTag();
          this.$router.push({path: `/work/start`});
        } else {
          this.$message.error(data.msg || '提交失败');
        }
      })
    },
    handleCancel() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({path: `/work/start`});
    },
    controlOption(arg){
      if (arg == 'open'){
        this.option.detail = false
      }else if(arg =='close'){
        this.option.detail = true
      }
    }
  }
}
</script>

<style scoped>

</style>

 src/views/work/process/delayAudit/form.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div>
    <basic-container>
      <avue-form :option="option" v-model="form" @submit="handleSubmit">

        <template slot="noType" slot-scope="{item,value,label}">
          <span>申请编号:{{item.no}}---申请时间:{{item.createTime}}---到期时间:{{item.endTime}}</span>
        </template>

      </avue-form>
    </basic-container>
    <basic-container>
      <flow-design :is-display="true" :process-definition-id="processDefinitionId"></flow-design>
    </basic-container>
  </div>
</template>

<script>

import option from "@/const/applicationDelay/applicationDelay"
import {startDelayProcess} from "@/api/applicationDelay/applicationDelay";

export default {
  name: "form",
  data() {
    return {
      processDefinitionId: '',
      form: {},
      option: option
    }
  },
  created() {
    this.processDefinitionId = this.$route.params.processDefinitionId;
  },
  methods: {
    handleSubmit() {
      const params = {
        processDefinitionId: this.$route.params.processDefinitionId,
        ...this.form,
      };
      startDelayProcess(params).then(resp => {
        const data = resp.data;
        if (data.success) {
          this.$message.success(data.msg);
          this.$router.$avueRouter.closeTag();
          this.$router.push({path: `/work/start`});
        } else {
          this.$message.error(data.msg || '提交失败');
        }
      });
    }
  }
}
</script>

<style scoped>

</style>

 src/views/work/process/delayAudit/handle.vue

New file
@@ -0,0 +1,176 @@
<template>
  <basic-container>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row type="flex" class="row-bg" justify="end">
        <el-form-item>
          <el-button type="primary" @click="handleAgree">同意</el-button>
          <el-button type="danger" @click="handleDisagree">驳回</el-button>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-row>
      <el-card shadow="hover">
        <div slot="header">
          <span>审批信息</span>
        </div>

        <avue-form :option="option" v-model="form"/>

        <avue-form :option="commitOption" v-model="commitModel"/>

      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程信息</span>
        </div>
        <el-row type="flex" class="row-bg">
          <el-timeline>
            <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
              <el-card shadow="hover">
                <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程跟踪</span>
        </div>
        <el-row class="row-bg">
          <flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
        </el-row>
      </el-card>
    </el-form>
  </basic-container>
</template>

<script>
import {historyFlowList} from "@/api/work/process";
import {completeTask,delayDetail} from "@/api/applicationDelay/applicationDelay";
import {detailOption} from "@/const/applicationDelay/applicationDelay";

export default {
  name: "handle",
  data() {
    return {
      taskId: '',
      businessId: '',
      processInstanceId: '',
      src: '',
      flowList: [],
      form: {},
      option:detailOption,
      commitModel:{},
      commitOption:{
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "反馈意见",
            prop: "comment",
            span:24,
            type:'textarea',
            hide: true,
            rules: [{
              required: true,
              message: "请输入反馈意见",
              trigger: "blur"
            }]
          },
        ]
      },

    }
  },
  created() {
    this.controlOption("open")
    this.init();
  },
  beforeDestroy() {
    this.controlOption("close")
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
    // 可以访问组件实例 `this`
    if (to.fullPath !== from.fullPath) {
      next();
      this.init();
    }
  },
  methods: {
    init() {
      this.taskId = this.$route.params.taskId;
      this.processInstanceId = this.$route.params.processInstanceId;
      this.businessId = this.$route.params.businessId;
      historyFlowList(this.processInstanceId).then(res => {
        const data = res.data;
        if (data.success) {
          this.flowList = data.data;
        }
      })
      delayDetail(this.businessId).then(res => {
        const data = res.data;
        if (data.success) {
          this.form = data.data;
        }
      })
    },
    handleAgree() {
      const params = {
        taskId: this.taskId,
        processInstanceId: this.processInstanceId,
        flag: 'ok',
        comment: this.commitModel.comment,
      };
      completeTask(params).then(res => {
        const data = res.data;
        if (data.success) {
          this.$message.success(data.msg);
          this.$router.$avueRouter.closeTag();
          this.$router.push({path: `/work/start`});
        } else {
          this.$message.error(data.msg || '提交失败');
        }
      })
    },
    handleDisagree() {
      const params = {
        taskId: this.taskId,
        processInstanceId: this.processInstanceId,
        comment: this.commitModel.comment,
      };
      completeTask(params).then(res => {
        const data = res.data;
        if (data.success) {
          this.$message.success(data.msg);
          this.$router.$avueRouter.closeTag();
          this.$router.push({path: `/work/start`});
        } else {
          this.$message.error(data.msg || '提交失败');
        }
      })
    },
    handleCancel() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({path: `/work/start`});
    },
    controlOption(arg){
      if (arg == 'open'){
        this.option.detail = false
      }else if(arg =='close'){
        this.option.detail = true
      }
    }
  }
}
</script>

<style scoped>

</style>