细节调节

zhangxiaoxu123

2023-01-11 539d1ce6b955d5d56b21d97590a2a684c400f64a

 src/views/padSunmaryProcedure/index.vue

@@ -1,153 +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: {
          //id: row.id,
          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标签页的布局样式(流程列表，还有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>
#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>