sgxt_web/src/views/backOfficeSystem/JudgmentHome/tsypHome/index.vue

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <!-- 数据类型 -->
      <CheckBox :data="checkData.sjlxBtn" customClass="all" @changeData="changeData_sjly"></CheckBox>
    </div>
    <!-- 右侧内容区 -->
    <div class="right-content">
      <div class="btnsBox" ref="refBtn">
        <!-- 研判类型 -->
        <CheckBox :data="checkData.yplxBtn" @changeData="changeData_yplx"></CheckBox>
      </div>
      <div ref="searchBox" >
        <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
      </div>
      <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{height:listHeight+'px'}" v-loading="loading">
        <li class="cntItem" @click="lookDeatl(it)" v-for="(it,idx) in list" :key="idx">
          <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
          <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
          <div class="flex ww100 f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
          <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
          <div class="foot">
            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
            <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
          </div>
        </li>
        <div class="ww100 flex just-center">
          <MOSTY.Empty :show="!loading && list.length <= 0"></MOSTY.Empty>
        </div>
        <div class="tc ww100 mb4" style="color: #a29f9f;" v-if="total == list.length && total>0">暂时没有数据了！</div>
      </ul>
    </div>
  </div>
  <!-- 详情 -->
  <Detail ref="detailForm"></Detail>
</template>

<script setup>
import Detail from './components/detail.vue'
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import Search from "@/components/aboutTable/Search.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance,watch, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const {  D_SG_SJLY,D_SG_TSYPGZ} = proxy.$dict("D_SG_SJLY","D_SG_TSYPGZ"); //获取字典数据
const searchBox = ref(); //搜索框
const refBtn = ref(); 
const show = ref(false)
const detailForm = ref()
const listHeight = ref()
const searchConfiger = ref([
  { label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
]);
const checkData = reactive({
  sjlxBtn:{
    hasChoose: [],
    list: []
  },
  yplxBtn:{
    hasChoose: [],
    list: []
  },
});
const page = ref(1);
const total = ref(0)
const list = ref([])
const loading = ref(false);
const formData = ref({})
watch(()=>[D_SG_SJLY.value,D_SG_TSYPGZ.value],val=>{
  checkData.sjlxBtn.list = val[0].map(v=>v.zdmc);
  checkData.yplxBtn.list = val[1].map(v=>v.zdmc);
  checkData.yplxBtn.hasChoose = val[1].map(v=>v.zdmc);
},{immediate:true,deep:true});

onMounted(()=>{
  show.value = true;
  getLits()
  tabHeightFn();
})


// 数据类型
const changeData_sjly = (val) =>{
  checkData.sjlxBtn.hasChoose = val;
  let dms = [];
  D_SG_SJLY.value.forEach(item => {
    if(val.includes(item.zdmc)) dms.push(item.dm);
  });
  formData.value.sjLx = dms;
  page.value = 1;
  getLits();
}

// 研判类型
const changeData_yplx = (val) =>{
  checkData.yplxBtn.hasChoose = val;
  let dms = [];
  D_SG_TSYPGZ.value.forEach(item => {
    if(val.includes(item.zdmc)) dms.push(item.dm);
  });
  formData.value.ypLx = dms;
  page.value = 1;
  getLits();
}

const onSearch = (val) =>{
  formData.value = {...formData.value,...val,};
  page.value = 1;
  getLits();
}

const load = () =>{
  if(total.value == list.value.length) return;
  page.value++;
  getLits();
}

const getLits = () =>{
  let params = {
    pageCurrent:page.value,
    pageSize:8,
    ...formData.value
  }
  loading.value = true;
  qcckPost(params,'/mosty-gsxt/tsyp/selectPage').then(res=>{
    let arr = res.records || [];
    list.value = page.value == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
    loading.value = false;
  }).catch(()=>{
    loading.value = false;
  })
}

// 查看详情
const lookDeatl = (val) =>{
  nextTick(()=>{
    detailForm.value.init(val,formData.value.sjLx)
  })
}

// 表格高度计算
const tabHeightFn = () => {
  listHeight.value = window.innerHeight - searchBox.value.offsetHeight - refBtn.value.offsetHeight - 182;
  window.onresize = function () {
    tabHeightFn();
  };
};


</script>

<style lang="scss" scoped>
.statistical-analysis {
  width: 100%;
  height: 100%;

  .left-menu {
    float: left;
    width: 280px;
    height: calc(100% - 10px);
    padding: 20px 4px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    color: #333;
    line-height: 32px;

    ::v-deep .checkBox {
      flex-direction: column;

      .checkall {
        margin: 0;
      }
    }

    ::v-deep .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    ::v-deep .is-checked {
      background: rgb(242, 249, 255);
      margin-bottom: 4px;
    }

    ::v-deep .el-checkbox {
      padding-left: 8px;
      margin-right: 4px;
    }

    .all {
      width: calc(100% - 4px);
    }
  }

  .right-content {
    float: left;
    width: calc(100% - 290px);
    height: 100%;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    .btnsBox{
      background: #fff;
      padding: 10px 5px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .cntlsit{
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      gap: 22px;
      overflow: hidden;
      overflow-y: auto;
      background: #fff;
      padding: 4px;
      box-sizing: border-box;
      .cntItem{
        width: 300px;
        border: 1px solid #ccc;
        color: #787878;
        border-radius: 4px;
        overflow: hidden;
        .foot{
          text-align: right;
          margin-top: 4px;
          border-top:1px solid #ccc;
          padding: 4px;
          box-sizing: border-box;
        }
      }
      
    }
  }
}
</style>