提交 bcc2eda1 编写于 作者: RedPig97's avatar RedPig97

update: 更新

上级 5cc87f7e
......@@ -3,7 +3,7 @@
<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
<IbizFormItem name="{{item.codeName}}" label="{{item.caption}}">
{{#if item.psEditor}}
{{>(lookup . 'item.psEditor.editorType') item=item}}
{{>(lookup . 'item.psEditor.editorType') item=item ctrlType="form"}}
{{/if}}
</IbizFormItem>
</div>
......
......@@ -3,19 +3,30 @@ import { IParam, IActionParam } from "@ibiz-core";
import { onBeforeMount, ref, Ref } from "vue";
interface ToolbarProps {
/**
* @description 名称
*/
name: string;
/**
* @description 工具栏模型
* @description 模式
*/
toolbarModel: IParam;
mode: 'button' | 'link';
/**
* @description 行为模型
*/
actionModel: IParam[];
}
interface toolbarEmit {
(name: "toolbarEvent", value: IActionParam): void;
}
const props = withDefaults(defineProps<ToolbarProps>(), {});
const props = withDefaults(defineProps<ToolbarProps>(), {
mode: 'button',
});
const emit = defineEmits<toolbarEmit>();
const items: Ref<IParam[]> = ref(props.toolbarModel?.items || []);
const items: Ref<IParam[]> = ref(props.actionModel || []);
console.log(items);
const getItemClass = (item: IParam) => {
//todo 样式表
return item.class;
};
const getItemIcon = (item: IParam) => {
......@@ -25,29 +36,32 @@ const getItemIcon = (item: IParam) => {
};
const itemClick = (item: IParam) => {
emit("toolbarEvent", {
tag: item.name,
tag: props.name,
action: "toolbarEvent",
data: item,
});
};
</script>
<template>
<div class="app-toolbar">
<template v-for="(item, index) in items" :key="index">
<div class="toolbar">
<a-space :class="`toolbar-${mode}`">
<template v-for="(item, index) in items" :key="index">
<a-tooltip
v-if="Object.is(item.itemType, 'DEUIACTION')"
:title="item.tooltip"
>
<!-- todo 无权限显示模式 -->
<a-button
v-show="true"
:class="['toolbar-item', getItemClass(item)]"
:disabled="item.disabled"
type="primary"
:type="Object.is(mode,'link') ? 'link': 'primary'"
@click="itemClick(item)"
>
<a-icon v-show="item.showIcon" :type="getItemIcon(item)" />
\{{ item.showCaption ? item.caption : "" }}
</a-button>
<div v-if="item.addSeparator" class="separator"></div>
</a-tooltip>
<a-dropdown v-else-if="Object.is(item.itemType, 'items')">
<a-menu slot="overlay" @click="itemClick">
......@@ -72,15 +86,26 @@ const itemClick = (item: IParam) => {
</a-tooltip>
</a-menu>
</a-dropdown>
</template>
</template>
</a-space>
</div>
</template>
<style scoped>
.app-toolbar {
}
.app-toolbar .toolbar-item {
margin-right: 8px;
margin-bottom: 12px;
<style lang='scss'>
.toolbar {
.toolbar-link {
gap: 0 !important;
.ant-space-item {
position: relative;
.separator {
position: absolute;
right: 0;
top: 15%;
height: 70%;
width: 1px;
background: #1890ff;
}
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册