修改

马宇豪

2024-06-12 d8abc6de028170e7fc03059fe1e753ab389bae97

 src/views/Admin/components/callListMod.vue

@@ -6,10 +6,15 @@
      width="50%"
      cancelText="取消"
      @cancel="handleCancel"
      @ok="handleCancel"
  >
    <a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
    <a-table :columns="columns" :data-source="data" bordered :pagination="pagination" :rowKey="record=>record.id">
      <template #index="text,record,index">
        {{ index + 1 }}
      </template>
      <template #receiveUnit="name,record">
        <span v-if="unitType == 3">{{ name }}</span>
        <span v-else style="cursor: pointer;color: #1890ff" @click="digData(record.forwardWarnInfoId,record.unittype)">{{ name }}</span>
      </template>
      <template #warningLevel="text">
        <a-tag :color="text === 3 ? 'yellow' :text === 2? 'orange':text === 1?'red':'blue'">
@@ -28,17 +33,60 @@
          {{text == 1 ? '待叫应' : text == 2 ?'已叫应':text == 3 ?'超时未叫应' : ''}}
        </a-tag>
      </template>
      <template #forwardRate="text,record">
          {{record.forwardStatus == 1?text: '--'}}
      </template>
      <template #operation="text, record, index">
        <a-button type="primary" @click="viewDetail(record.id)">查看详情</a-button>
      </template>
    </a-table>
    <call-list-mod ref="callList"></call-list-mod>
    <a-modal
        title="响应举措"
        centered
        :visible="detailVisible"
        width="50%"
        cancelText="取消"
        @cancel="detailCancel"
        @ok="detailCancel"
    >
      <div class="detail-mod">
        <a-row :gutter="24" v-if="details.title"><a-col :span="4">标题</a-col><a-col class="noBorder" :span="14" style="font-size: 24px;font-weight: bolder">{{details.title}}</a-col></a-row>
        <a-row :gutter="24" v-if="details.publishingUnit"><a-col :span="4">发布单位</a-col><a-col :span="14">{{details.publishingUnit}}</a-col></a-row>
        <a-row :gutter="24" v-if="details.publishingTime"><a-col :span="4">发布时间</a-col><a-col :span="14">{{details.publishingTime}}</a-col></a-row>
        <a-row :gutter="24" v-if="details.baseMeasures && details.baseMeasures.length > 0"><a-col :span="4">基础措施</a-col>
          <a-col :span="14" class="noBorder">
            <div v-for="(item,index) in details.baseMeasures" :key="index">
              {{index+1}}、{{item}}
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="details.responseMeasure"><a-col :span="4">响应反馈</a-col><a-col :span="14">{{details.responseMeasure}}</a-col></a-row>
        <a-row :gutter="24" v-if="details.attachments && details.attachments.length > 0"><a-col :span="4">附件内容</a-col>
          <a-col :span="14" class="noBorder">
            <a-button @click="viewFile(item)" type="link" v-for="(item,index) in details.attachments" :key="index"><a-icon type="paper-clip"/>{{item.attachmentName}}</a-button>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import {getResponseById} from "@/api/list";
import callListMod from "@/views/Admin/components/callListMod";
import msgDetailMod from "@/views/Admin/components/msgDetailMod";
import {responseMeasure} from "@/api/new";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: 'callListMod',
  name: 'call-list-mod',
  components: { callListMod },
  data () {
    return {
      visible: false,
      detailVisible: false,
      unitType: null,
      search:{
        pageIndex: 1,
        pageSize: 10,
@@ -47,6 +95,7 @@
        }
      },
      data: [],
      details: {},
      pagination: {
        current: 1,
        defaultCurrent: 1,
@@ -59,7 +108,6 @@
          {
        title: '序号',
        dataIndex: 'index',
        width: '8%',
        scopedSlots: {
          customRender: 'index'
        }
@@ -67,17 +115,15 @@
        {
          title: '接收人单位',
          dataIndex: 'receiveUnit',
          width: '20%'
          scopedSlots: { customRender: 'receiveUnit' }
        },
        {
          title: '接收人',
          dataIndex: 'recipienterName',
          width: '20%'
        },
        {
          title: '级别',
          dataIndex: 'unittype',
          width: '12%',
          scopedSlots: {
            customRender: 'unittype'
          },
@@ -85,10 +131,23 @@
        {
          title: '叫应状态',
          dataIndex: 'responseStatus',
          width: '15%',
          scopedSlots: {
            customRender: 'responseStatus'
          } //设置定制化表格数据
          }
        },
        {
          title: '转发叫应率',
          dataIndex: 'forwardRate',
          scopedSlots: {
            customRender: 'forwardRate'
          }
        },
        {
          title: '响应措施',
          dataIndex: 'operation',
          scopedSlots: {
            customRender: 'operation'
          },
        }
      ]
    }
@@ -97,11 +156,17 @@
    const t = this
  },
  methods:{
    openMod(id){
    openMod(id,type){
      const t = this
      t.visible = true
      t.unitType = type
      t.search.searchParams.warnInfoId = id
      t.getData()
      if(type == 3){
        t.columns = t.columns.filter(i=>i.dataIndex !== 'forwardRate')
      }else{
        t.columns = t.columns.filter(i=>i.dataIndex !== 'operation')
      }
    },
    async getData(){
      const t = this
@@ -111,6 +176,30 @@
        t.pagination.total = res.data.total
      }else{
        this.$message.error(res.data.msg)
      }
    },

    async viewDetail(id){
      const t = this
      const res = await responseMeasure({id:id})
      if(res.data.code == 100){
        const data = res.data.data
        if(!data.baseMeasures || data.baseMeasures.length == 0){
          t.$message.error('该记录暂无响应措施')
        }else{
          t.details = data
          t.detailVisible = true
        }
      }else{
        this.$message.error(res.data.msg)
      }
    },

    digData(id,type){
      if(id){
        this.$refs.callList.openMod(id,type)
      }else{
        this.$message.error('暂无下级叫应数据')
      }
    },

@@ -125,13 +214,75 @@
      const t = this
      t.visible = false;
    },
    detailCancel(e){
      this.detailVisible = false
    },
    onChange(value) {
      console.log(value);
    }
    },
    viewFile(item){
      const t = this
      const { baseUrl } = require('../../../../config/env.' + process.env.NODE_ENV)
      axios.get(baseUrl + item.attachment,{headers:{'Content-Type': 'application/json','tk': `${Cookies.get('resTk')}`,'uid':`${Cookies.get('resUid')}`},responseType: 'blob'}).then(res=>{
        if (res) {
          const link = document.createElement('a')
          let blob = new Blob([res.data],{type: res.data.type})
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          window.open(link.href)
          // link.setAttribute("download", item.attachementName);
          // document.body.appendChild(link);
          // link.click();
          // document.body.removeChild(link);
        } else {
          this.$message.error('获取文件失败')
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.detail-mod{
  font-size: 16px;

  .ant-row{
    margin-bottom: 24px;
    display: flex;
    align-items: center;

    &:first-of-type{
      margin-bottom: 12px;
    }

    .ant-col{
      &:first-of-type{
        text-align: right;
      }

      &:last-of-type{
        border: 1px solid #d9d9d9;
        padding: 5px 10px;
      }
    }

    .noBorder{
      border: none !important;
      padding: 5px 10px;
    }

    .table{
      display: flex;
      align-items: center;
      border-bottom: 1px solid @blackBorder;
      &:last-of-type{
        border-bottom: none;
      }
      &>div{
        padding: 5px 10px;
      }
    }
  }
}
</style>