基于jeecgboot的flowable流程支持online表单(三)

        这部分主要是实现online表单的各种形式表单，包括主从表表单，同时录入采用现有官方的模式录入数据，通过选择已有数据的方式进行流程申请与审批，免去各种录入组件等兼容性问题。

       1、后端实现

          主要实现online表单的信息获取以及具体表单的数据获取，以供前端使用

/**
     * 通过formId查询
     *
     * @param formId
     * @return
     */
    @AutoLog(value = "flow_onl_cgform_head-通过formId查询")
    @ApiOperation(value="flow_onl_cgform_head-通过formId查询", notes="flow_onl_cgform_head-通过formId查询")
    @GetMapping(value = "/queryByFormId/{formId}")
    public Result<?> queryByFormId(@PathVariable("formId")  String formId) {
        Map<String, Object> flowOnlCgformHeadMap = flowOnlCgformHeadService.getOnlCgformHeadByFormId(formId);
        if(flowOnlCgformHeadMap==null) {
            return Result.error("未找到对应数据");
        }
        return Result.OK(flowOnlCgformHeadMap);
    }
    
    @AutoLog(value = "getColumns-通过code查询获取online表单列表信息")
    @ApiOperation(value="getColumns-通过code查询获取online表单列表信息", notes="getColumns-通过code查询获取online表单列表信息")
    @GetMapping({"/getColumns/{code}"})
    public Result<OnlComplexModel> a(@PathVariable("code") String code) {
        Result result = new Result();
        OnlCgformHead onlCgformHead = (OnlCgformHead)this.onlCgformHeadService.getById(code);
        if (onlCgformHead == null) {
            result.error500("实体不存在");
            return result;
        } else {
            LoginUser loginuser = (LoginUser)SecurityUtils.getSubject().getPrincipal();
            OnlComplexModel onlComplexModel = this.onlineService.queryOnlineConfig(onlCgformHead, loginuser.getUsername());
            onlComplexModel.setIsDesForm(onlCgformHead.getIsDesForm());
            onlComplexModel.setDesFormCode(onlCgformHead.getDesFormCode());
            result.setResult(onlComplexModel);
            result.setOnlTable(onlCgformHead.getTableName());
            return result;
        }
    }
    
    @AutoLog(value = "getData-通过code查询获取online表单数据")
    @ApiOperation(value="getData-通过code查询获取online表单数据", notes="getData-通过code查询获取online表单数据")
    @GetMapping({"/getData/{code}"})
    public Result<Map<String, Object>> a(@PathVariable("code") String code, HttpServletRequest request) {
        Result result = new Result();
        OnlCgformHead onlCgformHead = (OnlCgformHead) this.onlCgformHeadService.getById(code);
        if (onlCgformHead == null) {
            result.error500("实体不存在");
            return result;
        } else {
            Map map = null;

            try {
                Map objectmap = onlineUtils.objectHashMap(request);
                boolean bJoinQuery = onlineUtils.isJoinQuery(onlCgformHead);
                if (bJoinQuery) {
                    map = this.onlineJoinQueryService.pageList(onlCgformHead, objectmap);
                } else {
                    map = this.onlCgformFieldService.queryAutolistPage(onlCgformHead, objectmap, (List) null);
                }

                this.getEnhanceList(onlCgformHead, map);
                result.setResult(map);
            } catch (Exception except) {
                log.error(except.getMessage(), except);
                result.error500("数据库查询失败，" + except.getMessage());
            }

            result.setOnlTable(onlCgformHead.getTableName());
            return result;
        }
    }

    
    @AutoLog(value = "getFormItem-通过code查询获取子表单数据")
    @ApiOperation(value="getFormItem-通过code查询获取子表单数据", notes="getFormItem-通过code查询获取子表单数据")
    @GetMapping({"/getFormItem/{code}"})
    public Result<?> b(@PathVariable("code") String code, HttpServletRequest var2) {
        OnlCgformHead onlCgformHead = (OnlCgformHead) this.onlCgformHeadService.getById(code);
        if (onlCgformHead == null) {
            Result.error("表不存在");
        }

        Result result = new Result();
        LoginUser loginuser = (LoginUser) SecurityUtils.getSubject().getPrincipal();
        JSONObject formItemJsonObject = this.onlineService.queryOnlineFormItem(onlCgformHead, loginuser.getUsername());
        result.setResult(onlineUtils.resultOnlineFormItem(formItemJsonObject));
        result.setOnlTable(onlCgformHead.getTableName());
        return result;
    }

     2、前端实现

     下面代码主要是实现online表单具体数据的显示与申请提交

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      

      <a-table v-if= "tableVisible"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        >

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="SubmitApplication(record)">提交申请</a>
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>

  import {getOnlineFormItem,getOnlineColumns,getOnlineData} from "@/api/form";
  //import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'
  import { filterObj } from '@/utils/util';
  import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage'
  import Vue from 'vue'
  import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types"
  import {definitionStartByOnlineDataId} from "@/views/flowable/api/definition"
  
  export default {
    name: "OnlineTableList",
    //mixins:[JeecgListMixin],
    components: {
    },
    props: {
    },
    data () {
      return {
        description: 'online表单数据查询页面',
        taskForm: {
          returnTaskShow: false, // 是否展示回退表单
          delegateTaskShow: false, // 是否展示委派表单
          defaultTaskShow: true, // 默认处理
          sendUserShow: false, // 审批用户
          multiple: false,
          comment: "", // 意见内容
          commentFileDto: { //意见里的附件
            type: '',
            fileurl: ''
          }, 
          procInsId: "", // 流程实例编号
          instanceId: "", // 流程实例编号
          deployId: "", // 流程定义编号
          taskId: "", // 流程任务编号
          procDefId: "", // 流程编号
          businessKey: "", //业务主键编号
          dataId: "",//业务主键编号
          nodeType: "", //当前节点类型 目前只针对多实例会签做处理
          vars: "",
          targetKey: "",
          category: "",//流程类别，目前主要区别online与自定义使用
          onlineId: "",//online表单Id
          onlineDataId: "",//online数据Id
        },
        /* 数据源 */
        dataSource:[],
        url: {
            list: "",
        },          
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter:{
          column: 'createTime',
          order: 'desc',
        },
        /* 筛选参数 */
        filters: {},
        /* table加载状态 */
        loading:false,
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        /* 查询折叠 */
        toggleSearchStatus:false,
        // 表头
        columns: [],
        tableVisible: false,
        indexColumn: [{
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        }],
        actionColumn: [{
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' },
          }],
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
      this.taskForm.deployId = this.$route.query && this.$route.query.deployId
      this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
      this.taskForm.category = this.$route.query && this.$route.query.category
      //节点类型
      this.taskForm.nodeType = this.$route.query && this.$route.query.nodeType
      //online表单id和数据id
      this.taskForm.onlineId = this.$route.query && this.$route.query.onlineId
      this.finished = this.$route.query && this.$route.query.finished
      console.log("this.taskForm=",this.taskForm)
      this.url.list = "/flowable/onlCgformHead/getData/" + this.taskForm.onlineId +"?column=id&order=desc&pageNo=1&pageSize=10&superQueryMatchType=and"
      getOnlineColumns(this.taskForm.onlineId).then(res => {//获取从表相关信息
        console.log("getOnlineColumns res=",res)
        if (res.success) {
          this.columns = res.result.columns
          console.log("getOnlineColumns columns=",this.columns)
          this.columns.forEach(function(item, index) {//删除不需要的列
            Object.keys(item).map(function (key) {
              null == item[key] && delete item[key]
            })  
          })
          this.columns = this.indexColumn.concat(this.columns)
          this.columns = this.columns.concat(this.actionColumn)
          console.log("this.columns=",this.columns)
          
          getOnlineData(this.taskForm.onlineId).then(datares => {
            if (datares.success) {
              console.log("getOnlineData datares=",datares)
              this.dataSource = datares.result.records
              this.ipagination.total = datares.result.total
              console.log("getOnlineData dataSource=",this.dataSource)
              this.tableVisible = true
            }
            else {
              this.$message.error(datares.message);
            }   
          })  
        }
        else {
          this.$message.error(res.message);
        }  
      })  
      this.getSuperFieldList();
    },
    computed: {
    },
    methods: {
      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;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        console.log(pagination)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        //TODO 字段权限控制
        var str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },
      /* 图片预览 */
      getImgView(text){
        if(text && text.indexOf(",")>0){
          text = text.substring(0,text.indexOf(","))
        }
        return getFileAccessHttpUrl(text)
      },
      /* 文件下载 */
      // update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------
      downloadFile(text){
        if(!text){
          this.$message.warning("未知的文件")
          return;
        }
        if(text.indexOf(",")>0){
          text = text.substring(0,text.indexOf(","))
        }
        let url = getFileAccessHttpUrl(text)
        window.open(url);
      },
      initDictConfig(){
      },
      /** 发起申请 */
      SubmitApplication(row) {
        
        var params = Object.assign({
            dataId: row.id
        }, '[]');
        //variables.variables = formData;
        //console.log("variables=", this.variables);
        // 启动流程并将表单数据加入流程变量
        console.log("SubmitApplication this.taskForm=",this.taskForm)
        console.log("SubmitApplication row=",row)
        definitionStartByOnlineDataId(row.id, this.taskForm.onlineId, this.taskForm.deployId, params).then(res => {
          console.log("definitionStartByOnlineDataId res=",res);
          this.$message.success(res.message);
        })
        /**  online表单业务流程申请 */
        /*this.$router.push({ path: '/flowable/task/record/index',
          query: {
            deployId: this.taskForm.deploymentId,
            procDefId:this.taskForm.procDefId,
            onlineId: this.taskForm.onlineId,
            category: this.taskForm.category,
            businessKey: row.id,
            finished: true
          }
        })*/
      },
      getSuperFieldList(){
        let fieldList=[];
    
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>

    3、审批流程的显示

     下面就是根据后端提供的online表单数据进行显示与处理

//流程过程中有online表单数据，获取online表单配置与数据
              if (res.result.hasOwnProperty('onlineConfig')) {
                this.onlineViewForm.onlineFormData = res.result.onlineConfig;
                console.log("onlineViewForm.onlineFormData=",this.onlineViewForm.onlineFormData);
                console.log("this.taskForm=",this.taskForm)
                var sonlineId = res.result.onlineId
                getOnlineFormData(sonlineId,this.taskForm.onlineDataId).then(res => {
                  console.log("getOnlineFormData res=",res);
                  if (res.success) {
                    this.onlineViewForm.model = res.result;
                    console.log("onlineViewForm.model=",this.onlineViewForm.model);
                    getOnlineFormItem(sonlineId).then(itemres => {//获取从表相关信息
                      if (itemres.success) {
                        console.log("getOnlineFormItem itemres=",itemres)
                        this.onlineFormItem.formData = itemres.result
                        if(itemres.result.head.subTableStr != null) {
                          var subTable = itemres.result.head.subTableStr
                          this.onlineFormItem.subTable = subTable.split(",")
                          console.log("this.onlineFormItem.subTable=",this.onlineFormItem.subTable)
                          for (var i=0;i<this.onlineFormItem.subTable.length;i++) {
                            var tablename = this.onlineFormItem.subTable[i]
                            if(this.onlineFormItem.formData.schema.properties.hasOwnProperty(tablename)) {
                              this.onlineFormItem.tableForm.tableName[i] = tablename
                              this.onlineFormItem.tableForm.columns[i] = this.onlineFormItem.formData.schema.properties[tablename].columns
                              this.onlineFormItem.dataSource[i] = this.onlineViewForm.model[tablename]
                            }
                          }
                          console.log("this.onlineFormItem.tableForm=",this.onlineFormItem.tableForm)
                          console.log("this.onlineFormItem.dataSource=",this.onlineFormItem.dataSource)
                        }
                        
                        this.onlineViewForm.disabled = true;
                        this.onlineViewForm.isNew = false;
                        this.onlineViewForm.visible = true;
                      }
                      else {
                        this.$message.error(itemres.message);
                      }  
                    })
                  }
                  
                })    
              }

    4、效果图