dbsd_kczx/src/views/kc/wjxWjxxTmlb/TikuList.vue

1033 lines
42 KiB
Vue
Raw Normal View History

2024-05-23 18:10:07 +08:00
<template>
<div>
<!--查询区域-->
2024-09-26 17:18:30 +08:00
<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>
2024-05-23 18:10:07 +08:00
<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">
2024-05-25 12:50:41 +08:00
<a-col :lg="6">
2024-05-23 18:10:07 +08:00
<a-form-item label="问题标题">
<j-input placeholder="请输入问题标题" v-model:value="queryParam.wjTitle"></j-input>
</a-form-item>
</a-col>
2024-05-25 12:50:41 +08:00
<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>
2024-10-23 19:46:08 +08:00
<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>
2024-05-25 12:50:41 +08:00
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6">
2024-05-23 18:10:07 +08:00
<a-form-item label="是否公有">
<JDictSelectTag placeholder="请选择" v-model:value="queryParam.wjSytype" dictCode="yn" />
</a-form-item>
</a-col>
2024-05-25 12:50:41 +08:00
<a-col :xl="6" :lg="6" :md="8" :sm="24">
2024-05-23 18:10:07 +08:00
<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>
<!--引用表格-->
2024-09-26 17:18:30 +08:00
<BasicTable @register="registerTable">
<!--插槽:table标题-->
2024-05-23 18:10:07 +08:00
<!-- <template #tableTitle>
</template> -->
2024-09-26 17:18:30 +08:00
<!--操作栏-->
2024-05-23 18:10:07 +08:00
<template #action="{ record }">
2024-09-26 17:18:30 +08:00
<TableAction :actions="getTableAction(record)" />
2024-05-23 18:10:07 +08:00
</template>
2024-10-18 19:47:38 +08:00
<template #wjTitleaction="{ record }">
<div v-html="record.wjTitle"></div>
</template>
2024-05-23 18:10:07 +08:00
<!--字段回显插槽-->
2024-09-26 17:18:30 +08:00
<template #htmlSlot="{ text }">
<div v-html="text"></div>
2024-05-23 18:10:07 +08:00
</template>
2024-09-26 17:18:30 +08:00
<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>
2024-05-23 18:10:07 +08:00
</template>
</BasicTable>
2024-09-26 17:18:30 +08:00
<a-modal title="Excel导入指导" :width="800" :visible="importOpen" :maskClosable="false"
:okButtonProps="{ class: { 'jee-hidden': true } }" @cancel="importOpen = false" cancelText="关闭">
2024-09-26 17:18:30 +08:00
<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>
2024-09-26 17:18:30 +08:00
</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">
2024-11-22 19:39:04 +08:00
<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>
2024-09-26 17:18:30 +08:00
</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">
2024-09-26 17:18:30 +08:00
<template #item="{ index, element: item }">
<div>
<!-- 单选题 -->
2024-11-22 19:39:04 +08:00
<div style="width: 100%" v-if="(item.wjType == 3 || item.wjType == '3') && item.wjSubtype == null">
2024-09-26 17:18:30 +08:00
<a-card>
<template #title>
2024-10-18 19:47:38 +08:00
<div>
<a-row>
<a-col :span="11">
2024-10-23 19:46:08 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[单选题]</span></span>
2024-10-18 19:47:38 +08:00
</a-col>
<a-col :span="13" style="text-align: right;">
2024-10-18 19:47:38 +08:00
<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>
2024-10-18 19:47:38 +08:00
</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;"
/>
2024-10-18 19:47:38 +08:00
</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>
2024-09-26 17:18:30 +08:00
</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">
2024-09-26 17:18:30 +08:00
<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" />
2024-09-26 17:18:30 +08:00
<span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
<a-tooltip placement="topLeft" title="在下方添加新的选项">
<Icon icon="ant-design:plus-circle-outlined"
2024-09-26 17:18:30 +08:00
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"
2024-09-26 17:18:30 +08:00
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
</a-tooltip>
2024-09-26 17:18:30 +08:00
</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>
2024-11-22 19:39:04 +08:00
2024-10-18 19:47:38 +08:00
<div>
<a-row>
<a-col :span="11">
2024-10-23 19:46:08 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[多选题]</span></span>
2024-10-18 19:47:38 +08:00
</a-col>
<a-col :span="13" style="text-align: right;">
2024-10-18 19:47:38 +08:00
<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>
2024-10-18 19:47:38 +08:00
</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;"
/>
2024-10-18 19:47:38 +08:00
</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>
2024-11-22 19:39:04 +08:00
<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>
2024-09-26 17:18:30 +08:00
</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">
2024-09-26 17:18:30 +08:00
<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>
2024-09-26 17:18:30 +08:00
<span style="color: #ecb646" v-if="cheGrp(item.itemSelected, tmxx.itemIndex)">(正确答案)</span>
<a-tooltip placement="topLeft" title="在下方添加新的选项">
<Icon icon="ant-design:plus-circle-outlined"
2024-09-26 17:18:30 +08:00
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"
2024-09-26 17:18:30 +08:00
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
</a-tooltip>
2024-09-26 17:18:30 +08:00
</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">
2024-09-26 17:18:30 +08:00
<a-card>
<template #title>
2024-10-18 19:47:38 +08:00
<div>
<a-row>
<a-col :span="11">
2024-10-23 19:46:08 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[填空题]</span></span>
2024-10-18 19:47:38 +08:00
</a-col>
<a-col :span="13" style="text-align: right;">
2024-10-18 19:47:38 +08:00
<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>
2024-10-18 19:47:38 +08:00
</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;"
/>
2024-10-18 19:47:38 +08:00
</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>
2024-09-26 17:18:30 +08:00
</template>
<a-row>
2024-09-26 17:18:30 +08:00
<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" />
2024-09-26 17:18:30 +08:00
</a-col>
</a-row>
</a-card>
</div>
<!-- 文件上传 -->
<div style="width: 100%" v-else-if="item.wjType == 8 || item.wjType == '8'">
<a-card>
<template #title>
2024-10-18 19:47:38 +08:00
<div>
<a-row>
<a-col :span="11">
2024-10-23 19:46:08 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[文件题]</span></span>
2024-10-18 19:47:38 +08:00
</a-col>
<a-col :span="13" style="text-align: right;">
2024-10-18 19:47:38 +08:00
<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>
2024-10-18 19:47:38 +08:00
</a-select>
2024-11-22 19:39:04 +08:00
</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;"
/>
2024-11-22 19:39:04 +08:00
</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>
2024-11-22 19:39:04 +08:00
</template>
</a-card>
</div>
<!-- 判断题 -->
<div style="width: 100%"
v-else-if="(item.wjType == 3 || item.wjType == '3') && (item.wjSubtype == 305 || item.wjSubtype == '305')">
2024-11-22 19:39:04 +08:00
<a-card>
<template #title>
<div>
<a-row>
<a-col :span="11">
2024-11-22 19:39:04 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[判断题]</span></span>
</a-col>
<a-col :span="13" style="text-align: right;">
2024-11-22 19:39:04 +08:00
<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>
2024-11-22 19:39:04 +08:00
</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;"
/>
2024-11-22 19:39:04 +08:00
</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>
2024-11-22 19:39:04 +08:00
</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">
2024-11-22 19:39:04 +08:00
<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" />
2024-11-22 19:39:04 +08:00
<span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
<a-tooltip placement="topLeft" title="在下方添加新的选项">
<Icon icon="ant-design:plus-circle-outlined"
2024-11-22 19:39:04 +08:00
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"
2024-11-22 19:39:04 +08:00
style="cursor: pointer; margin: 5px; font-size: 20px; color: #1890ff"
@click="handleRemTmxx(tmxx, index, item.wjxWjxxTmxxList)" v-if="!editDisabled" />
</a-tooltip>
2024-11-22 19:39:04 +08:00
</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')">
2024-11-22 19:39:04 +08:00
<a-card>
<template #title>
<div>
<a-row>
<a-col :span="11">
2024-11-22 19:39:04 +08:00
<span>{{ index + 1 }}<span style="color: #c2bfbf">[简答题]</span></span>
</a-col>
<a-col :span="13" style="text-align: right;">
2024-11-22 19:39:04 +08:00
<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>
2024-11-22 19:39:04 +08:00
</a-select>
2024-10-18 19:47:38 +08:00
</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;"
/>
2024-10-18 19:47:38 +08:00
</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>
2024-09-26 17:18:30 +08:00
</template>
</a-card>
</div>
2024-11-22 19:39:04 +08:00
2024-10-18 19:47:38 +08:00
<div v-else> 无对应类型 </div>
2024-09-26 17:18:30 +08:00
</div>
</template>
</draggable>
<!-- 题干信息 -->
<div style="width: 100%" v-for="(item, index) in tiganData" :key="index"> </div>
</a-col>
</a-row>
</div>
</a-modal>
2024-05-23 18:10:07 +08:00
<!-- 表单区域 -->
<WjxWjxxTmlbModal @register="registerModal" @success="handleSuccess"></WjxWjxxTmlbModal>
2024-05-23 18:10:07 +08:00
</div>
</template>
<script lang="ts" name="wjxWjxxTmlb-siyou" setup>
import { ref, reactive, watch, computed, unref, onMounted, onUnmounted } from 'vue';
2024-09-26 17:18:30 +08:00
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';
2024-10-18 19:47:38 +08:00
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import JEditor2 from '/@/components/Form/src/jeecg/components/JEditor2.vue';
2024-09-26 17:18:30 +08:00
//用户相关
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%');
2024-09-26 17:18:30 +08:00
const tiganData = ref<any>([]);
const isShow = ref<boolean>(true);
const mainId = ref<string>('');
const wjLeixing = ref<string>('6');
2024-10-18 19:47:38 +08:00
const editDisabled = ref<boolean>(false);
2024-09-26 17:18:30 +08:00
// const wjLeixing = ref<string>('');
//注册model
const [registerModal, { openModal }] = useModal();
const { createConfirm, createMessage, createWarningModal } = useMessage();
2024-10-26 10:29:45 +08:00
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
]
2024-09-26 17:18:30 +08:00
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
// title: '题目信息',
api: distinctList,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
2024-12-12 14:54:54 +08:00
width: 320,
2024-09-26 17:18:30 +08:00
},
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);
2024-05-23 21:56:08 +08:00
queryParam.value.wjLeixing = newRow;
2024-09-26 17:18:30 +08:00
},
{ deep: true }
);
function handleOk() {
const data = tiganData.value;
console.log('🧝‍♀️', data);
2024-09-29 16:25:12 +08:00
defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/addNew', params: {addList:data} }).then((res) => {
2024-09-26 17:18:30 +08:00
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';
2024-05-23 18:10:07 +08:00
}
2024-09-26 17:18:30 +08:00
}
}
//切换题目分数类型
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;
}
}
2024-05-23 18:10:07 +08:00
2024-09-26 17:18:30 +08:00
//添加单选题
function addTigan(type) {
var list = tiganData.value;
2024-11-22 19:39:04 +08:00
//单选题
2024-09-26 17:18:30 +08:00
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',
2024-10-23 19:46:08 +08:00
sftjtk: '1',
2024-09-26 17:18:30 +08:00
wjxWjxxTmxxList: [
{ itemTitle: null, itemIndex: '1' },
{ itemTitle: null, itemIndex: '2' },
],
};
console.log('💇‍♀️', params);
list.push(params);
console.log('👩‍🔬', list);
tiganData.value = [...list];
2024-11-22 19:39:04 +08:00
//多选题
2024-09-26 17:18:30 +08:00
} 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',
2024-10-23 19:46:08 +08:00
sftjtk: '1',
2024-09-26 17:18:30 +08:00
wjxWjxxTmxxList: [
{ itemTitle: null, itemIndex: '1' },
{ itemTitle: null, itemIndex: '2' },
],
};
list.push(params);
tiganData.value = [...list];
2024-11-22 19:39:04 +08:00
//填空题
2024-09-26 17:18:30 +08:00
} else if (type == 5) {
let params = {
wjType: parseInt(type),
2024-11-22 19:39:04 +08:00
wjSubtype: null,
2024-09-26 17:18:30 +08:00
wjIndex: list.length + 1,
mainId: mainId,
wjTitle: null,
wjScore: null,
wjLeixing,
wjAnswer: null,
wjSfqh: '0',
2024-10-23 19:46:08 +08:00
sftjtk: '1',
2024-09-26 17:18:30 +08:00
};
list.push(params);
tiganData.value = [...list];
2024-11-22 19:39:04 +08:00
//文件题
2024-09-26 17:18:30 +08:00
} 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',
2024-10-23 19:46:08 +08:00
sftjtk: '1',
2024-09-26 17:18:30 +08:00
};
list.push(params);
tiganData.value = [...list];
2024-11-22 19:39:04 +08:00
//判断题
}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];
//文件题
}
2024-09-26 17:18:30 +08:00
}
/**
* 导入xls
* @param data 导入的数据
* @param url
*/
async function importXls(data, url) {
2024-09-29 16:25:12 +08:00
// url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel?mainId=1234';
url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel';
2024-09-26 17:18:30 +08:00
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 });
}
2024-05-23 18:10:07 +08:00
2024-09-26 17:18:30 +08:00
/**
* 编辑事件
*/
function handleEdit(record: Recordable, wjSytype) {
defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/editSwgysy', params: { id: record.id, wjSytype } }).then((res) => {
reload();
2024-05-23 18:10:07 +08:00
});
2024-09-26 17:18:30 +08:00
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
// 添加自定义类名
2024-09-26 17:18:30 +08:00
openModal(true, {
record,
isUpdate: true,
showFooter: false,
className: 'custom-modal-detail', // 添加自定义类名
2024-05-23 18:10:07 +08:00
});
2024-09-26 17:18:30 +08:00
}
/**
* 详情
*/
function handleEdit2(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
showFooter: true,
});
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
2024-12-12 14:54:54 +08:00
/**
* 删除事件
*/
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();
})
}
2024-09-26 17:18:30 +08:00
/**
* 操作栏
*/
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),
},
2024-12-12 14:54:54 +08:00
{
label: '移出题库',
onClick: handleYctk.bind(null, record),
},
2024-09-26 17:18:30 +08:00
{
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),
// },
// ];
// }
}
2024-05-23 18:10:07 +08:00
2024-09-26 17:18:30 +08:00
/* ----------------------以下为原生查询需要添加的-------------------------- */
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();
}
2024-05-23 18:10:07 +08:00
// 计算属性来决定实际使用的宽度
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);
});
2024-09-26 17:18:30 +08:00
onMounted(() => {
// 监听窗口大小变化
window.addEventListener('resize', updateScreenWidth);
// 初始化时也调用一次
updateScreenWidth();
2024-09-26 17:18:30 +08:00
// wjLeixing.value = "1";
// console.log(`🚀 ~ onMounted ~ wjLeixing:`, wjLeixing)
// queryParam.value.wjLeixing = wjLeixing;
queryParam.value.createBy = userStore.getUserInfo.username;
2024-10-23 19:46:08 +08:00
queryParam.value.sftjtk = "1";
2024-09-26 17:18:30 +08:00
reload();
});
2024-05-23 18:10:07 +08:00
</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;
}
}
2024-09-26 17:18:30 +08:00
.jeecg-basic-table-form-container {
2024-05-23 18:10:07 +08:00
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
2024-09-26 17:18:30 +08:00
.query-group-cust {
2024-05-23 18:10:07 +08:00
width: calc(50% - 15px);
min-width: 100px !important;
}
2024-09-26 17:18:30 +08:00
.query-group-split-cust {
2024-05-23 18:10:07 +08:00
width: 30px;
display: inline-block;
2024-09-26 17:18:30 +08:00
text-align: center;
2024-05-23 18:10:07 +08:00
}
2024-09-26 17:18:30 +08:00
}
/deep/.ant-card-head-title {
padding:0px;
}
.custom-modal-detail .ant-card-head-title {
white-space: normal !important; /* 覆盖原有的 white-space: nowrap */
}
2024-05-23 18:10:07 +08:00
</style>