mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-14 08:49:23 +08:00
feat(table): action 支持icon,text支持函数
This commit is contained in:
parent
a44bf0928f
commit
a06555268f
@ -4,13 +4,14 @@
|
|||||||
<TMagicButton
|
<TMagicButton
|
||||||
v-for="(action, actionIndex) in config.actions"
|
v-for="(action, actionIndex) in config.actions"
|
||||||
v-show="display(action.display, scope.row) && !editState[scope.$index]"
|
v-show="display(action.display, scope.row) && !editState[scope.$index]"
|
||||||
v-html="action.text"
|
|
||||||
class="action-btn"
|
class="action-btn"
|
||||||
text
|
text
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
|
:icon="action.icon"
|
||||||
:key="actionIndex"
|
:key="actionIndex"
|
||||||
@click="actionHandler(action, scope.row, scope.$index)"
|
@click="actionHandler(action, scope.row, scope.$index)"
|
||||||
|
><span v-html="formatter(action.text, scope.row)"></span
|
||||||
></TMagicButton>
|
></TMagicButton>
|
||||||
<TMagicButton
|
<TMagicButton
|
||||||
class="action-btn"
|
class="action-btn"
|
||||||
@ -35,7 +36,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { TMagicButton, tMagicMessage, tMagicMessageBox, TMagicTableColumn } from '@tmagic/design';
|
import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
|
||||||
|
|
||||||
import { ColumnActionConfig, ColumnConfig } from './schema';
|
import { ColumnActionConfig, ColumnConfig } from './schema';
|
||||||
|
|
||||||
@ -63,56 +64,16 @@ const display = (fuc: boolean | Function | undefined, row: any) => {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const success = (msg: string, action: ColumnActionConfig, row: any) => {
|
const formatter = (fuc: string | Function | undefined, row: any) => {
|
||||||
tMagicMessage.success(msg);
|
if (typeof fuc === 'function') {
|
||||||
action.after?.(row);
|
return fuc(row);
|
||||||
};
|
|
||||||
|
|
||||||
const error = (msg: string) => tMagicMessage.error(msg);
|
|
||||||
|
|
||||||
const deleteAction = async (action: ColumnActionConfig, row: any) => {
|
|
||||||
await tMagicMessageBox.confirm(`确认删除${row[action.name || 'c_name']}(${row[props.rowkeyName]})?`, '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
});
|
|
||||||
|
|
||||||
const res = await action.handler?.(row);
|
|
||||||
|
|
||||||
if (res.ret === 0) {
|
|
||||||
success('删除成功!', action, row);
|
|
||||||
} else {
|
|
||||||
error(res.msg || '删除失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyHandler = async (action: ColumnActionConfig, row: any) => {
|
|
||||||
await tMagicMessageBox.confirm(`确定复制${row[action.name || 'c_name']}(${row.c_id})?`, '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await action.handler?.(row);
|
|
||||||
|
|
||||||
if (res.ret === 0) {
|
|
||||||
success('复制成功!', action, row);
|
|
||||||
} else {
|
|
||||||
error(`复制失败!${res.msg}`);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
error('复制失败!');
|
|
||||||
}
|
}
|
||||||
|
return fuc;
|
||||||
};
|
};
|
||||||
|
|
||||||
const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
|
const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
|
||||||
await action.before?.(row);
|
await action.before?.(row);
|
||||||
if (action.type === 'delete') {
|
if (action.type === 'edit') {
|
||||||
await deleteAction(action, row);
|
|
||||||
} else if (action.type === 'copy') {
|
|
||||||
await copyHandler(action, row);
|
|
||||||
} else if (action.type === 'edit') {
|
|
||||||
props.editState[index] = row;
|
props.editState[index] = row;
|
||||||
} else {
|
} else {
|
||||||
await action.handler?.(row);
|
await action.handler?.(row);
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
@click="config.handler?.(scope.row)"
|
@click="config.handler?.(scope.row)"
|
||||||
>
|
>
|
||||||
{{ formatter(config, scope.row) }}
|
<span v-html="formatter(config, scope.row)"></span>
|
||||||
</TMagicButton>
|
</TMagicButton>
|
||||||
|
|
||||||
<a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
|
<a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
|
||||||
|
@ -20,9 +20,10 @@ import { FormConfig, FormValue } from '@tmagic/form';
|
|||||||
|
|
||||||
export interface ColumnActionConfig {
|
export interface ColumnActionConfig {
|
||||||
type?: 'delete' | 'copy' | 'edit';
|
type?: 'delete' | 'copy' | 'edit';
|
||||||
display?: (vm: any, row: any) => boolean;
|
display?: (row: any) => boolean;
|
||||||
text: string;
|
text: string | ((row: any) => string);
|
||||||
name: string;
|
name: string;
|
||||||
|
icon?: any;
|
||||||
handler?: (row: any) => Promise<any> | any;
|
handler?: (row: any) => Promise<any> | any;
|
||||||
before?: (row: any) => void;
|
before?: (row: any) => void;
|
||||||
after?: (row: any) => void;
|
after?: (row: any) => void;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user