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 | 298 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 201 insertions(+), 97 deletions(-)
diff --git a/src/views/padSunmaryProcedure/index.vue b/src/views/padSunmaryProcedure/index.vue
index 9b8f997..34d1499 100644
--- a/src/views/padSunmaryProcedure/index.vue
+++ b/src/views/padSunmaryProcedure/index.vue
@@ -1,152 +1,256 @@
<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="瀹℃壒浜�"></el-input>
- </el-form-item>
- <el-form-item label="鐢佃瘽">
- <el-input v-model="formInline.user" placeholder="瀹℃壒浜�"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="getDataList(0)">鏌ヨ</el-button>
- </el-form-item>
- <el-form-item style="float: right">
- <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="22%"
- ></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,
+ isShow: false,
formInline: {
litigant: '',
- phone: ''
+ phone: '',
+ current: this.pageIndex,
+ size: this.pageSize,
},
- pageSize:10,
- pageIndex:1,
- total:10,
- tableHeight: 460,
- tableData: []
+ pageSize: 10,
+ pageIndex: 1,
+ total: 10,
+ 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(){
+ // this.formInline.phone =1111
+ this.formInline.phone = window.android.getAppToken()
+ },*/
// 鏌ヨ鍒楄〃
- getDataList(type){
+ getDataList(type) {
// this.$nextTick(()=>{
- if(type==0){
- this.formInline.type = type
- // this.formInline.user=222
- getObj(this.formInline).then(res =>{
- this.tableData =res.data.data.records
- })
- }else {
- // this.formInline.user=333
- getObj().then(res =>{
- this.tableData =res.data.data.records
- })
- }
+ if (type == 0) {
+ 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
+ })
+ } else {
+ // this.formInline.type = type;
+ this.formInline.current = this.pageIndex
+ this.formInline.size = this.pageSize
+ // this.formInline.user=333
+ getObj(this.formInline).then((res) => {
+ this.tableData = res.data.data.records
+ })
+ }
// })
},
//鐐瑰嚮鐐硅烦杞煡鐪�
- rowget(row,column) {
- /*console.log(row,'row===')
- console.log(column,'column===')*/
- // this.$router.push({name: 'process_manage', params: {name: id}})
+ rowget(row, column) {
+ // if (row.casePoint){
this.$router.push({
path: '/padWord',
query: {
- name:row.casePoint
- }
+ name: row.casePoint,
+ },
})
- this.$store.commit('SET_ID',row.id)
+ this.$store.commit('SET_ID', row.id)
+ // }
},
//鎵撳紑鏂板寮规
- getById(){
+ getById() {
this.$router.push({
path: '/fromAdd',
})
},
//鍏抽棴娣诲姞寮规
cancel() {
- this.isShow = false;
+ this.isShow = false
},
// 姣忛〉鏁�
sizeChangeHandle(val) {
- this.pageSize = val;
- this.pageIndex = 1;
- // this.getDataList();
+ this.pageSize = val
+ this.pageIndex = 1
+ this.getDataList(0)
},
// 褰撳墠椤�
currentChangeHandle(val) {
- this.pageIndex = val;
- // this.getDataList();
+ 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