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/msgReview.vue | 192 +++++++++++++++++++++++++++-------------------- 1 files changed, 110 insertions(+), 82 deletions(-) diff --git a/src/views/Admin/msgReview.vue b/src/views/Admin/msgReview.vue index 51d274e..011ba5d 100644 --- a/src/views/Admin/msgReview.vue +++ b/src/views/Admin/msgReview.vue @@ -2,14 +2,14 @@ <div class="inner"> <a-row type="flex" justify="space-between" style="margin-bottom: 20px"> <a-col :span="8"> - <a-radio-group v-model="category"> - <a-radio-button :value="0"> + <a-radio-group v-model="search.searchParams.reviewStatus" @change="getData"> + <a-radio-button :value="null"> 全部 </a-radio-button> - <a-radio-button :value="1"> + <a-radio-button :value="2"> 审核通过 </a-radio-button> - <a-radio-button :value="2"> + <a-radio-button :value="1"> 未审核 </a-radio-button> <a-radio-button :value="3"> @@ -21,108 +21,123 @@ <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="timeOk" + @ok="onOk" style="width: 100%" /> </a-col> <a-col :span="4"> - <a-button type="primary">查询</a-button> - <a-button style="margin-left: 12px">重置</a-button> + <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> - <template #level="level"> - <a-tag :color="level === '黄色' ? 'yellow' :level === '橙色'? 'orange':level === '红色'?'red':'blue'"> - {{ level }} - </a-tag> + <a-table :columns="columns" :data-source="data" bordered :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 #status="status"> + <template #reviewStatus="reviewStatus"> <a-tag - :color="status === 1 ? 'green' : status === 2 ? 'blue' : 'red'" + :color="reviewStatus === 1 ? 'blue' : reviewStatus === 2 ? 'green' : 'red'" > - {{ status==1?'审核通过':status==2?'未审核':'审核驳回' }} + {{ reviewStatus==1?'未审核':reviewStatus==2?'已审核':reviewStatus==3?'审核驳回':'' }} </a-tag> </template> <template #operation="text, record, index"> - <a-button type="link" v-if="record.status == 1 || record.status == 3">查看信息详情</a-button> - <a-button type="primary" v-if="record.status == 2">查看并审核</a-button> + <a-button type="link" v-if="record.reviewStatus == 2 || record.reviewStatus == 3" @click="openMod('view',record)">查看信息详情</a-button> + <a-button type="primary" v-if="record.reviewStatus == 1" @click="openMod('review',record)">查看并审核</a-button> </template> </a-table> </div> - + <msg-edit-mod ref="msgEdit" @refresh="getData"></msg-edit-mod> </div> </template> <script> +import {getReviewDetail, getReviewRecord} from "@/api/review"; +import msgEditMod from '@/views/Admin/components/msgEditMod' + export default { name: 'msgReview', - components: {}, + components: { msgEditMod }, data () { return { - category: 0, + 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} + ], columns: [ { title: '序号', - dataIndex: 'key', - width: '5%', + key: 'index', + scopedSlots: { + customRender: 'index' + }, }, { title: '提交审核时间', - dataIndex: 'time', - width: '15%', - scopedSlots: { - customRender: 'time' - }, //设置定制化表格数据 + key: 'gmtReviewSubmit', + dataIndex: 'gmtReviewSubmit', }, { title: '发布单位', - dataIndex: 'department', - width: '12%', + key: 'publishingUnit', + dataIndex: 'publishingUnit', }, { - title: '类别', - dataIndex: 'category', - width: '8%', - }, - { - title: '级别', - dataIndex: 'level', + title: '灾种', + dataIndex: 'disasterType', + key: 'disasterType', scopedSlots: { - customRender: 'level' + customRender: 'disasterType' }, //设置定制化表格数据 - width: '8%', }, { title: '信息标题', + key: 'title', dataIndex: 'title', - width: '16%', }, { title: '附件', + key: 'attachment', dataIndex: 'attachment', - width: '6%', scopedSlots: { customRender: 'attachment' }, }, { title: '审核情况', - dataIndex: 'status', - width: '10%', + dataIndex: 'reviewStatus', scopedSlots: { - customRender: 'status' + customRender: 'reviewStatus' }, //设置定制化表格数据 }, { @@ -133,53 +148,66 @@ }, }, ], - data: [ - { - key: 1, - id:1001, - time: '2023-05-02 15:30', - department: '自治区预警中心', - category: '气象', - level: '黄色', - title: '全疆高温红色预警', - attachment: '1', - status: 1 - }, - { - key: 2, - id:1002, - time: '2023-05-02 15:30', - department: '自治区预警中心', - category: '气象', - level: '橙色', - title: '全疆高温红色预警', - attachment: '1', - status: 2 - }, - { - key: 3, - id:1003, - time: '2023-05-02 15:30', - department: '自治区预警中心', - category: '气象', - level: '橙色', - title: '全疆高温红色预警', - attachment: '1', - status: 3 - } - ] + data: [] } }, created() { const t = this + t.getData() }, methods:{ - timeChange(date, dateString) { - console.log(date, dateString); + 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) + } }, - timeOk(value) { - console.log('timeOk: ', value); + + 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') + } + }, + + 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) + } + }) + }, + + onOk(value) { + console.log('onOk: ', value); + }, + getRiskName(disasterType){ + return this.riskOptions.find(i => i.value === disasterType)?.name; + } + } } </script> -- Gitblit v1.9.2