添加了委托评审提交审批按钮

api/flow/attachment.js

+/**
+ * 流程附件
+ */
+import http from '../http'
+
+export default {
+  // 查询所有
+  list: id => http.post('/flow/v1/attachment/list-' + id).then(res => res),
+  // 删除
+  delFile: data =>
+    http.delete('/flow/v1/attachment/?ids=' + data).then(res => res)
+}

api/flow/button-flow.js

+/**
+ * 按钮绑定的流程表
+ */
+import http from '../http'
+
+export default {
+  // 通过按钮code查询流程
+  list: data =>
+    http.post('/flow/v1/buttonFlow/listByButtonCode', data).then(res => res)
+}

api/flow/process-instance.js

+/**
+ * 发起流程 -- 新的流程部署
+ */
+import http from '../http'
+import httpJson from '../httpJson'
+
+export default {
+  // 获取流程的启动表单
+  renderedStartForm: data =>
+    http
+      .get(
+        '/flow/v1/processInstance/renderedStartForm?processDefinitionId=' + data
+      )
+      .then(res => res),
+  // 启动流程实例
+  start: data =>
+    httpJson.post('/flow/v1/processInstance/start', data).then(res => res),
+  // 查看-流程表单
+  formData: id =>
+    http
+      .get('/flow/v1/processInstance/formData?processInstanceId=' + id)
+      .then(res => res)
+}

api/httpJson.js

+/**
+ * HTTP 请求 axios dto封装
+ */
+import axios from 'axios'
+import global from './config'
+import loading from './loading'
+
+// Axios 全局配置
+const httpJson = axios.create()
+httpJson.defaults.baseURL = global.baseURL
+httpJson.defaults.withCredentials = true
+// 添加请求拦截器
+httpJson.interceptors.request.use(
+  config => {
+    if (!global.getLn()) {
+      window.location.href = global.ssoURL
+    }
+    const header = global.headersJson
+    // 无法获取情况下，设置登录 COOKIE
+    if (process.__TOKEN__) {
+      header.Cookie = 'uid=' + process.__TOKEN__
+    }
+    config.headers = header
+    config.transformRequest = global.transformRequestJSON
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+// 返回数据处理
+// 返回格式 {code:业务码 , data: 内容 ， msg: 描述}
+httpJson.interceptors.response.use(
+  response => {
+    console.log('----response---响应结果---', response)
+    switch (response.data.code) {
+      case '-2':
+        global.logout()
+        window.location.href = global.ssoURL
+        break
+      case '1':
+        return response.data.data
+      default:
+        loading.toast.show(response.data.code, response.data.msg)
+    }
+  },
+  error => {
+    console.log('--error---', error)
+    if (error.response.status === 401) {
+      console.log('unauthorized, logging out ...')
+    }
+    return Promise.reject(error)
+  }
+)
+export default httpJson

api/index.js

@@ -32,3 +32,6 @@ export { default as soilSample } from './soil/soil-sample'
 export { default as soilTest } from './soil/soil-test'
 export { default as soilStatistics } from './soil/soil-statistics'
 export { default as soilReport } from './soil/soil-report'
+export { default as processInstance } from '../api/flow/process-instance'
+export { default as flowAttachment } from '../api/flow/attachment'
+export { default as buttonFlow } from '../api/flow/button-flow'

components/base/UploadIndex.vue

+<template>
+  <div>
+    <div v-if="disabled === undefined || reEdit" class="fl">
+      <el-upload
+        :multiple="true"
+        :action="action"
+        :show-file-list="false"
+        :data="dataObj"
+        :accept="obj.accept"
+        :on-success="_handleSuccess"
+        with-credentials
+        class="upload-file"
+        list-type="picture-card">
+        <i slot="default" class="el-icon-plus"></i>
+      </el-upload>
+    </div>
+    <div class="fl">
+      <ul class="upload-file-ul">
+        <li v-for="(item,index) in list" :key="index">
+          <span v-if="!item.url" @click="_edit(item)">{{item.fileName}}</span>
+          <el-image
+            v-if="item.url"
+            :src="item.url"
+            :preview-src-list="previewList"
+            style="width: 90px; height: 90px;margin-top:5px">
+          </el-image>
+          <div @click="_download(item)" class="upload-list-cover">{{item.fileName}}</div>
+          <div v-if="disabled === undefined || reEdit" class="upload-list-cover-close">
+            <i @click="_del(item)" class="el-icon-close" style="margin-left: 10px"/>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="clear"></div>
+  </div>
+</template>
+
+<script>
+/**
+ * 流程附件：上传、下载、删除、预览
+ * 按住ctrl选择多个文件上传
+ */
+import { flowAttachment } from '../../api'
+import global from '../../api/config'
+
+export default {
+  name: 'UploadFileList',
+  props: {
+    // 组件的所有信息
+    obj: null,
+    // 是否禁用（表示只读，不许上传）
+    disabled: null,
+    // 附件可操作
+    reEdit: null,
+    // 流程id(根据流程id查看附件)自定义的
+    processId: null
+  },
+  data() {
+    return {
+      dataObj: {
+        file: ''
+      },
+      list: [],
+      previewList: [],
+      // 上传附件
+      action: '',
+      // 生成form表单的id
+      createFormKey: '',
+      flowProcessId: '', // 自己定义的id,用于查询附件
+      downloadUrl: ''
+    }
+  },
+  watch: {
+    // 监听processId数据,更新表单
+    processId: {
+      handler(val) {
+        console.log('processId==', val)
+        if (val) {
+          this._list()
+        } else {
+          this.list = []
+        }
+      },
+      deep: true
+    },
+    // 监听obj数据,更新表单
+    obj: {
+      handler(val) {
+        console.log('obj-value==', val)
+        this._list()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this._list()
+  },
+  methods: {
+    // 自己定义的流程id
+    _replaceId() {
+      if (this.processId) {
+        let flowProcessId = ''
+        const processIdList = this.processId.split(':')
+        if (processIdList.length === 1) {
+          flowProcessId = processIdList[0]
+        } else if (processIdList.length === 3) {
+          flowProcessId = processIdList[2]
+        }
+        this.flowProcessId = flowProcessId
+        this.action =
+          global.baseURL + '/flow/v1/attachment/upload-' + flowProcessId
+        this.downloadUrl = global.baseURL + '/flow/v1/attachment/download?ids='
+      }
+    },
+    _handleSuccess(response, file, fileList) {
+      // 上传成功
+      if (response.success) {
+        this._list()
+      } else {
+        this.$message.error(response.msg)
+      }
+    },
+    // list接口
+    _list: async function() {
+      this._replaceId()
+      if (this.flowProcessId) {
+        const result = await flowAttachment.list(this.flowProcessId)
+        // 处理数据，可进行预览图片
+        // 拼接图片预览地址
+        this.previewList = []
+        // 支持page与list
+        const records = result.records ? result.records : result
+        for (let i = 0; i < records.length; i++) {
+          // 判断是否是图片格式
+          if (this.$fileFormat(records[i].type, 'img')) {
+            const url = this.downloadUrl + records[i].id
+            this.$set(records[i], 'url', url)
+            this.previewList.push(url)
+          }
+        }
+        this.list = records
+      }
+    },
+    // 下载
+    _download(item) {
+      const url = this.downloadUrl + item.id
+      window.open(url, '_blank')
+    },
+    // 删除
+    _del(item) {
+      this.$confirm('确定要删除附件吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this._delOk(item.id)
+      })
+    },
+    _delOk: async function(id) {
+      const result = await flowAttachment.delFile(id)
+      if (result) {
+        this._list()
+      }
+    },
+    // 编辑或预览
+    _edit(item) {
+      if (this.disabled === undefined || this.reEdit) {
+        // 进行编辑
+        this.$viewDocument(item, 'edit')
+      } else {
+        // 进行预览
+        this.$viewDocument(item, 'readonly')
+      }
+    }
+  }
+}
+</script>
+<style>
+/*多个附件上传*/
+.upload-file .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
+
+.upload-file-ul {
+  overflow: hidden;
+}
+
+.upload-file-ul li {
+  float: left;
+  text-align: center;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  border: 1px solid #ddd;
+  margin-left: 5px;
+  border-radius: 7px;
+  position: relative;
+}
+
+.upload-list-cover {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 70px;
+  line-height: 30px;
+  height: 30px;
+  background: rgba(0, 0, 0, 0.4);
+  border-bottom-left-radius: 7px;
+  border-bottom-right-radius: 7px;
+}
+
+.upload-file-ul li:hover .upload-list-cover {
+  display: block;
+  color: #fff;
+  cursor: pointer;
+}
+
+.upload-list-cover-close {
+  position: absolute;
+  z-index: 2000;
+  left: 70px;
+  bottom: 70px;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.upload-list-cover-close:hover {
+  color: #eb6877;
+}
+
+.upload-file-ul li:hover span {
+  cursor: pointer;
+  color: #409eff;
+}
+
+/*多个附件上传*/
+</style>

pages/meter-entrust/entrust-review/RenderedStartForm.vue

+<template>
+  <div>
+    <el-dialog
+      v-dialogDrag
+      :visible.sync="showModal"
+      title="流程启动表单"
+      width="1000px"
+    >
+      <div>
+        <DesignFormView ref="form" :processId="processId"/>
+      </div>
+      <div slot="footer">
+        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { processInstance } from '../../../api'
+import DesignFormView from './DesignFormView'
+
+/**
+ * 流程中配置的启动表单
+ */
+export default {
+  name: 'Index',
+  components: { DesignFormView },
+  data() {
+    return {
+      showModal: false,
+      processDefinitionId: '',
+      processId: '', // 临时
+      footerList: [
+        { id: '', name: '取消', type: '' },
+        { id: '', name: '发起', type: 'primary' }
+      ]
+    }
+  },
+  methods: {
+    _open(data, id) {
+      this.showModal = true
+      this.processDefinitionId = id
+      this.processId = id + new Date().getTime()
+      this._hideLoading()
+      if (data.renderedStartForm) {
+        this._initForm(JSON.parse(data.renderedStartForm))
+      }
+    },
+    _initForm(data) {
+      this.$nextTick(() => {
+        this.$refs.form._open(data)
+      })
+    },
+    // modal
+    _footerResult(name) {
+      switch (name) {
+        case '取消':
+          this.showModal = false
+          break
+        case '发起':
+          this._ok()
+          break
+      }
+    },
+    _hideLoading() {
+      this.$refs.footerModal._hideLoading()
+    },
+    _ok: async function() {
+      const obj = {
+        processDefinitionId: this.processDefinitionId,
+        values: {}
+      }
+      // 填写的表单数据
+      const formObj = this.$refs.form.formObj
+      formObj.processDefinitionId = this.processId
+      obj.values = formObj
+      // 验证必填项
+      const formList = this.$refs.form.formList
+      for (let i = 0; i < formList.length; i++) {
+        const item = formList[i]
+        if (item.required && !formObj[item.vModel]) {
+          this.$message.error(item.label + '不能为空~')
+          this._hideLoading()
+          return false
+        }
+      }
+      const result = await processInstance.start(obj)
+      if (result) {
+        this.$message.success('发起成功,请到系统管理进行审批')
+        this.showModal = false
+        this.$emit('on-result-change')
+      }
+      this._hideLoading()
+    }
+  }
+}
+</script>

pages/meter-entrust/entrust-review/ReviewEntrust.vue

@@ -52,6 +52,7 @@
     <Operation ref="operation"></Operation>
     <EntrustDetail ref="sampleEdit"></EntrustDetail>
     <SampleManage ref="sampleManageModal"></SampleManage>
+    <SelectFlowRelBtn ref="flow"/>
   </div>
 </template>
 <script>
@@ -61,8 +62,15 @@ import Reason from '../../../components/base/Reason'
 import SampleManage from '../SoilSampleManage'
 import global from '../../../api/config'
 import EntrustDetail from './EntrustDetail'
+import SelectFlowRelBtn from './SelectFlowRelBtn'
 export default {
-  components: { Operation, Reason, EntrustDetail, SampleManage },
+  components: {
+    Operation,
+    Reason,
+    EntrustDetail,
+    SampleManage,
+    SelectFlowRelBtn
+  },
   data() {
     return {
       currentComponent: 'FoodSampleGovern',
@@ -90,6 +98,11 @@ export default {
           type: 'success',
           id: '',
           name: '导出标书合同（协议）补充单模板'
+        },
+        {
+          type: 'success',
+          id: 'submit-flow',
+          name: '提交审批'
         }
       ],
       iconMsg: [
@@ -159,6 +172,9 @@ export default {
       this.currentComponent = componentName
       this.$nextTick(function() {
         switch (msg) {
+          case '提交审批':
+            this._submit('submit-flow')
+            break
           case '驳回':
             this._goBack()
             break
@@ -180,6 +196,9 @@ export default {
         }
       })
     },
+    _submit(key) {
+      this.$refs.flow._open(key)
+    },
     _exportTemplate() {
       const data = {
         downloadUrl:

pages/meter-entrust/entrust-review/SelectFlowRelBtn.vue

+<template>
+  <div>
+    <el-dialog
+      v-drag
+      :visible.sync="showModal"
+      :title="modalTitle"
+      width="500px"
+      append-to-body
+    >
+      <div style="max-height:350px;overflow:auto">
+        <el-radio-group v-model="selectData" style="display: inline">
+          <el-radio
+            :label="item.flowId"
+            v-for="item in flowList"
+            :key="item.flowName"
+            border
+            style="width:47%;margin-left: 0;margin-right: 10px"
+          >{{item.flowName}}
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <div slot="footer">
+        <ModalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult"/>
+      </div>
+    </el-dialog>
+    <!--点击确定后，发起流程-->
+    <RenderedStartForm ref="startForm" @on-result-change="_close"/>
+  </div>
+</template>
+
+<script>
+import ModalFooter from '../../../components/base/modalFooter'
+import { processInstance, buttonFlow } from '../../../api'
+import RenderedStartForm from './RenderedStartForm'
+
+/**
+ * 根据按钮code选择流程
+ */
+export default {
+  name: 'SelectFlowByBtn',
+  components: { ModalFooter, RenderedStartForm },
+  data() {
+    return {
+      showModal: false,
+      modalTitle: '请选择流程',
+      getPage: {},
+      // 选中的数据
+      selectData: '',
+      flowList: [],
+      footerList: [
+        { id: '', name: '取消', type: '' },
+        { id: '', name: '确定', type: 'primary' }
+      ],
+      // 按钮的code
+      btnCode: ''
+    }
+  },
+  methods: {
+    _open(btnCode) {
+      this.$nextTick(() => {
+        this.btnCode = btnCode
+        this.selectData = ''
+        this._hideLoading()
+        this._getFlowByBtn()
+      })
+    },
+    // 根据按钮code查询流程列表
+    _getFlowByBtn: async function() {
+      const result = await buttonFlow.list({ buttonCode: this.btnCode })
+      this.flowList = result
+      if (result && result.length > 1) {
+        // 超过一个需要进行选择
+        this.showModal = true
+      } else if (result && result.length === 1) {
+        // 一个则直接调用接口
+        this.selectData = result[0].flowId
+        this._startForm()
+      } else {
+        this.$message.warning('按钮暂无绑定流程，无法发起流程！')
+      }
+    },
+    /** *modal-footer */
+    _footerResult(name) {
+      switch (name) {
+        case '取消':
+          this.showModal = false
+          break
+        case '确定':
+          if (this.selectData !== '') {
+            this._startForm()
+          } else {
+            this.$message.warning('请选择一个流程！')
+            this._hideLoading()
+          }
+          break
+      }
+    },
+    _hideLoading() {
+      this.$refs.footerModal._hideLoading()
+    },
+    // 发起流程 ----->1.有表单需要填写表单数据局；2.无表单直接发起
+    // 启动流程表单
+    _startForm: async function() {
+      const result = await processInstance.renderedStartForm(this.selectData)
+      if (result && result.renderedStartForm !== '') {
+        // 表单信息不为空，才弹出表单界面
+        this.$refs.startForm._open(result, this.selectData)
+      } else {
+        this._startOk()
+      }
+    },
+    _startOk: async function() {
+      const obj = {
+        processDefinitionId: this.selectData
+      }
+      const result = await processInstance.start(obj)
+      if (result) {
+        this.$message.success('发起成功,请到系统管理进行审批')
+      }
+      this._hideLoading()
+    },
+    _close() {
+      this.showModal = false
+    }
+  }
+}
+</script>