新增页面和配置，对接口

马宇豪

2023-06-14 e2f129ee192ae3469848beeceac262b13ba8eacb

 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>