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

<template>
  <div style="margin-top: 10px; background: #fff; height: calc(100vh - 225px); overflow: auto">
    <div v-if="showYl">
      <div style="width: 100%; text-align: right">
        <a-button type="primary" style="margin-left: 10px" @click="handleYulan(0)">学生预览页面</a-button>
      </div>
      <a-card>
        <div>
          <a-row>
            <a-col :lg="3" style="font-size: 18px; font-weight: bold">课程简介：</a-col>
            <a-col :lg="15" v-show="kcjsShow">
              <j-editor v-model:value="jxdgInfo.kcjs" />
              <!-- <a-textarea style="width: 100%;min-height: 200px;" v-model:value="jxdgInfo.kcjs" @blur="handleEditKcjs(0)"></a-textarea> -->
            </a-col>
            <a-col :lg="15" v-show="!kcjsShow">
              <div
                style="width: 100%; min-height: 50px; margin-top: 10px; color: #cfcfcf; font-size: 13px"
                v-if="!jxdgInfo.kcjs"
                @click="handleEditKcjs(1)"
                >暂无内容,点击进行编辑</div
              >
              <div style="width: 100%; min-height: 50px" v-else @click="handleEditKcjs(1)">
                <div v-html="jxdgInfo.kcjs"></div>
                <div style="color: #cfcfcf; font-size: 13px">说明：点击进行编辑</div>
              </div>
            </a-col>
            <a-col :lg="6" style="text-align: right"
              ><a-button type="primary" @click="addKcjsHandle(1)">提交</a-button
              ><a-button type="primary" style="margin-left: 10px" @click="handleYinyong(jxdgInfo)">引用</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"
                @change="jxdgChange"
                :forceAcceptVerify="true"
              ></j-upload
            ></span>
          </span>
          <span style="float: right">
            <a-button type="primary" style="margin-left: 10px" @click="downLoad(jxdgInfo.filePath)">下载</a-button>
            <a-button type="danger" style="margin-left: 10px" @click="fileRemove(jxdgInfo, 1)">删除</a-button>
            <a-button type="primary" style="margin-left: 10px" @click="openPdf(jxdgInfo)">预览大纲</a-button>
          </span>
        </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.jxrlFilePath"
                maxCount="1"
                accept=".doc,.docx,.pdf"
                @change="jxrlChange"
                :forceAcceptVerify="true"
              ></j-upload
            ></span>
          </span>
          <span style="float: right">
            <a-button type="primary" style="margin-left: 10px" @click="downLoad(jxdgInfo.jxrlFilePath)">下载</a-button>
            <a-button type="danger" style="margin-left: 10px" @click="fileRemove(jxdgInfo, 2)">删除</a-button>
            <a-button type="primary" style="margin-left: 10px" @click="openJxrlPdf(jxdgInfo)">预览日历</a-button>
          </span>
        </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">{{ (current - 1) * pageSize + index + 1 }}.{{ item.question }}</span>
                <span style="float: left; margin-left: 10px" v-if="item.sffb == '0'">
                  <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>
                <span style="float: right; " v-if="item.sffb == '0'">
                  <a-button type="primary" @click="handleFabu(item, '1')">发布</a-button> 
                </span>
                <span style="float: left" v-if="item.sffb == '1'">
                  <a @click="handleFabu(item, '0')" style="margin-left: 5px; padding: 0px 8px" title="撤回"
                    ><Icon icon="ant-design:rollback-outlined"
                  /></a>
                </span>
              </a-col>
              <a-col :span="24"
                ><span><Icon icon="ant-design:caret-right-outlined" />答：<div v-html="item.answer"></div> </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> -->
    </div>
    <div v-if="!showYl">
      <div>
        <a-button type="primary" @click="handleYulan(1)" preIcon="ant-design:plus-outlined" style="margin-left: 8px"> 返回</a-button>
        <studentZyxx/>
      </div>
    </div>

    <ZyCjwtModal ref="ZyCjwtModalPage" @success="handleCjwtOk" />
    <ZyJxdgListModal ref="ZyJxdgListModalPage" @success="getKcjsJxdg" />
    <studentZyxxModal ref="studentZyxxModalPage" />
  </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';
import studentZyxxModal from '/@/views/site/studentWdkc/studentZyxxModal.vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import studentZyxx from '/@/views/site/studentWdkc/studentZyxx.vue';

const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;

//当前路由信息
const { currentRoute } = useRouter();
const { query } = unref(currentRoute);
const { rwbh, xqxn, teano } = query; //获取传递参数
const APagination = Pagination;
const current = ref<number>(1);
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 studentZyxxModalPage = ref();
const cjwtSource = ref([]);
let kcjsShow = ref<boolean>(false);
const showYl = ref<boolean>(true);
let router = useRouter();
const { createMessage } = useMessage();
const jxdgInfo = ref({
  id: '',
  filePath: null,
  jxrlFilePath: null,
  kcjs: '',
  pdfPath: null,
  jxrlPdfPath: null,
});
function handleEditKcjs(type) {
  console.log(`🚀 ~ handleEditKcjs ~ type:`, type);
  if (type == 1) {
    kcjsShow.value = true;
  } else {
    kcjsShow.value = false;
  }
}

//预览
function handleYulan(type) {
  if (type == 1) {
    showYl.value = true;
  } else if (type == 0) {
    showYl.value = false;
  }
}

//教学大纲提交附件
function jxdgChange(record) {
  console.log(`🚀 ~ jxdgChange ~ record:`, record);
  var model = { id: jxdgInfo.value.id, filePath: record, rwbh, xqxn };
  defHttp.post({ url: '/zyJxdg/zyJxdg/jxdgScfj', params: model }).then((res) => {
    getKcjsJxdg();
  });
}

function downLoad(file) {
  if (file) {
    let url = getFileAccessHttpUrl(file);
    if (url) {
      window.open(url);
    }
  } else {
    createMessage.warning('暂无文件或文件上传中');
  }
}
//删除附件
function fileRemove(record, type) {
  var model = { id: record.id, type: type };
  console.log(`🚀 ~ fileRemove ~ model:`, model);
  defHttp.post({ url: '/zyJxdg/zyJxdg/deleteJxdgJxrl', params: model }).then((res) => {
    getKcjsJxdg();
  });
}
function jxrlChange(record) {
  console.log(`🚀 ~ jxdgChange ~ record:`, record);
  var model = { id: jxdgInfo.value.id, jxrlFilePath: record, rwbh, xqxn };
  defHttp.post({ url: '/zyJxdg/zyJxdg/jxrlScfj', params: model }).then((res) => {
    getKcjsJxdg();
  });
}

function handleZtyl(record) {
  studentZyxxModalPage.value.disableSubmit = true;
  studentZyxxModalPage.value.edit(record);
}

//引用功能
function handleYinyong(record) {
  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);
}
/**
 * 常见问题发布
 */
function handleFabu(record, type) {
  var model = { id: record.id, sffb: type };
  console.log(`🚀 ~ fileRemove ~ model:`, model);
  defHttp.post({ url: '/zyCjwt/zyCjwt/edit', params: model }).then((res) => {
    cjwtData();
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({ id: record.id }, handleCjwtOk2);
}

function openPdf(record) {
  if (record.pdfPath) {
    var url2 = getFileAccessHttpUrl(record.pdfPath);
    let url = baseApiUrl + '/generic/web/viewer.html?file=' + encodeURIComponent(url2);
    window.open(url, '_blank');
  } else {
    createMessage.warning('暂无文件或文件上传中');
  }
}

function openJxrlPdf(record) {
  if (record.jxrlPdfPath) {
    var url2 = getFileAccessHttpUrl(record.jxrlPdfPath);
    let url = baseApiUrl + '/generic/web/viewer.html?file=' + encodeURIComponent(url2);
    window.open(url, '_blank');
  } else {
    createMessage.warning('暂无文件或文件上传中');
  }
}

//常见问题回调刷新
function handleCjwtOk() {
  // console.log('--------cjwt ok -----------')
  cjwtData();
}

//常见问题回调刷新
function handleCjwtOk2() {
  total.value = 1;
  handlePageChange(1);
}

//常见问题新增翻页
function handlePageChange(page: number) {
  current.value = page;
  cjwtData();
}

function cjwtData() {
  defHttp
    .get({
      url: '/zyCjwt/zyCjwt/list',
      params: { pageSize: 3, pageNo: current.value, rwbh: rwbh, xqxn: xqxn,  column: 'createTime', order: 'desc' },
    })
    .then((res) => {
      // console.log(`🚀 ~ defHttp.get ~ res:`, res)
      cjwtSource.value = res.records;
      total.value = res.total;
      pageNo.value = res.pages;
      current.value = res.current;
      // console.log(`🚀 ~ defHttp.get ~ cjwtSource:`, cjwtSource)
    });
}
//获取课程简介和教学大纲内容
function getKcjsJxdg() {
  console.log(`🚀 ~111111111111111:`);
  defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: rwbh, xqxn: xqxn, } }).then((res) => {
    console.log(`🚀 ~2222222222222222:`, 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);
      kcjsShow.value = false;
      getKcjsJxdg();
    });
  } else {
    if (type == '1') {
      model.filePath = '';
    }
    defHttp.post({ url: '/zyJxdg/zyJxdg/add', params: model }).then((res) => {
      console.log(`🚀 ~ defHttp.post 222~ res:`, res);
      kcjsShow.value = false;
      getKcjsJxdg();
    });
  }
}
//进入就加载
onMounted(() => {
  getKcjsJxdg();
  cjwtData();
});
</script>
<style lang="less" scoped>
</style>