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/versionManage.vue | 563 ++++++++++++++++++++++++++++----------------------------
1 files changed, 283 insertions(+), 280 deletions(-)
diff --git a/src/views/datamanage/versionManage.vue b/src/views/datamanage/versionManage.vue
index 1e63074..e62c085 100644
--- a/src/views/datamanage/versionManage.vue
+++ b/src/views/datamanage/versionManage.vue
@@ -1,38 +1,38 @@
<template>
<div class="verSionBox">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('dataManage.dataManage')}`,
`${$t('dataManage.versionManage')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- ref="ruleForm"
- :model="ruleForm"
- :inline="true"
- >
- <el-form-item>
- <el-select
- :popper-append-to-body="false"
- v-model="ruleForm.dirid"
- placeholder="璇烽�夋嫨"
- style="width:200px"
- >
- <el-option
- :value="ruleForm.dirid"
- :label="ruleForm.depName"
- style=" height:auto"
- >
- <el-tree
- ref="tree"
- :data="companyOption"
- node-key="id"
- :props="props"
- @node-click="handleChange"
- />
- </el-option>
- </el-select>
- <!-- <el-cascader
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="ruleForm" :model="ruleForm" :inline="true">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item>
+ <el-select
+ :popper-append-to-body="false"
+ v-model="ruleForm.dirid"
+ placeholder="璇烽�夋嫨"
+ style="width: 200px"
+ >
+ <el-option
+ :value="ruleForm.dirid"
+ :label="ruleForm.depName"
+ style="height: auto"
+ >
+ <el-tree
+ ref="tree"
+ :data="companyOption"
+ node-key="id"
+ :props="props"
+ @node-click="handleChange"
+ />
+ </el-option>
+ </el-select>
+ <!-- <el-cascader
v-model="ruleForm.dirid"
:show-all-levels="false"
:options="companyOption"
@@ -45,132 +45,130 @@
emitPath: false,
}"
></el-cascader> -->
- </el-form-item>
- <el-form-item>
- <el-input
- v-model="ruleForm.name"
- :placeholder="$t('common.pleaseInput')"
- />
- </el-form-item>
- <el-form-item style="float: right;">
- <el-button
- type="success"
- v-if="btnStatus.insert"
- @click="(InsertFormdialog = true), getSelectdirTab()"
- icon="el-icon-plus"
- size="small"
- >{{ $t('common.append') }}</el-button>
- <el-button
- @click="onSubmit('ruleForm')"
- icon="el-icon-search"
- size="small"
- class="primary"
- >{{ $t('common.iquery') }}</el-button>
- <el-button
- type="info"
- @click="resetForm('ruleForm')"
- icon="el-icon-delete"
- size="small"
- >{{ $t('common.empty') }}</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div class="bottom">
- <div class="rightTable subpage_Div">
- <div class="table_box">
- <el-table
- :data="tableData"
- style="width: 100%"
- height="95%"
- >
- <el-table-column
- align="center"
- type="index"
- :label="$t('dataManage.vmobj.index')"
- width="70px"
- />
- <el-table-column
- align="center"
- prop="id"
- v-if="false"
- />
- <el-table-column
- align="center"
- prop="name"
- :label="$t('common.versionName')"
- />
- <el-table-column
- align="center"
- prop="depName"
- :label="$t('dataManage.vmobj.catalogue')"
- />
- <el-table-column
- align="center"
- prop="descr"
- :label="$t('dataManage.vmobj.describe')"
- />
- <el-table-column
- align="center"
- prop="createName"
- :label="$t('dataManage.vmobj.createonuser')"
- />
- <el-table-column
- align="center"
- prop="createTime"
- :label="$t('dataManage.vmobj.createontime')"
- :formatter="formatTime"
- />
- <el-table-column
- align="center"
- prop="UpdateUser"
- :label="$t('dataManage.vmobj.updateonuser')"
- />
- <el-table-column
- align="center"
- prop="updateTime"
- :label="$t('dataManage.vmobj.updateontime')"
- :formatter="formatTime"
- />
- <el-table-column
- min-width="150"
- :label="$t('common.operate')"
- >
- <template slot-scope="scope">
- <el-button
- v-if="btnStatus.update"
- @click="
- handleEdit(scope.$index, scope.row);
- getSelectdirTab();
- "
- type="warning"
- size="small"
- >{{ $t('common.update') }}</el-button>
- <el-button
- v-if="btnStatus.delete"
- @click="handleDelete(scope.$index, scope.row)"
- type="danger"
- size="small"
- >{{ $t('common.delete') }}</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div
- class="pagination_box"
- >
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listData.pageIndex"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
- >
- </el-pagination>
+ </el-form-item>
+ <el-form-item>
+ <el-input
+ v-model="ruleForm.name"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ </el-form-item>
</div>
+ <div>
+ <el-form-item>
+ <el-button
+ type="success"
+ v-if="btnStatus.insert"
+ @click="(InsertFormdialog = true), getSelectdirTab()"
+ icon="el-icon-plus"
+ size="small"
+ >{{ $t("common.append") }}</el-button
+ >
+ <el-button
+ @click="onSubmit('ruleForm')"
+ icon="el-icon-search"
+ size="small"
+ class="primary"
+ >{{ $t("common.iquery") }}</el-button
+ >
+ <el-button
+ type="info"
+ @click="resetForm('ruleForm')"
+ icon="el-icon-delete"
+ size="small"
+ >{{ $t("common.empty") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
+ </el-form>
+ </div>
+
+ <div class="table_box" :style="styleVar">
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 57px)"
+ >
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('dataManage.vmobj.index')"
+ width="70px"
+ />
+ <el-table-column align="center" prop="id" v-if="false" />
+ <el-table-column
+ align="center"
+ prop="name"
+ :label="$t('common.versionName')"
+ />
+ <el-table-column
+ align="center"
+ prop="depName"
+ :label="$t('dataManage.vmobj.catalogue')"
+ />
+ <el-table-column
+ align="center"
+ prop="descr"
+ :label="$t('dataManage.vmobj.describe')"
+ />
+ <el-table-column
+ align="center"
+ prop="createName"
+ :label="$t('dataManage.vmobj.createonuser')"
+ />
+ <el-table-column
+ align="center"
+ prop="createTime"
+ :label="$t('dataManage.vmobj.createontime')"
+ :formatter="formatTime"
+ />
+ <el-table-column
+ align="center"
+ prop="UpdateUser"
+ :label="$t('dataManage.vmobj.updateonuser')"
+ />
+ <el-table-column
+ align="center"
+ prop="updateTime"
+ :label="$t('dataManage.vmobj.updateontime')"
+ :formatter="formatTime"
+ />
+ <el-table-column min-width="150" :label="$t('common.operate')">
+ <template slot-scope="scope">
+ <el-button
+ v-if="btnStatus.update"
+ @click="
+ handleEdit(scope.$index, scope.row);
+ getSelectdirTab();
+ "
+ type="warning"
+ size="small"
+ >{{ $t("common.update") }}</el-button
+ >
+ <el-button
+ v-if="btnStatus.delete"
+ @click="handleDelete(scope.$index, scope.row)"
+ type="danger"
+ size="small"
+ >{{ $t("common.delete") }}</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listData.pageIndex"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="listData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
+ >
+ </el-pagination>
</div>
- </div>
+ </div>
+
<el-dialog
:title="$t('dataManage.vmobj.editVersion')"
:visible.sync="dialogFormVisible"
@@ -191,16 +189,16 @@
:label="$t('dataManage.vmobj.catalogue')"
:label-width="formLabelWidth"
>
- <el-select
+ <el-select
:popper-append-to-body="false"
v-model="upform.dirid"
placeholder="璇烽�夋嫨"
- style="width:300px"
+ style="width: 300px"
>
<el-option
:value="upform.dirid"
:label="upform.depName"
- style=" height:auto"
+ style="height: auto"
>
<el-tree
ref="tree"
@@ -230,23 +228,12 @@
></el-input>
</el-form-item>
</el-form>
- <div
- slot="footer"
- type="info"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="editFromDataClose"
- >{{
- $t('common.close')
+ <div slot="footer" type="info" class="dialog-footer">
+ <el-button size="small" @click="editFromDataClose">{{
+ $t("common.close")
}}</el-button>
- <el-button
- size="small"
- @click="editFromData"
- class="primary"
- >{{
- $t('common.confirm')
+ <el-button size="small" @click="editFromData" class="primary">{{
+ $t("common.confirm")
}}</el-button>
</div>
</el-dialog>
@@ -271,16 +258,16 @@
:label="$t('dataManage.vmobj.catalogue')"
:label-width="formLabelWidth"
>
- <el-select
+ <el-select
:popper-append-to-body="false"
v-model="insertform.path"
placeholder="璇烽�夋嫨"
- style="width:300px"
+ style="width: 300px"
>
<el-option
:value="insertform.path"
:label="insertform.dirName"
- style=" height:auto"
+ style="height: auto"
>
<el-tree
ref="tree"
@@ -311,23 +298,12 @@
></el-input>
</el-form-item>
</el-form>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- @click="insertFromDataClose"
- type="info"
- size="small"
- >{{
- $t('common.close')
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="insertFromDataClose" type="info" size="small">{{
+ $t("common.close")
}}</el-button>
- <el-button
- @click="insertFromData"
- class="primary"
- size="small"
- >{{
- $t('common.confirm')
+ <el-button @click="insertFromData" class="primary" size="small">{{
+ $t("common.confirm")
}}</el-button>
</div>
</el-dialog>
@@ -423,27 +399,27 @@
deleteVersion,
updateVersion,
selectdirTab,
-} from '../../api/api';
-import verDirTree from './verDirTree.vue';
-import MyBread from '../../components/MyBread.vue';
-import verDirTrees from './verDirTrees.vue';
-import moment from 'moment';
+} from "../../api/api";
+import verDirTree from "./verDirTree.vue";
+import MyBread from "../../components/MyBread.vue";
+import verDirTrees from "./verDirTrees.vue";
+import moment from "moment";
export default {
- name: 'versionManage',
+ name: "versionManage",
components: { MyBread, verDirTree, verDirTrees },
data() {
return {
props: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
catalogOption: [],
editcatalogOption: [],
showCata: false,
- formLabelWidth: '100px',
+ formLabelWidth: "100px",
dialogFormVisible: false,
InsertFormdialog: false,
showinfoBox: false,
@@ -462,9 +438,9 @@
pageSize: 10,
},
cascader: {
- label: 'name',
- value: 'id',
- children: 'children',
+ label: "name",
+ value: "id",
+ children: "children",
checkStrictly: true,
emitPath: false,
},
@@ -476,35 +452,61 @@
insert: false,
update: false,
},
+
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
created() {
this.getQueryDirTree();
this.getRoleTabelData();
this.showPermsBtn();
- this.$set(this.ruleForm, 'depName', '璇烽�夋嫨')
+ this.$set(this.ruleForm, "depName", "璇烽�夋嫨");
},
computed: {
pathId() {
return this.$store.state.cataNode.id;
},
},
-
+ 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)`;
+ });
+ },
//鐩綍鍒囨崲
catalogChange(value) {
this.insertform.dirid = value;
},
- catalogChangeAdd (data, node, nodeData) {
- this.$set(this.insertform, 'path', data.id)
- this.$set(this.insertform, 'dirName', data.name)
+ catalogChangeAdd(data, node, nodeData) {
+ this.$set(this.insertform, "path", data.id);
+ this.$set(this.insertform, "dirName", data.name);
},
upCatalogChange(val) {
this.upform.dirid == val;
},
handlupCatalogChange(data, node, nodeData) {
- this.$set(this.upform, 'dirid', data.id)
- this.$set(this.upform, 'depName', data.name)
+ this.$set(this.upform, "dirid", data.id);
+ this.$set(this.upform, "depName", data.name);
// this.upform.dirid == data.id;
// this.upform.depName = data.name;
},
@@ -512,16 +514,15 @@
async getQueryDirTree() {
const res = await selectdirTab();
if (res.code != 200) {
- this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+ this.$message.error("鐩綍鍒楄〃鑾峰彇澶辫触");
return;
}
this.companyOption = this.treeData(res.result);
- this.ruleForm.dirid = this.companyOption[0].id
-
+ this.ruleForm.dirid = this.companyOption[0].id;
},
- handleChange (data, node, nodeData) {
- this.$set(this.ruleForm, 'dirid', data.id)
- this.$set(this.ruleForm, 'depName', data.name)
+ handleChange(data, node, nodeData) {
+ this.$set(this.ruleForm, "dirid", data.id);
+ this.$set(this.ruleForm, "depName", data.name);
// this.ruleForm.dirid = data.id;
// this.ruleForm.depName = data.name;
this.onSubmit();
@@ -535,7 +536,7 @@
async getSelectdirTab() {
const res = await selectdirTab();
if (res.code != 200) {
- this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+ this.$message.error("鐩綍鍒楄〃鑾峰彇澶辫触");
return;
}
this.insertform.name = this.getYMD();
@@ -550,9 +551,9 @@
let myYear = myDate.getFullYear(); //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�,1970-????)
let myMonth = myDate.getMonth() + 1; //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
let myToday = myDate.getDate(); //鑾峰彇褰撳墠鏃�(1-31)
- myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
- myToday = myToday > 9 ? myToday : '0' + myToday;
- let nowDate = 'V' + myYear + myMonth + myToday;
+ myMonth = myMonth > 9 ? myMonth : "0" + myMonth;
+ myToday = myToday > 9 ? myToday : "0" + myToday;
+ let nowDate = "V" + myYear + myMonth + myToday;
return nowDate;
},
@@ -562,7 +563,7 @@
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; // 杩斿洖涓�绾ц彍鍗�
});
},
@@ -575,9 +576,9 @@
},
resetForm() {
this.ruleForm = {};
- this.ruleForm.dirid = this.companyOption[0].id
+ this.ruleForm.dirid = this.companyOption[0].id;
this.$store.state.verCateNode = {};
- this.$bus.$emit('clearTressLabel', true);
+ this.$bus.$emit("clearTressLabel", true);
this.getRoleTabelData();
},
onSubmit() {
@@ -586,7 +587,7 @@
this.getRoleTabelData();
},
async getRoleTabelData() {
- if (this.listData.tab == '') {
+ if (this.listData.tab == "") {
delete this.listData.tab;
}
@@ -596,7 +597,7 @@
const data = await select_Ver_ByPageAndCount(this.listData);
if (data.code != 200) {
- this.$message.error('鍒楄〃璋冪敤澶辫触');
+ this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
@@ -630,8 +631,8 @@
async editFromData() {
if (this.upform.depName == null) {
this.$message({
- message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
- type: 'warning',
+ message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+ type: "warning",
});
return;
}
@@ -640,14 +641,14 @@
this.dialogFormVisible = false;
this.upform = {};
this.$message({
- message: '淇敼鎴愬姛锛�',
- type: 'success',
+ message: "淇敼鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '淇敼澶辫触锛�',
- type: 'warning',
+ message: "淇敼澶辫触锛�",
+ type: "warning",
});
}
},
@@ -658,8 +659,8 @@
async insertFromData() {
if (this.insertform.dirid == null) {
this.$message({
- message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
- type: 'warning',
+ message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+ type: "warning",
});
return;
}
@@ -668,49 +669,51 @@
this.InsertFormdialog = false;
this.insertform = {};
this.$message({
- message: '娣诲姞鎴愬姛锛�',
- type: 'success',
+ message: "娣诲姞鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '娣诲姞澶辫触锛�',
- type: 'warning',
+ message: "娣诲姞澶辫触锛�",
+ type: "warning",
});
}
},
formatTime(row, column) {
let date = row[column.property];
if (date === undefined || date === null) {
- return '';
+ return "";
}
- return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
+ return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
},
handleDelete(index, row) {
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ョ増鏈俊鎭�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(async () => {
+ this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ョ増鏈俊鎭�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
const data = await deleteVersion(row.id);
if (data.code == 200) {
this.InsertFormdialog = false;
this.$message({
- message: '鍒犻櫎鎴愬姛锛�',
- type: 'success',
+ message: "鍒犻櫎鎴愬姛锛�",
+ type: "success",
});
this.getRoleTabelData();
} else {
this.$message({
- message: '鍒犻櫎澶辫触锛�',
- type: 'warning',
+ message: "鍒犻櫎澶辫触锛�",
+ type: "warning",
});
}
- }).catch(() => {
+ })
+ .catch(() => {
this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- });
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
+ });
});
},
handleEdit(index, row) {
@@ -721,7 +724,7 @@
watch: {
pathId: {
immediate: true,
- handler(val) { },
+ handler(val) {},
},
},
};
@@ -748,35 +751,35 @@
}
}
.inquire {
- position: relative;
+ padding: 8px;
+ margin-top: 20px;
- padding-bottom: 8px;
+ border-radius: 5px;
+
+ margin-bottom: 20px;
+ .el-form-item {
+ margin: 5px;
+ }
+}
+.bottom {
+ width: 100%;
+ margin-top: 1%;
+ height: 74%;
+ display: flex;
+ justify-content: space-between;
+
+ .rightTable {
+ width: 98%;
+ height: 92%;
border-radius: 5px;
padding: 1%;
- .el-form-item {
- margin: 5px;
+ .table_box {
+ width: 100%;
+ height: 93%;
+ margin: 0 auto;
+ overflow: auto;
}
}
- .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;
- }
- }
- }
+}
</style>
--
Gitblit v1.9.3