mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-31 13:00:35 +00:00
82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<template>
|
|
<div v-if="config.type === 'index'">
|
|
{{ config.pageIndex && config.pageSize ? config.pageIndex * config.pageSize + index + 1 : index + 1 }}
|
|
</div>
|
|
<MForm
|
|
v-else-if="(config.type || config.editInlineFormConfig) && editState[index]"
|
|
label-width="0"
|
|
:config="config.editInlineFormConfig ?? [config]"
|
|
:init-values="editState[index]"
|
|
@change="formChangeHandler"
|
|
></MForm>
|
|
|
|
<TMagicButton
|
|
v-else-if="config.action === 'actionLink' && config.prop"
|
|
link
|
|
type="primary"
|
|
@click="config.handler?.(row)"
|
|
>
|
|
<span v-html="formatter(config, row, { index: index })"></span>
|
|
</TMagicButton>
|
|
|
|
<a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="row[config.prop]"
|
|
><img :src="row[config.prop]" height="50"
|
|
/></a>
|
|
|
|
<a v-else-if="config.action === 'link' && config.prop" target="_blank" :href="row[config.prop]" class="keep-all">{{
|
|
row[config.prop]
|
|
}}</a>
|
|
|
|
<TMagicTooltip v-else-if="config.action === 'tip'" placement="left">
|
|
<template #content>
|
|
<div>{{ formatter(config, row, { index: index }) }}</div>
|
|
</template>
|
|
<TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
|
|
</TMagicTooltip>
|
|
|
|
<TMagicTag
|
|
v-else-if="config.action === 'tag' && config.prop"
|
|
:type="typeof config.type === 'function' ? config.type(row[config.prop], row) : config.type"
|
|
close-transition
|
|
>{{ formatter(config, row, { index: index }) }}</TMagicTag
|
|
>
|
|
<div v-else v-html="formatter(config, row, { index: index })"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { TMagicButton, TMagicTag, TMagicTooltip } from '@tmagic/design';
|
|
import { type ContainerChangeEventData, MForm } from '@tmagic/form';
|
|
import type { FormValue } from '@tmagic/form-schema';
|
|
import { setValueByKeyPath } from '@tmagic/utils';
|
|
|
|
import { ColumnConfig } from './schema';
|
|
import { formatter } from './utils';
|
|
|
|
defineOptions({
|
|
name: 'MTableColumn',
|
|
});
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
config: ColumnConfig;
|
|
editState?: any;
|
|
row: any;
|
|
index: number;
|
|
}>(),
|
|
{
|
|
config: () => ({}),
|
|
editState: () => ({}),
|
|
},
|
|
);
|
|
|
|
const formChangeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
|
|
if (eventData.changeRecords?.length) {
|
|
for (const record of eventData.changeRecords) {
|
|
if (record.propPath) {
|
|
setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|