7 changed files with 675 additions and 33 deletions
@ -0,0 +1,627 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-09-20 13:00:49 |
||||
|
@ 备注: 自定义表单组件渲染 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { computed, watch, inject, onUnmounted } from 'vue' |
||||
|
import Draggable from 'vuedraggable-es' |
||||
|
import FormItem from './formItem.vue' |
||||
|
import ChildTable from './childTable.vue' |
||||
|
import Tooltips from '@/components/DesignForm/tooltip.vue' |
||||
|
import FlexBox from './flexBox.vue' |
||||
|
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
||||
|
import { FormList,formTableInfo } from '@/api/DesignForm/types' |
||||
|
import { |
||||
|
constFormBtnEvent, |
||||
|
constFormProps |
||||
|
} from '@/api/DesignForm/utils' |
||||
|
import { Md5 } from 'ts-md5'; |
||||
|
import { jsonParseStringify } from '@/utils/DesignForm' |
||||
|
|
||||
|
import { AnalysisCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts' |
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormList[] |
||||
|
tableinfo:formTableInfo |
||||
|
numrun?:number |
||||
|
|
||||
|
}>(), |
||||
|
{ |
||||
|
data: () => { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
let emits = defineEmits(['optionsValue3Get2']); |
||||
|
|
||||
|
const store = useDesignFormStore() as any //自定义表单存储器 |
||||
|
const formProps = inject(constFormProps, {}) as any |
||||
|
const type = computed(() => { //动态计算属性 |
||||
|
return formProps.value.type |
||||
|
}) |
||||
|
const state = reactive({ |
||||
|
clone: true, // 允许clone |
||||
|
gridAdd: false |
||||
|
}) |
||||
|
const dataList = ref<any>(props.data) |
||||
|
|
||||
|
watch( |
||||
|
() => props.data, |
||||
|
(v: FormList[]) => { |
||||
|
dataList.value = v |
||||
|
// console.log("监听表单变化++++++++++>",v) |
||||
|
}, |
||||
|
{ |
||||
|
deep: true |
||||
|
} |
||||
|
) |
||||
|
const activeKey = computed(() => { |
||||
|
return store.activeKey |
||||
|
}) |
||||
|
// 禁止容器嵌套 |
||||
|
const notNested = (type: string) => { |
||||
|
// const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card'] |
||||
|
const controlType = ['grid', 'tabs', 'div', 'card'] |
||||
|
// let kjkdh = controlType.includes(type) |
||||
|
// console.log("禁止容器嵌套",kjkdh,controlType) |
||||
|
return controlType.includes(type) |
||||
|
// return false |
||||
|
} |
||||
|
const notNestedTableFlex = (type: string) => { |
||||
|
const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card'] |
||||
|
// let kjkdh = controlType.includes(type) |
||||
|
// console.log("禁止容器嵌套",kjkdh,controlType) |
||||
|
return controlType.includes(type) |
||||
|
// return false |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-06-22 15:03:31 |
||||
|
@ 功能: 判断不能重复出现的组件 |
||||
|
*/ |
||||
|
const determineDuplicates = (type: string) => { |
||||
|
const controlType = ["founder","founderTime","editTime","owner","deptOrg"] |
||||
|
// console.log("判断不能重复出现的组件",dataList); |
||||
|
if(dataList.value.length > 0){ |
||||
|
let jibuqi = 0; |
||||
|
dataList.value.forEach((item:any)=>{ |
||||
|
// console.log("组件循环",item); |
||||
|
if(controlType.includes(type)){ |
||||
|
if(type == item.type){ |
||||
|
jibuqi++ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
// console.log("组件循环",jibuqi); |
||||
|
if(jibuqi > 1){ |
||||
|
ElMessage({ |
||||
|
showClose: true, |
||||
|
message: '此类控件在表单中只能出现一次！不可重复添加！', |
||||
|
type: 'error', |
||||
|
}) |
||||
|
return true; |
||||
|
}else{ |
||||
|
return false |
||||
|
} |
||||
|
}else{ |
||||
|
return false |
||||
|
} |
||||
|
// return controlType.includes(type) |
||||
|
} |
||||
|
// 删除或复制 |
||||
|
const click = (action: string, index: number, item?: any) => { |
||||
|
if (type.value !== 5) { |
||||
|
return // 非设计模式 |
||||
|
} |
||||
|
if (action === 'clone') { |
||||
|
const key = item.type + new Date().getTime().toString() |
||||
|
const newItem = jsonParseStringify(item) |
||||
|
dataList.value.splice(index, 0, Object.assign(newItem, { name: key })) |
||||
|
} else if (action === 'del') { |
||||
|
dataList.value.splice(index, 1) |
||||
|
// 清空右侧栏信息 |
||||
|
store.setActiveKey('') |
||||
|
store.setControlAttr({}) |
||||
|
} else if (action === 'gridAdd') { |
||||
|
item.columns.push({ |
||||
|
list: [], |
||||
|
attr: { span: 12 } |
||||
|
}) |
||||
|
} else if (action === 'delGridChild') { |
||||
|
item.splice(index, 1) |
||||
|
} |
||||
|
} |
||||
|
const draggableAdd = (evt: any) => { |
||||
|
if (type.value !== 5) { |
||||
|
return // 非设计模式 |
||||
|
} |
||||
|
const newIndex = evt.newIndex |
||||
|
const key = new Date().getTime().toString() |
||||
|
const obj: any = dataList.value[newIndex] |
||||
|
const isNested = evt.target && evt.target.getAttribute('data-type') // 不能嵌套 |
||||
|
// console.log("设计拖拽事件-----1------->",newIndex) |
||||
|
// console.log("设计拖拽事件-----2------->",key) |
||||
|
// console.log("设计拖拽事件-----3------->",obj) |
||||
|
// console.log("设计拖拽事件-----4------->",isNested) |
||||
|
// console.log("设计拖拽事件-----4------->",dataList.value) |
||||
|
if ((isNested === 'not-nested' && notNested(obj.type)) || ((isNested === 'not-table' || isNested === 'not-flex') && notNestedTableFlex(obj.type)) || determineDuplicates(obj.type)) { |
||||
|
dataList.value.splice(newIndex, 1) |
||||
|
return |
||||
|
} |
||||
|
if (!obj) { |
||||
|
return |
||||
|
} |
||||
|
const label = obj.label || obj.item.label |
||||
|
delete obj.label |
||||
|
delete obj.icon |
||||
|
let objectItem = {} |
||||
|
// 不需要添加item的项 |
||||
|
const notNeedItem = [ |
||||
|
'txt', |
||||
|
'title', |
||||
|
'button', |
||||
|
'table', |
||||
|
'grid', |
||||
|
'tabs', |
||||
|
'flex', |
||||
|
'div' |
||||
|
] |
||||
|
// console.log("非设计模式-->",obj.type) |
||||
|
if (!notNeedItem.includes(obj.type)) { |
||||
|
objectItem = { |
||||
|
item: { |
||||
|
label: label |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 不需要name的组件 |
||||
|
let nameObj = {} |
||||
|
const notNeedName = [ |
||||
|
'txt', |
||||
|
'title', |
||||
|
'button', |
||||
|
'grid', |
||||
|
'tabs', |
||||
|
'divider', |
||||
|
'div', |
||||
|
'card' |
||||
|
] |
||||
|
switch(obj.type){ |
||||
|
case "founder": |
||||
|
nameObj = { |
||||
|
name: "creater" |
||||
|
} |
||||
|
// console.log("founder--->creater",nameObj) |
||||
|
break |
||||
|
case "founderTime": |
||||
|
nameObj = { |
||||
|
name: "creater_time" |
||||
|
} |
||||
|
// console.log("founderTime-->creater_time",nameObj) |
||||
|
break |
||||
|
case "editTime": |
||||
|
nameObj = { |
||||
|
name: "edit_time" |
||||
|
} |
||||
|
// console.log("editTime--->edit_time",nameObj) |
||||
|
break |
||||
|
case "owner": |
||||
|
nameObj = { |
||||
|
name: "owner" |
||||
|
} |
||||
|
// console.log("owner------>owner",nameObj) |
||||
|
break |
||||
|
case "deptOrg": |
||||
|
nameObj = { |
||||
|
name:"org" |
||||
|
} |
||||
|
// console.log("deptOrg---->org",nameObj) |
||||
|
break |
||||
|
default: |
||||
|
if (!notNeedName.includes(obj.type) && !obj.name) { |
||||
|
nameObj = { |
||||
|
name: obj.type + key |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// console.log("设计拖拽事件-----5------->",obj) |
||||
|
// console.log("设计拖拽事件-----6------->",nameObj) |
||||
|
// console.log("设计拖拽事件-----7------->",objectItem) |
||||
|
|
||||
|
Object.assign(obj, nameObj, objectItem) |
||||
|
// console.log("设计拖拽事件-----8------->",obj) |
||||
|
groupClick(obj) |
||||
|
} |
||||
|
const getGroupName = (item: any) => { |
||||
|
if (item.name) { |
||||
|
return item.name |
||||
|
} else { |
||||
|
let md5Object:any = new Md5() |
||||
|
md5Object.appendAsciiStr(JSON.stringify(item)) |
||||
|
let md5Str = md5Object.end() |
||||
|
return md5Str |
||||
|
} |
||||
|
} |
||||
|
// 点击激活当前 |
||||
|
/** |
||||
|
* styles:{ |
||||
|
divStyle:{}, |
||||
|
labelStyle:{}, |
||||
|
inputStyle:{} |
||||
|
} |
||||
|
*/ |
||||
|
const groupClick = (item: any, ele?: string) => { |
||||
|
// 设计模式下才执行 |
||||
|
if (type.value !== 5) { |
||||
|
return |
||||
|
} |
||||
|
if (ele) { |
||||
|
item.type = ele |
||||
|
} |
||||
|
if(!item.styles){ |
||||
|
item.styles={ |
||||
|
divStyle:{}, |
||||
|
labelStyle:{}, |
||||
|
inputStyle:{} |
||||
|
} |
||||
|
} |
||||
|
// console.log("点击激活当前--->",item) |
||||
|
store.setActiveKey(getGroupName(item)) |
||||
|
store.setControlAttr(item) |
||||
|
// grid时显示添加列按钮 |
||||
|
state.gridAdd = item.type === 'grid' |
||||
|
// state.clone = !notNested(item.type) |
||||
|
state.clone = !notNestedTableFlex(item.type) |
||||
|
} |
||||
|
// 返回栅格宽度 |
||||
|
const getFormItemStyle = (ele: FormList) => { |
||||
|
if (ele.config?.span === 0) { |
||||
|
return { width: 'auto', margin: '0 5px' } |
||||
|
} |
||||
|
if (ele.config && ele.config.span) { |
||||
|
return { width: (ele.config.span / 24) * 100 + '%' } |
||||
|
} |
||||
|
if(ele.styles?.divStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele.styles.divStyle)) |
||||
|
return AnalysisCss(ele.styles.divStyle) |
||||
|
} |
||||
|
} |
||||
|
// 根据关联条件显示隐藏当前项 |
||||
|
const linksShow = (el: FormList, index: number) => { |
||||
|
|
||||
|
/* |
||||
|
|
||||
|
*/ |
||||
|
// 当前项设置了关联条件，当关联主体的值等于当前组件设定的值时 |
||||
|
if (!el.config) { |
||||
|
return true |
||||
|
} |
||||
|
const key = el.config.linkKey |
||||
|
//liwenxuan 关联选项设置效果实现 |
||||
|
//console.log("linksShow--------"+index+"--------"+JSON.stringify(el)) |
||||
|
//仅第一次加载会触发，须将出现在配置条件中的表单项隐藏。 |
||||
|
|
||||
|
const value = el.config.linkValue |
||||
|
const linkResult = el.config.linkResult |
||||
|
if (key && value && type.value !== 5) { |
||||
|
const Fn = new Function('$', `return (${value})`) |
||||
|
// console.log(Fn) |
||||
|
const pass = Fn(formProps.value.model) |
||||
|
if (linkResult === 'disabled') { |
||||
|
// 设置为disabled后返回显示状态 |
||||
|
dataList.value[index].control.disabled = pass |
||||
|
return true |
||||
|
} else { |
||||
|
return pass |
||||
|
} |
||||
|
} |
||||
|
return true |
||||
|
} |
||||
|
// 根据表单设置不显示指定字段 |
||||
|
const linksIf = (obj: FormList) => { |
||||
|
const { type } = formProps.value |
||||
|
const { config: { disabledAdd, disabledEdit, disabledDetail } = {} } = obj |
||||
|
if (type === 1) { |
||||
|
if (disabledAdd) { |
||||
|
// 编辑页 || 新增页 |
||||
|
return false // 不显示 |
||||
|
} |
||||
|
} else if (type === 2) { |
||||
|
// 编辑 |
||||
|
if (disabledEdit) { |
||||
|
return false |
||||
|
} |
||||
|
} else if (type === 4 || type === 3) { |
||||
|
// 查看 |
||||
|
if (disabledDetail) { |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
// 如果当前字段的name值存在于表单数据的vIf中，则不显示 |
||||
|
const vIf: string | string[] = formProps.value.hideField |
||||
|
if (vIf?.length > 0 && obj.name) { |
||||
|
return vIf.indexOf(obj.name) === -1 // 存在时返回false隐藏 |
||||
|
} |
||||
|
return true |
||||
|
} |
||||
|
//按钮点击事件 |
||||
|
const injectBtnEvent:any = inject(constFormBtnEvent) |
||||
|
const clickBtn = (control: any) => { |
||||
|
// console.log(control) |
||||
|
// 0: '提交表单', |
||||
|
// 1: '重置表单', |
||||
|
// 2: '取消返回', |
||||
|
// 3: '无动作(自定义)' |
||||
|
if (type.value !== 5) { |
||||
|
// 非设计模式才触发事件 |
||||
|
injectBtnEvent && injectBtnEvent(control) |
||||
|
} |
||||
|
} |
||||
|
onUnmounted(() => { |
||||
|
// console.log('formGroup onUnmounted') |
||||
|
dataList.value = {} |
||||
|
store.setActiveKey('') |
||||
|
store.setControlAttr({}) |
||||
|
}) |
||||
|
onMounted(()=>{ |
||||
|
// console.log('formGroup onMounted',props.data,dataList.value,props.tableinfo) |
||||
|
}) |
||||
|
|
||||
|
const getFormItemLableStyle = (ele: any) => { |
||||
|
if(ele?.labelStyle){ |
||||
|
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) |
||||
|
return AnalysisCss(ele?.labelStyle) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function optionsValue3Get1(data: any,fieldName: string){ |
||||
|
emits('optionsValue3Get2',data,fieldName) |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<draggable |
||||
|
itemKey="id" |
||||
|
:list="dataList" |
||||
|
name="fade" |
||||
|
class="drag" |
||||
|
v-bind="{ |
||||
|
group: 'form', |
||||
|
ghostClass: 'ghost', |
||||
|
animation: 200, |
||||
|
handle: '.drag-move', |
||||
|
disabled: type !== 5 |
||||
|
}" |
||||
|
@add="draggableAdd" |
||||
|
> |
||||
|
|
||||
|
<template #item="{ element, index }"> |
||||
|
|
||||
|
<div |
||||
|
class="group" |
||||
|
:class="{ |
||||
|
['group-' + element.type]: true, |
||||
|
active: activeKey === getGroupName(element) |
||||
|
}" |
||||
|
:style="getFormItemStyle(element)" |
||||
|
@click.stop="groupClick(element)" |
||||
|
v-show="linksShow(element, index)" |
||||
|
v-if="linksIf(element)" |
||||
|
> |
||||
|
<!-- {{element}} --> |
||||
|
<!--选项卡组件--> |
||||
|
<template v-if="element.type === 'tabs'"> |
||||
|
<div class="form-tabs"> |
||||
|
<el-tabs |
||||
|
v-bind="element.control" |
||||
|
:class="[element.config?.className]" |
||||
|
> |
||||
|
<el-tab-pane |
||||
|
v-for="(item, tIndex) in element.columns" |
||||
|
:label="item.label" |
||||
|
:key="tIndex" |
||||
|
> |
||||
|
<form-group :data="item.list" data-type="not-nested" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!--标题组件--> |
||||
|
<template v-else-if="element.type === 'title'"> |
||||
|
<div |
||||
|
class="title" |
||||
|
:class="[element.config.className]" |
||||
|
v-bind="element.control" |
||||
|
:style="getFormItemLableStyle(element.styles)" |
||||
|
> |
||||
|
<span v-html="element.control.modelValue"></span> |
||||
|
<Tooltips |
||||
|
:content="element.config.help" |
||||
|
v-if="element.config.help" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!--文字组件--> |
||||
|
<template v-else-if="element.type === 'txt'"> |
||||
|
<div |
||||
|
v-bind="element.control" |
||||
|
:class="[element.config.className]" |
||||
|
v-html="element.control.modelValue" |
||||
|
> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!--表格组件--> |
||||
|
<template v-else-if="element.type === 'table'"> |
||||
|
<div class="form-table" v-if="type === 5"> |
||||
|
<!-- <form-group :data="element.list" data-type="not-nested" /> --> |
||||
|
<form-group :data="element.list" data-type="not-table" /> |
||||
|
</div> |
||||
|
|
||||
|
<child-table v-else :data="element" /> |
||||
|
</template> |
||||
|
<!--格栅布局--> |
||||
|
<template v-else-if="element.type === 'grid'"> |
||||
|
<el-row class="form-row" :class="[element.className]"> |
||||
|
<el-col |
||||
|
class="form-col" |
||||
|
:class="{ |
||||
|
'active-col': activeKey === getGroupName(col), |
||||
|
[col.className]: col.className |
||||
|
}" |
||||
|
v-bind="col.attr" |
||||
|
v-for="(col, i) in element.columns" |
||||
|
:key="i" |
||||
|
@click.stop="groupClick(col, 'gridChild')" |
||||
|
> |
||||
|
<form-group :data="col.list" data-type="not-nested" /> |
||||
|
<div class="drag-control" v-if="type === 5"> |
||||
|
<div class="item-control"> |
||||
|
<i |
||||
|
class="icon-del" |
||||
|
@click.stop="click('delGridChild', i as number, element.columns)" |
||||
|
> |
||||
|
</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
<!--卡片布局--> |
||||
|
<template v-else-if="element.type === 'card'"> |
||||
|
<el-collapse model-value="1"> |
||||
|
<el-collapse-item :title="element.item.label" name="1"> |
||||
|
<template #title v-if="element.help"> |
||||
|
{{ element.item.label }} |
||||
|
<Tooltips :content="element.help" /> |
||||
|
</template> |
||||
|
<form-group :data="element.list" data-type="not-nested" /> |
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
</template> |
||||
|
<!--分割线--> |
||||
|
<template v-else-if="element.type === 'divider'"> |
||||
|
<el-divider v-bind="element.control">{{ element.item && element.item.label }}</el-divider> |
||||
|
</template> |
||||
|
<!--div容器--> |
||||
|
<template v-else-if="element.type === 'div'"> |
||||
|
<div |
||||
|
class="div-layout" |
||||
|
v-bind="element.control" |
||||
|
:class="{ |
||||
|
[element.className]: element.className, |
||||
|
inline: element.config?.inline, |
||||
|
[element.config?.textAlign]: element.config?.textAlign |
||||
|
}" |
||||
|
> |
||||
|
<form-group :data="element.list" data-type="not-nested" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!--弹性布局--> |
||||
|
<template v-else-if="element.type === 'flex'"> |
||||
|
<!-- <form-group |
||||
|
:data="element.list" |
||||
|
data-type="not-nested" |
||||
|
v-if="type === 5" |
||||
|
/> --> |
||||
|
<form-group |
||||
|
:data="element.list" |
||||
|
data-type="not-flex" |
||||
|
v-if="type === 5" |
||||
|
/> |
||||
|
<flex-box :data="element" v-else /> |
||||
|
<el-button |
||||
|
style="position: relative; top: -28px; left: 10px" |
||||
|
v-if="element.config.addBtnText && type === 5" |
||||
|
size="small" |
||||
|
> |
||||
|
{{ element.config.addBtnText }} |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<!--按钮--> |
||||
|
<template v-else-if="element.type === 'button'"> |
||||
|
<div |
||||
|
:class="[element.config?.className]" |
||||
|
:style="{ 'text-align': element.config?.textAlign }" |
||||
|
> |
||||
|
<el-button |
||||
|
v-bind="element.control" |
||||
|
@click="clickBtn(element.control)" |
||||
|
color="#626aef" |
||||
|
> |
||||
|
<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<!--创建人--> |
||||
|
<FounderForm v-else-if="element.type === 'founder'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" /> |
||||
|
|
||||
|
<!--创建时间--> |
||||
|
<FounderTime v-else-if="element.type === 'founderTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" /> |
||||
|
|
||||
|
<!--修改时间--> |
||||
|
<EditTime v-else-if="element.type === 'editTime'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" /> |
||||
|
|
||||
|
<!--拥有者--> |
||||
|
<OwnerPage v-else-if="element.type === 'owner'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" /> |
||||
|
<!--所属部门--> |
||||
|
<DeptOrgPage v-else-if="element.type === 'deptOrg'" :data="element" :tablekey="props.tableinfo" :numrun="props.numrun" /> |
||||
|
|
||||
|
<DigitPage v-else-if="element.type === 'digitpage'" :data="element" /> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<AssociatedForms v-else-if="element.type === 'associatedForms'" :data="element" :form-props="formProps" :tablekey="props.tableinfo" /> |
||||
|
|
||||
|
<LowcodeImage v-else-if="element.type === 'lowcodeImage'" :data="element" /> |
||||
|
<LowcodeTransfer v-else-if="element.type === 'lowcodeTransfer'" :data="element" /> |
||||
|
|
||||
|
<VideoUpAndPlay v-else-if="element.type === 'videoUpAndPlay'" :data="element" /> |
||||
|
<LowcodeCarsusel v-else-if="element.type === 'lowcodeCarsusel'" :data="element" /> |
||||
|
<SignatureMap v-else-if="element.type === 'signaturemap'" :data="element" /> |
||||
|
|
||||
|
<OrgCentent v-else-if="element.type === 'orgCentent'" :data="element" /> |
||||
|
<BaiduMap v-else-if="element.type === 'baidumap'" :data="element" /> |
||||
|
<OrgCitys v-else-if="element.type === 'organization'" :data="element" /> |
||||
|
<UrlLink v-else-if="element.type === 'urllink'" :data="element" /> |
||||
|
<SerialNumber v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" /> |
||||
|
<!--其他组件--> |
||||
|
<FormItem v-else :data="element" @optionsValue3Get1="optionsValue3Get1"/> |
||||
|
|
||||
|
<!--组件设计外功能框架--> |
||||
|
<template v-if="type === 5"> |
||||
|
<div class="drag-control"> |
||||
|
<div class="item-control"> |
||||
|
<i |
||||
|
class="icon-plus" |
||||
|
@click.stop="click('gridAdd', index, element)" |
||||
|
v-if="state.gridAdd" |
||||
|
title="添加列" |
||||
|
></i> |
||||
|
<i |
||||
|
class="icon-clone" |
||||
|
@click.stop="click('clone', index, element)" |
||||
|
v-if="state.clone" |
||||
|
title="克隆" |
||||
|
></i> |
||||
|
<i class="icon-del" @click.stop="click('del', index)"></i> |
||||
|
</div> |
||||
|
<div class="drag-move icon-move"></div> |
||||
|
</div> |
||||
|
<div class="tooltip" style="display: black;">{{ element.name }}</div> |
||||
|
</template> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
</draggable> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue