|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="form-main">
|
|
|
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
|
- <a-form @submit="handleSubmit" :form="form">
|
|
|
+ <!-- <a-form @submit="handleSubmit" :form="form">
|
|
|
<a-form-item
|
|
|
label="标题"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
@@ -21,113 +21,225 @@
|
|
|
<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>
|
|
|
+ </a-form>-->
|
|
|
+ <k-form-build :value="jsonData" :dynamicData="dynamicData" ref="KFB" @submit="handleSubmit" />
|
|
|
+ <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-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import pick from "lodash.pick";
|
|
|
+import pick from 'lodash.pick'
|
|
|
|
|
|
- export default {
|
|
|
- name: 'demoForm',
|
|
|
- props:{
|
|
|
- /*全局禁用,可表示查看*/
|
|
|
- disabled:{
|
|
|
- type:Boolean,
|
|
|
- default:false,
|
|
|
- required:false
|
|
|
- },
|
|
|
- /*流程数据*/
|
|
|
- processData:{
|
|
|
- type:Object,
|
|
|
- default:()=>{return {}},
|
|
|
- required:false
|
|
|
+export default {
|
|
|
+ name: 'demoForm',
|
|
|
+ props: {
|
|
|
+ /*全局禁用,可表示查看*/
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ required: false
|
|
|
+ },
|
|
|
+ /*流程数据*/
|
|
|
+ processData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
},
|
|
|
- /*是否新增*/
|
|
|
- isNew: {type: Boolean, default: false, required: false}
|
|
|
+ required: false
|
|
|
},
|
|
|
- data () {
|
|
|
- return {
|
|
|
- url:{
|
|
|
- getForm:'/actBusiness/getForm',
|
|
|
- addApply:'/actBusiness/add',
|
|
|
- editForm:'/actBusiness/editForm',
|
|
|
- },
|
|
|
- description: '流程表单demo,按例开发表单。需在 activitiMixin.js 中加入写好的表单',
|
|
|
- // form
|
|
|
- form: this.$form.createForm(this),
|
|
|
- /*表单回显数据*/
|
|
|
- data:{},
|
|
|
- btndisabled: false
|
|
|
+ /*是否新增*/
|
|
|
+ isNew: { type: Boolean, default: false, required: false }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ jsonData: {},
|
|
|
+ url: {
|
|
|
+ getForm: '/actBusiness/getForm',
|
|
|
+ addApply: '/actBusiness/add',
|
|
|
+ editForm: '/actBusiness/editForm'
|
|
|
+ },
|
|
|
+ description: '流程表单demo,按例开发表单。需在 activitiMixin.js 中加入写好的表单',
|
|
|
+ // form
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ /*表单回显数据*/
|
|
|
+ data: {},
|
|
|
+ btndisabled: false,
|
|
|
+ ceshi_file: null,
|
|
|
+ dynamicData: {
|
|
|
+ aa: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '男'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '女'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- console.log("流程数据",this.processData)
|
|
|
- if (!this.isNew){
|
|
|
- this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log('流程数据', this.processData)
|
|
|
+ let businessTable = ''
|
|
|
+ //如果没有值则在另一个属性上有值
|
|
|
+ if (!this.processData.businessTable) {
|
|
|
+ this.processData.businessTable = this.processData.tableName
|
|
|
+ }
|
|
|
+ this.getAction('/tbTableInfo/query', { businessTable: this.processData.businessTable }).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 (!this.isNew) {
|
|
|
+ this.init()
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /*回显数据*/
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- methods: {
|
|
|
- /*回显数据*/
|
|
|
- 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)
|
|
|
- this.$nextTick(() => {
|
|
|
- this.form.setFieldsValue(pick(this.data,'name'))
|
|
|
- });
|
|
|
- this.btndisabled = false;
|
|
|
- }else {
|
|
|
- this.$message.error(res.message)
|
|
|
+ // 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
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- // handler
|
|
|
- handleSubmit (e) {
|
|
|
- e.preventDefault()
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- let formData = Object.assign(this.data||{}, values)
|
|
|
- formData.procDefId = this.processData.id;
|
|
|
- formData.procDeTitle = this.processData.name;
|
|
|
- if (!formData.tableName)formData.tableName = this.processData.businessTable;
|
|
|
- formData.filedNames = _.keys(values).join(",");
|
|
|
- console.log('formData', values)
|
|
|
-
|
|
|
- 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])
|
|
|
+ }
|
|
|
}
|
|
|
- this.btndisabled = true;
|
|
|
- this.postFormAction(url,formData).then((res)=>{
|
|
|
- if (res.success){
|
|
|
- this.$message.success("保存成功!")
|
|
|
- this.$emit('afterSubmit',formData)
|
|
|
- }else {
|
|
|
+ // 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)
|
|
|
+ } else {
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
- }).finally(()=>{
|
|
|
- this.btndisabled = false;
|
|
|
})
|
|
|
- }
|
|
|
+ .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, '校验失败')
|
|
|
})
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.$emit('close')
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+//获取主表字段,排除子表标识
|
|
|
+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;
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .form-main{
|
|
|
- }
|
|
|
+.form-main {
|
|
|
+}
|
|
|
</style>
|