一：框架 springboot+vue+mysql+element-ui ，工具，作者用了idea，中间也穿插了(sts+vscode)
二：主要技术点，
1.表单构建事件（dragstart,drag,dragend），表单构建能充分体现vue双向绑定特性，
2.数据库表单设计(主要有表单模板主表【存一些主表信息，标题，说明之类的】，表单模板子表【存放表单字段类型，比如文本，多选，图片，等一些相关信息】)，
表单信息主表【存放设计好的表单使用保存后的标题，说明之类的，】，表单信息子表【主要存放具体字段所填信息】，也就是四张表格，外加一张附件图片表，，根据需要看是否需要
3.各个字段控件的原始代码，【可以在element上面直接copy,然后把对应字段改成动态绑定】，样式可能需要有个专业的来调整一下，不然很头疼
三：构建后demo展示
构建页面主要分三个区域，控件选择区域，控件形成最终区域，控件属性设置区域，控件属性设置区域可以自由增减，看个人需求
使用构建好的表单进行填写操作
使用自己构建的表单保存后的详情页面，
构建的表单是重复利用，就类似钉钉模板功能，后面可以重复使用该表单，暂时没有做已填写内容修改功能，可能会有一点点麻烦，需要回显控件的同时匹配上所填写的数据
四：代码
1.vue前端代码，只贴主要代码，
新增表单，以及修改表单的代码
<style>
/*@import '/static/mycss/formmodel/element-ui/lib_2.4.6/theme-chalk/index.css';*/
@import '/static/mycss/formmodel/css/oa_common.css';
</style>
<style scoped="scoped">
.centerInput {
width: 600px
}
.el-main {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
box-sizing: border-box;
padding: 0px
}
.mvtool {
}
</style>
<template>
<div id="app">
<el-container>
<el-container>
<el-main>
<div class="com-header">自定义表单
<el-button @click="cancel()" plain>取消</el-button>
<el-button @click="onSubmit('form')" plain>保存</el-button>
</div>
<el-row>
<el-col :span="4">
<div class="grid-content">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="字段控件" name="first">
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_text')"
@dragend="dragend"
>
<span class="name">文本输入框</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_radio')"
@dragend="dragend"
>
<span class="name">单选框</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_checkbox')"
@dragend="dragend"
>
<span class="name">复选框</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_select')"
@dragend="dragend"
>
<span class="name">下拉菜单</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_textarea')"
@dragend="dragend"
>
<span class="name">多行文本框</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_date')"
@dragend="dragend"
>
<span class="name">时间</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_appendix')"
@dragend="dragend"
>
<span class="name">附件</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
<div class="tab-control"
draggable="true"
@dragstart="dragstart($event,'_img')"
@dragend="dragend"
>
<span class="name">图片</span><span class="form_icon"><i
class="el-icon-edit"></i></span>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="字段控件" name="second"></el-tab-pane>
<el-tab-pane label="常用字段" name="third"></el-tab-pane> -->
</el-tabs>
</template>
</div>
</el-col>
<el-col :span="14">
<div class="grid-content centerbox"
@drop="drop"
@dragover.prevent style="height:600px;"
>
<div class="h1">{{formInfo.title}}（请在右侧设置）</div>
<div class="h2">{{formInfo.desp}}</div>
<div v-for="(item,index) in items">
<div v-if="item.item_type == '_text'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<el-input placeholder="请输入内容" class="centerInput" :name=item.name
:id=item.id></el-input>
</div>
</div>
<div v-if="item.item_type == '_textarea'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<textarea cols="82" rows="5" placeholder="请输入内容" :name=item.name
:id=item.id></textarea>
</div>
</div>
<div v-if="item.item_type == '_radio'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<span v-for="(ri,index) in item.defaultList">
<el-radio v-model="item.radio" :label=ri.val>{{ri.text}}</el-radio>
</span>
</div>
</div>
<div v-if="item.item_type == '_checkbox'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<!-- <span v-for="(ri,index) in item.defaultList">
<el-checkbox v-model="item.checkbox" :label=ri.val>{{ri.text}}</el-checkbox>
</span> -->
<el-checkbox-group v-model="item.checkbox" class="checkgroup">
<el-checkbox v-for="(ri,index) in item.defaultList" :label="ri.val">
{{ri.text}}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div v-if="item.item_type == '_select'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<el-select placeholder="请选择" v-model="item.option">
<el-option v-for="a in item.defaultList" :key="a.val" :label="a.text"
:value="a.val">
</el-option>
</el-select>
<!-- <span v-for="(ri,index) in item.defaultList">
<el-radio v-model="item.option" :label=ri.val>{{ri.text}}</el-radio>
</span> -->
</div>
</div>
<div v-if="item.item_type == '_date'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="dateTime"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</div>
</div>
</div>
<div v-if="item.item_type == '_appendix'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
</div>
</div>
<div v-if="item.item_type == '_img'" @click=setProp(index)>
<div v-bind:class="{fieldbox:true, activebox: item.isActive}">
<div class="ed_tool">
<span class="move bg-blue" @click=moveUp(index) @click.stop>上移</span>
<span class="move bg-blue" @click=moveDown(index) @click.stop>下移</span>
</div>
<a href="javascript:void(0)" @click=delRow(index) @click.stop><i
class="el-icon-circle-close close"></i></a>
<span class="w-title">{{item.titleShowName}}：</span>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="imgFileList"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</div>
</div>
<!-- <div class="fieldbox activebox">
<a href="javascript:void(0)"><i class="el-icon-circle-close close"></i></a>
<span class="w-title">文本框：</span>
<el-input v-model="input" placeholder="请输入内容" class="centerInput"></el-input>
</div> -->
</div>
</el-col>
<el-col :span="6">
<div class="grid-content">
<template>
<el-tabs v-model="tabbactiveName" @tab-click="handlebClick">
<el-tab-pane label="控件设置" name="firstb">
<div class="editor-form">
<div class="editor-form-group">
<span class="w-title">标题</span>
<el-input v-model="props.title" @keyup.native=changePropTitle
placeholder="请输入内容"></el-input>
<span class="w-title">描述</span>
<el-input v-model="props.desp" @keyup.native=changePropDesp
placeholder="请输入内容"></el-input>
<span class="w-title">必填项目</span>
<div><input v-model="props.notNull" @change=changePropNotNull
type="checkbox">这是个必填项
</div>
<span class="w-title">最大长度</span>
<el-input v-model="props.maxlength"
@keyup.native=changePropMaxlength
placeholder="请输入内容"></el-input>
<div
v-if="curSelectObj!=-1&&items[curSelectObj].item_type == '_radio'">
<span class="w-title">选项设置</span>
<div v-for="(item,index) in props.defaultList">
<el-input v-model="props.defaultList[index]" :value=item
placeholder="请输入内容" style="width: 200px"
@keyup.native=changePropSel(index)></el-input>
<el-button type="danger" icon="el-icon-delete" circle
@click=delSel(index)
></el-button>
</div>
<el-button type="primary" @click=addSel>添加选项</el-button>
</div>
<div
v-if="curSelectObj!=-1&&items[curSelectObj].item_type == '_checkbox'">
<span class="w-title">选项设置</span>
<div v-for="(item,index) in props.defaultList">
<el-input v-model="props.defaultList[index]" :value=item
placeholder="请输入内容" style="width: 200px"
@keyup.native=changePropSel(index)></el-input>
<el-button type="danger" icon="el-icon-delete" circle
@click=delSel(index)
></el-button>
</div>
<el-button @click=addSel>添加选项</el-button>
</div>
<div
v-if="curSelectObj!=-1&&items[curSelectObj].item_type == '_select'">
<span class="w-title">选项设置</span>
<div v-for="(item,index) in props.defaultList">
<el-input v-model="props.defaultList[index]" :value=item
placeholder="请输入内容" style="width: 200px"
@keyup.native=changePropSel(index)></el-input>
<el-button type="danger" icon="el-icon-delete" circle
@click=delSel(index)
></el-button>
</div>
<el-button @click=addSel>添加选项</el-button>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="表单设置" name="second">
<div class="editor-form">
<div class="editor-form-group">
<span class="w-title">标题</span>
<el-input v-model="formInfo.title" placeholder="请输入内容"></el-input>
<!-- <span class="w-title">类型</span>-->
<!-- <br/>-->
<!-- <el-select v-model="formInfo.type">-->
<!-- <el-option key="1" label="测试0。。。" value="1"> </el-option>-->
<!-- <el-option key="2" label="测试1。。。" value="2"> </el-option>-->
<!-- <!– <el-option v-for="item in fromType" :key="item.code" :value="item.code" :label="item.name"></el-option>–>-->
<!-- </el-select>-->
<br/>
<span class="w-title">描述</span>
<el-input v-model="formInfo.desp" placeholder="请输入内容"></el-input>
</div>
</div>
</el-tab-pane>
</el-tabs>
</template>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import {baseUrl} from '@/conf/env.js'
/**import '@/util/mqttws31.js'/
/*import draggable from 'vuedraggable'*/
import Vue from 'vue'
export default {
data() {
return {
fromType: [],
/*自定义组件集合*/
items: [],
dateTime: '',
fileList: [],
imgFileList: [],
/*属性设置*/
props: {
title: '', desp: '', notNull: false, maxlength: '',
defaultList: ['选项1', '选项2', '选项3']
},
/*当前设置组件对象*/
curSelectObj: -1,
activeName: 'first',
tabbactiveName: 'firstb',
formInfo: {title: '表单名称', desp: '表单描述'}
//client: new Paho.MQTT.Client('127.0.0.1', 61623, 'myid123'), // 第三个参数是clientID可以为空
//topic: 'test' // 订阅的主题
}
},
created: function () {
this.getDicList('FROM_TYPE', false, 'FROM_TYPE');
//this.client.connect({userName:"admin", password:"password", onSuccess: this.onConnect}); // 连接服务器并注册连接成功处理事件
//this.client.onConnectionLost = this.onConnectionLost; // 注册连接断开处理事件
//this.client.onMessageArrived = this.onMessageArrived; // 注册消息接收处理事件
// this.client.disconnect(); // 断开连接
},
methods:
{
handleClick(tab, event) {
console.log(tab, event);
},
handlebClick(tab, event) {
console.log(tab, event);
},
dragstart: function (event, src) {
event.dataTransfer.setData('item', src);
},
drop: function (event) {
var src = event.dataTransfer.getData('item');
if (src == '_text') {
this.setText();
} else if (src == '_textarea') {
this.setTextArea();
} else if (src == '_radio') {
this.setRadio();
} else if (src == '_checkbox') {
this.setCheckbox();
} else if (src == '_select') {
this.setSelect();
} else if (src == '_date') {
this.setDate();
} else if (src == '_appendix') {
this.setAppendix();
} else if (src == '_img') {
this.setImg();
}
/*若非加载第一个控件，则设置上次控件失去焦点*/
if (this.curSelectObj != -1) {
this.items[this.curSelectObj].isActive = false;
}
this.curSelectObj = this.items.length - 1;
},
dragend: function (event) {
event.dataTransfer.clearData()
},
//设置文本框属性
setText: function () {
var curuuid = uuid();
this.items.push({
item_type: '_text', //field_type
id: curuuid, //field_code
title: '文本框', //type_name
desp: '',
titleShowName: '文本框', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [],//默认列表
defaultValue: '',//默认值
isActive: true
});
},
cancel: function () {
this.$router.push({path: "/system/formModel/list", query: {}});
},
//设置多行文本框属性
setTextArea: function () {
var curuuid = uuid();
this.items.push({
item_type: '_textarea', //field_type
id: curuuid, //field_code
title: '多行文本框', //type_name
desp: '',
titleShowName: '多行文本框', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [],//默认列表
defaultValue: '',//默认值
isActive: true
});
},
//设置单选按钮
setRadio: function () {
var curuuid = uuid();
this.items.push({
item_type: '_radio', //field_type
id: curuuid, //field_code
title: '单选框', //type_name
desp: '',
titleShowName: '单选框', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [{val: curuuid + '_1', text: '选项1'},
{val: curuuid + '_2', text: '选项2'},
{val: curuuid + '_3', text: '选项3'}],//默认列表
defaultValue: '',//默认值
radio: '',
isActive: true
});
this.props.defaultList = ['选项1', '选项2', '选项3'];
},
//设置复选框属性
setCheckbox: function () {
var curuuid = uuid();
this.items.push({
item_type: '_checkbox', //field_type
id: curuuid, //field_code
title: '复选框', //type_name
desp: '',
titleShowName: '复选框', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [{val: curuuid + '_1', text: '选项1'},
{val: curuuid + '_2', text: '选项2'},
{val: curuuid + '_3', text: '选项3'}],//默认列表
defaultValue: '',//默认值
checkbox: [],
isActive: true
});
this.props.defaultList = ['选项1', '选项2', '选项3'];
},
//设置下拉选择属性
setSelect: function () {
var curuuid = uuid();
this.items.push({
item_type: '_select', //field_type
id: curuuid, //field_code
title: '下拉菜单', //type_name
desp: '',
titleShowName: '下拉菜单', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [{val: curuuid + '_1', text: '选项1'},
{val: curuuid + '_2', text: '选项2'},
{val: curuuid + '_3', text: '选项3'}],//默认列表
defaultValue: '',//默认值
option: '',
isActive: true
});
this.props.defaultList = ['选项1', '选项2', '选项3'];
},
//设置下拉选择属性
setDate: function () {
var curuuid = uuid();
this.items.push({
item_type: '_date', //field_type
id: curuuid, //field_code
title: '日期', //type_name
desp: '',
titleShowName: '日期', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [],//默认列表
defaultValue: '',//默认值
option: '',
isActive: true
});
},
//设置下附件属性
setAppendix: function () {
var curuuid = uuid();
this.items.push({
item_type: '_appendix', //field_type
id: curuuid, //field_code
title: '附件', //type_name
desp: '',
titleShowName: '附件', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [],//默认列表
defaultValue: '',//默认值
option: '',
isActive: true
});
},
//设置下图片属性
setImg: function () {
var curuuid = uuid();
this.items.push({
item_type: '_img', //field_type
id: curuuid, //field_code
title: '图片', //type_name
desp: '',
titleShowName: '图片', //filed_name
fieldControl: { //约束条件集合
notNull: false,
maxlength: '',
isNumber: ''
},
defaultList: [],//默认列表
defaultValue: '',//默认值
option: '',
isActive: true
});
},
setProp: function (index) {
/*console.log("event.target-->",this.items[index].defaultList[index].val);
console.log("event.type-->",this.items[index].item_type);*/
/*取消上个选中焦点*/
if (this.curSelectObj <= this.items.length - 1) {
this.items[this.curSelectObj].isActive = false;
}
this.props.title = this.items[index].titleShowName;
this.props.desp = this.items[index].desp;
this.props.notNull = this.items[index].fieldControl.notNull;
this.props.maxlength = this.items[index].fieldControl.maxlength;
this.curSelectObj = index;
//设置右侧栏目赋值选项
if (this.items[index].item_type == '_radio') {
this.props.defaultList = [];
for (var i = 0; i < this.items[index].defaultList.length; i++) {
this.props.defaultList[i] = this.items[index].defaultList[i].text;
}
}
//设置右侧栏目赋值选项
if (this.items[index].item_type == '_checkbox') {
this.props.defaultList = [];
for (var i = 0; i < this.items[index].defaultList.length; i++) {
this.props.defaultList[i] = this.items[index].defaultList[i].text;
}
}
//设置右侧栏目赋值选项
if (this.items[index].item_type == '_select') {
this.props.defaultList = [];
for (var i = 0; i < this.items[index].defaultList.length; i++) {
this.props.defaultList[i] = this.items[index].defaultList[i].text;
}
}
/*设置当前选择的为选中焦点*/
this.items[this.curSelectObj].isActive = true;
},
changePropTitle: function () {
console.log("this.curSelectObj-->", this.curSelectObj);
console.log("this.props.title-->", this.props.title);
this.items[this.curSelectObj].titleShowName = this.props.title;
},
changePropDesp: function () {
this.items[this.curSelectObj].desp = this.props.desp;
},
changePropNotNull: function () {
this.items[this.curSelectObj].fieldControl.notNull = this.props.notNull;
},
changePropMaxlength: function () {
this.items[this.curSelectObj].fieldControl.maxlength = this.props.maxlength;
},
//修改选项设置值
changePropSel: function (index) {
console.log("index-->", this.props.defaultList[index]);
this.items[this.curSelectObj].defaultList[index].text = this.props.defaultList[index];
},
//删除选项
delSel: function (index) {
/*删除元素*/
if (this.items[this.curSelectObj].defaultList.length > 1) {
this.props.defaultList.splice(index, 1);
this.items[this.curSelectObj].defaultList.splice(index, 1);
} else {
alert("至少保留一个选项");
}
},
/*添加选项*/
addSel: function () {
var _index = this.props.defaultList.length;
var _curuuid = this.items[this.curSelectObj].id + _index;//这个地方顺序不对，但是否启动值得商榷
this.props.defaultList.push("新选项");
this.items[this.curSelectObj].defaultList.push(
{val: _curuuid, text: '新选项'}
);
},
/*删除此栏*/
delRow: function (index) {
/*删除元素*/
this.items.splice(index, 1);
/*初始化操作*/
if (this.items.length == 0) {
this.curSelectObj = -1;
} else {
this.curSelectObj = 0;
}
},
/*上移*/
moveUp: function (index) {
if (index > 0) {
var options = this.items;
var tempOption = options[index - 1];
Vue.set(options, index - 1, options[index]);
Vue.set(options, index, tempOption);
this.curSelectObj--;
}
},
/*下移*/
moveDown: function (index) {
if (index < this.items.length - 1) {
var options = this.items;
var tempOption = options[index + 1];
Vue.set(options, index + 1, options[index]);
Vue.set(options, index, tempOption);
this.curSelectObj++;
}
},
/*数据字典获取公共方法*/
getDicList(typeKey, isNeedName, flag) {
let _self = this;
let obj = {'typeKey': typeKey, 'isNeedName': isNeedName};
this.$axios.post(baseUrl + '/common/getDicByTypeKey', obj).then(function (response) {
let data = response.data;
if (data.code === 100) {
_self.fromType = data.data.items;
} else {
_self.$message.error("数据字典：" + _self.typeKey + "加载失败！")
}
}).catch(function (error) {
_self.$message.error("数据字典：" + _self.typeKey + "加载失败！")
})
},
//保存
onSubmit: function (formName) {
var _self = this;
console.log("baseUrl-->", baseUrl);
if (_self.formInfo.title == '') {
this.$confirm('表单名称不能为空', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
})
return false
}
// if(_self.formInfo.type == undefined){
// this.$confirm('表单类型必须选择', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'error'
// })
// return false
// }
var params = new URLSearchParams();
params.append('items', JSON.stringify(_self.items));
params.append('formInfo', JSON.stringify(_self.formInfo));
this.$axios.post(baseUrl + '/formModel/save', params,
{
headers: {
"access-control-allow-origin": "*"//这里的access-control-allow-origin可以用来解决跨域问题
}
}
).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.$message({message: '保存成功！', type: 'success'});
_self.$router.push({path: '/system/formModel/list'});
} else {
_self.$message.error('保存失败');
console.log("erro", response);
}
}).catch(function (error) {
_self.$message.error('保存失败');
console.log(error);
});
},
onConnectionLost: function (responseObject) {
if (responseObject.errorCode !== 0) {
console.log('onConnectionLost:' + responseObject.errorMessage);
console.log('连接已断开');
}
},
onMessageArrived: function (message) {
console.log("收到消息:" + message.payloadString);
},
onConnect: function () {
console.log('onConnected');
this.client.subscribe(this.topic); // 订阅主题
}
}
}
//生成uuid
window.uuid = function () {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
}
</script>
使用构建好的表单进行数据填写
<style scoped>
/*@import '/static/mycss/formmodel/element-ui/lib_2.4.6/theme-chalk/index.css';*/
@import '/static/mycss/formmodel/css/oa_common_show.css';
.el-main {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
box-sizing: border-box;
padding: 0px
}
.centerInput {
width: 600px
}
body {
background: #eef1f6;
}
.input_box {
margin: 15px 30px 0 30px;
padding: 50px 30px;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
}
.el-form-item__content {
padding-left: 15px;
width: 50%;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.el-form-item__label {
color: #888;
}
.line {
text-align: center;
}
.spInput {
width: 100px
}
/*新增样式*/
.table-wrapper {
width: 750px;
margin: 100px auto;
font-size: 16px;
color: #666;
}
.table-wrapper h3 {
font-size: 100%;
text-align: center;
color: #333;
}
.table-wrapper .infor {
padding: 10px 0;
width: 100%
}
.table-wrapper .infor .fr {
float: right;
}
.form-table {
width: 100%;
margin-bottom: 10px;
border-collapse: collapse;
border-spacing: 0;
}
.form-table td, .form-table th {
padding: 10px;
font-weight: normal;
border: 1px solid #ddd;
}
.form-table th {
background-color: #f2f2f2;
}
.form-table textarea {
width: 90%;
resize: none;
padding: 10px 2%;
}
</style>
<template>
<div class="div-min">
<div class="crumbs">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/system/home' }"><i class="el-icon-menu"></i> 首页</el-breadcrumb-item>
<el-breadcrumb-item>开发者工具</el-breadcrumb-item>
<el-breadcrumb-item>表单f提交</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
<div class="table-wrapper">
<el-form ref="form" :model="formData" :rules="rules" label-width="160px"
style="margin-top:-110px; width:790px;margin-left:-50px " class="input_box">
<!-- 表单开始 -->
<h3>{{formName}}</h3>
<div class="infor">
<span></span>
<span class="fr">申请日期：{{curDate}}</span>
</div>
<table class="form-table">
<!--<tr>
<th width="12.5%">申请人</th>
<td width="12.5%">{{curUser}}</td>
<th width="12.5%">部门</th>
<td width="12.5%">{{curDep}}</td>
<th width="12.5%">岗位</th>
<td width="12.5%">{{post}}</td>
<th width="12.5%">工号</th>
<td width="12.5%">{{workNumber}}</td>
</tr>-->
<tr v-for="(item,index) in items">
<th>
<span slot="label" v-if="item.fieldControl.notNull == 'true'">
<span style="color: red">*</span>
{{item.titleShowName}}
</span>
<span slot="label" v-else>
{{item.titleShowName}}
</span>
</th>
<td colspan="7">
<span v-if="item.item_type == '_text'">
<el-input v-model=item.value placeholder="请输入内容" :name=item.name :id=item.id></el-input>
</span>
<span v-if="item.item_type == '_textarea'">
<el-input v-model=item.value placeholder="请输入内容" type="textarea"></el-input>
</span>
<span v-if="item.item_type == '_radio'">
<span v-for="(ri,index1) in item.defaultList">
<el-radio v-model="item.radio" :label=ri.val
@change=putRadioValue(ri.text,index)
@change.stop>{{ri.text}}</el-radio>
</span>
</span>
<span v-if="item.item_type == '_checkbox'">
<el-checkbox-group v-model="item.checkbox">
<el-checkbox v-for="(ri,index) in item.defaultList" :label="ri.text"
>{{ri.text}}
</el-checkbox>
</el-checkbox-group>
</span>
<span v-if="item.item_type == '_select'">
<el-select placeholder="请选择" v-model="item.option" @change=putSelectedValue(index)
@change.stop>
<el-option v-for="a in item.defaultList" :key="a.val" :label="a.text"
:value="a.text">
</el-option>
</el-select>
</span>
<span v-if="item.item_type == '_date'">
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="item.dateTime"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</div>
</span>
<span v-if="item.item_type == '_appendix'">
<el-upload
v-model="item.fileIds"
class="upload-demo"
:action="uploadUrl"
:on-success="uploadSuccess"
:on-preview="downloadFile"
:on-remove="uploadRemove"
multiple
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</span>
<span v-if="item.item_type == '_img'">
<el-upload
v-model="item.fileImgIds"
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="uploadSuccessImg"
:on-preview="showBig"
:on-remove="uploadRemoveImg"
:file-list="imgFileList"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="imgDialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</span>
</td>
</tr>
<!--
<tr>
<th><span style="color:red">*</span> <span>审批人</span></th>
<td colspan="7">
<el-form-item label="" prop="perList" style="margin-left:-160px">
<template slot-scope="scope">
<span v-for="tag in formData.perList">
<el-tag
:key="tag"
closable
:disable-transitions="false"
:type="tag.type"
@close="handleClose(tag)">
{{tag.realName}}
</el-tag>
<i class="el-icon--right el-icon--left">→
</i>
</span>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showAttendListDialog()"><i class="el-icon-circle-plus"></i></el-button>
</template>
</el-form-item>
</td>
</tr>
-->
</table>
<!-- 表单结束 -->
<el-form-item style="margin-left:160px;padding-top:20px">
<el-button type="success" @click="onSubmit('form',1)">提交</el-button>
<!-- <el-button type="primary" @click="onSubmit('form',0)">暂存</el-button> -->
<el-button @click="goBack()">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-dialog title="人员选择" :visible.sync="dialog_attendUserList">
<template>
<el-transfer
filterable
:filter-method="searchUser"
filter-placeholder="请输入姓名"
v-model="selectAttendUserIdList"
:data="attendUserIdList"
:titles="['可选人员', '已选人员']"
target-order="push">
</el-transfer>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog_attendUserList = false">取 消</el-button>
<el-button type="primary" @click="returnAttendUser()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {baseUrl} from '@/conf/env.js'
import {queryMenucode} from 'util/validate';
export default {
data() {
return {
dialogImageUrl: '',
imgDialogVisible: false,
fileList: [],
imgFileList: [],
uploadUrl: baseUrl + '/sysFile/upload',//上传路径
updateIds: [],
updateUIds: [],
updateImgIds: [],
updateImgUIds: [],
tags: [],
attendUserIdList: [],
selectAttendUserIdList: [],
dialog_attendUserList: false,
curDate: '',
curUser: '',
curDep: '',
post: '',
workNumber: '',
items: [],
formModelMain: '',
formName: '',
formInfo: {title: '', desp: ''},
inputVisible: false,
dialogFormVisible: false,
inputValue: '',
formData: {
id: '',
applyName: '',
remark: '',
applyType: '0',
formModelMain: '',
perList: [],
delList: [],
items: [],
},
rules: {
/*applyName: [
{required: true, message: '请输入申请人名称', trigger: 'blur'}
],*/
testName: [
{required: true, message: '请输入名称', trigger: 'blur'}
],
perList: [
{required: true, message: '请选择审批人', trigger: 'blur'}
]
},
dialogStatus: 'create',
textMap: {
create: '审批人选择'
},
queryParm: {
testCode: '',
applyType: '',
},
saveParm: {
id: '',
userId: null,
labelSpe: '',
labelNum: '',
topNum: '',
applyType: '',
startFooterNum: '000000001'
},
userList: []
}
},
created() {
var _self = this;
var id = this.$route.params.id;
//this.getSysUserList();
if (id === 'add') {
let parm = this.$route.query.objData
const p_obj = JSON.parse(decodeURI(parm))
this.formModelMain = p_obj.formModelMain;//先赋值然后在获取
this.formName = p_obj.formName;
//显示表单开始
var params = new URLSearchParams();
params.append('id', p_obj.formModelMain);
this.$axios.post(baseUrl + '/formModel/editForm', params).then(function (response) {
let data = response.data;
if (data.code == 100) {
var _reJa = data.data.reJa;
/*当前用户和部门
var curUser = data.data.curUser;
var curDep = data.data.curDep;
var post = data.data.post;
var workNumber = data.data.workNumber;
_self.curUser = curUser;
_self.curDep = curDep;
_self.post = post;
_self.workNumber = workNumber;*/
for (var i = 0; i < _reJa.length; i++) {
console.log(_reJa[i].fieldControl.notNull);
var _reJo = _reJa[i];
_self.items.push({
item_type: _reJo.item_type, //field_type
id: _reJo.id, //field_code
title: _reJo.title, //type_name
desp: _reJo.desp,
titleShowName: _reJo.titleShowName, //filed_name
fieldControl: _reJo.fieldControl,
defaultList: _reJo.defaultList,//默认列表
defaultValue: '',//默认值
option: '',
isActive: _reJo.isActive,
value: '',
radio: '',
checkbox: [],
dateTime: '',
fileIds: [],
fileImgIds: [],
});
}
} else {
console.log("表单数据加载失败," + data.message, response);
}
}).catch(function (error) {
console.log("表单数据加载失败", error);
});
//显示表单结束
// this.getHistoryInfo();//获取配置好的审批人
this.formData.applyName = "";
} else {
this.getDataInfo();
}
this.getCurDate();
},
methods: {
getCurDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
this.curDate = currentdate;
},
uploadSuccess: function (res, file) {
if (res.data != null && res.data.names != null) {
for (let i = 0; i < res.data.ids.length; i++) {
this.updateIds.push(res.data.ids[i]);
this.updateUIds.push(file.uid);
}
}
},
uploadRemove: function (file) {
var _self = this;
var index = ''
if (file.id == undefined || file.id == null || file.id == '') {//刚上传的图片还没有保存业务关联
index = parseInt(this.updateUIds.findIndex(item => item == file.uid));
} else {//已经关联的图片删除
index = parseInt(this.updateIds.findIndex(item => item == file.id));
}
if (parseInt(index) >= parseInt(0)) {
_self.updateUIds.splice(index, 1)
_self.updateIds.splice(index, 1)
}
},
downloadFile(file) {
this.getBlob(file.url).then(blob => {
this.saveAs(blob, file.name);
});
},
uploadSuccessImg: function (res, file) {
if (res.data != null && res.data.ids != null) {
for (let i = 0; i < res.data.ids.length; i++) {
this.updateImgIds.push(res.data.ids[i]);
this.updateImgUIds.push(file.uid);
}
}
},
uploadRemoveImg: function (file) {
var _self = this;
var index = ''
if (file.id == undefined || file.id == null || file.id == '') {//刚上传的图片还没有保存业务关联
index = parseInt(this.updateImgUIds.findIndex(item => item == file.uid));
} else {//已经关联的图片删除
index = parseInt(this.updateImgIds.findIndex(item => item == file.id));
}
if (parseInt(index) >= parseInt(0)) {
_self.updateImgUIds.splice(index, 1)
_self.updateImgIds.splice(index, 1)
}
},
showBig(file) {
this.imgDialogVisible = true;
this.dialogImageUrl = file.url;
},
beforeUpload: function (file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt1M = file.size / 1024 / 1024 < 10;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt1M) {
this.$message.error('上传图片大小不能超过 10MB!');
}
return (isJPG || isPNG) && isLt1M
},
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
},
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
},
putRadioValue(itemOpt, index) {
this.items[index].value = itemOpt;
},
putSelectedValue(index) {
this.items[index].value = this.items[index].option;
},
handleClose(tag) {
this.selectAttendUserIdList = [];
this.formData.perList.splice(this.formData.perList.indexOf(tag), 1);
for (var i = 0; i < this.formData.perList.length; i++) {
var index = this.formData.perList[i].index;
this.selectAttendUserIdList.push(index);
}
},
returnAttendUser() {
this.dialog_attendUserList = false;
this.formData.perList = [];
for (var i = 0; i < this.selectAttendUserIdList.length; i++) {
var index = this.selectAttendUserIdList[i];
this.formData.perList.push({
realName: this.attendUserIdList[index].label,
isShow: '01',
id: this.attendUserIdList[index].userId,
index: index,
userName: this.attendUserIdList[index].userName
});
}
},
searchUser(query, item) {
return item.query.indexOf(query) > -1;
},
getSysUserList() {
var _self = this;//this指向被改变，提前定义
this.$axios.post(baseUrl + '/lcclTest/getList', {}).then(function (response) {
let data = response.data;
if (data.code == 100) {
data.data.forEach((item, k) => {
_self.attendUserIdList.push({
label: item.realName,
key: (k),
userId: item.id,
query: item.realName,
userName: item.userName
});
});
} else {
console.log("获取用户列表失败," + data.message, response)
}
}).catch(function (error) {
console.log("获取用户列表失败", error)
})
},
/**
* 键盘事件
*/
search(ev) {
if (ev.keyCode == 13) {
this.getData(1);
}
},
close: function () {
this.$refs['ruleForm'].resetFields();
this.dialogFormVisible = false;
},
renderHeader(createElement, {column}) {
return createElement(
'div',
{
style: {}
}, [createElement("img", {
attrs: {
'src': '../../../../static/img/puls.png'
},
style: {
'width': '20px', 'height': '20px',
'margin-top': '15px', 'margin-bottom': '-10px', 'margin-left': '10px'
},
on: {
click: event => {
/* this.addInfo()*/
}
}
}
)]
)
},
/**根据来的路径不同，返回到不同的页面 */
goBack() {
var id = this.$route.params.id;
if (id === 'add') {
this.$router.push('/system/formApply/list');
} else {
this.$router.push('/system/formModel/list');
}
},
//修改的时候回显数据
getDataInfo() {
var _self = this;
var id = this.$route.params.id;
this.$axios.get(baseUrl + '/lcclTest/view/' + id).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.formData = data.data;
//回显selectat
_self.selectAttendUserIdList = [];
for (var i = 0; i < _self.attendUserIdList.length; i++) {
const perList_arr = _self.formData.perList;
for (var j = 0; j < perList_arr.length; j++) {
if (_self.attendUserIdList[i].userId == perList_arr[j].id) {
_self.selectAttendUserIdList.push(i);
}
}
}
}
}).catch(function (error) {
//_self.$message.error('保存失败');
console.log(error);
});
},
//这是获取配置好的审批人
getHistoryInfo() {
var _self = this;
this.$axios.get(baseUrl + '/lcclTest/getHistory/' + _self.formData.applyType).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.formData = data.data;
}
}).catch(function (error) {
//_self.$message.error('保存失败');
console.log(error);
});
},
showAttendListDialog() {
var _self = this;
_self.selectAttendUserIdList = [];
for (var i = 0; i < _self.attendUserIdList.length; i++) {
const perList_arr = _self.formData.perList;
for (var j = 0; j < perList_arr.length; j++) {
if (_self.attendUserIdList[i].userId == perList_arr[j].id) {
_self.selectAttendUserIdList.push(i);
}
}
}
this.dialog_attendUserList = true;
this.tags = [];
for (var i = 0; i < this.selectAttendUserIdList.length; i++) {
var index = this.selectAttendUserIdList[i];
this.tags.push({
userId: this.attendUserIdList[index].userId,
realName: this.attendUserIdList[index].label,
userName: this.attendUserIdList[index].userName,
index: index,
type: ''
});
}
},
onSubmit(formName, isSubmit) {
var _self = this;
var isAllow = true;
var tips = "";
//验证表单
for (var i = 0; i < this.items.length; i++) {
var _it = this.items[i];
var _fc = _it.fieldControl;
var _nn = _fc.notNull;
var _ml = _fc.maxlength;
if (_it.item_type == '_text') {
//必填项验证
if (_nn == 'true') {
if (_it.value == '') {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_textarea') {
//必填项验证
if (_nn == 'true') {
if (_it.value == '') {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_select') {
//必填项验证
if (_nn == 'true') {
if (_it.value == '') {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_checkbox') {
//必填项验证
if (_nn == 'true') {
if ((_it.checkbox.length) <= 0) {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_radio') {
//必填项验证
if (_nn == 'true') {
if (_it.value == '') {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_date') {
//必填项验证
if (_nn == 'true') {
if (_it.dateTime == '') {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_appendix') {
//必填项验证
if (_nn == 'true') {
if (this.updateIds.length <= 0) {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
if (_it.item_type == '_img') {
//必填项验证
if (_nn == 'true') {
if (this.updateImgIds.length <= 0) {
isAllow = false;
tips += _it.titleShowName + "不能为空" + "\n"
}
}
//验证长度
if (_ml != 'undefined') {
if ((_it.value).length > parseInt(_ml)) {
isAllow = false;
tips += _it.titleShowName + "长度已超出" + "\n"
}
}
}
}
if (isAllow) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isSubmit == 1) {
this.$confirm('提交后不可修改, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
this.formData.isSubmit = isSubmit;
//遍历赋值
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].item_type == '_checkbox') {
var cks = this.items[i].checkbox;
var _val = '';
for (var j = 0; j < cks.length; j++) {
_val += cks[j] + ',';
}
if (_val != null && _val != '') {
_val = _val.substring(0, _val.length - 1);
}
this.items[i].value = _val;
}
if (this.items[i].item_type == '_date') {
this.items[i].value = this.items[i].dateTime;
}
if (this.items[i].item_type == '_appendix') {
this.items[i].fileIds = this.updateIds;
}
if (this.items[i].item_type == '_img') {
this.items[i].fileImgIds = this.updateImgIds;
}
}
this.formData.items = this.items;
this.formData.formModelMain = this.formModelMain;
this.$axios.post(baseUrl + '/formApply/save', _self.formData).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.$message({message: '提交成功！', type: 'success'});
_self.$router.push('/system/formApply/list');
} else {
_self.$message.error('提交失败');
console.log("erro", response);
}
}).catch(function (error) {
_self.$message.error('提交失败');
console.log(error);
});
}).catch(() => {
})
} else {
this.formData.isSubmit = isSubmit;
this.$axios.post(baseUrl + '/lcclTest/save', _self.formData).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.$message({message: '暂存成功！', type: 'success'});
_self.$router.push('/system/formModel/list');
} else {
_self.$message.error('暂存失败');
console.log("erro", response);
}
}).catch(function (error) {
_self.$message.error('暂存失败');
console.log(error);
});
}
} else {
return false;
}
});
}//验证通过
else {
alert(tips);
}
}
}
}
</script>
表单提交后的详情查看页面
<style scoped>
/*@import '/static/mycss/formmodel/element-ui/lib_2.4.6/theme-chalk/index.css';*/
@import '/static/mycss/formmodel/css/oa_common_show.css';
.centerInput {
width: 600px
}
.el-main {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
box-sizing: border-box;
padding: 0px
}
body {
background: #eef1f6;
}
.input_box {
margin: 15px 30px 0 30px;
padding: 50px 30px;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
}
.el-form-item__content {
padding-left: 15px;
width: 50%;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.el-form-item__label {
color: #888;
}
.line {
text-align: center;
}
/*新增样式*/
.table-wrapper {
width: 750px;
margin: 20px auto;
font-size: 16px;
color: #666;
}
.table-wrapper h3 {
font-size: 100%;
text-align: center;
color: #333;
}
.table-wrapper .infor {
padding: 10px 0;
width: 100%
}
.table-wrapper .infor .fr {
float: right;
}
.form-table {
width: 100%;
margin-bottom: 10px;
border-collapse: collapse;
border-spacing: 0;
}
.form-table td, .form-table th {
padding: 10px;
font-weight: normal;
border: 1px solid #ddd;
}
.form-table th {
background-color: #f2f2f2;
}
.form-table textarea {
width: 90%;
resize: none;
padding: 10px 2%;
}
</style>
<template>
<div class="div-min">
<div class="crumbs">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/system/home' }"><i class="el-icon-document"></i> 首页
</el-breadcrumb-item>
<el-breadcrumb-item>个人办公</el-breadcrumb-item>
<el-breadcrumb-item>我的流程</el-breadcrumb-item>
<el-breadcrumb-item>我的申请</el-breadcrumb-item>
<el-breadcrumb-item>查看</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="plugins-tips">
<!-- 审批表单 -->
<div class="table-wrapper">
<div class="input_box" style="padding:10px 5px; width: 800px;margin-left: -3%">
<h3>{{formName}}</h3>
<div class="infor">
<span>编号：{{formNumber}}</span>
<span class="fr">申请日期：{{curDate}}</span>
</div>
<table class="form-table">
<tr v-for="(item,index) in formData.items">
<th>
{{item.titleShowName}}
</th>
<td colspan="7">
<span v-if="item.item_type == '_appendix' ">
<ol style="margin-left: 15px">
<li v-for="file in item.files">
<a :href=queryParm.baseUrl+file.path
:download='file.origName+"."+file.suffixName' target="_blank"> {{file.origName}}.{{file.suffixName}}</a>
</li>
</ol>
</span>
<span v-else-if="item.item_type == '_img' ">
<ol style="margin-left: 15px">
<span v-for="item in item.imgs" @click="showBig(queryParm.baseUrl+item.path)">
<img :src="queryParm.baseUrl+item.path" width="166px;" height="200px;">
<el-dialog :visible.sync="imgDialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</span>
</ol>
</span>
<span v-else>
{{item.value}}
</span>
</td>
</tr>
</table>
<!-- 审批列表
<div style="width: 100%; margin-left: 0px">
<el-form ref="form" :model="formData" >
<el-form-item prop="perList">
<el-table :data="formData.perList" stripe style="width:100%">
<el-table-column prop="realName" label="姓名" min-width="60"></el-table-column>
<el-table-column prop="auditState" label="审核状态" min-width="60">
<template slot-scope="scope">
<el-tag type="primary" v-if="scope.row.auditState=='0'">审核中</el-tag>
<el-tag type="success" v-if="scope.row.auditState=='1'">通过</el-tag>
<el-tag type="danger" v-if="scope.row.auditState=='2'">不通过</el-tag>
<el-tag type="danger" v-if="scope.row.auditState=='-2'">结束</el-tag>
</template>
</el-table-column>
<el-table-column prop="auditDesc" label="审核意见" min-width="90"></el-table-column>
<el-table-column prop="auditDate" label="审核时间" sortable min-width="90"></el-table-column>
<el-table-column label="操作" min-width="60">
<template slot-scope="scope_">
只有满足该申请提交，且该用户没有审核并且是接下来要申请的人
<el-button size="mini" v-if="scope_.row.auditState==0 && formData.isSubmit ==1 && scope_.row.id == formData.curPersonId" @click="cb(scope_.$index, scope_.row,formData)">催办</el-button>
<el-button size="mini" v-if="scope_.row.auditState!=0 || formData.isSubmit !=1 || scope_.row.id != formData.curPersonId" :disabled="true" @click="cb(scope_.$index, scope_.row,formData)">催办</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-button @click="goBack()">返回</el-button>
</el-form-item>
</el-form>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import {baseUrl} from '../../../conf/env.js'
export default {
data: function () {
return {
dialogImageUrl: '',
imgDialogVisible: false,
curUser: '',
curDep: '',
post: '',
workNumber: '',
curGw: '',
curGh: '',
formNumber: '',
curDate: '',
formName: '',
formData: {
id: '',
applyName: '',
isSubmit: '',
curPersonId: '',
pIds: '',
sort: null,
is_leaf: '00',
perList: [],
delList: [],
items: []
},
iconList: [],
queryParm: {
id: '',
formName: '',
baseUrl: ''
}
}
},
computed: {},
created() {
let parm = this.$route.query.objData
const p_obj = JSON.parse(decodeURI(parm));
this.queryParm.id = p_obj.id;
this.queryParm.baseUrl = baseUrl;
this.queryParm.formName = p_obj.formName;
this.formName = p_obj.formName;
this.formNumber = p_obj.formNumber;
this.curDate = p_obj.applyDate;
this.getDataInfo();
},
methods: {
goBack() {
this.$router.push('/system/formUse/list');
},
getDataInfo() {
var _self = this;
this.$axios.get(baseUrl + '/formApply/view/' + this.queryParm.id, {params: {baseUrl: this.queryParm.baseUrl}}).then(function (response) {
let data = response.data;
if (data.code == 100) {
_self.curDep = data.data.curDep;
_self.curUser = data.data.curUser;
_self.post = data.data.post;
_self.workNumber = data.data.workNumber;
_self.formData = data.data;
/*_self.curUser = */
}
}).catch(function (error) {
//_self.$message.error('保存失败');
console.log(error);
});
},
showBig(file) {
this.imgDialogVisible = true;
this.dialogImageUrl = file;
}
}
}
</script>
2.后台代码
表单模板列表，以及保存模板的代码
package com.ebiz.manager.controller.lccl;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.shiro.authz.annotation.Logical;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.ebiz.common.base.controller.BaseController;
import com.ebiz.common.base.entity.FormModelDetail;
import com.ebiz.common.base.entity.FormModelMain;
import com.ebiz.common.base.entity.SysUser;
import com.ebiz.common.util.ResultModel;
import com.ebiz.common.util.StringTools;
import com.ebiz.common.util.annotation.SysLog;
import com.ebiz.common.util.constants.DictCodeList;
import com.ebiz.common.util.constants.ResultStatus;
import com.ebiz.manager.service.lccl.FormModelDetailService;
import com.ebiz.manager.service.lccl.FormModelMainService;
import com.ebiz.manager.service.sys.SysUserService;
/**
* 表单模板管理
*
* @author zq
* @date 2018年10月15日上午11:18:25
* @TODO 描述d
*/
@RestController
@RequestMapping(value = "/formModel")
public class FormModelController extends BaseController {
@Autowired
private FormModelDetailService formModelDetailService;
@Autowired
private FormModelMainService formModelMainService;
@Autowired
private SysUserService sysUserService;
@SysLog("表单列表")
// @RequiresPermissions(value = { "formModel:list", "formModel:update" },
// logical = Logical.OR)
@PostMapping(value = "pageList")
public ResultModel getUserListPage(@RequestBody FormModelMain formModelMain) {
SysUser su = super.getUserFromSession();
formModelMain.setDelFlag(DictCodeList.DEL_FLAG_02.getValue());
formModelMain.setAddUser(su.getId());
Long userCount = formModelMainService.selectEntityCount(formModelMain);
List<FormModelMain> list = formModelMainService.selectEntityPageList(formModelMain);
if (list != null) {
for (FormModelMain entity : list) {
if (entity != null && entity.getAddUser() != null) {
SysUser sysUser = new SysUser();
sysUser.setId(entity.getAddUser());
sysUser = sysUserService.getUserInfo(sysUser);
entity.getMap().put("addUser", sysUser.getAddUser());
}
}
}
return ResultModel.ok(list, userCount);
}
@RequestMapping(value = "save", method = RequestMethod.POST)
public ResultModel save(HttpServletRequest req) {
try {
String items = req.getParameter("items");
String formInfo = req.getParameter("formInfo");
JSONObject fiJo = JSON.parseObject(formInfo);
// 保存主表
FormModelMain formModelMain = new FormModelMain();
formModelMain.setFormName(fiJo.getString("title"));
formModelMain.setFromDesp(fiJo.getString("desp"));
formModelMainService.insertEntity(formModelMain);
// 保存明细表
FormModelDetail formModelDetail = new FormModelDetail();
JSONArray ja = new JSONArray();
ja = JSON.parseArray(items);
for (int i = 0; i < ja.size(); i++) {
JSONObject jo = ja.getJSONObject(i);
formModelDetail.setFormModelMainId(formModelMain.getId());
formModelDetail.setFieldName((String) jo.get("titleShowName"));
formModelDetail.setFieldType((String) jo.get("item_type"));
formModelDetail.setRemark((String) jo.get("desp"));
// *****************************
formModelDetail.setFieldCode((String) jo.get("id"));
JSONObject fieldControlJo = (JSONObject) jo.get("fieldControl");
String notNull = fieldControlJo.getString("notNull");
String maxlength = fieldControlJo.getString("maxlength");
if (maxlength == null || "".equals(maxlength)) {
maxlength = "unlimited";
}
formModelDetail.setFieldControl(notNull + "|" + maxlength);
String cid = (String) jo.get("id");
JSONArray defaultListJa = (JSONArray) jo.get("defaultList");
String str = "";
for (int j = 0; j < defaultListJa.size(); j++) {
JSONObject jsonOb = defaultListJa.getJSONObject(j);
str = str + cid + "_" + (j + 1) + "," + jsonOb.getString("text") + "|";
}
if (str != null && !"".equals(str)) {
str = str.substring(0, str.length() - 1);
}
formModelDetail.setFieldOptions(str);
formModelDetail.setSort(i + 1);
formModelDetailService.insertEntity(formModelDetail);
}
return ResultModel.ok();
} catch (Exception ex) {
ex.printStackTrace();
return ResultModel.error(ResultStatus.EXCEPTION);
}
}
@SysLog("表单编辑删除")
@RequiresPermissions(value = { "formModel:add", "formModel:update", "formModel:delete", "formModel:audit",
"formModel:permis", "formModel:cancel" }, logical = Logical.OR)
@PostMapping(value = "batchDel")
public ResultModel batchDelForm(@RequestBody Map<String, Object> map) {
try {
ArrayList<String> dels = (ArrayList<String>) map.get("delmap");
String id = (String) map.get("id");
if (StringTools.isNullOrEmpty(dels)) {
FormModelMain formModelMain = new FormModelMain();
FormModelDetail formModelDetail = new FormModelDetail();
formModelMain.setId(id);
formModelMain.setDelFlag(DictCodeList.DEL_FLAG_01.getValue());
formModelDetail.setFormModelMainId(id);
formModelDetail.setDelFlag(DictCodeList.DEL_FLAG_01.getValue());
formModelMainService.updateEntity(formModelMain);
formModelDetailService.updateEntity(formModelDetail);
} else {
for (int i = 0; i < dels.size(); i++) {
FormModelMain formModelMain = new FormModelMain();
FormModelDetail formModelDetail = new FormModelDetail();
formModelMain.setId(dels.get(i));
formModelMain.setDelFlag(DictCodeList.DEL_FLAG_01.getValue());
formModelDetail.setFormModelMainId(dels.get(i));
formModelDetail.setDelFlag(DictCodeList.DEL_FLAG_01.getValue());
formModelMainService.updateEntity(formModelMain);
formModelDetailService.updateEntity(formModelDetail);
}
}
} catch (Exception e) {
// logger.error("删除失败:" + e.getMessage(), e);
return ResultModel.exception(e.getMessage());
}
return ResultModel.ok();
}
@RequiresPermissions(value = { "formModel:update" }, logical = Logical.AND)
@RequestMapping(value = "edit", method = RequestMethod.POST)
public ResultModel updateForm(HttpServletRequest req) {
try {
String id = req.getParameter("id");
String type = req.getParameter("type");
// formInfo数据
FormModelMain formModelMain = new FormModelMain();
formModelMain.setId(id);
formModelMain = formModelMainService.selectEntity(formModelMain);
// items数据
FormModelDetail formModelDetail = new FormModelDetail();
List<FormModelDetail> formModelDetailList = null;
HashMap<String, Object> reHm = new HashMap<String, Object>();
JSONArray reJa = new JSONArray();
if (formModelMain != null) {
formModelDetail.setFormModelMainId(formModelMain.getId());
formModelDetailList = formModelDetailService.selectEntityList(formModelDetail);
for (int i = 0; i < formModelDetailList.size(); i++) {
JSONObject jo = new JSONObject();
FormModelDetail fm = formModelDetailList.get(i);
jo.put("item_type", fm.getFieldType());
jo.put("id", fm.getFieldCode());
jo.put("title", fm.getFieldName());
jo.put("desp", fm.getRemark());
jo.put("titleShowName", fm.getFieldName());
jo.put("isActive", false);
// fieldControl属性设置
JSONObject fcJo = new JSONObject();
String fcStr = fm.getFieldControl();
fcJo.put("notNull", fcStr.split("\\|")[0]);
fcJo.put("maxlength", fcStr.split("\\|")[1]);
jo.put("fieldControl", fcJo);
// defaultListJa选择值设置
JSONArray defaultListJa = new JSONArray();
String fpStr = fm.getFieldOptions();
if (fpStr != null && !"".equals(fpStr)) {
String[] fps = fpStr.split("\\|");
for (int j = 0; j < fps.length; j++) {
JSONObject fpJo = new JSONObject();
fpJo.put("val", fps[j].split(",")[0]);
fpJo.put("text", fps[j].split(",")[1]);
defaultListJa.add(fpJo);
}
}
jo.put("defaultList", defaultListJa);
reJa.add(jo);
}
reHm.put("reJa", reJa);
reHm.put("formInfo", formModelMain);
System.out.println("reHm=" + reHm.toString());
}
return ResultModel.ok(reHm);
} catch (Exception e) {
e.printStackTrace();
return ResultModel.error(ResultStatus.EXCEPTION);
}
}
@RequiresPermissions(value = { "formModel:update" }, logical = Logical.OR)
@RequestMapping(value = "editForm", method = RequestMethod.POST)
public ResultModel editForm(HttpServletRequest req) {
try {
String id = req.getParameter("id");
String type = req.getParameter("type");
// formInfo数据
FormModelMain formModelMain = new FormModelMain();
formModelMain.setId(id);
formModelMain = formModelMainService.selectEntity(formModelMain);
// items数据
FormModelDetail formModelDetail = new FormModelDetail();
List<FormModelDetail> formModelDetailList = null;
HashMap<String, Object> reHm = new HashMap<String, Object>();
JSONArray reJa = new JSONArray();
if (formModelMain != null) {
formModelDetail.setFormModelMainId(formModelMain.getId());
formModelDetailList = formModelDetailService.selectEntityList(formModelDetail);
for (int i = 0; i < formModelDetailList.size(); i++) {
JSONObject jo = new JSONObject();
FormModelDetail fm = formModelDetailList.get(i);
jo.put("item_type", fm.getFieldType());
jo.put("id", fm.getFieldCode());
jo.put("title", fm.getFieldName());
jo.put("desp", fm.getRemark());
jo.put("titleShowName", fm.getFieldName());
jo.put("isActive", false);
// fieldControl属性设置
JSONObject fcJo = new JSONObject();
String fcStr = fm.getFieldControl();
fcJo.put("notNull", fcStr.split("\\|")[0]);
fcJo.put("maxlength", fcStr.split("\\|")[1]);
jo.put("fieldControl", fcJo);
// defaultListJa选择值设置
JSONArray defaultListJa = new JSONArray();
String fpStr = fm.getFieldOptions();
if (fpStr != null && !"".equals(fpStr)) {
String[] fps = fpStr.split("\\|");
for (int j = 0; j < fps.length; j++) {
JSONObject fpJo = new JSONObject();
fpJo.put("val", fps[j].split(",")[0]);
fpJo.put("text", fps[j].split(",")[1]);
defaultListJa.add(fpJo);
}
}
jo.put("defaultList", defaultListJa);
reJa.add(jo);
}
reHm.put("reJa", reJa);
reHm.put("formInfo", formModelMain);
System.out.println("reHm=" + reHm.toString());
}
return ResultModel.ok(reHm);
} catch (Exception e) {
e.printStackTrace();
return ResultModel.error(ResultStatus.EXCEPTION);
}
}
@RequestMapping(value = "update", method = RequestMethod.POST)
public ResultModel updateSave(HttpServletRequest req) {
try {
String items = req.getParameter("items");
String formInfo = req.getParameter("formInfo");
String id = req.getParameter("id");
JSONObject fiJo = JSON.parseObject(formInfo);
// 更新主表
FormModelMain formModelMain = new FormModelMain();
formModelMain.setFormName(fiJo.getString("title"));
formModelMain.setFromDesp(fiJo.getString("desp"));
formModelMain.setId(id);
formModelMainService.updateEntity(formModelMain);
// 首先物理删除明细表
FormModelDetail formModelDetailDel = new FormModelDetail();
formModelDetailDel.setFormModelMainId(id);
formModelDetailService.deleteEntity(formModelDetailDel);
// 保存明细表
FormModelDetail formModelDetail = new FormModelDetail();
JSONArray ja = new JSONArray();
ja = JSON.parseArray(items);
for (int i = 0; i < ja.size(); i++) {
JSONObject jo = ja.getJSONObject(i);
formModelDetail.setFormModelMainId(formModelMain.getId());
formModelDetail.setFieldName((String) jo.get("titleShowName"));
formModelDetail.setFieldType((String) jo.get("item_type"));
formModelDetail.setRemark((String) jo.get("desp"));
formModelDetail.setFieldCode((String) jo.get("id"));
JSONObject fieldControlJo = (JSONObject) jo.get("fieldControl");
String notNull = fieldControlJo.getString("notNull");
String maxlength = fieldControlJo.getString("maxlength");
if (maxlength == null || "".equals(maxlength)) {
maxlength = "unlimited";
}
formModelDetail.setFieldControl(notNull + "|" + maxlength);
String cid = (String) jo.get("id");
JSONArray defaultListJa = (JSONArray) jo.get("defaultList");
String str = "";
for (int j = 0; j < defaultListJa.size(); j++) {
JSONObject jsonOb = defaultListJa.getJSONObject(j);
str = str + cid + "_" + (j + 1) + "," + jsonOb.getString("text") + "|";
}
if (str != null && !"".equals(str)) {
str = str.substring(0, str.length() - 1);
}
formModelDetail.setFieldOptions(str);
// 排序值
formModelDetail.setSort(i + 1);
formModelDetailService.insertEntity(formModelDetail);
}
return ResultModel.ok();
} catch (Exception ex) {
ex.printStackTrace();
return ResultModel.error(ResultStatus.EXCEPTION);
}
}
}
使用侯建好的表单进行数据保存的后台代码，以及详情查看的代码
package com.ebiz.manager.controller.lccl;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import com.ebiz.common.base.entity.*;
import com.ebiz.manager.service.sys.SysFileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.ebiz.common.base.controller.BaseController;
import com.ebiz.common.util.ResultModel;
import com.ebiz.common.util.annotation.SysLog;
import com.ebiz.common.util.constants.ResultStatus;
import com.ebiz.manager.service.lccl.FormApplyDetailService;
import com.ebiz.manager.service.lccl.FormApplyMainService;
import com.ebiz.manager.service.lccl.FormModelMainService;
/**
* 表单模板管理
*
* @author zq
* @date 2018年8月15日上午11:18:25
* @TODO 描述
*/
@RestController
@RequestMapping(value = "/formApply")
public class FormApplyController extends BaseController {
@Autowired
private FormApplyMainService formApplyMainService;
@Autowired
private FormModelMainService formModelMainService;
@Autowired
private FormApplyDetailService formApplyDetailService;
@Autowired
private SysFileService sysFileService;
@SysLog("获取构建成功的列表")
// @RequiresPermissions(value = { "formApply:list" }, logical = Logical.OR)
@RequestMapping(value = "list", method = RequestMethod.POST)
public ResultModel getList(@RequestBody FormApplyMain formApplyMain) {
SysUser sysUser = super.getUserFromSession();
formApplyMain.setAddUser(sysUser.getId());// 自己看自己添加流程申请
Long recordCount = formApplyMainService.selectEntityCount(formApplyMain);
formApplyMain.getMap().put("orderBy", "add_time");// 已添加时间排序
formApplyMain.getMap().put("sort", "desc");// 倒叙
formApplyMain.getMap().put("datalist", "1");
List<FormApplyMain> formApplyMainList = formApplyMainService.selectEntityPageList(formApplyMain);
return ResultModel.ok(formApplyMainList, recordCount);
}
@SysLog("保存信息")
// @RequiresPermissions(value = { "formApply:update", "formApply:add" }, logical
// = Logical.OR)
@RequestMapping(value = "save", method = RequestMethod.POST)
public ResultModel save(@RequestBody FormApplyMain formApplyMain) {
if (formApplyMain == null) {
return ResultModel.error(ResultStatus.V_PARMS_ERRO);
}
SysUser sysUser = super.getUserFromSession();
try {
// 保存申请主题
FormModelMain fmm = new FormModelMain();
fmm.setId(formApplyMain.getFormModelMain());
fmm = formModelMainService.selectEntity(fmm);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String form_tltle = "" + fmm.getFormName() + "_" + sysUser.getRealName() + "_" + sdf.format(new Date());
formApplyMain.setFormTitle(form_tltle);
String form_number = getBatchCode();
formApplyMain.setFormNumber(form_number);
formApplyMainService.saveLcclTestInfo(formApplyMain);
} catch (Exception e) {
logger.error("保存角色erro--" + e.getMessage(), e);
return ResultModel.error(ResultStatus.EXCEPTION);
}
return ResultModel.ok();
}
/**
* @description
* @return
* @version 1.0
* @author Administrator
* @update 2018年5月8日 下午7:23:48
*/
@SysLog("查看申请信息")
@RequestMapping(value = "view/{testId}", method = RequestMethod.GET)
public ResultModel view(@PathVariable("testId") String testId) {
try {
FormApplyMain fam = new FormApplyMain();
fam.setId(testId);
fam = formApplyMainService.selectEntity(fam);
// 查询申请明细表字段
List<FormItem> fiList = new ArrayList<FormItem>();
fam.setItems(fiList);
FormApplyDetail fad = new FormApplyDetail();
fad.setFormApplyMainId(testId);
List<FormApplyDetail> fadList = formApplyDetailService.selectEntityList(fad);
for (int i = 0; i < fadList.size(); i++) {
FormApplyDetail fad1 = fadList.get(i);
FormItem fi = new FormItem();
fi.setTitleShowName(fad1.getFieldName());
fi.setValue(fad1.getFieldValue());
fi.setItem_type(fad1.getItemType());
if(fad1.getItemType().equals("_appendix")){//说明是附件
List<SysFile> sflist = new ArrayList<SysFile>();
String ids[] = fad1.getFieldValue().split(",");
for(String id :ids){
SysFile sf = new SysFile();
sf.setId(id);
sf = sysFileService.selectEntity(sf);
sflist.add(sf);
}
fi.setFiles(sflist);
}
if(fad1.getItemType().equals("_img")){//说明是图片
List<SysFile> sflist = new ArrayList<SysFile>();
String ids[] = fad1.getFieldValue().split(",");
for(String id :ids){
SysFile sf = new SysFile();
sf.setId(id);
sf = sysFileService.selectEntity(sf);
sflist.add(sf);
}
fi.setImgs(sflist);
}
fam.getItems().add(fi);
}
return ResultModel.ok(fam);
} catch (Exception e) {
logger.error("查看角色erro--" + e.getMessage(), e);
return ResultModel.error(ResultStatus.EXCEPTION);
}
}
}
数据库图片
扫一扫
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
