资料馆界面重构，优化

Surpriseplus

2023-02-26 9dedc69f2c18b28cf18807531b6c8b81e6ad77e3

 src/views/datamanage/dictionaryManage.vue

@@ -1,32 +1,37 @@
<template>
  <div class="dictionaryBox">
    <My-bread
      :list="[
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.dictionaryManage')}`,
      ]"
    ></My-bread>
      ]"></My-bread>
    <el-divider />
    <div class="mainBox">
     
        <div class="dictionary_leftTree subpage_Div" style="border: 1px solid #dcdfe6;">
          <ul>
            <li
              @click="getTableDesc(item)"
              v-for="(item, i) in optionCount"
              :class="{ active: activeName == item.tab }"
              :key="i"
            >
              {{ item.tabDesc }}
            </li>
          </ul>
        </div>
  

      <div
        class="dictionary_leftTree subpage_Div"
        style="border: 1px solid #dcdfe6;"
      >
        <ul>
          <li
            @click="getTableDesc(item)"
            v-for="(item, i) in optionCount"
            :class="{ active: activeName == item.tab }"
            :key="i"
          >
            {{ item.tabDesc }}
          </li>
        </ul>
      </div>

      <div class="right subpage_Div">
        <div class="inquire">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item
                size="small"
              size="small"
              :label="$t('dataManage.dictionaryManageObj.tableName')"
            >
              <el-input
@@ -43,46 +48,53 @@
                size="small"
                @click="InsertFormdialog = true"
                type="success"
                >{{ $t("common.append") }}</el-button
              >
              >{{ $t("common.append") }}</el-button>
              <el-button
                v-if="btnStatus.delete"
                icon="el-icon-delete"
                size="small"
                @click="DelFormData"
                type="danger"
                >{{ $t("common.delete") }}</el-button
              >
              >{{ $t("common.delete") }}</el-button>
              <el-button
                icon="el-icon-search"
                size="small"
                @click="getSelectDictTab"
                class="primary"
                >{{ $t("common.iquery") }}</el-button
              >
              >{{ $t("common.iquery") }}</el-button>
              <el-button
                icon="el-icon-refresh"
                size="small"
                @click="getRemoveForm"
                type="info"
                >{{ $t("common.reset") }}</el-button
              >
              >{{ $t("common.reset") }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="dividing-line"></div>
        <div class="table_box" style="height:calc(100% - 60px)">
        <div
          class="table_box"
          style="height:calc(100% - 60px)"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            height="calc(100% - 57px)"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              type="index"
              width="50"
              :label="$t('common.index')"
            ></el-table-column>
            <!-- <el-table-column
              prop="orderNum"
              :label="$t('dataManage.dictionaryManageObj.number')"
            />
            /> -->
            <el-table-column
              min-width="100"
              prop="field"
@@ -149,26 +161,27 @@
            >
              <template slot-scope="scope">
                <el-button
                 type="primary"
                  type="primary"
                  plain
                  size="small"
                  v-if="btnStatus.select"
                  @click="showDetail(scope.$index, scope.row)"
                  >{{ $t("dataManage.dictionaryManageObj.lookOver") }}</el-button
                >
                >{{ $t("dataManage.dictionaryManageObj.lookOver") }}</el-button>
                <el-button
                 type="warning"
                  type="warning"
                  plain
                  size="small"
                  v-if="btnStatus.update"
                  @click="handleEdit(scope.$index, scope.row)"
                  style="margin-left: 10px"
                  >{{ $t("dataManage.dictionaryManageObj.revamp") }}</el-button
                >
                >{{ $t("dataManage.dictionaryManageObj.revamp") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination_box" style="margin-top: 15px">
          <div
            class="pagination_box"
            style="margin-top: 15px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
@@ -183,165 +196,219 @@
        </div>
      </div>
    </div>
    <div class="infoBox_box" v-show="showinfoBox">
    <div class="infoBox box_div">
      <div slot="header" class="clearfix">
        <span>{{ $t("dataManage.dictionaryManageObj.particulars") }}</span>
        <div style="float: right; cursor: pointer" @click="closeDetial">
          <i class="el-icon-close"></i>
    <div
      class="infoBox_box"
      v-show="showinfoBox"
    >
      <div class="infoBox box_div">
        <div
          slot="header"
          class="clearfix"
        >
          <span>{{ $t("dataManage.dictionaryManageObj.particulars") }}</span>
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
          >
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <p>
          {{ $t("dataManage.dictionaryManageObj.tableName") }}：{{
        <el-divider></el-divider>
        <div class="contentBox">
          <p>
            {{ $t("dataManage.dictionaryManageObj.tableName") }}：{{
            itemdetail.tab
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.tableAliasName") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.tableAliasName") }}：{{
            itemdetail.tabDesc
          }}
        </p>
        <el-divider></el-divider>
          </p>
          <el-divider></el-divider>

        <p>
          {{ $t("dataManage.dictionaryManageObj.fieldName") }}：{{
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldName") }}：{{
            itemdetail.field
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.fieldAliasName") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldAliasName") }}：{{
            itemdetail.alias
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.fieldType") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldType") }}：{{
            itemdetail.type
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.fieldLength") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.fieldLength") }}：{{
            itemdetail.len
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.FieldPrecision") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.FieldPrecision") }}：{{
            itemdetail.precision
          }}
        </p>
        <el-divider></el-divider>
          </p>
          <el-divider></el-divider>

        <p>
          {{ $t("dataManage.dictionaryManageObj.remark") }}：{{
          <p>
            {{ $t("dataManage.dictionaryManageObj.remark") }}：{{
            itemdetail.bak
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.creationTime") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.creationTime") }}：{{
            itemdetail.createTime
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.createPersonnel") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.createPersonnel") }}：{{
            itemdetail.createUser
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.updateTime") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.updateTime") }}：{{
            itemdetail.updateTime
          }}
        </p>
        <el-divider></el-divider>
        <p>
          {{ $t("dataManage.dictionaryManageObj.updatePersonnel") }}：{{
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t("dataManage.dictionaryManageObj.updatePersonnel") }}：{{
            itemdetail.updateUser
          }}
        </p>
          </p>
        </div>
      </div>
    </div>
    </div>
    <el-dialog
      top="2vh"
      :title="$t('dataManage.dictionaryManageObj.revamp')"
      :visible.sync="dialogFormVisible"
    >
     <div style="height: 500px; overflow: auto">
      <el-form :model="upform" label-position="top">
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.number')"
          :label-width="formLabelWidth"
      <div style="height: 500px; overflow: auto">
        <el-form
          :model="upform"
          label-position="top"
        >
          <el-input v-model="upform.orderNum" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.tableName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.tab" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.tableAliasName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.tabDesc" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.number')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.orderNum"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.tableName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.tab"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.tableAliasName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.tabDesc"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.field" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.alias" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldType')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.type" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldLength')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.len" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.precision" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.field"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.alias"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldType')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.type"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldLength')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.len"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.precision"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.remark')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="upform.bak" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
      </el-form>
     </div>
      <div slot="footer" class="dialog-footer">
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.remark')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="upform.bak"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="info"
          size="small"
          @click="dialogFormVisible = false"
          >{{ $t("dataManage.dictionaryManageObj.cancel") }}</el-button
        >
        <el-button class="primary" size="small" @click="updateForm">{{
        >{{ $t("dataManage.dictionaryManageObj.cancel") }}</el-button>
        <el-button
          class="primary"
          size="small"
          @click="updateForm"
        >{{
          $t("dataManage.dictionaryManageObj.confirm")
        }}</el-button>
      </div>
@@ -351,75 +418,121 @@
      top="2vh"
      :visible.sync="InsertFormdialog"
    >
     <div style="height: 500px; overflow: auto">
      <el-form :model="insertform" label-position="top">
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.number')"
          :label-width="formLabelWidth"
      <div style="height: 500px; overflow: auto">
        <el-form
          :model="insertform"
          label-position="top"
        >
          <el-input v-model="insertform.orderNum" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.tableName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.tab" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.tableAliasName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.tabDesc" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.number')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.orderNum"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.tableName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.tab"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.tableAliasName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.tabDesc"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.field" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.alias" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldType')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.type" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.fieldLength')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.len" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertform.precision"
            autocomplete="off"
            style="width:85%"
          ></el-input>
        </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.field"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.alias"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldType')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.type"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.fieldLength')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.len"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.precision"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>

        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.remark')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.bak" autocomplete="off" style="width:85%"></el-input>
        </el-form-item>
      </el-form>
     </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="InsertFormdialog = false">{{
          <el-form-item
            :label="$t('dataManage.dictionaryManageObj.remark')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="insertform.bak"
              autocomplete="off"
              style="width:85%"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="info"
          size="small"
          @click="InsertFormdialog = false"
        >{{
          $t("dataManage.dictionaryManageObj.cancel")
        }}</el-button>
        <el-button type="primary" size="small" @click="insertFromData">{{
        <el-button
          type="primary"
          size="small"
          @click="insertFromData"
        >{{
          $t("dataManage.dictionaryManageObj.confirm")
        }}</el-button>
      </div>
@@ -639,34 +752,34 @@
  height: 98%;
  width: 98%;
  padding: 0.5%;
    .dictionary_leftTree {
      width: calc(23% - 0px);
      height: 100%;
      padding: 10px;
      border-radius: 5px;
      box-sizing: border-box;
      overflow-y: auto;
      li {
        border-bottom: 1px solid #dcdfe6;
        line-height: 30px;
        text-align: center;
      }
      li:hover {
        background: rgba(255, 255, 255, 0.3);
      }
      .active {
        color: #409eff;
      }
  .dictionary_leftTree {
    width: calc(23% - 0px);
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    li {
      border-bottom: 1px solid #dcdfe6;
      line-height: 30px;
      text-align: center;
    }
    .dictionary_rightContent {
      width: 80%;
      height: 80%;
    li:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    .active {
      color: #409eff;
    }
  }
  .dictionary_rightContent {
    width: 80%;
    height: 80%;

      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
    }
  
    border-radius: 5px;
    padding: 1%;
    overflow-y: auto;
  }

  .infinite-list-item {
    background: rgba(255, 255, 255, 0.3);

@@ -711,7 +824,6 @@
        margin: 5px;
      }
    }

  }
}
</style>