end7less
/
program_lcode_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 2 years ago
parent
b1119dd0df
commit
a4b826a62d
10 changed files with 864 additions and 636 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/components/mdp-ui/directive/adaptive.js
  2. 53
      src/components/mdp-ui/directive/el-table/adaptive.js
  3. 0
      src/components/mdp-ui/directive/index.js
  4. 2
      src/components/mdp-ui/index.js
  5. 7
      src/views/mdp/form/formDef/Form.vue
  6. 14
      src/views/mdp/form/formDef/Index.vue
  7. 252
      src/views/mdp/form/formField/Field.vue
  8. 219
      src/views/mdp/form/formField/FieldCfg.vue
  9. 569
      src/views/mdp/form/formField/FormField.vue
  10. 317
      src/views/mdp/form/formField/Index.vue

67
src/components/mdp-ui/directive/adaptive.js
View File

@ -0,0 +1,67 @@
// 设置表格高度
const doResize = async (el, binding, vnode) => {
// 获取表格Dom对象
if(vnode.$table){
const {
componentInstance: $table
} = await vnode
// 获取调用传递过来的数据
const {
value
} = binding
if (!$table.height) {
throw new Error(`el-$table must set the height. Such as height='100px'`)
}
// 获取距底部距离（用于展示页码等信息）
const bottomOffset = (value && value.bottomOffset) || 50
// 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}else{
//要起作用，请先给容器添加一个默认高度，否则不起作用
// 获取调用传递过来的数据
const {
value
} = binding
// 获取距底部距离（用于展示页码等信息）
const bottomOffset = (value && value.bottomOffset) || 50
// 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
el.style.height = height+'px'; // 更新元素高度
}
}
export default {
// 初始化设置
bind(el, binding, vnode) {
// 设置resize监听方法
el.resizeListener = async () => {
await doResize(el, binding, vnode)
}
// 绑定监听方法到addResizeListener
// addResizeListener(window.document.body, el.resizeListener)
window.addEventListener('resize', el.resizeListener)
},
update(el, binding, vnode) {
doResize(el, binding, vnode)
},
// 绑定默认高度
async inserted(el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 销毁时设置
unbind(el) {
// 移除resize监听
// removeResizeListener(el, el.resizeListener)
window.removeEventListener('resize', el.resizeListener)
}
}

53
src/components/mdp-ui/directive/el-table/adaptive.js
View File

@ -1,53 +0,0 @@
// 设置表格高度
const doResize = async (el, binding, vnode) => {
// 获取表格Dom对象
const {
componentInstance: $table
} = await vnode
// 获取调用传递过来的数据
const {
value
} = binding
if (!$table.height) {
throw new Error(`el-$table must set the height. Such as height='100px'`)
}
// 获取距底部距离（用于展示页码等信息）
const bottomOffset = (value && value.bottomOffset) || 30
if (!$table) return
// 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}
export default {
// 初始化设置
bind(el, binding, vnode) {
// 设置resize监听方法
el.resizeListener = async () => {
await doResize(el, binding, vnode)
}
// 绑定监听方法到addResizeListener
// addResizeListener(window.document.body, el.resizeListener)
window.addEventListener('resize', el.resizeListener)
},
update(el, binding, vnode) {
doResize(el, binding, vnode)
},
// 绑定默认高度
async inserted(el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 销毁时设置
unbind(el) {
// 移除resize监听
// removeResizeListener(el, el.resizeListener)
window.removeEventListener('resize', el.resizeListener)
}
}

src/components/mdp-ui/directive/el-table/index.js → src/components/mdp-ui/directive/index.js
View File

2
src/components/mdp-ui/index.js
View File

@ -10,7 +10,7 @@ import MdpTable from './mdp-table/Index'
import MdpTableConfigs from './mdp-table-configs/Index'
import MdpHiQuery from './mdp-hi-query/Index'
// 表格高度设定指令
import adaptive from './directive/el-table'
import adaptive from './directive'
import './mdp.scss' // global css

7
src/views/mdp/form/formDef/Form.vue
View File

@ -6,7 +6,7 @@
<el-button type="success" @click="goToFormDefIndex()" icon="el-icon-search">表单中心</el-button>
<el-button type="primary" icon="el-icon-setting" @click="$refs['formSetDialog'].open(editForm)">配置</el-button>
</span>
<md-input slot="formName" label="标题" v-model="editForm.formName" required width="100%"> </md-input>
<el-input slot="formName" label="标题" v-model="editForm.formName" required width="100%"> </el-input>
</form-field>
</el-row>
<slot name="footer" :page="this">
@ -64,13 +64,12 @@
import * as FormDefApi from '@/api/mdp/form/formDef';
import { mapGetters } from 'vuex'
import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js';
import FormField from '../formField/FormField'
import MDinput from '@/components/MDinput'
import FormField from '../formField/Index'
export default {
name:'formDefForm',
mixins:[MdpFormMixin],
components: {
FormField,'md-input':MDinput
FormField
},
computed: {
},

14
src/views/mdp/form/formDef/Index.vue
View File

@ -133,7 +133,7 @@
<mdp-table-configs :column-configs="columnConfigs" v-model="checkedColumns" :form-def-id="expandId"/>
</template>
<template scope="scope" v-if="currOpType=='mng'" >
<el-button :disabled="disabledJudge('editBtn') || !checkBtnQx('editBtn',menuDefId) || !checkFormDefQx(scope.row,'editBtn') " type="primary" @click="openForm({parentOpType:currOpType,subOpType:'edit',formData:scope.row,title:'修改'})" icon="el-icon-edit" title="修改一条数据">设计</el-button>
<el-button :disabled="disabledJudge('editBtn') || !checkBtnQx('editBtn',menuDefId) || !checkFormDefQx(scope.row,'editBtn') " type="primary" @click="toDesign(scope.row)" icon="el-icon-edit" title="修改一条数据">设计</el-button>
<el-button :disabled="disabledJudge('delBtn') || !checkBtnQx('delBtn',menuDefId) || !checkFormDefQx(scope.row,'editBtn') " type="danger" @click="handleDel2(scope.row,scope.$index)" icon="el-icon-delete" title="删除一条数据"/>
<el-button :disabled="disabledJudge('editBtn') || !checkBtnQx('editBtn',menuDefId) || !checkFormDefQx(scope.row,'editBtn') " @click="$refs['formQxDialog'].open({formData:scope.row})">权限</el-button>
<el-button v-if="!scope.row.dataType||scope.row.dataType=='1'" @click="openRoute({formId:scope.row.id,title:scope.row.formName})">数据</el-button>
@ -173,12 +173,6 @@
</el-pagination>
</el-row>
<el-row>
<!--新增修改明细 FormDef 表单定义界面-->
<mdp-dialog :ref="refId+'FormDialog'" fullscreen>
<template v-slot="{visible,data,dialog}">
<form-def-form v-if="visible" :ref="refId+'Form'" :visible="visible" :form-id="data.formData.id" @close="onFormClose" @submit="afterFormSubmit" @fields-change="afterEditSomeFields"/>
</template>
</mdp-dialog>
<mdp-dialog ref="formQxDialog" title="表单权限设置" width="60%" >
<template v-slot="{visible,data,dialog}">
@ -199,7 +193,6 @@
import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
import * as FormDefApi from '@/api/mdp/form/formDef';
import FormDefForm from './Form';//新增修改明细界面
import { mapGetters } from 'vuex'
import FormQxSet from '../formQx/FormQxSet';//新增界面
import FormDataIndex from '../formData/Index';//新增界面
@ -208,7 +201,7 @@ export default {
name:'formDefMng',
mixins:[MdpTableMixin],
components: {
FormDefForm,FormQxSet,FormDataIndex
FormQxSet,FormDataIndex
},
computed: {
},
@ -316,6 +309,9 @@ export default {
openRoute(data){
this.$router.push({path:'/mdp/form/data/index/'+data.formId})
},
toDesign(formDef){
this.$router.push({path:'/mdp/form/design/'+formDef.id})
},
handleDel2(row,index){
this.$mdp.removeFormFieldsCache(row.id)
this.handleDel(row,index)

252
src/views/mdp/form/formField/Field.vue
View File

@ -0,0 +1,252 @@
<template>
<section>
<el-popover trigger="hover" width="100px" placement="right-start">
<el-row v-if="field.extFieldType=='row'" class="form-field" slot="reference" :gutter="gutter">
<draggable v-if="field.children && field.children.length>0" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}">
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
<mdp-field :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)"></mdp-field>
</el-col>
</draggable>
</el-row>
<el-form-item slot="reference" v-else class="form-field" :label="field.fieldTitle" :prop="field.fieldIdCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]">
<div v-if="field.qx=='nr'"></div>
<!--用户-->
<mdp-select-user v-else-if=" field.extFieldType=='user'" :show-style="field.showStyle" :disabled="field.qx=='r'" :multiple="field.isMultiple=='1'" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" :placeholder="field.placeholder" split=",">
</mdp-select-user>
<!--部门-->
<mdp-selecct-dept v-else-if=" field.extFieldType=='deppt'" :show-style="field.showStyle" :branch-id="userInfo.branchId" :show-checkbox="field.isMultiple=='1'" :multiple="field.isMultiple=='1'" split=","></mdp-selecct-dept>
<!--标签-->
<mdp-select-tag v-else-if=" field.extFieldType=='tag'" :show-style="field.showStyle" :disabled="field.qx=='r'" :multiple="field.isMultiple=='1'" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" :placeholder="field.placeholder" split=",">
</mdp-select-tag>
<!--下拉框-->
<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==field.fieldType)" :show-style="field.showStyle" :plus-options="field.plusOptions" :disabled="field.qx=='r'" :show-type="field.fieldType" :item-code="field.dictCode" :multiple="field.isMultiple=='1'" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" :placeholder="field.placeholder" split=",">
</mdp-select>
<!--html-->
<el-popover v-else-if=" field.extFieldType=='html'"
placement="top-start"
width="400"
trigger="hover">
<el-input type="textarea" rows="4" v-model="showData[field.fieldIdCamel]"></el-input>
<div slot="reference" v-html="showData[field.fieldIdCamel]||field.defaultValue||'无'"></div>
</el-popover>
<!--link 链接-->
<el-popover v-else-if=" field.extFieldType=='link'"
placement="top-start"
width="400"
trigger="hover">
<el-input v-model="showData[field.fieldIdCamel]" ></el-input>
<el-link slot="reference" :href="showData[field.fieldIdCamel]" target="_blank">{{ showData[field.fieldIdCamel]||field.fieldTitle }}</el-link>
</el-popover>
<!--image-->
<el-popover v-else-if=" field.extFieldType=='image'"
placement="top-start"
trigger="hover">
<el-button @click="$refs['imageDialog'].open({formData:showData,field:field})">上传图片</el-button>
<el-image slot="reference" :style="field.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
:src="showData[field.fieldIdCamel]"
fit="contain" >
</el-image>
</el-popover>
<!--att 附件-->
<el-popover v-else-if=" field.extFieldType=='att'"
placement="top-start"
trigger="hover">
<el-button @click="$refs['attDialog'].open({formData:showData,field:field})">上传附件</el-button>
<el-link slot="reference" :href="showData[field.fieldIdCamel]" target="_blank">{{ showData[field.fieldIdCamel]||field.fieldTitle }}</el-link>
</el-popover>
<!--其它类型-->
<mdp-input :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='text'" style="width:99%;" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" auto-complete="off" :placeholder="field.placeholder" clearable > </mdp-input>
<mdp-number :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='number'" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable ></mdp-number>
<mdp-number :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='amount'" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable></mdp-number>
<mdp-input :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='textarea'" type="textarea" :rows="2" v-model="showData[field.fieldIdCamel]" :label="field.fieldTitle" placeholder="请输入内容"></mdp-input>
<el-time-picker :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='time'" v-model="showData[field.fieldIdCamel]" placeholder="任意时间点"> </el-time-picker>
<mdp-date :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='date'" v-model="showData[field.fieldIdCamel]" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"> </mdp-date>
<mdp-date :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='datetime'" v-model="showData[field.fieldIdCamel]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </mdp-date>
<mdp-date :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='month'" v-model="showData[field.fieldIdCamel]" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份"></mdp-date>
<mdp-date :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='year'" v-model="showData[field.fieldIdCamel]" type="month" value-format="yyyy" format="yyyy" placeholder="选择年"></mdp-date>
<mdp-date-range :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='daterange'" :value="showData[field.fieldIdCamel]?showData[field.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"
@change="(vs)=>showData[field.fieldIdCamel]=vs.join(',')"
> </mdp-date-range>
</el-form-item>
<el-row>
<el-button type="warning" icon="el-icon-edit" circle @click="showPopover=!showPopover"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="fieldDelete(field)"></el-button>
</el-row>
</el-popover>
<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{
if(data.item.isMultiple=='1'){
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
}else{
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs[0].url:null
}
dialog.close();
}"></mdp-select-image>
</template>
</mdp-dialog>
<mdp-dialog ref="attDialog" title="选择文件" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-select-att v-if="visible" :visible="visible" :multiple="data.item.isMultiple=='1'" @select="(imgs)=>{
if(data.item.isMultiple=='1'){
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
}else{
data.formData[data.item.fieldIdCamel]= (imgs?imgs.url:null)
}
dialog.close();
}" split=","></mdp-select-att>
</template>
</mdp-dialog>
<el-drawer :visible.sync="showPopover" append-to-body :modal="false">
<mdp-field-cfg :form-def="formDef" :value="field" :visible="showPopover" @change="onFieldCfgChange" @close="showPopover=false"></mdp-field-cfg>
</el-drawer>
</section>
</template>
<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import MdpFieldCfg from './FieldCfg.vue'
export default {
computed: {
...mapGetters([
'userInfo'
])
},
props:{
visible:{
type:Boolean,
default:false,
},
value:{
type:Object,
default:function(){
return {}
}
},
formDef:{
type:Object,
default:function(){
return {}
}
},
span:{
type:Number,
default:12,
},
gutter:{
type:Number,
default:0
}
},
watch: {
value:{
deep:true,
immediate:true,
handler:function(){
this.field=this.value
}
}
},
data() {
return {
field:{},
showData:{},
pickerOptions:this.$mdp.getPickerOptions(),
showPopover:false,
fieldRules: {
id: [
//{ required: false, message: '主键', trigger: 'blur' }
]
},
options:{
list: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}],
},
}//end return
},//end data
methods: {
// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
handleCancel:function(){
this.$emit('cancel');
},
fieldDelete(field){
this.field ={};
this.showPopover=false;
this.$emit('delete',field)
},
fieldClick(field){
this.showPopover=true;
},
deleteBaseData(){
this.field.isDict='0';
this.field.dictCode='';
},
onChildChange(child,$event){
Object.assign(child,$event)
this.$emit('input',this.field)
this.$emit('change',this.field)
this.$emit('change2',this.field)
},
onFieldCfgChange(field){
this.showPopover=false
Object.assign(this.field,field)
this.$emit('input',this.field)
this.$emit('change',this.field)
this.$emit('change2',this.field)
},
doChildDelete(child,idx,children){
children.splice(idx,1)
},
calcSpan(child,parent){
if(child.fieldLength>0){
return child.fieldLength
}
if(child.extFieldType=='textarea'){
return 24
}else{
return this.span
}
}
},//end method
components: {
draggable,
"mdp-field": ()=>import('@/views/mdp/form/formField/Field.vue'),
MdpFieldCfg
},
mounted() {
}//end mounted
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.min-height{
min-height:300px;
}
.set-btn {
z-index: 1000;
display: none;
}
.form-field:hover {
border: 1px dashed #0000ff; /* 蓝色虚线边框 */
.set-btn{
z-index: 1000;
display: inline-block;
}
}
</style>

219
src/views/mdp/form/formField/FieldCfg.vue
View File

@ -0,0 +1,219 @@
<template>
<section>
<el-form v-model="field" :rules="fieldRules" ref="field" label-width="80px" style="width:350px;">
<el-form-item v-if="(field.fieldType=='select' || (field.fieldType=='checkbox') || (field.fieldType=='radio')) && !field.extFieldType" label="数据" prop="isDict">
<el-col :span="20">
<el-input v-model="field.dictCode" @focus="$refs['itemDialog'].open(field)" placeholder="点击关联基础数据"> </el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" icon="el-icon-delete" @click="deleteBaseData"></el-button>
</el-col>
</el-form-item>
<el-form-item label="名称" prop="fieldTitle">
<el-col :span="20">
<el-input v-model="field.fieldTitle" label="属性名称" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="主键" prop="isBizKey" v-if=" (field.fieldType!='checkbox') && (field.fieldType!='radio') && field.isMultiple!='1' && field.fieldType!='textarea'" >
<el-select v-model="primaryKeys" multiple label="" clearable placeholder="请选择">
<el-option label="创建人" key="cuserid" value="cuserid">创建人 </el-option>
<el-option label="创建部门" key="deptid" value="deptid">创建部门 </el-option>
<el-option v-for="option in selectedFields" :label="option.fieldTitle" :key="option.fieldIdCamel" :value="option.fieldIdCamel">{{option.fieldTitle}} </el-option>
</el-select>
</el-form-item>
<el-form-item label="必需" prop="isRequired" >
<el-checkbox v-model="field.isRequired" :disabled="field.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>
</el-form-item>
<el-form-item label="编码" prop="fieldId">
<el-col :span="20">
<el-input :disabled="formDef.isCreateTable!='1'" v-model="field.fieldId" :label="field.fieldId" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="编码驼峰命名" prop="fieldIdCamel" v-if="formDef.isCreateTable=='1'">
<el-col :span="20">
<el-input :disabled="formDef.isCreateTable!='1'" v-model="field.fieldIdCamel" :label="field.fieldIdCamel" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="变量映射" prop="flowFieldId">
<el-col :span="20">
<el-input v-model="field.flowFieldId" label="变量" auto-complete="off" placeholder="变量编码" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="长度" prop="fieldLength">
<el-col :span="20">
<el-input v-model="field.fieldLength" :label="field.fieldId" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="占位符" prop="placeholder">
<el-col :span="20">
<el-input v-model="field.placeholder" :label="field.placeholder" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item v-if="field.fieldType=='select' || (field.fieldType=='checkbox') || (field.fieldType=='radio')" label="默认值" prop="defaultValue">
<el-col :span="20">
<mdp-select :item-code="field.dictCode" v-model="field.defaultValue" :label="field.fieldTitle" clearable placeholder="请选择"/>
</el-col>
</el-form-item>
<el-form-item v-else label="默认值" prop="defaultValue">
<el-col :span="20">
<el-input v-model="field.defaultValue" :label="field.placeholder" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="多选" prop="isMultiple">
<el-col :span="20">
<el-checkbox v-model="field.isMultiple" :disabled=" field.fieldType!='checkbox' && field.fieldType!='select' && field.extFieldType!='dept'" true-label="1" false-label="0">多选</el-checkbox>
</el-col>
</el-form-item>
<el-form-item label="权限" prop="fieldQx">
<el-button @click="$refs['qxDialog'].open(field)">字段权限设置</el-button>
</el-form-item>
<el-form-item label="展示风格" prop="showStyle">
<el-col :span="20">
<el-radio v-model="field.showStyle" label="origin">原生-origin</el-radio>
<el-radio v-model="field.showStyle" label="tag">标签-tag</el-radio>
<el-radio v-model="field.showStyle" label="x">综合-x</el-radio>
</el-col>
</el-form-item>
<el-form-item label="css style" prop="styleObj">
<el-input type="textarea" rows="2" v-model="field.styleObj" :label="field.fieldIdCamel" auto-complete="off" placeholder="请输入json 对象 如 {maxHeight:'100px',maxWidth:'100px'}" > </el-input>
</el-form-item>
<el-form-item label="扩展信息" prop="extInfos">
<el-col :span="20">
<el-popover
placement="top-start"
width="400"
trigger="hover">
<mdp-form-expand v-model="field.extInfos" expand-id="form_field"></mdp-form-expand>
<el-button slot="reference">显示扩展信息</el-button>
</el-popover>
</el-col>
</el-form-item>
</el-form>
<div style="text-align: right; margin: 0">
<el-button type="text" @click="handleCancel">关闭</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
<!--基础数据查询 CodeDetail sys_code_detail界面-->
<mdp-dialog ref="itemDialog" title="选择数据组" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-meta-item :visible="visible" sub-op-type="select" @select="(item)=>{
data.isDict='1';
data.dictCode=item.itemCode
dialog.close()
}"></mdp-meta-item>
</template>
</mdp-dialog>
<mdp-dialog ref="qxDialog" title="权限配置" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<field-qx-set :visible="visible" v-model="data.fieldQx" :fieldTitle="data.fieldTitle" @close="dialog.close()" @submit="onQxSetChange"/>
</template>
</mdp-dialog>
</section>
</template>
<script>
import FieldQxSet from './FieldQxSet.vue';
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'userInfo'
])
},
props:{
visible:{
type:Boolean,
default:false,
},
value:{
type:Object,
default:function(){
return {}
}
},
formDef:{
type:Object,
default:function(){
return {}
}
}
},
watch: {
value:{
deep:true,
immediate:true,
handler:function(){
this.field=this.value
}
}
},
data() {
return {
field:{},
primaryKeys:[],
fieldRules: {
id: [
//{ required: false, message: '主键', trigger: 'blur' }
]
},
/**end 在上面加自定义属性**/
}//end return
},//end data
methods: {
// 取消按钮点击 父组件监听@cancel="fieldVisible=false" 监听
handleCancel:function(){
this.$emit('cancel');
this.$emit('close');
},
handleConfirm(){
this.$emit('input',this.field)
this.$emit('change',this.field)
this.$emit('change2',this.field)
},
deleteBaseData(){
this.field.isDict='0';
this.field.dictCode='';
},
onQxSetChange(){
this.handleConfirm()
this.$refs['qxDialog'].close();
}
/**end 在上面加自定义方法**/
},//end method
components: {
FieldQxSet
},
mounted() {
}//end mounted
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.min-height{
min-height:300px;
}
.set-btn {
display: none;
}
.form-item:hover .set-btn {
display: inline-block;
}
</style>

569
src/views/mdp/form/formField/FormField.vue
View File

@ -1,569 +0,0 @@
<template>
<section>
<el-row class="border padding">
<el-col :span="10">
<draggable id="delDrg" class="dragArea" :list="delFields" :options="{group:{ name:'g1'}, animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
<el-row type="flex">
<el-badge :value="selectedFields.length">
<span style="align:center;margin-top:50px;">
<slot name="setBtn">
</slot>
&nbsp;&nbsp;将右边表单元素拖拽到方框内 拖拽表单元素可以排序,最多支持15个字段
</span>
</el-badge>
</el-row>
</draggable>
<el-form class="drag" label-width="100px" style="width:100%;height:600px;overflow:auto" ref="showDataRef">
<div style="border:1px dashed #000;padding: 20px;">
<slot name="formName">
<el-input label="标题" v-model="myFormDef.formName" required width="100%" placeholder="标题">
</el-input>
</slot>
<el-form-item >
<div v-if="selectedFields.length==0">
<span>
从右边拖拽属性来此，可添加表单属性 <i class="el-icon-download"></i>
</span>
</div>
</el-form-item>
<draggable id="sf" class="dragArea min-height" :list="selectedFields" :options="{group:{ name:'g1'}, animation:150}" @add="add" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
<el-form-item class="form-item" v-for="(item,index) in selectedFields" :key="index" :label="item.fieldTitle" :prop="item.fieldIdCamel" :rules="[{ required: item.isRequired=='1', message: '该项必填', trigger: 'change' }]">
<div v-if="item.qx=='nr'"></div>
<!--用户-->
<mdp-select-user v-else-if=" item.extFieldType=='user'" :show-style="item.showStyle" :disabled="item.qx=='r'" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" :placeholder="item.placeholder" split=",">
</mdp-select-user>
<!--部门-->
<mdp-selecct-dept v-else-if=" item.extFieldType=='deppt'" :show-style="item.showStyle" :branch-id="userInfo.branchId" :show-checkbox="item.isMultiple=='1'" :multiple="item.isMultiple=='1'" split=","></mdp-selecct-dept>
<!--标签-->
<mdp-select-tag v-else-if=" item.extFieldType=='tag'" :show-style="item.showStyle" :disabled="item.qx=='r'" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" :placeholder="item.placeholder" split=",">
</mdp-select-tag>
<!--下拉框-->
<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==item.fieldType)" :show-style="item.showStyle" :disabled="item.qx=='r'" :show-type="item.fieldType" :item-code="item.dictCode" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" :placeholder="item.placeholder" split=",">
</mdp-select>
<!--html-->
<el-popover v-else-if=" item.extFieldType=='html'"
placement="top-start"
width="400"
trigger="hover">
<el-input type="textarea" rows="4" v-model="showData[item.fieldIdCamel]"></el-input>
<div slot="reference" v-html="showData[item.fieldIdCamel]||item.defaultValue||'无'"></div>
</el-popover>
<!--link 链接-->
<el-popover v-else-if=" item.extFieldType=='link'"
placement="top-start"
width="400"
trigger="hover">
<el-input v-model="showData[item.fieldIdCamel]" ></el-input>
<el-link slot="reference" :href="showData[item.fieldIdCamel]" target="_blank">{{ showData[item.fieldIdCamel]||item.fieldTitle }}</el-link>
</el-popover>
<!--image-->
<el-popover v-else-if=" item.extFieldType=='image'"
placement="top-start"
trigger="hover">
<el-button @click="$refs['imageDialog'].open({formData:showData,item:item})">上传图片</el-button>
<el-image slot="reference" :style="item.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
:src="showData[item.fieldIdCamel]"
fit="contain" >
</el-image>
</el-popover>
<!--att 附件-->
<el-popover v-else-if=" item.extFieldType=='att'"
placement="top-start"
trigger="hover">
<el-button @click="$refs['attDialog'].open({formData:showData,item:item})">上传附件</el-button>
<el-link slot="reference" :href="showData[item.fieldIdCamel]" target="_blank">{{ showData[item.fieldIdCamel]||item.fieldTitle }}</el-link>
</el-popover>
<!--其它类型-->
<mdp-input :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='text'" style="width:99%;" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder" clearable > </mdp-input>
<mdp-number :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='number'" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable ></mdp-number>
<mdp-number :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='amount'" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable></mdp-number>
<mdp-input :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='textarea'" type="textarea" :rows="2" v-model="showData[item.fieldIdCamel]" :label="item.fieldTitle" placeholder="请输入内容"></mdp-input>
<el-time-picker :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='time'" v-model="showData[item.fieldIdCamel]" placeholder="任意时间点"> </el-time-picker>
<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='date'" v-model="showData[item.fieldIdCamel]" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"> </mdp-date>
<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='datetime'" v-model="showData[item.fieldIdCamel]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </mdp-date>
<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='month'" v-model="showData[item.fieldIdCamel]" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份"></mdp-date>
<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='year'" v-model="showData[item.fieldIdCamel]" type="month" value-format="yyyy" format="yyyy" placeholder="选择年"></mdp-date>
<mdp-date-range :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='daterange'" :value="showData[item.fieldIdCamel]?showData[item.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"
@change="(vs)=>showData[item.fieldIdCamel]=vs.join(',')"
> </mdp-date-range>
<el-button class="set-btn" type="warning" icon="el-icon-edit" circle @click="itemClick(item,index)"></el-button>
<el-button class="set-btn" type="danger" icon="el-icon-delete" circle @click="itemDelete(item,index)"></el-button>
</el-form-item>
</draggable>
</div>
</el-form>
</el-col>
<el-col :span="6" >
<el-popover
ref="popover5"
placement="left"
style="width:250px;"
v-model="showPopover">
<el-form v-model="addForm" :rules="addFormRules" ref="addForm" label-width="80px" style="width:350px;">
<el-form-item v-if="(addForm.fieldType=='select' || (addForm.fieldType=='checkbox') || (addForm.fieldType=='radio')) && !addForm.extFieldType" label="数据" prop="isDict">
<el-col :span="20">
<el-input v-model="addForm.dictCode" @focus="$refs['itemDialog'].open(addForm)" placeholder="点击关联基础数据"> </el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" icon="el-icon-delete" @click="deleteBaseData"></el-button>
</el-col>
</el-form-item>
<el-form-item label="名称" prop="fieldTitle">
<el-col :span="20">
<el-input v-model="addForm.fieldTitle" label="属性名称" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="主键" prop="isBizKey" v-if=" (addForm.fieldType!='checkbox') && (addForm.fieldType!='radio') && addForm.isMultiple!='1' && addForm.fieldType!='textarea'" >
<el-select v-model="primaryKeys" multiple label="" clearable placeholder="请选择">
<el-option label="创建人" key="cuserid" value="cuserid">创建人 </el-option>
<el-option label="创建部门" key="deptid" value="deptid">创建部门 </el-option>
<el-option v-for="option in selectedFields" :label="option.fieldTitle" :key="option.fieldIdCamel" :value="option.fieldIdCamel">{{option.fieldTitle}} </el-option>
</el-select>
</el-form-item>
<el-form-item label="必需" prop="isRequired" >
<el-checkbox v-model="addForm.isRequired" :disabled="addForm.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>
</el-form-item>
<el-form-item label="编码" prop="fieldId">
<el-col :span="20">
<el-input :disabled="myFormDef.isCreateTable!='1'" v-model="addForm.fieldId" :label="addForm.fieldId" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="编码驼峰命名" prop="fieldIdCamel" v-if="formDef.isCreateTable=='1'">
<el-col :span="20">
<el-input :disabled="formDef.isCreateTable!='1'" v-model="addForm.fieldIdCamel" :label="addForm.fieldIdCamel" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="变量映射" prop="flowFieldId">
<el-col :span="20">
<el-input v-model="addForm.flowFieldId" label="变量" auto-complete="off" placeholder="变量编码" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="长度" prop="fieldLength">
<el-col :span="20">
<el-input v-model="addForm.fieldLength" :label="addForm.fieldId" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="占位符" prop="placeholder">
<el-col :span="20">
<el-input v-model="addForm.placeholder" :label="addForm.placeholder" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item v-if="addForm.fieldType=='select' || (addForm.fieldType=='checkbox') || (addForm.fieldType=='radio')" label="默认值" prop="defaultValue">
<el-col :span="20">
<mdp-select :item-code="addForm.dictCode" v-model="addForm.defaultValue" :label="addForm.fieldTitle" clearable placeholder="请选择"/>
</el-col>
</el-form-item>
<el-form-item v-else label="默认值" prop="defaultValue">
<el-col :span="20">
<el-input v-model="addForm.defaultValue" :label="addForm.placeholder" auto-complete="off" placeholder="请输入内容" > </el-input>
</el-col>
</el-form-item>
<el-form-item label="多选" prop="isMultiple">
<el-col :span="20">
<el-checkbox v-model="addForm.isMultiple" :disabled=" addForm.fieldType!='checkbox' && addForm.fieldType!='select' && addForm.extFieldType!='dept'" true-label="1" false-label="0">多选</el-checkbox>
</el-col>
</el-form-item>
<el-form-item label="权限" prop="fieldQx">
<el-button @click="$refs['qxDialog'].open(addForm)">字段权限设置</el-button>
</el-form-item>
<el-form-item label="展示风格" prop="showStyle">
<el-col :span="20">
<el-radio v-model="addForm.showStyle" label="origin">原生-origin</el-radio>
<el-radio v-model="addForm.showStyle" label="tag">标签-tag</el-radio>
<el-radio v-model="addForm.showStyle" label="x">综合-x</el-radio>
</el-col>
</el-form-item>
<el-form-item label="css style" prop="styleObj">
<el-input type="textarea" rows="2" v-model="addForm.styleObj" :label="addForm.fieldIdCamel" auto-complete="off" placeholder="请输入json 对象 如 {maxHeight:'100px',maxWidth:'100px'}" > </el-input>
</el-form-item>
<el-form-item label="扩展信息" prop="extInfos">
<el-col :span="20">
<el-popover
placement="top-start"
width="400"
trigger="hover">
<mdp-form-expand v-model="addForm.extInfos" expand-id="form_field"></mdp-form-expand>
<el-button slot="reference">显示扩展信息</el-button>
</el-popover>
</el-col>
</el-form-item>
</el-form>
<div style="text-align: right; margin: 0">
<el-button type="text" @click="showPopover = false">关闭</el-button>
<el-button type="primary" @click="showPopover = false">确定</el-button>
</div>
</el-popover>
</el-col>
<el-col :span="10" :offset="4">
<el-form :model="addForm" label-width="100px" style="width:100%;height:600px;overflow:auto" :rules="addFormRules" ref="inputAddForm">
<draggable id="af" class="dragArea min-height" :options="{group:{ name:'g1', pull:'clone'}, animation:150}" v-model="sampleFields" >
<el-form-item v-for="(item,index) in sampleFields" :key="index" :label="item.fieldTitle" :prop="item.fieldIdCamel">
<el-input style="width:60%;" v-if="item.extFieldType=='html'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder" clearable > </el-input>
<el-image v-else-if="item.extFieldType=='image'"
style="width:100px;heigth:100px;"
:src="item.defaultValue"
fit="contain">
</el-image>
<el-link style="width:60%;" v-else-if="item.extFieldType=='att'" :href="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder" clearable >{{item.fieldTitle}} </el-link>
<el-link style="width:60%;" v-else-if="item.extFieldType=='link'" :href="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder" clearable >{{item.fieldTitle}} </el-link>
<el-input style="width:60%;" v-else-if="item.fieldType=='text' && item.extFieldType!='dept'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder" clearable > </el-input>
<el-input-number v-else-if="item.fieldType=='number'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable :min="1" :max="10" ></el-input-number>
<el-input style="width:60%;" v-else-if="item.fieldType=='amount'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" placeholder="请输入内容" clearable></el-input>
<el-input style="width:60%;" v-else-if="item.fieldType=='textarea'" type="textarea" :rows="2" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" placeholder="请输入内容"></el-input>
<mdp-select-user :show-style="item.showStyle" v-else-if="item.fieldType=='select' && item.extFieldType=='user'" :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" placeholder="请选择" split="," />
<mdp-select-tag :show-style="item.showStyle" v-else-if="item.fieldType=='select' && item.extFieldType=='tag'" :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" placeholder="请选择" split="," />
<mdp-select :show-style="item.showStyle" :options="options2[item.fieldIdCamel]" v-else-if="item.fieldType=='select' && item.extFieldType!='user'" :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" placeholder="请选择" split=","/>
<mdp-select :show-style="item.showStyle" :options="options2[item.fieldIdCamel]" :show-type="item.fieldType" v-else-if="item.fieldType=='radio' " v-model="sampleData[item.fieldIdCamel]"/>
<el-time-picker :show-style="item.showStyle" v-else-if="item.fieldType=='time'" v-model="sampleData[item.fieldIdCamel]" placeholder="任意时间点"> </el-time-picker>
<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='daterange'" v-model="sampleData[item.fieldIdCamel]" align="right" type="daterange" placeholder="选择日期" > </el-date-picker>
<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='date'" v-model="sampleData[item.fieldIdCamel]" align="right" type="date" placeholder="选择日期" > </el-date-picker>
<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='datetime'" v-model="sampleData[item.fieldIdCamel]" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='month'" v-model="sampleData[item.fieldIdCamel]" align="right" type="month" placeholder="选择月份" > </el-date-picker>
<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='year'" v-model="sampleData[item.fieldIdCamel]" align="right" type="year" placeholder="选择年份" > </el-date-picker>
<mdp-select-dept :show-style="item.showStyle" v-else-if="item.extFieldType=='dept'" v-model="sampleData[item.fieldIdCamel]" :multiple="item.isMultiple=='1'" split=","></mdp-select-dept>
<el-button class="set-btn" type="primary" icon="el-icon-edit" circle @click="itemClick(item,index)"></el-button>
<el-button class="set-btn" type="danger" icon="el-icon-delete" circle @click="itemDelete(item,index)"></el-button>
</el-form-item>
</draggable>
</el-form>
</el-col>
<!--基础数据查询 CodeDetail sys_code_detail界面-->
<mdp-dialog ref="itemDialog" title="选择数据组" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-meta-item :visible="visible" sub-op-type="select" @select="(item)=>{
data.isDict='1';
data.dictCode=item.itemCode
dialog.close()
}"></mdp-meta-item>
</template>
</mdp-dialog>
<mdp-dialog ref="qxDialog" title="权限配置" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<field-qx-set :visible="visible" v-model="data.fieldQx" :fieldTitle="data.fieldTitle" @close="dialog.close()" @submit="dialog.close()"/>
</template>
</mdp-dialog>
<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{
if(data.item.isMultiple=='1'){
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
}else{
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs[0].url:null
}
dialog.close();
}"></mdp-select-image>
</template>
</mdp-dialog>
<mdp-dialog ref="attDialog" title="选择文件" width="80%" :modal="false">
<template v-slot="{visible,data,dialog}">
<mdp-select-att v-if="visible" :visible="visible" :multiple="data.item.isMultiple=='1'" @select="(imgs)=>{
if(data.item.isMultiple=='1'){
data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
}else{
data.formData[data.item.fieldIdCamel]= (imgs?imgs.url:null)
}
dialog.close();
}" split=","></mdp-select-att>
</template>
</mdp-dialog>
</el-row>
</section>
</template>
<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import FieldQxSet from './FieldQxSet.vue';
export default {
computed: {
...mapGetters([
'userInfo'
])
},
props:{
visible:{
type:Boolean,
default:false,
},
formDef:{
type:Object,
default:null,
},
formFields:{
type:Array,
default:[]
}
},
watch: {
'formDef':function( formDef ) {
if(formDef==this.myFormDef){
return;
}
this.myFormDef=formDef;
},
'addForm.isBizKey':function( isBizKey ) {
if(isBizKey=='1'){
this.addForm.isRequired="1"
}
},
'visible':function(visible) {
if(visible==true){
this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
this.setPrimaryKeys();
this.$nextTick(()=>{
this.$refs.showDataRef.clearValidate();
})
}
}
},
data() {
return {
filters:{
users:[]
},
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
options:{},//下拉选择框的所有静态数据
options2:{
zero: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
one: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
two: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
three: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
four: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
five: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
six: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
seven: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
eight: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
nine: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
ten: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
eleven: [{id:'0',name:'否'},{id:'1',name:'是'}],
twelve: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
thirteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
fourteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
fifteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
sixteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
seventeen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
eighteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
eighteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
nineteen: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
twenty: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
},
load:{list: false,},
addFormRules: {
id: [
{ required: false, message: '主键', trigger: 'blur' }
]
},
//新增界面数据 表单字段定义
addForm: {formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',isDict:'0',dictCode:'',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
myFormDef:{id:'',tableName:'',tableOwner:'',isCreateTable:'',formName:'',userid:'',deptid:'',formType:'',isTemplate:'',bizType:'',ctime:'',branchId:''},
/**begin 在下面加自定义属性,记得补上面的一个逗号**/
selectedFields:[],
sampleFields:[
{formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',isDict:'0',dictCode:'',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'4',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'多行文本',isDict:'0',dictCode:'',fieldType:'textarea',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'41',showStyle:'origin',fieldId:'four1',fieldIdCamel:'four1',fieldTitle:'html',isDict:'0',dictCode:'',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'html',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'42',showStyle:'origin',fieldId:'four2',fieldIdCamel:'four2',fieldTitle:'图片',isDict:'0',dictCode:'',fieldType:'image',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'image',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'43',showStyle:'origin',fieldId:'four3',fieldIdCamel:'four3',fieldTitle:'文件',isDict:'0',dictCode:'',fieldType:'att',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'att',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'44',showStyle:'origin',fieldId:'four4',fieldIdCamel:'four4',fieldTitle:'链接',isDict:'0',dictCode:'',fieldType:'link',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'link',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'2',showStyle:'origin',fieldId:'two',fieldIdCamel:'two',fieldTitle:'数字',isDict:'0',dictCode:'',fieldType:'number',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'3',showStyle:'origin',fieldId:'three',fieldIdCamel:'three',fieldTitle:'金额',isDict:'0',dictCode:'',fieldType:'amount',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'5',showStyle:'origin',fieldId:'five',fieldIdCamel:'five',fieldTitle:'单选下拉',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'6',showStyle:'origin',fieldId:'six',fieldIdCamel:'six',fieldTitle:'多选下拉',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'7',showStyle:'origin',fieldId:'seven',fieldIdCamel:'seven',fieldTitle:'单选',isDict:'0',dictCode:'',fieldType:'radio',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'8',showStyle:'origin',fieldId:'eight',fieldIdCamel:'eight',fieldTitle:'单选框',isDict:'0',dictCode:'',fieldType:'checkbox',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'9',showStyle:'origin',fieldId:'nine',fieldIdCamel:'nine',fieldTitle:'多选框',isDict:'0',dictCode:'',fieldType:'checkbox',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'10',showStyle:'origin',fieldId:'ten',fieldIdCamel:'ten',fieldTitle:'时间',isDict:'0',dictCode:'',fieldType:'time',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'11',showStyle:'origin',fieldId:'eleven',fieldIdCamel:'eleven',fieldTitle:'日期',isDict:'0',dictCode:'',fieldType:'date',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'12',showStyle:'origin',fieldId:'twelve',fieldIdCamel:'twelve',fieldTitle:'日期时间',isDict:'0',dictCode:'',fieldType:'datetime',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入日期时间',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'13',showStyle:'origin',fieldId:'thirteen',fieldIdCamel:'thirteen',fieldTitle:'年',isDict:'0',dictCode:'',fieldType:'year',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请选中年份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'14',showStyle:'origin',fieldId:'fourteen',fieldIdCamel:'fourteen',fieldTitle:'月',isDict:'0',dictCode:'',fieldType:'month',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请选中月份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'141',showStyle:'origin',fieldId:'fourteen1',fieldIdCamel:'fourteen1',fieldTitle:'日期区间',isDict:'0',dictCode:'',fieldType:'daterange',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'15',showStyle:'origin',fieldId:'fifteen',fieldIdCamel:'fifteen',fieldTitle:'部门(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'dept',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'16',showStyle:'origin',fieldId:'sixteen',fieldIdCamel:'sixteen',fieldTitle:'部门(多选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'dept',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'17',showStyle:'origin',fieldId:'seventeen',fieldIdCamel:'seventeen',fieldTitle:'员工(多选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'支持多选',isRequired:'0',remark:'属性',extFieldType:'user',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'18',showStyle:'origin',fieldId:'eighteen',fieldIdCamel:'eighteen',fieldTitle:'员工(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'单选',isRequired:'0',remark:'属性',extFieldType:'user',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'19',showStyle:'origin',fieldId:'nineteen',fieldIdCamel:'nineteen',fieldTitle:'标签(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'单选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'20',showStyle:'origin',fieldId:'twenty',fieldIdCamel:'twenty',fieldTitle:'标签(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'多选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
],
delFields:[],//存放删除的属性
drag:true,
showPopover:false,
activeName:'first',
metaItemSelected:{},//选择的基础数据二级分类代码
itemOptionMngVisible:false,//基础数据弹出框
fieldIds: [
{fieldId:'zero',fieldIdCamel:'zero'},
{fieldId:'one',fieldIdCamel:'one'},
{fieldId:'two',fieldIdCamel:'two'},
{fieldId:'three',fieldIdCamel:'three'},
{fieldId:'four',fieldIdCamel:'four'},
{fieldId:'five',fieldIdCamel:'five'},
{fieldId:'six',fieldIdCamel:'six'},
{fieldId:'seven',fieldIdCamel:'seven'},
{fieldId:'eight',fieldIdCamel:'eight'},
{fieldId:'nine',fieldIdCamel:'nine'},
{fieldId:'ten',fieldIdCamel:'ten'},
{fieldId:'eleven',fieldIdCamel:'eleven'},
{fieldId:'twelve',fieldIdCamel:'twelve'},
{fieldId:'thirteen',fieldIdCamel:'thirteen'},
{fieldId:'fourteen',fieldIdCamel:'fourteen'},
{fieldId:'fifteen',fieldIdCamel:'fifteen'}
],
//新增界面数据 表单数据表
showData: {
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
},
sampleData:{
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
},
primaryKeys:[],
/**end 在上面加自定义属性**/
}//end return
},//end data
methods: {
// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
handleCancel:function(){
this.$emit('cancel');
},
itemDelete(item,index){
this.addForm ={};
this.showPopover=false;
this.selectedFields.splice(index, 1);
},
itemClick(item,index){
this.addForm =item;
this.showPopover=true;
},
setPrimaryKeys:function( ) {
var primaryKeys=this.primaryKeys;
var isBizKeyPrefix="";
if(primaryKeys.some(i=>i=='cuserid')){
isBizKeyPrefix="1"
}else{
isBizKeyPrefix="0"
}
if(primaryKeys.some(i=>i=='deptid')){
isBizKeyPrefix=isBizKeyPrefix+"1"
}else{
isBizKeyPrefix=isBizKeyPrefix+"0"
}
this.selectedFields.forEach(field=>{
if(primaryKeys.some(key=>field.fieldIdCamel==key)){
field.isBizKey=isBizKeyPrefix+"1"
}else{
field.isBizKey=isBizKeyPrefix+"0"
}
});
},
add(evt){
let item=this.selectedFields[evt.newIndex];
item.isNewAdd='1'
this.selectedFields[evt.newIndex]=Object.assign({}, item);
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.fieldId==i.fieldId && k.isNewAdd!='1');
})
this.selectedFields[evt.newIndex].fieldId=noSelectFieldId.fieldId
this.selectedFields[evt.newIndex].fieldIdCamel=noSelectFieldId.fieldIdCamel
this.selectedFields[evt.newIndex].isNewAdd='0'
this.addForm=this.selectedFields[evt.newIndex];
},
deleteBaseData(){
this.addForm.isDict='0';
this.addForm.dictCode='';
},
/**end 在上面加自定义方法**/
},//end method
components: {
//在下面添加其它组件 'form-field-edit':FormFieldEdit
draggable, FieldQxSet
},
mounted() {
this.myFormDef=this.formDef
if(this.formFields){
this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
}else{
this.selectedFields=[]
}
}//end mounted
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.min-height{
min-height:300px;
}
.set-btn {
display: none;
}
.form-item:hover .set-btn {
display: inline-block;
}
</style>

317
src/views/mdp/form/formField/Index.vue
View File

@ -0,0 +1,317 @@
<template>
<section>
<el-row class="border padding">
<el-col :span="16">
<draggable id="delDrg" class="dragArea" :list="delFields" :options="{group:{ name:'g1'}, animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
<el-row type="flex">
<el-badge :value="selectedFields.length">
<span style="align:center;margin-top:50px;">
<slot name="setBtn">
</slot>
&nbsp;&nbsp;将右边表单元素拖拽到方框内 拖拽表单元素可以排序,最多支持15个字段
</span>
</el-badge>
</el-row>
</draggable>
<el-form class="drag" label-width="100px" v-adaptive style="width:100%;height:100px;overflow:auto" ref="showDataRef">
<div style="border:1px dashed #000;padding: 20px;">
<slot name="formName">
<el-input label="标题" v-model="myFormDef.formName" required width="100%" placeholder="标题">
</el-input>
</slot>
<el-form-item >
<div v-if="selectedFields.length==0">
<span>
从右边拖拽属性来此，可添加表单属性 <i class="el-icon-download"></i>
</span>
</div>
</el-form-item>
<el-row>
<draggable id="sf" class="dragArea min-height" v-model="selectedFields" :options="{group:{ name:'g1'}, animation:150}" @add="add" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
<el-col v-for="(item,index) in selectedFields" :key="index" :span="calcSpan(item)">
<mdp-field :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-field>
</el-col>
</draggable>
</el-row>
</div>
</el-form>
</el-col>
<el-col :span="8">
<el-form :model="addForm" label-width="100px" v-adaptive style="width:100%;height:100px;overflow:auto" :rules="addFormRules" ref="inputAddForm">
<el-row>
<draggable id="af" class="dragArea" :options="{group:{ name:'g1', pull:'clone'}, animation:150}" v-model="sampleFields" :move="onMove">
<el-col v-for="(item,index) in sampleFields" :key="index" :span="calcSpan(item)">
<mdp-field :gutter="0" :span="24" :value="item"></mdp-field>
</el-col>
</draggable>
</el-row>
</el-form>
</el-col>
</el-row>
</section>
</template>
<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import MdpField from './Field.vue'
export default {
computed: {
...mapGetters([
'userInfo'
])
},
props:{
visible:{
type:Boolean,
default:false,
},
formDef:{
type:Object,
default:null,
},
formFields:{
type:Array,
default:[]
},
span:{
type:Number,
default:12,
}
},
watch: {
'formDef':function( formDef ) {
if(formDef==this.myFormDef){
return;
}
this.myFormDef=formDef;
},
'addForm.isBizKey':function( isBizKey ) {
if(isBizKey=='1'){
this.addForm.isRequired="1"
}
},
'visible':function(visible) {
if(visible==true){
this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
this.setPrimaryKeys();
this.$nextTick(()=>{
this.$refs.showDataRef.clearValidate();
})
}
}
},
data() {
var options={
list: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}],
}
return {
filters:{
users:[]
},
pickerOptions:this.$mdp.getPickerOptions(),
options:options,
load:{list: false,},
addFormRules: {
id: [
{ required: false, message: '主键', trigger: 'blur' }
]
},
addForm: {formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',isDict:'0',dictCode:'',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
myFormDef:{id:'',tableName:'',tableOwner:'',isCreateTable:'',formName:'',userid:'',deptid:'',formType:'',isTemplate:'',bizType:'',ctime:'',branchId:''},
selectedFields:[],
sampleFields:[
{formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'4',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'多行文本',isDict:'0',dictCode:'',fieldType:'textarea',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'41',showStyle:'origin',fieldId:'four1',fieldIdCamel:'four1',fieldTitle:'html',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'html',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'42',showStyle:'origin',fieldId:'four2',fieldIdCamel:'four2',fieldTitle:'图片',isDict:'0',dictCode:'',fieldType:'image',fieldLength:24,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'image',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'43',showStyle:'origin',fieldId:'four3',fieldIdCamel:'four3',fieldTitle:'文件',isDict:'0',dictCode:'',fieldType:'att',fieldLength:24,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'att',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'44',showStyle:'origin',fieldId:'four4',fieldIdCamel:'four4',fieldTitle:'链接',isDict:'0',dictCode:'',fieldType:'link',fieldLength:24,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'link',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'2',showStyle:'origin',fieldId:'two',fieldIdCamel:'two',fieldTitle:'数字',isDict:'0',dictCode:'',fieldType:'number',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'3',showStyle:'origin',fieldId:'three',fieldIdCamel:'three',fieldTitle:'金额',isDict:'0',dictCode:'',fieldType:'amount',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'5',showStyle:'origin',fieldId:'five',fieldIdCamel:'five',fieldTitle:'单选下拉',isDict:'0',dictCode:'',plusOptions:options.list,fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'6',showStyle:'origin',fieldId:'six',fieldIdCamel:'six',fieldTitle:'多选下拉',isDict:'0',dictCode:'',plusOptions:options.list,fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'7',showStyle:'origin',fieldId:'seven',fieldIdCamel:'seven',fieldTitle:'单选',isDict:'0',dictCode:'',plusOptions:options.yesOrNo,fieldType:'radio',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'8',showStyle:'origin',fieldId:'eight',fieldIdCamel:'eight',fieldTitle:'单选框',isDict:'0',dictCode:'',plusOptions:options.list,fieldType:'checkbox',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'9',showStyle:'origin',fieldId:'nine',fieldIdCamel:'nine',fieldTitle:'多选框',isDict:'0',dictCode:'',plusOptions:options.list,fieldType:'checkbox',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'10',showStyle:'origin',fieldId:'ten',fieldIdCamel:'ten',fieldTitle:'时间',isDict:'0',dictCode:'',fieldType:'time',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'11',showStyle:'origin',fieldId:'eleven',fieldIdCamel:'eleven',fieldTitle:'日期',isDict:'0',dictCode:'',fieldType:'date',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'12',showStyle:'origin',fieldId:'twelve',fieldIdCamel:'twelve',fieldTitle:'日期时间',isDict:'0',dictCode:'',fieldType:'datetime',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入日期时间',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'13',showStyle:'origin',fieldId:'thirteen',fieldIdCamel:'thirteen',fieldTitle:'年',isDict:'0',dictCode:'',fieldType:'year',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请选中年份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'14',showStyle:'origin',fieldId:'fourteen',fieldIdCamel:'fourteen',fieldTitle:'月',isDict:'0',dictCode:'',fieldType:'month',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请选中月份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'141',showStyle:'origin',fieldId:'fourteen1',fieldIdCamel:'fourteen1',fieldTitle:'日期区间',isDict:'0',dictCode:'',fieldType:'daterange',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'15',showStyle:'origin',fieldId:'fifteen',fieldIdCamel:'fifteen',fieldTitle:'部门',isDict:'0',dictCode:'',fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'dept',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'17',showStyle:'origin',fieldId:'seventeen',fieldIdCamel:'seventeen',fieldTitle:'员工',isDict:'0',dictCode:'',fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'支持多选',isRequired:'0',remark:'属性',extFieldType:'user',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'19',showStyle:'origin',fieldId:'nineteen',fieldIdCamel:'nineteen',fieldTitle:'标签',isDict:'0',dictCode:'',fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'多选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'21',showStyle:'origin',fieldId:'twentyOne',fieldIdCamel:'twentyOne',fieldTitle:'布局-行',isDict:'0',dictCode:'',fieldType:'row',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'行',isRequired:'0',remark:'属性',extFieldType:'row',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:'',
children:[
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
]
}
],
delFields:[],//存放删除的属性
drag:true,
showPopover:false,
activeName:'first',
metaItemSelected:{},//选择的基础数据二级分类代码
itemOptionMngVisible:false,//基础数据弹出框
fieldIds: [
{fieldId:'zero',fieldIdCamel:'zero'},
{fieldId:'one',fieldIdCamel:'one'},
{fieldId:'two',fieldIdCamel:'two'},
{fieldId:'three',fieldIdCamel:'three'},
{fieldId:'four',fieldIdCamel:'four'},
{fieldId:'five',fieldIdCamel:'five'},
{fieldId:'six',fieldIdCamel:'six'},
{fieldId:'seven',fieldIdCamel:'seven'},
{fieldId:'eight',fieldIdCamel:'eight'},
{fieldId:'nine',fieldIdCamel:'nine'},
{fieldId:'ten',fieldIdCamel:'ten'},
{fieldId:'eleven',fieldIdCamel:'eleven'},
{fieldId:'twelve',fieldIdCamel:'twelve'},
{fieldId:'thirteen',fieldIdCamel:'thirteen'},
{fieldId:'fourteen',fieldIdCamel:'fourteen'},
{fieldId:'fifteen',fieldIdCamel:'fifteen'}
],
//新增界面数据 表单数据表
showData: {
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
},
sampleData:{
id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
},
primaryKeys:[],
/**end 在上面加自定义属性**/
}//end return
},//end data
methods: {
// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
handleCancel:function(){
this.$emit('cancel');
},
itemDelete(item,index){
this.addForm ={};
this.showPopover=false;
this.selectedFields.splice(index, 1);
},
itemClick(item,index){
this.addForm =item;
this.showPopover=true;
},
setPrimaryKeys:function( ) {
var primaryKeys=this.primaryKeys;
var isBizKeyPrefix="";
if(primaryKeys.some(i=>i=='cuserid')){
isBizKeyPrefix="1"
}else{
isBizKeyPrefix="0"
}
if(primaryKeys.some(i=>i=='deptid')){
isBizKeyPrefix=isBizKeyPrefix+"1"
}else{
isBizKeyPrefix=isBizKeyPrefix+"0"
}
this.selectedFields.forEach(field=>{
if(primaryKeys.some(key=>field.fieldIdCamel==key)){
field.isBizKey=isBizKeyPrefix+"1"
}else{
field.isBizKey=isBizKeyPrefix+"0"
}
});
},
add(evt){
let item=this.selectedFields[evt.newIndex];
item.isNewAdd='1'
var item2=JSON.parse(JSON.stringify(item))
if(item2.fieldLength==24){
item2.fieldLength=12
}
var noSelectFieldId=this.fieldIds.find(i=>{
return !this.selectedFields.some(k=>k.fieldId==i.fieldId && k.isNewAdd!='1');
})
item2.fieldId=noSelectFieldId.fieldId
item2.fieldIdCamel=noSelectFieldId.fieldIdCamel
item2.isNewAdd='0'
this.selectedFields[evt.newIndex]=item2;
this.addForm=item2;
},
deleteBaseData(){
this.addForm.isDict='0';
this.addForm.dictCode='';
},
calcSpan(child){
if(child.fieldLength>0){
return child.fieldLength
}
if(child.extFieldType=='textarea'){
return 24
}else{
return this.span
}
},
//move回调方法
onMove(e,originalEvent){
//不允许拖拽
if (e.draggedContext.element.id == '22') return false;
return true;
},
/**end 在上面加自定义方法**/
},//end method
components: {
//在下面添加其它组件 'form-field-edit':FormFieldEdit
draggable, MdpField
},
mounted() {
this.myFormDef=this.formDef
if(this.formFields){
this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
}else{
this.selectedFields=[]
}
}//end mounted
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.min-height{
min-height:300px;
}
.set-btn {
display: none;
}
.form-item:hover .set-btn {
display: inline-block;
}
</style>
Write Preview
Loading…
Cancel
Save