DBSD_ZJPT/jeecgboot-vue3/src/views/bl/xxhbjwxtjxrw/XzkckhclList copy.vue

686 lines
23 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="p-2">
<div v-if="sfxk == 0">
<div style="text-align: center">
<img src="../../../assets/images/Course-selection.png" style="margin-top:130px; width:600px" />
<div style="color:#606266; font-weight: 700; font-size: 20px; margin-top:20px">您还没有选课,请先选择课程</div>
<a-button type="primary" style="margin-left: 10px; margin-top: 10px" @click="handleXuanke">选课</a-button>
</div>
</div>
<!-- 选课信息 -->
<div v-if="sfxk == 1">
<!-- <div class="jeecg-basic-table-form-container" >
<a-form class="query-criteria">
<a-button type="primary" style="margin-left: 10px;margin-bottom: 15px; " @click="handleFanhui">查看材料</a-button>
</a-form>
</div> -->
<BasicTable @register="registerTable" :rowSelection="rowSelection" >
<!--插槽:table标题-->
<template #tableTitle>
<span class="seleciton-line">1</span> <span class="selection-title">已选课程</span>
-{{selectedRowKeys}}-
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button >批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!-- <a-table :columns="columns2" :data-source="checkData"
v-model:current="paginationYxkcProp.current"
key="id"
:total="paginationYxkcProp.total"
:pagination="paginationYxkcProp"
:row-selection="rowSelection"
@change="onPageYxkcChange"
@onSelect="handleTable2SelectRowChange"
>
<template #title><span class="seleciton-line">1</span> <span class="selection-title">已选课程</span></template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a @click="handleView(record)">查看</a>
</template>
</template>
</a-table> -->
<div class="jeecg-basic-table-form-container" style="margin-top:10px;">
<a-form ref="formRef" @keyup.enter.native="searchQuery2" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" class="query-criteria">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="zjxnxq">
<template #label><span title="学年学期" class="xn-title">学年学期</span></template>
<j-dict-select-tag placeholder="请选择学年学期" v-model:value="queryParam2.zjxnxq" :dictCode="`v_xqxn,xqxn,xqxn,true order by sort asc`" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="kkyxmc">
<template #label><span title="开课单位名称" class="xn-title">开课单位名称</span></template>
<j-dict-select-tag
placeholder="请选择开课单位名称"
v-model:value="queryParam2.kkyxmc"
:dictCode="`v_kkdw,kkyxmc,kkyxmc`"
allow-clear
/>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="zhunaye">
<template #label><span title="所属专业" class="xn-title">所属专业</span></template>
<j-dict-select-tag
placeholder="请选择所属专业"
v-model:value="queryParam2.zhuanye"
:dictCode="`v_zhuanye,dept_name,dept_name`"
allow-clear
/>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="kcmc">
<template #label><span title="任课教师" class="xn-title">任课教师</span></template>
<j-input placeholder="请输入任课教师" v-model:value="queryParam2.teaxm" allow-clear></j-input>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="zhicheng">
<template #label><span title="职称" class="xn-title">职称</span></template>
<j-dict-select-tag
placeholder="请选择职称"
v-model:value="queryParam2.zhicheng"
:dictCode="`v_zhicheng,zhicheng,zhicheng`"
allow-clear
/>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="kcmc">
<template #label><span title="课程名称" class="xn-title">课程名称</span></template>
<j-input placeholder="请输入课程名称" v-model:value="queryParam2.kcmc" allow-clear></j-input>
</a-form-item>
</a-col>
<a-col :span="12" style="text-align: right">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery2">查询</a-button>
</a-col>
</a-row>
</a-form>
</div>
<a-table
:columns="columns2"
:data-source="dataList"
v-model:current="paginationProp.current"
:total="paginationProp.total"
:pagination="paginationProp"
@change="onPageChange"
>
<template #title><span class="seleciton-line">1</span> <span class="selection-title">可选课程</span></template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a @click="handleXUanze(record)" v-if="record.sfxk == '0'">选择</a>
<a disabled v-if="record.sfxk == '1'">已选择</a>
</template>
</template>
</a-table>
<!-- <div style="text-align: right">
<a-button type="primary" style="margin-left: 10px; margin-top: 10px" @click="handleSubmit">确认</a-button>
<a-button type="primary" style="margin-left: 10px; margin-top: 10px" @click="handleFanhui">返回</a-button>
</div> -->
</div>
<!-- 成绩单 -->
<!-- <div v-show="sfxk == 2">
<CjdForm ref="cjdFormModal" @callback="init"></CjdForm>
</div> -->
<!-- 考核评价材料 -->
<!-- <div v-show="sfxk == 3">
<XxhbjwxtscwjxxList ref="khpjclFormModal" @callback="init"></XxhbjwxtscwjxxList>
</div> -->
<!-- 学生原始材料 -->
<!-- <div v-show="sfxk == 4">
<XxhbjwxtxsmdList3 ref="xsysclFormModal" @callback="init" @handleXq="handleXsysclxq"></XxhbjwxtxsmdList3>
</div> -->
<!-- 学生原始材料-详情 -->
<!-- <div v-show="sfxk == 5">
<XxhbjwxtxsmdList4 ref="xsysclXqFormModal" @callback="handleXsyscl"></XxhbjwxtxsmdList4>
</div> -->
<!-- 学生列表查看 -->
<div v-show="sfxk == 6">
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" class="query-criteria">
<a-row :gutter="24">
<a-col :span="24" style="margin-bottom: 10px;">
<!-- <div >
<a-breadcrumb>
<a-breadcrumb-item><a class="mbxtitle" @click="handleFanhui">课程考核材料</a></a-breadcrumb-item>
<a-breadcrumb-item><a class="mbxtitle" @click="handleFanhui">已选课程</a></a-breadcrumb-item>
<a-breadcrumb-item><a class="mbxtitle" @click="handleFanhui" v-if="jxrwInfo.value">{{jxrwInfo?.value?.kcmc}}</a></a-breadcrumb-item>
<a-breadcrumb-item><a class="mbxtitle" @click="handleFanhui">学生原始材料</a></a-breadcrumb-item>
<a-breadcrumb-item><span class="mbxtitle">详情</span></a-breadcrumb-item>
</a-breadcrumb>
</div> -->
<a-button type="primary" @click="handleFanhui">返回</a-button>
</a-col>
</a-row>
</a-form>
</div>
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" class="query-criteria">
<a-row :gutter="24" v-if="jxrwInfo?.value">
<a-col :span="12"><span class="seleciton-line">1</span> <span class="selection-title">课程考核材料详情 </span> </a-col>
<a-col :gutter="24">
<div style="text-align: center; font-size:24px; font-weight: 700; line-height: 50px" v-if="jxrwInfo?.value">
{{ jxrwInfo?.value.xnxqmc}}《{{ jxrwInfo?.value.kcmc }}》
</div>
<div v-if="jxrwInfo.value">
<div style="padding-left:16px;font-size:16px; font-weight: 700">概要信息</div>
<a-row style="line-height: 30px">
<a-col :xl="8" :sm="12" :md="8">
<span class="header-title" style="margin-left: 15px">开课单位</span> <span class="header-title">{{ jxrwInfo?.value.kkyxmc }}</span>
</a-col>
<a-col :xl="8" :sm="12" :md="8">
<span class="header-title" style="margin-left: 15px">课程类别</span> <span class="header-title">{{ jxrwInfo?.value.kclb }}</span>
</a-col>
<a-col :xl="8" :sm="12" :md="8">
<span class="header-title" style="margin-left: 15px">课程名称</span> <span class="header-title">{{ jxrwInfo?.value.kcmc }}</span>
</a-col>
<a-col :xl="8" :sm="12" :md="8">
<span class="header-title" style="margin-left: 15px">课程负责人</span> <span class="header-title">{{ jxrwInfo?.value.teaxm }}</span>
</a-col>
<a-col :xl="8" :sm="12" :md="8">
<span class="header-title" style="margin-left: 15px">选课人数</span> <span class="header-title">{{ jxrwInfo?.value.jxbrs }}</span>
</a-col>
</a-row>
</div>
</a-col>
</a-row>
</a-form>
</div>
<a-tabs v-model:activeKey="activeKey" type="card" @change="onChangeTab" style="background-color: white;">
<a-tab-pane key="1" tab="学生成绩">
<XscjList ref="cjdFormModal" @callback="init"></XscjList>
</a-tab-pane>
<a-tab-pane key="2" tab="考核评价材料" :forceRender="true">
<KhpjclList ref="khpjclFormModal" @callback="init"></KhpjclList>
</a-tab-pane>
<a-tab-pane key="3" tab="学生原始材料" :forceRender="true">
<div v-show="sfxk2 != 5">
<XsysclList ref="xsysclFormModal" @callback="init" @handleXq="handleXsysclxq"></XsysclList>
</div>
<div v-show="sfxk2 == 5">
<XsysclxqList ref="xsysclXqFormModal" @callback="handleXsyscl2"></XsysclxqList>
</div>
</a-tab-pane>
<a-tab-pane key="4" tab="智慧教学信息" :forceRender="true">
<div v-show="zhjxxx == 1">
<Xxhbfxcjb0016List ref="Xxhbfxcjb0016Modal" @callback="handleZhjxzx" ></Xxhbfxcjb0016List>
</div>
<div v-show="zhjxxx == 2">
<div style="text-align: right;margin-right: 20px;"><a-button type="primary" @click="zhjxxx =1">返回</a-button></div>
<Xxhbfxcjmxb0015List ref="Xxhbfxcjmxb0015Modal"></Xxhbfxcjmxb0015List>
</div>
</a-tab-pane>
</a-tabs>
</div>
<!-- 表单区域 -->
<XxhbjwxtjxrwModal ref="registerModal" @success="handleSuccess"></XxhbjwxtjxrwModal class="table-style">
</div>
</template>
<script lang="ts" name="xxhbjwxtjxrw-xxhbjwxtjxrw" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, columns2, columns3, superQuerySchema } from './Xxhbjwxtjxrw.data';
import { zjList, list, deleteXkxxOne, batchDelete, getImportUrl, getExportUrl } from './Xxhbjwxtjxrw.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import XxhbjwxtjxrwModal from './components/XxhbjwxtjxrwModal.vue';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import CjdForm from './components/CjdForm.vue';
import XxhbjwxtscwjxxList from '/@/views/bl/xxhbjwxtscwjxx/XxhbjwxtscwjxxList.vue';
import XxhbjwxtxsmdList3 from '/@/views/bl/xxhbjwxtxsmd/XxhbjwxtxsmdList3.vue';
import XxhbjwxtxsmdList4 from '/@/views/bl/xxhbjwxtxsmd/XxhbjwxtxsmdList4.vue';
import XscjList from './components/XscjList.vue';
import KhpjclList from '/@/views/bl/xxhbjwxtscwjxx/KhpjclList.vue';
import XsysclList from '/@/views/bl/xxhbjwxtxsmd/XsysclList.vue';
import XsysclxqList from '/@/views/bl/xxhbjwxtxsmd/XsysclxqList.vue';
import Xxhbfxcjb0016List from '/@/views/bl/xxhbfxcj/Xxhbfxcjb0016List.vue';
import Xxhbfxcjmxb0015List from '/@/views/bl/xxhbfxcj/Xxhbfxcjmxb0015List.vue';
const formRef = ref();
const formRef3 = ref();
const cjdFormModal = ref();
const khpjclFormModal = ref();
const xsysclFormModal = ref();
const xsysclXqFormModal = ref();
const queryParam = reactive<any>({});
const queryParam2 = ref<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const Xxhbfxcjb0016Modal = ref();
const Xxhbfxcjmxb0015Modal = ref();
const userStore = useUserStore();
const emit = defineEmits(['callback']);
const sfxk = ref<number>(0);
const sfxk2 = ref<number>(0);
const zhjxxx = ref<number>(1);
const checkData = ref<any>([]);
const dataList = ref<any>([]);
import { Pagination } from 'ant-design-vue';
const jxrwInfo = reactive<any>({});
const APagination = Pagination;
const { createMessage } = useMessage();
const activeKey = ref('1');
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
api: zjList,
columns: columns3,
canResize: false,
useSearchForm: false,
// actionColumn: {
// width: 320,
// fixed: 'right',
// },
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: '教务系统教学任务',
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess,
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =tableContext;
const labelCol = reactive({
xs: 24,
sm: 8,
xl: 8,
xxl: 8,
});
const wrapperCol = reactive({
xs: 24,
sm: 16,
});
const paginationProp = ref<any>({
total: 1,
current: 1,
pageSize: 10,
pageNo: 1,
});
const paginationYxkcProp = ref<any>({
total: 1,
current: 1,
pageSize: 10,
pageNo: 1,
});
function handleTable2SelectRowChange(event) {
console.log('--------rowchange----->',event);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
// await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
//成绩单
function handleCjd(record) {
sfxk.value = 2;
cjdFormModal.value.init(record);
}
//考核评价材料
function handleKhpjcl(record) {
sfxk.value = 3;
khpjclFormModal.value.init(record);
}
//学生原始材料
function handleXsyscl(record) {
sfxk.value = 4;
xsysclFormModal.value.init(record);
}
//学生原始材料
function handleXsyscl2(record) {
sfxk2.value = 0;
}
//选课
function handleXuanke() {
sfxk.value = 1;
searchQuery2();
}
function handleXsysclxq(record) {
console.log('👨handleXsysclxq', record);
sfxk2.value = 5;
xsysclXqFormModal.value.init(record);
}
//返回首页
function handleFanhui() {
init2();
}
//选课确认
function handleQueren(record) {
console.log('😺', record);
var aaa = checkData.value.includes(record);
if (aaa) {
createMessage.warn('不能重复选择数据!');
return;
}
console.log('😇aaaa', aaa);
checkData.value.push(record);
}
//选课删除
async function handleDel(record) {
await deleteXkxxOne({ id: record.id }, xtsuccess);
}
//智慧教学中兴详情
function handleZhjxzx(record){
console.log("🚀 ~ handleZhjxzx ~ record:", record)
zhjxxx.value = 2;
Xxhbfxcjmxb0015Modal.value.init(record);
}
function xtsuccess() {
//获取是否有选课信息
defHttp.get({ url: '/zjXkxx/zjXkxx/list', params: { pageNo: paginationYxkcProp.value.current,pageSize:paginationYxkcProp.value.pageSize } }).then((res) => {
console.log('🧛', res);
checkData.value = res.records;
if(res.current>res.pages){
paginationYxkcProp.value.current =res.pages
xtsuccess()
}else{
paginationYxkcProp.value.current = res.current;
}
paginationYxkcProp.value.total = res.total;
});
searchQuery2();
}
//翻页方法
async function onPageChange(record) {
console.log('👬', record);
paginationProp.value.current = record.current;
paginationProp.value.pageSize = record.pageSize;
console.log("🚀 ~ onPageChange ~ paginationProp.value.current:", paginationProp.value)
await searchQuery2();
}
//翻页方法
async function onPageYxkcChange(record) {
paginationYxkcProp.value.current = record.current;
paginationYxkcProp.value.pageSize = record.pageSize;
await init();
}
//下载本地文件
function textDown(type, downame) {
var a = document.createElement('a'); //创建一个<a></a>标签
a.href = '/download/' + type + '.docx';
//给a标签的href属性值加上地址注意这里是绝对路径不用加 点.
a.download = downame + '.docx';
//设置下载文件文件名,这里加上.xlsx指定文件类型pdf文件就指定.fpd即可
a.style.display = 'none'; // 障眼法藏起来a标签
document.body.appendChild(a);
// 将a标签追加到文档对象中
a.click(); //模拟点击了a标签会触发a标签的href的读取浏览器就会自动下载了
a.remove();
// 一次性的用完就删除a标签
}
//选课提交
async function handleXUanze(record) {
record.id = null;
console.log('😰record----------', record);
await defHttp
.post({
url: '/zjXkxx/zjXkxx/add',
params: record,
})
.then((res) => {
console.log('🤛', res);
xtsuccess();
});
}
//选课提交
function handleSubmit() {
var list = checkData.value;
if (list.length == 0) {
createMessage.warn('请选择数据!');
}
defHttp
.post({
url: '/zjXkxx/zjXkxx/addBatch',
data: list,
})
.then((res) => {
console.log('🤛', res);
init();
});
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
emit('callback', record);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 查看
*/
function handleView(record) {
jxrwInfo.value = record;
cjdFormModal.value.init(jxrwInfo.value); //成绩单
// khpjclFormModal.value.init(record); //考核评价材料
// xsysclFormModal.value.init(record); //学生原始材料
sfxk.value = 6;
sfxk2.value = 0;
activeKey.value = '1';
}
function onChangeTab(tab) {
console.log('🎒', tab);
if(tab==2){
khpjclFormModal.value.init(jxrwInfo.value); //考核评价材料
}else if(tab==3){
xsysclFormModal.value.init(jxrwInfo.value); //学生原始材料
}else if(tab == 4){
zhjxxx.value = 1;
Xxhbfxcjb0016Modal.value.init(jxrwInfo.value);
}
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '查看',
onClick: handleView.bind(null, record),
},
// {
// label: '学生成绩',
// onClick: handleCjd.bind(null, record),
// },
// {
// label: '考核评价材料',
// onClick: handleKhpjcl.bind(null, record),
// },
// {
// label: '学生原始材料',
// onClick: handleXsyscl.bind(null, record),
// },
];
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 查询
*/
function searchQuery2() {
queryParam2.value.pageNo = paginationProp.value.current;
console.log("🚀 ~ searchQuery2 ~ paginationProp:", paginationProp)
queryParam2.value.fileShztmc = '审核通过';
console.log("🚀 ~ searchQuery2 ~ queryParam2:", queryParam2)
defHttp.get({ url: '/xxhbjwxtjxrw/xxhbjwxtjxrw/list', params: { pageNo: paginationProp.value.current,pageSize:paginationProp.value.pageSize, ...queryParam2.value } }).then((res) => {
dataList.value = res.records;
paginationProp.value.total = res.total;
// paginationProp.value.current = res.pageNo;
});
}
/**
* 重置
*/
function searchReset() {
formRef3.value.resetFields();
selectedRowKeys.value = [];
//刷新数据
reload();
}
function init() {
//获取是否有选课信息
defHttp.get({ url: '/zjXkxx/zjXkxx/list', params: { pageNo: paginationYxkcProp.value.current,pageSize:paginationYxkcProp.value.pageSize } }).then((res) => {
sfxk.value = 999;
checkData.value = res.records;
paginationYxkcProp.value.total = res.total;
paginationYxkcProp.value.current = res.current;
});
}
function init2() {
//获取是否有选课信息
defHttp.get({ url: '/zjXkxx/zjXkxx/list', params: { pageNo: paginationYxkcProp.value.current,pageSize:paginationYxkcProp.value.pageSize } }).then((res) => {
console.log('🧛', res);
if (res.records.length == 0) {
sfxk.value = 0;
checkData.value = [];
} else {
sfxk.value = 1;
checkData.value = res.records;
paginationYxkcProp.value.total = res.total;
paginationYxkcProp.value.current = res.current;
searchQuery2();
}
});
}
// 自动请求并暴露内部方法
onMounted(() => {
init2();
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center;
}
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
.query-criteria {
padding-top: 22px;
border: 1px solid #eaeef6;
border-radius: 4px;
}
.query-criteria:hover {
border: 1px solid #c5d8ff;
box-shadow: 2px 2px 10px 2px #e8ecf4;
border-radius: 4px;
}
.table-style {
padding: 10px;
background: #fff;
border: 1px solid #eaeef6;
border-radius: 4px;
}
.table-style:hover {
border: 1px solid #e8ecf4;
box-shadow: 2px 2px 10px 2px #e8ecf4;
border-radius: 4px;
}
.xn-title {
font-size: 16px;
font-weight: 700;
}
.selection-title {
font-size: 18px;
font-weight: 700;
padding-left: 10px;
}
.seleciton-line {
background: #1890ff;
border-radius: 10px;
color: #1890ff;
}
.mbxtitle {
font-size: 22px;
line-height: 22px;
}
</style>