6d2991e595
- Add English, Chinese, and Japanese translations for knowledge management UI - Update knowledge page and components to use i18n strings - Fix menu ID inconsistency in sidebar component - Improve sidebar active state handling with route watcher - Update text color binding in sidebar to use style binding
87 lines
2.9 KiB
Vue
87 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-row class="mb-[20px]">
|
|
<el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">{{ t('knowledge.event.addEvent') }}</el-button>
|
|
</el-row>
|
|
|
|
<el-table :data="tableData" show-overflow-tooltip border>
|
|
<el-table-column prop="date" :label="t('knowledge.event.eventName')" width="180" align="center" />
|
|
<el-table-column prop="name" :label="t('knowledge.event.eventDesc')" width="180" align="center" />
|
|
<el-table-column prop="address" :label="t('knowledge.event.effectiveTime')" align="center" />
|
|
<el-table-column prop="address" :label="t('knowledge.event.endTime')" align="center" />
|
|
<el-table-column prop="address" :label="t('knowledge.event.relatedImage')" align="center" />
|
|
<el-table-column prop="address" :label="t('knowledge.event.enableDisable')" align="center">
|
|
<template #default="scope">
|
|
<el-switch v-model="scope.row.switch" size="small" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('knowledge.event.operation')" align="center" width="150">
|
|
<template #default="scope">
|
|
<el-button link size="small" type="primary" @click="emits('change', t('knowledge.event.viewImage'), scope.row)">
|
|
{{ t('knowledge.event.viewImage') }}
|
|
</el-button>
|
|
<el-button link size="small" type="primary" @click="uploadImageChange(scope.row)">
|
|
{{ t('knowledge.event.uploadImage') }}
|
|
</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 { useI18n } from 'vue-i18n';
|
|
import { ref, reactive } from 'vue';
|
|
import { Plus } from '@element-plus/icons-vue';
|
|
import AddDialog from './addDialog.vue';
|
|
import UploadImage from './UploadImage.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
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> |