iTDM-web/itdmWeb/src/views/activiti/ActivitiDaibanList.vue

<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-model-item prop="key" label="流程实例编号">
                <a-input v-model="queryParam.key" allowClear placeholder="请输入流程实例编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button @click="searchQuery" type="primary" icon="search" style="margin-right: 8px">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        :columns="columns"
        :dataSource="dataSource"
        rowKey="id"
        :loading="loading"
        class="j-table-force-nowrap"
        :pagination="ipagination"
        @change="handleTableChange"
      >

        <span slot="action" slot-scope="text, record">

          <a @click="handleDetail1(record)">查看流程进度</a>
           <a-divider type="vertical"/>
          <a @click="handleBanli(record)">办理</a>

        </span>
        <a-divider type="vertical" />
      </a-table>

      <activiti-file-model ref="ativitiFileModel" ></activiti-file-model>
      <pic-form1 ref="picForm" @ok="modalFormOk" ></pic-form1>
    </a-card>

    <a-modal
      title="表单详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @cancel="modalCancel"
    >
      <template>
        <a-modal
          title="节点详情"
          :visible="visiblexx"
          :confirm-loading="confirmLoading"
          @cancel="modalxxCancel"
        >
          <template>
            <a-col :span="24">
              <a-select :value="jiedianValue"  style="width: 100%"  @change="handleChange">
                <a-select-option v-for="(value,key) in getRunNodes" :key="key">
                  {{ value }}
                </a-select-option>
              </a-select>
            </a-col>
          </template>
          <template slot="footer">
            <a-button @click="handleZhiShuCancel">确定</a-button>
          </template>
        </a-modal>
      </template>
      <template slot="footer">
        <a-button @click="handleCancel">驳回</a-button>
        <a-button @click="handleZhiCancel">驳回指定</a-button>
        <a-button type="primary" @click="handleOk">通过</a-button>
      </template>
      <template v-for="l in circleData">
        <div style="pointer-events: none">
          <fm-generate-form
            :data="l.formData"
            :value="l.fillData"
          >
          </fm-generate-form>
        </div>
      </template>

      <template>
        <div style="margin-top: 80px">
          <fm-generate-form
            @on-change="mychangeValue"
            :data="myjsonData"
            :value="myeditData"
          >
          </fm-generate-form>
        </div>
        <el-input style="margin-bottom: 30px"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入评论"
                  v-model="mycomment">
        </el-input>
      </template>
    </a-modal>
  </div>

</template>

<script>

import {getAction, deleteAction, banli, postAction} from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ActivitiFileModel from './ActivitiFileModel'
  import { getModelList } from '@/api/activiti/activiti'
  import {filterObj} from "@/utils/util";
  import PicForm1 from "@views/activiti/PicForm1";

export default {
  name: 'ActivitiDaibanList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    PicForm1,
    ActivitiFileModel
  },
  data() {
    return {
      jiedianValue: undefined,
      visiblexx: false,
      getRunNodes: {},
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        }, {
          dataIndex: 'taskName',
          title: '任务名称',
          align: 'center'
        }, {
          dataIndex: 'processInstanceId',
          title: '流程实例编号',
          align: 'center'
        }, {
          dataIndex: 'executionId',
          title: '执行实例编号',
          align: 'center'
        }, {
          dataIndex: 'businessKey',
          title: '业务号',
          align: 'center'
        }, {
          title: '流程名称',
          dataIndex: 'processName',
          align: 'center',
          scopedSlots: { customRender: 'suspensionState' }
        },
        {
          title: '发起人',
          dataIndex: 'starter',
          align: 'center'
        },
        {
          title: '办理人',
          dataIndex: 'assignee',
          align: 'center'
        },
        {
          title: '任务创建时间',
          dataIndex: 'createTime',
          align: 'center'
        },
        {
          title: '流程启动时间',
          dataIndex: 'startTime',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }],
      url: {
        list: '/service/act/mylist',
        delete: '/act/reprocdef/deleteByDeploymentId',
        convertToModel: '/act/reprocdef/convertToModel',
        updateHandle: '/act/reprocdef/update',
        banli: '/service/completeTask',
        banlijson: '/service/getTaskInfo',
        countineBl: '/approval/handle',
        bohui: '/approval/handle'
      },
      queryParam: {
        category: '',
        key: '',
        name: ''
      },
      visible: false,
      confirmLoading: false,
      jsonData: {},
      editData: {},
      myjsonData: {},
      myeditData: {},
      mycomment: '',
      currentRecord: {},
      circleData: []
    }
  },
  created() {
    // this.getDataList()
  },
  methods: {
    handleChange(value) {
      console.log(value);
      this.jiedianValue = value;
    },
    handleZhiCancel() {
      this.visiblexx = true
      var record = this.currentRecord
      var select = { processInstanceId: record.processInstanceId }
      getAction('/approval/getRunNodes', select).then(res => {
        console.log('xxxxxxxxxxxx')
        console.log(this.jsonToMap(res.result))
        this.getRunNodes = res.result
        console.log(this.getRunNodes)
      })

    },
    handleZhiShuCancel(){
      let p = {}
      var record = this.currentRecord

      p.taskId = record.taskId
      p.comment = this.mycomment
      p.flag = 6
      p.runNodeId = this.jiedianValue
      banli(this.url.bohui, p).then(res => {
        //console.log('转为模型', res);
        this.visiblexx=false
        this.visible=false
        this.searchQuery()

      })
    },
    objToStrMap(obj) {
      let strMap = new Map()
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k])
      }
      return strMap
    },
    /**
     *json转换为map
     */
    jsonToMap(jsonStr) {
      return this.objToStrMap(jsonStr)
    },

    handleDetail1: function(record) {
      this.$refs.picForm.edit(record)
      this.$refs.picForm.title = '流程'
      this.$refs.picForm.disableSubmit = true
    },
    handleBanli: function(record) {
      // banli(this.url.banli+"/"+record.taskId).then(res => {
      //   console.log('转为模型', res)
      //   if (res.code == 0) {
      //     this.$message.success(res.msg);
      //   } else {
      //     this.$message.warning(res.msg);
      //   }
      // })
      this.currentRecord = record
      banli(this.url.banlijson + '/' + record.processInstanceId + '/' + record.taskId).then(res => {
        //console.log('转为模型', res)
        if (res.code == 200) {
          //this.$message.success(res.msg);
          console.log('------转为模型', res.result)
          // todo 这个位置不知道为啥 有问题
          // this.circleData = res.result.fromData1;
          // for (let i = 0; i < this.circleData.length; i++) {
          //   this.circleData[i].fillData = JSON.parse(this.circleData[i].value.split('###')[1]);
          //   this.circleData[i].formData = JSON.parse(this.circleData[i].value.split('###')[0]);
          // }
          //console.log('----------------转为模型', this.circleData[0].formData)
          this.myjsonData = JSON.parse(res.result.fromData2)

          this.visible = true
        } else {
          //this.$message.warning(res.msg);
        }
      })
    },
    mychangeValue(field, value, data) {
      this.myeditData = data
    },
    handleOk(e) {
      this.visible = false
      let p = {}
      p.taskId = this.currentRecord.taskId
      p.comment = this.mycomment
      p.formData = this.myjsonData
      p.formDataValue = this.myeditData
      p.excutionId = this.currentRecord.executionId
      p.flag = 1
      banli(this.url.countineBl, p).then(res => {
        //console.log('转为模型', res);
        this.searchQuery()
        if (res.code == 0) {
          this.$message.success(res.msg)
          //console.log('------转为模型', res.result.fromData2)
        } else {
          //this.$message.warning(res.msg);
        }
      })
    },
    modalCancel() {
      this.visible = false

    },
    modalxxCancel() {
      this.visiblexx = false

    },
    handleCancel(e) {
      this.visible = false
      let p = {}
      p.taskId = this.currentRecord.taskId
      p.comment = this.mycomment
      p.flag = 2
      banli(this.url.bohui, p).then(res => {
        //console.log('转为模型', res);
        this.searchQuery()
        if (res.code == 0) {
          this.$message.success(res.msg)
          //console.log('------转为模型', res.result.fromData2)
        } else {
          //this.$message.warning(res.msg);
        }
      })
    },
    // 删除
    actDelete(deploymentId) {
      deleteAction(this.url.delete, { deploymentId: deploymentId }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.searchQuery()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 转为模型
    convertToModel(id) {
      getAction(this.url.convertToModel, { id: id }).then(res => {
        console.log('转为模型', res)
        if (res.success) {
          this.$message.success('操作成功，流程编号:' + res.result.deploymentId)
          this.searchQuery()
        } else {
          this.$message.warning('操作失败，流程编号:' + res.result.deploymentId)
        }
      })
    },
    // 挂起和激活
    updateHandle(id, state) {
      getAction(this.url.updateHandle, { id: id, state: state }).then(res => {
        console.log('挂起和激活', res)
        if (res.success) {
          this.$message.success(res.message)
          this.searchQuery()
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    searchQuery() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.loadData(1)
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          this.totalOrderPrice = res.message
          if (res.total) {
            this.ipagination.total = res.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 查询
    getDataList() {
      this.loading = true
      let params = this.queryParam
      getModelList(this.url.list, params).then(res => {
        console.log('查询数据', res)
        this.dataSource = res.result.records
        this.total = res.result.total
        this.ipagination.total = res.result.total
        this.loading = false
      })
    },
    openModeler() {
      this.$refs.ativitiFileModel.openModel()
    },

    deployProcess(id) {
      getAction(this.url.deploy, { id: id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-operator .ant-btn {
  margin: 3px 8px 4px 0;
}
</style>