数据管理页面添加，修改

Surpriseplus

2022-11-19 5aa3a9bdd9001e53f245efd40b0d39263caa4bfc

数据管理页面添加，修改

 src/api/api.js

@@ -29,17 +29,18 @@
//字典管理列表删除
export function deleteDicts(params) {
  //请求地址
  return request.get('/dict/deleteDicts', { params: params });
  return request.get('/dict/deletes', { params: params });
}
//字典管理列表编辑
export function updateDict(params) {
  //请求地址
  return request.post('/dict/updateDict', params);
  return request.post('/dict/update', params);
}
//字典管理新增
export function insertDict(params) {
  //请求地址
  return request.post('/dict/insertDict', params);
  debugger;
  return request.post('/dict/insert', params);
}

//角色管理列表
@@ -440,10 +441,22 @@
  return request.post('/inquiry/uploadShp', params);
}

//数据管理=>数据检索=>列表获取
export function dataQuerySelectByPage(params) {
//数据管理=>数据检索=>查询所有表
export function dataQuery_selectTabs(params) {
  return request.get('/dataQuery/selectTabs', { params: params });
}
//数据管理=>数据检索 =>分页查询
export function dataQuery_selectByPage(params) {
  return request.get('/dataQuery/selectByPage', { params: params });
}
//数据管理=>数据检索=>查询值域信息
export function dataQuery_selectDomains(params) {
  return request.get('/dataQuery/selectDomains', { params: params });
}
//数据管理=>数据检索=>查询字段信息
export function dataQuery_selectFields(params) {
  return request.get('/dataQuery/selectFields', { params: params });
}

//数据管理=>数据检索=>根据ID查询WKT
export function dataQuerySelectWktById(params) {

 src/assets/lang/en.js

@@ -27,13 +27,35 @@
    logout: 'logout',
    NPassword: 'New Password',
    SPassword: 'Confirm Password',

    AdminPassword: 'Administrator Password',
    Warehousin: 'Warehousin',
    file: 'file',
    details: 'details',
    enclosure: 'enclosure',
    attachinform: 'Attachment information',
    filePath: 'File Path',
    fileNme: 'File Name',
    format: 'format',
    size: 'size',
  },
  dataManage: {
    dataManage: 'Data Manage',
    catalogueManage: 'catalogueManage',
    dataUpdata: 'dataUpdata',
    datawarehousing: 'Data warehousing',
    rangeManage: 'Range management',
    dataRetrieval: 'data retrieval',
    dataUpObj: {
      catalogue: 'Catalogue',
      company: 'Company',
      entryTime: 'Entry time',
      describe: 'Describe',
      directoryName: 'Directory Name',
      catalogDescription: 'Catalog Description',
      catalogRemarks: 'Catalog Remarks',
      newDirectory: 'New Directory',
    },

    metadataManage: 'metadataManage',
    dataLoading: 'dataLoading',
    SpatialData: 'SpatialData',
@@ -50,6 +72,10 @@
      updateonuser: 'Update Personnel',
      editVersion: 'Modify version information',
      addVersion: 'Add version information',
      type: 'type',
      coordSystem: 'Coordinate system',
      scale: 'Scale',
      resolpower: 'resolpower',
    },
    dictionaryManage: 'dictionaryManage',
    dictionaryManageObj: {

 src/assets/lang/zh.js

@@ -25,15 +25,40 @@
    reset: '重置',
    submit: '提交',
    logout: '注销',

    NPassword: '新密码',
    SPassword: '确认密码',
    AdminPassword: '管理员密码',
    Warehousin: '入库',
    file: '文件',
    details: '详情',
    enclosure: '附件',

    attachinform: '附件信息',
    filePath: '文件路径',
    fileNme: '文件名称',

    format: '格式',
    size: '大小',
  },
  dataManage: {
    dataManage: '数据管理',
    catalogueManage: '目录管理',
    dataUpdata: '数据上传',
    datawarehousing: '数据入库',
    rangeManage: '值域管理',
    dataRetrieval: '数据检索',

    dataUpObj: {
      catalogue: '目录',
      company: '单位',
      entryTime: '录入时间',
      describe: '描述',
      directoryName: '目录名称',
      catalogDescription: '目录说明',

      catalogRemarks: '目录备注',
      newDirectory: '新增目录',
    },
    metadataManage: '元数据管理',
    dataLoading: '数据入库',
    SpatialData: '空间数据管理',
@@ -50,6 +75,11 @@
      updateonuser: '修改人员',
      editVersion: '修改版本信息',
      addVersion: '添加版本信息',
      type: '类型',
      coordSystem: '坐标系统',
      scale: '比例尺',

      resolpower: '分辨率',
    },
    dictionaryManage: '字典管理',
    dictionaryManageObj: {

 src/components/login.vue

@@ -152,7 +152,7 @@
</template>

<script>
// import { login } from '../utils/api'
import { getPerms } from '../api/api';
import validCode from './verificationCode.vue';
import { mapActions } from 'vuex';

@@ -214,7 +214,16 @@
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              this.$router.push('/mochaitmo');
              getPerms().then((res) => {
                if (res.code == 200) {
                  this.$store.commit('getPermsEntity', res.result);
                  if (res.result.length != 0) {
                    this.$router.push('/');
                  }
                } else {
                  console.log('error submit!!');
                }
              });

              this.loading = false;
              //调用录接口

 src/components/navMenu.vue

@@ -57,7 +57,7 @@
import { logout } from '@/api/api';
import { removeToken, getToken } from '@/utils/auth';
import customElMenu from '../components/customElMenu.vue';
import { queryMenuTree, getPerms } from '../api/api';
import { queryMenuTree } from '../api/api';
import colorChange from '../views/maintenance/colorChange.vue';
export default {
  name: 'navMenu',
@@ -91,37 +91,43 @@
          label: '数据质检',
          class: 'm1',
          checkClass: 'm11',
          url: '',
        },
        {
          label: '数据交换',
          class: 'm2',
          checkClass: 'm21',
          url: '',
        },
        {
          label: '数据管理',
          class: 'm3',
          checkClass: 'm31',
          url: '',
        },
        {
          label: '服务管理',
          class: 'm4',
          checkClass: 'm41',
          url: '',
        },
        {
          label: '综合展示',
          class: 'm5',
          checkClass: 'm51',
          url: '',
        },
        {
          label: '运维管理',
          class: 'm6',
          checkClass: 'm61',
          url: '',
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.getUserPerms();
    this.getMenuTree();
  },
  computed: {
@@ -152,29 +158,41 @@
    },
    //鼠标移入菜单事件
    setMenuMove(index, item) {
      this.$router.push(item.url);
      this.changeSelectStyle = index;
    },
    getMenuTree() {
    async getMenuTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      // èŽ·å–目录树数据
      queryMenuTree().then((res) => {
        if (res.code == 200) {
          if (res.result.length != 0) {
            let menuLists = res.result.filter((value) => {
              return value.pid == 1;
            });
            // console.log(menuLists);
            this.menuList = menuLists;
          } else {
            alert('暂无菜单栏数据');
          }
      //

      const data = await queryMenuTree();
      var that = this;
      if (data.code == 200) {
        if (data.result.length != 0) {
          let menuLists = data.result.filter((value) => {
            return value.pid == 1;
          });

          that.menuList = menuLists;
          that.setMenuTree(menuLists);
        } else {
          console.log('接口报错');
          alert('暂无菜单栏数据');
        }
      });
      }
    },
    setMenuTree(res) {
      console.log(res);
      for (var i = 0; i < res.length; i++) {
        for (var j = 0; j < this.listMenu.length; j++) {
          if (this.listMenu[j].label == res[i].cnName) {
            this.listMenu[j].url = res[i].perms;
          }
        }
      }
      console.log(this.listMenu);
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
@@ -253,11 +271,6 @@
        this.$router.push(index);
      }
    },
    getUserPerms() {
      getPerms().then((res) => {
        if (res.code == 200) this.$store.commit('getPermsEntity', res.result);
      });
    },
  },
  watch: {
    $route() {
@@ -287,9 +300,9 @@
  .logo {
    width: 80px;
    height: 80px;
    margin-left: 30px;
    margin-top: 33px;
    background: url('../assets/img/图层 34.png') no-repeat 100% 100%;
    // margin-left: 30px;
    // margin-top: 33px;
    // background: url('../assets/img/图层 34.png') no-repeat 100% 100%;
  }
  // .rightWrapper {
  //   width: 70%;

 src/router/index.js

@@ -20,6 +20,8 @@
import tokentool from '@/views/maintenance/tokentool.vue'; //token å·¥å…·
import mochaitmo from '@/views/maintenance/mochaitmo.vue'; //运维管理主页面
//数据管理模块

import dataController from '../views/datamanage/dataController.vue';
import catalogueManage from '../views/datamanage/catalogueManage.vue'; //数据管理-目录管理
import dataUpdata from '../views/datamanage/dataUpdata.vue'; //数据管理-数据上传
import dataLoading from '../views/datamanage/dataLoading.vue'; //数据管理-数据入库
@@ -75,6 +77,16 @@
        },
      },
      {
        path: '/dataController',
        component: dataController,
        name: 'dataController',
        meta: {
          title: '数据管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

      {
        path: '/Synthesis',
        name: 'Synthesis',
        component: Synthesis,

 src/views/datamanage/SpatialData.vue

@@ -1,362 +1,219 @@
<template>
  <div class="authorityManagement_box">
    <My-bread :list="['数据管理', '空间数据']"></My-bread>
  <div class="Spatialbox">
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.dataRetrieval')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="searchComp">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
        <el-form-item label="关键字" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            @click="submitForm('ruleForm')"
            icon="el-icon-search"
            type="primary"
            size="small"
            >查询</el-button
          >
          <el-button
          
            @click="resetForm('ruleForm')"
            icon="el-icon-refresh"
            type="info"
            size="small"
            >重置</el-button
          >
          <el-button
          v-if="btnStatus.delete"
            @click="DelFormData"
            icon="el-icon-delete"
            type="danger"
            size="small"
            >删除</el-button
          >
          <el-button
            v-if="!FBtest"
            @click="testfb()"
            icon="el-icon-position"
            type="success"
            size="small"
            >发布</el-button
          >
          <el-button
            v-else
            @click="testfb()"
            icon="el-icon-position"
            type="success"
            size="small"
            >取消</el-button
          >
        </el-form-item>
        <el-form-item>
          <span v-if="FBtest">
            <i class="dotClass" style="background-color: springgreen"></i>
          </span>
          <span v-else>
            <i class="dotClass" style="background-color: gray"></i>
          </span>
        </el-form-item>
        <el-form-item v-if="FBtest">
          å‘布地址：http://192.168.20.39/SG/default/streamer.ashx
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="leftTree">
    <div class="spatialContent">
      <div class="spatial_leftTree">
        <el-tree
          :data="data"
          :data="tree"
          :props="defaultProps"
          :default-expanded-keys="[1]"
          node-key="id"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="rightTable">
        <div class="table_box">
      <div class="spatial_rightContent">
        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
            <el-input v-model="ruleForm.name" :placeholder="$t('common.choose')" />
          </el-form-item>
          <el-form-item>
            <el-button
              @click="submitForm('ruleForm')"
              icon="el-icon-search"
              class="primary"
              size="small"
              >{{$t('common.iquery')}}</el-button
            >
            <el-button
              @click="resetForm('ruleForm')"
              icon="el-icon-refresh"
              type="info"
              size="small"
              >{{$t('common.reset')}}</el-button
            >

            <el-button
              v-if="btnStatus.download"
              icon="el-icon-position"
              type="success"
              size="small"
              >{{$t('common.download')}}</el-button
            >
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
        <div style="height: 85%">
          <el-table
            ref="filterTable"
            :data="tableData"
            height="99%"
            height="90%"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column width="50" type="index" label="序号" />
            <el-table-column min-width="150" prop="pipename" label="管道名称" />
            <el-table-column width="60" type="index" :label="$t('common.index')" />
            <el-table-column
              min-width="150"
              v-if="tableType == '场站点'"
              prop="sitename"
              label="场站名称"
            />
            <el-table-column
              min-width="150"
              v-if="tableType == '场站点'"
              prop="type"
              label="场站类型"
            />
            <el-table-column
              min-width="150"
              v-if="tableType == '管道中心线'"
              prop="seriesname"
              label="站列名称"
            />
            <el-table-column
              min-width="50"
              v-if="tableType == '管道中心线'"
              prop="stationvalue"
              label="站列里程"
            />
            <el-table-column
              min-width="50"
              v-if="tableType == '管道中心线'"
              prop="transportm"
              label="输送介质"
            />
            <el-table-column
              min-width="50"
              v-if="tableType == '管道中心线'"
              prop="diameter"
              label="管径"
            />
            <el-table-column
              min-width="150"
              v-if="tableType == '标桩'"
              prop="name"
              label="标桩名称"
            />
            <el-table-column
              min-width="150"
              v-if="tableType == '标桩'"
              prop="type"
              label="标桩类型"
            />

            <el-table-column
              min-width="70"
              prop="create_user"
              label="入库人员"
            />
            <el-table-column
              min-width="100"
              prop="create_time"
              label="入库时间"
            />
            <el-table-column min-width="80" label="操作">
              v-for="(item, index) in attributeData"
              :key="index"
              :label="item.alias"
              :prop="item.field"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column min-width="80" :label="$t('common.operate')">
              <template slot-scope="scope">
                <el-link @click="showDetail(scope.$index, scope.row)"
                  >查看</el-link
                <el-link class="elLink"

                  @click="showDetail(scope.$index, scope.row)"
                  >{{$t('common.details')}}</el-link
                >
                <el-link
                  @click="handleEdit(scope.$index, scope.row)"
                  style="margin-left: 10px"
                  >修改</el-link
                <el-link class="elLink"
                  @click="dialogFormVisible = true"
                  style="margin-left: 20px;  "
                  >{{$t('common.enclosure')}}</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="margin-top: 20px; margin-left: 200px"
          class="pagination_box"
        >
          <el-pagination
            v-if="changePag"
            @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 style="margin-top: 20px" class="pagination_box">
            <el-pagination
              v-if="changePag"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.listData.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="this.listData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="infoBox" v-show="showinfoBox">
        <div class="infoBox" v-show="showinfoBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>详细信息</span>
          <span>{{$t('common.details')}}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>管道名称：{{ itemdetail.pipename }}</p>
          <el-divider></el-divider>
          <div v-if="tableType == '场站点'">
            <p>场站名称：{{ itemdetail.sitename }}</p>
            <el-divider></el-divider>
            <p>场站类型：{{ itemdetail.type }}</p>
            <el-divider></el-divider>
          </div>
          <div v-if="tableType == '管道中心线'">
            <p>站列名称：{{ itemdetail.seriesname }}</p>
            <el-divider></el-divider>
            <p>站列里程：{{ itemdetail.stationvalue }}</p>
            <el-divider></el-divider>
            <p>输送介质：{{ itemdetail.transportm }}</p>
            <el-divider></el-divider>
            <p>管径：{{ itemdetail.diameter }}</p>
            <el-divider></el-divider>
          </div>
          <div v-if="tableType == '标桩'">
            <p>标桩名称：{{ itemdetail.name }}</p>
            <el-divider></el-divider>
            <p>标桩类型：{{ itemdetail.type }}</p>
            <el-divider></el-divider>
          </div>
          <p>入库人员：{{ itemdetail.create_user }}</p>
          <el-divider></el-divider>
          <p>入库时间：{{ itemdetail.create_time }}</p>
          <ul>
            <li v-for="(item, index) in itemdetail">
              <p>
                <label> {{ item.label }}:</label>
                <label class="boxlabel">{{ item.value }}</label>
              </p>
              <el-divider></el-divider>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
    <el-dialog title="修改详情" :visible.sync="dialogFormVisible">
      <el-form :model="upform">
        <el-form-item label="管道名称" :label-width="formLabelWidth">
          <el-input v-model="upform.pipename" autocomplete="off"></el-input>
    <el-dialog :title="$t('common.attachinform')" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item >
          <el-input
            v-model="formInline.file"
            style="width: 300px; margin-right: 20px"
            :placeholder="$t('common.choose')"
            disabled
          ></el-input>
          <input
            name="file1"
            type="file"
            id="insertFile"
            multiple="multiple"
            style="display: none"
              @change="insertFile( )"
          />
          <el-link  @click="getInsertFile( )" :underline="false"
            ><i class="el-icon-folder-opened"></i
          ></el-link>
        </el-form-item>
        <el-form-item
          v-if="tableType == '场站点'"
          label="场站名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.sitename" autocomplete="off"></el-input>
        <el-form-item>
          <el-row  >
            <el-col :span="3"> <el-link  class="elLink" :underline="false" >{{$t('common.append')}}</i></el-link></el-col>
            <el-col :span="3">   <el-link  class="elLink" :underline="false" >{{$t('common.delete')}}</i></el-link></el-col>
            <el-col :span="3">  <el-link  class="elLink" :underline="false" >{{$t('common.reset')}}</i></el-link></el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          v-if="tableType == '场站点'"
          label="场站类型"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.type" autocomplete="off"></el-input>
        <el-form-item>
 <el-table
            ref="filterTable"
            height="99%"
            border
            style="width: 100%"
          >
          <el-table-column width="60" type="index" :label="$t('common.index')" />
              <el-table-column  prop="date"
         :label="$t('common.fileNme')"
         />

      <el-table-column
        prop="name"
        :label="$t('common.filePath')"
        />

           </el-table>
        </el-form-item>
        <el-form-item
          v-if="tableType == '管道中心线'"
          label="站列名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.seriesname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="tableType == '管道中心线'"
          label="站列里程"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.stationvalue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="tableType == '管道中心线'"
          label="输送介质"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.transportm" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="tableType == '管道中心线'"
          label="管径"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.diameter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="tableType == '标桩'"
          label="标桩名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="tableType == '标桩'"
          label="标桩类型"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.type" autocomplete="off"></el-input>
        <el-form-item>

<el-row :gutter="20">
  <el-col :span="12" :offset="8">  <el-button  class="primary" @click="dialogFormVisible = false">确认</el-button>  <el-button type="info"   @click="dialogFormVisible = false">取消</el-button></el-col>
</el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateForm">ç¡® å®š</el-button>
        <el-button @click="dialogFormVisible = false">取 æ¶ˆ</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery';
import {
  querySitePointCount,
  querySitePoint,
  queryMarkerCount,
  queryMarker,
  queryStationSeries,
  queryStationSeriesCount,
  UpdateSitePoint,
  UpdateStationSeries,
  UpdatgeMarker,
  dltSitePoint,
  dltStationSeries,
  dltMarker,
} from "../../api/api";
  dataQuery_selectTabs,
  dataQuery_selectDomains,
  dataQuery_selectFields,
  dataQuery_selectByPage,
} from '../../api/api';

import catalogueTree from "../../components/catalogueTree.vue";
import MyBread from "../../components/MyBread.vue";
import catalogueTree from '../../components/catalogueTree.vue';
import MyBread from '../../components/MyBread.vue';
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "dataSearch",
  name: 'dataSearch',
  components: { MyBread, catalogueTree },
  data() {
    return {
      data: [
      formInline: {
        file: '',
      },
      tree: [
        {
          id: 1,
          label: "空间入库数据",
          children: [
            {
              label: "场站点",
            },
            {
              label: "管道中心线",
            },
            {
              label: "标桩",
            },
          ],
          tabDesc: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          tabDesc: '业务数据',
          value: 'BS',
          children: [],
        },
      ],
      FBtest: false,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      upform: {
        gid: "",
        pipename: "",
        sitename: "",
        type: "",
        seriesname: "",
        stationvalue: "",
        transportm: "",
        diameter: "",
        name: "",
      },
      tableType: null,
      defaultProps: {
        children: "children",
        label: "label",
        children: 'children',
        label: 'tabDesc',
      },
      changePag: true,
      showinfoBox: false,
      itemdetail: {},
      ruleForm: {
        name: "",
      },
      count: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      currentPage: 1,
      searchName: "",
      multipleSelection: [],
      btnStatus: {
        select: false,
        delete: false,
@@ -365,60 +222,172 @@
        insert: false,
        update: false,
      },
      tableType: null,
      ruleForm: {
        name: null,
      },
      FBtest: false,
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      upform: {
        gid: '',
        pipename: '',
        sitename: '',
        type: '',
        seriesname: '',
        stationvalue: '',
        transportm: '',
        diameter: '',
        name: '',
      },

      changePag: true,
      showinfoBox: false,
      itemdetail: {},

      tableData: [],
      attributeData: [],
      currentPage: 1,
      searchName: '',
      multipleSelection: [],
      filedsLayer: null,
      count: 0,
      listData: {
        pageSize: 10,
        pageIndex: 1,
        name: null,
        filter: null,
        wkt: null,
      },
    };
  },
  created() {
    // this.getSPData(10, 1, "");
    // this.getSPCount("");
    this.showPermsBtn();
    this.getTreeDataAll();
  },
  methods: {
    //附件=>文件选择
    getInsertFile() {
      $('#insertFile').click();
    },
    insertFile() {
      var val = document.getElementById('insertFile').files;
      if (!val || !val.length) return;

      this.formInline.file = val[0].name;
    },
    //获取目录树数据
    async getTreeDataAll() {
      const data = await dataQuery_selectTabs();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      var option = data.result;

      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        if (option[i].ns == 'bd') {
          this.tree[0].children.push(val_Data);
        } else {
          this.tree[1].children.push(val_Data);
        }
      }
    },
    //授权管理
    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));
        .map((item) => {
          console.log(item);
          this.btnStatus[item.tag.substr(1)] = true;
        });
    },
    //树点击事件
    handleNodeClick(data) {
      this.closeDetial();
      this.changePag = false;
      this.tableData = [];
      this.currentPage = 1;
      switch (data.label) {
        case "空间入库数据":
          this.tableType = null;
          // this.$nextTick(() => {
          //   this.changePag = true;
          // });
          break;
        case "场站点":
          this.tableType = "场站点";
          this.getSPData(10, 1, "");
          this.getSPCount("");
          // this.$nextTick(() => {
          //   this.changePag = true;
          // });
          break;
        case "管道中心线":
          this.tableType = "管道中心线";
          this.getSSData(10, 1, "");
          this.getSSCount("");
          // this.$nextTick(() => {
          //   this.changePag = true;
          // });
          break;
        case "标桩":
          this.tableType = "标桩";
          this.getMData(10, 1, "");
          this.getMCount("");
          break;
      }
      this.$nextTick(() => {
        this.changePag = true;
      });
    },
      //判断点击是否为子节点
      if (data.children != null) return;
      this.listData.name = data.entity; //要查询表格类型；

      this.filedsLayer = this.getCollapseDomFiled(); //获取每个表字段名称及阈值
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    //获取表格信息
    async getCollapseTable(res) {
      res.then((val) => {
        this.attributeData = val;
      });
      if (this.ruleForm.name != null) {
        this.listData.filter = 'name like ' + this.ruleForm.name;
      } else {
        this.listData.filter = null;
      }

      const data = await dataQuery_selectByPage(this.listData);
      if (data.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      var res_val = this.attributeData;
      this.count = data.count;
      for (var i in data.result) {
        let val_Data = data.result[i];

        for (var j in res_val) {
          if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {
            val_Data[res_val[j].field] = res_val[j].domainNa;
          }
        }
      }
      this.tableData = data.result;
    },
    //获取每个表字段名称及阈值
    async getCollapseDomFiled() {
      //查询字段信息;
      const fileds = await dataQuery_selectFields({
        name: this.listData.name,
      });
      if (fileds.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }

      //查询阈值信息；
      const domains = await dataQuery_selectDomains({
        name: this.listData.name,
      });
      if (domains.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      var data1 = fileds.result;
      var data2 = domains.result;
      var std = [];
      for (var i in data1) {
        if (data1[i].showtype == 1) {
          if (data1[i].domainNa != null) {
            data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
          }
          std.push(data1[i]);
        }
      }
      return std;
    },
    //值域字段匹配
    getDomainNaFild(res, result) {
      for (var i in result) {
        if (result[i].domName == res) {
          return result[i].codeDesc;
        }
      }
      return null;
    },
    // è¯·æ±‚场站点内容
    getSPData(size, num, name) {
      querySitePoint(size, num, name).then((res) => {
@@ -458,48 +427,30 @@
    },

    // å…³é”®å­—查询
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchName = this.ruleForm.name.trim();
          switch (this.tableType) {
            case "场站点":
              this.getSPData(10, 1, this.searchName);
              this.getSPCount(this.searchName);
              break;
            case "管道中心线":
              this.getSSData(10, 1, this.searchName);
              this.getSSCount(this.searchName);
              break;
            case "标桩":
              this.getMData(10, 1, this.searchName);
              this.getMCount(this.searchName);
              break;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    submitForm() {
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    //分页点击事件
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.listdata.pageIndex = 1;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    // é‡ç½®æŸ¥è¯¢
    resetForm(formName) {
      this.searchName = "";
      this.searchName = '';
      this.$refs[formName].resetFields();
      switch (this.tableType) {
        case "场站点":
          this.getSPData(10, 1, "");
          this.getSPCount("");
          break;
        case "管道中心线":
          this.getSSData(10, 1, "");
          this.getSSCount("");
          break;
        case "标桩":
          this.getMData(10, 1, "");
          this.getMCount("");
          break;
      }
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },

    // å‘布按钮
@@ -513,9 +464,9 @@
      //     .then(() => {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      setTimeout(() => {
        loading.close();
@@ -527,9 +478,18 @@
    },
    // æŸ¥çœ‹ç•Œé¢
    showDetail(index, row) {
      // console.log(index, row);
      console.log(index, row);
      console.log(this.attributeData);
      this.showinfoBox = true;
      this.itemdetail = row;

      var std = [];
      for (var i in this.attributeData) {
        std.push({
          label: this.attributeData[i].alias,
          value: row[this.attributeData[i].field],
        });
      }
      this.itemdetail = std;
    },
    // å…³é—­æŸ¥çœ‹
    closeDetial() {
@@ -545,15 +505,15 @@
    // æäº¤ä¿®æ”¹
    updateForm() {
      let params = {};
      this.$confirm("是否确定编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('是否确定编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.dialogFormVisible = false;
          switch (this.tableType) {
            case "场站点":
            case '场站点':
              params = {
                gid: this.upform.gid,
                pipename: this.upform.pipename,
@@ -563,15 +523,15 @@
              UpdateSitePoint(params).then((res) => {
                if (res.data == 1) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                    message: '修改成功',
                    type: 'success',
                  });
                }
                this.getSPData(10, 1, "");
                this.getSPCount("");
                this.getSPData(10, 1, '');
                this.getSPCount('');
              });
              break;
            case "管道中心线":
            case '管道中心线':
              params = {
                gid: this.upform.gid,
                pipename: this.upform.pipename,
@@ -583,15 +543,15 @@
              UpdateStationSeries(params).then((res) => {
                if (res.data == 1) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                    message: '修改成功',
                    type: 'success',
                  });
                }
                this.getSSData(10, 1, "");
                this.getSSCount("");
                this.getSSData(10, 1, '');
                this.getSSCount('');
              });
              break;
            case "标桩":
            case '标桩':
              params = {
                gid: this.upform.gid,
                pipename: this.upform.pipename,
@@ -601,12 +561,12 @@
              UpdatgeMarker(params).then((res) => {
                if (res.data == 1) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                    message: '修改成功',
                    type: 'success',
                  });
                }
                this.getMData(10, 1, "");
                this.getMCount("");
                this.getMData(10, 1, '');
                this.getMCount('');
              });
              break;
          }
@@ -633,47 +593,47 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].gid);
      }
      this.$confirm("确定是否删除所选内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('确定是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          switch (this.tableType) {
            case "场站点":
            case '场站点':
              dltSitePoint(std).then((res) => {
                if (res.data !== 0) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                    message: '删除成功',
                    type: 'success',
                  });
                }
                this.getSPData(10, 1, "");
                this.getSPCount("");
                this.getSPData(10, 1, '');
                this.getSPCount('');
              });
              break;
            case "管道中心线":
            case '管道中心线':
              dltStationSeries(std).then((res) => {
                if (res.data !== 0) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                    message: '删除成功',
                    type: 'success',
                  });
                }
                this.getSSData(10, 1, "");
                this.getSSCount("");
                this.getSSData(10, 1, '');
                this.getSSCount('');
              });
              break;
            case "标桩":
            case '标桩':
              dltMarker(std).then((res) => {
                if (res.data !== 0) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                    message: '删除成功',
                    type: 'success',
                  });
                }
                this.getMData(10, 1, "");
                this.getMCount("");
                this.getMData(10, 1, '');
                this.getMCount('');
              });
              break;
          }
@@ -688,168 +648,201 @@
        })
        .catch(() => {});
    },
    // æ¡æ•°ä¿®æ”¹
    handleSizeChange(val) {
      this.pageSize = val;
      switch (this.tableType) {
        case "空间入库数据":
          break;
        case "场站点":
          this.getSPData(this.pageSize, 1, "");
          this.getSPCount("");

          break;
        case "管道中心线":
          this.getSSData(this.pageSize, 1, "");
          this.getSSCount("");
          break;
        case "标桩":
          this.getMData(this.pageSize, 1, "");
          this.getMCount("");
          break;
      }
    },
    // é¡µæ•°ä¿®æ”¹
    handleCurrentChange(val) {
      this.pageNum = val;
      switch (this.tableType) {
        case "空间入库数据":
          break;
        case "场站点":
          this.getSPData(this.pageSize, this.pageNum, "");
          this.getSPCount("");
          break;
        case "管道中心线":
          this.getSSData(this.pageSize, this.pageNum, "");
          this.getSSCount("");
          break;
        case "标桩":
          this.getMData(this.pageSize, this.pageNum, "");
          this.getMCount("");
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .searchComp {
    margin: 10px auto;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    .el-form-item {
      margin: 5px;
    }
    .el-input {
      width: 467px;
    }
  }
  .bottom {
    width: 100%;
    height: 85%;
    display: flex;
    .leftTree {
      width: 344px;
      background: #f4f8ff;
      border-radius: 10px;
      overflow: auto;
    }
    .rightTable {
      height: 100%;
      width: 77.8%;
      .table_box {
        width: 100%;
        height: 93%;
        margin: 0 auto;
        background: #fff;
        .el-table {
          height: 100%;
        }
        .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: 0;
        }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        .el-table /deep/ .el-table__header tr,
        .el-table /deep/ .el-table__header th {
          height: 40px;
        }
        .el-table__body tr,
        .el-table__body td {
          height: 40px;
          padding: 0px;
        }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š
.Spatialbox {
  height: 81%;
  width: 97%;
  position: absolute;

        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .el-table::before {
          height: 0;
        }
      }
  box-sizing: border-box;
  .spatialContent {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;

    .spatial_leftTree {
      width: 15%;
      height: 95%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
    }
    .spatial_rightContent {
      width: 80%;
      height: 95%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
    }
  }
  .infoBox {
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
  .eldivider {
    margin-top: 0px;
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /*修改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;
    }
  }
    .infoBox {
    width: 500px;
    border: 1px solid #eee;

    position: absolute;
    z-index: 100;
    top: 15%;
    right: 25%;
    background-color: #fff;
    right: 15%;
    background-color: #303030;
    color: white;
    .el-card {
      background-color: transparent;
         color: white;
      span {
        font-size: 16px;
        font-weight: 600;
           color: white;
      }
    }
    .contentBox {
      margin: 0 aotu 10px;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
   color: white;
        font-size: 14px;
      }
    }
  }
  .dotClass {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    margin-top: 15px;
    margin-left: 10px; //这个用于圆点居中

  .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;
    }
  }

 .elLink{
    color: white !important;
  }
  .el-icon-folder-opened{
    color: white;
  }

  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
    /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }

}
</style>

 src/views/datamanage/catalogueManage.vue

@@ -1,12 +1,14 @@
<template>
  <div class="cataSettings_box">
    <div class="cataSettings_tree">
      <My-bread :list="['数据管理', '目录管理']"></My-bread>
      <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" -->
      <!-- >保存</el-button -->
      <!-- > -->
      <el-divider />
      <div class="cataTreeBox">
  <div class="cataLogBox">
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.catalogueManage')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="cataLogContent">
      <div class="cataLog_leftTree">
        <el-tree
          ref="tree"
          :props="defaultProps"
@@ -40,24 +42,25 @@
          </span>
        </el-tree>
      </div>
    </div>
    <div class="itemSettings">
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="form_box">
      <div class="cataLog_rightContent">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('dataManage.dictionaryManageObj.particulars')
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider />
        <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
          <!-- <el-form-item label="目录编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.id" disabled />
          </el-form-item> -->
          <el-form-item
            prop="name"
            label="目录名称"
            :label="$t('dataManage.dataUpObj.directoryName')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.name" />
          </el-form-item>
          <el-form-item label="目录说明" :label-width="formLabelWidth">
          <el-form-item
            :label="$t('dataManage.dataUpObj.catalogDescription')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="itemdetail.descr"
              type="textarea"
@@ -65,45 +68,72 @@
              style="height: 100%; overflow: auto"
            />
          </el-form-item>
          <el-form-item label="目录备注" :label-width="formLabelWidth">
          <el-form-item
            :label="$t('dataManage.dataUpObj.catalogRemarks')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.bak" type="textarea" resize="none" />
          </el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="updCata('itemdetail')"
              >保存</el-button
            >
            <el-button type="primary" @click="reset('itemdetail')"
              >取消</el-button
            >
            <el-button class="primary" @click="updCata('itemdetail')">{{
              $t('common.preservation')
            }}</el-button>
            <el-button type="info" @click="reset">{{
              $t('common.cancel')
            }}</el-button>
          </div>
        </el-form>
      </div>
    </div>
    '
    <!-- <div class="cataSettings_tree"> -->

    <el-dialog title="新增子目录" :visible.sync="dialogFormVisible">
    <!-- <div class="cataTreeBox">

      </div> -->
    <!-- </div> -->
    <!-- <div class="itemSettings"> -->
    <!-- <div class="title_box">
        <h4>详细信息</h4>
      </div> -->
    <!-- <div class="form_box">

      </div> -->
    <!-- </div> -->
    <el-dialog
      :title="$t('dataManage.dataUpObj.newDirectory')"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item
          label="目录名称"
          :label="$t('dataManage.dataUpObj.directoryName')"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目录说明" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.dataUpObj.catalogDescription')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.descr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目录备注" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.dataUpObj.catalogRemarks')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button @click="resetForm('ruleForm')">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          type="primary"
          class="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
          >{{ $t('common.preservation') }}</el-button
        >
      </div>
    </el-dialog>
@@ -118,25 +148,25 @@
  updateDirTrees,
  insertDir,
  deleteDir,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
  name: "catalogueManage",
  name: 'catalogueManage',
  components: {
    MyBread,
  },
  data() {
    let validName = (rule, value, callback) => {
      if (value === "" || value === null || value === undefined) {
        return callback(new Error("目录名称不能为空"));
      if (value === '' || value === null || value === undefined) {
        return callback(new Error('目录名称不能为空'));
      } else {
        callback();
      }
    };
    return {
      defaultProps: {
        children: "children",
        label: "name",
        children: 'children',
        label: 'name',
      },
      fullscreenLoading: false,
      oriData: [], //原始树数据
@@ -144,21 +174,21 @@
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {},
      backUpData: "",
      formLabelWidth: "130px",
      delChildID: "",
      backUpData: '',
      formLabelWidth: '150px',
      delChildID: '',
      delChildIDs: [],
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        name: "",
        descr: "",
        bak: "",
        name: '',
        descr: '',
        bak: '',
      },
      rules: {
        name: [{ required: true, validator: validName, trigger: "blur" }],
        name: [{ required: true, validator: validName, trigger: 'blur' }],
      },
    };
  },
@@ -177,16 +207,23 @@
          this.newData = res.result;
          this.dirList = this.treeData(res.result);
        } else {
          console.log("接口报错");
          console.log('接口报错');
        }
      });
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.resetForm();
        })
        .catch((_) => {});
    },
    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属性，并赋值
        branchArr.length > 0 ? (father.children = branchArr) : ''; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        // å±žäºŽåŒä¸€å¯¹è±¡é—®é¢˜ï¼Œä¾‹å¦‚：令 a=b、c=1 ï¼Œç„¶åŽå†ä»¤ b.c=c ï¼Œ é‚£ä¹ˆ a.c=b.c=c=1 ï¼›åŒç†ï¼ŒåŽç»­ä»¤ c.d=2 ,那么 a.c.d ä¹Ÿæ˜¯=2；
        // ç”±æ­¤å¾ªçŽ¯å¤šæ¬¡åŽï¼Œå°±èƒ½å½¢æˆç›¸åº”的树形数据结构
        return father.pid == 0; // è¿”回一级菜单
@@ -200,6 +237,7 @@
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.ruleForm = {};
      this.$nextTick(() => {
        this.ruleForm = {};
        this.$refs[formName].resetFields();
@@ -216,8 +254,8 @@
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    this.$message({
                      message: "添加成功",
                      type: "success",
                      message: '添加成功',
                      type: 'success',
                    });
                    this.itemdetail = {};
                    this.ruleForm = {};
@@ -228,7 +266,7 @@
              })
              .catch((res) => {
                this.itemdetail = {};
                this.$message.error("添加失败");
                this.$message.error('添加失败');
                this.fullscreenLoading = false;
                console.log(res);
              });
@@ -240,10 +278,10 @@
      });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('此操作将删除该节点, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //兄弟重新排序
@@ -265,20 +303,20 @@
              console.log(res);
              if (res[0].code == 200 && res[1].code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                  type: 'success',
                  message: '删除成功!',
                });
                this.itemdetail = {};
              } else if (res[0].code == 200) {
                this.$message.error("删除成功，位置调整失败");
                this.$message.error('删除成功，位置调整失败');
              } else if (res[1].code == 200) {
                this.$message.error("删除失败,位置调整成功");
                this.$message.error('删除失败,位置调整成功');
              } else {
                this.$message.error("删除失败");
                this.$message.error('删除失败');
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
              this.$message.error('删除失败');
              this.itemdetail = {};
            });

@@ -286,7 +324,7 @@
          this.delChildIDs = [];
        })
        .catch(() => {
          this.$message("已取消删除");
          this.$message('已取消删除');
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
@@ -328,20 +366,20 @@
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("此操作将保存目录更改, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('此操作将保存目录更改, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          // çˆ¶èŠ‚点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          //变更节点
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
            if (dropType != 'inner') {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
@@ -365,7 +403,7 @@
          this.sendChange();
        })
        .catch(() => {
          this.$message("已取消更改");
          this.$message('已取消更改');
          this.dirList = this.old_dirDat; //将备份的dir重新赋值
        });
    },
@@ -376,11 +414,11 @@
            this.getDirTree();
            return;
          } else {
            alert("调整失败，请重试！");
            alert('调整失败，请重试！');
          }
        })
        .catch(() => {
          alert("修改失败，请重试！");
          alert('修改失败，请重试！');
        });
    },
    handleNodeClick(data) {
@@ -405,7 +443,7 @@
                }, 500);
              })
              .catch((res) => {
                alert("修改失败，请重试！");
                alert('修改失败，请重试！');
                this.fullscreenLoading = false;
              });
          } else {
@@ -415,8 +453,9 @@
      });
    },
    reset(formName) {
      this.itemdetail = {};
      this.$refs[formName].resetFields();
      if (this.backUpData != "") {
      if (this.backUpData != '') {
        this.itemdetail = JSON.parse(this.backUpData);
      }
    },
@@ -428,93 +467,147 @@
</script>

<style lang="less" scoped>
.cataSettings_box {
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .cataSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
.cataLogBox {
  height: 80%;
  width: 97%;

  position: absolute;
  .cataLogContent {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    .cataLog_leftTree {
      width: 15%;
      height: 96%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
    }
    .cataTreeBox {
      height: 88%;
      width: 100%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin: 0 10px 0 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        }
      }
    .cataLog_rightContent {
      width: 80%;
      height: 96%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
    }
  }
  .itemSettings {
    width: calc(100% - 344px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
    }
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-input,
      /deep/ .el-textarea {
        width: 400px;
      }
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  // .cataSettings_tree {
  //   position: relative;
  //   width: 344px;
  //   height: 100%;
  //   background: rgb(240, 242, 245);
  //   padding: 20px;
  //   border-radius: 10px;
  //   box-sizing: border-box;
  //   overflow: auto;
  //   .saveBtn {
  //     position: absolute;
  //     left: 250px;
  //     top: 23px;
  //   }
  //   .cataTreeBox {
  //     height: 88%;
  //     width: 100%;
  //     overflow: auto;
  //     .el-tree {
  //       background: transparent;
  //       font-size: 15px;
  //       font-family: Microsoft YaHei;
  //       font-weight: 400;
  //       color: #000000;
  //       /deep/ .el-tree-node {
  //         padding-top: 10px;
  //         // padding-bottom: 10px;
  //       }
  //       /deep/ .el-tree-node:focus > .el-tree-node__content {
  //         background-color: #b9b9b9;
  //       }
  //       /deep/ .el-tree-node__content:hover {
  //         background-color: rgb(153, 153, 153);
  //       }
  //       .btnBox {
  //         margin: 0 10px 0 5px;
  //         .el-button + .el-button {
  //           margin-left: 5px;
  //         }
  //       }
  //     }
  //   }
  // }
  // .itemSettings {
  //   width: calc(100% - 344px);
  //   border-radius: 10px;
  //   background: rgb(240, 242, 245);
  //   margin-left: 10px;
  //   height: 100%;
  //   padding: 10px;
  //   box-sizing: border-box;
  //   .title_box {
  //     background: #fff;
  //     padding: 10px;
  //     margin-bottom: 24px;
  //     display: flex;
  //     border-radius: 10px;
  //     border: 1px solid rgb(202, 201, 204);
  //     box-sizing: border-box;
  //   }
  //   .form_box {
  //     border: 1px solid rgb(202, 201, 204);
  //     border-radius: 10px;
  //     background: #fff;
  //     padding-top: 30px;
  //     box-sizing: border-box;
  //     width: 100%;
  //     .el-input,
  //     /deep/ .el-textarea {
  //       width: 400px;
  //     }
  //     .btnBox {
  //       margin: 0 270px 20px;
  //       width: 200px;
  //       display: flex;
  //       justify-content: space-between;
  //     }
  //   }
  // }
  // /deep/ .el-dialog__body {
  //   padding: 0 30px 0 0;
  // }
  .el-icon-delete-solid {
    color: gray;
  }
  /deep/ .el-dialog__body {
    padding: 0 30px 0 0;
  .el-icon-circle-plus {
    color: gray;
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
}
</style>

 src/views/datamanage/dataController.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<template>
  <div class="mochaitmo_Box">
    <div class="left_tree">
      <el-card class="el-card-define">
        <div class="card_tree">
          <el-menu
            active-text-color="#ffd04b"
            class="el-menu-vertical-demo"
            :default-active="activeIndex"
            background-color="transparent"
            text-color="#fff"
            @select="handleselect"
          >
            <customElMenu :menuData="menuList"></customElMenu>
          </el-menu>
        </div>
      </el-card>
    </div>
    <div class="right_page">
      <el-card class="el-card-define">
        <data-updata v-if="setMenuFlag == 'dataUpdata'"></data-updata>
        <catalogue-manage
          v-if="setMenuFlag == 'catalogueManage'"
        ></catalogue-manage>

        <spatial-data v-if="setMenuFlag == 'SpatialData'"></spatial-data>
        <version-manage v-if="setMenuFlag == 'versionManage'"></version-manage>
        <domain-manage v-if="setMenuFlag == 'domainManage'"></domain-manage>
        <dictionary-manage
          v-if="setMenuFlag == 'dictionaryManage'"
        ></dictionary-manage>
        <metadata-manage
          v-if="setMenuFlag == 'metadataManage'"
        ></metadata-manage>
        <style-manage v-if="setMenuFlag == 'styleManage'"></style-manage>
        <data-loader v-if="setMenuFlag == 'dataLoader'"></data-loader>
      </el-card>
    </div>
  </div>
</template>

<script>
import { selectMenuRecursive } from '../../api/api';
import customElMenu from '../../components/customElMenu.vue';
import dataUpdata from '@/views/datamanage/dataUpdata.vue'; //数据管理-数据上传
import catalogueManage from '@/views/datamanage/catalogueManage.vue'; //数据管理-目录管理
import SpatialData from '@/views/datamanage/SpatialData.vue'; //数据管理-数据检索
import versionManage from '@/views/datamanage/versionManage.vue'; //数据管理-版本管理
import domainManage from '@/views/datamanage/domainManage.vue'; //数据管理-值域管理
import dictionaryManage from '@/views/datamanage/dictionaryManage.vue'; //数据管理-字典管理
import metadataManage from '@/views/datamanage/metadataManage.vue'; //数据管理-元数据管理
import styleManage from '@/views/datamanage/styleManage.vue'; //数据管理-样式管理
import dataLoader from '@/views/datamanage/dataLoader.vue'; //
export default {
  components: {
    customElMenu,
    dataUpdata,
    catalogueManage,
    SpatialData,
    versionManage,
    domainManage,
    dictionaryManage,
    metadataManage,
    styleManage,
    dataLoader,
  },
  data() {
    return {
      setMenuFlag: ' ',
      activeIndex: ' ',
      oriData: [], //原始树数据
      dirData: [], //el树数据
      newData: [], //拖动后数据
      lang: 'zh',

      menuList: [],
      editTitle: '',
      showPopover: false,
      showEditInfoWrapper: false,
      showEdit: false,
      editMenu: false,
      editCatalogue: false,
      editUnit: false,
      itemdetail: {},
      formLabelWidth: '70px',
    };
  },
  created() {},
  mounted() {
    this.getTreeData();
  },
  methods: {
    //获取树
    async getTreeData() {
      const res = await selectMenuRecursive({ name: '数据管理' });

      if (res.code == 200) {
        if (res.result.length != 0) {
          let menuList = res.result.filter((value) => {
            return value.type == 1;
          });
          this.menuList = this.treeData(menuList);
          this.setViewController(this.menuList[0]);
        } else {
          alert('暂无菜单栏数据');
        }
      } else {
        console.log('接口报错');
      }

      // this.treeList = this.treeData(data.result);
    },
    setViewController(res) {
      if (res.children != null) {
        this.setViewController(res.children[0]);
      } else {
        this.$store.state.currentPerms = res.perms;
        this.setMenuFlag = res.url;
        this.activeIndex = res.url;
      }
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      // console.log(cloneData);
      if (cloneData.length != 0) {
        return cloneData.filter((father) => {
          // å¾ªçŽ¯æ‰€æœ‰é¡¹
          let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
          branchArr.length > 0 ? (father.children = branchArr) : ''; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
          // å±žäºŽåŒä¸€å¯¹è±¡é—®é¢˜ï¼Œä¾‹å¦‚：令 a=b、c=1 ï¼Œç„¶åŽå†ä»¤ b.c=c ï¼Œ é‚£ä¹ˆ a.c=b.c=c=1 ï¼›åŒç†ï¼ŒåŽç»­ä»¤ c.d=2 ,那么 a.c.d ä¹Ÿæ˜¯=2；
          // ç”±æ­¤å¾ªçŽ¯å¤šæ¬¡åŽï¼Œå°±èƒ½å½¢æˆç›¸åº”的树形数据结构
          return father.pid == 1; // è¿”回一级菜单
        });
      } else {
        alert('暂无菜单栏数据');
      }
    },

    handleselect(index, indexPath, e) {
      var data = e.$attrs.perms;
      this.$store.state.currentPerms = data.perms;
      var index = data.url;
      debugger;
      if (index != null) {
        if (index.indexOf('http') != -1) {
          this.$store.commit('getIframe', data.url);
          index = 'dataIfream';
        }
      }
      this.setMenuFlag = index;
    },
  },
};
</script>

<style lang="less" scoped>
.mochaitmo_Box {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 0;
  padding: 10px;
  position: absolute;
  .left_tree {
    width: 270px;
    height: 100%;
    position: relative;
    float: left;
    border-radius: 5px;
  }
  .el-card-define {
    min-height: 85%;
    background: #303030;
    border: 1px solid gray;
    padding: 1px !important;
  }
  .el-tree {
    background-color: transparent;
  }
  .card_tree {
    height: 730px;
    overflow-y: auto;
  }
  .el-card__body,
  .el-main {
    padding: 10px;
  }
  .right_page {
    width: calc(100% - 280px);
    height: 100%;
    background: #303030;
    position: relative;
    float: right;
  }
  /deep/.el-menu {
    border: transparent !important;
  }
  /deep/.el-submenu__title:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
  /deep/ .el-submenu .el-menu-item:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
  /deep/.el-textarea__inner {
    background: transparent;
    border-color: #fff !important;
    color: white;
  }
  /deep/.el-textarea .el-input__count {
    background: transparent;
    color: #fff !important;
  }
}
</style>

 src/views/datamanage/dataLoader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,534 @@
<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="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.datawarehousing')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="updateContent">
      <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.catalog"
              :options="catalogOption"
              @change="catalogChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.company')">
            <el-cascader
              v-model="formInline.company"
              :options="companyOption"
              @change="companyChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
            <el-date-picker
              v-model.trim="formInline.monitorTime"
              :picker-options="pickerOptions"
              type="datetime"
              placeholder="请选择"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </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.desc"
              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"

              :disabled="tableData.length == 0 ? true : false"
              >{{ $t('common.delete') }}</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%"
        height="92%"
        @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('userManage.userInfoObj.uname')"
          fixed
        />
    </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>

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

<script>
import $ from 'jquery';
import MyBread from '../../components/MyBread.vue';
import { selectdirTab, queryDepTree } from '../../api/api';
export default {
  name: 'dataUpdata',
  components: {
    MyBread,
  },
  data() {
    return {
      btnStatus: 0,
      count: 0,
      formInline: {
        monitorTime: '',
      },
      catalogOption: [],
      companyOption: [],
      tableData: [],
      listTable: [],
      multipleSelection: [],
      fullscreenLoading: false,
      listData: {
        pageIndex: 1,
        pageSize: 10,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        selectableRange: '00:00:00 - 23:59:59',
      },
      cascader: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
      },
    };
  },

  mounted() {
    this.getSelectdirTab();
    this.getQueryDepTree();
    this.timeDefault();
    this.getFilePath();
  },
  watch: {
    'detailData.monitorTime': {
      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.monitorTime = new Date();
            }
            st = nowDate;
          } else {
            st = '23:59:59';
          }
          this.pickerOptions.selectableRange = '00:00:00 - ' + st;
          this.pickerOptions = this.pickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //文件上传
    setFileUpload() {
      this.handlerLoading(true);
      setTimeout(() => {
        this.handlerLoading(false);
      }, 2000);

      this.getFileLength();
    },
    //数据删除
    setFileDelete() {
      this.handlerLoading(true);



      this.multipleSelection.forEach(item => {
        this.listTable = this.listTable.filter((items) => {

          if (items.name != item.name && item.id != items.id) {
            return items;
          }

        });
      });
      this.listData.pageIndex= 1;
      this.listData.pageSize = 10;
      this.count = this.listTable.length;
      this.setViewTable();
      this.getFileLength();
      this.handlerLoading(false);
    },
    //数据入库
    setFileWare() {
      this.handlerLoading(true);
      setTimeout(() => {
        this.handlerLoading(false);
      }, 2000);
      this.getFilePath();
    },
    //获取文件上传路径
    getFilePath() {
      for (var i = 0; i < 20; i++) {
        this.listTable.push({
          id: i,
          name: 'value' + i
        })
      }
      this.count = this.listTable.length;
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.setViewTable();
    },
    //显示表格数据
    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;
    },
    //获取文件上传数据
    getFileLength() {

    },
    //清除表格信息
    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 val = document.getElementById("uploadfile").files;
      if (!val || !val.length) return;
      var formData = new FormData();
      for (var i = 0; i < val.length; i++) {
        formData.append(val[i].name, val[i]);
      }
      console.log(formData)
    },
    //当前时间获取
    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.monitorTime = s1;
    },

    //Loading显隐
    handlerLoading(res) {
      this.fullscreenLoading = res;
    },
    //目录切换
    catalogChange(value) {
      this.formInline.catalog = value;
    },
    //单位切换
    companyChange(value) {
      this.formInline.company = value;
    },

    //单位列表获取
    async getQueryDepTree() {
      const res = await queryDepTree();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      this.formInline.company = 1;
      this.companyOption = this.treeData(res.result);
    },
    //目录列表获取
    async getSelectdirTab() {
      const res = await selectdirTab();
      if (res.code != 200) {
        this.$message.error('目录列表获取失败');
        return;
      }
      this.formInline.catalog = 1;
      this.catalogOption = this.treeData(res.result);
    },
    //树列表生成
    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; // è¿”回一级菜单
      });
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;

  .updateContent {
    width: 100%;
    height: 670px;

    position: relative;
    .contentIquery {
      width: 98%;
      height: 16%;
      border: 1px solid white;
      padding: 1%;
      border-radius: 5px;
    }
    .contentTable {
      width: 98%;
      height: 72%;
      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;
    }
  }

  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /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;
  }
}
</style>

 src/views/datamanage/dataUpdata.vue

@@ -1,605 +1,534 @@
<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">
      <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.catalog"
              :options="catalogOption"
              @change="catalogChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.company')">
            <el-cascader
              v-model="formInline.company"
              :options="companyOption"
              @change="companyChange"
              :props="cascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
            <el-date-picker
              v-model.trim="formInline.monitorTime"
              :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.desc"
              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
        :data="tableData"
            <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
        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>
      </div>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="selectCataName"
          >确定</el-button
        height="92%"
        @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('userManage.userInfoObj.uname')"
          fixed
        />
    </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-button type="primary" size="small" @click="closeCata"
          >取消</el-button
        >
        </el-pagination>
      </div>
      </div>

    </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 { selectdirTab, queryDepTree } 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: [],
      btnStatus: 0,
      count: 0,
      currentPage: 1,
      pageSize: 10,
      pageNum: 1,
      btnStatus: {
        select: false,
        delete: false,
        upload: false,
        download: false,
        insert: false,
        update: false,
      formInline: {
        monitorTime: '',
      },
      catalogOption: [],
      companyOption: [],
      tableData: [],
      listTable: [],
      multipleSelection: [],
      fullscreenLoading: false,
      listData: {
        pageIndex: 1,
        pageSize: 10,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        selectableRange: '00:00:00 - 23:59:59',
      },
      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.monitorTime': {
      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.monitorTime = 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;
    //文件上传
    setFileUpload() {
      this.handlerLoading(true);
      setTimeout(() => {
        this.handlerLoading(false);
      }, 2000);

      // val.forEach((e) => {
      //   console.log(e.name);
      // });
      this.getFileLength();
    },
    submitUpload() {
      if (this.updateForm.path_id == "" || this.updateForm.type == "") {
        alert("请选择数据类型或上传目录");
        this.$refs.upload.abort();
        return false;
      } else {
        this.$refs.upload.submit();
      }
    },
    uploadFile(item) {
      var val = document.getElementById("uploading").files;
      if (!val || !val.length) return;
    //数据删除
    setFileDelete() {
      this.handlerLoading(true);

      // 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.multipleSelection.forEach(item => {
        this.listTable = this.listTable.filter((items) => {

          if (items.name != item.name && item.id != items.id) {
            return items;
          }

        });
      });
      this.listData.pageIndex= 1;
      this.listData.pageSize = 10;
      this.count = this.listTable.length;
      this.setViewTable();
      this.getFileLength();
      this.handlerLoading(false);
    },
    // æ–‡ä»¶åˆ—表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    //数据入库
    setFileWare() {
      this.handlerLoading(true);
      setTimeout(() => {
        this.handlerLoading(false);
      }, 2000);
      this.getFilePath();
    },
    // æ¡æ•°ä¿®æ”¹
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMetaData(this.pageSize, 1);
      this.getMetaCount("");
    //获取文件上传路径
    getFilePath() {
      for (var i = 0; i < 20; i++) {
        this.listTable.push({
          id: i,
          name: 'value' + i
        })
      }
      this.count = this.listTable.length;
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.setViewTable();
    },
    // é¡µæ•°ä¿®æ”¹
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getMetaData(this.pageSize, this.pageNum);
      this.getMetaCount("");
    //显示表格数据
    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;
    },
    // 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 = {};
    // },
    //获取文件上传数据
    getFileLength() {

    },
    //清除表格信息
    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 val = document.getElementById("uploadfile").files;
      if (!val || !val.length) return;
      var formData = new FormData();
      for (var i = 0; i < val.length; i++) {
        formData.append(val[i].name, val[i]);
      }
      console.log(formData)
    },
    //当前时间获取
    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.monitorTime = s1;
    },

    //Loading显隐
    handlerLoading(res) {
      this.fullscreenLoading = res;
    },
    //目录切换
    catalogChange(value) {
      this.formInline.catalog = value;
    },
    //单位切换
    companyChange(value) {
      this.formInline.company = value;
    },

    //单位列表获取
    async getQueryDepTree() {
      const res = await queryDepTree();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      this.formInline.company = 1;
      this.companyOption = this.treeData(res.result);
    },
    //目录列表获取
    async getSelectdirTab() {
      const res = await selectdirTab();
      if (res.code != 200) {
        this.$message.error('目录列表获取失败');
        return;
      }
      this.formInline.catalog = 1;
      this.catalogOption = this.treeData(res.result);
    },
    //树列表生成
    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; // è¿”回一级菜单
      });
    },
  },
};
</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: 98%;
      height: 16%;
      border: 1px solid white;
      padding: 1%;
      border-radius: 5px;
    }
    .el-table::before {
      height: 0;
    .contentTable {
      width: 98%;
      height: 72%;
      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;
  }
}
</style>

 src/views/datamanage/dictionaryManage.vue

@@ -1,5 +1,5 @@
<template>
  <div class="authorityManagement_box">
  <div class="dictionaryBox">
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
@@ -7,151 +7,143 @@
      ]"
    ></My-bread>
    <el-divider />
    <div class="searchComp">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.tableName')"
          prop="name"
        >
          <el-select
            clearable
            v-model="queryName"
            @change="changeQueryName"
            :placeholder="$t('dataManage.dictionaryManageObj.selectTableName')"
          >
            <el-option
              v-for="(item, i) in selectData"
              :key="i"
              :label="item.tabDesc"
              :value="item.tab"
            >
            </el-option>
          </el-select>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('dataManage.vmobj.keyword')">
          <el-input
            v-model="formInline.tab"
            :placeholder="$t('common.pleaseInput')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="InsertFormdialog = true"
            v-if="btnStatus.insert"
            icon="el-icon-edit"
            type="success"
            size="small"
            >{{ $t("dataManage.dictionaryManageObj.add") }}</el-button
            icon="el-icon-search"
            @click="getSelectDictTab"
            class="primary"
            >{{ $t('common.iquery') }}</el-button
          >
          <el-button
            v-if="btnStatus.delete"
            @click="DelFormData"
            icon="el-icon-delete"
            type="danger"
            size="small"
            >{{ $t("dataManage.dictionaryManageObj.del") }}</el-button
            icon="el-icon-refresh"
            @click="getRemoveForm"
            type="info"
            >{{ $t('common.reset') }}</el-button
          >
          <el-button
            icon="el-icon-edit"
            @click="InsertFormdialog = true"
            type="success"
            >{{ $t('common.append') }}</el-button
          >
          <el-button icon="el-icon-delete" @click="DelFormData" type="danger">{{
            $t('common.delete')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="rightTable">
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
            height="98%"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              prop="orderNum"
              :label="$t('dataManage.dictionaryManageObj.number')"
            />
            <el-table-column
              min-width="100"
              prop="field"
              :label="$t('dataManage.dictionaryManageObj.fieldName')"
            />
            <el-table-column
              min-width="90"
              prop="alias"
              :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
            />
            <el-table-column
              min-width="100"
              prop="type"
              :label="$t('dataManage.dictionaryManageObj.fieldType')"
            />
            <el-table-column
              min-width="60"
              prop="len"
              :label="$t('dataManage.dictionaryManageObj.fieldLength')"
            />
            <el-table-column
              min-width="60"
              prop="precision"
              :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
            />
            <el-table-column
              min-width="100"
              prop="tab"
              :label="
                $t('dataManage.dictionaryManageObj.rangeAssociationTable')
              "
            />
            <el-table-column
              min-width="100"
              prop="bak"
              :label="$t('dataManage.dictionaryManageObj.remark')"
            />
            <el-table-column
              min-width="100"
              prop="createTime"
              :label="$t('dataManage.dictionaryManageObj.creationTime')"
              :formatter="formatData"
            />
            <el-table-column
              min-width="100"
              prop="createUser"
              :label="$t('dataManage.dictionaryManageObj.createPersonnel')"
            />
            <el-table-column
              min-width="100"
              prop="updateTime"
              :label="$t('dataManage.dictionaryManageObj.updateTime')"
              :formatter="formatData"
            />
            <el-table-column
              min-width="100"
              prop="updateUser"
              :label="$t('dataManage.dictionaryManageObj.updatePersonnel')"
            />

            <el-table-column
              min-width="70"
              :label="$t('dataManage.dictionaryManageObj.operation')"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="btnStatus.select"
                  @click="showDetail(scope.$index, scope.row)"
                  >{{ $t("dataManage.dictionaryManageObj.lookOver") }}</el-link
                >
                <el-link
                  v-if="btnStatus.update"
                  @click="handleEdit(scope.$index, scope.row)"
                  style="margin-left: 10px"
                  >{{ $t("dataManage.dictionaryManageObj.revamp") }}</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="margin-top: 20px; text-align: center"
          class="pagination_box"
    <div class="dictionaryContent">
      <div class="dictionary_leftTree">
        <ul>
          <li @click="getTableDesc(item)" v-for="item in optionCount">
            {{ item.tabDesc }}({{ item.tab }})
          </li>
        </ul>
      </div>
      <div class="dictionary_rightContent">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          height="93%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="orderNum"
            :label="$t('dataManage.dictionaryManageObj.number')"
          />
          <el-table-column
            min-width="100"
            prop="field"
            :label="$t('dataManage.dictionaryManageObj.fieldName')"
          />
          <el-table-column
            min-width="90"
            prop="alias"
            :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
          />
          <el-table-column
            min-width="100"
            prop="type"
            :label="$t('dataManage.dictionaryManageObj.fieldType')"
          />
          <el-table-column
            min-width="60"
            prop="len"
            :label="$t('dataManage.dictionaryManageObj.fieldLength')"
          />
          <el-table-column
            min-width="60"
            prop="precision"
            :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
          />
          <el-table-column
            min-width="100"
            prop="tab"
            :label="$t('dataManage.dictionaryManageObj.rangeAssociationTable')"
          />
          <el-table-column
            min-width="100"
            prop="bak"
            :label="$t('dataManage.dictionaryManageObj.remark')"
          />
          <el-table-column
            min-width="100"
            prop="createTime"
            :label="$t('dataManage.dictionaryManageObj.creationTime')"
            :formatter="formatData"
          />
          <el-table-column
            min-width="100"
            prop="createUser"
            :label="$t('dataManage.dictionaryManageObj.createPersonnel')"
          />
          <el-table-column
            min-width="100"
            prop="updateTime"
            :label="$t('dataManage.dictionaryManageObj.updateTime')"
            :formatter="formatData"
          />
          <el-table-column
            min-width="100"
            prop="updateUser"
            :label="$t('dataManage.dictionaryManageObj.updatePersonnel')"
          />

          <el-table-column
            min-width="100"
            :label="$t('dataManage.dictionaryManageObj.operation')"
          >
            <template slot-scope="scope">
              <el-link
                v-if="btnStatus.select"
                style="color: white"
                @click="showDetail(scope.$index, scope.row)"
                >{{ $t('dataManage.dictionaryManageObj.lookOver') }}</el-link
              >
              <el-link
                v-if="btnStatus.update"
                @click="handleEdit(scope.$index, scope.row)"
                style="margin-left: 10px; color: white"
                >{{ $t('dataManage.dictionaryManageObj.revamp') }}</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_box" style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
@@ -163,84 +155,82 @@
    <div class="infoBox" v-show="showinfoBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("dataManage.dictionaryManageObj.particulars") }}</span>
          <span>{{ $t('dataManage.dictionaryManageObj.particulars') }}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>
            {{ $t("dataManage.dictionaryManageObj.tableName") }}：{{
            {{ $t('dataManage.dictionaryManageObj.tableName') }}：{{
              itemdetail.tab
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.tableAliasName") }}：{{
            {{ $t('dataManage.dictionaryManageObj.tableAliasName') }}：{{
              itemdetail.tabDesc
            }}
          </p>
          <el-divider></el-divider>
          <!-- <p>表类型：{{ itemdetail.type }}</p>
          <el-divider></el-divider> -->

          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldName") }}：{{
            {{ $t('dataManage.dictionaryManageObj.fieldName') }}：{{
              itemdetail.field
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldAliasName") }}：{{
            {{ $t('dataManage.dictionaryManageObj.fieldAliasName') }}：{{
              itemdetail.alias
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldType") }}：{{
            {{ $t('dataManage.dictionaryManageObj.fieldType') }}：{{
              itemdetail.type
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldLength") }}：{{
            {{ $t('dataManage.dictionaryManageObj.fieldLength') }}：{{
              itemdetail.len
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.FieldPrecision") }}：{{
            {{ $t('dataManage.dictionaryManageObj.FieldPrecision') }}：{{
              itemdetail.precision
            }}
          </p>
          <el-divider></el-divider>
          <!-- <p>值域关联表：{{ itemdetail.domain_name }}</p>
          <el-divider></el-divider> -->

          <p>
            {{ $t("dataManage.dictionaryManageObj.remark") }}：{{
            {{ $t('dataManage.dictionaryManageObj.remark') }}：{{
              itemdetail.bak
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.creationTime") }}：{{
            {{ $t('dataManage.dictionaryManageObj.creationTime') }}：{{
              itemdetail.createTime
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.createPersonnel") }}：{{
            {{ $t('dataManage.dictionaryManageObj.createPersonnel') }}：{{
              itemdetail.createUser
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.updateTime") }}：{{
            {{ $t('dataManage.dictionaryManageObj.updateTime') }}：{{
              itemdetail.updateTime
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.updatePersonnel") }}：{{
            {{ $t('dataManage.dictionaryManageObj.updatePersonnel') }}：{{
              itemdetail.updateUser
            }}
          </p>
@@ -272,17 +262,7 @@
        >
          <el-input v-model="upform.tabDesc" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select
            v-model="upform.table_type"
            style="width: 100%"
            placeholder="请选择数据类型"
          >
            <el-option label="点几何" value="点几何"></el-option>
            <el-option label="线几何" value="线几何"></el-option>
            <el-option label="面几何" value="面几何"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldName')"
          :label-width="formLabelWidth"
@@ -313,9 +293,7 @@
        >
          <el-input v-model="upform.precision" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="值域名称" :label-width="formLabelWidth">
          <el-input v-model="upform.domain_name" autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.remark')"
          :label-width="formLabelWidth"
@@ -325,10 +303,10 @@
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t("dataManage.dictionaryManageObj.cancel")
          $t('dataManage.dictionaryManageObj.cancel')
        }}</el-button>
        <el-button type="primary" @click="updateForm">{{
          $t("dataManage.dictionaryManageObj.confirm")
          $t('dataManage.dictionaryManageObj.confirm')
        }}</el-button>
      </div>
    </el-dialog>
@@ -357,17 +335,7 @@
        >
          <el-input v-model="insertform.tabDesc" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select
            v-model="insertform.table_type"
            style="width: 100%"
            placeholder="请选择数据类型"
          >
            <el-option label="点几何" value="点几何"></el-option>
            <el-option label="线几何" value="线几何"></el-option>
            <el-option label="面几何" value="面几何"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldName')"
          :label-width="formLabelWidth"
@@ -401,12 +369,7 @@
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="值域名称" :label-width="formLabelWidth">
          <el-input
            v-model="insertform.domain_name"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.remark')"
          :label-width="formLabelWidth"
@@ -416,10 +379,10 @@
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="InsertFormdialog = false">{{
          $t("dataManage.dictionaryManageObj.cancel")
          $t('dataManage.dictionaryManageObj.cancel')
        }}</el-button>
        <el-button type="primary" @click="insertFromData">{{
          $t("dataManage.dictionaryManageObj.confirm")
          $t('dataManage.dictionaryManageObj.confirm')
        }}</el-button>
      </div>
    </el-dialog>
@@ -433,35 +396,32 @@
  deleteDicts,
  updateDict,
  insertDict,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
  name: "dictionaryManage",
  name: 'dictionaryManage',
  components: { MyBread },
  data() {
    return {
      multipleSelection: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      InsertFormdialog: false,
      insertform: {},
      upform: {},
      showinfoBox: false,
      itemdetail: {},
      ruleForm: {
        name: "",
      },
      tableData: [],
      count: 0,
      currentPage: 1,
      searchName: "",
      selectName: [],
      queryName: "",
      formInline: [],
      listData: {
        ns: '',
        tab: '',
        pageIndex: 1,
        pageSize: 10,
      },
      selectData: [],
      count: 0,
      InsertFormdialog: false,
      optionCount: [],
      tableData: [],
      showinfoBox: false,
      dialogFormVisible: false,
      itemdetail: {},
      upform: {},
      insertform: {},

      multipleSelection: [],
      formLabelWidth: '130px',
      btnStatus: {
        select: false,
        delete: false,
@@ -473,11 +433,95 @@
    };
  },
  created() {
    this.startQueryNameData();
    this.getSelectDictTab();
    this.showPermsBtn();
  },
  methods: {
    //新增
    async insertFromData() {
      const data = await insertDict(this.insertform);
      if (data.code != 200) {
      }
      this.InsertFormdialog = false;
      this.startQueryNameData();
    },

    //查看详情
    showDetail(index, row) {
      this.showinfoBox = true;
      this.itemdetail = row;
    },
    closeDetial() {
      this.showinfoBox = false;
      this.itemdetail = {};
    },
    //获取表格字段信息
    getTableDesc(res) {
      this.insertform.tab = res.tab;
      this.insertform.tabDesc = res.tabDesc;

      this.listData.tab = res.tab;
      this.listData.ns = res.ns;
      this.startQueryNameData();
    },
    async startQueryNameData() {
      if (this.listData.tab == '') {
        delete this.listData.tab;
      }
      const data = await selectByPageAndCount(this.listData);

      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }

      this.tableData = data.result;
      this.count = data.count;
    },
    handleSelectionChange(res) {
      this.multipleSelection = res;
    },

    handleSizeChange(val) {
      thihs.listData.pageIndex = 1;
      this.listData.pageSize = val;
      this.startQueryNameData();
    },
    handleCurrentChange(val) {
      this.listData.pageIndex = val;
      this.startQueryNameData();
    },
    //修改详情
    async updateForm() {
      const data = await updateDict(this.upform);
      if (data.code != 200) {
        this.$message.error('修改失败');
        return;
      }
      this.dialogFormVisible = false;
      this.startQueryNameData();
    },
    //修改详情弹框
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.upform = row;
    },
    //删除列表
    async DelFormData() {
      var std = [];

      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }

      const data = await deleteDicts({ ids: std.toString() });
      if (data.code != 200) {
        this.$message.error('删除失败');
      }
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.startQueryNameData();
    },

    showPermsBtn() {
      let currentPerms = this.$store.state.currentPerms;
      let permsEntity = this.$store.state.permsEntity;
@@ -485,37 +529,13 @@
        .filter((item) => item.perms == currentPerms)
        .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
    },
    //下拉选项调用
    async getSelectDictTab() {
      this.selectData = [];
      const data = await selectDictTab();
      if (data.code != 200) {
        this.$message.error("下拉调用失败");
    //格式化列表
    formatData(row, column) {
      let data = row[column.property];
      if (data == null) {
        return data;
      }
      data.result.forEach((e) => {
        if (e) {
          this.selectData.push({
            tab: e.tab,
            tabDesc: `${e.tabDesc}（${e.tab}）`,
          });
        }
      });
    },
    //列表请求
    async startQueryNameData() {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      const data = await selectByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error("列表调用失败");
      }
      this.tableData = data.result;
      this.count = data.count;
    },
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
      return this.format(data);
    },
    //格式化时间
    format(shijianchuo) {
@@ -527,248 +547,196 @@
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d)
        // " " +
        // this.add0(h) +
        // ":" +
        // this.add0(mm) +
        // ":" +
        // this.add0(s)
      );
      return y + '-' + this.add0(m) + '-' + this.add0(d);
    },
    //格式化列表
    formatData(row, column) {
      let data = row[column.property];
      if (data == null) {
        return data;
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    getRemoveForm() {
      this.formInline.tab = null;
      this.getSelectDictTab();
    },
    //目录树获取
    async getSelectDictTab() {
      const data = await selectDictTab({ name: this.formInline.tab });
      if (data.code != 200) {
        this.$message.error('下拉调用失败');
      }
      return this.format(data);
    },
    //修改详情
    updateForm() {
      this.$confirm(
        `${$t("dataManage.dictionaryManageObj.tipsUp")}`,
        `${$t("dataManage.dictionaryManageObj.tips")}`,
        {
          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
          type: "warning",
        }
      )
        .then(async () => {
          const data = await updateDict(this.upform);
          if (data.code != 200) {
            this.$message.error(
              `${$t("dataManage.dictionaryManageObj.failModify")}`
            );
          }
          this.dialogFormVisible = false;
          this.startQueryNameData();
          this.$message({
            message: `${$t(
              "dataManage.dictionaryManageObj.modifySuccessfully"
            )}`,
            type: "success",
          });
        })
        .catch(() => {});
    },

    //查看详情
    showDetail(index, row) {
      // console.log(index, row);
      this.showinfoBox = true;
      this.itemdetail = row;
    },
    closeDetial() {
      this.showinfoBox = false;
      this.itemdetail = {};
    },
    //修改详情弹框
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.upform = row;
      console.log(this.upform);
    },

    handleSizeChange(val) {
      console.log(val);
      // console.log(`每页 ${val} æ¡`);
      this.listData.pageSize = val;
      this.startQueryNameData();
    },
    handleCurrentChange(val) {
      this.listData.pageIndex = val;
      this.startQueryNameData();
    },
    //新增
    insertFromData() {
      this.$confirm(
        `${$t("dataManage.dictionaryManageObj.tipsAdd")}`,
        `${$t("dataManage.dictionaryManageObj.tips")}`,
        {
          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
          type: "warning",
        }
      )
        .then(async () => {
          const data = await insertDict(this.insertform);
          if (data.code != 200) {
            this.$message.error(
              `${$t("dataManage.dictionaryManageObj.FailedAdd")}`
            );
          }
          this.InsertFormdialog = false;
          this.startQueryNameData();
          this.$message({
            message: `${$t("dataManage.dictionaryManageObj.NewSuccess")}`,
            type: "success",
          });
        })
        .catch(() => {});
    },

    //列表选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除列表
    DelFormData() {
      var std = [];
      console.log(this.multipleSelection);
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      this.$confirm(
        `${$t("dataManage.dictionaryManageObj.tipsDelete")}`,
        `${$t("dataManage.dictionaryManageObj.tips")}`,
        {
          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
          type: "warning",
        }
      )
        .then(async () => {
          const data = await deleteDicts({ ids: std.toString() });
          if (data.code != 200) {
            this.$message.error(
              `${$t("dataManage.dictionaryManageObj.DeleteFailed")}`
            );
          }
          this.$message({
            type: "success",
            message: `${$t(
              "dataManage.dictionaryManageObj.deletedSuccessfully"
            )}`,
          });
          this.startQueryNameData();
        })
        .catch(() => {});
    },

    //搜索框
    changeQueryName(val) {
      this.listData.tab = val;
      this.startQueryNameData();
      this.optionCount = data.result;
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
.dictionaryBox {
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;
  .searchComp {
    margin: 10px auto;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    .el-form-item {
      margin: 5px;
  .dictionaryContent {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    .dictionary_leftTree {
      width: 15%;
      height: 85%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
      li {
        color: white;
        border-bottom: 1px solid white;
        line-height: 30px;
        text-align: center;
      }
      li:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
    .el-input {
      width: 467px;
    .dictionary_rightContent {
      width: 80%;
      height: 85%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
    }
  }
  .bottom {
    width: 100%;
    height: 85%;
    .rightTable {
      height: 100%;
      width: 100%;
      .table_box {
        width: 100%;
        height: 93%;
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        .el-table {
          height: 100%;
        }
        .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: 0;
        }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        .el-table /deep/ .el-table__header tr,
        .el-table /deep/ .el-table__header th {
          height: 40px;
        }
        .el-table__body tr,
        .el-table__body td {
          height: 40px;
          padding: 0;
        }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š
  .infinite-list-item {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    margin-top: 5%;
    padding: 1%;
    text-align: center;
  }
  .eldivider {
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /*修改table è¡¨ä½“的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .el-table::before {
          height: 0;
        }
        //   a {
        //     color: #000;
        //   }
      }
    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;
    }
  }
  .infoBox {
    width: 500px;
    border: 1px solid #eee;

    position: absolute;
    z-index: 100;
    background: #303030;
    top: 15%;
    right: 25%;
    background-color: #fff;

    .el-card {
      color: white;
      background-color: transparent;
      span {
        font-size: 16px;
@@ -777,14 +745,30 @@
    }
    .contentBox {
      margin: 0 aotu 10px;
      height: 610px;
      height: 500px;
      overflow: auto;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
        font-size: 14px;
      }
    }
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }

  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-cascader .el-input__inner {
    border-color: #fff !important;
  }
}
</style>

 src/views/datamanage/domainManage.vue

@@ -1,6 +1,11 @@
<template>
  <div class="authorityManagement_box">
    <My-bread :list="[`${$t('dataManage.dataManage')}`, `值域管理`]"></My-bread>
  <div class="domainBox">
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.rangeManage')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="mainBox">
      <div class="leftTree">
@@ -25,20 +30,23 @@
                @click="queryInfo('queryForm')"
                icon="el-icon-search"
                size="small"
                >{{ $t("common.iquery") }}</el-button
                class="primary"
                >{{ $t('common.iquery') }}</el-button
              >
              <el-button
                @click="resetInfo('queryForm')"
                icon="el-icon-delete"
                size="small"
                >{{ $t("common.empty") }}</el-button
                type="info"
                >{{ $t('common.empty') }}</el-button
              >
              <el-button
                v-if="btnStatus.insert"
                @click="showAddDialog"
                icon="el-icon-plus"
                size="small"
                >{{ $t("common.append") }}</el-button
                type="success"
                >{{ $t('common.append') }}</el-button
              >
              <el-button
                v-if="btnStatus.delete"
@@ -46,7 +54,7 @@
                type="danger"
                size="small"
                icon="el-icon-delete"
                >{{ $t("common.delete") }}</el-button
                >{{ $t('common.delete') }}</el-button
              >
            </el-form-item>
          </el-form>
@@ -54,11 +62,8 @@
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            fit
            @selection-change="handleSelectionChange"
            height="99%"
            height="100%"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column
@@ -110,23 +115,24 @@

            <el-table-column min-width="150" :label="$t('common.operate')">
              <template slot-scope="scope"
                ><el-button @click="showDetail(scope.row)" size="small"
                  >查看</el-button
                ><el-button
                  class="primary"
                  @click="showDetail(scope.row)"
                  size="small"
                  >{{ $t('common.details') }}</el-button
                >
                <el-button
                  v-if="btnStatus.update"
                  type="warning"
                  @click="handleEdit(scope.$index, scope.row)"
                  size="small"
                  >{{ $t("common.update") }}</el-button
                  >{{ $t('common.update') }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          class="pagination_box"
          style="margin-top: 20px; margin-left: 200px"
        >
        <div class="pagination_box" style="margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -143,25 +149,49 @@
    <div class="infoBox" v-show="showinfoBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>详细信息</span>
          <span>{{ $t('common.details') }}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>数据名称：{{ itemdetail.domName }}</p>
          <p>
            {{ $t('dataManage.domainManage.domName') }}：{{
              itemdetail.domName
            }}
          </p>
          <el-divider></el-divider>
          <p>所属目录：{{ itemdetail.path }}</p>
          <p>
            {{ $t('dataManage.domainManage.domDesc') }}：{{
              itemdetail.domDesc
            }}
          </p>
          <el-divider></el-divider>
          <p>创建时间：{{ itemdetail.create_time }}</p>
          <p>
            {{ $t('dataManage.domainManage.domCode') }}：{{
              itemdetail.domCode
            }}
          </p>
          <el-divider></el-divider>
          <p>创建人员：{{ itemdetail.create_user }}</p>
          <p>
            {{ $t('dataManage.domainManage.codeDesc') }}：{{
              itemdetail.codeDesc
            }}
          </p>
          <el-divider></el-divider>
          <p>上传单位：{{ itemdetail.up_unit }}</p>
          <p>{{ $t('dataManage.domainManage.bsm') }}：{{ itemdetail.bsm }}</p>
          <el-divider></el-divider>
          <p>数据状态：{{ itemdetail.status }}</p>
          <p>
            {{ $t('dataManage.domainManage.level') }}：{{ itemdetail.level }}
          </p>
          <el-divider></el-divider>
          <p>数据版本：{{ itemdetail.version }}</p>
          <p>
            {{ $t('dataManage.domainManage.orderid') }}：{{
              itemdetail.orderid
            }}
          </p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.domainManage.bak') }}：{{ itemdetail.bak }}</p>
        </div>
      </el-card>
    </div>
@@ -229,7 +259,7 @@
          type="primary"
          @click="sendEdit('editForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >{{ $t("common.confirm") }}</el-button
          >{{ $t('common.confirm') }}</el-button
        >
      </div>
      <div v-else slot="footer" class="dialog-footer">
@@ -239,7 +269,7 @@
          type="primary"
          @click="sendAdd('editForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >{{ $t("common.confirm") }}</el-button
          >{{ $t('common.confirm') }}</el-button
        >
      </div>
    </el-dialog>
@@ -253,33 +283,33 @@
  insertDomain,
  deleteDomain,
  updateDomain,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
  name: "domainManage",
  name: 'domainManage',
  components: { MyBread },
  data() {
    return {
      multipleSelection: [],
      behavior: "",
      formLabelWidth: "100px",
      behavior: '',
      formLabelWidth: '100px',
      dialogFormVisible: false,
      showinfoBox: false,
      fullscreenLoading: false,
      itemdetail: {},
      editForm: {},
      queryForm: {
        code: "",
        code: '',
      },
      insertform: {},
      initialForm: "",
      initialForm: '',

      tableData: [],
      count: 0,
      rowFlag: null,
      listData: {
        ns: "",
        tab: "",
        ns: '',
        tab: '',
        pageIndex: 1,
        pageSize: 10,
      },
@@ -293,17 +323,17 @@
      },
      domainData: [
        {
          tabDesc: "基础数据",
          tabDesc: '基础数据',
          children: [],
        },
        {
          tabDesc: "业务数据",
          tabDesc: '业务数据',
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "tabDesc",
        children: 'children',
        label: 'tabDesc',
      },
    };
  },
@@ -338,8 +368,8 @@
    },
    getAllTabelData() {
      getDomainTabs().then((res) => {
        let bdres = res.result.filter((item) => item.ns == "bd");
        let bsres = res.result.filter((item) => item.ns == "bs");
        let bdres = res.result.filter((item) => item.ns == 'bd');
        let bsres = res.result.filter((item) => item.ns == 'bs');
        this.domainData[0].children = bdres;
        this.domainData[1].children = bsres;
      });
@@ -362,7 +392,7 @@
          this.tableData = res.result;
          this.count = res.count;
        } else {
          console.log("查询接口报错");
          console.log('查询接口报错');
          this.$notify.error({
            title: res.code,
            message: res.result,
@@ -373,19 +403,19 @@
    resetInfo() {
      this.queryForm = {};
      this.$store.state.verCateNode = {};
      this.$bus.$emit("clearTressLabel", true);
      this.$bus.$emit('clearTressLabel', true);
      this.getAllTabelData();
    },
    // åˆ é™¤å¤šæ¡
    deleteInfo() {
      this.$confirm("确定是否删除所选内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('确定是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (this.multipleSelection.length == 0) {
            alert("请选择要删除的对象");
            alert('请选择要删除的对象');
            return;
          } else {
            var std = [];
@@ -396,8 +426,8 @@
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                  type: 'success',
                  message: '删除成功!',
                });
                this.multipleSelection = [];
                getSingleTab(this.listData).then((res) => {
@@ -408,18 +438,18 @@
                  }, 500);
                });
              } else {
                this.$message.error("删除失败");
                this.$message.error('删除失败');
                this.multipleSelection = [];
              }
            });
          }
        })
        .catch(() => {
          this.$message("已取消删除");
          this.$message('已取消删除');
        });
    },
    showAddDialog() {
      this.behavior = "新增用户";
      this.behavior = '新增用户';
      this.editForm = {};
      this.dialogFormVisible = true;
    },
@@ -438,8 +468,8 @@
                this.fullscreenLoading = false;
                if (res.code == 200) {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                    message: '添加成功',
                    type: 'success',
                  });
                  getSingleTab(this.listData).then((res) => {
                    setTimeout(() => {
@@ -454,17 +484,17 @@
              }, 500);
            })
            .catch((res) => {
              alert("修改失败，请重试！");
              alert('修改失败，请重试！');
              this.fullscreenLoading = false;
            });
        } else {
          console.log("error submit!!");
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("关闭后无法保存，是否关闭？")
      this.$confirm('关闭后无法保存，是否关闭？')
        .then((_) => {
          this.editForm = {};
          done();
@@ -486,7 +516,7 @@
      this.dialogFormVisible = true;
      this.initialForm = JSON.stringify(row); //备份
      this.editForm = row;
      this.behavior = "修改信息";
      this.behavior = '修改信息';
    },
    editFromDataClose() {
      this.dialogFormVisible = false;
@@ -495,10 +525,10 @@

    // æäº¤ä¿®æ”¹
    sendEdit() {
      this.$confirm("是否确定编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('是否确定编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.dialogFormVisible = false;
@@ -514,22 +544,22 @@
                  }, 500);
                });
                this.$message({
                  message: "修改成功",
                  type: "success",
                  message: '修改成功',
                  type: 'success',
                });
                this.editForm = {};
              } else {
                alert("修改失败，请重试！");
                alert('修改失败，请重试！');
                this.fullscreenLoading = false;
              }
            })
            .catch(() => {
              alert("修改失败，请重试！");
              alert('修改失败，请重试！');
              this.fullscreenLoading = false;
            });
        })
        .catch(() => {
          alert("修改失败，请重试！");
          alert('修改失败，请重试！');
          this.fullscreenLoading = false;
        });
    },
@@ -570,31 +600,35 @@
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .el-input {
    width: 300px !important;
  }
.domainBox {
  height: 80%;
  width: 97%;
  position: absolute;
  .mainBox {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    .leftTree {
      width: 15%;
      height: 90vh;
      border-radius: 10px;
      overflow: auto;
      height: 96%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
    }
    .right {
      width: 84%;
      height: 92vh;
      // background-color: #bfa;
      width: 80%;
      height: 96%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
      .inquire {
        margin-bottom: 10px;
        background: #fff;

        border-radius: 5px;
        border: 1px solid rgb(202, 201, 204);
        .el-form-item {
@@ -603,51 +637,13 @@
      }
      .table_box {
        width: 100%;
        height: 90%;
        height: 80%;
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        // .el-table {
        //   height: 100%;
        // }

        .el-table /deep/ th.el-table__cell > .cell {
          padding: 15px !important;
        }
        // .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: 0;
        // }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        // .el-table /deep/ .el-table__header tr,
        // .el-table /deep/ .el-table__header th {
        //   height: 40px;
        // }
        // .el-table__body tr,
        // .el-table__body td {
        //   height: 40px;
        //   padding: 0;
        // }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š

        .el-table--border::after,
        .el-table--group::after {
@@ -656,44 +652,150 @@
        .el-table::before {
          height: 0;
        }
        //   a {
        //     color: #000;
        //   }
      }
    }
  }

  .infoBox {
    width: 500px;
    border: 1px solid #eee;

    position: absolute;
    z-index: 100;
    top: 15%;
    right: 25%;
    background-color: #fff;
    color: white;
    background-color: #303030;
    .el-card {
      background-color: transparent;
      color: white;
      span {
        font-size: 16px;
        font-weight: 600;
        color: white;
      }
    }
    .contentBox {
      margin: 0 aotu 10px;
      height: 600px;
      height: 500px;
      overflow: auto;
      color: white;
      overflow-y: auto;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
        color: white;
        font-size: 14px;
      }
    }
  }
  .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;
    }
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /*修改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;
    }
  }
  /deep/ .el-dialog {
    width: 620px !important;
    margin-top: 10vh !important;
  }

  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-dialog .el-input__inner {
    width: 300px;
  }
@@ -707,5 +809,21 @@
    margin: 0 auto;
    justify-content: center;
  }
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
}
</style>

 src/views/datamanage/metadataManage.vue

@@ -9,7 +9,7 @@
    <el-divider />
    <div class="inquire">
      <el-form ref="queryForm" :model="queryForm" :inline="true">
        <el-form-item label="关键字" prop="name">
        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
          <el-input
            v-model="queryForm.name"
            :placeholder="$t('common.pleaseInput')"
@@ -19,9 +19,9 @@
          <el-button
            @click="queryInfo()"
            icon="el-icon-search"
            type="primary"
            class="primary"
            size="small"
            >查询</el-button
            >{{ $t('common.iquery') }}</el-button
          >
        </el-form-item>
        <el-form-item>
@@ -30,7 +30,7 @@
            icon="el-icon-refresh"
            type="info"
            size="small"
            >重置</el-button
            >{{ $t('common.reset') }}</el-button
          >
        </el-form-item>

@@ -40,7 +40,7 @@
            size="small"
            @click="showAddDialog"
            icon="el-icon-plus"
            >{{ $t("common.append") }}</el-button
            >{{ $t('common.append') }}</el-button
          >
        </el-form-item>
        <el-form-item v-if="btnStatus.delete">
@@ -49,7 +49,7 @@
            size="small"
            @click="deleteMetaInfo"
            icon="el-icon-delete"
            >{{ $t("common.delete") }}</el-button
            >{{ $t('common.delete') }}</el-button
          >
        </el-form-item>
        <el-form-item v-if="btnStatus.download">
@@ -58,7 +58,7 @@
            icon="el-icon-download"
            type="success"
            size="small"
            >下载</el-button
            >{{ $t('common.download') }}</el-button
          >
        </el-form-item>
      </el-form>
@@ -68,45 +68,54 @@
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            fit
            @selection-change="handleSelectionChange"
            height="99%"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column min-width="150" prop="name" label="名称" />
            <el-table-column min-width="100" prop="format" label="格式" />
            <el-table-column min-width="100" prop="sizes" label="大小" />
            <el-table-column prop="name" :label="$t('common.name')" />
            <el-table-column prop="format" :label="$t('common.format')" />
            <el-table-column prop="sizes" :label="$t('common.size')" />
            <el-table-column
              min-width="100"
              prop="createUser"
              label="创建人员"
              :label="$t('dataManage.vmobj.createonuser')"
            />
            <el-table-column
              min-width="100"
              prop="createTime"
              label="创建时间"
              :label="$t('dataManage.vmobj.createontime')"
            />
            <el-table-column min-width="100" prop="cs" label="坐标系统" />
            <el-table-column min-width="100" prop="scale" label="比例尺" />
            <el-table-column min-width="100" prop="resolution" label="分辨率" />
            <el-table-column
              prop="cs"
              :label="$t('dataManage.vmobj.coordSystem')"
            />
            <el-table-column
              prop="scale"
              :label="$t('dataManage.vmobj.scale')"
            />
            <el-table-column
              prop="resolution"
              :label="$t('dataManage.vmobj.resolpower')"
            />

            <el-table-column min-width="100" prop="descr" label="描述" />
            <el-table-column min-width="100" label="操作">
            <el-table-column
              prop="descr"
              :label="$t('dataManage.vmobj.describe')"
            />
            <el-table-column min-width="100" :label="$t('common.operate')">
              <template slot-scope="scope">
                <el-link @click="showDetail(scope.row)">查看</el-link>
                <el-link @click="editInfo(scope.row)" style="margin-left: 10px"
                  >修改</el-link
                <el-link style="color: white" @click="showDetail(scope.row)">{{
                  $t('common.details')
                }}</el-link>
                <el-link
                  @click="editInfo(scope.row)"
                  style="margin-left: 10px; color: white"
                  >{{ $t('common.edit') }}</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="margin-top: 20px; margin-left: 400px"
          class="pagination_box"
        >
        <div style="margin-top: 10px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -123,63 +132,106 @@
    <div class="infoBox" v-show="showinfoBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>详细信息</span>
          <span>{{ $t('common.details') }}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>数据名称：{{ itemdetail.name }}</p>
          <p>{{ $t('dataManage.vmobj.name') }}：{{ itemdetail.name }}</p>
          <el-divider></el-divider>
          <p>数据类型：{{ itemdetail.type }}</p>
          <p>{{ $t('dataManage.vmobj.type') }}：{{ itemdetail.type }}</p>
          <el-divider></el-divider>
          <p>数据格式：{{ itemdetail.format }}</p>
          <p>{{ $t('common.format') }}：{{ itemdetail.format }}</p>
          <el-divider></el-divider>
          <p>创建时间：{{ itemdetail.createTime }}</p>
          <p>
            {{ $t('dataManage.vmobj.createontime') }}：{{
              itemdetail.createTime
            }}
          </p>
          <el-divider></el-divider>
          <p>创建人员：{{ itemdetail.createUser }}</p>
          <p>
            {{ $t('dataManage.vmobj.createonuser') }}：{{
              itemdetail.createUser
            }}
          </p>
          <el-divider></el-divider>
          <p>更新时间：{{ itemdetail.updateTime }}</p>
          <p>
            {{ $t('dataManage.vmobj.updateontime') }}：{{
              itemdetail.updateTime
            }}
          </p>
          <el-divider></el-divider>
          <p>更新人员：{{ itemdetail.updateUser }}</p>
          <p>
            {{ $t('dataManage.vmobj.updateonuser') }}：{{
              itemdetail.updateUser
            }}
          </p>
          <el-divider></el-divider>
          <p>坐标系统：{{ itemdetail.cs }}</p>
          <p>{{ $t('dataManage.vmobj.coordSystem') }}：{{ itemdetail.cs }}</p>
          <el-divider></el-divider>
          <p>比例尺{{ itemdetail.scale }}</p>
          <p>{{ $t('dataManage.vmobj.scale') }}：{{ itemdetail.scale }}</p>
          <el-divider></el-divider>
          <p>分辨率{{ itemdetail.resolution }}</p>
          <p>
            {{ $t('dataManage.vmobj.resolpower') }}：{{ itemdetail.resolution }}
          </p>
          <el-divider></el-divider>
          <p>描述：{{ itemdetail.descr }}</p>
          <p>{{ $t('dataManage.vmobj.describe') }}：{{ itemdetail.descr }}</p>
        </div>
      </el-card>
    </div>
    <el-dialog
      width="510px"
      top="5vh"
      :title="behavior"
      :title="
        behavior == '新增用户'
          ? `${$t('common.append')}`
          : `${$t('common.update')}`
      "
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="数据名称" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据类型" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.type')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据格式" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('common.format')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.format" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="坐标系统" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.coordSystem')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.cs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="比例尺" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.scale')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.scale" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分辨率" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.resolpower')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.resolution" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.descr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
@@ -239,17 +291,17 @@
  updateMeta,
  deleteMeta,
  insertMeta,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
  name: "metadataManage",
  name: 'metadataManage',
  components: { MyBread },
  data() {
    var repasswordValidator = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.codeForm.password) {
        callback(new Error("两次输入密码不一致!"));
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
@@ -258,26 +310,26 @@
      showCodeBox: false,
      value: true,
      multipleSelection: [],
      formLabelWidth: "120px",
      formLabelWidth: '120px',
      dialogFormVisible: false,
      editForm: {},
      showinfoBox: false,
      fullscreenLoading: false,
      itemdetail: {},
      queryForm: {
        name: "",
        name: '',
      },
      behavior: "",
      initialForm: "",
      behavior: '',
      initialForm: '',
      codeForm: {
        password: "",
        repassword: "",
        password: '',
        repassword: '',
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        repassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: repasswordValidator, trigger: "blur" },
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
        ],
      },
      tableData: [],
@@ -313,20 +365,20 @@
    },
    ShowWindowFly(res) {
      console.log(res);
      if (res == "") return;
      if (res.indexOf(".xls") != -1) {
      if (res == '') return;
      if (res.indexOf('.xls') != -1) {
        this.showMetadata(res, true);
      } else if (res.indexOf(".doc") != -1) {
      } else if (res.indexOf('.doc') != -1) {
        this.showMetadata(res, true);
      } else if (res.indexOf(".png") != -1) {
      } else if (res.indexOf('.png') != -1) {
        this.showMetadata(res, true);
      } else if (res.indexOf(".jpg") != -1) {
      } else if (res.indexOf('.jpg') != -1) {
        this.showMetadata(res, true);
      } else if (res.indexOf(".pdf") != -1) {
      } else if (res.indexOf('.pdf') != -1) {
        this.showMetadata(res, true);
      } else if (res.indexOf(".fly") != -1) {
      } else if (res.indexOf('.fly') != -1) {
        this.showMetadata(res, false);
      } else if (res.indexOf(".mpt") != -1) {
      } else if (res.indexOf('.mpt') != -1) {
        this.showMetadata(res, false);
      }
    },
@@ -335,12 +387,12 @@
      if (flag == true) {
        metaUrl = res;
      } else if (flag == false) {
        metaUrl = ifreamUrl + "/LFWeb/MetaPop.html?name=" + res;
        metaUrl = ifreamUrl + '/LFWeb/MetaPop.html?name=' + res;
      }
      window.open(
        metaUrl,
        "",
        "height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
        '',
        'height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'
      );
    },
    // è¯·æ±‚数据内容
@@ -362,7 +414,7 @@
          this.tableData = res.result;
          this.count = res.count;
        } else {
          console.log("查询接口报错");
          console.log('查询接口报错');
          this.$notify.error({
            title: res.code,
            message: res.result,
@@ -376,7 +428,7 @@
    },
    //新增按钮
    showAddDialog() {
      this.behavior = "新增用户";
      this.behavior = '新增用户';
      this.editForm = {};
      this.dialogFormVisible = true;
    },
@@ -396,8 +448,8 @@
                if (res.code == 200) {
                  this.getMetaData({ pageIndex: 1, pageSize: 10 });
                  this.$message({
                    message: "添加成功",
                    type: "success",
                    message: '添加成功',
                    type: 'success',
                  });
                  this.editForm = {};
                  this.dialogFormVisible = false;
@@ -405,11 +457,11 @@
              }, 500);
            })
            .catch((res) => {
              alert("修改失败，请重试！");
              alert('修改失败，请重试！');
              this.fullscreenLoading = false;
            });
        } else {
          console.log("error submit!!");
          console.log('error submit!!');
          return false;
        }
      });
@@ -420,10 +472,10 @@
    },
    // åˆ é™¤å¤šæ¡
    deleteMetaInfo() {
      this.$confirm("确定是否删除所选内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('确定是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          var std = [];
@@ -433,19 +485,19 @@
          deleteMeta({ ids: std.toString() }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
                type: 'success',
                message: '删除成功!',
              });
              this.multipleSelection = [];
              this.getMetaData({ pageIndex: 1, pageSize: 10 });
            } else {
              this.$message.error("删除失败");
              this.$message.error('删除失败');
              this.multipleSelection = [];
            }
          });
        })
        .catch(() => {
          this.$message("已取消删除");
          this.$message('已取消删除');
        });
    },

@@ -468,12 +520,12 @@
      delete row.updateUser;
      delete row.updateUser;
      this.initialForm = JSON.stringify(row); //备份
      this.behavior = "修改信息";
      this.behavior = '修改信息';
      this.editForm = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
      this.$confirm('确认关闭？')
        .then((_) => {
          this.editForm = {};
          done();
@@ -483,10 +535,10 @@

    // æäº¤ä¿®æ”¹
    sendEdit() {
      this.$confirm("是否确定编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      this.$confirm('是否确定编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.dialogFormVisible = false;
@@ -496,8 +548,8 @@
              if (res.code == 200) {
                this.getMetaData({ pageIndex: 1, pageSize: 10 });
                this.$message({
                  message: "修改成功",
                  type: "success",
                  message: '修改成功',
                  type: 'success',
                });
                this.editForm = {};
                this.dialogFormVisible = false;
@@ -506,7 +558,7 @@
          });
        })
        .catch(() => {
          alert("修改失败，请重试！");
          alert('修改失败，请重试！');
          this.fullscreenLoading = false;
        });
    },
@@ -518,33 +570,15 @@
    download() {},
    closeDown() {
      this.showCodeBox = false;
      this.codeForm.password = "";
      this.codeForm.repassword = "";
      this.codeForm.password = '';
      this.codeForm.repassword = '';
    },
    downFormData() {
      if (this.multipleSelection.length == 0) {
        alert("请先选择要下载的文件");
        alert('请先选择要下载的文件');
        return;
      }
      this.showCodeBox = true;
      // this.$prompt("请输入密码", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   inputType: "password",
      //   inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
      //   inputErrorMessage: "输入不能为空",
      // })
      //   .then(() => {
      //     let ids = "";
      //     this.multipleSelection.forEach((e) => {
      //       ids += `id=${e.id}&`;
      //     });
      //     let res = ids.substring(0, ids.length - 1);
      //     console.log(res);
      //     let url = "http://192.168.20.106/LFServer/Meta/Downloads?" + res;
      //     window.open(url);
      //   })
      //   .catch(() => {});
    },

    handleSizeChange(val) {
@@ -562,28 +596,29 @@
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;

  .inquire {
    position: relative;
    height: 50px;
    overflow: auto;
    padding: 8px;
    margin-top: 20px;
    background: #fff;
    padding-bottom: 8px;
    border: 1px solid white;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
    padding: 1%;
    .el-form-item {
      margin: 5px;
    }
  }
  .bottom {
    width: 100%;
    height: 83%;
    width: 98%;
    margin-top: 1%;
    height: 77%;
    padding: 1%;
    border: 1px solid white;
    border-radius: 5px;
    .rightTable {
      height: 100%;
      width: 100%;
@@ -592,78 +627,29 @@
        height: 93%;
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        .el-table {
          height: 100%;
          // overflow: auto;
        }
        .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: 0;
        }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        .el-table /deep/ .el-table__header tr,
        .el-table /deep/ .el-table__header th {
          height: 40px;
        }
        .el-table__body tr,
        .el-table__body td {
          height: 40px;
          padding: 0;
        }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š

        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .el-table::before {
          height: 0;
        }
        //   a {
        //     color: #000;
        //   }
      }
    }
  }
  .infoBox {
    width: 500px;
    border: 1px solid #eee;
    position: absolute;
    z-index: 100;
    top: 15%;
    top: 10%;
    right: 25%;
    background-color: #fff;
    background: #303030;
    color: #fff;
    .el-card {
      background-color: transparent;
      color: #fff;
      span {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .contentBox {
      margin: 0 aotu 10px;
      height: 600px;
      height: 500px;
      overflow: auto;
      p {
        // background-color: #bfa;
@@ -672,24 +658,7 @@
      }
    }
  }
  /deep/ .el-dialog {
    // width: 500px !important;
    // margin-top: 10vh !important;
  }

  /deep/.el-dialog .el-input__inner {
    width: 300px;
  }
  /deep/ .el-dialog__body {
    padding: 0px 30px;
  }
  /deep/ .el-dialog__footer {
    padding-top: 0 !important;
    width: 200px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
  }
  .dotClass {
    width: 10px;
    height: 10px;
@@ -702,10 +671,132 @@
    top: 20%;
    left: 50%;
    padding: 20px;
    background-color: #fff;

    width: 20%;
    border: 1px solid #000;
    border-radius: 10px;
  }
  /*修改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;
    }
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  .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;
  }
}
</style>

 src/views/datamanage/styleManage.vue

@@ -53,7 +53,7 @@
          <el-table
            :data="tableData"
            style="width: 100%"
            fit

            height="100%"
            @selection-change="handleSelectionChange"
          >
@@ -371,7 +371,7 @@
            style="display: none"
            @change="editFile(0)"
          />
           <el-link 
           <el-link
            :underline="false"
            @click="geteditFile(0)"
            style="margin-left: 10px"
@@ -399,7 +399,7 @@
            style="display: none"
            @change="editFile(1)"
          />
           <el-link 
           <el-link
            :underline="false"
            @click="geteditFile(1)"
            style="margin-left: 10px"
@@ -1182,10 +1182,10 @@
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;

  .el-input {
@@ -1194,7 +1194,7 @@

  .searchComp {
    margin: 10px auto;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    .el-form-item {
@@ -1235,60 +1235,68 @@
      width: 100%;
      .table_box {
        width: 100%;
        height: 93%;
        height: 90%;
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        // .el-table {
        //   height: 100%;
        //   // overflow: auto;
        // }
        // .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: 0;
        // }
        // // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        // .el-table /deep/ .el-table__header tr,
        // .el-table /deep/ .el-table__header th {
        //   height: 40px;
        // }
        // .el-table__body tr,
        // .el-table__body td {
        //   height: 40px;
        //   padding: 0;
        // }
        // // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š
 /*修改table è¡¨ä½“的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

        // .el-table--border::after,
        // .el-table--group::after {
        //   width: 0;
        // }
        // .el-table::before {
        //   height: 0;
        // }
        //   a {
        //     color: #000;
        //   }
    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;
    }
  }

      }
    }
  }
@@ -1345,31 +1353,70 @@
      background: #ededed;
    }
  }
   .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;
    }
  }
 /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }

  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-cascader .el-input__inner {
    border-color: #fff !important;
  }

}
</style>
<style>
/* æ•´ä½“样式 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* æ»šåŠ¨æ¡ */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #b3d8ff;
  border-radius: 6px;
}

/* æ»šåŠ¨æ¡é¼ æ ‡ç»è¿‡æ ·å¼ */
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #66b1ff;
  border-radius: 8px;
}

/* æ»šåŠ¨æ¡è½¨é“ */
.el-table__body-wrapper::-webkit-scrollbar-track-piece {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>

 src/views/datamanage/versionManage.vue

@@ -1,5 +1,5 @@
<template>
  <div class="authorityManagement_box">
  <div class="verSionBox">
    <My-bread
      :list="[
        `${$t('dataManage.dataManage')}`,
@@ -7,45 +7,46 @@
      ]"
    ></My-bread>
    <el-divider />
    <div class="searchComp">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
          <el-input
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            @click="onSubmit('ruleForm')"
            icon="el-icon-search"
            size="small"
            >{{ $t("common.iquery") }}</el-button
          >
          <el-button
            v-if="btnStatus.insert"
            @click="InsertFormdialog = true"
            icon="el-icon-plus"
            size="small"
            >{{ $t("common.append") }}</el-button
          >
          <el-button
            @click="resetForm('ruleForm')"
            icon="el-icon-delete"
            size="small"
            >{{ $t("common.empty") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="leftTree">
    <div class="verSionContent">
      <div class="verSion_leftTree">
        <ver-dir-tree></ver-dir-tree>
      </div>
      <div class="rightTable">
        <div class="table_box">
          <el-table :data="tableData" stripe style="width: 100%" height="99%">
            <!-- <el-table-column type="selection" width="40" /> -->
      <div class="verSion_rightContent">
        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
            <el-input
              v-model="ruleForm.name"
              :placeholder="$t('common.pleaseInput')"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              @click="onSubmit('ruleForm')"
              icon="el-icon-search"
              size="small"
              class="primary"
              >{{ $t('common.iquery') }}</el-button
            >
            <el-button
              type="success"
              v-if="btnStatus.insert"
              @click="(InsertFormdialog = true), getSelectdirTab()"
              icon="el-icon-plus"
              size="small"
              >{{ $t('common.append') }}</el-button
            >
            <el-button
              type="info"
              @click="resetForm('ruleForm')"
              icon="el-icon-delete"
              size="small"
              >{{ $t('common.empty') }}</el-button
            >
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
        <div style="height: 80%">
          <el-table :data="tableData" style="width: 100%" height="99%">
            <el-table-column
              align="center"
              type="index"
@@ -97,34 +98,165 @@
                  @click="handleEdit(scope.$index, scope.row)"
                  type="warning"
                  size="small"
                  >{{ $t("common.update") }}</el-button
                  >{{ $t('common.update') }}</el-button
                >
                <el-button
                  v-if="btnStatus.delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  type="danger"
                  size="small"
                  >{{ $t("common.delete") }}</el-button
                  >{{ $t('common.delete') }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="margin-top: 20px; margin-left: 200px"
          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"
          <div
            style="margin-top: 20px; margin-left: 200px"
            class="pagination_box"
          >
          </el-pagination>
            <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>
      </div>
    </div>
    <el-dialog
      :title="$t('dataManage.vmobj.editVersion')"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="upform">
        <el-form-item
          :label="$t('dataManage.vmobj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.catalogue')"
          :label-width="formLabelWidth"
        >
          <el-cascader
            style="width: 300px"
            v-model="upform.dirid"
            :options="catalogOption"
            @change="upCatalogChange"
            :props="cascader"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.descr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" type="info" class="dialog-footer">
        <el-button @click="editFromDataClose">{{
          $t('common.close')
        }}</el-button>
        <el-button @click="editFromData" class="primary">{{
          $t('common.confirm')
        }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('dataManage.vmobj.addVersion')"
      :visible.sync="InsertFormdialog"
      width="30%"
    >
      <el-form :model="insertform">
        <el-form-item
          :label="$t('dataManage.vmobj.name')"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width: 300px"
            v-model="insertform.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.catalogue')"
          :label-width="formLabelWidth"
        >
          <el-cascader
            style="width: 300px"
            v-model="insertform.path"
            :options="catalogOption"
            @change="catalogChange"
            :props="cascader"
          ></el-cascader>
        </el-form-item>

        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width: 300px"
            v-model="insertform.descr"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertFromDataClose" type="info">{{
          $t('common.close')
        }}</el-button>
        <el-button @click="insertFromData" class="primary">{{
          $t('common.confirm')
        }}</el-button>
      </div>
    </el-dialog>
    <!-- <div class="searchComp">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
          <el-input
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            @click="onSubmit('ruleForm')"
            icon="el-icon-search"
            size="small"
            >{{ $t('common.iquery') }}</el-button
          >
          <el-button
            v-if="btnStatus.insert"
            @click="InsertFormdialog = true"
            icon="el-icon-plus"
            size="small"
            >{{ $t('common.append') }}</el-button
          >
          <el-button
            @click="resetForm('ruleForm')"
            icon="el-icon-delete"
            size="small"
            >{{ $t('common.empty') }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="leftTree">
        <ver-dir-tree></ver-dir-tree>
      </div>
      <div class="rightTable">
        <div class="table_box">

        </div>

      </div>
    </div>
    <div class="infoBox" v-show="showinfoBox">
@@ -152,100 +284,20 @@
        </div>
      </el-card>
    </div>
    <el-dialog
      :title="$t('dataManage.vmobj.editVersion')"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="upform">
        <el-form-item
          :label="$t('dataManage.vmobj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.catalogue')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="upform.depName"
            autocomplete="off"
            disabled
          ></el-input>
          <el-button style="margin-left: 20px" @click="showVerTree(2)">{{
            $t("common.choose")
          }}</el-button>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.descr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button @click="editFromData" type="primary">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('dataManage.vmobj.addVersion')"
      :visible.sync="InsertFormdialog"
    >
      <el-form :model="insertform">
        <el-form-item
          :label="$t('dataManage.vmobj.name')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.catalogue')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertform.path"
            autocomplete="off"
            disabled
          ></el-input>
          <el-button style="margin-left: 20px" @click="showVerTree(3)">{{
            $t("common.choose")
          }}</el-button>
        </el-form-item>

        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button @click="insertFromData" type="primary">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
    <div class="leftTrees" v-if="showCata">
      <div class="treeBox">
        <ver-dir-trees></ver-dir-trees>
      </div>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="selectCataName">{{
          $t("common.confirm")
          $t('common.confirm')
        }}</el-button>
        <el-button type="primary" size="small" @click="showCata = false">{{
          $t("common.close")
          $t('common.close')
        }}</el-button>
      </div>
    </div>
    </div> -->
  </div>
</template>

@@ -255,18 +307,20 @@
  insertVersion,
  deleteVersion,
  updateVersion,
} from "../../api/api";
import verDirTree from "./verDirTree.vue";
import MyBread from "../../components/MyBread.vue";
import verDirTrees from "./verDirTrees.vue";
import moment from "moment";
  selectdirTab,
} from '../../api/api';
import verDirTree from './verDirTree.vue';
import MyBread from '../../components/MyBread.vue';
import verDirTrees from './verDirTrees.vue';
import moment from 'moment';
export default {
  name: "versionManage",
  name: 'versionManage',
  components: { MyBread, verDirTree, verDirTrees },
  data() {
    return {
      catalogOption: [],
      showCata: false,
      formLabelWidth: "100px",
      formLabelWidth: '100px',
      dialogFormVisible: false,
      InsertFormdialog: false,
      showinfoBox: false,
@@ -282,6 +336,13 @@
        depName: null,
        pageIndex: 1,
        pageSize: 10,
      },
      cascader: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
      },
      btnStatus: {
        select: false,
@@ -302,7 +363,35 @@
      return this.$store.state.cataNode.id;
    },
  },

  methods: {
    //目录切换
    catalogChange(value) {
      this.insertform.dirid = value;
    },
    upCatalogChange(val) {
      this.upform.dirid == value;
    },
    //目录列表获取
    async getSelectdirTab() {
      const res = await selectdirTab();
      if (res.code != 200) {
        this.$message.error('目录列表获取失败');
        return;
      }
      this.insertform.path = 1;
      this.catalogOption = this.treeData(res.result);
    },
    //树列表生成
    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; // è¿”回一级菜单
      });
    },
    showPermsBtn() {
      let currentPerms = this.$store.state.currentPerms;
      let permsEntity = this.$store.state.permsEntity;
@@ -313,14 +402,14 @@
    resetForm() {
      this.ruleForm = {};
      this.$store.state.verCateNode = {};
      this.$bus.$emit("clearTressLabel", true);
      this.$bus.$emit('clearTressLabel', true);
      this.getRoleTabelData();
    },
    onSubmit() {
      this.getRoleTabelData();
    },
    async getRoleTabelData() {
      if (this.listData.tab == "") {
      if (this.listData.tab == '') {
        delete this.listData.tab;
      }

@@ -329,7 +418,7 @@
      const data = await select_Ver_ByPageAndCount(this.listData);

      if (data.code != 200) {
        this.$message.error("列表调用失败");
        this.$message.error('列表调用失败');
      }
      this.tableData = data.result;
      this.count = data.count;
@@ -363,8 +452,8 @@
    async editFromData() {
      if (this.upform.depName == null) {
        this.$message({
          message: "请选择角色所属单位",
          type: "warning",
          message: '请选择角色所属单位',
          type: 'warning',
        });
        return;
      }
@@ -373,14 +462,14 @@
        this.dialogFormVisible = false;
        this.upform = {};
        this.$message({
          message: "修改成功！",
          type: "success",
          message: '修改成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: "修改失败！",
          type: "warning",
          message: '修改失败！',
          type: 'warning',
        });
      }
    },
@@ -391,8 +480,8 @@
    async insertFromData() {
      if (this.insertform.dirid == null) {
        this.$message({
          message: "请选择角色所属单位",
          type: "warning",
          message: '请选择角色所属单位',
          type: 'warning',
        });
        return;
      }
@@ -401,37 +490,37 @@
        this.InsertFormdialog = false;
        this.insertform = {};
        this.$message({
          message: "添加成功！",
          type: "success",
          message: '添加成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: "添加失败！",
          type: "warning",
          message: '添加失败！',
          type: 'warning',
        });
      }
    },
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined || date === null) {
        return "";
        return '';
      }
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
    },
    async handleDelete(index, row) {
      const data = await deleteVersion(row.id);
      if (data.code == 200) {
        this.InsertFormdialog = false;
        this.$message({
          message: "删除成功！",
          type: "success",
          message: '删除成功！',
          type: 'success',
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: "删除失败！",
          type: "warning",
          message: '删除失败！',
          type: 'warning',
        });
      }
    },
@@ -450,159 +539,165 @@
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
.verSionBox {
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;
  .el-input {
    width: 300px !important;
  }
  .leftTrees {
    position: absolute;
    z-index: 9999;
    top: 9%;
    left: 37%;
    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;
    }
  }
  .searchComp {
    margin: 10px auto;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    .el-form-item {
      margin: 5px;
    }
  }
  .bottom {
  .verSionContent {
    width: 100%;
    height: 85%;
    height: 92%;
    display: flex;
    .leftTree {
      width: 344px;
      background: #f4f8ff;
      border-radius: 10px;
      overflow: auto;
    justify-content: space-between;
    .verSion_leftTree {
      width: 15%;
      height: 95%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      max-height: 670px;
      overflow-y: auto;
    }
    .rightTable {
      height: 100%;
      width: 77.8%;
      // background-color: red;
      .table_box {
        width: 100%;
        height: 93%;
        margin: 0 auto;
        overflow: auto;
        background: #fff;
        // .el-table {
        //   height: 100%;
        // }
        // .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: 0;
        // }
        // è®¾ç½®è¡¨æ ¼æ¯è¡Œçš„高度：
        // .el-table /deep/ .el-table__header tr,
        // .el-table /deep/ .el-table__header th {
        //   height: 40px;
        // }
        // .el-table__body tr,
        // .el-table__body td {
        //   height: 40px;
        //   padding: 0;
        // }
        // è®¾ç½®è¡¨æ ¼è¾¹æ¡†é¢œè‰²ï¼š

        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .el-table::before {
          height: 0;
        }
        //   a {
        //     color: #000;
        //   }
      }
    .verSion_rightContent {
      width: 80%;
      height: 95%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
    }
  }
  .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;
      }
  .eldivider {
    margin-top: 0px;
  }
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  .pagination_box {
    margin-top: 20px;
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    .contentBox {
      margin: 0 aotu 10px;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
        font-size: 14px;
      }
    /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;
    }
  }

  /deep/.el-form-item__label {
    color: white;
  }
  // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /*修改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;
    }
  }
  /deep/ .el-dialog {
    width: 620px !important;
    margin-top: 10vh !important;
    background: #303030;
  }

  /deep/.el-dialog .el-input__inner {
    width: 300px;
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/ .el-dialog__body {
    padding: 0px 30px;
  /deep/.el-dialog__title {
    color: white;
  }
  /deep/ .el-dialog__footer {
    padding-top: 0 !important;
    width: 600px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-cascader .el-input__inner {
    border-color: #fff !important;
  }
}
</style>

 src/views/maintenance/menuSettings.vue

@@ -628,29 +628,28 @@
          break;
      }
    },
    getPerms() {
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
      if (permsEntity.length == 0) {
        getPerms().then((res) => {
          if (res.code == 200) {
            permsEntity = res.result;
          }
        });
      }
      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
          this.showPermsMenu(permsEntity[i]);
        }
      }
    },
  },
  mounted() {
    this.getMenuTree();
    this.getPerms();
  },
  created() {
    var val = this.$store.state.currentPerms;
    if (!val) {
      val = '/menu';
    }
    var permsEntity = this.$store.state.permsEntity;
    if (permsEntity.length == 0) {
      getPerms().then((res) => {
        if (res.code == 200) {
          permsEntity = res.result;
        }
      });
    }
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);
      }
    }
  },
  created() {},
};
</script>
<style lang="less" scoped>

 src/views/maintenance/mochaitmo.vue

@@ -113,12 +113,13 @@
  },
  data() {
    return {
      setMenuFlag: 'menuSettings',
      setMenuFlag: '   ',
      activeIndex: ' ',
      oriData: [], //原始树数据
      dirData: [], //el树数据
      newData: [], //拖动后数据
      lang: 'zh',
      activeIndex: 'menuSettings',

      menuList: [],
      editTitle: '',
      showPopover: false,
@@ -131,7 +132,7 @@
      formLabelWidth: '70px',
    };
  },

  created() {},
  mounted() {
    this.getTreeData();
  },
@@ -146,6 +147,7 @@
            return value.type == 1;
          });
          this.menuList = this.treeData(menuList);
          this.setViewController(this.menuList[0]);
        } else {
          alert('暂无菜单栏数据');
        }
@@ -154,6 +156,15 @@
      }

      // this.treeList = this.treeData(data.result);
    },
    setViewController(res) {
      if (res.children != null) {
        this.setViewController(res.children[0]);
      } else {
        this.$store.state.currentPerms = res.perms;
        this.setMenuFlag = res.url;
        this.activeIndex = res.url;
      }
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
@@ -183,73 +194,6 @@
        }
      }
      this.setMenuFlag = index;
    },
    //树点击
    handleNodeClick(data) {
      this.$store.state.currentPerms = data.perms;
      var index = data.url;
      if (index != null) {
        if (index.indexOf('http') != -1) {
          this.$store.commit('getIframe', data.url);
        }
      }

      switch (data.cnName) {
        case '菜单管理':
          this.setMenuFlag = '1';
          break;
        case '用户管理':
          this.setMenuFlag = '2';
          break;
        case '单位管理':
          this.setMenuFlag = '3';
          break;
        case '资源管理':
          this.setMenuFlag = '4';
          break;
        case '角色管理':
          this.setMenuFlag = '5';
          break;
        case '权限管理':
          this.setMenuFlag = '6';
          break;
        case '用户角色授权':
          this.setMenuFlag = '7';
          break;
        case '菜单权限授权':
          this.setMenuFlag = '8';
          break;
        case '角色菜单授权':
          this.setMenuFlag = '9';
          break;
        case '角色资源授权':
          this.setMenuFlag = '10';
          break;
        case '登录日志':
          this.setMenuFlag = '11';
          break;
        case '操作日志':
          this.setMenuFlag = '12';
          break;
        case '资源日志':
          this.setMenuFlag = '13';
          break;
        case '令牌管理':
          this.setMenuFlag = '14';
          break;
        case '黑/白名单':
          this.setMenuFlag = '15';
          break;
        case '数据库监控':
          this.setMenuFlag = '16';
          break;
        case '系统监控':
          this.setMenuFlag = '17';
          break;
        case '系统配置':
          this.setMenuFlag = '18';
          break;
      }
    },
  },
};