数据上传，数据入库页面修改

Surpriseplus

2022-11-24 a7199e5a4f3e34b14d395e319a552c5c3b8b3a4d

 src/views/datamanage/dataUpdata.vue

@@ -1,605 +1,821 @@
<template>
  <div class="authorityManagement_box">
    <My-bread :list="['数据管理', '数据上传']"></My-bread>
  <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>
    <el-divider />
    <div class="inquire">
      <el-form ref="formData1" :model="updateForm" :inline="true">
        <el-form-item>
          <el-button type="primary" size="small" @click="showCatalog()"
            >目录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-tooltip
            :content="
              updateForm.cataName == '' ? '未选择目录' : updateForm.cataName
            "
            placement="top-start"
          >
            <el-input
              v-model="updateForm.cataName"
              disabled
              class="firstInput"
    <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-date-picker
              v-model.trim="formInline.gather"
              :picker-options="pickerOptions"
              type="datetime"
              placeholder="请选择"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-tooltip> </el-form-item
        ><el-form-item>
          <span>类型选择</span>
        </el-form-item>
        <el-form-item>
          <el-select v-model="updateForm.type" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>版本</span>
        </el-form-item>
        <el-form-item>
          <el-input v-model="updateForm.version" />
        </el-form-item>
          </el-form-item>
          <el-form-item>
            <input id="uploadfile" @change= "handleFileChange" type="file"  name="file" multiple="multiple"  style="display: none"></input>
            <el-button icon="el-icon-document-add" @click="fileSelect" class="primary">{{
              $t('common.file')
            }}</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"

        <el-form-item>
          <input
            name="file1"
            :accept="acceptItem"
            type="file"
            id="uploading"
            style="display: none"
            multiple="multiple"
            @change="clearFileList"
          />
          <el-button
            @click="clearFileList"
            icon="el-icon-thumb"
            type="primary"
            size="small"
            >选择</el-button
          >
          <p class="show"></p>
             type="success">{{
              $t('common.upload')
            }}</el-button>

          <el-button
            v-if="btnStatus.upload"
            @click="uploadFile"
            icon="el-icon-thumb"
            type="success"
            size="small"
            >上传</el-button
          >
          <!-- <el-row>
            <el-col :span="2">
              <el-link
                title="添加数据"
                :underline="false"
                @click="uploadFile"
                style="margin-left: 10px"
                ><i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-row> -->
          <!-- <el-upload
            id="uploading"
            :on-remove="handleRemove"
            :http-request="uploadFile"
            :file-list="fileList"
            multiple
            ref="upload"
            class="upload"
            action="http://192.168.20.106/LFServer/Meta/Upload"
            :auto-upload="false"
            :headers="headers"
            :accept="acceptItem"
          >
            <template #trigger>
              <el-button
                @click="clearFileList"
                icon="el-icon-thumb"
                type="primary"
                size="small"
                >选择</el-button
              >
            </template>
            <el-button
              class="ml-3"
              @click="submitUpload"
              icon="el-icon-upload2"
              type="success"
              size="small"
              icon="el-icon-delete"
              type="danger"
              @click="setFileDelete"

              :disabled="tableData.length == 0 ? true : false"
              >{{ $t('common.delete') }}</el-button
            >
              上传
            </el-button>
          </el-upload> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table
             <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"
        border
        style="width: 100%"
        fit
        style="width: width:99%"
        height="99%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="50" type="index" label="序号" />
        <el-table-column min-width="150" prop="name" label="数据名称" />
        <el-table-column min-width="200" prop="path" label="所属目录" />
        <el-table-column min-width="100" prop="create_time" label="创建时间" />
        <el-table-column min-width="80" prop="create_user" label="创建人员" />
        <el-table-column min-width="50" prop="type" label="数据类型" />
        <el-table-column min-width="50" prop="format" label="数据格式" />
        <el-table-column min-width="80" prop="up_unit" label="上传单位" />
        <el-table-column min-width="50" prop="status" label="数据状态" />
        <el-table-column min-width="50" prop="version" label="数据版本" />
      </el-table>
    </div>
    <div class="pagination_box" style="margin-top: 20px; margin-left: 400px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <div class="leftTree" v-show="showCata">
      <div class="treeBox">
        <catalogueTree></catalogueTree>
        @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
          align="center"
          prop="guid"
          :label="$t('common.md5')"
          fixed
        />
    </el-table>
      </div>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="selectCataName"
          >确定</el-button
        >
        <el-button type="primary" size="small" @click="closeCata"
          >取消</el-button
        >

      </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-form-item>
        </el-form>
      </div>
   <div class="contentTable" style="height:500px">
   <el-table
     :data="waretableData"

        style="width:99%"
        height="92%"
 >
        <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-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>

    </div>
  </div>
</template>

<script>
import $ from "jquery";

import { queryUploadData, queryDataCount } from "../../api/api";
import catalogueTree from "../../components/catalogueTree.vue";
import MyBread from "../../components/MyBread.vue";
import $ from 'jquery';
import MyBread from '../../components/MyBread.vue';
import { getToken } from '@/utils/auth';
import { selectdirTab, queryDepTree, dataUploadSelectVerByDirid, dataUploadSelectPath, dataUploadSelectFiles, dataUploadDeleteFiles, dataUploadInsertFiles,
dataUpload_selectByPageForUpload} from '../../api/api';
export default {
  name: "dataUpdata",
  name: 'dataUpdata',
  components: {
    MyBread,
    catalogueTree,
  },
  data() {
    return {
      options: [
        {
          value: "DEM",
          label: "高程数据",
        },
        {
          value: "DOM",
          label: "影像数据",
        },
        {
          value: "Terra",
          label: "地形数据",
        },
        {
          value: "Tilt",
          label: "倾斜模型",
        },
        {
          value: "PointCloud",
          label: "点云数据",
        },
        {
          value: "Geology",
          label: "地质模型",
        },
        {
          value: "BIM",
          label: "BIM模型",
        },
        {
          value: "manual",
          label: "手工模型",
        },
        {
          value: "line",
          label: "线划图数据",
        },
        {
          value: "Chart",
          label: "图表数据",
        },
        {
          value: "File",
          label: "文件数据",
        },
      ],
      value: "",
      showinfoBox: false,
      itemdetail: {},
      fileList: [],
      headers: { "Content-Type": "multipart/form-data" },
      acceptItem: "",
      showCata: false,
      updateForm: {
        path_id: "",
        cataName: "",
        version: "",
        type: "",
        name: "",
      },
      multipleSelection: [],
      tableData: [],
      activeTabName: 'first',
      btnStatus: 0,
      count: 0,
      currentPage: 1,
      pageSize: 10,
      pageNum: 1,
      btnStatus: {
        select: false,
        delete: false,
        upload: false,
        download: false,
        insert: false,
        update: false,
      formInline: {
        verid: '',
        gather: '',
      },
      formWarehousing: {
          name:''
      },
      catalogOption: [],
      companyOption: [],
      tableData: [],
      waretableData:[],
      listTable: [],
      multipleSelection: [],
      fullscreenLoading: false,
      listData: {
        pageIndex: 1,
        pageSize: 10,
       name: null,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        selectableRange: '00:00:00 - 23:59:59',
      },
      verOption: [],
      cascader: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
      },
    };
  },

  mounted() {
    this.getSelectdirTab();
    this.getQueryDepTree();
    this.timeDefault();
    this.getFilePath();

  },
  watch: {
    "updateForm.type": {
      immediate: true,
      handler(val) {
        switch (val) {
          case "DEM":
            this.acceptItem = ".tif,.img";
            break;
          case "DOM":
            this.acceptItem = ".tif,.img";
            break;
          case "Terra":
            this.acceptItem = ".mpt";
            break;
          case "Tilt":
            this.acceptItem = ".3dml";
            break;
          case "PointCloud":
            this.acceptItem = ".cpt";
            break;
          case "Geology":
            this.acceptItem = ".3dml";
            break;
          case "BIM":
            this.acceptItem = ".3dml";
            break;
          case "manual":
            this.acceptItem = ".Max";
            break;
          case "Chart":
            this.acceptItem = ".xls,.mdb";
            break;
          case "line":
            this.acceptItem = ".mdb";
            break;
          case "File":
            this.acceptItem =
              ".xls,.mdb,.xls,.pdf,.dwg,.png,.jpg,.bmp,.avi,.mp4,.wmv,.mp3,.txt,.fly";
            break;
    'detailData.gather': {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let min = date.getMinutes();
          date.setMinutes(min + 1); //这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
          let nowDate = moment(date).format('HH:mm:ss');
          let st = '';
          if (
            moment(date).format('yyyy-MM-DD') ===
            moment(newValue).format('yyyy-MM-DD')
          ) {
            let hh1 = moment(newValue).format('HH:mm:ss');
            if (hh1 > nowDate) {
              this.detailData.gather = new Date();
            }
            st = nowDate;
          } else {
            st = '23:59:59';
          }
          this.pickerOptions.selectableRange = '00:00:00 - ' + st;
          this.pickerOptions = this.pickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getMetaData(10, 1);
    // this.getMetaCount("");
    this.showPermsBtn();
  },
  methods: {
    showPermsBtn() {
      let currentPerms = this.$store.state.currentPerms;
      let permsEntity = this.$store.state.permsEntity;
      permsEntity
        .filter((item) => item.perms == currentPerms)
        .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
    },
    // 请求数据
    getMetaData(size, index) {
      queryUploadData(size, index).then((res) => {
        this.tableData = res.data;
      });
    },
    // 请求数据数量
    getMetaCount(name) {
      queryDataCount(name).then((res) => {
        this.count = res.data;
      });
    },
    // 获取多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val);
    },
    // 显示目录
    showCatalog() {
      this.showCata = true;
    },
    // 选择目录
    selectCataName() {
      this.updateForm.cataName = this.$store.state.catalogueName;
      this.updateForm.path_id = this.$store.state.cataNode.id;
      this.$store.commit("changeCata", ""); //清空state的面包屑
      this.$store.commit("changeNode", ""); //清空state的节点对象
      this.showCata = false;
    },
    closeCata() {
      this.showCata = false;
    },
    clearFileList() {
      $("#uploading").click();
      // var val = document.getElementById("uploading").files;
      // if (!val || !val.length) return;

      // val.forEach((e) => {
      //   console.log(e.name);
      // });
  methods: {
    changetimeFile(res){

//shijianchuo是整数，否则要parseInt转换
      var time = new Date(res.createTime);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        h +
        ':' +
        mm +
        ':' +
        s
      );
    },
    submitUpload() {
      if (this.updateForm.path_id == "" || this.updateForm.type == "") {
        alert("请选择数据类型或上传目录");
        this.$refs.upload.abort();
        return false;
      //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    setWarehouseSearch(){

   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();
    },
    handleTabClick(tab, event) {
        if(this.activeTabName =='second'){
            this.setWarehouseReset();
        }
    },
    handleSizeChange(val){
      this.listData.pageIndex= 1;
      this.listData.pageSize =val;
          this.getAllWareTable();
    },
handleCurrentChange(val){
  this.listData.pageIndex= val;
  this.getAllWareTable();
},
    //获取入库数据列表
   async getAllWareTable(){

      const res = await  dataUpload_selectByPageForUpload(this.listData);
        if (res.code != 200) {
        this.$message.error('列表数据获取失败');
        return;
      }
      debugger
      this.count = res.count;
 this.waretableData =res.result;
    },
    //大小值改變
    changeSizeFile(row, column, cellValue, index) {

      if (cellValue >= 1024) {
        return parseFloat(cellValue / 1204).toFixed(3) + "GB"
      } else {
        this.$refs.upload.submit();
        return cellValue + "MB"
      }
    },
    uploadFile(item) {
      var val = document.getElementById("uploading").files;
      if (!val || !val.length) return;
    //数据删除
    async setFileDelete() {
      this.handlerLoading(true);
      var data = JSON.stringify(this.multipleSelection);
      const res = await dataUploadDeleteFiles(data);
      if (res.code != 200) {
        this.$message.error('删除失败');
        return;
      }
      this.getFileLength();

      // if (val.length != 0) {
      //   var i = val.length;
      //   for (var j = 0; j < i; j++) {
      //     FormDatas.append("file" + j, val[j]); // 文件对象
      //   }
      // }
      val.forEach((e) => {
        let FormDatas = new FormData();
        FormDatas.append("file", e, e.name); // 文件对
        let name = e.name;
        let path_id = this.updateForm.path_id;
        let version = this.updateForm.version;
        let type = this.updateForm.type;
        let url = `http://192.168.20.106/LFServer/Meta/Upload?path_id=${path_id}&type=${type}&version=${version}&name=${name}`;
        // console.log(url);
        this.$http({
          method: "post",
          url,
          headers: this.headers,
          timeout: 30000,
          data: FormDatas,
          // onUploadProgress: (progressEvent) => {
          //   const complete = parseInt(
          //     ((progressEvent.loaded / progressEvent.total) * 100) | 0,
          //     10
          //   );
          //   // 重点二：onProgress()方法需要以上方接收的形参来调用
          //   // 这个方法有一个参数"percent"，给他进度值 complete 即可
          //   item.onProgress({ percent: complete });
          // },
        }).then((res) => {
          if (res.status == 200 && res.data.length != 0) {
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.getMetaData(10, 1);
            this.getMetaCount("");
          } else {
            alert("上传失败");
            console.log(res);
          }
        });


      this.handlerLoading(false);
    },
    //数据入库
    async setFileWare() {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择要入库的数据');
        return
      }

      var obj = {
        metaEntity: this.formInline,
        fileEntities: this.multipleSelection
      };

      const res = await dataUploadInsertFiles(JSON.stringify(obj));
      if (res.code != 200) {
        this.$message.error('文件上传数据获取失败');
        return;
      }
      this.getFileLength();

    },

    //显示表格数据
    setViewTable() {
      var index = this.listData.pageIndex - 1;
      var start = index * this.listData.pageSize;
      var size = (this.listData.pageSize) + (index * this.listData.pageSize);
      var std = [];
      for (var i = start; i < size; i++) {
        if (this.listTable[i] != null) {
          std.push(this.listTable[i])
        }
      }
      this.tableData = std;
    },
    //文件上传
    setFileUpload() {
      this.handlerLoading(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++) {
        formData.append(fs.files[i].name, fs.files[i]); // fs.files[i].name,file
      }

      $.ajax(BASE_URL + "/dataUpload/uploadFiles?token=" + token + "&path=" + this.formInline.path, {
        type: "post",
        data: formData,
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (rs) => {
          this.getFileLength();

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

        },
        error: (rs) => {
          alert("上传文件失败！");
        }
      });
      document.getElementById("uploadfile").value = "";
      this.handlerLoading(false);
    },
    //获取文件上传数据
    async getFileLength() {
      const res = await dataUploadSelectFiles(this.formInline.path);
      if (res.code != 200) {
        this.$message.error('文件上传数据获取失败');
        return;
      }

      if (res.result == null) {
        this.count = 0;
        this.setClearTableData();
      } else {
        this.count = res.result.length;
        this.tableData = res.result;
      }
    },
    //清除表格信息
    setClearTableData() {
      this.tableData = [];
      this.listTable = [];
    },
    // //分页控制
    // handleSizeChange(res) {
    //   this.listData.pageIndex = 1;
    //   this.listData.pageSize = res;
    //   this.setViewTable();
    // },
    // handleCurrentChange(res) {
    //   this.listData.pageIndex = res;
    //   this.setViewTable();
    // },
    //表格选中事件
    handleSelectionChange(res) {
      this.multipleSelection = res;
    },
    //文件获取
    fileSelect() {
      $("#uploadfile").click();
    },
    handleFileChange() {
      var fs = document.getElementById("uploadfile");

    },
    //当前时间获取
    timeDefault() {
      var date = new Date();
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var sign2 = ':';
      var s1 =
        date.getFullYear() +
        '-' +
        (date.getMonth() + 1) +
        '-' +
        date.getDate() +
        ' ' +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds;
      this.formInline.gather = s1;
    },

    //Loading显隐
    handlerLoading(res) {
      this.fullscreenLoading = res;
    },
    //目录切换
    catalogChange(value) {
      this.formInline.dirid = value;
      this.getselectVerByDirid();
    },
    //单位切换
    companyChange(value) {
      this.formInline.depid = value;
    },
    //获取文件上传路径
    async getFilePath() {
      const res = await dataUploadSelectPath();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      this.formInline.path = res.result;
    },
    //单位列表获取
    async getQueryDepTree() {
      const res = await queryDepTree();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      this.formInline.depid = 1;
      this.companyOption = this.treeData(res.result);
    },
    //版本号获取
    async getselectVerByDirid() {
      this.verOption = [];
      this.formInline.verid = "";
      const res = await dataUploadSelectVerByDirid({ dirid: this.formInline.dirid });
      if (res.code != 200) {
        this.$message.error('版本列表获取失败');
        return;
      }
      this.verOption = res.result;
      this.formInline.verid = res.result[0].id;
    },
    //目录列表获取
    async getSelectdirTab() {
      const res = await selectdirTab();
      if (res.code != 200) {
        this.$message.error('目录列表获取失败');
        return;
      }
      this.formInline.dirid = 1;
      this.catalogOption = this.treeData(res.result);
      this.getselectVerByDirid()
    },
    //树列表生成
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        return father.pid == 0; // 返回一级菜单
      });
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    // 条数修改
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMetaData(this.pageSize, 1);
      this.getMetaCount("");
    },
    // 页数修改
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getMetaData(this.pageSize, this.pageNum);
      this.getMetaCount("");
    },
    // showDetail(index, row) {
    //   // console.log(index, row);
    //   this.showinfoBox = true;
    //   this.itemdetail = row;
    // },
    // handleDelete(index, row) {
    //   // console.log(index, row);
    //   this.$confirm("确定是否删除?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {})
    //     .catch(() => {});
    // },
    // closeDetial() {
    //   this.showinfoBox = false;
    //   this.itemdetail = {};
    // },
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
  box-sizing: border-box;
  .inquire {
    margin: 10px auto;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    height: 90px;
    .el-form-item {
      margin: 5px;
    }
    .el-input {
      width: 307px;
    }

    .ml-3 {
      margin-left: 10px;
    }
    .upload {
      /deep/ .el-upload-list {
        width: 79vw;
        height: 27px;
        margin: 0;
        margin-left: 0px;
        padding: 0;
        list-style: none;
        // background: #bfa;
        position: absolute;
        left: -53vw;
        top: 5vh;
        z-index: 10;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
      }
      /deep/ .el-upload-list__item {
        margin-top: 0px;
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        // margin-top: 5px;
        position: relative;
        box-sizing: border-box;
        border-radius: 4px;
        width: 15%;
      }
    }
  }
  .table_box {
    height: 73%;
    overflow: auto;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    .el-table /deep/ .el-table__header-wrapper tr th {
      background-color: rgb(255, 255, 255) !important;
      color: rgb(0, 0, 0);
    }
    // 修改每行样式：
    .el-table /deep/ .el-table__row {
      background-color: rgba(255, 255, 255) !important;
      color: rgb(0, 0, 0);
    }
    .el-table /deep/ .el-table__body tr.current-row > td {
      background-color: rgb(211, 211, 211) !important;
    }
    .el-table /deep/ .el-table__body tr:hover > td {
      background-color: rgb(211, 211, 211) !important;
    }
    // 修改表格每行边框的样式：
    .el-table /deep/ td,
    .el-table /deep/ th.is-leaf {
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    .el-table /deep/ .el-table__cell {
      padding: 8px 0;
    }
    // 设置表格每行的高度：
    .el-table /deep/ .el-table__header tr,
    .el-table /deep/ .el-table__header th {
      height: 50px;
    }
    .el-table__body tr,
    .el-table__body td {
      height: 50px;
      padding: 0;
    }
    // 设置表格边框颜色：
  .updateContent {
    width: 100%;
    height: 670px;

    .el-table--border::after,
    .el-table--group::after {
      width: 0;
    position: relative;
    .contentIquery {
      width: 97%;
      height: 16%;
      border: 1px solid white;
      padding: 1%;
      border-radius: 5px;
    }
    .el-table::before {
      height: 0;
    .contentTable {
      width: 97%;
      height: 400px;
      border: 1px solid white;
      padding: 1%;
      border-radius: 5px;
      margin-top: 1%;
      /*修改table 表体的背景颜色和文字颜色*/
      /deep/ .el-table {
        background-color: transparent;

        th,
        td {
          background-color: transparent;
        }
        .el-table__expanded-cell {
          background-color: transparent !important;
        }

        // 表头背景色
        th.el-table__cell {
          background-color: #303030;
          color: #fff;
        }
        tr > td {
          background-color: #303030;
          color: #fff;
        }

        // hover效果
        tr:hover > td {
          background-color: rgba(255, 255, 255, 0.3) !important;
        }

        tbody tr:hover {
          background-color: rgba(255, 255, 255, 0.3) !important;
          // text-align: center;
        }

        // 滚动条宽高
        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          /*滚动条宽度*/
          height: 5px;
          /*滚动条高度*/
        }
        /*定义滚动条轨道 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-track {
          box-shadow: 0px 1px 3px #216fe6 inset;
          /*滚动条的背景区域的内阴影*/
          border-radius: 10px;
        }

        /*定义滑块 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
          box-shadow: 0px 1px 3px #216fe6 inset;
          border-radius: 6px;
          background-color: #216fe6;
        }
      }
      .pagination_box {
        margin-top: 20px;
        /deep/.el-input__inner {
          background-color: transparent !important;
          border: 1px solid;
          color: white;
        }
        /deep/.el-pagination__total {
          color: white;
        }
        /deep/.el-pagination__jump {
          color: white;
        }
        /deep/.el-pager li.active {
          color: #409eff;
        }
        /deep/.el-pager li {
          color: white;
          background: transparent;
        }
        /deep/.el-pager li {
          color: white;
        }
        /deep/.btn-prev {
          background: transparent;
        }
        /deep/.btn-next {
          background: transparent;
        }
        /deep/.btn-next i {
          color: white;
        }
        /deep/.btn-prev i {
          color: white;
        }
      }
    }
    .primary {
      background: #409eff;
      border: #409eff;
      color: white;
    }
  }
  .leftTree {
    position: absolute;
    z-index: 10;
    top: 100px;
    left: 600px;
    width: 400px;
    height: 600px;
    background: #f0f2f5;
    border: 1px solid #000;
    .treeBox {
      height: 550px;
      overflow: auto;
      /deep/ .el-tree-node__content:hover {
        background-color: rgb(153, 153, 153);
      }
    }
    .btnBox {
      width: 123px;
      margin: 10px auto 0;
      // background-color: red;
    }

  /deep/.el-form-item__label {
    color: white;
  }
  .infoBox {
    width: 500px;
    border: 1px solid #eee;
    position: absolute;
    z-index: 100;
    top: 15%;
    right: 25%;
    background-color: #fff;
    .el-card {
      background-color: transparent;
      span {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .contentBox {
      margin: 0 aotu 10px;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
        font-size: 14px;
      }
    }
  // 设置输入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .popper__arrow::after {
    border-top-color: rgba(43, 45, 55, 0.8);
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-cascader .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-textarea__inner {
    background: transparent;
    border-color: #fff !important;
    color: white;
  }
  /deep/.el-textarea .el-input__count {
    background: transparent;
    color: #fff !important;
  }
  /deep/.el-loading-spinner i {
    color: #1890ff !important;
  }
  /deep/.el-tabs__active-bar {
    background: #409eff;
  }
  /deep/ .el-tabs__item {
    color: #409eff;
  }
}
</style>