1033 lines
42 KiB
Vue
1033 lines
42 KiB
Vue
<template>
|
||
<div>
|
||
<!--查询区域-->
|
||
<div class="jeecg-basic-table-form-container">
|
||
<a-form @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||
<a-row :gutter="24">
|
||
<a-col :lg="24">
|
||
<a-button type="primary" @click="importOpen = true">导入试题</a-button>
|
||
<a-button type="primary" @click="addOpen = true" style="margin-left: 20px">手动添加</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div class="jeecg-basic-table-form-container">
|
||
<a-form @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||
<a-row :gutter="24">
|
||
<a-col :lg="6">
|
||
<a-form-item label="问题标题">
|
||
<j-input placeholder="请输入问题标题" v-model:value="queryParam.wjTitle"></j-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item label="题目类型">
|
||
<a-select placeholder="请选择题目类型" ref="select" v-model:value="queryParam.wjType">
|
||
<a-select-option value="">全部</a-select-option>
|
||
<a-select-option value="3">单选题</a-select-option>
|
||
<a-select-option value="4">多选题</a-select-option>
|
||
<a-select-option value="5">填空题</a-select-option>
|
||
<a-select-option value="8">文件题</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6">
|
||
<a-form-item label="是否公有">
|
||
<JDictSelectTag placeholder="请选择" v-model:value="queryParam.wjSytype" dictCode="yn" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xl="6" :lg="6" :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="searchQuery">查询</a-button>
|
||
</a-col>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<!--引用表格-->
|
||
<BasicTable @register="registerTable">
|
||
<!--插槽:table标题-->
|
||
<!-- <template #tableTitle>
|
||
</template> -->
|
||
<!--操作栏-->
|
||
<template #action="{ record }">
|
||
<TableAction :actions="getTableAction(record)" />
|
||
</template>
|
||
|
||
<template #wjTitleaction="{ record }">
|
||
<div v-html="record.wjTitle"></div>
|
||
</template>
|
||
|
||
<!--字段回显插槽-->
|
||
<template #htmlSlot="{ text }">
|
||
<div v-html="text"></div>
|
||
</template>
|
||
<template #fileSlot="{ text }">
|
||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
|
||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
|
||
@click="downloadFile(text)">下载</a-button>
|
||
</template>
|
||
</BasicTable>
|
||
|
||
<a-modal title="Excel导入指导" :width="800" :visible="importOpen" :maskClosable="false"
|
||
:okButtonProps="{ class: { 'jee-hidden': true } }" @cancel="importOpen = false" cancelText="关闭">
|
||
<div style="padding: 20px; background-color: rgb(225, 243, 237); border-radius: 5px; margin: 20px">
|
||
<p>Excel导入指导</p>
|
||
<p>1.下载题目导入模板文件。</p>
|
||
<p>2.按要求格式填写题目信息。</p>
|
||
<p>3.在模板内录入信息后，上传文件导入题目。</p>
|
||
<p>4.点击导入题目，选择已完成录入的文件，平台将会验证数据的正确性。</p>
|
||
<p>5.若发现错误，会给予提示，重新修正后再次上传:若无错误，即将数据导入到平台中。</p>
|
||
<p><a @click="downloadByUrl({ url: '/downPath/stdrmb.xls', target: '_self', fileName: '试题导入模板.xls' })">
|
||
<Icon icon="ant-design:download-outlined" :size="20" />导入模板下载
|
||
</a></p>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
|
||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="importXls">导入试题</j-upload-button>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<a-modal title="手动添加" :style="{ width: computedWidth }" :visible="addOpen" :maskClosable="false" @cancel="addOpen = false"
|
||
cancelText="关闭" @ok="handleOk">
|
||
<div class="sdtj-div">
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col :xs="24" :lg="4" style="padding: 10px">
|
||
<a-card title="可选题型" style="height: 360px; border: 1px solid #e8e8e8">
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(3)">单选题</a-button>
|
||
</p>
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(4)">多选题</a-button>
|
||
</p>
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(5)">填空题</a-button>
|
||
</p>
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(8)">文件题</a-button>
|
||
</p>
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined"
|
||
@click="addTigan(502)">简答题</a-button></p>
|
||
<p><a-button type="primary" preIcon="ant-design:check-square-outlined"
|
||
@click="addTigan(305)">判断题</a-button></p>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :lg="20" style="overflow-y: scroll; min-height: 100px">
|
||
<draggable :handle="isSmallScreen ? '.drag-handle' : null" @end="end" v-model="tiganData" item-key="id">
|
||
<template #item="{ index, element: item }">
|
||
<div>
|
||
<!-- 单选题 -->
|
||
<div style="width: 100%" v-if="(item.wjType == 3 || item.wjType == '3') && item.wjSubtype == null">
|
||
<a-card>
|
||
<template #title>
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[单选题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
<a-row v-if="isShow">
|
||
<a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
|
||
</a-row>
|
||
<a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default"
|
||
:disabled="!isShow">
|
||
<div style="width: 100%" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
|
||
<a-radio :value="tmxx.itemIndex + ``" style="width: 100%">
|
||
<a-input placeholder="请填写选项" v-model:value="tmxx.itemTitle" :style="{ width: '30rem' }"
|
||
:bordered="false" :disabled="editDisabled" />
|
||
<span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
|
||
<a-tooltip placement="topLeft" title="在下方添加新的选项">
|
||
<Icon icon="ant-design:plus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleAddTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<a-tooltip placement="topLeft" title="删除选项">
|
||
<Icon icon="ant-design:minus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
</a-radio>
|
||
</div>
|
||
</a-radio-group>
|
||
</a-card>
|
||
</div>
|
||
<!-- 多选题 -->
|
||
<div style="width: 100%" v-else-if="item.wjType == 4 || item.wjType == '4'">
|
||
<a-card>
|
||
<template #title>
|
||
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[多选题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写多选题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
<a-row v-if="isShow">
|
||
<a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
|
||
</a-row>
|
||
<a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" :disabled="!isShow"
|
||
@change="handleChecked">
|
||
<a-row>
|
||
<a-col :span="24" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
|
||
<!-- -{{item.itemSelected}}-{{tmxx.itemIndex}} -->
|
||
<a-checkbox :value="tmxx.itemIndex"><a-input placeholder="请填写选项"
|
||
v-model:value="tmxx.itemTitle" :bordered="false" :style="{ width: '30rem' }"
|
||
:disabled="editDisabled" /></a-checkbox>
|
||
<span style="color: #ecb646" v-if="cheGrp(item.itemSelected, tmxx.itemIndex)">(正确答案)</span>
|
||
<a-tooltip placement="topLeft" title="在下方添加新的选项">
|
||
<Icon icon="ant-design:plus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleAddTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<a-tooltip placement="topLeft" title="删除选项">
|
||
<Icon icon="ant-design:minus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
</a-col>
|
||
</a-row>
|
||
</a-checkbox-group>
|
||
</a-card>
|
||
</div>
|
||
<!-- 填空题 -->
|
||
<div style="width: 100%"
|
||
v-else-if="(item.wjType == 5 || item.wjType == '5') && item.wjSubtype == null">
|
||
<a-card>
|
||
<template #title>
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[填空题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写填空题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-textarea placeholder="请填写答案" v-model:value="item.wjAnswer" :bordered="false"
|
||
style="width: 100%" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled" />
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</div>
|
||
<!-- 文件上传 -->
|
||
<div style="width: 100%" v-else-if="item.wjType == 8 || item.wjType == '8'">
|
||
<a-card>
|
||
<template #title>
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[文件题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
</a-card>
|
||
</div>
|
||
<!-- 判断题 -->
|
||
<div style="width: 100%"
|
||
v-else-if="(item.wjType == 3 || item.wjType == '3') && (item.wjSubtype == 305 || item.wjSubtype == '305')">
|
||
<a-card>
|
||
<template #title>
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[判断题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
<a-row v-if="isShow">
|
||
<a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
|
||
</a-row>
|
||
<a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default"
|
||
:disabled="!isShow">
|
||
<div style="width: 100%" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
|
||
<a-radio :value="tmxx.itemIndex + ``" style="width: 100%">
|
||
<a-input placeholder="请填写选项" v-model:value="tmxx.itemTitle" :style="{ width: '30rem' }"
|
||
:bordered="false" :disabled="editDisabled" />
|
||
<span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
|
||
<a-tooltip placement="topLeft" title="在下方添加新的选项">
|
||
<Icon icon="ant-design:plus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleAddTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<a-tooltip placement="topLeft" title="删除选项">
|
||
<Icon icon="ant-design:minus-circle-outlined"
|
||
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
|
||
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
</a-radio>
|
||
</div>
|
||
</a-radio-group>
|
||
</a-card>
|
||
</div>
|
||
<!-- 简答题 -->
|
||
<div style="width: 100%"
|
||
v-else-if="(item.wjType == 5 || item.wjType == '5') && (item.wjSubtype == 5 || item.wjSubtype == '5')">
|
||
<a-card>
|
||
<template #title>
|
||
<div>
|
||
<a-row>
|
||
<a-col :span="11">
|
||
<span>{{ index + 1 }}、<span style="color: #c2bfbf">[简答题]</span></span>
|
||
</a-col>
|
||
<a-col :span="13" style="text-align: right;">
|
||
<a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
|
||
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
|
||
v-if="item.wjSfqh == '0'" :disabled="editDisabled">
|
||
<a-select-option :value="item" v-for="(item) in scoreData">{{item}}</a-select-option>
|
||
</a-select>
|
||
</a-tooltip>
|
||
<a-tooltip placement="topRight" title="删除此题">
|
||
<Icon icon="ant-design:delete-outlined"
|
||
style="cursor: pointer; font-size: 20px; margin: 5px"
|
||
@click="handleDelTigan(item, index)" v-if="!editDisabled" />
|
||
</a-tooltip>
|
||
<Icon
|
||
v-if="isSmallScreen && !editDisabled"
|
||
icon="pixelarticons:chevrons-vertical"
|
||
class="drag-handle"
|
||
style="cursor: move; font-size: 20px; margin-right: 10px;"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<JEditor2 placeholder="请填写简答题题干" v-model:value="item.wjTitle" :bordered="false"
|
||
:style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
|
||
v-if="!editDisabled" />
|
||
<div v-else v-html="item.wjTitle"></div>
|
||
|
||
<div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
|
||
<j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
|
||
:disabled="editDisabled" />
|
||
</div>
|
||
</template>
|
||
</a-card>
|
||
</div>
|
||
|
||
|
||
<div v-else> 无对应类型 </div>
|
||
</div>
|
||
</template>
|
||
</draggable>
|
||
|
||
<!-- 题干信息 -->
|
||
<div style="width: 100%" v-for="(item, index) in tiganData" :key="index"> </div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-modal>
|
||
|
||
|
||
<!-- 表单区域 -->
|
||
<WjxWjxxTmlbModal @register="registerModal" @success="handleSuccess"></WjxWjxxTmlbModal>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" name="wjxWjxxTmlb-siyou" setup>
|
||
import { ref, reactive, watch, computed, unref, onMounted, onUnmounted } from 'vue';
|
||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||
import { useListPage } from '/@/hooks/system/useListPage';
|
||
import { useModal } from '/@/components/Modal';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import WjxWjxxTmlbModal from './components/WjxWjxxTmlbModal.vue';
|
||
import { columns, searchFormSchema } from './WjxWjxxTmlb.data';
|
||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, distinctList } from './WjxWjxxTmlb.api';
|
||
import { downloadFile } from '/@/utils/common/renderUtils';
|
||
import { JInput, JDictSelectTag } from '/@/components/Form';
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { useGlobSetting } from '/@/hooks/setting';
|
||
import { downloadByUrl } from '/@/utils/file/download';
|
||
import draggable from 'vuedraggable';
|
||
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
|
||
import JEditor2 from '/@/components/Form/src/jeecg/components/JEditor2.vue';
|
||
|
||
//用户相关
|
||
const userStore = useUserStore();
|
||
const checkedKeys = ref<Array<string | number>>([]);
|
||
const importOpen = ref<boolean>(false);
|
||
const addOpen = ref<boolean>(false);
|
||
const glob = useGlobSetting();
|
||
// 定义一个响应式的宽度
|
||
const width = ref('80%');
|
||
|
||
const tiganData = ref<any>([]);
|
||
const isShow = ref<boolean>(true);
|
||
const mainId = ref<string>('');
|
||
const wjLeixing = ref<string>('6');
|
||
const editDisabled = ref<boolean>(false);
|
||
// const wjLeixing = ref<string>('');
|
||
//注册model
|
||
const [registerModal, { openModal }] = useModal();
|
||
const { createConfirm, createMessage, createWarningModal } = useMessage();
|
||
const scoreData = [
|
||
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,60,70,80,90,100
|
||
]
|
||
//注册table数据
|
||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||
tableProps: {
|
||
// title: '题目信息',
|
||
api: distinctList,
|
||
columns,
|
||
canResize: false,
|
||
useSearchForm: false,
|
||
actionColumn: {
|
||
width: 320,
|
||
},
|
||
beforeFetch: (params) => {
|
||
(params.column = 'id'), (params.order = 'desc'); //新生成的默认不带排序
|
||
return Object.assign(params, queryParam.value);
|
||
},
|
||
},
|
||
exportConfig: {
|
||
name: '题目信息',
|
||
url: getExportUrl,
|
||
},
|
||
importConfig: {
|
||
url: getImportUrl,
|
||
success: handleSuccess,
|
||
},
|
||
});
|
||
|
||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||
|
||
const props = defineProps({
|
||
wjLeixing: { type: String },
|
||
});
|
||
//监听条件变化
|
||
watch(
|
||
() => props.wjLeixing,
|
||
async (newRow, oldRow) => {
|
||
console.log(`🚀 ~ watch ~ newRow, oldRow:`, newRow, oldRow);
|
||
queryParam.value.wjLeixing = newRow;
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
function handleOk() {
|
||
const data = tiganData.value;
|
||
console.log('🧝♀️', data);
|
||
defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/addNew', params: {addList:data} }).then((res) => {
|
||
console.log('👞', res);
|
||
addOpen.value = false;
|
||
searchQuery();
|
||
});
|
||
}
|
||
|
||
function handleChecked(record) {
|
||
record = record + '';
|
||
}
|
||
/**
|
||
* 拖动结束事件
|
||
* @param evt
|
||
*/
|
||
function end(evt) {
|
||
for (var i = 0; i < tiganData.value.length; i++) {
|
||
tiganData.value[i].wjIndex = i + 1;
|
||
}
|
||
}
|
||
|
||
function cheGrp(a, b) {
|
||
var retChe = false;
|
||
if (a) {
|
||
for (var i = 0; i < a.length; i++) {
|
||
if (a[i] == b) {
|
||
retChe = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
return retChe;
|
||
}
|
||
//添加选项
|
||
function handleAddTmxx(record, index, list) {
|
||
var itemIndex = 0;
|
||
for (var i = 0; i < list.length; i++) {
|
||
var lssx = list[i].itemIndex;
|
||
if (itemIndex < parseInt(lssx)) {
|
||
itemIndex = lssx;
|
||
}
|
||
}
|
||
|
||
list.push({ itemTitle: null, itemIndex: parseInt(itemIndex) + 1 });
|
||
}
|
||
|
||
//删除选项
|
||
function handleRemTmxx(record, index, list) {
|
||
if (list.length <= 2) {
|
||
createMessage.error('至少保留两个选项');
|
||
} else {
|
||
list.splice(index, 1);
|
||
}
|
||
}
|
||
//计算输入框宽度
|
||
function handinpwei(value) {
|
||
if (!value) {
|
||
return '20rem';
|
||
} else {
|
||
if (String(value).length * 1.1 < 20) {
|
||
return '20rem';
|
||
} else if (String(value).length * 1.1 > 60) {
|
||
return '60rem';
|
||
} else {
|
||
return String(value).length * 1.1 + 'rem';
|
||
}
|
||
}
|
||
}
|
||
//切换题目分数类型
|
||
function handleQiehuan(record, type) {
|
||
console.log(`🚀 ~ handleQiehuan ~ type:`, type);
|
||
console.log(`🚀 ~ handleQiehuan ~ record:`, record);
|
||
record.wjSfqh = type;
|
||
}
|
||
//删除题目
|
||
function handleDelTigan(record, index) {
|
||
tiganData.value.splice(index, 1);
|
||
for (var i = 0; i < tiganData.value.length; i++) {
|
||
tiganData.value[i].wjIndex = i + 1;
|
||
}
|
||
}
|
||
|
||
//添加单选题
|
||
function addTigan(type) {
|
||
var list = tiganData.value;
|
||
//单选题
|
||
if (type == 3) {
|
||
var chk = '';
|
||
if (isShow.value) {
|
||
chk = '1';
|
||
}
|
||
let params = {
|
||
wjType: parseInt(type),
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
itemSelected: chk,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
wjxWjxxTmxxList: [
|
||
{ itemTitle: null, itemIndex: '1' },
|
||
{ itemTitle: null, itemIndex: '2' },
|
||
],
|
||
};
|
||
console.log('💇♀️', params);
|
||
list.push(params);
|
||
console.log('👩🔬', list);
|
||
tiganData.value = [...list];
|
||
//多选题
|
||
} else if (type == 4) {
|
||
let chk = '';
|
||
if (isShow.value) {
|
||
chk = '1,2';
|
||
}
|
||
let params = {
|
||
wjType: parseInt(type),
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
itemSelected: chk,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
wjxWjxxTmxxList: [
|
||
{ itemTitle: null, itemIndex: '1' },
|
||
{ itemTitle: null, itemIndex: '2' },
|
||
],
|
||
};
|
||
list.push(params);
|
||
tiganData.value = [...list];
|
||
//填空题
|
||
} else if (type == 5) {
|
||
let params = {
|
||
wjType: parseInt(type),
|
||
wjSubtype: null,
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
wjAnswer: null,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
};
|
||
list.push(params);
|
||
tiganData.value = [...list];
|
||
//文件题
|
||
} else if (type == 8) {
|
||
var chk = '';
|
||
if (isShow.value) {
|
||
chk = '1';
|
||
}
|
||
let params = {
|
||
wjType: parseInt(type),
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
};
|
||
list.push(params);
|
||
tiganData.value = [...list];
|
||
//判断题
|
||
}else if (type == 305) {
|
||
var chk = '';
|
||
if (isShow.value) {
|
||
chk = '1';
|
||
}
|
||
let params = {
|
||
wjType: 3,
|
||
wjSubtype: 305,
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
itemSelected: chk,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
wjxWjxxTmxxList: [
|
||
{ itemTitle: '对', itemIndex: '1' },
|
||
{ itemTitle: '错', itemIndex: '2' },
|
||
],
|
||
};
|
||
list.push(params);
|
||
tiganData.value = [...list];
|
||
} else if (type == 502) {
|
||
let params = {
|
||
wjType: 5,
|
||
wjSubtype: 5,
|
||
wjIndex: list.length + 1,
|
||
mainId: mainId,
|
||
wjTitle: null,
|
||
wjScore: null,
|
||
wjLeixing,
|
||
wjAnswer: null,
|
||
wjSfqh: '0',
|
||
sftjtk: '1',
|
||
};
|
||
list.push(params);
|
||
tiganData.value = [...list];
|
||
//文件题
|
||
}
|
||
}
|
||
/**
|
||
* 导入xls
|
||
* @param data 导入的数据
|
||
* @param url
|
||
*/
|
||
async function importXls(data, url) {
|
||
// url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel?mainId=1234';
|
||
url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel';
|
||
const isReturn = (fileInfo) => {
|
||
try {
|
||
if (fileInfo.code === 201) {
|
||
let {
|
||
message,
|
||
result: { msg, fileUrl, fileName },
|
||
} = fileInfo;
|
||
let href = glob.uploadUrl + fileUrl;
|
||
createWarningModal({
|
||
title: message,
|
||
centered: false,
|
||
content: `<div>
|
||
<span>${msg}</span><br/>
|
||
<span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span>
|
||
</div>`,
|
||
});
|
||
//update-begin---author:wangshuai ---date:20221121 for：[VUEN-2827]导入无权限，提示图标错误------------
|
||
} else if (fileInfo.code === 500 || fileInfo.code === 510) {
|
||
createMessage.error(fileInfo.message || `${data.file.name} 导入失败`);
|
||
//update-end---author:wangshuai ---date:20221121 for：[VUEN-2827]导入无权限，提示图标错误------------
|
||
} else {
|
||
createWarningModal({
|
||
centered: false,
|
||
content: `<div>
|
||
<span>${fileInfo.message}</span><br/>
|
||
</div>`,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.log('导入的数据异常', error);
|
||
} finally {
|
||
}
|
||
};
|
||
await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
|
||
}
|
||
|
||
/**
|
||
* 编辑事件
|
||
*/
|
||
function handleEdit(record: Recordable, wjSytype) {
|
||
defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/editSwgysy', params: { id: record.id, wjSytype } }).then((res) => {
|
||
reload();
|
||
});
|
||
}
|
||
/**
|
||
* 详情
|
||
*/
|
||
function handleDetail(record: Recordable) {
|
||
// 添加自定义类名
|
||
openModal(true, {
|
||
record,
|
||
isUpdate: true,
|
||
showFooter: false,
|
||
className: 'custom-modal-detail', // 添加自定义类名
|
||
});
|
||
}
|
||
/**
|
||
* 详情
|
||
*/
|
||
function handleEdit2(record: Recordable) {
|
||
openModal(true, {
|
||
record,
|
||
isUpdate: true,
|
||
showFooter: true,
|
||
});
|
||
}
|
||
/**
|
||
* 成功回调
|
||
*/
|
||
function handleSuccess() {
|
||
(selectedRowKeys.value = []) && reload();
|
||
}
|
||
|
||
/**
|
||
* 删除事件
|
||
*/
|
||
async function handleDelete(record) {
|
||
await deleteOne({ id: record.id }, handleSuccess);
|
||
}
|
||
/**
|
||
* 移出题库
|
||
*/
|
||
function handleYctk(record){
|
||
console.log("🚀 ~ handleYctk ~ record:", record)
|
||
defHttp.post({url:'/wjxWjxxTmlb/wjxWjxxTmlb/yctk',params:{wjTitle:record.wjTitle,createBy:record.createBy}}).then(res=>{
|
||
console.log('res--->',res);
|
||
reload();
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 操作栏
|
||
*/
|
||
function getTableAction(record) {
|
||
return [
|
||
{
|
||
label: '设为私有',
|
||
onClick: handleEdit.bind(null, record, '0'),
|
||
ifShow:record.wjSytype == '1'
|
||
},
|
||
{
|
||
label: '设为公有',
|
||
onClick: handleEdit.bind(null, record, '1'),
|
||
ifShow:record.wjSytype == '0'
|
||
},
|
||
{
|
||
label: '详情',
|
||
onClick: handleDetail.bind(null, record),
|
||
},
|
||
{
|
||
label: '删除',
|
||
onClick: handleDelete.bind(null, record),
|
||
ifShow: (record.mainId == '' || record.mainId == null),
|
||
},
|
||
{
|
||
label: '移出题库',
|
||
onClick: handleYctk.bind(null, record),
|
||
},
|
||
{
|
||
label: '修改',
|
||
onClick: handleEdit2.bind(null, record),
|
||
ifShow: (record.mainId == '' || record.mainId == null),
|
||
},
|
||
{
|
||
label: '已使用不能修改',
|
||
ifShow: (record.mainId != '' && record.mainId != null),
|
||
disabled: true,
|
||
},
|
||
];
|
||
// if (record.wjSytype == '0') {
|
||
// return [
|
||
// {
|
||
// label: '设为公有',
|
||
// onClick: handleEdit.bind(null, record, '1'),
|
||
// },
|
||
// {
|
||
// label: '详情',
|
||
// onClick: handleDetail.bind(null, record),
|
||
// ifShow: (record.mainId == '' || record.mainId == null),
|
||
// },
|
||
// {
|
||
// label: '详情',
|
||
// onClick: handleDetail.bind(null, record),
|
||
// ifShow: (record.mainId == '' || record.mainId == null),
|
||
// },
|
||
// ];
|
||
// } else {
|
||
// return [
|
||
// {
|
||
// label: '设为私有',
|
||
// onClick: handleEdit.bind(null, record, '0'),
|
||
// },
|
||
// {
|
||
// label: '详情',
|
||
// onClick: handleDetail.bind(null, record),
|
||
// },
|
||
// ];
|
||
// }
|
||
}
|
||
|
||
/* ----------------------以下为原生查询需要添加的-------------------------- */
|
||
const queryParam = ref<any>({});
|
||
const toggleSearchStatus = ref<boolean>(false);
|
||
const labelCol = reactive({
|
||
xs: { span: 24 },
|
||
sm: { span: 7 },
|
||
});
|
||
const wrapperCol = reactive({
|
||
xs: { span: 24 },
|
||
sm: { span: 16 },
|
||
});
|
||
|
||
/**
|
||
* 查询
|
||
*/
|
||
function searchQuery() {
|
||
reload();
|
||
}
|
||
/**
|
||
* 重置
|
||
*/
|
||
function searchReset() {
|
||
queryParam.value = {};
|
||
selectedRowKeys.value = [];
|
||
//刷新数据
|
||
reload();
|
||
}
|
||
|
||
// 计算属性来决定实际使用的宽度
|
||
const computedWidth = computed(() => {
|
||
return isSmallScreen.value ? '90%' : width.value;
|
||
});
|
||
|
||
// 响应式地检查是否是小屏幕
|
||
const isSmallScreen = ref(false);
|
||
|
||
// 更新 isSmallScreen 的函数
|
||
const updateScreenWidth = () => {
|
||
isSmallScreen.value = window.innerWidth < 600; // 你可以调整这个断点
|
||
};
|
||
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', updateScreenWidth);
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 监听窗口大小变化
|
||
window.addEventListener('resize', updateScreenWidth);
|
||
// 初始化时也调用一次
|
||
updateScreenWidth();
|
||
|
||
// wjLeixing.value = "1";
|
||
// console.log(`🚀 ~ onMounted ~ wjLeixing:`, wjLeixing)
|
||
// queryParam.value.wjLeixing = wjLeixing;
|
||
queryParam.value.createBy = userStore.getUserInfo.username;
|
||
queryParam.value.sftjtk = "1";
|
||
reload();
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@media (max-width: 768px) {
|
||
.sdtj-div {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 769px) {
|
||
.sdtj-div {
|
||
padding: 20px;
|
||
margin: 20px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
/deep/.ant-card-head-title {
|
||
padding:0px;
|
||
}
|
||
|
||
.custom-modal-detail .ant-card-head-title {
|
||
white-space: normal !important; /* 覆盖原有的 white-space: nowrap */
|
||
}
|
||
|
||
|
||
</style> |