资料馆界面重构，优化

Surpriseplus

2023-02-26 9dedc69f2c18b28cf18807531b6c8b81e6ad77e3

 src/views/datamanage/dictionaryManage.vue

@@ -1,15 +1,16 @@
<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;">
      <div
        class="dictionary_leftTree subpage_Div"
        style="border: 1px solid #dcdfe6;"
      >
          <ul>
            <li
              @click="getTableDesc(item)"
@@ -24,7 +25,11 @@
  
      <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"
              :label="$t('dataManage.dictionaryManageObj.tableName')"
@@ -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"
@@ -154,8 +166,7 @@
                  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"
                  plain
@@ -163,12 +174,14 @@
                  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,11 +196,20 @@
        </div>
      </div>
    </div>
    <div class="infoBox_box" v-show="showinfoBox">
    <div
      class="infoBox_box"
      v-show="showinfoBox"
    >
    <div class="infoBox box_div">
      <div slot="header" class="clearfix">
        <div
          slot="header"
          class="clearfix"
        >
        <span>{{ $t("dataManage.dictionaryManageObj.particulars") }}</span>
        <div style="float: right; cursor: pointer" @click="closeDetial">
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
          >
          <i class="el-icon-close"></i>
        </div>
      </div>
@@ -275,73 +297,118 @@
      :visible.sync="dialogFormVisible"
    >
     <div style="height: 500px; overflow: auto">
      <el-form :model="upform" label-position="top">
        <el-form
          :model="upform"
          label-position="top"
        >
        <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-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-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-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-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-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-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-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-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-input
              v-model="upform.bak"
              autocomplete="off"
              style="width:85%"
            ></el-input>
        </el-form-item>
      </el-form>
     </div>
      <div slot="footer" class="dialog-footer">
      <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>
@@ -352,49 +419,80 @@
      :visible.sync="InsertFormdialog"
    >
     <div style="height: 500px; overflow: auto">
      <el-form :model="insertform" label-position="top">
        <el-form
          :model="insertform"
          label-position="top"
        >
        <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-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-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-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-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-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-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-input
              v-model="insertform.len"
              autocomplete="off"
              style="width:85%"
            ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
@@ -411,15 +509,30 @@
          :label="$t('dataManage.dictionaryManageObj.remark')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="insertform.bak" autocomplete="off" style="width:85%"></el-input>
            <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">{{
      <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>
@@ -711,7 +824,6 @@
        margin: 5px;
      }
    }

  }
}
</style>