|
@@ -0,0 +1,97 @@
|
|
|
+<!--
|
|
|
+ * @Author: fxs bjnsfxs@163.com
|
|
|
+ * @Date: 2024-12-03
|
|
|
+ * @LastEditors: fxs bjnsfxs@163.com
|
|
|
+ * @LastEditTime: 2024-12-03
|
|
|
+ * @Description:
|
|
|
+ *
|
|
|
+-->
|
|
|
+<script setup lang="ts">
|
|
|
+import type { TableFieldInfo } from '@/types/table'
|
|
|
+import { FieldSpecialEffectType } from '@/types/tableText'
|
|
|
+import { initLoadResource } from '@/utils/resource'
|
|
|
+
|
|
|
+import { onMounted, reactive, toRefs } from 'vue'
|
|
|
+
|
|
|
+interface TableColumnProps {
|
|
|
+ columnConfig: TableFieldInfo
|
|
|
+ row: any
|
|
|
+ needAverage?: boolean
|
|
|
+}
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<TableColumnProps>(), {
|
|
|
+ needAverage: false
|
|
|
+})
|
|
|
+
|
|
|
+const { columnConfig, row } = toRefs(props)
|
|
|
+
|
|
|
+// 使用blob的资源路径信息
|
|
|
+const blobUrlInfo = reactive<Record<string, string>>({})
|
|
|
+
|
|
|
+// 资源的加载路径
|
|
|
+const resourceInfo: Record<string, string> = {
|
|
|
+ defaultHead: `/img/default/defaultHead.png`
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initLoadResource(resourceInfo).then((data) => {
|
|
|
+ Object.assign(blobUrlInfo, data)
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-image
|
|
|
+ v-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.IMG"
|
|
|
+ :preview-teleported="true"
|
|
|
+ :src="row[columnConfig.name]"
|
|
|
+ :preview-src-list="[row[columnConfig.name]]"
|
|
|
+ style="width: 35px; height: 35px"
|
|
|
+ :fit="'fill'"
|
|
|
+ :hide-on-click-modal="true"
|
|
|
+ >
|
|
|
+ <template #error>
|
|
|
+ <!-- -->
|
|
|
+ <img alt="头像" style="width: 35px; height: 35px" :src="blobUrlInfo.defaultHead" />
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+
|
|
|
+ <!-- 文字类 -->
|
|
|
+ <span v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.TEXT">
|
|
|
+ <TableFieldText :special-effect="columnConfig.specialEffect" :value="row[columnConfig.name]">
|
|
|
+ </TableFieldText>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 开关类 -->
|
|
|
+
|
|
|
+ <el-switch
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.SWITCH"
|
|
|
+ v-model="row[columnConfig.name]"
|
|
|
+ :data="row[columnConfig.name]"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+
|
|
|
+ <span v-else-if="columnConfig.specialEffect?.type === FieldSpecialEffectType.CUSTOM">
|
|
|
+ {{ columnConfig.specialEffect.otherInfo.render(row[columnConfig.name]) }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <el-text v-else>
|
|
|
+ <!-- 其他列按默认方式显示 -->
|
|
|
+
|
|
|
+ {{
|
|
|
+ props.needAverage &&
|
|
|
+ row[columnConfig.name] !== undefined &&
|
|
|
+ columnConfig.name !== 'count' &&
|
|
|
+ columnConfig.name !== 'date'
|
|
|
+ ? row[columnConfig.name] + '%'
|
|
|
+ : row[columnConfig.name]
|
|
|
+ }}
|
|
|
+ </el-text>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped></style>
|