Newer
Older
dcms_front / src / views / seo / seo.vue
zhangyingjie on 19 Mar 2021 4 KB 修改表单样式ie兼容问题
<template>
  <app-container>
    <search-div @searchForm="searchForm"/>
    <case-list
      v-loading="listLoading"
      :case-list="caseList"
      :total="total"
      :list-query="listQuery"
      :table-columns="tableColumns"
      show-export
      @changeQuery="changeQuery"
      @exportTalbe="exportTalbe"
      @addDetail="showDetail"/>
  </app-container>
</template>

<script>
import CaseList from '@/components/CaseCommon/caseList'
import CaseDetailRead from '@/components/CaseCommon/caseDetailRead'
import { seoSearch, seoExport } from '@/api/seo/seo'
import SearchDiv from '@/views/seo/components/searchDiv'

export default {
  name: 'Seo',
  components: { SearchDiv, CaseList, CaseDetailRead },
  data() {
    return {
      props: [], // 存储列表页传递的row
      editableTabsValue: 'listTab',
      editableTabs: [], // tab
      caseList: [], // 案卷列表// ,传递给子组件
      tableColumns: [
        {
          text: '案卷编号',
          value: 'caseid'
        },
        {
          text: '上报人员',
          value: 'createUserName'
        },
        {
          text: '发生地点',
          value: 'fieldintro'
        },
        {
          text: '所剩时间',
          value: 'remainingTime'
        },
        {
          text: '信息来源',
          value: 'sourceName'
        },
        {
          text: '案卷类别',
          value: 'eorcName'
        },
        {
          text: '节点名称',
          value: 'caseStateName'
        },
        {
          text: '案卷描述',
          value: 'description'
        },
        {
          text: '业务单位',
          value: 'onedeptName'
        },
        {
          text: '大类',
          value: 'casetypeName'
        },
        {
          text: '小类',
          value: 'casetypeDetailName'
        }],
      listQuery: {
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }, // 筛选条件
      total: 0,
      listLoading: true // 加载动画
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      const listQuery = this.listQuery
      if (listQuery.specialQuery === '') {
        listQuery.specialQuery = 0
      }

      this.listLoading = true
      seoSearch(listQuery).then(res => {
        this.caseList = res.data.rows
        this.total = parseInt(res.data.total)
        this.listLoading = false
      })
    },
    // 来自caselist组件的查询条件(分页)更改后的查询
    changeQuery(listQuery) {
      this.listQuery = listQuery
      this.fetchData()
    },
    // 来自业务查询条件更改后的查询
    searchForm(listQuery) {
      this.listQuery = listQuery

      this.fetchData()
    },
    // 查看详情
    showDetail(tabPane, row) {
      console.log('show detail')
      // this.$router.push({ path: '/caseDetailRead/' + row.id })
      this.$router.push({
        name: 'CaseDetailRead',
        params: {
          id: row.id
        }
      })
    },
    // 业务提交后的刷新
    submitProcess(caseid) {
      this.fetchData()
    },
    // 生成报表
    exportTalbe() {
      // 全屏加载动画
      const loading = this.$loading({
        lock: true,
        text: '数据处理中,请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      seoExport(this.listQuery).then(res => {
        loading.close() // 关闭加载动画
        console.log('download===', res)
        const blob = new Blob([res.data])
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = `案卷列表.xlsx` // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放blob对象
      }).catch((res) => {
        loading.close()
        // this.$message.error(res.message)
      })
    }
  }
}
</script>

<style>

</style>