ScientificSystem/ruoyi-ui/src/views/workflow/work/proj_app.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 这个地方显示表单的标题 -->
        <span>{{ processName }}</span>
      </div>
      <!-- 这里定义栅格布局组件 -->
      <el-col :span="18" :offset="3">
        <div class="form-conf" v-if="formOpen">
          <!-- parser是一个自定义的组件，:form-conf="formData" 将 formData 对象作为属性传递给 parser 组件 -->
          <!-- 推测是通过getData获取数据, formData是表单的结构数据 -->
          <!-- formData是这个组件初始化的时候从后端接口得到的表单外观结构 -->
          <!-- formData是纯数据，getData是解析formData,这个函数默认是data作为参数 -->
          <parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/>
        </div>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { getProcessForm, startProcess } from '@/api/workflow/process'
import Parser from '@/utils/generator/parser'
import { getApplication} from "@/api/scientific/application";
export default {
  name: 'WorkStart',
  components: {
    Parser
  },
  data() {
    return {
      definitionId: null,
      deployId: null,
      procInsId: null,
      // 项目信息主表的Id,用于获取项目的各种信息
      projectId: null,
      formOpen: false,
      formData: {},
      projectData: {},
      processName: null,
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 发起地址请求的时候可以获得这个数据的信息
      this.deployId = this.$route.params && this.$route.params.deployId;
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      this.procInsId = this.$route.query && this.$route.query.procInsId;
      // 从地址的传递参数获取项目的Id信息
      this.projectId = this.$route.query && this.$route.query.projectId;
      // 如果能够从路由获得流程名字就赋值，否则就默认名字
      if(this.$route.query && this.$route.query.processName) {
        this.processName = this.$route.query && this.$route.query.processName;
      }
      else {
        this.processName = "更新流程";
      }
      console.log(this.projectId)
      getApplication(this.projectId).then(response => {
        this.projectData = response.data;
        this.processName = this.projectData.projectName + "-项目立项";
      });
      // 获取流程的动态表单
      getProcessForm({
        definitionId: this.definitionId,
        deployId: this.deployId,
        procInsId: this.procInsId
      }).then(res => {
        if (res.data) {
          // 赋值到表单
          this.formData = res.data;
          this.formOpen = true;
          this.formData.fields.forEach(field => {
            if (field.__vModel__ === "projectName") {
              field.__config__.defaultValue = this.projectData.projectName;
              field.readonly = true;
            }
            if (field.__vModel__ === "oldBudget") {
              field.__config__.defaultValue = this.projectData.projectBudget + "万";
              field.readonly = true;
            }
            if (field.__vModel__ === "directorName") {
              field.__config__.defaultValue = this.projectData.projectLeader;
              field.readonly = true;
            }
          });
        }
      })

    },
    /** 接收子组件传的值 */
    getData(data) {
      if (data) {
        console.log("get data");
        const variables = [];
        data.fields.forEach(item => {
          let variableData = {};
          // 直接获得标签信息
          variableData.label = item.__config__.label
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = [];
            item.__config__.defaultValue.forEach(val => {
              array.push(val)
            })
            variableData.val = array;
          } else {
            // 如果是单个信息,直接得到defaultValue
            variableData.val = item.__config__.defaultValue
          }
          variables.push(variableData)
        })
        this.variables = variables;
      }
    },
    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        data.valData.projectId = this.projectId;
        console.log("submit");
        console.log(data.valData);
        
        startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {
          this.$modal.msgSuccess(res.msg);
          this.$tab.closeOpenPage({
            path: '/work/own'
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>