dbsd_kczx/src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcDetail.vue

<template>
  <div style="margin-top:10px;background:#fff;height:630px;overflow:auto;">
     <a-card>
      <div>
        <a-row>
          <a-col :span="3" style="font-size: 18px;font-weight: bold;">课程介绍：</a-col>
          <a-col :span="15"><a-textarea style="width: 100%;" v-model:value="jxdgInfo.kcjs"></a-textarea></a-col>
          <a-col :span="6" style="text-align:right;"><a-button type="primary" @click="addKcjsHandle(1)">提交</a-button><a-button type="primary" style="margin-left:10px;" @click="handleYinyong">引用</a-button></a-col>
        </a-row>
      </div>
     </a-card>
     <a-card>
      <div>
        <span style="float: left;line-height: 30px; font-size: 18px; font-weight: bold;">教学大纲：</span>
        <span style="width:300px;float: left;">
          <span style="float:left;"><j-upload v-model:value="jxdgInfo.filePath" maxCount="1" accept=".doc,.docx,.pdf" :forceAcceptVerify="true"></j-upload></span>
        </span>
        <span style="float: right;">
          <a-button type="primary" @click="addKcjsHandle(2)">提交</a-button>
          <a-button type="primary" style="margin-left:10px;" @click="openPdf(jxdgInfo)">预览</a-button>
        </span>
      </div>
      <!-- <div>
        <JeecgPdfView/>
      </div> -->
     </a-card>
     <a-card>
      <div style="line-height: 30px; font-size: 18px; font-weight: bold;width:100%;">
        <span style="float: left;">常见问题</span>
        <span style="float: right;"><a-button type="primary" @click="addCjwtHanle">新增</a-button></span>
      </div>
      <a-row style="margin-top: 50px;width:100%;display: block;">
        <a-col :span="24" v-for="(item,index) in cjwtSource" :key="index">
          <a-row>
            <a-col :span="24">
              <span style="float: left;">{{index+1}}.{{item.question}}</span>
              <span style="float: right;">
                <a title="修改" @click="handleEdit(item)"><Icon icon="ant-design:form-outlined" /></a>
                <a-divider type="vertical" style="height: 30px; background-color: #7cb305" />
                <a title="删除" @click="handleDelete(item)"><Icon icon="ant-design:delete-outlined" /></a>
              </span>
            </a-col>
            <a-col :span="24"><span><Icon icon="ant-design:caret-right-outlined" />答：{{item.answer}}</span></a-col>
            <a-col :span="24">
              <a-divider />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="24" v-show="cjwtSource.length>0">
          <a-pagination v-model="current" :total="total" @change="handlePageChange" :pageSize="pageSize" style="text-align: right;"/>
        </a-col>
        <a-col :span="24" v-show="cjwtSource.length==0">
          <a-empty/>
        </a-col>
      </a-row>
     </a-card>
     <a-card>
      <div style="line-height: 30px; font-size: 18px; font-weight: bold;width:100%;">
        <span style="float: left;">往届学生评价</span>
      </div>
      <studentPjjgTeaList :queryParam="{ pageSize: 3, ...tkzjParam,kcbh:'' }" style="max-height: 106px;"/>
     </a-card>
     <ZyCjwtModal ref="ZyCjwtModalPage" @success="handleCjwtOk" />
     <ZyJxdgListModal ref="ZyJxdgListModalPage" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, unref  } from 'vue';
  import { getUserSf,getSysConfig } from '/@/views/site/utils/index';
  import { defHttp } from '/@/utils/http/axios';
  import { useRouter } from 'vue-router';
  import { Icon } from '/@/components/Icon';
  import { Pagination, Empty } from 'ant-design-vue';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import { deleteOne } from '/@/views/zy/zyCjwt/ZyCjwt.api';
  import headerPage from '/@/views/site/common/header.vue';
  import footerPage from '/@/views/site/common/footer.vue';
  import studentPjjgTeaList from '/@/views/site/pjjgPage/studentPjjgTeaList.vue';
  import ZyCjwtModal from '/@/views/zy/zyCjwt/components/ZyCjwtModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import ZyJxdgListModal from '/@/views/zy/zyJxdg/ZyJxdgListModal.vue';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  import JeecgPdfView from '/@/views/demo/jeecg/JeecgPdfView.vue';
  import { useGlobSetting } from '/@/hooks/setting';

const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;
 
  //当前路由信息
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  const { rwbh,xqxn } = query;//获取传递参数
  const APagination = Pagination;
  const current = ref<number>(0);
  const total = ref<number>(0);
  const pageNo = ref<number>(0);
  const pageSize = ref<number>(3);
  const tkzjParam = ref({rwbh:rwbh});
  const ZyCjwtModalPage = ref();
  const ZyJxdgListModalPage = ref();
  const cjwtSource = ref([]);
  let router = useRouter();
  const { createMessage } = useMessage();
  const jxdgInfo = ref({
    id:'',
    filePath:'',
    kcjs:''
  });
  
  //引用功能
  function handleYinyong(){
    var record = {xqxn,rwbh}
    ZyJxdgListModalPage.value.disableSubmit = true;
    ZyJxdgListModalPage.value.init(record);
  }
  //常见问题新增
  function addCjwtHanle(){
    var params = { rwbh:rwbh,xqxn:xqxn };
    ZyCjwtModalPage.value.disableSubmit = false;
    ZyCjwtModalPage.value.add(params);
  }
  /**
   * 常见问题编辑事件
   */
  function handleEdit(record: Recordable) {
    ZyCjwtModalPage.value.disableSubmit = false;
    ZyCjwtModalPage.value.edit(record);
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleCjwtOk);
  }

  function openPdf(record){
    var url2 = getFileAccessHttpUrl(record.filePath)
    console.log(`🚀 ~ openPdf ~ url2:`, url2)
    let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
    window.open(url,"_blank")
  }
   

  //常见问题回调刷新
  function handleCjwtOk() {
    console.log('--------cjwt ok -----------')
    cjwtData(1);
  }
  
  //常见问题新增翻页
  function handlePageChange(page: number) {
    cjwtData(page);
  }

  function cjwtData(arg){
    defHttp.get({ url: '/zyCjwt/zyCjwt/list', params: { pageSize: 3,pageNo:arg, rwbh:rwbh,xqxn:xqxn } }).then((res) => {
    console.log(`🚀 ~ defHttp.get ~ res:`, res)
      cjwtSource.value = res.records;
      console.log(`🚀 ~ defHttp.get ~ cjwtSource:`, cjwtSource)
    });
  }
  //获取课程介绍和教学大纲内容
  function getKcjsJxdg(){
    defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh:rwbh} }).then((res) => {
      if(res){
        jxdgInfo.value = res;
      }
    });
  }
  function addKcjsHandle(type){
    const isUpdate = true;
    var model = jxdgInfo.value;
    model.rwbh = rwbh;
    model.xqxn = xqxn;
    console.log(`🚀 ~ addKcjsHandle ~ model:`, model)
    if(model.id){
      if(type=='1'){
        model.filePath = '';
      }
      defHttp.post({ url: '/zyJxdg/zyJxdg/edit', params: model }).then((res) => {
      console.log(`🚀 ~ defHttp.post 111~ res:`, res)
      getKcjsJxdg();
      });
    }else{
      if(type=='1'){
        model.filePath = '';
      }
      defHttp.post({ url: '/zyJxdg/zyJxdg/add', params: model }).then((res) => {
      console.log(`🚀 ~ defHttp.post 222~ res:`, res)
      getKcjsJxdg();
      });
    }

  }
  //进入就加载
  onMounted(() => {
    getKcjsJxdg();
    cjwtData(1);

  });
 
</script>
<style lang="less" scoped>
</style>