From a6b40a1b80b586f7dbd874f3939f5e06fcc752d2 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期三, 04 一月 2023 19:24:14 +0800
Subject: [PATCH] '页面尺寸自适应初期调整'
---
src/views/padSunmaryProcedure/index.vue | 258 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 175 insertions(+), 83 deletions(-)
diff --git a/src/views/padSunmaryProcedure/index.vue b/src/views/padSunmaryProcedure/index.vue
index 39745d1..34d1499 100644
--- a/src/views/padSunmaryProcedure/index.vue
+++ b/src/views/padSunmaryProcedure/index.vue
@@ -1,96 +1,124 @@
<template>
- <basic-container id="box" style="width: 100vw">
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item label="褰撲簨浜�">
- <el-input v-model="formInline.litigant" placeholder="褰撲簨浜�" style="width:110px!important"></el-input>
- </el-form-item>
- <el-form-item label="鐢佃瘽">
- <el-input v-model="formInline.phone" placeholder="鐢佃瘽" style="width:130px!important"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="getDataList(0)">鏌ヨ</el-button>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="getById">鏂板</el-button>
- </el-form-item>
- </el-form>
+ <basic-container>
+ <div class="nav">
+ <div class="peopleSeachInput">
+ <el-input v-model="formInline.litigant"
+ placeholder="褰撲簨浜�"></el-input>
+ <el-input v-model="formInline.phone"
+ placeholder="鐢佃瘽"></el-input>
+ </div>
+ <div class="peopleSeachBtn">
+ <el-button type="primary"
+ @click="getDataList(0)">鏌ヨ</el-button>
+ <el-button type="primary"
+ @click="getById">鏂板</el-button>
+ </div>
+ </div>
+
<div class="law-table-main">
- <el-table
- :height="tableHeight"
- @row-click="rowget"
- :data="tableData">
- <el-table-column
- prop="casePoint"
- label="妗堢敱"
- :show-overflow-tooltip="true"
- min-width="20%"
- ></el-table-column>
- <el-table-column
- prop="litigant"
- label="褰撲簨浜哄鍚�"
- min-width="20%">
+ <el-table :height="tableHeight"
+ @row-click="rowget"
+ :data="tableData"
+ :header-row-style="{height:tableRowHeight+'px'}"
+ :row-style="{ height: tableRowHeight+'px'}"
+ :cell-style="{padding:'0px'}"
+ height="calc(100% - 150px)"
+ :highlight-current-row='true'>
+ <el-table-column prop="casePoint"
+ label="妗堢敱"
+ :show-overflow-tooltip="true"
+ min-width="180"></el-table-column>
+ <el-table-column prop="litigant"
+ label="褰撲簨浜哄鍚�"
+ min-width="150"
+ align="center">
</el-table-column>
- <el-table-column
- prop="phone"
- label="鑱旂郴鐢佃瘽"
- min-width="22%"
- ></el-table-column>
- <el-table-column
- prop="createTime"
- label="鎻愪氦鏃堕棿"
- sortable
- min-width="18%"
- ></el-table-column>
- <el-table-column
- prop="hanlders"
- label="鎵ф硶浜�"
- :show-overflow-tooltip="true"
- min-width="18%"
- ></el-table-column>
+ <el-table-column prop="phone"
+ label="鑱旂郴鐢佃瘽"
+ min-width="160"
+ align="center"></el-table-column>
+ <el-table-column prop="createTime"
+ label="鎻愪氦鏃堕棿"
+ sortable
+ min-width="220"
+ align="center"></el-table-column>
+ <el-table-column prop="hanlders"
+ label="鎵ф硶浜�"
+ :show-overflow-tooltip="true"
+ min-width="150"></el-table-column>
</el-table>
</div>
<div class="avue-crud__pagination">
- <el-pagination
- @size-change="sizeChangeHandle"
- @current-change="currentChangeHandle"
- :current-page="pageIndex"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="pageSize"
- :total="total"
- background
- layout="total, sizes, prev, pager, next, jumper"
- >
+ <el-pagination @size-change="sizeChangeHandle"
+ @current-change="currentChangeHandle"
+ :current-page="pageIndex"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ :total="total"
+ background
+ layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
- <SunmaryProcedureForm v-if="isShow" ref="sunmaryProcedure" @cancel="cancel"></SunmaryProcedureForm>
+ <SunmaryProcedureForm v-if="isShow"
+ ref="sunmaryProcedure"
+ @cancel="cancel"></SunmaryProcedureForm>
</basic-container>
</template>
<script>
-import {getObj} from '@/api/News/pad'
+import { getObj } from '@/api/News/pad'
export default {
- name: "index",
-
+ name: 'index',
+ // props: ['screenHomeHeight'],
data() {
return {
isShow: false,
formInline: {
litigant: '',
phone: '',
- current:this.pageIndex,
- size:this.pageSize
+ current: this.pageIndex,
+ size: this.pageSize,
},
pageSize: 10,
pageIndex: 1,
total: 10,
- tableHeight: 600,
- tableData: []
+ tableHeight: '100%',
+ tableData: [],
+ screenHeight: null,
+ tableRowHeight: '', //鏍规嵁灞忓箷璁剧疆琛ㄦ牸琛岄珮
}
},
created() {
this.getDataList(0)
// this.formInline.litigant = window.android.getAppToken()
+ },
+ mounted() {
+ // 鑾峰彇灞忓箷楂樺害
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.body.clientHeight
+ })()
+ }
+ this.screenHeight = document.body.clientHeight
+ },
+ watch: {
+ screenHeight: {
+ handler: function (newV) {
+ console.log('灞忓箷楂樺害鐨勫彉鍖�', newV, typeof newV)
+ this.tableRowHeight = (newV * 0.9) / 11
+ },
+ immediate: true,
+ },
+ // screenHomeHeight: function (newV) {
+ // console.log('鐖剁粍浠堕珮鍙樺寲锛屽瓙缁勪欢鎺ュ彈', newV)
+ // if (newV.indexOf('p') != -1) {
+ // this.tableRowHeight = (newV.slice(0, newV.indexOf('p')) * 0.9) / 11
+ // } else {
+ // this.tableRowHeight = (newV * 0.9) / 11
+ // }
+ // console.log('琛ㄦ牸鐨勯珮搴�', this.tableRowHeight)
+ // },
},
methods: {
/*look(){
@@ -101,19 +129,19 @@
getDataList(type) {
// this.$nextTick(()=>{
if (type == 0) {
- this.formInline.type = type;
- this.formInline.current=this.pageIndex;
- this.formInline.size=this.pageSize;
- getObj(this.formInline).then(res => {
+ this.formInline.type = type
+ this.formInline.current = this.pageIndex
+ this.formInline.size = this.pageSize
+ getObj(this.formInline).then((res) => {
this.tableData = res.data.data.records
- this.total =res.data.data.total
+ this.total = res.data.data.total
})
} else {
// this.formInline.type = type;
- this.formInline.current=this.pageIndex;
- this.formInline.size=this.pageSize;
+ this.formInline.current = this.pageIndex
+ this.formInline.size = this.pageSize
// this.formInline.user=333
- getObj(this.formInline).then(res => {
+ getObj(this.formInline).then((res) => {
this.tableData = res.data.data.records
})
}
@@ -126,11 +154,10 @@
path: '/padWord',
query: {
name: row.casePoint,
- }
+ },
})
this.$store.commit('SET_ID', row.id)
// }
-
},
//鎵撳紑鏂板寮规
getById() {
@@ -140,25 +167,90 @@
},
//鍏抽棴娣诲姞寮规
cancel() {
- this.isShow = false;
+ this.isShow = false
},
// 姣忛〉鏁�
sizeChangeHandle(val) {
- this.pageSize = val;
- this.pageIndex = 1;
- this.getDataList(0);
+ this.pageSize = val
+ this.pageIndex = 1
+ this.getDataList(0)
},
// 褰撳墠椤�
currentChangeHandle(val) {
- this.pageIndex = val;
- this.getDataList(0);
+ this.pageIndex = val
+ this.getDataList(0)
},
- }
+ },
}
</script>
+<style lang="scss">
+// Tab鏍囩椤电殑甯冨眬鏍峰紡(娴佺▼鍒楄〃锛岃繕鏈塸adword锛岀殑鍏叡鏍峰紡)
+.basic-container {
+ height: 100% !important;
+ width: 100vw;
+ // font-size: 30px !important;
+ padding-bottom: 0;
+ .el-card {
+ height: 100% !important;
+ .el-card__body {
+ height: 100% !important;
+ padding-top: 0 !important;
+ padding-right: 0 !important;
+ padding-bottom: 0 !important;
+ padding-left: 0 !important;
+ }
+ }
+}
+</style>
<style lang="scss" scoped>
-#box {
- font-size: 30px !important;
+.basic-container {
+ .nav {
+ height: 5%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .peopleSeachInput {
+ display: flex;
+ flex: 1;
+ .el-input {
+ margin-right: 10px;
+ }
+ }
+ .peopleSeachBtn {
+ display: flex;
+ }
+ }
+
+ // 涓棿琛ㄦ牸
+ ::v-deep .law-table-main {
+ height: 90%;
+ .el-table {
+ height: 100% !important;
+ @media screen and (max-width: 320px) {
+ font-size: 12px;
+ }
+ @media screen and (max-width: 480px) and (min-width: 321px) {
+ font-size: 16px;
+ }
+ @media screen and (max-width: 720px) and (min-width: 481px) {
+ font-size: 18px;
+ }
+ @media screen and (max-width: 800px) and (min-width: 721px) {
+ font-size: 22px;
+ }
+ }
+ }
+
+ // 搴曢儴椤电爜
+ .avue-crud__pagination {
+ padding: 0;
+ height: 5%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ position: sticky;
+ bottom: 0;
+ }
}
</style>
--
Gitblit v1.9.1