williamet/cas_cloud_admin_i18n
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

news

Browse Source
This commit is contained in:
quantulr
2024-03-03 21:53:47 +08:00
parent 73467d5902
commit 5c74603844
1 changed files with 91 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/website/news/index.vue
View File

@ -1,90 +1,94 @@
<script setup> <script setup>
import {addNews, listNews} from "@/api/website/news"; import { addNews, listNews } from "@/api/website/news";
import {reactive, ref, toRefs} from "vue"; import { reactive, ref, toRefs } from "vue";
import Pagination from "@/components/Pagination/index.vue"; import Pagination from "@/components/Pagination/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue"; import ImageUpload from "@/components/ImageUpload/index.vue";
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
const data = reactive({ const data = reactive({
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10,
}, },
form: { form: {
lang: "zh", lang: "zh",
classification: "0",// 类别 0 新闻 1 政策 classification: "0", // 类别 0 新闻 1 政策 2 公告
title: undefined, title: undefined,
titleRu: undefined, titleRu: undefined,
content: undefined, content: undefined,
contentRu: undefined, contentRu: undefined,
cover: undefined cover: undefined,
}, },
}) });
const {queryParams, form} = toRefs(data) const { queryParams, form } = toRefs(data);
const rules = { const rules = {
title: [ title: [
{ {
required: true, message: '请输入标题', trigger: 'change' required: true,
} message: "请输入标题",
], cover: [ trigger: "change",
},
],
cover: [
{ {
required: true, message: '请上传封面图片', trigger: 'change' required: true,
} message: "请上传封面图片",
] trigger: "change",
} },
const newsList = ref([]) ],
const total = ref(0) };
const formRef = ref(null) const newsList = ref([]);
const showEditDialog = ref(false) const total = ref(0);
const dialogTitle = ref("") const formRef = ref(null);
const showEditDialog = ref(false);
const dialogTitle = ref("");
const getList = () => { const getList = () => {
listNews(queryParams.value).then(resp => { listNews(queryParams.value).then((resp) => {
newsList.value = resp.rows newsList.value = resp.rows;
total.value = resp.total total.value = resp.total;
}) });
} };
const reset = () => { const reset = () => {
formRef.value?.resetFields() formRef.value?.resetFields();
form.value = { form.value = {
lang: "zh", lang: "zh",
classification: "0",// 类别 0 新闻 1 政策 classification: "0", // 类别 0 新闻 1 政策
title: undefined, title: undefined,
titleRu: undefined, titleRu: undefined,
content: undefined, content: undefined,
contentRu: undefined, contentRu: undefined,
cover: undefined cover: undefined,
} };
} };
const handleAdd = () => { const handleAdd = () => {
reset() reset();
dialogTitle.value = "新增新闻或政策" dialogTitle.value = "新增新闻或政策";
showEditDialog.value = true showEditDialog.value = true;
};
}
const handleSubmit = () => { const handleSubmit = () => {
formRef.value.validate().then( formRef.value
() => { .validate()
if (form.value.id) { .then(() => {
// TODO: edit if (form.value.id) {
} else { // TODO: edit
// add } else {
addNews(form.value).then(resp => { // add
ElMessage.success("新增成功") addNews(form.value).then((resp) => {
showEditDialog.value = false ElMessage.success("新增成功");
}) showEditDialog.value = false;
} });
} }
).catch(() => { })
}) .catch(() => {});
} };
getList() getList();
</script> </script>
<template> <template>
@ -92,72 +96,81 @@ getList()
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
plain plain
icon="plus" icon="plus"
size="default" size="default"
@click="handleAdd" @click="handleAdd"
> >
新增 新增
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table :data="newsList"> <el-table :data="newsList">
<el-table-column prop="id" label="ID"/> <el-table-column prop="id" label="ID" />
<el-table-column prop="title" label="标题"/> <el-table-column prop="title" label="标题" />
<el-table-column prop="content" label="内容"> <el-table-column prop="content" label="内容">
<template #default="{row}"> <template #default="{ row }">
<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> <p
style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ row.content }} {{ row.content }}
</p> </p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="classification" label="分类"/> <el-table-column prop="classification" label="分类" />
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="{row}"> <template #default="{ row }">
<el-button size="small" icon="delete" type="text">删除</el-button> <el-button size="small" icon="delete" type="text">删除</el-button>
<el-button size="small" type="text" icon="edit">编辑</el-button> <el-button size="small" type="text" icon="edit">编辑</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" <pagination
:total="total" v-show="total > 0"
v-model:page="queryParams.pageNum" :total="total"
v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
@pagination="getList"/> v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog v-model="showEditDialog" :title="dialogTitle" :width="500"> <el-dialog v-model="showEditDialog" :title="dialogTitle" :width="500">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item prop="lang" label="语言"> <el-form-item prop="lang" label="语言">
<el-select v-model="form.lang"> <el-select v-model="form.lang">
<el-option label="中文" value="zh"/> <el-option label="中文" value="zh" />
<el-option label="俄文" value="ru"/> <el-option label="俄文" value="ru" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="classification" label="分类"> <el-form-item prop="classification" label="分类">
<el-select v-model="form.classification"> <el-select v-model="form.classification">
<el-option label="新闻" value="0"/> <el-option label="新闻动态" value="0" />
<el-option label="政策" value="1"/> <el-option label="政策解读" value="1" />
<el-option label="通知公告" value="2" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<template v-if="form.lang==='zh'"> <template v-if="form.lang === 'zh'">
<el-form-item prop="title" label="标题"> <el-form-item prop="title" label="标题">
<el-input v-model="form.title"/> <el-input v-model="form.title" />
</el-form-item> </el-form-item>
<el-form-item prop="content" label="内容"> <el-form-item prop="content" label="内容">
<el-input type="textarea" v-model="form.content"/> <el-input type="textarea" v-model="form.content" />
</el-form-item> </el-form-item>
</template> </template>
<template v-else-if="form.lang==='ru'"> <template v-else-if="form.lang === 'ru'">
<el-form-item prop="title" label="标题"> <el-form-item prop="title" label="标题">
<el-input v-model="form.titleRu"/> <el-input v-model="form.titleRu" />
</el-form-item> </el-form-item>
<el-form-item prop="content" label="内容"> <el-form-item prop="content" label="内容">
<el-input type="textarea" v-model="form.contentRu"/> <el-input type="textarea" v-model="form.contentRu" />
</el-form-item> </el-form-item>
</template> </template>
<el-form-item prop="cover" label="封面图片"> <el-form-item prop="cover" label="封面图片">
<image-upload v-model="form.cover" :limit="1"/> <image-upload v-model="form.cover" :limit="1" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -174,6 +187,4 @@ getList()
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
</style>