sgxt_web/src/views/backOfficeSystem/JudgmentHome/tsypHome/components/ypHome.vue

<template>
  <!-- 研判类型 -->
  <div class="content">
    <div class="titleBox">
      <PageTitle title="模型平台">
        <el-button type="primary" @click="openAddModel('add')" :icon="CirclePlus">
          新增模型
        </el-button>
      </PageTitle>
    </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" v-for="(it, idx) in list" :key="idx">
        <div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;"
            src="@/assets/images/mxbg.jpg" alt=""></div>
        <div class="foot">
          <span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
              <Document />
            </el-icon>查看规则</span>
          <span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddModel('edit', it)"><el-icon
              style="top: 2px;">
              <Edit />
            </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>
  <AddModel ref="addModel" />
  <Regulation ref="regulation" />
</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import { CirclePlus } from '@element-plus/icons-vue'
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, watch, defineEmits } from "vue";
import AddModel from "./addModel.vue";
import Regulation from "./regulation.vue";
const emit = defineEmits(['change'])
const searchBox = ref(); //搜索框
const show = ref(false)
const listHeight = ref()
const searchConfiger = ref([
  { label: "模型名称", prop: "ypMc", placeholder: "请输入模型名称", showType: "input" },
  { label: "模型类型", prop: "ypLx", placeholder: "请输入模型类型", showType: "input" },
]);
const PaginationConfig = reactive({
  pageCurrent: 1,
  pageSize: 8,
});
const total = ref(0)
const list = ref([])
const loading = ref(false);
const formData = ref({})
onMounted(() => {
  show.value = true;
  tabHeightFn();
  getLits()
})


const onSearch = (val) => {
  formData.value = { ...formData.value, ...val, };
  PaginationConfig.pageCurrent = 1;
  getLits();
}
const load = () => {
  if (total.value == list.value.length) return;
  PaginationConfig.pageCurrent++;
  getLits();
}
const getLits = () => {
  let params = {
    ...PaginationConfig,
    ...formData.value
  }
  loading.value = true;

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



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

// 打开弹窗
const addModel = ref(null)
const openAddModel = (type, row) => {
  addModel.value.init(type, row)
}
// 打开规则弹窗
const regulation = ref(null)
const openAddRule = (type, row) => {
  regulation.value.init(type, row)
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  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: 18px;
    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>