slibra-module-web/src/views/carbon/components/TheModalTable.vue

<script setup>
import { ref, h } from 'vue';
import { NModal, NForm, NGrid, NFormItemGi, NInput, NDatePicker, NPagination, NDataTable } from 'naive-ui';
import dayjs from 'dayjs';
import { carbonApi } from '@/api/carbon';

const modelValue = defineModel();

const timeArr = ref(null);
const hsTimeArr = ref(null);

const formData = ref({
  pageNum: 1,
  pageSize: 10,
  createBy: '',
}) 

const inputThemeOverrides = {
  border: '1px solid #d7d9e5',
  borderRadius: '8px',
  borderHover: '1px solid #2454FF',
  borderFocus: '1px solid #2454FF',
  boxShadowFocus: '0 0 0 2px rgba(36, 84, 255, 0.2)',
  text: '#333'
}

const selectThmem = {
  peers: {
    Input: {
      border: '1px solid #d7d9e5',
      borderRadius: '8px',
      borderHover: '1px solid #2454FF',
      borderFocus: '1px solid #2454FF',
      boxShadowFocus: '0 0 0 2px rgba(36, 84, 255, 0.2)',
      text: '#333'
    }
  }
}

const total = ref(0);
const tableData = ref([]);
const columns = [
  { title: '核算日期', key: 'addYearMonth', align: 'center' },
  { title: '总碳排放量', key: 'ztTotalCo2', align: 'center' },
  { title: '污水处理碳排放量', key: 'wsclTotalCo2', align: 'center', width: 160 },
  { title: '能源、药剂碳排量', key: 'nyyjTotalCo2', align: 'center', width: 160 },
  { title: '污泥处理碳排量', key: 'wnclTotalCo2', align: 'center', width: 160 },
  { title: '替碳、碳汇替碳量', key: 'ttthTotalCo2', align: 'center', width: 160 },
  { title: '录入人员', key: 'createBy', align: 'center' },
  { title: '填报日期', key: 'remark', align: 'center' },
  // { title: '操作', key: 'name9', align: 'center', render: (row) => {
  //   return h('span', {
  //     class: 'text-[#2454FF] cursor-pointer',
  //     onClick: () => {
  //       console.log(row);
  //     }
  //   }, '下载');
  // }}
]

const formatTime = (timestamp) => {
  let tempTimeList = [];

  if ( timestamp && timestamp.length ) {
    tempTimeList = timestamp.map(t => dayjs(t).format('YYYY-MM-DD'));
  }

  return tempTimeList;
}

const handleQueryList = async() => {
  const [ timeBegin, timeEnd ] = formatTime(timeArr.value);
  const [ hsTimeBegin, hsTimeEnd ] = formatTime(hsTimeArr.value);
  console.log( hsTimeArr.value );

  const { rows, total: allTotal } = await carbonApi.getTableList({ ...formData.value, timeBegin, timeEnd, hsTimeBegin, hsTimeEnd })

  tableData.value = rows;
  total.value = allTotal;
}

const handleResetList = async () => {
  timeArr.value = null;
  hsTimeArr.value = null;
  formData.value = {
    pageNum: 1,
    pageSize: 10,
    createBy: '',
  };
  handleQueryList();
}

const onAfterdEnter = () => {
  handleQueryList();
}

const onAfterLeave = () => {
  handleResetList();
}
</script>

<template>
  <NModal
    v-model:show="modelValue"
    preset="card"
    class="custom-card"
    title="核算历史"
    header-class="card-preset_header"
    content-class="card-prset_content"
    :style="{ width: '1240px' }"
    :bordered="false"
    :close-on-esc="false"
    :mask-closable="false"
    :block-scroll="false"
    :on-after-enter="onAfterdEnter"
    :on-after-leave="onAfterLeave"
  >
    <div class="main-container space-y-[12px]">
      <div class="search-inner">
        <NForm :show-feedback="false">
          <NGrid :cols="14" :x-gap="24">
            <NFormItemGi :span="4" label="录入人员：" path="adress" label-placement="top">
              <NInput :theme-overrides="inputThemeOverrides" v-model:value="formData.createBy" />
            </NFormItemGi>
            <NFormItemGi :span="4" label="填报日期：" path="adress" label-placement="top">
              <n-date-picker v-model:value="timeArr" type="daterange" clearable :theme-overrides="selectThmem"/>
            </NFormItemGi>
            <NFormItemGi :span="4" label="核算日期：" path="adress" label-placement="top">
              <n-date-picker v-model:value="hsTimeArr" type="monthrange" clearable :theme-overrides="selectThmem" value-format="yyyy-mm"/>
            </NFormItemGi>
            <NFormItemGi :span="2" label="" path="adress" label-placement="top">
              <div class="space-x-[10px]">
                <button class="btn" @click="handleQueryList">查询</button>
                <button class="btn default" @click="handleResetList">重置</button>
              </div>
            </NFormItemGi>
          </NGrid>
        </NForm>
      </div>

      <div class="table-inner">
        <NDataTable :columns="columns" :data="tableData" :bordered="false" :single-line="false" :min-height="400" :max-height="400"></NDataTable>
        <div class="pt-[20px] flex justify-center">
          <NPagination v-model:page="formData.pageNum" :item-count="total"></NPagination>
        </div>
      </div>
    </div>
  </NModal>
</template>

<style lang="scss" scoped>
.main-container {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #FFFFFF;
  background: linear-gradient(180deg, rgba(238, 253, 255, 0.5) 0%, rgba(231, 243, 252, 0.5) 100%);

  .search-inner, .table-inner {
    padding: 20px 20px;
    border-radius: 10px;
    background: #fff;

    .btn {
      border-radius: 4px;
      padding: 5px 16px;
      background: #2454FF;
      font-size: 14px;
      line-height: 22px;
      text-align: left;
      color: #fff;
    }

    .default {
      border: 1px solid #d7d9e5;
      color: #2454FF;
      background: #fff;
    }
  }

  .table-inner {

  }
}
</style>

<style lang="scss">
.card-preset_header {
  padding: 16px !important;
}
.card-prset_content {
  padding: 20px !important;
  background: linear-gradient(180deg, #F3F7FC 0%, #E4EAF7 100%);
}
</style>