快速构建一个流程申请的页面

页面准备（创建以下几个页面）

sofast-web
├── src
│   ├── views
│   │   ├── ProcessDemo                        
│   │   │   ├── index.vue                    // 流程申请主页面
│   │   │   ├── Apply.vue                    // 流程实例新增和更新的表单页面
│   │   │   ├── Approve.vue                    // 流程实例审批
│   │   │   ├── ApplyDetail.vue                // 查看流程申请详情的表单页面

Apply.vue和ApplyDetail.vue这两个文件的文件名要和流程实例管理中配置的访问路径一致

流程实例设置访问路径步骤如下：

1.在流程管理中找到流程实例管理，根据流程定义编码找到对应流程，点击设计操作

2.在设计界面点击申请，设置表单组件地址和详情组件地址，然后点击保存

编写index.vue文件内容

<template>
  <div class="sf-container"> <!-- 这里的class为sofast提供的全局css样式，直接引用 -->
    <!-- 准备一个table表格，展示流程数据信息 -->
    <sf-table>
      <!-- 工具栏区域 -->
      <template #tools-bar>
        <sf-button type="primary" plain @click="showDialog()">
          {{ $C_Label('add') }}
        </sf-button>
        ...
      </template>
      <!-- 流程信息 -->
      <el-table-column type="selection" width="44"></el-table-column><!-- 复选框 -->
      <!-- 这里放入要展示的流程信息，如流水单号，名称 -->
      <!-- 如果想要点击某属性值查看该流水的详情信息，如流水单号 -->
      <el-table-column label="流水单号" width="150" prop="">
        <template slot-scope="{ row }">
          <sf-text-button @click="showDetailDialog(row)">
            {{ row.procSerialNo }}
          </sf-text-button>
        </template>
      </el-table-column>
      <!-- 名称 -->
      <el-table-column label="名称" prop="name" width="150"></el-table-column>
      ...
      <!--  操作列,如有其他操作请自行添加  -->
      <el-table-column :label="$C_Label('operation')" min-width="195">
        <template slot-scope="{ row }">
          <!-- 编辑 -->
          <sf-text-button
            @click="showDialog(row)"
          >
            {{ $C_Label('edit') }}
          </sf-text-button>
          ...
        </template>
      </el-table-column>
    </sf-table>
    <!-- 申请 / 编辑（使用process-apply-form组件） -->
    <!-- process-apply-form的procDefCode属性用来指定申请和编辑的流程实例属于哪一种流程 -->
    <!-- process-apply-form的bus-id属性用来指定当前是哪一个流程实例-->
    <process-apply-form
      v-if="applyFormDialogVisible"
      :visible.sync="applyFormDialogVisible"
      dialog-title="申请Demo"
      procDefCode="XXX"
      :bus-id="formData.busId"
      width="400px"
      @refresh="search"
    ></process-apply-form>

    <!-- 详情使用（使用process-apply-detail组件） -->
    <!-- process-apply-detail组件会根据流程实例是否提交展示不同的详情页面 -->
    <process-apply-detail
      v-if="applyDetailDialogVisible"
      :visible.sync="applyDetailDialogVisible"
      :dialog-title="$C_Label('detail')"
      proc-def-code="process_1630662461777"
      :bus-id="formData.busId"
      :not-submit="formData.approveStatus === '0'"
    ></process-apply-detail>
  </div>
</template>
<script >
import lang from '@/mixins/lang'
import ProcessApplyForm from '@/components/Process/processApplyForm'
import ProcessApplyDetail from '@/components/Process/processApplyDetail'
export default {
  name: 'ProcessDemo',
  components: {
    ProcessApplyDetail,
    ProcessApplyForm
  },
  mixins: [lang],
  data() {
    return {
      applyFormDialogVisible: false,
      applyDetailDialogVisible: false,
      formData: {}
    }
  },
  methods: {
    /**
     * 弹出新增/编辑
     * @param row
     */
    showDialog(row) {
      this.formData = row || {}
      this.applyFormDialogVisible = true
    },
    /**
     * 弹出申请详情页面
     * @param row
     */
    showDetailDialog(row) {
      this.formData = row || {}
      this.applyDetailDialogVisible = true
    }
  }
}
</script>

关于这两个组件属性的作用请查看process-apply-form和process-apply-detail

编写Apply.vue

<template>
  <!-- 该表单只是一个示例，可根据业务需求自定义 -->
  <sf-form
    ref="applyForm"
    v-loading="initLoading"
    :model="applyFormData"
    :rules="applyFormRules"
  >
    <el-form-item label="名称" prop="name">
      <el-input v-model="applyFormData.name" />
    </el-form-item>
    <el-form-item label="分支" prop="num">
      <el-select v-model="applyFormData.num" default-first-option>
        <el-option :value="2" label="上"></el-option>
        <el-option :value="1" label="下"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="附件">
      <biz-file-upload
        v-model="fileList"
        business-type="1"
        :business-id="processData.busId"
        multiple
      ></biz-file-upload>
    </el-form-item>
  </sf-form>
</template>

<script>
// 调用api中的接口，根据使用的接口自己调整
import {
  procBusDemoSave,
  procBusDemoSubmit,
  getProcBusDemo
} from '@/api/processDemo'
import BizFileUpload from '@/components/BizFileUpload/BizFileUpload'

export default {
  components: { BizFileUpload },
  // processData为流程表单process-form提供的provide数据
  /** processData: {
   *    procDefCode: null,
        procDefId: null,
        busId: null
   *  }
   */
  // 当未提交时，processData只有procDefCode
  // 当提交后，processData中有procDefCode和busId
  inject: ['processData'],
  data() {
    return {
      applyFormData: {
        name: null,
        num: 2,
        fileIds: []
      },
      fileList: [],
      initLoading: false
    }
  },
  methods: {
    /**
     * 保存
     * 可以自定义保存方法，这里只提供一个示例
     * @returns {Promise<unknown>}
     */
    save() {
      return new Promise((resolve, reject) => {
        this.$refs.applyForm.validate(valid => {
          if (valid) {
            this.saveLoading = true
            let formData = Object.assign({}, this.applyFormData)
            procBusDemoSave(formData)
              .then(res => {
                resolve(res)
              })
              .catch(err => {
                reject(err)
              })
          } else {
            reject()
          }
        })
      })
    },
    /**
     * 提交
     * 可以自定义提交方法，这里只提供一个示例
     * @returns {Promise<unknown>}
     */
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.applyForm.validate(valid => {
          if (valid) {
            this.saveLoading = true
            let formData = Object.assign(
              { ...this.processData },
              this.applyFormData
            )
            procBusDemoSubmit(formData)
              .then(res => {
                resolve(res)
              })
              .catch(err => {
                reject(err)
              })
          } else {
            reject()
          }
        })
      })
    }
  },
  created() {
    // 请求接口和获取数据可自定义，这里只是一个示例
    if (this.processData.busId) {
      this.initLoading = true
      getProcBusDemo(this.processData.busId)
        .then(res => {
          this.applyFormData = res.data
          this.initLoading = false
        })
        .catch(() => {
          this.initLoading = false
        })
    }
  }
}
</script>

如果使用附件上传功能，请查看biz-file-upload具体使用

编写ApplyDetail.vue

<template>
  <!-- 该表单只是一个示例，可根据业务需求自定义 -->
  <sf-form
    ref="applyForm"
    v-loading="initLoading"
    :model="applyFormData"
  >
    <el-form-item label="名称" prop="name">
      {{ applyFormData.name }}
    </el-form-item>
    <el-form-item label="分支" prop="num">
      {{ applyFormData.num === 2?'上':'下' }}
    </el-form-item>
    <el-form-item label="附件">
      <!-- 显示当前流程实例下的所有附件 -->
      <biz-file-list :business-id="processData.busId" business-type="1"></biz-file-list>
    </el-form-item>
  </sf-form>
</template>

<script>
import { getProcBusDemo } from '@/api/processDemo'
import BizFileList from '@/components/BizFileList/BizFileList'
export default {
  components: { BizFileList },
  // 流程表单process-form提供的provide数据
  // processData为流程表单process-form提供的provide数据
  /** processData: {
   *    procDefCode: null,
        procDefId: null,
        busId: null
   *  }
   */
  // 当未提交时，processData只有procDefCode
  // 当提交后，processData中有procDefCode和busId
  inject: ['processData'],
  data() {
    return {
      initLoading: false,
      applyFormData: {
        name: null,
        num: null
      }
    }
  },
  methods: {},
  created() {
    this.initLoading = true
    // 获取业务数据，根据后端接口自定义，非固定
    getProcBusDemo(this.processData.busId)
      .then(res => {
        let { data } = res
        if (data) {
          this.applyFormData = res.data
        }
        this.initLoading = false
      })
      .catch(() => {
        this.initLoading = false
      })
  }
}
</script>

如果使用文件列表功能，请查看biz-file-list具体使用

编写Approve.vue

如果不想做其他审批操作可以直接使用以下代码 ```vue

> 其他审批操作可以自定义
```vue
 <template>
   <div class="approve-demo">
     <sf-dialog>
       <!-- 自定义form表单 -->
       <sf-form>
         ...
       </sf-form>
       <!-- 自定义操作 -->
       <div slot="footer" class="dialog-footer">
         <sf-button type="primary" @click="reject">
           驳回
         </sf-button>
         <sf-button type="primary" plain @click="closeDialog">
           关闭
         </sf-button>
       </div>
     </sf-dialog>
   </div>
 </template>

 <script>
 import ApplyDetail from './applyDetail'
 export default {
   components: { ApplyDetail },
   methods: {
     reject() {},
     closeDialog() {}
   }
 }
 </script>

以上页面配置完成后，就可以实现流程实例申请和查看了