修改活动列表样式

This commit is contained in:
jacky 2024-05-08 20:32:31 +08:00
parent d5dee9fbb6
commit fde7ad7a67
2 changed files with 59 additions and 76 deletions

View File

@ -7,14 +7,9 @@
<script setup>
import '@wangeditor/editor/dist/css/style.css' // css
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor } from '@wangeditor/editor-for-vue'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
const emits = defineEmits(['change', 'update:modelValue'])
const editorConfig = ref({
readOnly: true

View File

@ -47,100 +47,87 @@
@selection-change="handleSelectionChange">
<el-table-column type="expand">
<template #default="scope">
<div>
<div class="gva-table-expand" style="max-width: 600px;">
<div style="max-width: 1200px; width: 80%;">
<div class="gva-table-expand">
<el-text tag="b">简介</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.brief }}
<div class="gva-table-expand">
<rich-view v-model="scope.row.brief" style="width: 100%; height: 300px;" />
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">指导单位</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.guid }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">主办单位</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.organizer }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">协办单位</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.coOrganizer }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">支持单位</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.support }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">参与企业</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.companies }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">参与人员</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.participants }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">联系方式</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.contact }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">报名链接</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.signUrl }}
</div>
<div class="gva-table-expand" style="max-width: 600px;">
<el-text tag="b">直播链接</el-text>
</div>
<div class="gva-table-expand" style="max-width: 600px;">
{{ scope.row.liveUrl }}
<div class="gva-table-expand">
<el-descriptions :column="2" border>
<el-descriptions-item label="指导单位">
{{ scope.row.guid || '无' }}
</el-descriptions-item>
<el-descriptions-item label="主办单位">
{{ scope.row.organizer || '无' }}
</el-descriptions-item>
<el-descriptions-item label="协办单位">
{{ scope.row.coOrganizer || '无' }}
</el-descriptions-item>
<el-descriptions-item label="支持单位">
{{ scope.row.support || '无' }}
</el-descriptions-item>
<el-descriptions-item label="参与企业">
{{ scope.row.companies || '无' }}
</el-descriptions-item>
<el-descriptions-item label="参与人员">
{{ scope.row.participants || '无' }}
</el-descriptions-item>
<el-descriptions-item label="报名链接">
{{ scope.row.signUrl || '无' }}
</el-descriptions-item>
<el-descriptions-item label="直播链接">
{{ scope.row.liveUrl || '无' }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(scope.row.CreatedAt) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDate(scope.row.UpdatedAt) }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
</el-table-column>
<el-table-column type="selection" width="55" />
<el-table-column label="封面" width="200">
<el-table-column fixed type="selection" width="55" />
<el-table-column label="封面" width="150">
<template #default="scope">
<el-image style="width: 100px; height: 100px" :src="getUrl(scope.row.cover)" fit="cover" />
<el-image style="width: 120px; height: 100px" :src="getUrl(scope.row.cover)" fit="cover" />
</template>
</el-table-column>
<el-table-column align="left" label="类型" prop="kind" width="120">
<el-table-column align="left" label="类型" prop="kind" width="80">
<template #default="scope">
{{ filterDict(scope.row.kind, activityKindOptions) }}
</template>
</el-table-column>
<el-table-column align="left" label="活动标识" prop="label" width="180" />
<el-table-column align="left" label="标题" prop="title" width="320" />
<el-table-column align="left" label="活动地址" prop="activeAddr" width="200" />
<el-table-column align="left" label="开始时间" width="180">
<template #default="scope">{{ formatDate(scope.row.startTime) }}</template>
<el-table-column align="left" label="标题/标识" prop="label" min-width="350">
<template #default="scope">
<p><el-text tag="b">标题</el-text><el-text>{{ scope.row.title }}</el-text></p>
<p><el-text tag="b">标识</el-text><el-text>{{ scope.row.label }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="结束时间" width="180">
<template #default="scope">{{ formatDate(scope.row.endTime) }}</template>
<el-table-column align="left" label="活动地址/联系方式" prop="label" min-width="350">
<template #default="scope">
<p><el-text tag="b">活动地址</el-text><el-text>{{ scope.row.activeAddr }}</el-text></p>
<p><el-text tag="b">联系方式</el-text><el-text>{{ scope.row.contact }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="状态" prop="status" width="120">
<el-table-column align="left" label="时间" width="220">
<template #default="scope">
<p><el-text tag="b">开始</el-text><el-text>{{ formatDate(scope.row.startTime) }}</el-text></p>
<p><el-text tag="b">结束</el-text><el-text>{{ formatDate(scope.row.endTime) }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="状态" prop="status" width="80">
<template #default="scope">
{{ filterDict(scope.row.status, activityStatusOptions) }}
</template>
</el-table-column>
<el-table-column align="left" label="创建日期" width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column align="left" label="操作" fixed="right" min-width="240">
<template #default="scope">
<el-button type="primary" link icon="edit" class="table-button" @click="updateRow(scope.row)">修改</el-button>
@ -255,6 +242,7 @@ import { getUrl } from '@/utils/image'
import { isImageMime } from '@/utils/image'
//
import RichEdit from '@/components/richtext/rich-edit.vue'
import RichView from '@/components/richtext/rich-view.vue'
//
import { getDictFunc, formatDate, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'