修改出来ie浏览器无法下载、下载文件损坏、修复el-table无限拉长

package.json

@@ -32,7 +32,6 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "image-webpack-loader": "^7.0.1",
     "prettier": "^2.3.2",
     "svg-loader": "0.0.2",
     "svg-sprite-loader": "^6.0.9",

src/assets/styles/element.less

@@ -19,7 +19,7 @@
 
 .el-pagination {
   text-align: right;
-  padding: 20px;
+  padding: 20px 20px 10px 20px;
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled).active {

src/layout/components/AppMain.vue

@@ -56,15 +56,16 @@ export default {
 
 <style lang="less" type="text/scss" scoped>
 #appMain-box {
-  margin: 28px 16px 35px 23px;
-  padding: 20px;
+  margin: 20px 16px 20px 23px;
+  padding: 10px 20px;
   background: #fff;
 }
 #app-main-id {
-  max-height: calc(100vh - 70px);
+  max-height: calc(100vh - 40px);
 }
 .app-main {
   width: 100%;
+  height: 100%;
   position: relative;
   overflow-y: auto;
   flex: 1;

src/layout/index.vue

@@ -4,7 +4,7 @@
       <el-aside v-if="showComponents" width="200px">
         <Sidebar />
       </el-aside>
-      <el-container style="display: block">
+      <el-container style="display: block;width:100%">
         <Navbar v-if="showComponents" />
         <app-main />
       </el-container>

src/pages/classification/index.vue

@@ -54,48 +54,63 @@
         >
       </div>
     </div>
-    <el-table
-      ref="editTable"
-      :data="tableData"
-      style="width: 100%"
-      stripe
-      :header-cell-style="{ background: '#F7F7F7' }"
-      :height="screenHeight"
-    >
-      <el-table-column
-        v-for="(item, index) in listData"
-        :key="index"
-        :label="item.name"
-        :prop="item.value"
-        :width="item.width"
-        :min-width="item.minWidth"
-        :align="item.align"
+    <div>
+      <el-table
+        ref="editTable"
+        :data="tableData"
+        stripe
+        :header-cell-style="{ background: '#F7F7F7' }"
+        :height="screenHeight"
       >
-        <template slot-scope="scope">
-          <div>
-            <div v-if="item.value == 'status'">
-              <el-switch
-                v-model="scope.row[scope.column.property]"
-                active-color="#17A8FF"
-                inactive-color="#AFAFAF"
-                @change="switchChange($event, scope.row)"
-              >
-              </el-switch>
-            </div>
-            <div v-else>
-              {{ scope.row[scope.column.property] }}
+        <el-table-column
+          label="分类名称"
+          prop="name"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="链接地址"
+          prop="linkUrl"
+          align="center"
+          min-width="180"
+        ></el-table-column>
+        <el-table-column
+          label="禁用/启用"
+          prop="status"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <div>
+                <el-switch
+                  v-model="scope.row.status"
+                  active-color="#17A8FF"
+                  inactive-color="#AFAFAF"
+                  @change="switchChange($event, scope.row)"
+                >
+                </el-switch>
+            </div> </template
+        ></el-table-column>
+        <el-table-column
+          label="创建人"
+          prop="createUserName"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createTime"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column label="操作" width="140px" align="center">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <div>
-            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -134,52 +149,15 @@ export default {
         { label: '启用', value: 1 },
         { label: '禁用', value: 0 }
       ],
-      listData: [
-        {
-          name: '分类名称',
-          value: 'name',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '链接地址',
-          value: 'linkUrl',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '禁用/启用',
-          value: 'status',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '创建人',
-          value: 'createUserName',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '创建时间',
-          value: 'createTime',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        }
-      ],
-      screenHeight: document.body.clientHeight - 370,
+      screenHeight: document.body.clientHeight - 320,
       tableDataheight: 0
     }
   },
   mounted() {
-    this.screenHeight = document.body.clientHeight - 370
+    this.screenHeight = document.body.clientHeight - 320
     window.onresize = () => {
       return (() => {
-        this.screenHeight = document.body.clientHeight - 370
+        this.screenHeight = document.body.clientHeight - 320
       })()
     }
     this.tableDataList()
@@ -312,7 +290,7 @@ export default {
       margin-bottom: 10px;
     }
 
-    margin-bottom: 32px;
+    margin-bottom: 20px;
     .el-form-item {
       margin-bottom: 10px;
       margin-right: 60px;

src/pages/fileManagement/detail.vue

@@ -7,6 +7,7 @@
     :close-on-press-escape="false"
     :close-on-click-modal="false"
     :append-to-body="true"
+    v-loading.fullscreen.lock="fullscreenLoading"
   >
     <template>
       <el-table
@@ -24,14 +25,6 @@
         >
         </el-table-column>
         <el-table-column
-          prop="docUrl"
-          align="center"
-          show-overflow-tooltip
-          label="链接地址"
-          width="180"
-        >
-        </el-table-column>
-        <el-table-column
           prop="createUser"
           align="center"
           show-overflow-tooltip
@@ -59,11 +52,13 @@
 </template>
 <script>
 import * as api from '@/api/api'
+import axios from 'axios'
 export default {
   data() {
     return {
       dialogVisible: false,
-      tableData: []
+      tableData: [],
+      fullscreenLoading: false
     }
   },
   methods: {
@@ -91,39 +86,29 @@ export default {
      * @method 下载
      * **/
     download(val) {
-      // let code = val.docUrl.split('http://221.224.53.27:80')
-      // code = 'http://172.16.100.40:8083' + code[1]
-      fetch(val.docUrl, {
-        method: 'get',
-        responseType: 'arraybuffer'
-      })
-        .then(function (res) {
-          if (res.status !== 200) {
-            return res.json()
+      this.fullscreenLoading = true
+      axios.get(val.docUrl, { responseType: 'blob' }).then(res => {
+        //  如果支持微软的文件下载方式(ie10+浏览器)
+        if (window.navigator.msSaveBlob) {
+          try {
+            const blobObject = new Blob([res.data])
+            window.navigator.msSaveBlob(blobObject, `${val.name}.pdf`)
+          } catch (e) {
+            console.log(e)
           }
-          return res.arrayBuffer()
-        })
-        .then(blobRes => {
-          // 生成 Blob 对象，设置 type 等信息
-          const e = new Blob([blobRes], {
-            type: 'application/octet-stream',
-            'Content-Disposition': 'attachment'
-          })
-          // 将 Blob 对象转为 url
-          let formName = val.name + '.pdf'
-          const link = window.URL.createObjectURL(e)
-          this.handleFileDownload(link, formName)
-        })
-        .catch(err => {
-          console.error(err)
-        })
-    },
-    handleFileDownload(url, filename) {
-      // 创建 a 标签
-      let a = document.createElement('a')
-      a.href = url
-      a.download = filename
-      a.click()
+        } else {
+          //  其他浏览器
+          const url = window.URL.createObjectURL(new Blob([res.data]))
+          const link = document.createElement('a')
+          link.href = url
+          link.setAttribute('download', `${val.name}.pdf`)
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link) // 下载完成移除元素
+          window.URL.revokeObjectURL(url) // 释放掉blob对象
+        }
+        this.fullscreenLoading = false
+      })
     }
   }
 }

src/pages/fileManagement/index.vue

@@ -77,52 +77,74 @@
         >
       </div>
     </div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      stripe
-      :header-cell-style="{ background: '#F7F7F7' }"
-      :height="screenHeight"
-      ref="editTable"
-    >
-      <el-table-column
-        v-for="(item, index) in listData"
-        :key="index"
-        :label="item.name"
-        :prop="item.value"
-        :width="item.width"
-        :min-width="item.minWidth"
-        :align="item.align"
+    <div>
+      <el-table
+        :data="tableData"
+        stripe
+        ref="editTable"
+        :header-cell-style="{ background: '#F7F7F7' }"
+        :height="screenHeight"
       >
-        <template slot-scope="scope">
-          <div>
-            <div v-if="item.value == 'status'">
-              <el-switch
-                v-model="scope.row.status"
-                active-color="#17A8FF"
-                inactive-color="#AFAFAF"
-                @change="statusChange($event, scope.row)"
+        <el-table-column
+          label="分类名称"
+          prop="typeName"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="文件名称"
+          prop="name"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="链接地址"
+          prop="linkUrl"
+          align="center"
+          min-width="180"
+        ></el-table-column>
+        <el-table-column
+          label="禁用/启用"
+          prop="status"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <div>
+              <div>
+                <el-switch
+                  v-model="scope.row.status"
+                  active-color="#17A8FF"
+                  inactive-color="#AFAFAF"
+                  @change="statusChange($event, scope.row)"
+                >
+                </el-switch>
+              </div>
+            </div> </template
+        ></el-table-column>
+        <el-table-column
+          label="创建人"
+          prop="createUser"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createTime"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column label="操作" width="140px" align="center">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text" @click="history(scope.row)"
+                >历史版本</el-button
               >
-              </el-switch>
+              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
             </div>
-            <div v-else>
-              {{ scope.row[scope.column.property] }}
-            </div>
-          </div>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <div>
-            <el-button type="text" @click="history(scope.row)"
-              >历史版本</el-button
-            >
-            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -156,50 +178,6 @@ export default {
         { label: '启用', value: 1 },
         { label: '禁用', value: 0 }
       ],
-      listData: [
-        {
-          name: '分类名称',
-          value: 'typeName',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '文件名称',
-          value: 'name',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '链接地址',
-          value: 'linkUrl',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '禁用/启用',
-          value: 'status',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '创建人',
-          value: 'createUser',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '创建时间',
-          value: 'createTime',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        }
-      ],
       form: {
         pageNum: 1,
         pageSize: 10,
@@ -210,17 +188,17 @@ export default {
         typeId: ''
       },
       classifyList: [],
-      screenHeight:document.body.clientHeight-370,
+      screenHeight: document.body.clientHeight - 320,
       tableDataheight: 0
     }
   },
   mounted() {
-    this.screenHeight = document.body.clientHeight-370;
-      window.onresize = () => {
-        return (() => {
-          this.screenHeight = document.body.clientHeight-370;
-        })();
-      };
+    this.screenHeight = document.body.clientHeight - 320
+    window.onresize = () => {
+      return (() => {
+        this.screenHeight = document.body.clientHeight - 320
+      })()
+    }
     this.listDataInit()
   },
   methods: {
@@ -365,16 +343,16 @@ export default {
 <style lang="less">
 .fileManagement_List {
   .fileManagement_List_headerSelect {
-    .fileManagement-list-btn{
+    .fileManagement-list-btn {
       display: flex;
       justify-content: space-between;
-      align-items:center;
+      align-items: center;
       margin-bottom: 10px;
-      .el-input__suffix{
+      .el-input__suffix {
         height: 32px;
       }
     }
-    margin-bottom: 32px;
+    margin-bottom: 20px;
     .el-form-item {
       margin-bottom: 10px;
       margin-right: 60px;

src/pages/userManagement/detail.vue

@@ -76,10 +76,13 @@ export default {
       this.type == 'password' ? (this.type = 'text') : (this.type = 'password')
     },
     focus() {
-      this.type = 'password'
+      this.number.password==''? this.type='password':''
+      if(this.number.password!==''&&this.type=='text'){
+        this.type = 'text'
+      }
     },
     handleClose() {
-      this.type = 'password'
+      this.type = 'text'
       this.dialogVisible = false
       this.$parent.search()
       this.$refs['number'].resetFields()

src/pages/userManagement/index.vue

@@ -46,54 +46,61 @@
         >
       </div>
     </div>
-    <el-table
-      :data="tableData"
-      ref="editTable"
-      style="width: 100%"
-      stripe
-      :header-cell-style="{ background: '#F7F7F7' }"
-      :height="screenHeight"
-    >
-      <el-table-column
-        v-for="(item, index) in listData"
-        :key="index"
-        :label="item.name"
-        :prop="item.value"
-        :width="item.width"
-        :min-width="item.minWidth"
-        :align="item.align"
+    <div>
+      <el-table
+        :data="tableData"
+        ref="editTable"
+        stripe
+        :header-cell-style="{ background: '#F7F7F7' }"
+        :height="screenHeight"
       >
-        <template slot-scope="scope">
-          <div>
-            <div v-if="item.value == 'status'">
-              <el-switch
-                v-model="scope.row[scope.column.property]"
-                active-color="#17A8FF"
-                inactive-color="#AFAFAF"
-                @change="statusChange($event, scope.row)"
+        <el-table-column
+          label="账号"
+          prop="account"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          label="姓名"
+          prop="name"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column label="禁用/启用" prop="status" align="center">
+          <template slot-scope="scope">
+            <div>
+              <div>
+                <el-switch
+                  v-model="scope.row.status"
+                  active-color="#17A8FF"
+                  inactive-color="#AFAFAF"
+                  @change="statusChange($event, scope.row)"
+                >
+                </el-switch>
+              </div>
+            </div> </template
+        ></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createTime"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column label="操作" width="140px" align="center">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+              <el-button
+                type="text"
+                @click="resetPasswords(scope.row)"
+                style="color: #f4453e"
+                >重置密码</el-button
               >
-              </el-switch>
-            </div>
-            <div v-else>
-              {{ scope.row[scope.column.property] }}
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <div>
-            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
-            <el-button
-              type="text"
-              @click="resetPasswords(scope.row)"
-              style="color: #f4453e"
-              >重置密码</el-button
-            >
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -123,36 +130,6 @@ export default {
     return {
       fullscreenLoading: false,
       tableData: [],
-      listData: [
-        {
-          name: '账号',
-          value: 'account',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '姓名',
-          value: 'name',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '禁用/启用',
-          value: 'status',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        },
-        {
-          name: '创建时间',
-          value: 'createTime',
-          width: '',
-          minWidth: '',
-          align: 'center'
-        }
-      ],
       form: {
         pageNum: 1,
         pageSize: 10,
@@ -161,15 +138,15 @@ export default {
         start: '',
         total: 0
       },
-      screenHeight: document.body.clientHeight - 370,
+      screenHeight: document.body.clientHeight - 320,
       tableDataheight: 0
     }
   },
   mounted() {
-    this.screenHeight = document.body.clientHeight - 370
+    this.screenHeight = document.body.clientHeight - 320
     window.onresize = () => {
       return (() => {
-        this.screenHeight = document.body.clientHeight - 370
+        this.screenHeight = document.body.clientHeight - 320
       })()
     }
     this.listDataInit()
@@ -310,7 +287,7 @@ export default {
       align-items: center;
       margin-bottom: 10px;
     }
-    margin-bottom: 32px;
+    margin-bottom: 20px;
     .el-form-item {
       margin-bottom: 10px;
       margin-right: 60px;

vue.config.js

@@ -25,14 +25,14 @@ module.exports = {
       chunks: 'all'
     })
     // //压缩图片
-    config.module
-      .rule('images')
-      .use('image-webpack-loader')
-      .loader('image-webpack-loader')
-      .options({
-        bypassOnDebug: true
-      })
-      .end()
+    // config.module
+    //   .rule('images')
+    //   .use('image-webpack-loader')
+    //   .loader('image-webpack-loader')
+    //   .options({
+    //     bypassOnDebug: true
+    //   })
+    //   .end()
     //set svg-sprite-loader
     config.module.rule('svg').exclude.add(resolve('src/icon')).end()
     config.module