activiti-demo-web/src/views/oa/leaveNew/index.vue

<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="标题">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh-right" size="mini" @click="reList">清空</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum-1) * queryParams.pageSize + (scope.$index + 1) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模型key" prop="modelKey"/>
      <el-table-column label="表单名称" prop="fName"/>
      <el-table-column label="创建时间" prop="createTime"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.instanceId==null">
            <el-button
              size="mini" type="success"
              @click="handleSumbit(scope.$index, scope.row)">提交流程
            </el-button>
            <el-button
              size="mini" type="primary"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
          <template v-else>
            <el-button
              size="mini" type="success"
              @click="showForms(scope.$index, scope.row)">查看
            </el-button>
            <el-button
              size="mini" type="warning"
              @click="showImage(scope.$index, scope.row)">进度查看
            </el-button>
          </template>
        </template>

      </el-table-column>

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="选择流程模型"
      :visible.sync="dialogVisible"
      width="350px"
    >
      <template>
        <el-select v-model="processKey" placeholder="请选择">
          <el-option
            v-for="item in leaveSelect"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">下一步</el-button>
    </el-dialog>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px">
      <template>
        <ele-form
          :isShowSubmitBtn=true
          :isShowBackBtn=false
          :isShowResetBtn=true
          :rules="formObj.rules"
          :form-desc="formObj.formDesc"
          :form-data="formObj.formData"
          :request-fn="handleRequest"
          @request-success="handleRequestSuccess"
        ></ele-form>
      </template>
    </el-dialog>
    <!--查看审核流程表单-->
    <el-dialog :title="forms.title" :visible.sync="forms.open" width="1000px">
      <!--历史表单组件-->
      <addEnterprise  ref="addEnterprise"/>
    </el-dialog>
    <!--显示流程图标签-->
      <el-dialog :title="activitiImg.title" :visible.sync="activitiImg.open" width="1000px">
        <el-image :src="activitiImg.src"></el-image>
      </el-dialog>
  </div>
</template>

<script>
  import { select, add, list, get, getForm, update, delTitle, submitApply, } from '@/api/activiti/leaveNew.js';
  //流程历史表单组件
  import  addEnterprise from "@/views/activiti/formsActiviti/index.vue";

  export default {
   components:{
      addEnterprise
   },
    data: function() {
      return {
        instanceId:'',
        dialogVisible: false,
        //表格数据
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 分页参数
        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        //删除id
        multipleSelection: [],
        // 表单参数
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        processKey: '',
        //部署文件下拉
        leaveSelect: [],
        // 表单数据
        formEntity: {
          fId: {},
          modelKey: {},
          modulId: {},
          fName: {},
          instanceId: {},
          fKey: {},
          fVersion: {},
          applyUser: {},
          jsonData: {}
        },
        //动态表单数据
        formObj: {
          // 表单数据
          formData: {},
          formDesc: {},
          rules: {}
        },
        forms: {
          title: '查看审核流程',
          open: false,
          data: []
        },
        activitiImg: {
          title: '查看审核流程图',
          open: false,
          src: ''
        }
      }
    },

    // 初始化方法
    created() {
      //表格初始化
      this.getList()
      //下拉框初始化
      this.select()
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (let i = 0; i < val.length; i++) {
          this.multipleSelection[i] = val[i].id
        }
      },
      //部署文件下啦方法
      select() {
        select().then(
          response => {
            console.log(response)
            this.leaveSelect = response.data
          }
        )
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true
        list(this.addDateRange(this.queryParams)).then(
          response => {
            this.tableData = response.rows
            this.total = response.total
            this.loading = false
          }
        )
      }
      ,
      deleteTi() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定 ',
          cancelButtonText: '取消 ',
          type: 'warning',
          center: true
        }).then(() => {
          let ids = this.multipleSelection
          if (ids.length === 0) {
            this.msgError('你没有选择文章')
            return
          }
          delTitle(ids)
          this.msgSuccess('成功')
          this.reIds()
          this.reList()
        }).catch(() => {
          this.msgSuccess('已取消删除')
        })
      }
      ,
      reIds() {
        this.multipleSelection = []
      }
      ,
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      }
      ,
      reList() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      // 重置表单新增使用
      reset() {
        this.formObj.formDesc = {}
        this.formObj.rules = {}
        this.formObj.formData = {}
        this.resetForm('form')
      },
      //表单
      handleAdd() {
        dialogVisible: false
        this.reset()
        getForm(this.processKey).then(
          response => {
            this.formEntity = response.data
            this.formEntity.fId = undefined
            let jsonData = response.data.jsonData
            let parse = JSON.parse(jsonData)
            this.formObj.formDesc = parse.formDesc
            this.formObj.rules = parse.rules
            let formData = parse.formData
            if (null != formData) {
              this.formObj.formData = parse.formData
            }
            this.open = true
            this.title = '添加文章'
          }
        )

      },
      /*
      打开编辑表单窗口
      * */
      handleUpdate(index, row) {
        dialogVisible: false
        this.reset()
        get(row.fId).then(
          response => {
            this.formEntity = response.data
            let jsonData = response.data.jsonData
            let parse = JSON.parse(jsonData)
            this.formObj.formDesc = parse.formDesc
            this.formObj.rules = parse.rules
            let formData = parse.formData
            if (null != formData) {
              this.formObj.formData = parse.formData
            }
            this.open = true
            this.title = '修改'
          }
        )
      },
      /*删除数据*/
      handleDelete(index, row) {
        var ids = []
        ids[0] = row.fId
        delTitle(ids).then(response => {
          if (response.code === 200) {
            this.msgSuccess('成功')
            this.open = false
            this.getList()
          } else {
            this.msgError(response.msg)
          }
        })
      },
      /*
      *显示流程表单
      * */
      showForms(index, row) {
        this.forms.open = true
        this.forms.title = '查看审核流程'
        this.$nextTick(()=>{
          this.$refs.addEnterprise.showForms(row.instanceId)
        })
      },

      showImage(index, row) {
        let instanceId = row.instanceId
        let modelKey = row.modelKey
        let version = row.modelVersion
        instanceId = process.env.VUE_APP_BASE_URL + '/leaveNew/read-resource?processDefinitionKey=' + modelKey +'&version=' +version+ '&processInstanceId=' + instanceId+ '&t='+Math.random()
        this.activitiImg.open = true
        this.activitiImg.src = instanceId
      },
      /**
       * 新增或跟新表单数据
       */
      handleRequest(data) {
        this.dialogVisible = false
        this.formObj.formData = data
        let s = JSON.stringify(this.formObj)
        this.formEntity.jsonData = s
        if (this.formEntity.fId === undefined) {
          add(this.formEntity).then(response => {
            if (response.code === 200) {
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          })
        } else {
          update(this.formEntity).then(response => {
            if (response.code === 200) {
              this.msgSuccess(response.msg)
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          })
        }
        return Promise.resolve()
      },
      handleRequestSuccess() {
        this.$message.success('发送成功')
        this.getList()
        this.open = false
      },
      /**
       * 提交审核信息
       * @param index
       * @param row
       */
      handleSumbit(index, row) {
        console.log(index, row)
        submitApply(row.fId).then(response => {
          if (response.code === 200) {
            this.msgSuccess(response.msg)
            this.getList()
          } else {
            this.msgError(response.msg)
          }
        })
      },
    }
  }
</script>