feat(table): action 支持icon,text支持函数

This commit is contained in:
roymondchen 2022-10-18 14:55:26 +08:00 committed by jia000
parent a44bf0928f
commit a06555268f
3 changed files with 12 additions and 50 deletions

View File

@ -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);

View File

@ -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]"

View File

@ -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;