cd-work-flow-web/src/views/activiti/form/demoForm2.vue

<template>
  <div class="form-main">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <!-- <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="标题"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="disabled"
                   v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入标题' }]}
          ]"
                   name="name"
                   placeholder="给目标起个名字" />
        </a-form-item>
        <a-form-item v-if="!disabled"
                     :wrapperCol="{ span: 24 }"
                     style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" :disabled="disabled||btndisabled" @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
        </a-form-item>
      </a-form>-->
      <k-form-build :value="jsonData" @change="handleChange" :dynamicData="dynamicData" ref="KFB" @submit="handleSubmit" />
      <div style="text-align:center">
      <a-button
        htmlType="submit"
        type="primary"
        :disabled="disabled||btndisabled"
        @click="handleSubmit"
      >保存</a-button>
      <a-button style="margin-left: 8px;" :disabled="disabled||disabled2" @click="close">取消</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'demoForm',
  props: {
    /*全局禁用，可表示查看*/
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    /*流程数据*/
    processData: {
      type: Object,
      default: () => {
        return {}
      },
      required: false
    },
    /*是否新增*/
    isNew: { type: Boolean, default: false, required: false }
  },
  data() {
    return {
      disabled2:false,//用来取决于表单时不同流程节点填写不同表单信息使用
      jsonData: {},
      url: {
        getForm: '/actBusiness/getForm',
        addApply: '/actBusiness/add',
        editForm: '/actBusiness/editForm',
        leaveType: '/sys/dict/getDictItems'
      },
      description: '流程表单demo，按例开发表单。需在 activitiMixin.js 中加入写好的表单',
      // form
      form: this.$form.createForm(this),
      /*表单回显数据*/
      data: {},
      btndisabled: false,
      ceshi_file: null,
      dynamicData: {
        typeData: [],//请假类型下拉数据
        reimbursementTypeList:[],//报销类型下拉数据
        invoiceTypeList:[],//发票类型下拉数据
      }
    }
  },
  created() {
    console.log('流程数据', this.processData)
    //加载一些下拉选择数据等
    this.getDataList();
    let businessTable = ''
    //如果没有值则在另一个属性上有值
    if (!this.processData.businessTable) {
      this.processData.businessTable = this.processData.tableName
    }
    this.getAction('/tbTableInfo/query', { businessTable: this.processData.businessTable ,taskNodeId:this.processData.key}).then(res => {
      this.jsonData = res.result.jsonContent
      // this.$refs.KFB.setData({aaa:null,bbb:null,name:"123"})
      // this.$refs.KFB.getData().then(res => {
      //   console.log('aaa',res)
      // })
      //后台检测到流程节点有关联表单且前台处于我的待办界面打开表单详情
      if(res.result.isSave&&this.processData.isSuspended!=undefined){
        this.disabled=false;
        this.btndisabled=false;
      }
      if (!this.isNew) {
        this.init()
      }
    })
  },
  methods: {
    //获取获取下拉数据等
    getDataList(){
      //获取请假类型下拉数据
      this.getAction(this.url.leaveType + '/leave_type').then(res => {
        if (res.success) {
          this.dynamicData.typeData = res.result
        } else {
          this.$message.error(res.message)
        }
      })
      //获取报销类型下拉数据
      this.getAction(this.url.leaveType + '/reimbursement_type').then(res => {
        if (res.success) {
          this.dynamicData.reimbursementTypeList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
      //获取发票类型下拉数据
      this.getAction(this.url.leaveType + '/invoice_type').then(res => {
        if (res.success) {
          this.dynamicData.invoiceTypeList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /*回显数据*/
    init() {
      this.btndisabled = true
      var r = this.processData
      this.getAction(this.url.getForm, {
        tableId: r.tableId,
        tableName: r.tableName
      }).then(res => {
        if (res.success) {
          let formData = res.result
          formData.tableName = r.tableName
          this.data = formData
          console.log('表单回显数据', this.data)
          console.log(this.data)
          this.$refs.KFB.setData(this.data)
          // this.$nextTick(() => {
          //   this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))

          // })
          this.btndisabled = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //表单字段数值发生改变事件
    handleChange(value, key) {
      // 数据变化时触发
      //如果开始时间发生变化
      if(key=="start_time"){
        //判断结束时间是否存在
        if (this.$refs.KFB.form.getFieldValue('end_time')) {
          //获取时间差
          let duration = startEndFun(
            value,
            this.$refs.KFB.form.getFieldValue('end_time')
          )
          if (duration) {
            // 使用k-form-design组件的form属性修改表单数据
            this.$refs.KFB.setData({
              duration: duration
            })
          }
        }
      }
      //如果结束时间发生变化
      if(key=="end_time"){
        //判断结束时间是否存在
        if (this.$refs.KFB.form.getFieldValue('start_time')) {
          //获取时间差
          let duration = startEndFun(
            this.$refs.KFB.form.getFieldValue('start_time'),
            value
          )
          if (duration) {
            // 使用k-form-design组件的form属性修改表单数据
            this.$refs.KFB.setData({
              duration: duration
            })
          }
        }
      }
    },
    // handler
    handleSubmit(e) {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          let formData = JSON.parse(JSON.stringify(res))
          console.log(formData)
          formData.id = this.data.id
          formData.procDefId = this.processData.id
          formData.procDeTitle = this.processData.name
          if (!formData.tableName) formData.tableName = this.processData.businessTable
          formData.filedNames = _.keys(res).join(',');
          formData.filedNames=getFiledNames(formData);//获取主表字段，排除子表标识
          var url = this.url.addApply
          if (!this.isNew) {
            url = this.url.editForm
          }
          //是否存在子表
          let ischild=false;
          //循环表单字段属性判断是否属性中包含数组对象
          let i=0;//子表数量
          _.keys(res).join(',').split(',').forEach(element => {
            if (formData[element] instanceof Array) {
              //判断是否符合子表命名规则
              if (element.indexOf('&') != -1) {
                let tableChildNameList = element.split('&')
                //判断是否能拆分两个字符，子表标识和子表数据库名称
                if (tableChildNameList.length == 2) {
                  i++;
                  let childName = tableChildNameList[1] //子表数据库名称
                  if(!formData.table_name_children){
                    //第一次拼接
                    formData.table_name_children = childName //表名
                  }else{//后面的表明拼接用“,”隔开
                    formData.table_name_children = formData.table_name_children+","+childName //表名
                  }
                  //定义属性名和值
                  formData["childFiledNames"+i] = _.keys(formData[element][0]).join(',') //子表字段名
                  formData["childList"+i] = JSON.stringify(formData[element]) //子表数据
                  ischild=true;
                }
              } else {
                //如果不是子表则是上传文件，则转字符串
                formData[element] = JSON.stringify(formData[element])
              }
            }
            // formData[element];
          })
          //判断需不需要存子表
          if(ischild){
            formData.filedNames=formData.filedNames+",table_name_children";
          }

          console.log(formData)
          //子表数据

          //调用保存接口
          this.btndisabled = true
          this.postFormAction(url, formData)
            .then(res => {
              if (res.success) {
                this.$message.success('保存成功！')
                this.$emit('afterSubmit', formData)
                this.$emit('close')
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              this.btndisabled = false
            })
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    close() {
      this.$emit('close')
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res))
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    }
  }
}
//获取主表字段，排除子表标识
function getFiledNames(formData) {
  let filedNames="";
  let list = formData.filedNames.split(',');//获取表单属性名集合
  list.forEach(element => {
    if (element.indexOf('&')==-1) {//查询是否有这个字段
      if(filedNames==""){//第一次则直接等于
        filedNames=element;
      }else{//后面用逗号隔开
        filedNames=filedNames+","+element
      }
    }
  })
  return filedNames;
}

//根据开始时间 结束时间计算天数
function startEndFun(start, end) {
  if (start && end) {
    let startTime = new Date(start) // 开始时间
    let endTime = new Date(end) // 结束时间
    let usedTime = endTime - startTime // 相差的毫秒数
    let days = (usedTime / 1000 / 60 / 60).toFixed(2) // 计算出天数
    return days
  } else {
    return null
  }
}

//格式化时间
function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
    }
  }
  return fmt
}

function padLeftZero(str) {
  return ('00' + str).substr(str.length)
}
</script>
<style lang="less" scoped>
.form-main {
}
</style>