管道分析，IE判斷，上传Loading

Surpriseplus

2022-12-30 a55625f79b5bea88a04dc5cebf264a61cd594547

 src/views/datamanage/dataUpdata.vue

@@ -1,46 +1,61 @@
<template>
  <div class="authorityManagement_box"    v-loading.fullscreen.lock="fullscreenLoading"
                element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
    <My-bread
      :list="[
  <div
    class="authorityManagement_box"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.dataUpdata')}`,
      ]"
    ></My-bread>
      ]"></My-bread>
    <el-divider />
    <div class="updateContent">
               <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
    <el-tab-pane :label="$t('dataManage.dataUpObj.uploaddata')" name="first">
            <div class="contentIquery">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item :label="$t('dataManage.dataUpObj.catalogue')">
            <el-cascader
              v-model="formInline.dirid"
              :options="catalogOption"
              @change="catalogChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.company')">
            <el-cascader
              v-model="formInline.depid"
              :options="companyOption"
              @change="companyChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.versionNo')">
              <el-select v-model="formInline.verid" :placeholder="$t('common.choose')">
              <el-option
                v-for="item in verOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
              </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
      <el-tabs
        v-model="activeTabName"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          :label="$t('dataManage.dataUpObj.uploaddata')"
          name="first"
        >
          <div class="contentIquery">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item :label="$t('dataManage.dataUpObj.catalogue')">
                <el-cascader
                  v-model="formInline.dirid"
                  :options="catalogOption"
                  @change="catalogChange"
                  :props="cascader"
                ></el-cascader>
              </el-form-item>
              <el-form-item :label="$t('dataManage.dataUpObj.company')">
                <el-cascader
                  v-model="formInline.depid"
                  :options="companyOption"
                  @change="companyChange"
                  :props="cascader"
                ></el-cascader>
              </el-form-item>
              <el-form-item :label="$t('dataManage.dataUpObj.versionNo')">
                <el-select
                  v-model="formInline.verid"
                  :placeholder="$t('common.choose')"
                >
                  <el-option
                    v-for="item in verOption"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
            <el-date-picker
              v-model.trim="formInline.gather"
              :picker-options="pickerOptions"
@@ -49,248 +64,279 @@
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item> -->
            <el-form-item  >
            <el-input
              <el-input
              type="textarea"
              v-model="formInline.fileName"
              <el-form-item>
                <el-input
                  <el-input
                  type="textarea"
                  v-model="formInline.fileName"
                  class="nm-skin-pretty"
                  show-word-limit
                  :rows="2"
                  resize='none'
                  style="width: 600px;"
                ></el-input>
                ></el-input>
              </el-form-item>
              <el-form-item>
                <input
                  id="uploadfile"
                  @change="handleFileChange"
                  type="file"
                  name="file"
                  multiple="multiple"
                  style="display: none"
                ></input>

              class="nm-skin-pretty"
              show-word-limit
              :rows="2"  resize='none'
              style="width: 600px;"
            ></el-input>
            ></el-input>
          </el-form-item>
          <el-form-item>
            <input id="uploadfile" @change= "handleFileChange" type="file"  name="file" multiple="multiple"  style="display: none"></input>




             <el-button v-if="formInline.fileName == '未选择文件'"
              type="info"
                @click="fileSelect">
                   选择文件
             </el-button>
             <el-button
               v-else
                type="info"
                @click="clearFileSelect"
                <el-button
                  v-if="formInline.fileName == '未选择文件'"
                  type="info"
                  @click="fileSelect"
                >
                    重置
             </el-button>
                  选择文件
                </el-button>
                <el-button
                  v-else
                  type="info"
                  @click="clearFileSelect"
                >
                  重置
                </el-button>

          </el-form-item>
          <br />
          <el-form-item :label="$t('dataManage.dataUpObj.describe')">
            <el-input
              type="textarea"
              v-model="formInline.descr"
              maxlength="50"
              class="nm-skin-pretty"
              show-word-limit
              :rows="2"  resize='none'
              style="width: 460px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-upload" @click="setFileUpload"

             type="success">{{
              </el-form-item>
              <br />
              <el-form-item :label="$t('dataManage.dataUpObj.describe')">
                <el-input
                  type="textarea"
                  v-model="formInline.descr"
                  maxlength="50"
                  class="nm-skin-pretty"
                  show-word-limit
                  :rows="2"
                  resize='none'
                  style="width: 460px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-upload"
                  @click="setFileUpload"
                  type="success"
                >{{
              $t('common.upload')
            }}</el-button>

            <el-button
              icon="el-icon-delete"
              type="danger"
              @click="setFileDelete"
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  @click="setFileDelete"
                  :disabled="tableData.length == 0 ? true : false"
                >{{ $t('common.delete') }}</el-button>
                <el-button
                  icon="el-icon-data-line"
                  type="info"
                  disabled
                >{{ $t('common.quayTest') }}</el-button>
                <el-button
                  icon="el-icon-folder-add"
                  type="warning"
                  @click="setFileWare"
                  :disabled="tableData.length == 0 ? true : false"
                >{{ $t('common.Warehousin') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="contentTable">

              :disabled="tableData.length == 0 ? true : false"
              >{{ $t('common.delete') }}</el-button
            <el-table
              :data="tableData"
              style="width: width:99%"
              height="99%"
              @selection-change="handleSelectionChange"
            >
             <el-button
              icon="el-icon-data-line"
              type="info"
               disabled
              >{{ $t('common.quayTest') }}</el-button
            >
            <el-button
              icon="el-icon-folder-add"
              type="warning"
                @click="setFileWare"
              :disabled="tableData.length == 0 ? true : false"
              >{{ $t('common.Warehousin') }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="contentTable">

   <el-table
        :data="tableData"
        style="width: width:99%"
        height="99%"
        @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
        <el-table-column
          align="center"
          type="index"
          :label="$t('common.index')"
          width="70px"
          fixed
        />
          <el-table-column
          align="center"
          prop="name"
          :label="$t('common.name')"
          fixed
        />
         <el-table-column
          align="center"
          prop="sizes"
          :label="$t('common.size')"
          fixed
         :formatter="changeSizeFile"
        />
         <!-- <el-table-column
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                type="index"
                :label="$t('common.index')"
                width="70px"
                fixed
              />
              <el-table-column
                align="center"
                prop="name"
                :label="$t('common.name')"
                fixed
              />
              <el-table-column
                align="center"
                prop="sizes"
                :label="$t('common.size')"
                fixed
                :formatter="changeSizeFile"
              />
              <!-- <el-table-column
          align="center"
          prop="guid"
          :label="$t('common.md5')"
          fixed
        /> -->
    </el-table>
      </div>
            </el-table>
          </div>

      </el-tab-pane>
    <el-tab-pane :label="$t('dataManage.dataUpObj.receiptdata')" name="second">
<div class="contentIquery" style="padding-bottom: 0% !important;">
        <el-form :inline="true" :model="formWarehousing" class="demo-form-inline">
          <el-form-item :label="$t('dataManage.dataUpObj.describe')">
<el-input v-model="formWarehousing.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-upload" @click="setWarehouseSearch"
           class="primary">{{
        </el-tab-pane>
        <el-tab-pane
          :label="$t('dataManage.dataUpObj.receiptdata')"
          name="second"
        >
          <div
            class="contentIquery"
            style="padding-bottom: 0% !important;"
          >
            <el-form
              :inline="true"
              :model="formWarehousing"
              class="demo-form-inline"
            >
              <el-form-item :label="$t('dataManage.dataUpObj.describe')">
                <el-input
                  v-model="formWarehousing.name"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-upload"
                  @click="setWarehouseSearch"
                  class="primary"
                >{{
              $t('common.iquery')
            }}</el-button>
            <el-button @click="setWarehouseReset"
              icon="el-icon-folder-add"
              type="info"
              >{{ $t('common.reset') }}</el-button
                <el-button
                  @click="setWarehouseReset"
                  icon="el-icon-folder-add"
                  type="info"
                >{{ $t('common.reset') }}</el-button>
                <el-button
                  @click="setWarehouseDel"
                  icon="el-icon-folder-delete"
                  type="danger"
                >{{ $t('common.delete') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div
            class="contentTable"
            style="height:500px"
          >
            <el-table
              :data="waretableData"
              @selection-change="handleDelteChange"
              style="width:99%"
              height="92%"
            >
             <el-button @click="setWarehouseDel"
              icon="el-icon-folder-delete"
              type="danger"
              >{{ $t('common.delete') }}</el-button
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                type="index"
                :label="$t('common.index')"
                width="70px"
                fixed
              />
              <el-table-column
                align="center"
                prop="name"
                :label="$t('common.name')"
                fixed
              />
              <el-table-column
                align="center"
                prop="dirName"
                :label="$t('dataManage.dataUpObj.catalogue')"
                fixed
              />
              <el-table-column
                align="center"
                prop="depName"
                :label="$t('dataManage.dataUpObj.company')"
                fixed
              />
              <el-table-column
                align="center"
                prop="verName"
                :label="$t('dataManage.dataUpObj.versionNo')"
                fixed
              />
              <el-table-column
                align="center"
                prop="type"
                :label="$t('common.type')"
                fixed
              />
              <el-table-column
                align="center"
                prop="sizes"
                :label="$t('common.size')"
                fixed
                :formatter="changeSizeFile"
              />
              <el-table-column
                align="center"
                prop="tab"
                :label="$t('dataManage.dataUpObj.tableName')"
                fixed
              />
              <el-table-column
                align="center"
                prop="rows"
                :label="$t('common.lineNuber')"
                fixed
              />
              <el-table-column
                align="center"
                prop="desc"
                :label="$t('dataManage.dataUpObj.describe')"
                fixed
              />
              <el-table-column
                align="center"
                prop="uname"
                :label="$t('dataManage.vmobj.createonuser')"
                fixed
              />
              <el-table-column
                align="center"
                prop="createTime"
                :label="$t('dataManage.vmobj.createontime')"
                fixed
                :formatter="changetimeFile"
              />
            </el-table>

            <div
              style="margin-top: 10px"
              class="pagination_box"
            >
          </el-form-item>
        </el-form>
      </div>
   <div class="contentTable" style="height:500px">
   <el-table
     :data="waretableData"
   @selection-change="handleDelteChange"
        style="width:99%"
        height="92%"
 >
    <el-table-column
      type="selection"
      width="55"/>
        <el-table-column
          align="center"
          type="index"
          :label="$t('common.index')"
          width="70px"
          fixed
        />
          <el-table-column
          align="center"
          prop="name"
          :label="$t('common.name')"
          fixed
        />
         <el-table-column
          align="center"
          prop="dirName"
          :label="$t('dataManage.dataUpObj.catalogue')"
          fixed
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listData.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="listData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>

        />
         <el-table-column
          align="center"
          prop="depName"
          :label="$t('dataManage.dataUpObj.company')"
          fixed
        />
             <el-table-column
          align="center"
          prop="verName"
          :label="$t('dataManage.dataUpObj.versionNo')"
          fixed
        />
             <el-table-column
          align="center"
          prop="type"
          :label="$t('common.type')"
          fixed
        />
        <el-table-column
          align="center"
          prop="sizes"
          :label="$t('common.size')"
          fixed
          :formatter="changeSizeFile"
        />
         <el-table-column
          align="center"
          prop="tab"
          :label="$t('dataManage.dataUpObj.tableName')"
          fixed
        />
         <el-table-column
          align="center"
          prop="rows"
          :label="$t('common.lineNuber')"
          fixed
        />
         <el-table-column
          align="center"
          prop="desc"
          :label="$t('dataManage.dataUpObj.describe')"
          fixed
        />
        <el-table-column
          align="center"
          prop="uname"
          :label="$t('dataManage.vmobj.createonuser')"
          fixed
        />
         <el-table-column
          align="center"
          prop="createTime"
          :label="$t('dataManage.vmobj.createontime')"
          fixed
              :formatter="changetimeFile"
        />
    </el-table>

      <div style="margin-top: 10px" class="pagination_box">
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
      </div>
    </el-tab-pane>

  </el-tabs>
      </el-tabs>

    </div>
  </div>
@@ -300,8 +346,10 @@
import $ from 'jquery';
import MyBread from '../../components/MyBread.vue';
import { getToken } from '@/utils/auth';
import { selectdirTab, queryDepTree, dataUploadSelectVerByDirid, dataUploadSelectPath, dataUploadSelectFiles, dataUploadDeleteFiles, dataUploadInsertFiles,
dataUpload_selectByPageForUpload,dataUpload_deleteMetas} from '../../api/api';
import {
  selectdirTab, queryDepTree, dataUploadSelectVerByDirid, dataUploadSelectPath, dataUploadSelectFiles, dataUploadDeleteFiles, dataUploadInsertFiles,
  dataUpload_selectByPageForUpload, dataUpload_deleteMetas
} from '../../api/api';
export default {
  name: 'dataUpdata',
  components: {
@@ -315,22 +363,22 @@
      formInline: {
        verid: '',
        gather: '',
        fileName:'未选择文件'
        fileName: '未选择文件'
      },
      formWarehousing: {
          name:''
        name: ''
      },
      catalogOption: [],
      companyOption: [],
      tableData: [],
      waretableData:[],
      waretableData: [],
      listTable: [],
      multipleSelection: [],
      fullscreenLoading: false,
      listData: {
        pageIndex: 1,
        pageSize: 10,
       name: null,
        name: null,
      },
      pickerOptions: {
        disabledDate(time) {
@@ -383,37 +431,37 @@
      },
      deep: true,
      immediate: true,
      multipleDelete:[]
      multipleDelete: []
    },
  },

  methods: {

  async setWarehouseDel(){
          var std = [];
          for (var i in this.multipleDelete) {
            std.push(this.multipleDelete[i].id);
          }
          const res = await dataUpload_deleteMetas({ids: std.toString() })
          if(res.code != 200){
            this.$message.error('删除失败');
          }else{
               this.$message({
    async setWarehouseDel() {
      var std = [];
      for (var i in this.multipleDelete) {
        std.push(this.multipleDelete[i].id);
      }
      const res = await dataUpload_deleteMetas({ ids: std.toString() })
      if (res.code != 200) {
        this.$message.error('删除失败');
      } else {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.listData.pageIndex=1;
        this.listData.pageIndex = 1;
        this.listData.pageSize = 10;
           this.getAllWareTable();
          }
        this.getAllWareTable();
      }
    },
    handleDelteChange(val){
    this.multipleDelete = val;
    handleDelteChange(val) {
      this.multipleDelete = val;
    },

    changetimeFile(res){
    changetimeFile(res) {

//shijianchuo是整数，否则要parseInt转换
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(res.createTime);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
@@ -435,53 +483,53 @@
        s
      );
    },
      //格式化时间
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    setWarehouseSearch(){
    setWarehouseSearch() {

   this.listData={
              pageIndex:1,
              pageSize:10,
              name:this.formWarehousing.name,
            }
            this.getAllWareTable();
      this.listData = {
        pageIndex: 1,
        pageSize: 10,
        name: this.formWarehousing.name,
      }
      this.getAllWareTable();
    },
    setWarehouseReset(){
     this.formWarehousing.name='';
   this.listData={
              pageIndex:1,
              pageSize:10,
              name:null,
            }
            this.getAllWareTable();
    setWarehouseReset() {
      this.formWarehousing.name = '';
      this.listData = {
        pageIndex: 1,
        pageSize: 10,
        name: null,
      }
      this.getAllWareTable();
    },
    handleTabClick(tab, event) {
        if(this.activeTabName =='second'){
            this.setWarehouseReset();
        }
      if (this.activeTabName == 'second') {
        this.setWarehouseReset();
      }
    },
    handleSizeChange(val){
      this.listData.pageIndex= 1;
      this.listData.pageSize =val;
          this.getAllWareTable();
    handleSizeChange(val) {
      this.listData.pageIndex = 1;
      this.listData.pageSize = val;
      this.getAllWareTable();
    },
handleCurrentChange(val){
  this.listData.pageIndex= val;
  this.getAllWareTable();
},
    handleCurrentChange(val) {
      this.listData.pageIndex = val;
      this.getAllWareTable();
    },
    //获取入库数据列表
   async getAllWareTable(){
    async getAllWareTable() {

      const res = await  dataUpload_selectByPageForUpload(this.listData);
        if (res.code != 200) {
      const res = await dataUpload_selectByPageForUpload(this.listData);
      if (res.code != 200) {
        this.$message.error('列表数据获取失败');
        return;
      }

      this.count = res.count;
 this.waretableData =res.result;
      this.waretableData = res.result;
    },
    //大小值改變
    changeSizeFile(row, column, cellValue, index) {
@@ -494,7 +542,7 @@
    },
    //数据删除
    async setFileDelete() {
      this.handlerLoading(true);

      var data = JSON.stringify(this.multipleSelection);
      const res = await dataUploadDeleteFiles(data);
      if (res.code != 200) {
@@ -502,10 +550,6 @@
        return;
      }
      this.getFileLength();



      this.handlerLoading(false);
    },
    //数据入库
    async setFileWare() {
@@ -543,13 +587,13 @@
    },
    //文件上传
    setFileUpload() {
      this.handlerLoading(true);
      this.fullscreenLoading = true;
      var token = getToken();
      var formData = new FormData();

      var fs = document.getElementById("uploadfile");
      if (fs.files.length == 0) {
        this.handlerLoading(false);

        return this.$message.error('请选择需要上传的文件');
      }
      for (var i = 0, c = fs.files.length; i < c; i++) {
@@ -565,20 +609,26 @@
        contentType: false,
        success: (rs) => {
          this.getFileLength();

          this.fullscreenLoading = false;
          this.$message({
            message: '上传成功',
            type: 'success'
          });
this.clearFileSelect();
          this.clearFileSelect();
        },

        error: (rs) => {
          alert("上传文件失败！");
          this.fullscreenLoading = false;
            this.$message.error('数据上传失败');
          this.clearFileSelect();
        }
      });

      this.handlerLoading(false);

    },
    progressHandle(e) {
      var percent = (e.loaded / e.total * 100).toFixed(2);
      console.log(percent)
    },
    //获取文件上传数据
    async getFileLength() {
@@ -620,19 +670,19 @@
      $("#uploadfile").click();
    },
    handleFileChange(event) {
      var std =[];
      var std = [];
      var len = event.currentTarget.files.length;
      for(var i = 0;i<len;i++){
var f = event.currentTarget.files[i];
std.push(f.name)
      for (var i = 0; i < len; i++) {
        var f = event.currentTarget.files[i];
        std.push(f.name)
      }

        this.formInline.fileName =std.toString() ;
      this.formInline.fileName = std.toString();

    },
    clearFileSelect(){
   this.formInline.fileName="未选择文件";
    document.getElementById("uploadfile").value = "";
    clearFileSelect() {
      this.formInline.fileName = "未选择文件";
      document.getElementById("uploadfile").value = "";
    },
    //当前时间获取
    timeDefault() {
@@ -891,3 +941,8 @@
  }
}
</style>
<style>
.el-loading-spinner i {
  color: #1890ff !important;
}
</style>