|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <div class="newsSetting">
|
|
|
+ <div class="searchBox">
|
|
|
+ <el-form :inline="true" :model="formData" class="demo-form-inline">
|
|
|
+ <el-form-item label="发布人:">
|
|
|
+ <el-input placeholder="请输入发布人" v-model="formData.nickname" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发布时间:">
|
|
|
+ <el-date-picker v-model="formData.createTime" type="date" placeholder="请选择发布时间" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标题:">
|
|
|
+ <el-input placeholder="请输入标题" v-model="formData.title" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已读未读:">
|
|
|
+ <el-select placeholder="" v-model="formData.readType">
|
|
|
+ <el-option :value="2" label="全部" />
|
|
|
+ <el-option :value="1" label="已读" />
|
|
|
+ <el-option :value="0" label="未读" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" :icon="Search" @click="onSearchHandle">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="tableBox">
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column type="index" label="序号" width="100" />
|
|
|
+ <el-table-column prop="title" label="标题">
|
|
|
+ <template #default="scope">
|
|
|
+ <a
|
|
|
+ :class="{ 'line-primary': true, active: !scope.row['readState'] }"
|
|
|
+ href="javascript:void(0)"
|
|
|
+ @click="toLookDetail(scope.row)"
|
|
|
+ >{{ scope.row['title'] }}</a
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发布人" prop="creator" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ userMap[scope.row.creator] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发布时间" prop="createTime" width="200" />
|
|
|
+ <el-table-column label="阅读次数" prop="readNum" width="100" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pageBox">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pageNo"
|
|
|
+ :page-size="10"
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import request from '@/config/axios'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import { getSimpleUserMap } from '@/api/system/user'
|
|
|
+
|
|
|
+defineOptions({ name: 'LearnCenter' })
|
|
|
+
|
|
|
+const userMap = ref<any>({})
|
|
|
+async function initSimpleUserMap() {
|
|
|
+ userMap.value = await getSimpleUserMap()
|
|
|
+}
|
|
|
+initSimpleUserMap()
|
|
|
+const pageNo = ref<number>(1)
|
|
|
+const tableData = ref<any>([])
|
|
|
+const total = ref<number>()
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const formData = ref<{
|
|
|
+ nickname: string
|
|
|
+ createTime: any
|
|
|
+ title: string
|
|
|
+ readType: number
|
|
|
+}>({
|
|
|
+ nickname: '',
|
|
|
+ createTime: null,
|
|
|
+ title: '',
|
|
|
+ readType: 2
|
|
|
+})
|
|
|
+const queryArticleByPage = async (): Promise<void> => {
|
|
|
+ const urlApi = `/adm/noticeAndLearn/query/page`
|
|
|
+ const sendData = {
|
|
|
+ pageNo: pageNo.value,
|
|
|
+ pageSize: 10,
|
|
|
+ type: 2,
|
|
|
+ ...formData.value
|
|
|
+ }
|
|
|
+ const result = await request.post({ url: urlApi, data: sendData })
|
|
|
+ tableData.value = result['list']
|
|
|
+ total.value = result['total']
|
|
|
+}
|
|
|
+queryArticleByPage()
|
|
|
+const onSearchHandle = (): void => {
|
|
|
+ pageNo.value = 1
|
|
|
+ queryArticleByPage()
|
|
|
+}
|
|
|
+const toLookDetail = (row: any): void => {
|
|
|
+ router.push({
|
|
|
+ path: '/learnCenterDetail',
|
|
|
+ query: { id: row['id'] } as { id: number }
|
|
|
+ })
|
|
|
+}
|
|
|
+const handleCurrentChange = (page: number): void => {
|
|
|
+ pageNo.value = page
|
|
|
+ queryArticleByPage()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.newsSetting {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > .tableBox {
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ > .pageBox {
|
|
|
+ padding-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ :deep {
|
|
|
+ .el-table th.el-table__cell {
|
|
|
+ background-color: #edf2fc;
|
|
|
+ color: #4c525b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .pageBox {
|
|
|
+ padding: 20px 0px 10px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: right;
|
|
|
+ }
|
|
|
+ .line-primary {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #4c525b;
|
|
|
+ &.active {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operationBox {
|
|
|
+ > span {
|
|
|
+ color: #409eff;
|
|
|
+ margin-right: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
