From 9dedc69f2c18b28cf18807531b6c8b81e6ad77e3 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期日, 26 二月 2023 14:05:18 +0800
Subject: [PATCH] 资料馆界面重构，优化
---
src/views/datamanage/dictionaryManage.vue | 606 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 359 insertions(+), 247 deletions(-)
diff --git a/src/views/datamanage/dictionaryManage.vue b/src/views/datamanage/dictionaryManage.vue
index ca7e693..670dc3a 100644
--- a/src/views/datamanage/dictionaryManage.vue
+++ b/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>
--
Gitblit v1.9.3