From 4bced4c45dac14f20953b6f3b0326e535a99729b Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 23 Nov 2023 09:48:03 +0800
Subject: [PATCH] fix:导出修改

---
 src/views/toCarryOutLegislativeReforms/reform/index.vue |  475 +++++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 346 insertions(+), 129 deletions(-)

diff --git a/src/views/toCarryOutLegislativeReforms/reform/index.vue b/src/views/toCarryOutLegislativeReforms/reform/index.vue
index 8d9a4db..cdeb5b5 100644
--- a/src/views/toCarryOutLegislativeReforms/reform/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/reform/index.vue
@@ -1,116 +1,140 @@
 <template>
-  <div class="main">
+  <div v-loading="loading" class="main">
     <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="{
-            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">
+        <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="isNowDonw">
+              ������
+            </el-button>
+          </div>
+        </div>
 
-              <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>
+        <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 v-if="item.isInvalid===1" class="yingzhang">
+                  <div class="seal-red">
+                    ���������
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="position: absolute;top:0;width: 100%;">
+            <el-table size="mini" :data="tableData" border style="width: 100%" :header-cell-style="{
+                color: '#101111',
+                fontSize: '16px'
+              }" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="40" align="center" />
+              <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 v-if="scope.row.isCode==='1'" type="text" 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>
+          </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" />
@@ -130,25 +154,43 @@
         <el-button type="primary" @click="handleInvalid">��� ���</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="������" v-if="dialogEditVisible" :visible.sync="dialogEditVisible" width="800px" top='5vh' :before-close="handleClose" center>
+    <el-dialog v-if="dialogEditVisible" title="������" :visible.sync="dialogEditVisible" width="800px" top="5vh" :before-close="handleClose" center>
       <el-descriptions title="������������">
         <template slot="extra">
           <div>
-            {{ editEscalationUnitData.allocationNum}}
+            {{ editEscalationUnitData.allocationNum }}
           </div>
         </template>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ editEscalationUnitData.escalationTime }}</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ polluteTypeeDITFormatter }}</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ dictObj.changeEnum[editEscalationUnitData.changeType] }}</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ editEscalationUnitData.changeDay || 0}} ���</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ updataEscalationUnitIdFormatter }}</el-descriptions-item>
-        <el-descriptions-item label="���������" label-class-name="itemSpan">{{ editEscalationUnitData.escalationName }}</el-descriptions-item>
-        <el-descriptions-item label="������������" label-class-name="itemSpan">{{ editEscalationUnitData.pollutePosition }}</el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ editEscalationUnitData.escalationTime }}
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ updataUnitIdFormatter }}
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ polluteTypeeDITFormatter }}
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ dictObj.changeEnum[editEscalationUnitData.changeType] }}
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ editEscalationUnitData.changeDay || 0 }} ���
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ updataEscalationUnitIdFormatter }}
+        </el-descriptions-item>
+        <el-descriptions-item label="���������" label-class-name="itemSpan">
+          {{ editEscalationUnitData.escalationName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="������������" label-class-name="itemSpan">
+          {{ editEscalationUnitData.pollutePosition }}
+        </el-descriptions-item>
       </el-descriptions>
-      <el-divider></el-divider>
+      <el-divider />
       <div>
-        <p class="editTile">������������</p>
+        <p class="editTile">
+          ������������
+        </p>
         <el-form :inline="true" class="demo-form-inline">
           <el-form-item label="������������:">
             <el-select v-model="formInEdit.unitId" size="small" clearable placeholder="���������">
@@ -167,9 +209,15 @@
           <div class="block">
             <el-timeline>
               <el-timeline-item v-for="(activity, index) in operatingLog" :key="index" :color="'#0bbd87'" :timestamp="activity.createTime">
-                <div v-if="activity.content"> ���������: {{activity.userName}}</div>
-                <div v-if="activity.content"> ������������: {{activity.content}}</div>
-                <div v-if="activity.polluteType"> ������������: {{activity.polluteType}}</div>
+                <div v-if="activity.content">
+                  ���������: {{ activity.userName }}
+                </div>
+                <div v-if="activity.content">
+                  ������������: {{ activity.content }}
+                </div>
+                <div v-if="activity.polluteType">
+                  ������������: {{ activity.polluteType }}
+                </div>
               </el-timeline-item>
             </el-timeline>
           </div>
@@ -185,6 +233,10 @@
 </template>
 
 <script>
+// import { mixins } from './downLoadNotice'
+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'
@@ -194,8 +246,11 @@
     newWorkOrder,
     workOrderInformation
   },
+  // mixins: [mixins],
   data() {
     return {
+      loading: false,
+      selectionRows: [],
       errorClass: 'errorClass',
       searchType: 'reform',
       pagination: {
@@ -236,7 +291,8 @@
         polluteType: '',
         unitId: ''
       },
-      operatingLog: []
+      operatingLog: [],
+      sealList: []
     }
   },
   computed: {
@@ -263,11 +319,118 @@
     }
   },
   created() {
-    this.handleSearch()
+    this.handleSearch({ isInvalid: 0, state: [9, 20, 30] })
     this.getUnitList()
     this.getContaminateList()
   },
   methods: {
+    handleSelectionChange(rows) {
+      console.log(rows)
+      this.selectionRows = rows
+    },
+    isNowDonw() {
+      this.$confirm('������������������������������?', '������', {
+        confirmButtonText: '������������',
+        cancelButtonText: '������������',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          this.exportData()
+        })
+        .catch(() => {
+          this.loading = false
+          this.exportData()
+        })
+    },
+    exportData() {
+      // this.dowOrgFile('���������������.xlsx')
+      let that = this
+      const CancelToken = axios.CancelToken
+      let cancel
+      let timer
+      const totalSize = this.selectionRows.length * 1024 * 1024
+      const uniSign = new Date().getTime() + '' // ���������������������������������������������������������������������������������������������
+      if (this.loading) {
+        timer = setTimeout(() => {
+          cancel()
+          this.loading = false
+          this.$message.error('���������������������������������������������')
+        }, 300000)
+      }
+
+      // 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
+        }),
+        onDownloadProgress(progress) {
+          const loaded = progress.loaded
+          // progress������������loaded������������������������������total������������������������������������������
+          let downProgress = Math.round((loaded / totalSize) * 100)
+          console.log('downProgress', downProgress)
+          // ������������������������������������������������������������vuex������������
+          if (!that.loading) {
+            that.$store.commit('downLoadProgress/SET_PROGRESS', {
+              path: uniSign,
+              progress: downProgress
+            })
+          }
+        },
+        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 {
+            if (!that.loading) {
+              that.$store.commit('downLoadProgress/SET_PROGRESS', {
+                path: uniSign,
+                progress: 100
+              })
+            }
+            this.getOutExcel('���������������.xlsx', res)
+          }
+        })
+        .catch(err => {
+          clearTimeout(timer)
+          this.loading = false
+        })
+    },
+    getOutExcel(fileName, res) {
+      const blob = new Blob([res], { type: 'application/x-xls' })
+      if (window.navigator.msSaveOrOpenBlob) {
+        // ������ IE & EDGE
+        this.loading = false
+        navigator.msSaveBlob(blob, fileName)
+      } else {
+        const 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.$message.success('���������������')
+        this.loading = false
+      }
+    },
     openEditDialog(row) {
       this.editEscalationUnitData = row
       this.dialogEditVisible = true
@@ -282,7 +445,7 @@
           this.operatingLog = res.data
         })
         .catch(err => {
-          this.$message.error(res.message)
+          this.$message.error(err.message)
           console.log('������Region������')
           console.log(err)
         })
@@ -326,7 +489,7 @@
           }
         })
         .catch(err => {
-          this.$message.error(res.message)
+          this.$message.error(err.message)
           console.log('������Region������')
           console.log(err)
         })
@@ -454,6 +617,7 @@
       })
     },
     handleSearchBut(obj) {
+      const pageSize = this.pagination.pageSize
       this.pagination = {
         currentPage: 1,
         // ������������������������������������������(���������������������������)
@@ -461,12 +625,12 @@
         // ������������������������������
         pageSizes: [10, 30, 60, 100],
         // ������������������������������������������
-        pageSize: 10
+        pageSize: pageSize
       }
       this.handleSearch(obj)
     },
     handleSearch(obj) {
-      this.searchData.isInvalid = 0
+      this.selectionRows = []
       if (obj) {
         this.searchData = obj
       }
@@ -480,7 +644,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(() => {
+            const rows = this.$el.querySelectorAll('table tr')
+            for (let i = 0; i < rows.length; i++) {
+              const row = rows[i]
+              const height = row.getBoundingClientRect().height
+              this.sealList[i]['styleHeight'] = height + 'px'
+            }
+            this.$forceUpdate()
+          })
         } else {
           this.$message.error(res.message)
         }
@@ -532,7 +710,7 @@
           }
         } else if (type === 'detail') {
           this.dialogData = {
-            title: '���������',
+            title: '���������������',
             parentFormData: res.data,
             pageType: 'detail'
           }
@@ -559,6 +737,7 @@
   overflow: overlay;
 }
 .tab {
+  min-height: 160px;
   margin-top: 0px;
   /deep/ .el-tag {
     font-size: 16px;
@@ -597,4 +776,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>

--
Gitblit v1.8.0