84 lines
2.6 KiB
Vue
84 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-row class="mb-[20px]">
|
|
<el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">添加事件</el-button>
|
|
</el-row>
|
|
|
|
<el-table :data="tableData" show-overflow-tooltip border>
|
|
<el-table-column prop="date" label="事件名称" width="180" align="center" />
|
|
<el-table-column prop="name" label="事件描述" width="180" align="center" />
|
|
<el-table-column prop="address" label="生效时间" align="center" />
|
|
<el-table-column prop="address" label="结束事件" align="center" />
|
|
<el-table-column prop="address" label="关联图片" align="center" />
|
|
<el-table-column prop="address" label="启用/停用" align="center">
|
|
<template #default="scope">
|
|
<el-switch v-model="scope.row.switch" size="small" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="150">
|
|
<template #default="scope">
|
|
<el-button link size="small" type="primary" @click="emits('change', '查看图片', scope.row)">
|
|
查看图片
|
|
</el-button>
|
|
<el-button link size="small" type="primary" @click="uploadImageChange(scope.row)">
|
|
上传图片
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 添加事件弹窗 -->
|
|
<AddDialog v-model="dialogVisible" />
|
|
<!-- 上传图片弹窗 -->
|
|
<UploadImage v-model="dialogVisibleUploadImage" width="80%" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue';
|
|
import { Plus } from '@element-plus/icons-vue';
|
|
import AddDialog from './addDialog.vue';
|
|
import UploadImage from './UploadImage.vue';
|
|
|
|
const emits = defineEmits(["update:change"]);
|
|
|
|
const dialogVisible = ref(false);
|
|
|
|
type TableData = {
|
|
address: string
|
|
date: string
|
|
name: string
|
|
switch: boolean
|
|
}
|
|
const tableData: TableData[] = [
|
|
{
|
|
date: '亲子周活动',
|
|
name: '私汤区到图腾泡池的道路关闭',
|
|
address: '2025-12-12 07:38:29',
|
|
switch: false,
|
|
},
|
|
{
|
|
date: '道路封闭',
|
|
name: '社媒打卡赢亲子套餐体验券',
|
|
address: '2025-12-12 07:38:29',
|
|
switch: true,
|
|
},
|
|
];
|
|
|
|
// 上传图片弹窗
|
|
const dialogVisibleUploadImage = ref(false);
|
|
const uploadImageChange = (row) => {
|
|
dialogVisibleUploadImage.value = true;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-button.button) {
|
|
background: linear-gradient(180deg, #4A8FF9 0%, rgba(0, 0, 0, 0) 100%), #2B7FFF;
|
|
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.24);
|
|
border-radius: 8px 8px 8px 8px;
|
|
border: 1px solid #1447E6;
|
|
padding-top: 18px;
|
|
padding-bottom: 18px;
|
|
}
|
|
</style> |