Files
pengchen-exam-vue/src/views/task/exam/components/steps/step1/index.vue

274 lines
7.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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>
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="题型" prop="spName">
<el-select v-model="queryParams.spName" placeholder="请选择题型" clearable class="!w-240px">
<el-option
v-for="item in CourseOptions"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openEdit('create')"
v-hasPermi="['system:sms-channel:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增</el-button
>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<!-- <el-table-column label="方案ID" align="center" prop="taskId" /> -->
<el-table-column label="题型" align="center" prop="spName" />
<el-table-column label="难度" align="center" prop="quLevel">
<template #default="scope">
<span v-if="scope.row.quLevel === '0'">简单</span>
<span v-else-if="scope.row.quLevel === '1'">一般</span>
<span v-else-if="scope.row.quLevel === '2'">困难</span>
<span v-else-if="scope.row.quLevel === '3'">全部</span>
<span v-else>未知</span>
</template>
</el-table-column>
<!-- <el-table-column label="关键字" align="center" prop="keywords" /> -->
<el-table-column label="试题数量" align="center" prop="quNumbers"/>
<el-table-column label="每题分数" align="center" prop="quScores"/>
<el-table-column label="小计分数" align="center" prop="subtotalScore"/>
<el-table-column label="试题别名" align="center" prop="quTitle"/>
<el-table-column label="别名排序" align="center">
<template #default="scope">
<el-input-number
v-model="scope.row.sort"
placeholder="请输入排序"
size="small"
:min="0"
style="width: 100px"
@change="(val) => handleSortChange(scope.row, val)"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openEdit('update', scope.row)"
v-hasPermi="['system:sms-channel:update']"
>
查看
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.schemeId)"
v-hasPermi="['system:sms-channel:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 总分展示区域 -->
<div style="display: flex; justify-content: flex-end; padding: 5px; margin: 10px 0; font-weight: bold;">
总分{{ totalScore }}
</div>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<scheme-edit v-model="showEdit" v-if="showEdit" :form-data="props.formData" :task-specialty="props.taskSpecialty" :task-Id="props.taskId" ref="taskEditRef" @done="reload"/>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as SmsChannelApi from '@/api/system/scheme';
import SchemeEdit from './components/step-edit.vue';
import SchemeSearch from './components/step-search.vue';
const CourseOptions = ref<string[]>([])
import {
getCourseList,
} from '@/api/system/scheme'
defineOptions({ name: 'SystemSmsChannel' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps({
taskSpecialty: {
type: String,
default: ''
},
taskId: {
type: String,
default: ''
},
formData:{
type: Object,
default: null
}
})
/** 当前编辑数据 */
const current = ref<object>();
/** 是否显示编辑弹窗 */
const showEdit = ref(false);
const showOpenTemplate = ref(false);
const showAdd = ref(false);
const smsChannelFormRef = ref()
const taskEditRef = ref()
const taskAddRef = ref()
const taskTempRef = ref()
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
signature: undefined,
status: undefined,
createTime: [],
taskId: props.taskId,
spName:undefined
})
const totalScore = computed(() => {
return list.value.reduce((sum, item) => {
// 确保字段存在且为数字
const score = parseFloat(item.subtotalScore) || 0;
return sum + score;
}, 0);
});
// 排序值修改后自动调用接口
// 排序值修改后自动调用接口
const handleSortChange = async (row, newValue) => {
if (newValue < 0) {
message.error('排序不能小于 0')
row.sort = 0
return
}
// 1. 获取所有 quTitle 相同的项
const sameTitleItems = list.value.filter(item => item.quTitle === row.quTitle)
// 2. 批量更新 sort 值
const updateList = sameTitleItems.map(item => ({
...item,
sort: newValue
}))
try {
// 假设后端支持批量更新接口
await Promise.all(updateList.map(item => SmsChannelApi.updateScheme(item)))
message.success('同别名方案的排序已同步更新')
getList()
} catch (error) {
message.error('排序更新失败')
}
}
/** 查询列表 */
const getList = async () => {
// 1. 并行拉下拉所需的选项
const [courses] = await Promise.all([
getCourseList(),
])
CourseOptions.value = courses
loading.value = true
try {
const res = await SmsChannelApi.pageSchemes(queryParams)
console.log(res)
list.value = res
total.value = res.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const reload = () => {
getList()
}
/** 添加/修改操作 */
const formRef = ref();
const openEdit = (type: string, row?: object) => {
showEdit.value = true
current.value = row
nextTick(() => {
taskEditRef.value?.open(type, row)
})
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
console.log(id+"idididid")
await SmsChannelApi.removeScheme(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>