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

<template>

  <div id="siteMain">
    <div id="maxSite">
      <!-- 页头 -->
      <headerPage/>
      <!-- 功能头 -->
      <div style="padding: 20px">
            <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>
      </div>
              <a-divider class="itemDivider"/>
      <!-- 查询条件 -->
      <div>
        <a-row style="margin-top:20px;">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-form-item label="" style="padding: 10px;">
              <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" :placeholder="'请选择开始时间'" style="width:100%;" v-model:value="queryParam.startTime"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-form-item label="" style="padding: 10px;">
              <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" :placeholder="'请选择结束时间'" style="width:100%;" v-model:value="queryParam.endTime"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-form-item label="" style="padding: 10px;">
              <JDictSelectTag placeholder="请选择院系" v-model:value="queryParam.kkdw" :dictCode="`tkrszdw_view,college,college`" />
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-form-item label="" style="padding: 10px;">
              <JDictSelectTag placeholder="请选择节次" v-model:value="queryParam.jieci" :dictCode="`kc_jieci_view,jieciname,jieci`" />
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-form-item label="" style="padding: 10px;">
              <a-input placeholder="请输入课程或教师名称" v-model:value="queryParam.ywmc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 12 }" :sm="{ span: 8 }" :lg="{ span: 2 }">
            <a-form-item label="" style="padding: 10px;">
              <JDictSelectTag placeholder="请选择预约类型" v-model:value="queryParam.isdeleted" dictCode="yyzt" />
            </a-form-item>
          </a-col>
          <a-col :xs="{ span: 12 }" :sm="{ span: 8 }" :lg="{ span: 2 }" style="padding: 10px;">
            <a-button type="primary" @click="loadData" style="background-color:  rgb(26, 179, 148);">查询</a-button>
          </a-col>
        </a-row>
      </div>
      <!-- 数据展示区 -->
      <div style="padding:10px">
        <a-row class="rowGutter" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in listData" :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>
                      {{ item.skdd }}
                    </div>
                  </a-col>
                  <a-col :span="24">
                    <div style="margin-top:20px;" v-if="item.isdeleted=='0'">
                      <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>
                    <div style="margin-top:20px;" v-if="item.isdeleted=='1'">
                      <a-button type="primary" class="itemYyButton" style="background-color: #95c9e8;" @click="funCxyy(item)">重新预约</a-button>
                      <a-button type="primary" class="itemBaoCuoButton" @click="funDelete(item)">删除预约</a-button>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- 站行 -->
      <div style="height: 30px;background-color: #f3f3f4;"></div>
      <!-- 页尾 -->
      <footerPage/>
    </div>
  </div>
  <addModalPage ref="tingKeZuJiAddModal"/>
</template>
<script setup lang="ts">
import { ref,onMounted,defineExpose } from 'vue';
import headerPage from '/@/views/site/common/header.vue';
import footerPage from '/@/views/site/common/footer.vue';
import { defHttp } from '/@/utils/http/axios';
import { downloadByUrl } from '/@/utils/file/download';
import { dateFormat } from '/@/utils/common/compUtils';
import { getUserId } from '/@/views/site/utils/index';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getSysConfig } from '/@/views/site/utils/index';
import { useMessage } from '/@/hooks/web/useMessage';
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';

const { createMessage } = useMessage();
const list = (queryParam) => defHttp.get({ url: Api.list, params:queryParam });

enum Api {
  list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage',
  deleteOne = '/kcYuyue/kcYuyue/delete',
  edit='/kcYuyue/kcYuyue/edit',
}

const tingKeZuJiAddModal = ref();

const queryParam = ref<any>({});
let listData = ref<any>([]);


//进入就加载
onMounted(() => {
  const format = 'yyyy-MM-dd';
  const startTime = new Date(getSysConfig().bxqkssj);
  queryParam.value.startTime =  dateFormat(startTime, format)
  queryParam.value.endTime =  dateFormat(new Date(), format)
  queryParam.value.isdeleted = '0'
  queryParam.value.pageSize = -1
  queryParam.value.userid = getUserId()
  loadData()
});
/**
 * 加载数据
 */
function loadData(){
  console.log(`🚀 ~ file: more.vue:148 ~ loadData ~ queryParam:`, queryParam.value)
  list(queryParam.value).then(res => {
    listData.value = res.records;
  })
}

/**
 * 重新预约
 * @param record 主要获取课程id
 */
 function funCxyy(record){
  var params = {id:record.yyid,isdeleted:0}
  defHttp.post({ url: Api.edit, params }, { isTransformResponse: false });
  createMessage.success("重新预约成功");
  loadData();
}

/**
 * 取消预约
 * @param record 主要获取课程id
 */
 function funQxyy(record){
  var params = {id:record.yyid,isdeleted:1}
  defHttp.post({ url: Api.edit, params }, { isTransformResponse: false });
  createMessage.success("取消预约成功");
  loadData();
}
/**
 * 删除预约
 * @param record
 */
function funDelete(record){
  var params = {id:record.yyid}
  defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
    loadData();
  });
}

/**
 * 转换时间由【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('');
}

</script>
<style lang="less" scoped>
@import '/@/assets/less/IndexSite.less';
.titleName {
  font-size: 24px;
  font-weight: bold;
}
.titleDownload {
  padding: 15px;
  font-size: 16px;
}
.itemBigBox {
  margin-bottom: 40px;
}
.itemDate {
  border-radius: 25px;
  background: #cccccc8c;
  width: 70%;
  margin-bottom: 0.5rem;
  text-align: center;
  margin: 0 auto .5rem;
  padding: 0.5rem;
}
.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: 30px;
  font-size: 16px;
}
.itemKkDw {
  height: 30px;
  font-size: 14px;
}
.itemInteriorRow {
  text-align: center;
  height: 70px;
}
.itemXkrsNum {
  color: #1c84c6;
  font-size: 24px;
  font-weight: 600;
}
.itemXkrs {
  font-size: 14px;
}
.itemSkdd {
  height: 60px;
}
.itemYyButton {
  background-color: #1c84c6;
  float: left;
  font-weight: 600;
  border-radius: 5px;
}
.itemBaoCuoButton {
  background-color: #1c84c6;
  float: right;
  font-weight: 600;
  border-radius: 5px;
}

.ant-form-item {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    vertical-align: top;
}

</style>