295 lines
8.9 KiB
Vue
295 lines
8.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="jeecg-basic-table-form-container">
|
||
<a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||
<a-row :gutter="24">
|
||
<a-col :span="24">
|
||
<a-button type="primary" @click="handleZgtpf">主观题评分</a-button>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item label="学生姓名">
|
||
<a-input placeholder="请输入学生姓名" v-model:value="queryParam.userName"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item label="学生学号">
|
||
<a-input placeholder="请输入学生学号" v-model:value="queryParam.userId"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item label="状态">
|
||
<a-select placeholder="请选择" v-model:value="queryParam.isFinished">
|
||
<a-select-option value="">全部</a-select-option>
|
||
<a-select-option value="0">未完成</a-select-option>
|
||
<a-select-option value="1">已完成</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||
<a-col :lg="6">
|
||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
|
||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"
|
||
style="margin-left: 8px"> 导出</a-button>
|
||
<!-- <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> -->
|
||
</a-col>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<a-spin :spinning="loadingCeshi">
|
||
<!--引用表格-->
|
||
<BasicTable @register="registerTable">
|
||
<!--操作栏-->
|
||
<template #action="{ record }">
|
||
<TableAction :actions="getTableAction(record)" />
|
||
</template>
|
||
</BasicTable>
|
||
</a-spin>
|
||
<!-- 表单区域 -->
|
||
<WjxWjxxTmlbDjjgModal ref="WjxWjxxTmlbDjjgModalPage" @success="reload"></WjxWjxxTmlbDjjgModal>
|
||
<ZgtpfModal ref="ZgtpfModalPage" @success="reload"></ZgtpfModal>
|
||
|
||
<a-modal :title="'违规信息'" :visible="wgxxOpen" @ok="wgxxOpen = false" @cancel="wgxxOpen = false" cancelText="关闭">
|
||
<div class="timeline">
|
||
<div v-for="item of wgxxData" :key="item.id" class="timeline-item">
|
||
<div class="timeline-point"></div>
|
||
<div class="timeline-content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" name="wjxWjxx-wjxWjxx" setup>
|
||
import { ref, reactive, defineExpose, unref , computed, onMounted, onUnmounted} from 'vue';
|
||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { useListPage } from '/@/hooks/system/useListPage';
|
||
import { columns } from './WjxWjxxTmlbDjjgs.data';
|
||
import { list, getExportUrl } from './WjxWjxxTmlbDjjgs.api';
|
||
import WjxWjxxTmlbDjjgModal from '/@/views/kc/wjxWjxx/components/WjxWjxxTmlbDjjgModal.vue';
|
||
import ZgtpfModal from '/@/views/kc/wjxWjxx/components/ZgtpfModal.vue';
|
||
|
||
const wgxxOpen = ref(false)
|
||
const wgxxData = ref([])
|
||
const queryParam = ref<any>({});
|
||
const isFinished = ref<string>('');
|
||
const toggleSearchStatus = ref<boolean>(false);
|
||
const WjxWjxxTmlbDjjgModalPage = ref();
|
||
const ZgtpfModalPage = ref();
|
||
const sjxxInfo = ref<any>({});
|
||
const loadingCeshi = ref<boolean>(false);
|
||
|
||
// 定义一个响应式的宽度变量
|
||
const actionColumnWidth = ref(220);
|
||
|
||
// 计算是否为小屏设备
|
||
const isSmallScreen = computed(() => window.innerWidth < 600); // 根据需要调整断点
|
||
|
||
// 动态更新宽度的函数
|
||
const updateWidth = () => {
|
||
actionColumnWidth.value = isSmallScreen.value ? 220 : 220;
|
||
};
|
||
|
||
// 当组件挂载时添加事件监听器
|
||
onMounted(() => {
|
||
window.addEventListener('resize', updateWidth);
|
||
updateWidth(); // 初始化调用一次
|
||
});
|
||
|
||
// 当组件卸载时移除事件监听器
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', updateWidth);
|
||
});
|
||
|
||
//注册table数据
|
||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||
tableProps: {
|
||
title: '',
|
||
api: list,
|
||
columns,
|
||
canResize: false,
|
||
useSearchForm: false,
|
||
actionColumn: {
|
||
width: actionColumnWidth,
|
||
fixed: 'right',
|
||
},
|
||
beforeFetch: (params) => {
|
||
(params.column = ''), (params.order = ''); //新生成的默认不带排序
|
||
return Object.assign(params, queryParam.value);
|
||
},
|
||
},
|
||
exportConfig: {
|
||
name: '学生测验信息',
|
||
url: getExportUrl,
|
||
params: () => {
|
||
return Object.assign({}, queryParam.value);
|
||
},
|
||
},
|
||
});
|
||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
|
||
tableContext;
|
||
const labelCol = reactive({
|
||
xs: { span: 24 },
|
||
sm: { span: 7 },
|
||
});
|
||
const wrapperCol = reactive({
|
||
xs: { span: 24 },
|
||
sm: { span: 16 },
|
||
});
|
||
|
||
/**
|
||
* 答卷详情
|
||
*/
|
||
function handlePeizhiDjjg(record: Recordable) {
|
||
WjxWjxxTmlbDjjgModalPage.value.disableSubmit = true;
|
||
WjxWjxxTmlbDjjgModalPage.value.edit(record.id, false);
|
||
}
|
||
|
||
function handleZgypf(record: Recordable) {
|
||
ZgtpfModalPage.value.disableSubmit = true;
|
||
ZgtpfModalPage.value.edit(record, false);
|
||
}
|
||
|
||
function handleZgtpf() {
|
||
console.log('👩🦰', sjxxInfo);
|
||
console.log('👩🦰', sjxxInfo.value.vid);
|
||
ZgtpfModalPage.value.disableSubmit = true;
|
||
ZgtpfModalPage.value.edit({vid:sjxxInfo.value.vid}, false);
|
||
}
|
||
|
||
function handleHqjg(record){
|
||
// console.log(record);
|
||
// defHttp.post({url:'/wjxDjxx/updateDjjg',params:record}).then(res=>{
|
||
// console.log('-->',res)
|
||
// reload();
|
||
// })
|
||
loadingCeshi.value = true;
|
||
defHttp.post({url:'/wjxDjxx/getDjjg',params:record}).then(res=>{
|
||
// console.log('-->',res)
|
||
loadingCeshi.value = false;
|
||
reload();
|
||
})
|
||
}
|
||
|
||
async function handleWeiGui(info){
|
||
wgxxData.value = []
|
||
let res = await defHttp.get({ url: '/wjxDjxxFzbtj/wjxDjxxFzbtj/list', params: { vid: info.vid, createBy: info.userId, pageNo: 1, pageSize: -1 } });
|
||
console.log("🎅 ~ handleWeiGui ~ res:", res)
|
||
wgxxData.value = res.records
|
||
wgxxOpen.value = true
|
||
}
|
||
|
||
/**
|
||
* 操作栏
|
||
*/
|
||
function getTableAction(record) {
|
||
if (record.commitTime != null && record.commitTime != '') {
|
||
return [
|
||
{
|
||
label: '答卷结果',
|
||
onClick: handlePeizhiDjjg.bind(null, record),
|
||
},
|
||
{
|
||
label: '违规信息',
|
||
onClick: handleWeiGui.bind(null, record),
|
||
ifShow:record.zbcs > 0
|
||
},
|
||
// {
|
||
// label: '获取结果',
|
||
// onClick: handleHqjg.bind(null, record),
|
||
// ifShow: record.answerSeconds == 0,
|
||
// },
|
||
{
|
||
label: '主观题评分',
|
||
onClick: handleZgypf.bind(null, record),
|
||
ifShow: record.sfxysdpy == 1,
|
||
},
|
||
];
|
||
} else {
|
||
return [];
|
||
}
|
||
}
|
||
|
||
function init(record, flag) {
|
||
console.log('👨🦲', record);
|
||
sjxxInfo.value = record;
|
||
queryParam.value.id = record.id;
|
||
queryParam.value.rwbh = record.rwbh;
|
||
queryParam.value.isFinished = flag;
|
||
isFinished.value = flag;
|
||
reload();
|
||
}
|
||
|
||
defineExpose({
|
||
init,
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.jeecg-basic-table-form-container {
|
||
.table-page-search-submitButtons {
|
||
display: block;
|
||
margin-bottom: 24px;
|
||
white-space: nowrap;
|
||
}
|
||
.query-group-cust {
|
||
width: calc(50% - 15px);
|
||
min-width: 100px !important;
|
||
}
|
||
.query-group-split-cust {
|
||
width: 30px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 40px; /* 调整左侧内边距以适应新的时间点位置 */
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 2px; /* 灰线变细 */
|
||
height: calc(100% - 40px);
|
||
background-color: #dfe1e6;
|
||
top: 8px; /* 确保灰线上下有适当的间距 */
|
||
bottom: 8px; /* 确保灰线下方也有相同的间距 */
|
||
left: 55px; /* 让灰线从时间点的中心穿过：14px (时间点左边距) + 6px (时间点半径) = 20px */
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-item {
|
||
margin-top: 25px;
|
||
margin-bottom: 25px;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.timeline-point {
|
||
width: 10px; /* 圆点大小 */
|
||
height: 10px; /* 圆点大小 */
|
||
background-color: #1890ff;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 4px; /* 保持时间点的垂直位置以对齐文本 */
|
||
left: 17px; /* 设置时间点距离左边界的距离，使其中心与灰线对齐 */
|
||
transform: translateX(-50%); /* 将时间点中心对齐灰线 */
|
||
z-index: 2;
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); /* 添加阴影效果 */
|
||
}
|
||
|
||
.timeline-content {
|
||
padding-left: 28px; /* 减少左侧内边距，使内容更贴近时间点 */
|
||
line-height: 1.5715; /* 设置行高，确保文本对齐 */
|
||
}
|
||
</style>
|