ReptileFront/pages/tptsps.vue

<template>
  <div :class="[prefixCls, 'flex']">
    <div>
      <mai-tab :active="currentTab.id" :data-source="tabs" @change="handleChange"/>
    </div>
    <div :class="`${prefixCls}-content dynamicInfo flex flex-col pl-8`"
         style="border-left: 1px solid #d9d9d9;">
      <el-form size="large" inline>
        <el-form-item label="关键字">
          <el-input v-model="searchData.keyword" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item label="覆盖产品">
          <el-input v-model="searchData.product" placeholder="请输入覆盖产品"/>
        </el-form-item>
        <el-form-item label="通报成员">
          <el-input v-model="searchData.notifying_members" placeholder="请输入通报成员"/>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="通报起止时间">
              <el-date-picker type="daterange" v-model="searchData.notification_time" placeholder="请选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="6" class="flex justify-end">
            <el-form-item style="margin-right: 0;">
              <el-button type="primary" @click="getList(currentTab)">查询</el-button>
              <el-button @click="resetData">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
                :header-cell-style="{background: '#f5f5f5', color:'#333333'}" @cellClick="handleCellClick">
        <el-table-column show-overflow-tooltip align="center" label="通报号"
                         prop="notification_number"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="通报标题"
                         prop="notification_title">
          <template #header>
            <span class="text-red-500">通报标题</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="通报成员"
                         prop="notifying_members"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="通报时间"
                         prop="notification_time_text"></el-table-column>
      </el-table>
      <div class="mt-32">
        <Pagination
          :current="current"
          :limit="limit"
          :pages="pagesRef"
          :total="total"
          @change="onChangePage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {randomUUID} from '~~/utils';
import dayjs from "dayjs";

definePageMeta({
  name: 'TBT/SPS通报',
  headerHost: false,
  order: 5,
})
useHead({
  title: 'TBT/SPS通报'
})
const {setBannerTitle} = useAppStore()
const {tbspApi} = useApi()
const {prefixCls} = useDesign('mai-wrap');
setBannerTitle('TBT/SPS通报')
const tabs = ref([
  {
    name: 'TBT通报查询',
    id: randomUUID(),
    children: [],
  },
  {
    name: 'SPS通报查询',
    id: randomUUID(),
    children: [],
  },
]);
const currentTab = ref({});
const content = ref([]);
const loading = ref(true);
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const router = useRouter();
const searchData = ref({
  notifying_members: '',
  notification_time: '',
  keyword: '',
  product: '',

})

function handleCellClick(data: any) {
  router.push({
    path: '/tptsps/'+ data.id
  })
}
function resetData(flag: boolean = true) {
  searchData.value = {
    notifying_members: '',
    notification_time: '',
    keyword: '',
    product: ''
  }
  flag && getList(currentTab.value)
}

function onChangePage(val: number) {
  setCurrentPage(val)
  getList(currentTab.value)
}

async function handleChange(data: any) {
  currentTab.value = data;
  setCurrentPage(1)
  resetData(false)
  await getList(data)
}

async function getList(data: any) {
  if (data) {
    loading.value = true;
    const searchParams = {
      ...searchData.value,
      notification_starttime:'',
      notification_endtime: '',
    }
    if (searchData.value.notification_time) {
      searchParams.notification_endtime = dayjs(searchData.value.notification_time[1]).format('YYYY-DD-MM hh:mm:ss')
      searchParams.notification_starttime = dayjs(searchData.value.notification_time[0]).format('YYYY-DD-MM hh:mm:ss')
      // console.log('search: >>>>>', searchData.value.notification_time)
      // @ts-ignore
      delete searchParams.notification_time;
    }
    const {data: listDatas} = await tbspApi.getTsList({
      ...searchParams,
      page: current.value,
      limit: limit,
      category_id: data.id
    })
    content.value = listDatas.data;
    loading.value = false;
    setTotal(listDatas.total)

  }
}

async function getData() {
  const cate = await tbspApi.getTsTbTypes()
  tabs.value[0].children = cate.data.tbt
  tabs.value[1].children = cate.data.sps
  await handleChange(cate.data.tbt[0]);
}

getData()
</script>

<style scoped lang="scss">
.dynamicInfo {
  margin-top: 0;
  padding-bottom: 100px;
}
:deep(.el-form) {
  .el-form-item__label {
    height: 60px;
    line-height: 60px !important;
    @apply text-xl;
  }
  .el-input__wrapper {
    border-radius: 10px;
    height: 60px;
    box-shadow: unset;
    background-color: #F7F7F7;
    @apply text-xl;
  }
  .el-icon {
    font-size: 20px;
  }
  .el-range-input {
    font-size: 20px;
  }
  .el-button {
    width: 150px;
    height: 60px;
    box-shadow: unset;
    @apply text-xl rounded-xl;
    &--primary{

      background-color: #022950;
    }
  }
}
</style>