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/styleManage.vue | 201 ++++++++++++++++++++++++++------------------------
1 files changed, 105 insertions(+), 96 deletions(-)
diff --git a/src/views/datamanage/styleManage.vue b/src/views/datamanage/styleManage.vue
index b4c1f9a..2d9714a 100644
--- a/src/views/datamanage/styleManage.vue
+++ b/src/views/datamanage/styleManage.vue
@@ -5,13 +5,15 @@
`${$t('dataManage.styleManage')}`,
]"></My-bread>
<el-divider />
- <div class="searchComp subpage_Div" style="padding: 1%;">
+ <div class="searchComp subpage_Div" ref="container">
<el-form
ref="ruleForm"
:model="ruleForm"
:inline="true"
>
- <el-form-item
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
:label="$t('dataManage.vmobj.keyword')"
prop="name"
>
@@ -21,7 +23,9 @@
style="width:200px"
/>
</el-form-item>
- <el-form-item style="float: right;">
+ </div>
+ <div>
+ <el-form-item>
<el-button
v-if="btnStatus.insert"
@click="setInsertShow()"
@@ -49,15 +53,18 @@
size="small"
>{{ $t('common.empty') }}</el-button>
</el-form-item>
+ </div>
+ </div>
+
+
</el-form>
</div>
- <div class="bottom">
- <div class="rightTable subpage_Div">
- <div class="table_box">
+
+ <div class="table_box" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
- height="95%"
+ height="calc(100% - 57px)"
@selection-change="handleSelectionChange"
>
<el-table-column
@@ -141,8 +148,7 @@
</template>
</el-table-column>
</el-table>
- </div>
- <div
+ <div
class="pagination_box"
>
<el-pagination
@@ -156,8 +162,9 @@
>
</el-pagination>
</div>
- </div>
- </div>
+ </div>
+
+
<div
class="infoBox subpage_Div box_div"
v-show="showinfoBox"
@@ -915,7 +922,7 @@
updateStyle,
upload_style,
queryDepTree,
- selectdirTab
+ selectdirTab,
} from "../../api/api";
export default {
name: "styleManage",
@@ -927,9 +934,7 @@
insertFileName: "",
insertViewName: "",
- insertform: {
-
- },
+ insertform: {},
dialogFormVisible: false,
InsertFormdialog: false,
showCata: false,
@@ -973,9 +978,9 @@
editCompanyOption: [],
editcatalogOption: [],
cascader: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
@@ -983,17 +988,44 @@
children: "children",
label: "name",
},
- selectOptionWidth: '',
- selectheight: 'auto',
- defaultexpand: false
+ selectOptionWidth: "",
+ selectheight: "auto",
+ defaultexpand: false,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
created() {
this.getRoleTabelData();
this.showPermsBtn();
- this.getQueryDepTree(); this.getSelectdirTab();
+ this.getQueryDepTree();
+ this.getSelectdirTab();
+ },
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
},
methods: {
+ onResize() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.calHeight();
+ }, 500);
+ },
+ calHeight() {
+ this.$nextTick(() => {
+ const rect = this.$refs.container.getBoundingClientRect();
+ this.tableHeight = `${rect.height + 97}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
+ });
+ },
showPermsBtn() {
let currentPerms = this.$store.state.currentPerms;
let permsEntity = this.$store.state.permsEntity;
@@ -1007,8 +1039,8 @@
document.getElementById("insertFile").value = "";
document.getElementById("insertimageFile").value = "";
- this.guidFile = '';
- this.fileGuid = '';
+ this.guidFile = "";
+ this.fileGuid = "";
},
getInsertFile(res) {
if (res == 0) {
@@ -1018,8 +1050,6 @@
}
},
insertFileData: function (res) {
-
-
if (res == 0) {
let val = document.getElementById("insertFile").files;
@@ -1154,30 +1184,32 @@
for (var i in this.multipleSelection) {
std.push(this.multipleSelection[i].id);
}
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ牱寮�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
- const data = await deleteStyles({ ids: std.toString() });
- if (data.code == 200) {
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ牱寮�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await deleteStyles({ ids: std.toString() });
+ if (data.code == 200) {
+ this.$message({
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
+ });
+ this.getRoleTabelData();
+ } else {
+ this.$message({
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
+ });
+ }
+ })
+ .catch(() => {
this.$message({
- message: "鍒犻櫎鎴愬姛锛�",
- type: "success",
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
});
- this.getRoleTabelData();
- } else {
- this.$message({
- message: "鍒犻櫎澶辫触锛�",
- type: "warning",
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
});
- });
},
showDirTree(res) {
this.dirFlag = res;
@@ -1216,11 +1248,9 @@
},
insertFromDataClose() {
this.InsertFormdialog = false;
- this.insertform = {
-
- }
+ this.insertform = {};
this.insertFileGuid = "";
- this.insertViewGuid = ""
+ this.insertViewGuid = "";
this.filesReset();
},
handleClose() {
@@ -1228,7 +1258,7 @@
this.insertform = {
fileGuid: null,
viewGuid: null,
- }
+ };
this.filesReset();
},
async insertFromData() {
@@ -1254,9 +1284,9 @@
this.insertform = {
fileGuid: null,
viewGuid: null,
- }
+ };
this.insertFileGuid = "";
- this.insertViewGuid = ""
+ this.insertViewGuid = "";
this.filesReset();
this.$message({
message: "娣诲姞鎴愬姛锛�",
@@ -1276,7 +1306,7 @@
}
this.listData.name = this.ruleForm.name;
const data = await select_Style_ByPageAndCount(this.listData);
-
+
if (data.code != 200) {
this.$message.error("鍒楄〃璋冪敤澶辫触");
}
@@ -1323,7 +1353,7 @@
if (!val || !val.length) return;
var formData = new FormData();
formData.append("file0", val[0]);
- var res = $.ajax(+ "/style/upload", {
+ var res = $.ajax(+"/style/upload", {
type: "post",
data: formData,
async: false,
@@ -1501,7 +1531,6 @@
},
handleEdit(index, row) {
-
this.upflag = true;
this.dialogFormVisible = true;
this.upform = row;
@@ -1525,7 +1554,7 @@
});
this.startFromData();
})
- .catch(() => { });
+ .catch(() => {});
},
// 鑾峰彇澶氶��
@@ -1539,16 +1568,15 @@
catalogChange(res) {
this.insertform.dirid = res;
this.upform.dirid = res;
-
},
handcatalogChange(data, node, nodeData) {
- this.$set(this.insertform, 'dirid', data.id)
- this.$set(this.insertform, 'dirName', data.name)
+ this.$set(this.insertform, "dirid", data.id);
+ this.$set(this.insertform, "dirName", data.name);
// this.insertform.dirid = data.id;
// this.insertform.dirName = data.name
},
handleNodeClickto(data, node, nodeData) {
- this.insertform.depid = data.id
+ this.insertform.depid = data.id;
this.upform.dirid = data.id;
this.upform.dirName = data.name;
},
@@ -1558,24 +1586,23 @@
},
companyChange(res) {
this.insertform.depid = res;
-
},
handcompanyChange(data, node, nodeData) {
- this.$set(this.insertform, 'depid', data.id)
+ this.$set(this.insertform, "depid", data.id);
// this.insertform.depid = data.id;
- this.$set(this.insertform, 'depName', data.name)
+ this.$set(this.insertform, "depName", data.name);
// this.insertform.depName = data.name;
},
//鏂板鏁版嵁
setInsertShow() {
this.InsertFormdialog = true;
- this.$set(this, 'insertform', {})
+ this.$set(this, "insertform", {});
},
//鐩綍鍒楄〃鑾峰彇
async getSelectdirTab() {
const res = await selectdirTab();
if (res.code != 200) {
- this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+ this.$message.error("鐩綍鍒楄〃鑾峰彇澶辫触");
return;
}
this.insertform.dirid = 1;
@@ -1587,7 +1614,7 @@
async getQueryDepTree() {
const res = await queryDepTree();
if (res.code != 200) {
- this.$message.error('鍗曚綅鍒楄〃鑾峰彇澶辫触');
+ this.$message.error("鍗曚綅鍒楄〃鑾峰彇澶辫触");
return;
}
this.insertform.depid = 1;
@@ -1596,7 +1623,7 @@
this.editCompanyOption = this.treeData(res.result);
},
handleNodeClick(data, node, nodeData) {
- this.upform.depid = data.id
+ this.upform.depid = data.id;
this.upform.depName = data.name;
},
//鏍戝垪琛ㄧ敓鎴�
@@ -1605,16 +1632,16 @@
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
});
},
setOptionWidth(event) {
// 涓嬫媺妗嗚仛鐒︼紝璁剧疆寮规鐨勫搴�
this.$nextTick(() => {
- this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
+ this.selectOptionWidth = event.srcElement.offsetWidth + "px";
});
- }
+ },
},
};
</script>
@@ -1630,16 +1657,18 @@
}
.searchComp {
- margin: 10px auto;
+ padding: 8px;
+ margin-top: 20px;
border-radius: 5px;
+ margin-bottom: 20px;
.el-form-item {
margin: 5px;
}
- .el-input {
- width: 467px;
- }
+ // .el-input {
+ // width: 467px;
+ // }
}
.leftTree {
position: absolute;
@@ -1659,27 +1688,7 @@
margin: 10px auto 0;
}
}
- .bottom {
- width: 100%;
- margin-top: 1%;
- height: 74%;
- display: flex;
- justify-content: space-between;
- .rightTable {
- width: 98%;
- height: 92%;
-
- border-radius: 5px;
- padding: 1%;
- .table_box {
- width: 100%;
- height: 93%;
- margin: 0 auto;
- overflow: auto;
- }
- }
- }
.BoxFlex {
display: flex;
justify-content: space-around;
--
Gitblit v1.9.3