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

Surpriseplus

2022-11-24 a7199e5a4f3e34b14d395e319a552c5c3b8b3a4d

 src/views/datamanage/metadataManage.vue

@@ -64,6 +64,17 @@
      </el-form>
    </div>
    <div class="bottom">
      <div class="leftTree">
        <ul>
          <li
            @click="getTableDesc(item)"
            v-for="item in optionCount"
            :class="{ active: activeName == item.tab }"
          >
            {{ item.tabDesc }}({{ item.tab }})
          </li>
        </ul>
      </div>
      <div class="rightTable">
        <div class="table_box">
          <el-table
@@ -73,34 +84,39 @@
            height="99%"
          >
            <el-table-column type="selection" width="55" />
            <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 prop="name" :label="$t('dataManage.vmobj.name')" />
            <el-table-column
              prop="createUser"
              prop="type"
              :label="$t('dataManage.vmobj.format')"
            />
            <el-table-column
              prop="sizes"
              :label="$t('dataManage.vmobj.size')"
              :formatter="stateFormatSizes"
            />
            <el-table-column
              prop="depName"
              :label="$t('dataManage.vmobj.depName')"
            />
            <el-table-column
              prop="gather"
              :label="$t('dataManage.vmobj.gather')"
              :formatter="formatData"
            />
            <el-table-column
              prop="describe"
              :label="$t('dataManage.vmobj.describe')"
            />
            <el-table-column
              prop="uname"
              :label="$t('dataManage.vmobj.createonuser')"
            />
            <el-table-column
              prop="createTime"
              :label="$t('dataManage.vmobj.createontime')"
            />
            <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')"
              :formatter="formatData"
            />

            <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 style="color: white" @click="showDetail(scope.row)">{{
@@ -119,9 +135,9 @@
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
@@ -140,25 +156,29 @@
        <div class="contentBox">
          <p>{{ $t('dataManage.vmobj.name') }}：{{ itemdetail.name }}</p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.type') }}：{{ itemdetail.type }}</p>
          <p>{{ $t('dataManage.vmobj.format') }}：{{ itemdetail.type }}</p>
          <el-divider></el-divider>
          <p>{{ $t('common.format') }}：{{ itemdetail.format }}</p>
          <p>{{ $t('common.size') }}：{{ setInfoBoxSize(itemdetail.sizes) }}</p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.depName') }}：{{ itemdetail.depName }}</p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.gather') }}：{{
              setInfoBoxTime(itemdetail.gather)
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.describe') }}：{{ itemdetail.describe }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.createonuser') }}：{{ itemdetail.uname }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.createontime') }}：{{
              itemdetail.createTime
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.createonuser') }}：{{
              itemdetail.createUser
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.updateontime') }}：{{
              itemdetail.updateTime
              setInfoBoxTime(itemdetail.createTime)
            }}
          </p>
          <el-divider></el-divider>
@@ -168,15 +188,11 @@
            }}
          </p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.coordSystem') }}：{{ itemdetail.cs }}</p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.scale') }}：{{ itemdetail.scale }}</p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.resolpower') }}：{{ itemdetail.resolution }}
            {{ $t('dataManage.vmobj.updateontime') }}：{{
              setInfoBoxTime(itemdetail.updateTime)
            }}
          </p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.describe') }}：{{ itemdetail.descr }}</p>
        </div>
      </el-card>
    </div>
@@ -199,41 +215,41 @@
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.type')"
          :label="$t('dataManage.vmobj.format')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('common.format')"
          :label="$t('dataManage.vmobj.size')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.format" autocomplete="off"></el-input>
          <el-input v-model="editForm.sizes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.coordSystem')"
          :label="$t('dataManage.vmobj.depName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.cs" autocomplete="off"></el-input>
        </el-form-item>
        <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="$t('dataManage.vmobj.resolpower')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.resolution" autocomplete="off"></el-input>
          <!-- <el-input v-model="editForm.depName" autocomplete="off"></el-input> -->
          <el-cascader
            v-model="editForm.depid"
            :options="companyOption"
            @change="companyChange"
            :props="cascader"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.vmobj.describe')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.descr" autocomplete="off"></el-input>
          <el-input v-model="editForm.describe" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item
          :label="$t('dataManage.vmobj.gather')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="editForm.gather" autocomplete="off"></el-input>
        </el-form-item> -->
      </el-form>
      <div v-if="behavior == '修改信息'" slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancelEdit()">{{
@@ -295,6 +311,8 @@
  updateMeta,
  deleteMeta,
  insertMeta,
  selectDictTab,
  queryDepTree,
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
@@ -311,6 +329,9 @@
      }
    };
    return {
      companyOption: [],
      activeName: '',
      optionCount: [],
      showCodeBox: false,
      value: true,
      multipleSelection: [],
@@ -349,16 +370,107 @@
        insert: false,
        update: false,
      },
      listData: {
        pageSize: 10,
        pageIndex: 1,
        name: null,
      },
      cascader: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  created() {
    this.getMetaData({
      pageIndex: 1,
      pageSize: 10,
    });
    this.getMetaData();
    this.getSelectDictTab();
    this.showPermsBtn();
    this.getQueryDepTree();
  },
  methods: {
    //单位列表获取
    async getQueryDepTree() {
      const res = await queryDepTree();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      // this.formInline.depid = 1;
      this.companyOption = this.treeData(res.result);
    },
    //格式化列表
    formatData(row, column) {
      let data = row[column.property];
      if (data == null) {
        return data;
      }
      return this.format(data);
    },
    setInfoBoxTime(res) {
      if (res == null) {
        return res;
      }
      return this.format(res);
    },
    setInfoBoxSize(res) {
      if (res >= 1024) {
        return parseFloat(res / 1024).toFixed(3) + ' GB';
      } else {
        return res + ' MB';
      }
    },
    //格式化时间
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        h +
        ':' +
        mm +
        ':' +
        s
      );
    },
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    //单位转换
    stateFormatSizes(row, column) {
      if (row.sizes >= 1024) {
        const val = parseFloat(row.sizes / 1024).toFixed(3);
        return val + ' GB';
      } else {
        return row.sizes + ' MB';
      }
    },
    //目录树获取
    async getSelectDictTab() {
      const data = await selectDictTab();
      if (data.code != 200) {
        this.$message.error('下拉调用失败');
      }
      this.optionCount = data.result;
      this.activeName = data.result[0].tab;
    },
    getTableDesc(res) {
      this.activeName = res.tab;
    },
    //显示权限按钮
    showPermsBtn() {
      let currentPerms = this.$store.state.currentPerms;
@@ -400,35 +512,26 @@
      );
    },
    // 请求数据内容
    getMetaData(params) {
      select_meta_ByPageAndCount(params).then((res) => {
    getMetaData() {
      select_meta_ByPageAndCount(this.listData).then((res) => {
        this.tableData = res.result;
        this.count = res.count;
      });
    },
    // 查询
    queryInfo() {
      let searchData = {
        name: this.queryForm.name.trim(),
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      select_meta_ByPageAndCount(searchData).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
          this.count = res.count;
        } else {
          console.log('查询接口报错');
          this.$notify.error({
            title: res.code,
            message: res.result,
          });
        }
      });
      this.listData.name = this.queryForm.name.trim();
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.getMetaData();
    },
    // 重置查询
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.listData.name = null;
      this.getMetaData();
    },
    //新增按钮
    showAddDialog() {
@@ -450,7 +553,9 @@
              setTimeout(() => {
                this.fullscreenLoading = false;
                if (res.code == 200) {
                  this.getMetaData({ pageIndex: 1, pageSize: 10 });
                  this.listData.pageSize = 10;
                  this.listData.pageIndex = 1;
                  this.getMetaData();
                  this.$message({
                    message: '添加成功',
                    type: 'success',
@@ -493,7 +598,9 @@
                message: '删除成功!',
              });
              this.multipleSelection = [];
              this.getMetaData({ pageIndex: 1, pageSize: 10 });
              this.listData.pageSize = 10;
              this.listData.pageIndex = 1;
              this.getMetaData();
            } else {
              this.$message.error('删除失败');
              this.multipleSelection = [];
@@ -550,7 +657,9 @@
            setTimeout(() => {
              this.fullscreenLoading = false;
              if (res.code == 200) {
                this.getMetaData({ pageIndex: 1, pageSize: 10 });
                this.listData.pageSize = 10;
                this.listData.pageIndex = 1;
                this.getMetaData();
                this.$message({
                  message: '修改成功',
                  type: 'success',
@@ -586,13 +695,23 @@
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.queryInfo();
      this.listData.pageSize = val;
      this.listData.pageIndex = 1;
      this.getMetaData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.currentPage = val;
      this.queryInfo();
      this.listData.pageIndex = val;
      this.getMetaData();
    },
    //树列表生成
    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; // 返回一级菜单
      });
    },
  },
};
@@ -617,15 +736,39 @@
    }
  }
  .bottom {
    width: 98%;
    width: 100%;
    margin-top: 1%;
    height: 74%;
    padding: 1%;
    border: 1px solid white;
    border-radius: 5px;
    .rightTable {
    display: flex;
    justify-content: space-between;
    .leftTree {
      width: 15%;
      height: 100%;
      width: 100%;
      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);
      }
      .active {
        color: #409eff;
      }
    }
    .rightTable {
      width: 80%;
      height: 100%;
      border: 1px solid white;

      border-radius: 5px;
      padding: 1%;
      .table_box {
        width: 100%;
        height: 93%;