jingNing_H5_Mobile/src/pages/morningInspectionSystem/toStudent.vue

<script setup>
import { userInfo } from "~/store/user";
const router = useRouter();
const { uo_type, uo_name } = userInfo;
const { currentRoute } = useRouter()
const route = currentRoute.value
const grade_id = route.query.grade_id
const isBureau = ref(false); // 当前用户是否局端
isBureau.value = uo_type === "1";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const classList = ref([]);
const classOption = $ref([{ text: "班级", value: "" }]);
let page = 1;
const firstForm = $ref({
     class: "",
     type: "",
     time: "",
});
 function  getTimeFormat() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
    let time = [
        date.getFullYear() + "-" + month + "-" + strDate,
        date.getFullYear() + "-" + month + "-" + strDate,
      ];
       firstForm.time = time[0] + " - " + time[1];
console.log((firstForm.time));
     
    }
    getTimeFormat()
  function onLoad() {
  loading.value = true;
  request({
    url: "/xddy/dygl_cjxt_bj/index",
    data: {
      page,
      limit: 20,
       class_id: firstForm.class,
       xdcbj_tjlx: firstForm.type, 
       xdcbj_tjrq:firstForm.time
    },
  }).then((res) => {
    const data = res.data;
    list.value = [...list.value, ...data.page_data];
    finished.value = data.total_page === page;
    page++;
    loading.value = false;
  });
}
function getClassData() {
  loading.value = true;
  request({
    url: "/jcxx/class/index",
    data: {
      page: 1,
      limit: 999,
        grade_id: grade_id,
    },
  }).then((res) => {
    if (res.code == 1) {
      classList.value = res.data.page_data;
      loading.value = false;
      classList.value.map((item) => {
        classOption.push({ text: item.class_name, value: item.class_num });
      });
    }
  });
}
getClassData();
const resultOption = $ref([
     { text: "结果", value: "" },
     {
          text: "良好",
          value: 1,
        },
        {
          text: "及格",
          value: 2,
        },
        {
          text: "异常",
          value: 3,
        },
]);
const typeOption = $ref([
  { text: "类别", value: "" },

  {
    text: "晨检",
    value: 1,
  },
  {
    text: "午检",
    value: 2,
  },
]);

const date = ref("");
const show = ref(false);
const formatDate = (date) =>
  `${date.getFullYear()}-${((date.getMonth() + 1)>=1&&(date.getMonth() + 1)<=9)?'0'+(date.getMonth() + 1):date.getMonth() + 1}-${(date.getDate()>=0&&date.getDate()<=9)?'0'+date.getDate():date.getDate()}`;
const onConfirm = (values) => {
  const [start, end] = values;
  show.value = false;
  firstForm.time = `${formatDate(start)} - ${formatDate(end)}`;
  console.log(firstForm.time,typeof(firstForm.time), " firstForm.time  ");
  dropItemChange()
};
const minDate = new Date(2010, 0, 1);
const maxDate = new Date(2010, 0, 31);
function dropItemChange() {
  page = 1;
  list.value = [];
  finished.value = false;
  onLoad();
}


</script>

<template>
  <div class="index">
    <div class="flex">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="firstForm.class"
          :options="classOption"
          @change="dropItemChange"
        />
        <van-dropdown-item
          v-model="firstForm.type"
          :options="typeOption"
          @change="dropItemChange"
        />
    
      </van-dropdown-menu>

      <van-cell
        class="dateSearch"
        title="日期:"
        :value="firstForm.time"
        @click="show = true"
      /><van-calendar
        v-model:show="show"
        type="range"
        :min-date="new Date('1970/01/01')"
        :max-date="new Date('2099/01/31')"
        @confirm="onConfirm"
        allow-same-day
      />
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" >
        <template #title>
          <div
            style="display: flex; justify-content: space-between; color: black"
          >
            <span>{{
              `${item.xdcbj_tjlx}\u00A0\u00A0\u00A0\u00A0\u00A0${item.class_name}`
            }}</span>
            <span style="color: black">{{ item.xdcbj_tjrq }}</span>
          </div>
        </template>

        <template #label>
          <div>
            <span class="mr-50px">应到：{{ item.xdcbj_ydrs }}人</span>
            <span>实到：{{ item.xdcbj_sdrs }}人 </span>
            <span></span>
          </div>

          <div
            style="display: flex; justify-content: space-between; color: black"
          >
            <div>
              <span>因病缺勤：{{ item.xdcbj_ybqqrs }}人 </span>
            </div>
            <div>
              <span>因事缺勤：{{ item.xdcbj_ysqqrs }}人 </span>
            </div>
            <div>
              <span>异常学生：{{ item.xdcbj_ysqqrs }}人 </span>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.search {
  box-shadow: 0 0.05333rem 0.32rem rgba(100, 101, 102, 0.12);
}
:deep(.van-dropdown-menu) {
//   width: 50%;
}
:deep(.van-dropdown-menu__item) {
  flex: none;
  padding: 0 10px;
}
::v-deep .dateSearch {
  font-size: 15.4px;
  padding: 10.4px 5px;
}
::v-deep .dateSearch .van-cell__title {
  width: 20%;
  flex: auto;
}
::v-deep .dateSearch .van-cell__value {
  width: 80%;
  font-size: 12px;
  flex: auto;
}
</style>