提交 8f1ba4d6 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新

上级 422ee752
<template #bodyCell="{ column, text, record }">
<div class="table-cell">
{{#eq item.columnType 'DEFGRIDCOLUMN'}}
{{/eq}}
{{#eq item.columnType 'UAGRIDCOLUMN'}}
{{/eq}}
</div>
<template v-if="column.dataIndex === 'name'">
<div class="editable-cell">
<div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
<a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
<check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
</div>
<div v-else class="editable-cell-text-wrapper">
{{ text || ' ' }}
<edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
</div>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<a-popconfirm
v-if="dataSource.length"
title="Sure to delete?"
@confirm="onDelete(record.key)"
>
<a>Delete</a>
</a-popconfirm>
</template>
</template>
\ No newline at end of file
{{#*inline "COLUMN"}}{{>@macro/grid-detail/grid-column.hbs}}{{/inline}}
\ No newline at end of file
...@@ -22,7 +22,7 @@ const showHeader = computed(()=> props.showHeader && (props.viewCaption || slot ...@@ -22,7 +22,7 @@ const showHeader = computed(()=> props.showHeader && (props.viewCaption || slot
<div class="ibiz-view-layout__header-content"> <div class="ibiz-view-layout__header-content">
<slot name="header"> <slot name="header">
<div class="ibiz-view-layout__header-left"> <div class="ibiz-view-layout__header-left">
<slot name="header-left">{{$props.viewCaption}}</slot> <slot name="header-left"/>
</div> </div>
<div class="ibiz-view-layout__header-right"> <div class="ibiz-view-layout__header-right">
<slot name="header-right" /> <slot name="header-right" />
......
...@@ -27,20 +27,20 @@ const extraClass = { ...@@ -27,20 +27,20 @@ const extraClass = {
<div <div
:class="[ :class="[
{ {
[`ibiz-icon-text--${$props.position}`]: hasIcon, [`ibiz-icon-text--${position}`]: hasIcon,
}, },
`ibiz-icon-text--${$props.size}`, `ibiz-icon-text--${size}`,
'ibiz-icon-text' 'ibiz-icon-text'
]" ]"
> >
<template v-if="$props.position == 'left'"> <template v-if="position == 'left'">
<i v-if="$props.iconClass" :class="'ibiz-icon-text__icon ' + $props.iconClass" /> <i v-if="iconClass" :class="'ibiz-icon-text__icon ' + iconClass" />
<img v-else-if="$props.imgPath" class="ibiz-icon-text__icon-img" :src="$props.imgPath" /> <img v-else-if="imgPath" class="ibiz-icon-text__icon-img" :src="imgPath" />
</template> </template>
<span class="ibiz-icon-text__text" v-if="$props.text">{{ $props.text }}</span> <span class="ibiz-icon-text__text" v-if="text">\{{text}}</span>
<template v-if="$props.position == 'right'"> <template v-if="position == 'right'">
<i v-if="$props.iconClass" :class="'ibiz-icon-text__icon ' + $props.iconClass" /> <i v-if="iconClass" :class="'ibiz-icon-text__icon ' + iconClass" />
<img v-else-if="$props.imgPath" class="ibiz-icon-text__icon-img" :src="$props.imgPath" /> <img v-else-if="imgPath" class="ibiz-icon-text__icon-img" :src="imgPath" />
</template> </template>
</div> </div>
</template> </template>
......
...@@ -8,4 +8,17 @@ import { MainViewState } from "@ibiz-core"; ...@@ -8,4 +8,17 @@ import { MainViewState } from "@ibiz-core";
*/ */
export interface GridViewState extends MainViewState { export interface GridViewState extends MainViewState {
/**
* @description 表格行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof GridViewState
*/
gridRowActiveMode: 0 | 1 | 2;
/**
* @description 表格行编辑状态
* @type {boolean}
* @memberof GridViewState
*/
rowEditState: boolean;
} }
\ No newline at end of file
...@@ -35,4 +35,39 @@ export interface GridControlState extends MainControlState { ...@@ -35,4 +35,39 @@ export interface GridControlState extends MainControlState {
* @memberof GridControlState * @memberof GridControlState
*/ */
rules: IParam; rules: IParam;
/**
* @description 是否多选
* @type {boolean}
* @memberof GridControlState
*/
multiple: boolean;
/**
* @description 行编辑状态
* @type {boolean}
* @memberof GridControlState
*/
rowEditState: boolean;
/**
* @description 行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof GridControlState
*/
rowActiveMode: 0 | 1 | 2;
/**
* @description 选中数据
* @type {IParam[]}
* @memberof GridControlState
*/
selectedData: IParam[];
/**
* @description 是否默认选中第一条数据
* @type {boolean}
* @memberof GridControlState
*/
selectFirstDefault: boolean;
} }
...@@ -15,6 +15,20 @@ export class GridControl extends MainControl { ...@@ -15,6 +15,20 @@ export class GridControl extends MainControl {
*/ */
public declare controlState: GridControlState; public declare controlState: GridControlState;
/**
* @description
* @param {GridControlProps} props
* @memberof GridControl
*/
public setState(props: GridControlProps) {
super.setState(props);
this.controlState.multiple = toRef(props, 'multiple') as any;
this.controlState.rowEditState = toRef(props, 'rowEditState') as any;
this.controlState.rowActiveMode = toRef(props, 'rowActiveMode') as any;
this.controlState.selectedData = toRef(props, 'selectedData') as any;
this.controlState.selectFirstDefault = toRef(props, 'selectFirstDefault') as any;
}
/** /**
* @description 表格数据改变 * @description 表格数据改变
* @param {number} rowIndex 行索引 * @param {number} rowIndex 行索引
......
...@@ -36,7 +36,7 @@ const { state } = new EditView(ViewConfig).moduleInstall(props); ...@@ -36,7 +36,7 @@ const { state } = new EditView(ViewConfig).moduleInstall(props);
<template> <template>
<IbizDefaultViewLayout class="ibiz-edit-view"> <IbizDefaultViewLayout class="ibiz-edit-view">
<template v-slot:header-left> <template v-slot:header-left>
<IbizIconText class="ibiz-view__caption" size="large" text="state.viewCaption" /> <IbizIconText class="ibiz-view__caption" size="large" :text="state.viewCaption" />
</template> </template>
<template v-slot:header-right> <template v-slot:header-right>
<span>工具栏部件</span> <span>工具栏部件</span>
......
...@@ -2,4 +2,6 @@ export const ViewConfig = { ...@@ -2,4 +2,6 @@ export const ViewConfig = {
viewCodeName: '{{page.codeName}}', viewCodeName: '{{page.codeName}}',
viewName: '{{page.name}}', viewName: '{{page.name}}',
viewCaption: '{{page.caption}}', viewCaption: '{{page.caption}}',
gridRowActiveMode: {{page.gridRowActiveMode}},
rowEditState: {{#if page.enableRowEdit}}{{page.rowEditDefault}}{{else}}false{{/if}},
}; };
\ No newline at end of file
...@@ -36,7 +36,7 @@ const { state } = new GridView(ViewConfig).moduleInstall(props); ...@@ -36,7 +36,7 @@ const { state } = new GridView(ViewConfig).moduleInstall(props);
<template> <template>
<IbizDefaultViewLayout class="ibiz-grid-view"> <IbizDefaultViewLayout class="ibiz-grid-view">
<template v-slot:header-left> <template v-slot:header-left>
<IbizIconText class="ibiz-view__caption" size="large" text="state.viewCaption" /> <IbizIconText class="ibiz-view__caption" size="large" :text="state.viewCaption" />
</template> </template>
<template v-slot:header-right> <template v-slot:header-right>
<span>工具栏部件</span> <span>工具栏部件</span>
...@@ -44,8 +44,11 @@ const { state } = new GridView(ViewConfig).moduleInstall(props); ...@@ -44,8 +44,11 @@ const { state } = new GridView(ViewConfig).moduleInstall(props);
{{#page.ctrls}} {{#page.ctrls}}
{{#eq controlType "GRID"}} {{#eq controlType "GRID"}}
<{{codeName}}Grid <{{codeName}}Grid
:showBusyIndicator="true"
:context="state.context" :context="state.context"
:multiple="false"
:rowEditState="state.rowEditState"
:rowActiveMode="state.gridRowActiveMode"
:showBusyIndicator="true"
:viewParams="state.viewParams" :viewParams="state.viewParams"
:controlAction="state.controlsAction" :controlAction="state.controlsAction"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
......
...@@ -52,6 +52,6 @@ const { state, handleEditorEvent } = new FormControl(CtrlConfig).moduleInstall(p ...@@ -52,6 +52,6 @@ const { state, handleEditorEvent } = new FormControl(CtrlConfig).moduleInstall(p
</template> </template>
<style lang="scss"> <style lang="scss">
.ibiz-form { .ibiz-form {
margin: 20px; margin: 20px !important;
} }
</style> </style>
\ No newline at end of file
{{>@macro/form-detail/include-form.hbs}} {{>@macro/grid-detail/include-grid.hbs}}
<script setup lang="ts"> <script setup lang="ts">
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { CtrlConfig } from './{{ctrl.codeName.spinalCase}}-grid-config'; import { CtrlConfig } from './{{ctrl.codeName.spinalCase}}-grid-config';
...@@ -6,6 +6,11 @@ import { GridControl, IActionParam, IParam, ControlAction } from '@ibiz-core'; ...@@ -6,6 +6,11 @@ import { GridControl, IActionParam, IParam, ControlAction } from '@ibiz-core';
interface Props { interface Props {
context: IParam; context: IParam;
multiple: boolean;
rowEditState: boolean;
rowActiveMode: 0 | 1 | 2;
selectedData: IParam[];
selectFirstDefault: boolean;
viewParams?: IParam; viewParams?: IParam;
controlAction: ControlAction; controlAction: ControlAction;
showBusyIndicator?: boolean; showBusyIndicator?: boolean;
...@@ -15,6 +20,10 @@ interface Props { ...@@ -15,6 +20,10 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
viewSubject: () => new Subject<IActionParam>(), viewSubject: () => new Subject<IActionParam>(),
showBusyIndicator: true, showBusyIndicator: true,
multiple: false,
rowEditState: false,
rowActiveMode: 0,
selectFirstDefault: false,
}) })
// emit声明 // emit声明
...@@ -27,9 +36,42 @@ const emit = defineEmits<CtrlEmit>(); ...@@ -27,9 +36,42 @@ const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props); const { state, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props);
// 表格选择功能配置
const rowSelection = computed(() => {
return {
onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: (record: IParam) => ({
}),
};
});
</script> </script>
<template> <template>
<a-table
bordered
class="ibiz-grid"
:showHeader="{{#if ctrl.hideHeader}}false{{else}}true{{/if}}"
:data-source="state.items"
:row-selection="rowSelection"
:columns="state.columnsModel">
<template #emptyText>
<div class="not-data">
<span class="empty-text">
{{#if ctrl.emptyText}}
{{ctrl.emptyText}}
{{else}}
无数据
{{/if}}
</span>
{{!-- 快速工具栏 --}}
</div>
</template>
{{!-- {{#each ctrl.pSDEGridColumns as | column |}}
{{>(lookup 'COLUMN') item=column}}
{{/each}} --}}
</a-table>
</template> </template>
<style lang="scss"> <style lang="scss">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册