herenshan112
/
appFormLowcode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

关联选项设置显示隐藏效果 

Signed-off-by: liwenxuan <1298531568@qq.com>
lwx_v4
liwenxuan 12 months ago
parent
80f2bfb612
commit
83ef023520
2 changed files with 1476 additions and 625 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. 280
      src/components/formTable/formItemGroup.vue
  2. 1821
      src/components/formTable/index.vue

280
src/components/formTable/formItemGroup.vue
View File

@ -94,144 +94,172 @@ const clickBtn = (control: any) => {
injectBtnEvent && injectBtnEvent(control)
}
}
// 根据表单设置不显示指定字段
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;
};
</script>
<template>
<div v-for="(element,index) in dataList" :key="index" :style="getFormItemDivStyle(element)">
<template v-if="element.type === '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"
<div v-if="linksIf(element)">
<template v-if="element.type === 'tabs'">
<!--选项卡-->
<el-tabs
v-bind="element.control"
:class="[element.config?.className]"
>
<FormItemGroup :data="item.list" data-type="not-nested" />
</el-tab-pane>
</el-tabs>
</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'">
<el-text v-if="element.item&&element.item.name">{{element.item.name}}}</el-text>
<TablePage :data="element" :type="type" />
</template>
<template v-else-if="element.type === 'grid'">
<el-row class="form-row" :style="type === 15?'padding: 0 0 20px 0;':''" :class="[element.className]">
<el-col
class="form-col"
:class="{
'active-col': activeKey === getGroupName(col),
[col.className]: col.className
}"
v-for="(col, i) in element.columns"
:key="i"
<el-tab-pane
v-for="(item, tIndex) in element.columns"
:label="item.label"
:key="tIndex"
>
<FormItemGroup :data="item.list" data-type="not-nested" />
</el-tab-pane>
</el-tabs>
</template>
<template v-else-if="element.type === 'title'">
<!--标题-->
<div
class="title"
:class="[element.config.className]"
v-bind="element.control"
:style="getFormItemLableStyle(element.styles)"
>
<FormItemGroup :data="col.list" data-type="not-nested" />
<div class="drag-control" v-if="type === 15">
<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>
<FormItemGroup :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>
<template v-else-if="element.type === 'div'">
<!--div容器-->
<div
class="div-layout "
v-bind="element.control"
:class="{
[element.className]: element.className,
inline: element.config?.inline,
[element.config?.textAlign]: element.config?.textAlign
}"
>
<div class="drag"><FormItemGroup :data="element.list" data-type="not-nested" /></div>
<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'">
<el-text v-if="element.item&&element.item.name">{{element.item.name}}}</el-text>
<TablePage :data="element" :type="type" />
</template>
<template v-else-if="element.type === 'grid'">
<el-row class="form-row" :style="type === 15?'padding: 0 0 20px 0;':''" :class="[element.className]">
</div>
</template>
<template v-else-if="element.type === 'flex'">
<!---->
<FormItemGroup :tableinfo="props.tableinfo" :data="element.list" :alldata="props.alldata" data-type="not-flex" v-if="type === 15" />
<flex-box :data="element" v-else />
<el-button
style="position: relative; top: 0px; left: 10px"
v-if="element.config.addBtnText && type === 15"
size="small"
>
{{ element.config.addBtnText }}
</el-button>
</template>
<template v-else-if="element.type === 'button'">
<el-col
class="form-col"
:class="{
'active-col': activeKey === getGroupName(col),
[col.className]: col.className
}"
v-for="(col, i) in element.columns"
:key="i"
>
<FormItemGroup :data="col.list" data-type="not-nested" />
<div class="drag-control" v-if="type === 15">
<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>
<FormItemGroup :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>
<template v-else-if="element.type === 'div'">
<!--div容器-->
<div
class="div-layout "
v-bind="element.control"
:class="{
[element.className]: element.className,
inline: element.config?.inline,
[element.config?.textAlign]: element.config?.textAlign
}"
>
<div class="drag"><FormItemGroup :data="element.list" data-type="not-nested" /></div>
</div>
</template>
<template v-else-if="element.type === 'flex'">
<div
:class="[element.config?.className]"
:style="{ 'text-align': element.config?.textAlign }"
>
<!---->
<FormItemGroup :tableinfo="props.tableinfo" :data="element.list" :alldata="props.alldata" data-type="not-flex" v-if="type === 15" />
<flex-box :data="element" v-else />
<el-button
v-bind="element.control"
@click="clickBtn(element.control)"
color="#626aef"
style="position: relative; top: 0px; left: 10px"
v-if="element.config.addBtnText && type === 15"
size="small"
>
<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td>
{{ element.config.addBtnText }}
</el-button>
</div>
</template>
<FormItem v-else :data="element" />
</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>
<FormItem v-else :data="element" />
</div>
</div>
</template>

1821
src/components/formTable/index.vue
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save