This commit is contained in:
quantulr
2024-03-03 21:53:47 +08:00
parent 73467d5902
commit 5c74603844

View File

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