Merge branch 'feature_1.0'

quanyawei

2023-11-16 618dec29866fdae7d602fc1c14c881d7295a6f1e

 src/views/toCarryOutLegislativeReforms/reform/index.vue

@@ -1,116 +1,140 @@
<template>
  <div class="main">
  <div class="main" v-loading="loading">
    <div>
      <searchBar v-if="searchType" :search-type="'reform'" @handleSearch="handleSearchBut" @handleAdd="handleOpenDialog(null, 'add')" />
      <newWorkOrder v-if="centerDialogVisible" ref="newWorkOrder" :parent-form-data="parentFormData" :title="title" :page-state="pageState" :visible.sync="centerDialogVisible" @handleSubmit="newHandleSubmit" />
      <!-- <el-divider></el-divider> -->
      <div class="tab">
        <el-table size="mini" :data="tableData" border max-height="680" style="width: 100%" :header-cell-style="{
        <div class="exportBox">
          <div>查询列表</div>
          <div>
            <el-button type="primary" size="mini" @click="handleOpenDialog(null, 'add')">新建</el-button>
            <el-button :disabled="!(selectionRows.length>0)" type="info" size="mini" @click="exportData">导出</el-button>
          </div>
        </div>

        <div style="position: relative;">
          <div>
            <div v-if="sealList.length>0">
              <div v-for="(item,index) in sealList" :key="index" :style="{'height':item.styleHeight}">
                <div class="yingzhang" v-if="item.isInvalid===1">
                  <div class="seal-red"> 已作废 </div>
                </div>
              </div>
            </div>
          </div>
          <div style="position: absolute;top:0;width: 100%;">
            <el-table size="mini" :data="tableData" border max-height="680" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{
            color: '#101111',
            fontSize: '16px'
          }">
          <el-table-column type="index" label="序号" width="60px" align="center" />
          <el-table-column align="center">
            <template slot="header">
              <div>单号</div>
              <div>上报时间</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.allocationNum }}</div>
              <div>{{ scope.row.escalationTime }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="unitId" label="责任主体" :formatter="unitIdFormatter" />
          <el-table-column align="center" prop="polluteType" label="污染分类" width="120px" :formatter="polluteTypeFormatter" />
          <el-table-column align="center">
            <template slot="header">
              <div>整改方式</div>
              <div>剩余天数</div>
            </template>
            <template slot-scope="scope">
              <div>{{ dictObj.changeEnum[scope.row.changeType] }}</div>
              <div v-show="scope.row.changeType && scope.row.changeType === 2" :class="[Number(scope.row.residueDay) < 0 ? errorClass : '']">
                <span v-if="Number(scope.row.residueDay) < 0">
                  延期 {{ Math.abs(scope.row.residueDay) }}天
                </span>
                <span v-else> {{ scope.row.residueDay }}天 </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="investigationType" label="排查方式" width="100px" :formatter="investigationTypeFormatter" />
          <el-table-column align="center" prop="state" width="100px" label="流程状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === 40" type="success">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state === 50" type="danger">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state === 9" type="info">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state === 20" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state === 10" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state === 30" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isInvalid" label="是否作废" width="60px" :formatter="isInvalidFormatter" />
          <el-table-column align="center">
            <template slot="header">
              <div>上报单位</div>
              <div>上报人</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.escalationName }}</div>
              <div>{{ updatUnitIdFormatter(scope.row) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header">
              <div>操作人</div>
              <div>操作时间</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.updateName }}</div>
              <div>{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" width="100px" label="操作">
            <template slot-scope="scope">
              <el-table-column type="selection" width="40" align="center">
              </el-table-column>
              <el-table-column type="index" label="序号" width="60px" align="center" />
              <el-table-column align="center">
                <template slot="header">
                  <div>单号</div>
                  <div>上报时间</div>
                </template>
                <template slot-scope="scope">
                  <div>{{ scope.row.allocationNum }}</div>
                  <div>{{ scope.row.escalationTime }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="unitId" label="责任主体" width="150px" :formatter="unitIdFormatter" />
              <el-table-column align="center" prop="polluteType" label="污染分类" width="120px" :formatter="polluteTypeFormatter" />
              <el-table-column align="center">
                <template slot="header">
                  <div>整改方式</div>
                  <div>剩余天数</div>
                </template>
                <template slot-scope="scope">
                  <div>{{ dictObj.changeEnum[scope.row.changeType] }}</div>
                  <div v-show="scope.row.changeType && scope.row.changeType === 2" :class="[Number(scope.row.residueDay) < 0 ? errorClass : '']">
                    <span v-if="Number(scope.row.residueDay) < 0">
                      延期 {{ Math.abs(scope.row.residueDay) }}天
                    </span>
                    <span v-else> {{ scope.row.residueDay }}天 </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="investigationType" label="排查方式" width="100px" :formatter="investigationTypeFormatter" />
              <el-table-column align="center" prop="state" width="100px" label="流程状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state === 40" type="success">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 50" type="danger">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 9" type="info">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 20" type="warning">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 10" type="warning">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 30" type="warning">
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="isInvalid" label="是否作废" width="60px" :formatter="isInvalidFormatter" /> -->
              <el-table-column align="center" width="150px">
                <template slot="header">
                  <div>上报单位</div>
                  <div>上报人</div>
                </template>
                <template slot-scope="scope">
                  <div>{{ scope.row.escalationName }}</div>
                  <div>{{ updatUnitIdFormatter(scope.row) }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header">
                  <div>操作人</div>
                  <div>操作时间</div>
                </template>
                <template slot-scope="scope">
                  <div>{{ scope.row.updateName }}</div>
                  <div>{{ scope.row.updateTime }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="createTime" min-width="100px" label="操作">
                <template slot-scope="scope">

              <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'detail')">
                详情
              </el-button>
              <el-button type="text" v-if="scope.row.isCode==='1'" size="medium" @click="openEditDialog(scope.row)">
                修改单位
              </el-button>
              <el-button v-if="scope.row.state === 9" type="text" size="medium" @click="handleOpenDialog(scope.row, 'edit')">
                编辑
              </el-button>
              <el-button v-if="scope.row.state > 30 && scope.row.isInvalid === 0" type="text" size="medium" @click="handleCancel(scope.row)">
                作废
              </el-button>
              <el-button v-if="scope.row.state === 20" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'work')">
                整改
              </el-button>
              <el-button v-if="scope.row.state === 30 && scope.row.isApprove === 1" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'approve')">
                审批
              </el-button>
              <el-button v-if="
                  <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'detail')">
                    详情
                  </el-button>
                  <el-button type="text" v-if="scope.row.isCode==='1'" size="medium" @click="openEditDialog(scope.row)">
                    修改单位
                  </el-button>
                  <el-button v-if="scope.row.state === 9" type="text" size="medium" @click="handleOpenDialog(scope.row, 'edit')">
                    编辑
                  </el-button>
                  <el-button v-if="scope.row.state > 30 && scope.row.isInvalid === 0" type="text" size="medium" @click="handleCancel(scope.row)">
                    作废
                  </el-button>
                  <el-button v-if="scope.row.state === 20" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'work')">
                    整改
                  </el-button>
                  <el-button v-if="scope.row.state === 30 && scope.row.isApprove === 1" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'approve')">
                    审批
                  </el-button>
                  <el-button v-if="
                  scope.row.state === 20 &&
                  scope.row.changeType === 2 &&
                  scope.row.applyState === 0
                " type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'delay')">
                延期申请
              </el-button>
            </template>
          </el-table-column>
        </el-table>
                    延期申请
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="pagina">
        <el-pagination background :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" :total="pagination.totalCount" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
@@ -185,6 +209,9 @@
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
import qs from 'qs'
import searchBar from '@/views/toCarryOutLegislativeReforms/components/queryForm'
import newWorkOrder from '@/views/toCarryOutLegislativeReforms/components/newWorkOrder'
import workOrderInformation from '@/views/toCarryOutLegislativeReforms/components/workOrderInformation'
@@ -196,6 +223,8 @@
  },
  data() {
    return {
      loading: false,
      selectionRows: [],
      errorClass: 'errorClass',
      searchType: 'reform',
      pagination: {
@@ -236,7 +265,8 @@
        polluteType: '',
        unitId: ''
      },
      operatingLog: []
      operatingLog: [],
      sealList: []
    }
  },
  computed: {
@@ -263,11 +293,75 @@
    }
  },
  created() {
    this.handleSearch()
    this.handleSearch({ isInvalid: 0, state: [9, 20, 30] })
    this.getUnitList()
    this.getContaminateList()
  },
  methods: {
    handleSelectionChange(rows) {
      console.log(rows)
      this.selectionRows = rows
    },
    exportData() {
      const CancelToken = axios.CancelToken
      let cancel
      let timer = setTimeout(() => {
        cancel()
        this.loading = false
        this.$message.error('当前下载数据过多，请分批下载！')
      }, 30000)
      this.loading = true
      this.$request({
        url: '/allocation/listExcel',
        method: 'get',
        responseType: 'blob',
        params: {
          id: this.selectionRows.map(item => item.allocationId)
        },
        cancelToken: new CancelToken(function executor(c) {
          cancel = c
        }),
        paramsSerializer: params => {
          return qs.stringify(params, {
            indices: false
          })
        }
      })
        .then(res => {
          clearTimeout(timer)
          console.log('导出成功', res)
          if (res.code === -1) {
            this.$message.error(res.message)
          } else {
            this.getOutExcel('交办单导出.xlsx', res)
          }
        })
        .catch(err => {
          clearTimeout(timer)
          this.loading = false
        })
    },
    getOutExcel(fileName, res) {
      let blob = new Blob([res], { type: 'application/x-xls' })
      if (window.navigator.msSaveOrOpenBlob) {
        //兼容 IE & EDGE
        this.loading = false
        navigator.msSaveBlob(blob, fileName)
      } else {
        var link = document.createElement('a')
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        link.href = url.createObjectURL(blob)
        //命名下载名称
        link.download = fileName
        //点击触发下载
        link.click()
        //下载完成进行释放
        url.revokeObjectURL(link.href)
        this.loading = false
      }
    },
    openEditDialog(row) {
      this.editEscalationUnitData = row
      this.dialogEditVisible = true
@@ -466,7 +560,7 @@
      this.handleSearch(obj)
    },
    handleSearch(obj) {
      this.searchData.isInvalid = 0
      this.selectionRows = []
      if (obj) {
        this.searchData = obj
      }
@@ -480,7 +574,21 @@
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.sealList = _.cloneDeep(res.data.list) || []
          this.sealList.unshift({ isInvalid: 0 })
          this.sealList.forEach(item => {
            item.styleHeight = null
          })
          this.pagination.totalCount = res.data.page.totalNum
          this.$nextTick(() => {
            var rows = this.$el.querySelectorAll('table tr')
            for (var i = 0; i < rows.length; i++) {
              var row = rows[i]
              var height = row.getBoundingClientRect().height
              this.sealList[i]['styleHeight'] = height + 'px'
            }
            this.$forceUpdate()
          })
        } else {
          this.$message.error(res.message)
        }
@@ -532,7 +640,7 @@
          }
        } else if (type === 'detail') {
          this.dialogData = {
            title: '交办单',
            title: '交办单详情',
            parentFormData: res.data,
            pageType: 'detail'
          }
@@ -559,6 +667,7 @@
  overflow: overlay;
}
.tab {
  min-height: 160px;
  margin-top: 0px;
  /deep/ .el-tag {
    font-size: 16px;
@@ -597,4 +706,42 @@
  font-size: 16px;
  font-weight: 700;
}
.exportBox {
  font-weight: 700;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.yingzhang {
  position: relative;

  .seal-red {
    position: absolute;
    left: 85px;
    top: 18px;
    z-index: 999;
    // top: -85px;
    display: inline-block;
    border: solid 2px #e93e00;
    border-radius: 0.2em;
    color: #e24c06;
    font-size: 19px;
    line-height: 1;
    opacity: 0;
    padding: 0.1em 0.5em;
    text-transform: uppercase;
    opacity: 0;
    transform: rotate(-2deg) scale(5);
    animation: seal 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;
  }

  @keyframes seal {
    100% {
      opacity: 0.75;
      transform: rotate(-15deg) scale(1);
    }
  }
}
</style>