Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
89d12179 by renchao@pashanhoo.com
Options

style:table配置话

1 parent 0d80b7e5
Inline Side-by-side
Showing 9 changed files with 50 additions and 17 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 13:25:25 4 * @LastEditTime: 2023-03-27 15:43:24
5 --> 5 -->
6 # 安装依赖 6 # 安装依赖
7 npm install 7 npm install
...@@ -21,4 +21,15 @@ npm install --registry=https://registry.npm.taobao.org ...@@ -21,4 +21,15 @@ npm install --registry=https://registry.npm.taobao.org
21 - `wip` 开发中 21 - `wip` 开发中
22 22
23 ## 项目换肤 23 ## 项目换肤
24 给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量
...\ No newline at end of file ...\ No newline at end of file
24 给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量
25
26 ## config说明
27
28 {
29 "TITLE": "汉中市数据上报系统",
30 "THEME": "sb",
31 "CODE": "BDCJGPT", {"BDCSBPT":上报: "BDCJGPT":监管}
32 "SERVERAPI": "/bdcsjsb",
33 "calcHeight": 200, {上报:160 监管:200}
34 "MANAGEMENTAPI": "http://192.168.2.38:8090/management"
35 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
3 "THEME": "sb", 3 "THEME": "sb",
4 "CODE": "BDCJGPT", 4 "CODE": "BDCJGPT",
5 "SERVERAPI": "/bdcsjsb", 5 "SERVERAPI": "/bdcsjsb",
6 "calcHeight": 160,
6 "MANAGEMENTAPI": "http://192.168.2.38:8090/management" 7 "MANAGEMENTAPI": "http://192.168.2.38:8090/management"
7 } 8 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -139,11 +139,25 @@ export default { ...@@ -139,11 +139,25 @@ export default {
139 let _this = this 139 let _this = this
140 if (this.heightNum) { 140 if (this.heightNum) {
141 _this.$nextTick(() => { 141 _this.$nextTick(() => {
142 142 if (document.querySelector(".tags-view-container")) {
143 window.addEventListener('resize', () => { 143 window.addEventListener('resize', () => {
144 if (_this.calcHeight == 230) {
145 _this.tableHeight = _this.calcHeightx(192)
146 } else {
147 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
148 }
149 });
150 if (_this.calcHeight == 230) {
151 _this.tableHeight = _this.calcHeightx(192)
152 } else {
153 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
154 }
155 } else {
156 window.addEventListener('resize', () => {
157 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
158 });
144 _this.tableHeight = _this.calcHeightx(_this.calcHeight) 159 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
145 }); 160 }
146 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
147 }) 161 })
148 } else { 162 } else {
149 _this.tableHeight = window.innerHeight - _this.heightNum 163 _this.tableHeight = window.innerHeight - _this.heightNum
...@@ -158,9 +172,15 @@ export default { ...@@ -158,9 +172,15 @@ export default {
158 calcHeightx (value, wappered = true) { 172 calcHeightx (value, wappered = true) {
159 //项目自定义的公共header部分的高度，可忽略 173 //项目自定义的公共header部分的高度，可忽略
160 let header = document.querySelector(".from-clues-header").offsetHeight; 174 let header = document.querySelector(".from-clues-header").offsetHeight;
175
161 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分） 176 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
162 value = value == undefined ? 100 : value; 177 value = value == undefined ? 100 : value;
163 let res = window.innerHeight - parseInt(header) - value; 178 if (document.querySelector(".tags-view-container")) {
179 let tagsView = document.querySelector(".tags-view-container").offsetHeight;
180 var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
181 } else {
182 var res = window.innerHeight - parseInt(header) - value;
183 }
164 if (wappered) { 184 if (wappered) {
165 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素 185 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
166 let wapper = window.document.getElementsByClassName('el-table__body-wrapper'); 186 let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
......
...@@ -194,12 +194,12 @@ export default { ...@@ -194,12 +194,12 @@ export default {
194 @import "~@/styles/_handle.scss"; 194 @import "~@/styles/_handle.scss";
195 195
196 .tags-view-container { 196 .tags-view-container {
197 height: 40px; 197 height: 50px;
198 width: 100%; 198 width: 100%;
199 background: #fff; 199 background: #fff;
200 border-bottom: 1px solid #d8dce5; 200 border-bottom: 1px solid #d8dce5;
201 box-sizing: border-box; 201 box-sizing: border-box;
202 padding-top: 2px; 202 padding-top: 7px;
203 margin-bottom: 7px; 203 margin-bottom: 7px;
204 border-radius: 4px; 204 border-radius: 4px;
205 205
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 17
18 &-header { 18 &-header {
19 width: 100%; 19 width: 100%;
20 padding: 7px 15px 10px 15px; 20 padding: 7px 15px 15px 15px;
21 box-sizing: border-box; 21 box-sizing: border-box;
22 background-size: 100% 100%; 22 background-size: 100% 100%;
23 background: #FFFFFF; 23 background: #FFFFFF;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item v-if="BASE_API.THEME=='jg'"> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </el-form> 19 </el-form>
20 </div> 20 </div>
21 <div class="from-clues-content"> 21 <div class="from-clues-content">
22 <lb-table :pagination="false" :column="tableData.columns" :calcHeight="200" :data="tablelistData" row-key="id" 22 <lb-table :pagination="false" :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tablelistData" row-key="id"
23 default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> 23 default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
24 24
25 </lb-table> 25 </lb-table>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
8 <el-row class="mb-5"> 8 <el-row class="mb-5">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </el-form> 19 </el-form>
20 </div> 20 </div>
21 <div class="from-clues-content"> 21 <div class="from-clues-content">
22 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="200" 22 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="BASE_API.calcHeight"
23 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata" :expand-row-keys="keyList" 23 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata" :expand-row-keys="keyList"
24 row-key="dictid"> 24 row-key="dictid">
25 </lb-table> 25 </lb-table>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
8 <el-row class="mb-5"> 8 <el-row class="mb-5">
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
31 </div> 31 </div>
32 <div class="from-clues-content"> 32 <div class="from-clues-content">
33 <lb-table :pagination="false" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" 33 <lb-table :pagination="false" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
34 :column="tableData.columns" :calcHeight="200" :data="tableData.data" :expand-row-keys="keyList" row-key="dictid"> 34 :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tableData.data" :expand-row-keys="keyList"
35 row-key="dictid">
35 </lb-table> 36 </lb-table>
36 </div> 37 </div>
37 <EditDialog ref="dialogForm" v-model="isDialog" @ok="reloadTableData" /> 38 <EditDialog ref="dialogForm" v-model="isDialog" @ok="reloadTableData" />
...@@ -408,5 +409,5 @@ export default { ...@@ -408,5 +409,5 @@ export default {
408 }; 409 };
409 </script> 410 </script>
410 <style scoped lang="scss"> 411 <style scoped lang="scss">
411 @import "~@/styles/mixin.scss"; 412 @import "~@/styles/mixin.scss";
412 </style> 413 </style>
......