|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年10月12日 16:29:26
|
|
|
*/
|
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
|
import $router from '@/router'
|
|
|
import { onBeforeRouteUpdate } from 'vue-router'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import {
|
|
|
QuestionQuestionSelectAction,
|
|
|
QuestionItemSelectAction,
|
|
|
QuestionQuestionCreateAction,
|
|
|
QuestionQuestionUpdateAction,
|
|
|
QuestionQuestionDeleteAction,
|
|
|
QuestionQuestionListAction
|
|
|
} from '@/api/api.js'
|
|
|
|
|
|
const default_page_options = {
|
|
|
search: '',
|
|
|
page: 1
|
|
|
}
|
|
|
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
|
|
|
onBeforeRouteUpdate((to) => {
|
|
|
routerChange(to.query)
|
|
|
})
|
|
|
const table_list = ref([])
|
|
|
const last_page = ref(0)
|
|
|
const QuestionQuestionList = async () => {
|
|
|
const response = await QuestionQuestionListAction(page_options.value)
|
|
|
if (response.status !== 'no') {
|
|
|
table_list.value = response.data.list.data.map((item) => {
|
|
|
return {
|
|
|
...item,
|
|
|
option: JSON.parse(item.option)
|
|
|
}
|
|
|
})
|
|
|
last_page.value = response.data.list.last_page
|
|
|
} else {
|
|
|
ElMessage.error(response.msg)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const routerChange = (query) => {
|
|
|
page_options.value = {
|
|
|
search: query.search || default_page_options.search,
|
|
|
page: Number(query.page) || default_page_options.page
|
|
|
}
|
|
|
QuestionQuestionList()
|
|
|
}
|
|
|
|
|
|
const searchClick = (page = 1) => {
|
|
|
page_options.value.page = page
|
|
|
$router.push({
|
|
|
query: JSON.parse(JSON.stringify(page_options.value))
|
|
|
})
|
|
|
}
|
|
|
const select_option = {
|
|
|
value: [
|
|
|
{ content: 'A. ', type: 'items', items: [], questions: [], score: 0 },
|
|
|
{ content: 'B. ', type: 'items', items: [], questions: [], score: 0 },
|
|
|
{ content: 'C. ', type: 'items', items: [], questions: [], score: 0 }
|
|
|
]
|
|
|
}
|
|
|
const input_option = {
|
|
|
value: '',
|
|
|
placeholder: '请输入选项内容'
|
|
|
}
|
|
|
const edit_data_default = {
|
|
|
id: 0,
|
|
|
question: '',
|
|
|
type: 'input',
|
|
|
option: {
|
|
|
input: JSON.parse(JSON.stringify(input_option)),
|
|
|
select: JSON.parse(JSON.stringify(select_option))
|
|
|
}
|
|
|
}
|
|
|
const edit_data = ref(JSON.parse(JSON.stringify(edit_data_default)))
|
|
|
const edit_show = ref(false)
|
|
|
const createClick = () => {
|
|
|
updateClick(edit_data_default)
|
|
|
}
|
|
|
const updateClick = (row) => {
|
|
|
edit_data.value = JSON.parse(JSON.stringify(row))
|
|
|
edit_show.value = true
|
|
|
}
|
|
|
const editDoneClick = async () => {
|
|
|
const $func =
|
|
|
edit_data.value.id !== 0 ? QuestionQuestionUpdateAction : QuestionQuestionCreateAction
|
|
|
const response = await $func({
|
|
|
...edit_data.value,
|
|
|
option: JSON.stringify(edit_data.value.option)
|
|
|
})
|
|
|
if (response.status !== 'no') {
|
|
|
edit_show.value = false
|
|
|
await QuestionQuestionList()
|
|
|
} else {
|
|
|
ElMessage.error(response.msg)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const QuestionQuestionDelete = async (id) => {
|
|
|
const response = await QuestionQuestionDeleteAction({ id })
|
|
|
if (response.status !== 'no') {
|
|
|
await QuestionQuestionList()
|
|
|
} else {
|
|
|
ElMessage.error(response.msg)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const deleteClick = (id) => {
|
|
|
ElMessageBox.confirm('是否确认删除该题目？', '提示', {
|
|
|
confirmButtonText: '确认',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
.then(() => {
|
|
|
QuestionQuestionDelete(id)
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
}
|
|
|
const edit_item_data = ref({
|
|
|
active: 0,
|
|
|
items: []
|
|
|
})
|
|
|
const edit_item_show = ref(false)
|
|
|
const question_list = ref([])
|
|
|
const QuestionQuestionSelect = async () => {
|
|
|
const response = await QuestionQuestionSelectAction()
|
|
|
if (response.status !== 'no') {
|
|
|
question_list.value = response.data.list
|
|
|
} else {
|
|
|
ElMessage.error(response.msg)
|
|
|
}
|
|
|
}
|
|
|
const editItemClick = async (index) => {
|
|
|
const type = edit_data.value.option.select.value[index].type
|
|
|
if (type === 'questions') {
|
|
|
await QuestionQuestionSelect()
|
|
|
}
|
|
|
await nextTick(() => {
|
|
|
edit_item_data.value = {
|
|
|
active: index,
|
|
|
items: JSON.parse(JSON.stringify(edit_data.value.option.select.value[index][type]))
|
|
|
}
|
|
|
edit_item_show.value = true
|
|
|
})
|
|
|
}
|
|
|
const editItemDoneClick = () => {
|
|
|
const type = edit_data.value.option.select.value[edit_item_data.value.active].type
|
|
|
edit_data.value.option.select.value[edit_item_data.value.active][type] = JSON.parse(
|
|
|
JSON.stringify(edit_item_data.value.items)
|
|
|
)
|
|
|
edit_item_show.value = false
|
|
|
}
|
|
|
const filterMethod = (query, item) => {
|
|
|
const type = edit_data.value.option.select.value[edit_item_data.value.active].type
|
|
|
if (type === 'items') {
|
|
|
return item.name.toLowerCase().includes(query.toLowerCase())
|
|
|
} else {
|
|
|
return item.question.toLowerCase().includes(query.toLowerCase())
|
|
|
}
|
|
|
}
|
|
|
const item_list = ref([])
|
|
|
const QuestionItemSelect = async () => {
|
|
|
const response = await QuestionItemSelectAction()
|
|
|
if (response.status !== 'no') {
|
|
|
item_list.value = response.data.list
|
|
|
} else {
|
|
|
ElMessage.error(response.msg)
|
|
|
}
|
|
|
}
|
|
|
const moveQuestionClick = (index, type) => {
|
|
|
if (edit_data.value.option.select.value.length - 1 >= index + type) {
|
|
|
const question = edit_data.value.option.select.value[index]
|
|
|
edit_data.value.option.select.value[index] = JSON.parse(
|
|
|
JSON.stringify(edit_data.value.option.select.value[index + type])
|
|
|
)
|
|
|
edit_data.value.option.select.value[index + type] = JSON.parse(JSON.stringify(question))
|
|
|
}
|
|
|
}
|
|
|
const delQuestionClick = (index) => {
|
|
|
edit_data.value.option.select.value.splice(index, 1)
|
|
|
}
|
|
|
const addQuestionClick = () => {
|
|
|
edit_data.value.option.select.value.push({ content: '', type: 'items', items: [], questions: [] })
|
|
|
}
|
|
|
const question_type_map = {
|
|
|
select: '选择题',
|
|
|
input: '输入框'
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
routerChange($router.currentRoute.value.query)
|
|
|
QuestionItemSelect()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-dialog
|
|
|
v-model="edit_item_show"
|
|
|
title="关联管理"
|
|
|
width="610px"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
:show-close="false"
|
|
|
>
|
|
|
<div>
|
|
|
<el-transfer
|
|
|
v-if="!!edit_item_show"
|
|
|
:titles="['可选', '已选']"
|
|
|
:props="{
|
|
|
key: 'id',
|
|
|
label:
|
|
|
edit_data.option.select.value[edit_item_data.active].type === 'items'
|
|
|
? 'name'
|
|
|
: 'question'
|
|
|
}"
|
|
|
v-model="edit_item_data.items"
|
|
|
filterable
|
|
|
:filter-method="filterMethod"
|
|
|
filter-placeholder="搜索"
|
|
|
:data="
|
|
|
edit_data.option.select.value[edit_item_data.active].type === 'items'
|
|
|
? item_list
|
|
|
: question_list
|
|
|
"
|
|
|
/>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="editItemDoneClick()" type="primary">确定</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog v-model="edit_show" :title="`${!!edit_data.id ? '编辑' : '新建'}`" width="1000px">
|
|
|
<div>
|
|
|
<el-form label-width="150">
|
|
|
<el-form-item label="题目">
|
|
|
<el-input v-model="edit_data.question" placeholder="请输入题目"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="题目类型">
|
|
|
<el-select v-model="edit_data.type" placeholder="请选择题目类型">
|
|
|
<el-option label="选择题" value="select"></el-option>
|
|
|
<el-option label="输入框" value="input"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<template v-if="edit_data.type === 'input'">
|
|
|
<el-form-item label="题目配置">
|
|
|
<div>
|
|
|
<div class="select_item_wrapper">
|
|
|
<el-input
|
|
|
class="select_input_wrapper"
|
|
|
v-model="edit_data.option.input.value"
|
|
|
placeholder="请输入默认值"
|
|
|
></el-input>
|
|
|
<el-input
|
|
|
class="select_input_wrapper"
|
|
|
v-model="edit_data.option.input.placeholder"
|
|
|
placeholder="请输入占位符"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
<template v-else-if="edit_data.type === 'select'">
|
|
|
<el-form-item label="题目配置">
|
|
|
<div>
|
|
|
<div
|
|
|
class="select_item_wrapper"
|
|
|
v-for="(_, k) in edit_data.option.select.value"
|
|
|
:key="k"
|
|
|
>
|
|
|
<el-input
|
|
|
class="select_input_wrapper"
|
|
|
v-model="edit_data.option.select.value[k].content"
|
|
|
placeholder="请输入"
|
|
|
></el-input>
|
|
|
<el-select
|
|
|
class="select_select_wrapper"
|
|
|
v-model="edit_data.option.select.value[k].type"
|
|
|
placeholder="请选择题目类型"
|
|
|
>
|
|
|
<el-option label="项目" value="items"></el-option>
|
|
|
<el-option label="题目" value="questions"></el-option>
|
|
|
<el-option label="分数" value="score"></el-option>
|
|
|
</el-select>
|
|
|
<template v-if="edit_data.option.select.value[k].type === 'score'">
|
|
|
<el-input-number
|
|
|
v-model="edit_data.option.select.value[k].score"
|
|
|
></el-input-number>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<span style="margin-right: 10px"
|
|
|
>{{
|
|
|
edit_data.option.select.value[k].type === 'items'
|
|
|
? edit_data.option.select.value[k].items.length
|
|
|
: edit_data.option.select.value[k].questions.length
|
|
|
}}个{{
|
|
|
edit_data.option.select.value[k].type === 'items' ? '项目' : '题目'
|
|
|
}}</span
|
|
|
>
|
|
|
<el-button type="primary" size="small" @click="editItemClick(k)">
|
|
|
编辑{{ edit_data.option.select.value[k].type === 'items' ? '项目' : '题目' }}
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
:disabled="k === 0"
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
@click="moveQuestionClick(k, -1)"
|
|
|
>↑
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
:disabled="k === edit_data.option.select.value.length - 1"
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
@click="moveQuestionClick(k, 1)"
|
|
|
>↓
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
:disabled="edit_data.option.select.value.length === 1"
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
@click="delQuestionClick(k)"
|
|
|
>X
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button type="primary" size="small" @click="addQuestionClick()"
|
|
|
>添加选项</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
<el-button @click="edit_show = false">取消</el-button>
|
|
|
<el-button type="primary" @click="editDoneClick()">确定</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<div class="head">
|
|
|
<div class="head">
|
|
|
<el-row>
|
|
|
<el-form-item>
|
|
|
<el-input v-model="page_options.search" placeholder="搜索题目" />
|
|
|
</el-form-item>
|
|
|
<el-button type="primary" @click="searchClick()" style="margin-left: 10px"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
<el-button type="success" @click="createClick()" style="margin-left: 10px"
|
|
|
>添加</el-button
|
|
|
>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-table
|
|
|
:data="table_list"
|
|
|
style="width: 100%"
|
|
|
row-key="id"
|
|
|
:tooltip-options="{
|
|
|
popperClass: 'popper_class_wrapper'
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column prop="id" label="ID" width="100" />
|
|
|
<el-table-column prop="question" label="题目" width="200" show-overflow-tooltip />
|
|
|
<el-table-column label="类型" width="100">
|
|
|
<template #default="scope">
|
|
|
{{ question_type_map[scope.row.type] }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="题目配置">
|
|
|
<template #default="scope">
|
|
|
<div v-if="scope.row.type === 'input'" class="select_item_wrapper">
|
|
|
<span class="title_wrapper">占位符：</span
|
|
|
><span style="margin: 0 10px">{{ scope.row.option.input.placeholder }}</span>
|
|
|
<span v-if="!!scope.row.option.input.value" class="title_wrapper">默认值：</span
|
|
|
><span style="margin: 0 10px">{{ scope.row.option.input.value }}</span>
|
|
|
</div>
|
|
|
<div v-else-if="scope.row.type === 'select'">
|
|
|
<div
|
|
|
class="select_item_wrapper"
|
|
|
v-for="(i, k) in scope.row.option.select.value"
|
|
|
:key="k"
|
|
|
>
|
|
|
<span style="margin-right: 10px; width: 400px">{{ i.content }}</span>
|
|
|
<span class="title_wrapper">带出：</span>
|
|
|
<span v-if="scope.row.option.select.value[k].type === 'items'">项目</span>
|
|
|
<span v-else-if="scope.row.option.select.value[k].type === 'questions'">题目</span>
|
|
|
<span v-else-if="scope.row.option.select.value[k].type === 'score'">分数</span>
|
|
|
<span v-if="scope.row.option.select.value[k].type === 'score'" style="margin: 0 5px">{{
|
|
|
scope.row.option.select.value[k][scope.row.option.select.value[k].type]
|
|
|
}}</span>
|
|
|
<span v-else style="margin: 0 5px">{{
|
|
|
scope.row.option.select.value[k][scope.row.option.select.value[k].type].length
|
|
|
}}</span>
|
|
|
<span>{{ scope.row.option.select.value[k].type === 'score' ? '分' : '个' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="140">
|
|
|
<template #default="scope">
|
|
|
<el-button type="primary" @click="updateClick(scope.row)" size="small">修改</el-button>
|
|
|
<el-button type="danger" @click="deleteClick(scope.row.id)" size="small">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<div class="page">
|
|
|
<el-pagination
|
|
|
v-if="last_page > 0"
|
|
|
:current-page="page_options.page"
|
|
|
mt-2
|
|
|
background
|
|
|
layout="prev, pager, next"
|
|
|
:page-count="last_page"
|
|
|
@update:current-page="searchClick"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style>
|
|
|
.popper_class_wrapper {
|
|
|
width: 300px;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.title_wrapper {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.select_input_wrapper {
|
|
|
width: 300px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.select_select_wrapper {
|
|
|
width: 80px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.select_item_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.page {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
</style>
|