From fda6fcfc6598c4349d486ca71d57c74e33043d76 Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期一, 20 二月 2023 11:32:58 +0800
Subject: [PATCH] 数据管理页面样式统一修改
---
src/views/datamanage/domainManage.vue | 343 +++++++++++++++++++++-----------------------------------
1 files changed, 129 insertions(+), 214 deletions(-)
diff --git a/src/views/datamanage/domainManage.vue b/src/views/datamanage/domainManage.vue
index 40e96f5..6421b94 100644
--- a/src/views/datamanage/domainManage.vue
+++ b/src/views/datamanage/domainManage.vue
@@ -1,17 +1,16 @@
<template>
<div class="domainBox">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('dataManage.dataManage')}`,
`${$t('dataManage.rangeManage')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
<div class="mainBox">
<div class="leftTree subpage_Div">
- <el-input
- v-model="filterInput"
- style="width:200px"
- ></el-input>
- <div style="width:450px">
+ <el-input v-model="filterInput" style="width: 200px"></el-input>
+ <div style="width: 450px">
<el-tree
:data="domainData"
:props="defaultProps"
@@ -24,61 +23,55 @@
</div>
<div class="right subpage_Div">
<div class="inquire">
- <el-form
- ref="queryForm"
- :model="queryForm"
- :inline="true"
- >
- <el-form-item
- :label="$t('dataManage.vmobj.keyword')"
- prop="name"
- >
+ <el-form ref="queryForm" :model="queryForm" :inline="true">
+ <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
<el-input
v-model="queryForm.code"
:placeholder="$t('common.pleaseInput')"
- style="width:200px"
+ style="width: 200px"
/>
</el-form-item>
- <el-form-item style="float: right;">
+ <el-form-item style="float: right">
<el-button
v-if="btnStatus.insert"
@click="showAddDialog"
icon="el-icon-plus"
size="small"
type="success"
- >{{ $t('common.append') }}</el-button>
+ >{{ $t("common.append") }}</el-button
+ >
<el-button
v-if="btnStatus.delete"
@click="deleteInfo"
type="danger"
size="small"
icon="el-icon-delete"
- >{{ $t('common.delete') }}</el-button>
+ >{{ $t("common.delete") }}</el-button
+ >
<el-button
@click="queryInfo('queryForm')"
icon="el-icon-search"
size="small"
class="primary"
- >{{ $t('common.iquery') }}</el-button>
+ >{{ $t("common.iquery") }}</el-button
+ >
<el-button
@click="resetInfo('queryForm')"
icon="el-icon-delete"
size="small"
type="info"
- >{{ $t('common.empty') }}</el-button>
+ >{{ $t("common.empty") }}</el-button
+ >
</el-form-item>
</el-form>
</div>
- <div class="table_box">
+ <div class="table_box" style="height: calc(100% - 89px)">
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
- height="100%"
+ height="calc(100% - 57px)"
>
- <el-table-column
- type="selection"
- width="50"
- />
+ <el-table-column type="selection" width="50" />
<el-table-column
align="center"
type="index"
@@ -126,30 +119,25 @@
:label="$t('dataManage.domainManage.bak')"
/>
- <el-table-column
- min-width="150"
- :label="$t('common.operate')"
- >
+ <el-table-column min-width="150" :label="$t('common.operate')">
<template slot-scope="scope">
<el-button
class="primary"
@click="showDetail(scope.row)"
size="small"
- >{{ $t('common.details') }}</el-button>
+ >{{ $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"
- >
+ <div class="pagination_box" style="margin-top: 20px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -161,66 +149,47 @@
>
</el-pagination>
</div>
+ </div>
+
</div>
</div>
- <div
- class="infoBox subpage_Div box_div"
- v-show="showinfoBox"
- >
-
- <div
- slot="header"
- class="clearfix"
- >
- <span>{{ $t('common.details') }}</span>
- <div
- style="float: right; cursor: pointer"
- @click="closeDetial"
- >
+ <div class="infoBox subpage_Div box_div" v-show="showinfoBox">
+ <div slot="header" class="clearfix">
+ <span>{{ $t("common.details") }}</span>
+ <div style="float: right; cursor: pointer" @click="closeDetial">
<i class="el-icon-close"></i>
</div>
</div>
<el-divider></el-divider>
<div class="contentBox">
<p>
- {{ $t('dataManage.domainManage.domName') }}锛歿{
- itemdetail.domName
- }}
+ {{ $t("dataManage.domainManage.domName") }}锛歿{ itemdetail.domName }}
</p>
<el-divider></el-divider>
<p>
- {{ $t('dataManage.domainManage.domDesc') }}锛歿{
- itemdetail.domDesc
- }}
+ {{ $t("dataManage.domainManage.domDesc") }}锛歿{ itemdetail.domDesc }}
</p>
<el-divider></el-divider>
<p>
- {{ $t('dataManage.domainManage.domCode') }}锛歿{
- itemdetail.domCode
- }}
+ {{ $t("dataManage.domainManage.domCode") }}锛歿{ itemdetail.domCode }}
</p>
<el-divider></el-divider>
<p>
- {{ $t('dataManage.domainManage.codeDesc') }}锛歿{
- itemdetail.codeDesc
- }}
+ {{ $t("dataManage.domainManage.codeDesc") }}锛歿{
+ itemdetail.codeDesc
+ }}
</p>
<el-divider></el-divider>
- <p>{{ $t('dataManage.domainManage.bsm') }}锛歿{ itemdetail.bsm }}</p>
+ <p>{{ $t("dataManage.domainManage.bsm") }}锛歿{ itemdetail.bsm }}</p>
+ <el-divider></el-divider>
+ <p>{{ $t("dataManage.domainManage.level") }}锛歿{ itemdetail.level }}</p>
<el-divider></el-divider>
<p>
- {{ $t('dataManage.domainManage.level') }}锛歿{ itemdetail.level }}
+ {{ $t("dataManage.domainManage.orderid") }}锛歿{ itemdetail.orderid }}
</p>
<el-divider></el-divider>
- <p>
- {{ $t('dataManage.domainManage.orderid') }}锛歿{
- itemdetail.orderid
- }}
- </p>
- <el-divider></el-divider>
- <p>{{ $t('dataManage.domainManage.bak') }}锛歿{ itemdetail.bak }}</p>
+ <p>{{ $t("dataManage.domainManage.bak") }}锛歿{ itemdetail.bak }}</p>
</div>
-
</div>
<el-dialog
width="510px"
@@ -233,17 +202,14 @@
:visible.sync="dialogFormVisible"
:before-close="handleClose"
>
- <el-form
- :model="editForm"
- ref="editForm"
- >
+ <el-form :model="editForm" ref="editForm">
<el-form-item
:label="$t('dataManage.domainManage.domName')"
:label-width="formLabelWidth"
>
<el-select
:popper-append-to-body="false"
- style="width:100%"
+ style="width: 100%"
v-model="editForm.domName"
placeholder="璇烽�夋嫨"
>
@@ -261,102 +227,70 @@
:label="$t('dataManage.domainManage.domDesc')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.domDesc"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.domDesc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.domCode')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.domCode"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.domCode" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.codeDesc')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.codeDesc"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.codeDesc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.bsm')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.bsm"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.bsm" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.level')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.level"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.level" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.orderid')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.orderid"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.orderid" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
:label="$t('dataManage.domainManage.bak')"
:label-width="formLabelWidth"
>
- <el-input
- v-model="editForm.bak"
- autocomplete="off"
- ></el-input>
+ <el-input v-model="editForm.bak" autocomplete="off"></el-input>
</el-form-item>
</el-form>
- <div
- v-if="behavior == '淇敼淇℃伅'"
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="cancelEdit()"
- >{{ $t('common.reset') }}</el-button>
+ <div v-if="behavior == '淇敼淇℃伅'" slot="footer" class="dialog-footer">
+ <el-button size="small" @click="cancelEdit()">{{
+ $t("common.reset")
+ }}</el-button>
<el-button
size="small"
class="primary"
type="info"
@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"
- >
- <el-button
- type="info"
- size="small"
- @click="cancelAdd('editForm')"
- >{{
- $t('common.reset')
+ <div v-else slot="footer" class="dialog-footer">
+ <el-button type="info" size="small" @click="cancelAdd('editForm')">{{
+ $t("common.reset")
}}</el-button>
<el-button
size="small"
class="primary"
@click="sendAdd('editForm')"
v-loading.fullscreen.lock="fullscreenLoading"
- >{{ $t('common.confirm') }}</el-button>
+ >{{ $t("common.confirm") }}</el-button
+ >
</div>
</el-dialog>
</div>
@@ -370,37 +304,37 @@
deleteDomain,
updateDomain,
domain_selectDomainNames,
-} 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 {
- filterInput: '',
+ filterInput: "",
domainOptions: [],
multipleSelection: [],
- behavior: '',
- formLabelWidth: '100px',
+ behavior: "",
+ formLabelWidth: "100px",
dialogFormVisible: false,
showinfoBox: false,
fullscreenLoading: false,
itemdetail: {},
editForm: {
- domName: '',
+ domName: "",
},
queryForm: {
- code: '',
+ code: "",
},
insertform: {},
- initialForm: '',
+ initialForm: "",
tableData: [],
count: 0,
rowFlag: null,
listData: {
- ns: '',
- tab: '',
+ ns: "",
+ tab: "",
pageIndex: 1,
pageSize: 10,
},
@@ -414,21 +348,21 @@
},
domainData: [
{
- val: '鍩虹鏁版嵁',
+ val: "鍩虹鏁版嵁",
children: [],
},
{
- val: '涓氬姟鏁版嵁',
+ val: "涓氬姟鏁版嵁",
children: [],
},
- {
- val: '鍏冩暟鎹�',
+ {
+ val: "鍏冩暟鎹�",
children: [],
},
],
defaultProps: {
- children: 'children',
- label: 'val',
+ children: "children",
+ label: "val",
},
};
},
@@ -456,7 +390,7 @@
this.listData.pageSize = 10;
const res = await domain_selectDomainNames(data);
if (res.code != 200) {
- this.$message.error('domain璋冪敤澶辫触');
+ this.$message.error("domain璋冪敤澶辫触");
}
var std = [];
for (var i = 0; i < res.result.length; i++) {
@@ -491,9 +425,9 @@
},
getAllTabelData() {
getDomainTabs().then((res) => {
- let bdres = res.result.filter((item) => item.ns == 'bd');
- let bsres = res.result.filter((item) => item.ns == 'bs');
- let mdres = res.result.filter((item) => item.ns == 'md');
+ let bdres = res.result.filter((item) => item.ns == "bd");
+ let bsres = res.result.filter((item) => item.ns == "bs");
+ let mdres = res.result.filter((item) => item.ns == "md");
for (var i in bdres) {
// bdres[i].val = bdres[i].tabDesc + '(' + bdres[i].tab + ')';
bdres[i].val = bdres[i].tabDesc;
@@ -502,13 +436,13 @@
// bsres[i].val = bsres[i].tabDesc + '(' + bsres[i].tab + ')';
bsres[i].val = bsres[i].tabDesc;
}
- for (var i in mdres) {
+ for (var i in mdres) {
// bsres[i].val = bsres[i].tabDesc + '(' + bsres[i].tab + ')';
mdres[i].val = mdres[i].tabDesc;
}
this.domainData[0].children = bdres;
this.domainData[1].children = bsres;
- this.domainData[2].children = mdres;
+ this.domainData[2].children = mdres;
});
},
handleSelectionChange(val) {
@@ -539,21 +473,21 @@
resetInfo() {
this.queryForm = {};
this.$store.state.verCateNode = {};
- this.$bus.$emit('clearTressLabel', true);
+ this.$bus.$emit("clearTressLabel", true);
this.listData.pageIndex = 1;
this.listData.pageSize = 10;
this.queryInfo();
},
// 鍒犻櫎澶氭潯
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 = [];
@@ -564,8 +498,8 @@
console.log(res);
if (res.code == 200) {
this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!',
+ type: "success",
+ message: "鍒犻櫎鎴愬姛!",
});
this.multipleSelection = [];
getSingleTab(this.listData).then((res) => {
@@ -576,18 +510,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;
},
@@ -606,8 +540,8 @@
this.fullscreenLoading = false;
if (res.code == 200) {
this.$message({
- message: '娣诲姞鎴愬姛',
- type: 'success',
+ message: "娣诲姞鎴愬姛",
+ type: "success",
});
getSingleTab(this.listData).then((res) => {
setTimeout(() => {
@@ -622,22 +556,22 @@
}, 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();
})
- .catch((_) => { });
+ .catch((_) => {});
},
// 鏌ョ湅鐣岄潰
showDetail(row) {
@@ -654,7 +588,7 @@
this.dialogFormVisible = true;
this.initialForm = JSON.stringify(row); //澶囦唤
this.editForm = row;
- this.behavior = '淇敼淇℃伅';
+ this.behavior = "淇敼淇℃伅";
},
editFromDataClose() {
this.dialogFormVisible = false;
@@ -663,10 +597,10 @@
// 鎻愪氦淇敼
sendEdit() {
- this.$confirm('鏄惁纭畾缂栬緫?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
+ this.$confirm("鏄惁纭畾缂栬緫?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
})
.then(() => {
this.dialogFormVisible = false;
@@ -682,22 +616,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;
});
},
@@ -731,11 +665,11 @@
watch: {
pathId: {
immediate: true,
- handler(val) { },
+ handler(val) {},
},
filterInput(val) {
this.$refs.tree.filter(val);
- }
+ },
},
};
</script>
@@ -747,55 +681,36 @@
padding: 1%;
.mainBox {
width: 100%;
- height: 92%;
+ height: calc(100% - 75px);
display: flex;
justify-content: space-between;
.leftTree {
- width: 15%;
- height: 91%;
+ width: calc(23% - 0px);
+ height: 100%;
border-radius: 5px;
- padding: 1%;
- max-height: 670px;
+ padding: 10px;
+ box-sizing: border-box;
overflow-y: auto;
}
.right {
- width: 80%;
- height: 91%;
-
+ width: 75%;
+ height: 100%;
border-radius: 5px;
- padding: 1%;
- max-height: 670px;
- // overflow-y: auto;
+ padding: 10px;
+ box-sizing: border-box;
+ border: 1px solid #dcdfe6;
.inquire {
- // margin-bottom: 10px;
- padding: 1%;
-
+ padding: 8px;
+ // margin-top: 10px;
border-radius: 5px;
border: 1px solid #dcdfe6;
+ margin-bottom: 20px;
.el-form-item {
margin: 5px;
}
}
- .table_box {
- width: 100%;
- height: 80%;
- margin: 0 auto;
- overflow: auto;
- margin-top: 10px;
- .el-table /deep/ th.el-table__cell > .cell {
- padding: 15px !important;
- }
-
- .el-table--border::after,
- .el-table--group::after {
- width: 0;
- }
- .el-table::before {
- height: 0;
- }
- }
}
}
}
--
Gitblit v1.9.3