From e2f129ee192ae3469848beeceac262b13ba8eacb Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 14 六月 2023 15:52:11 +0800
Subject: [PATCH] 新增页面和配置，对接口
---
src/views/Admin/Report.vue | 448 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 278 insertions(+), 170 deletions(-)
diff --git a/src/views/Admin/Report.vue b/src/views/Admin/Report.vue
index eecfb70..d90fbd7 100644
--- a/src/views/Admin/Report.vue
+++ b/src/views/Admin/Report.vue
@@ -1,175 +1,283 @@
<template>
<div class="inner">
- <a-radio-group v-model="category">
- <a-radio-button value="default">
- 全部
- </a-radio-button>
- <a-radio-button value="1">
- 已审核
- </a-radio-button>
- <a-radio-button value="2">
- 未审核
- </a-radio-button>
- </a-radio-group>
- <div style="float:right">
- 时间区间筛选：<a-range-picker :placeholder="['开始时间', '结束时间']"/>
- </div>
- <br/><br/>
- <!-- 表格实体部分-->
- <a-table :columns="columns" :data-source="data" bordered>
- <span slot="level" slot-scope="text">
- <a-tag :color="text === '黄色' ? 'yellow' :text === '橙色'? 'orange':text === '红色'?'red':'blue'">
- {{ text }}
- </a-tag>
- </span>
- <template slot="attachment" slot-scope="text">
- <span v-if="text==='无'">无</span>
- <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a>
- </template >
- <template slot="operation" slot-scope="text, record, index">
- <div class="editable-row-operations">
- <a-button v-if="record.audit==='已审核'" type="primary" @click="showModal(record.id)" >
- 确认发布</a-button>
- <router-link :to="{path:'/details',query: {id: record.id}}">信息详情</router-link>
- <a style="color:red">删除</a>
- </div>
- </template>
- </a-table>
- <!-- 对话框 -->
- <a-modal title="信息发布"
- okText="确认发布"
- cancelText="取消"
- :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
- <p>确认发布 “[{{show_id}}]2023年5月23日，全疆黄色高温预警信息”？</p>
- </a-modal>
+ <a-row type="flex" justify="space-between" style="margin-bottom: 20px">
+ <a-col :span="8">
+ <a-radio-group v-model="search.searchParams.reviewStatus" @change="getData">
+ <a-radio-button :value="null">
+ 全部
+ </a-radio-button>
+ <a-radio-button :value="2">
+ 审核通过
+ </a-radio-button>
+ <a-radio-button :value="1">
+ 未审核
+ </a-radio-button>
+ <a-radio-button :value="3">
+ 审核驳回
+ </a-radio-button>
+ </a-radio-group>
+ </a-col>
+ <a-col :span="16">
+ <a-row type="flex" justify="end" :gutter="12">
+ <a-col :span="8">
+ <a-range-picker
+ v-model="timeRange"
+ format="YYYY-MM-DD"
+ :placeholder="['开始时间', '结束时间']"
+ @change="timeChange"
+ @ok="onOk"
+ style="width: 100%"
+ />
+ </a-col>
+ <a-col :span="4">
+ <a-button type="primary" @click="getData">查询</a-button>
+ <a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
+ </a-col>
+ </a-row>
+ </a-col>
+ </a-row>
+
+ <div class="table-cont">
+ <a-table :columns="columns" :data-source="data" bordered :pagination="pagination" :rowKey="record=>record.id">
+ <template #index="text,record,index">
+ {{ index+1 }}
+ </template>
+ <template #disasterType="text">
+ {{ getRiskName(text) }}
+ </template>
+ <template #attachment="text">
+ <span v-if="text==='无'">无</span>
+ <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a>
+ </template >
+ <template #reviewStatus="reviewStatus">
+ <a-tag
+ :color="reviewStatus === 1 ? 'blue' : reviewStatus === 2 ? 'green' : 'red'"
+ >
+ {{ reviewStatus==1?'未审核':reviewStatus==2?'已审核':reviewStatus==3?'审核驳回':'' }}
+ </a-tag>
+ </template>
+ <template #operation="text, record, index">
+ <a-button type="primary" v-if="record.reviewStatus == 2" @click="confirmPost(record.id)">确认发布</a-button>
+ <a-button type="link" v-if="record.reviewStatus == 2 || record.reviewStatus == 3" @click="openMod('view',record)">查看信息详情</a-button>
+ <a-button class="del" type="link" @click="delData(record.id)">删除</a-button>
+ </template>
+ </a-table>
+ </div>
+ <msg-edit-mod ref="msgEdit" @refresh="getData"></msg-edit-mod>
</div>
</template>
-<script>
- const columns = [{
- title: '编号',
- dataIndex: 'id',
- width: '8%',
- },
- {
- title: '提交审核时间',
- dataIndex: 'time',
- width: '13%',
- scopedSlots: {
- customRender: 'time'
- }, //设置定制化表格数据
- },
- {
- title: '发布单位',
- dataIndex: 'department',
- width: '12%',
- },
- {
- title: '类别',
- dataIndex: 'category',
- width: '6%',
- },
- {
- title: '级别',
- dataIndex: 'level',
- scopedSlots: {
- customRender: 'level'
- }, //设置定制化表格数据
- width: '6%',
- },
- {
- title: '信息标题',
- dataIndex: 'title',
- width: '16%',
- },
- {
- title: '附件',
- dataIndex: 'attachment',
- width: '6%',
- scopedSlots: {
- customRender: 'attachment'
- },
- },
- {
- title: '审核情况',
- dataIndex: 'audit',
- width: '10%',
- scopedSlots: {
- customRender: 'audit'
- }, //设置定制化表格数据
- },
- {
- title: '操作',
- dataIndex: 'operation',
- scopedSlots: {
- customRender: 'operation'
- },
- },
- ];
- const data = [{
- key: 1,
- id:1001,
- readed:false,
- time: '2023年5月3日 15:30',
- department: '自治区预警中心',
- category: '气象',
- level: '黄色',
- title: '全疆高温红色预警',
- attachment: '1',
- audit: '已审核'
- },
- {
- key: 2,
- id:1002,
- readed:false,
- time: '2023年5月3日 15:30',
- department: '自治区预警中心',
- category: '气象',
- level: '黄色',
- title: '全疆高温红色预警',
- attachment: '1',
- audit: '未审核'
- },{
- key: 3,
- id:1003,
- readed:false,
- time: '2023年5月3日 15:30',
- department: '自治区预警中心',
- category: '气象',
- level: '黄色',
- title: '全疆高温红色预警',
- attachment: '1',
- audit: '已审核'
- }]
- export default {
- data() {
- return {
- category: 'default',
- data,
- columns,
- visible: false,
- confirmLoading: false,
- show_id:''
- }
- },
- methods: {
- showModal(id) {
- this.visible = true;
- this.show_id=id
- },
- //确认发布
- handleOk(e) {
- this.ModalText = '正在发布，请稍候...';
- this.confirmLoading = true;
- setTimeout(() => {
- this.visible = false;
- this.confirmLoading = false;
- }, 2000);
- },
- handleCancel(e) {
- this.visible = false;
- },
- }
- }
-
-</script>
\ No newline at end of file
+<script>
+
+import {getReviewDetail, getReviewRecord} from "@/api/review";
+import msgEditMod from '@/views/Admin/components/msgEditMod'
+import {delRecipient} from "@/api/user";
+import {deleteMsg, publishMsg} from "@/api/send";
+
+export default {
+ name: 'msgReview',
+ components: { msgEditMod },
+ data () {
+ return {
+ search:{
+ pageIndex: 1,
+ pageSize: 10,
+ searchParams:{
+ reviewStatus: null,
+ startTime: '',
+ endTime: ''
+ }
+ },
+ timeRange: [],
+ riskOptions: [
+ {name: '地震',value: 1},
+ {name: '洪涝',value: 2},
+ {name: '气象',value: 3},
+ {name: '泥石流',value: 4},
+ {name: '水旱',value: 5},
+ {name: '森林草原火灾',value: 6}
+ ],
+ pagination: {
+ current: 1,
+ defaultCurrent: 1,
+ defaultPageSize: 10,
+ total: 0,
+ onChange: ( page, pageSize ) => this.onPageChange(page,pageSize),
+ showTotal: total => `共 ${total} 条`
+ },
+ columns: [
+ {
+ title: '序号',
+ key: 'index',
+ scopedSlots: {
+ customRender: 'index'
+ },
+ },
+ {
+ title: '提交审核时间',
+ key: 'gmtReviewSubmit',
+ dataIndex: 'gmtReviewSubmit',
+ },
+ {
+ title: '发布单位',
+ key: 'publishingUnit',
+ dataIndex: 'publishingUnit',
+ },
+ {
+ title: '灾种',
+ dataIndex: 'disasterType',
+ key: 'disasterType',
+ scopedSlots: {
+ customRender: 'disasterType'
+ }, //设置定制化表格数据
+ },
+ {
+ title: '信息标题',
+ key: 'title',
+ dataIndex: 'title',
+ },
+ {
+ title: '附件',
+ key: 'attachment',
+ dataIndex: 'attachment',
+ scopedSlots: {
+ customRender: 'attachment'
+ },
+ },
+ {
+ title: '审核情况',
+ dataIndex: 'reviewStatus',
+ scopedSlots: {
+ customRender: 'reviewStatus'
+ }, //设置定制化表格数据
+ },
+ {
+ title: '操作',
+ dataIndex: 'operation',
+ scopedSlots: {
+ customRender: 'operation'
+ },
+ },
+ ],
+ data: []
+ }
+ },
+ created() {
+ const t = this
+ t.getData()
+ },
+ methods:{
+ async getData(){
+ const t = this
+ const res = await getReviewRecord(this.search)
+ if(res.data.code == 100){
+ t.data = res.data.data
+ t.pagination.total = res.data.total
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+
+ resetSearch(){
+ const t = this
+ t.search = {
+ pageIndex: 1,
+ pageSize: 10,
+ searchParams:{
+ reviewStatus: null,
+ startTime: '',
+ endTime: ''
+ }
+ }
+ t.timeRange = []
+ t.getData()
+ },
+
+ timeChange(value, dateString) {
+ const t = this
+ if(dateString){
+ t.search.searchParams.startTime = value[0].format('YYYY-MM-DD 00:00:00')
+ t.search.searchParams.endTime = value[1].format('YYYY-MM-DD 23:59:59')
+ }
+ },
+
+ confirmPost(id){
+ const t = this
+ this.$confirm({
+ title: '提示',
+ content: h => <div>是否发布该条信息？</div>,
+ cancelText: '取消',
+ okText: '确认',
+ centered: true,
+ async onOk() {
+ let res = await publishMsg(id)
+ if(res.data.code == 100){
+ t.$message.success('信息发布成功');
+ t.getData()
+ }else{
+ t.$message.warning(res.data.msg);
+ }
+ },
+ onCancel() {
+ console.log('Cancel');
+ },
+ });
+ },
+
+ delData(id){
+ const t = this
+ this.$confirm({
+ title: '提示',
+ content: h => <div>是否删除该条信息？</div>,
+ cancelText: '取消',
+ okText: '确认',
+ centered: true,
+ async onOk() {
+ let res = await deleteMsg(id)
+ if(res.data.code == 100){
+ t.$message.success('信息删除成功');
+ t.getData()
+ }else{
+ t.$message.warning(res.data.msg);
+ }
+ },
+ onCancel() {
+ console.log('Cancel');
+ },
+ });
+ },
+
+ openMod(type,data){
+ const t = this
+ getReviewDetail(data.id).then(res=>{
+ if(res.data.code == 100){
+ t.$refs.msgEdit.openMod(type,res.data.data)
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ })
+ },
+
+ onPageChange(page, pageSize) {
+ const t= this
+ t.pagination.current = page
+ t.search.pageIndex = page
+ t.getData()
+ },
+
+ onOk(value) {
+ console.log('onOk: ', value);
+ },
+ getRiskName(disasterType){
+ return this.riskOptions.find(i => i.value === disasterType)?.name;
+ }
+
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.del{
+ color: @danger;
+}
+</style>
--
Gitblit v1.9.2