提交 94a87006 编写于 作者: jlj05024111@163.com's avatar jlj05024111@163.com

feat: 回退多表单支持style2

上级 3d47a682
......@@ -43,7 +43,6 @@ import {
ListControl,
ListPortlet,
TreeControl,
FormMDCtrlFormStyle2,
} from './components/widgets';
import {
EditView,
......@@ -187,7 +186,6 @@ export const AppRegister = {
v.component('ListPortlet', ListPortlet);
v.component('PortletContainer', PortletContainer);
v.component('TreeControl', TreeControl);
v.component('FormMDCtrlFormStyle2', FormMDCtrlFormStyle2);
// 注册通用组件
v.component('AppKeepAlive', AppKeepAlive);
v.component('AppIcon', AppIcon);
......
@include b('form-mdctrl-form-style2') {
width: 100%;
@include e('header') {
display: flex;
width: 100%;
border: 1px solid #cccccc;
// height: 32px;
background-color: #f9f9f9;
}
@include e('header-item') {
display: flex;
gap: getCssVar(padding);
align-items: center;
padding: calc(getCssVar(padding) / 2) getCssVar(padding);
border-right: 1px solid #cccccc;
cursor: pointer;
@include m('delete') {
display: flex;
align-items: center;
&:hover {
color: getCssVar(color, primary);
}
}
@include when('actived') {
background-color: white;
}
}
@include e('add') {
gap: 0;
&:hover {
color: getCssVar(color, primary);
}
}
@include e('content') {
display: none;
@include when('actived') {
display: block;
}
}
.#{bem('form')} {
.#{bem(form-page-item)} {
.#{bem(form-col,grouppanel)} {
.#{bem(form-group)} {
margin: 0;
width: 100%;
height: 100%;
}
}
}
}
}
import { FormMDCtrlController } from '@ibiz-template/controller';
import { FormMDCtrlModel } from '@ibiz-template/model';
import { useController, useNamespace } from '@ibiz-template/vue-util';
import { defineComponent, getCurrentInstance, h, ref } from 'vue';
import './form-mdctrl-form-style2.scss';
export const FormMDCtrlFormStyle2 = defineComponent({
name: 'FormMDCtrlFormStyle2',
props: {
controller: {
type: FormMDCtrlController,
required: true,
},
modelData: {
type: FormMDCtrlModel,
required: true,
},
},
setup(props) {
const ns = useNamespace('form-mdctrl-form-style2');
const c = props.controller;
// 激活项
const active = ref(0);
const { proxy } = getCurrentInstance()!;
useController(proxy, props.controller);
// 点击删除
const handleRemove = async (
item: IData,
index: number,
event: MouseEvent,
) => {
event.stopPropagation();
event.preventDefault();
const length = c.contentCtrlData.length;
await c.handleRemove(item, index);
if (
length !== c.contentCtrlData.length &&
index <= active.value &&
active.value !== 0
) {
active.value -= 1;
}
};
// 切换分页
const activeChange = (index: number) => {
active.value = index;
c.force();
};
// 绘制头部
const rendertanHeader = () => {
const tabtitle = props.modelData.source.userTag;
return (
<div class={ns.e('header')}>
{c.contentCtrlData.map((item: IData, index: number) => {
const label =
item.srfmajortext || (tabtitle && item[tabtitle])
? item[tabtitle]
: '新建';
return (
<div
class={[
ns.e('header-item'),
ns.is('actived', index === active.value),
]}
onClick={() => activeChange(index)}
>
<div class={ns.em('header-item', 'title')}>{label}</div>
<div
class={ns.em('header-item', 'delete')}
onClick={(event: MouseEvent) =>
handleRemove(item, index, event)
}
>
<ion-icon name='close-outline' title='关闭'></ion-icon>
</div>
</div>
);
})}
<div
class={[ns.e('header-item'), ns.e('add')]}
onClick={() => c.handleAdd()}
>
<span>添加</span>
<ion-icon name='add-outline'></ion-icon>
</div>
</div>
);
};
// 绘制内容
const renderTabs = () => {
return c.contentCtrlData.map((item: IData, index: number) => {
let formComponent = null;
const { form } = c.model;
if (form && c.providers[form.name] && c.model.appEntity) {
const tempContext = Object.assign(c.form.context.clone(), {
[c.model.appEntity.codeName?.toLowerCase()]:
item[c.model.appEntity.keyName],
});
formComponent = h(c.providers[form.name].component, {
props: {
modelData: form,
context: tempContext,
params: c.form.params,
enableAutoSave: true,
silentVerify: true,
},
on: {
neuronInit: c.onNeuronInit(item.srfkey),
},
});
}
return (
<div
class={[ns.e('content'), ns.is('actived', index === active.value)]}
key={item.srfkey}
>
{formComponent}
</div>
);
});
};
return { ns, rendertanHeader, renderTabs };
},
render() {
return (
<div class={this.ns.b()}>
{this.rendertanHeader()}
{this.renderTabs()}
</div>
);
},
});
......@@ -80,15 +80,6 @@ export const FormMDCtrl = defineComponent({
};
const renderMainContent = () => {
if (this.c.model.source.detailStyle === 'STYLE2') {
return h('FormMDCtrlFormStyle2', {
props: {
modelData: this.modelData,
controller: this.c,
},
});
}
return (
<div class={this.ns.b('main')}>
{[
......
......@@ -10,7 +10,6 @@ import FormTabPage from './form-tab-page/form-tab-page';
import FormTabPanel from './form-tab-panel/form-tab-panel';
import { FormControl } from './form-control';
import { FormMDCtrl } from './form-mdctrl/form-mdctrl';
import { FormMDCtrlFormStyle2 } from './form-mdctrl/form-mdctrl-form-style2/form-mdctrl-form-style2';
export {
FormButton,
......@@ -25,5 +24,4 @@ export {
FormTabPanel,
FormControl,
FormMDCtrl,
FormMDCtrlFormStyle2,
};
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册