dbsd_kczx/src/views/site/yuYueKeCheng/index.vue

<template>
  <a-card class="rowGutter" id="yykcDom">
    <template #title>
      <span class="titleName">预约课程</span>
      <span class="titleDownload"><a @click="downloadByUrl({url:'/downPath/tkpjb.docx',target: '_self',fileName:'线上教学听课评价表-新.docx'})">线上课堂评价表</a></span>
      <span class="titleDownload"><a @click="downloadByUrl({url:'/downPath/tkjlb.docx',target: '_self',fileName:'东北师范大学听课记录表.docx'})">听课记录表</a></span>
      <span class="titleDownload"><a @click="downloadByUrl({url:'/downPath/jxzlpjb.docx',target: '_self',fileName:'东北师范大学本科课堂教学质量评价表（同行专家用）'})">同行评价表</a></span>
    </template>
    <template #extra><RouterLink target='_blank' to="/site/yuyuekechengMore">查看更多</RouterLink></template>
    <a-row class="rowGutter" :gutter="[16,16]">
      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in list" :key="index" class="itemBigBox">
        <div class="itemDate">
          {{ item.skrq }} {{ formatTime(item.hhks) }}-{{ formatTime(item.hhjs) }}
        </div>
        <div class="itemBox">
          <div>
            <div class="itemTitle"></div>
            <div class="itemTtleName">{{ item.kcmc }}</div>
          </div>
          <a-divider class="itemDivider"/>
          <div class="itemInteriorBox">
            <a-row>
              <a-col :span="16">
                <div class="itemSkSj">{{ item.skjs }}</div>
                <div class="itemKkDw">{{ item.kkdw }}</div>
              </a-col>
              <a-col :span="8" class="itemInteriorRow">
                <div class="itemXkrsNum">{{ item.xkrs }}</div>
                <div class="itemXkrs">选课人数</div>
              </a-col>
              <a-col :span="24">
                <div class="itemSkdd">
                  {{ item.skdd }}
                </div>
              </a-col>
              <a-col :span="24">
                <div style="margin-top:20px;text-align:center;">
                  <a-button type="primary" class="itemYyButton" @click="tingKeZuJiAddModal.view({ ketangbiaoid: item.id })">评价</a-button>
                  <a-button type="primary" class="itemBaoCuoButton" @click="funQxyy(item)">取消预约</a-button>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-card>
  <addModalPage ref="tingKeZuJiAddModal"/>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { TeamOutlined } from '@ant-design/icons-vue';
// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
import { getUserId } from '/@/views/site/utils/index';
import { downloadByUrl } from '/@/utils/file/download';
import { useMessage } from '/@/hooks/web/useMessage';
import { defHttp } from '/@/utils/http/axios';
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';

const { createMessage } = useMessage();
enum Api {
  list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage',
  deleteOne = '/kcYuyue/kcYuyue/delete',
  edit='/kcYuyue/kcYuyue/edit',
}

const tingKeZuJiAddModal = ref();

const emit = defineEmits(['ortherLoad']);
/**
 * 列表接口
 * @param params
 */
const listApi = (params) => defHttp.get({ url: Api.list, params });

const list = ref<any>([]);
onMounted(() => {
  newFunction();
});

/**
 * 转换时间由【0012】转成【00:12】
 * @param time 四个字符，时分，无分隔
 */
function formatTime(time: string) {
  if(!time) return '';
  let t_i_m_e = time.split('');
  return [t_i_m_e[0],t_i_m_e[1],':',t_i_m_e[2],t_i_m_e[3]].join('');
}

/**
 * 取消预约
 * @param record 主要获取课程id
 */
function funQxyy(record){
  var params = {id:record.yyid,isdeleted:1}
  defHttp.post({ url: Api.edit, params }, { isTransformResponse: false });
  newFunction();
  emit('ortherLoad');

  // defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
  //   newFunction();
  //   emit('ortherLoad');
  // });
}

function newFunction() {
  let pageSize = 4;
  var width = window.screen.width * window.devicePixelRatio;
  console.log(`🚀 ~ file: index.vue:110 ~ newFunction ~ width:`, width)
  if(width<800){
    pageSize = 1;
  }
  console.log(`🚀 ~ file: index.vue:113 ~ newFunction ~ pageSize:`, pageSize)
  listApi({ pageSize: pageSize, isdeleted: 0, userid: getUserId(), isOrderByNow: true }).then(res => {
    list.value = (res?.records) ?? [];
  });
}
defineExpose({
  newFunction
});
</script>
<style lang="less" scoped>
.titleName {
  font-size: 24px;
  font-weight: bold;
}
.titleDownload {
  padding: 15px;
}
.itemBigBox {
  margin-bottom: 40px;
}
.itemDate {
  border-radius: 25px;
  background: #cccccc8c;
  width: 90%;
  margin-bottom: 0.5rem;
  text-align: center;
  margin: 0 auto .5rem;
  padding: 0.5rem;
  font-weight: 700;
  font-size: 16px;
}
.itemBox {
  border: 2px #eef1f2 solid;
}
.itemTitle {
  width: 100%;
  height: 20px;
  background-color: #1c84c6;
}
.itemTtleName {
  width:100%;
  white-space:normal;
  word-break:break-all;
  overflow:hidden;
  padding: 10px;
  height: 70px;
  font-weight: 600;
  font-size: 16px;
}
.itemDivider {
  margin: 0px;
  color: #eef1f2;
}
.itemInteriorBox {
  padding: 20px;
  font-weight: 600;
}
.itemSkSj {
  height: 38px;
  font-size: 16px;
}
.itemKkDw {
  height: 45px;
  font-size: 14px;
}
.itemInteriorRow {
  text-align: center;
  height: 70px;
}
.itemXkrsNum {
  color: #1c84c6;
  font-size: 24px;
  font-weight: 600;
}
.itemXkrs {
  font-size: 14px;
  font-weight: 600;
}
.itemSkdd {
  height: 60px;
}
.itemYyButton {
  background-color: #1c84c6;
  font-weight: 600;
  border-radius: 5px;
}
.itemBaoCuoButton {
  background-color: #1c84c6;
  font-weight: 600;
  border-radius: 5px;
  margin-left: 15px;
}



</style>