cd-work-flow-web/src/views/activiti/taskCheck.vue

<template>
  <div>
    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="100%" :closable="false">
      <component
        :disabled="lcModa.disabled"
        v-if="lcModa.visible"
        :is="lcModa.formComponent"
        :processData="lcModa.processData"
        :isNew="lcModa.isNew"
        @close=";(lcModa.visible = false), (lcModa.disabled = false)"
        @getDataList="getDataList"
      ></component>
    </a-modal>

    <!-- 审批操作 -->
    <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" width="100%">
      <div v-if="modalTaskVisible">
        <a-form ref="form" :model="form" :label-width="85" :rules="formValidate">
          <a-form-item label="审批意见" prop="reason">
            <a-input type="textarea" v-model="form.comment" :rows="4" />
          </a-form-item>
          <a-form-item label="下一审批人" prop="assignees" v-show="showAssign" :error="error">
            <a-select v-model="form.assignees" placeholder="请选择" allowClear mode="multiple" :loading="userLoading">
              <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{
                item.realname
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="下一审批人" v-show="isGateway">
            <span>分支网关处暂不支持自定义选择下一审批人，将发送给下一节点所有人</span>
          </a-form-item>
          <div v-show="form.type == 1">
            <a-form-item label="驳回至">
              <a-select v-model="form.backTaskKey" :loading="backLoading" @change="changeBackTask">
                <a-select-option v-for="(item, i) in backList" :key="i" :value="item.key">{{item.name}}
              </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="指定原节点审批人" prop="assignees" v-show="form.backTaskKey != -1" :error="error">
              <a-select v-model="form.assignees" placeholder="请选择" allowClear mode="multiple" :loading="userLoading">
                <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <a-form-item label="选择委托人" prop="userId" :error="error" v-show="form.type == 2">
            <JSelectUserByDep v-model="form.userId" :multi="false"></JSelectUserByDep>
          </a-form-item>
          <a-form-item label="消息通知">
            <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
            <!-- <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
            <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox> -->
          </a-form-item>
        </a-form>
      </div>
      <div slot="footer">
        <a-button type="text" @click="modalTaskVisible = false">取消</a-button>
        <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
      </div>
    </a-modal>
    <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
  </div>
</template>

<script>
  import { getAction,postAction } from '@/api/manage'
  import { mapActions } from 'vuex'
  import store from '@/store/'
  import outerFormCheck from '../../share/modal/OuterFormCheck'
  import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'

  export default {
    name: "taskCheck",
    components: { JSelectUserByDep, outerFormCheck },
    data() {
      return {
        key : "",
        taskInfo:{},

        modalTaskVisible: false,
        backList: [
          {
            key: '-1',
            name: '发起人'
          }
        ],
        error: '',
        showAssign: false,
        searchForm: {
          // 搜索框对应data对象
          name: ''
        },
        modalTaskTitle: '',
        modalTitle: '', // 添加或编辑标题
        form: {
          id: '',
          userId: '',
          procInstId: '',
          comment: '',
          type: 0,
          assignees: [],
          backTaskKey: '-1',
          sendMessage: true,
          sendSms: false,
          sendEmail: false
        },
        formValidate: {
          // 表单验证规则
        },
        submitLoading: false, // 添加或编辑提交状态
        data: [], // 表单数据
        total: 0, // 表单数据总数
        dictPriority: [],
        isGateway: false,
        lcModa: {
          title: '',
          disabled: false,
          visible: false,
          formComponent: null,
          isNew: false
        },

        url:{
          taskInfoUrl:"/actTask/getSelfTaskById",
          outformViewUrl:"/actBusiness/external/getViewUrl",
        }
      }
    },
    created () {
      this.key = this.$route.params.id;   
      this.$message.info(this.key)
      this.login(this.key);   
    },
    methods: {
      ...mapActions(['OaLogin']),
      login(key){
        this.OaLogin({key,key})
          .then(res => {

            this.getTaskInfo(key);
          })
      },
      // 根据taskid获取待办任务的某一条
      getTaskInfo(key){
        getAction(this.url.taskInfoUrl,{key:key}).then(res => {
          if (res.success) {
            if (res.result.length == 0){
              this.$message.info("待办任务不存在");
              return;
            }
            this.taskInfo = res.result[0];
            this.showTask(this.taskInfo);
          }else{
            this.$message.error(res.message);
          }
        })

      },
      // 显示任务信息
      showTask(r){
        if (!r.routeName) {
          this.$message.warning('该流程信息未配置表单，请联系开发人员！')
          return
        }
        r.operationType = '1' //代办
        if (r.routeName.indexOf('外部表单') != -1||r.tableName.indexOf('外部表单') != -1) {
          //其他项目的表单流程
          var id = r.tableId //项目管理合同数据id
          this.showOuterFormViewDlg(r.tableId, '业务流程审批：' + r.processName, r);
        } else if (r.routeName.indexOf('自定义') != -1) {
          //自定义的表单流程
          this.lcModa.disabled = true
          this.lcModa.title = '查看流程业务信息：' + r.processName
          let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
          this.lcModa.formComponent = com.component
          this.lcModa.isNew = false
          this.lcModa.processData = r
          this.lcModa.visible = true
        } else {
          //固定的表单流程
          this.lcModa.disabled = true
          this.lcModa.title = '查看流程业务信息：' + r.processName
          this.lcModa.formComponent = this.getFormComponent(r.routeName).component
          this.lcModa.processData = r
          this.lcModa.isNew = false
          this.lcModa.visible = true
        }
      },
      // 显示外部表单
      showOuterFormViewDlg(tableId, title, processData){
        getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
            if (res.success){
              var url = res.result.url;
              var param = res.result.param;
              url = url+"?"+this.jsonToUrlParam(param);

              this.$refs.outerFormCheck.openDialog(url, title, processData);
            }else{
                this.$message.error(res.message);
            }        
        });
      },
      // 封装跳转地址
      jsonToUrlParam(query){
        var tmpArr = [];
        for (var i in query){
          var key = encodeURIComponent(i);
          var value = encodeURIComponent(query[i]);
          tmpArr.push(key+"="+value);
        }
        return tmpArr.join("&");
      },
      // 提交表单
      handelSubmit() {
        console.log('提交')
        this.submitLoading = true
        var formData = Object.assign({}, this.form)
        formData.assignees = formData.assignees.join(',')
        if (formData.type == 0) {
          // 通过
          if (this.showAssign && formData.assignees.length < 1) {
            this.$message.error('请至少选择一个审批人')
            this.submitLoading = false
            return
          } else {
            this.error = ''
          }
          this.postFormAction(this.url.pass, formData).then(res => {
            this.submitLoading = false
            if (res.success) {
              this.$message.success('操作成功')
              this.modalTaskVisible = false
              this.getDataList()
            }
          })
        } else if (formData.type == 1) {
          // 驳回
          if (formData.backTaskKey == '-1') {
            // 驳回至发起人
            this.postFormAction(this.url.back, formData).then(res => {
              this.submitLoading = false
              if (res.success) {
                this.$message.success('操作成功')
                this.modalTaskVisible = false
                this.getDataList()
              }
            })
          } else {
            // 自定义驳回
            if (formData.backTaskKey != '-1' && formData.assignees.length < 1) {
              this.$message.error('请至少选择一个审批人')
              this.submitLoading = false
              return
            } else {
              this.error = ''
            }
            this.postFormAction(this.url.backToTask, formData).then(res => {
              this.submitLoading = false
              if (res.success) {
                this.$message.success('操作成功')
                this.modalTaskVisible = false
                this.getDataList()
              }
            })
          }
        } else if (formData.type == 2) {
          // 委托
          if (!formData.userId) {
            this.$message.error('请选择一委托人')
            this.submitLoading = false
            return
          } else {
            this.error = ''
          }
          this.postFormAction(this.url.delegate, formData).then(res => {
            this.submitLoading = false
            if (res.success) {
              this.$message.success('操作成功')
              this.modalTaskVisible = false
              this.getDataList()
            }
          })
        }
      },
      handleSearch(){

      }

    }
  }
</script>

<style scoped>

</style>