<template>
|
<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"
|
: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="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>
|
</div>
|
<SunmaryProcedureForm v-if="isShow"
|
ref="sunmaryProcedure"
|
@cancel="cancel"></SunmaryProcedureForm>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getObj } from '@/api/News/pad'
|
|
export default {
|
name: 'index',
|
// props: ['screenHomeHeight'],
|
data() {
|
return {
|
isShow: false,
|
formInline: {
|
litigant: '',
|
phone: '',
|
current: this.pageIndex,
|
size: this.pageSize,
|
},
|
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) {
|
// 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.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) {
|
// if (row.casePoint){
|
this.$router.push({
|
path: '/padWord',
|
query: {
|
name: row.casePoint,
|
},
|
})
|
this.$store.commit('SET_ID', row.id)
|
// }
|
},
|
//打开新增弹框
|
getById() {
|
this.$router.push({
|
path: '/fromAdd',
|
})
|
},
|
//关闭添加弹框
|
cancel() {
|
this.isShow = false
|
},
|
// 每页数
|
sizeChangeHandle(val) {
|
this.pageSize = val
|
this.pageIndex = 1
|
this.getDataList(0)
|
},
|
// 当前页
|
currentChangeHandle(val) {
|
this.pageIndex = val
|
this.getDataList(0)
|
},
|
},
|
}
|
</script>
|
<style lang="scss">
|
// Tab标签页的布局样式(流程列表，还有padword，的公共样式)
|
.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>
|
.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>
|
