<template>
<div>
<div class
="search-title">查询条件</div>
<div class
="search-box">
<a-f
orm-model :model
="searchF
orm" layout
="
inl
ine" ref
="searchF
orm" class
="searchF
orm">
<a-f
orm-model-item label
="题库名称" prop
="title">
<a-
input v-model
="searchF
orm
.title" placeholder
="请输入题库名称" />
</a-f
orm-model-item>
<a-f
orm-model-item class
="searchButton">
<a-button type
="primary" v-if
="QX
.read" @click
="getSearch">查询</a-button>
<a-button type
="default" v-if
="QX
.read" @click
="restSearch
('searchF
orm'
)">重置</a-button>
</a-f
orm-model-item>
</a-f
orm-model>
</div>
<div class
="table-operation">
<a-button type
="primary" @click
="addB
ank" icon
="plus" v-if
="QX
.add">新增</a-button>
</div>
<a-table
:
columns="
columns"
:data-source
="dataList"
:pag
ination
="false"
:load
ing
="load
ing"
rowKey
="questionB
ankId"
:scroll
="{ y: this
.$getViewp
ortSize
().height - 300 }"
>
<sp
an slot
="action" slot-scope
="text, rec
ord">
<a @click
="editAuth
(rec
ord
)" v-if
="QX
.edit"><a-icon class
="iconBtn" type
="edit" />编辑</a>
<a-divider v-if
="QX
.edit && QX
.delete" type
="vertical" />
<a-popconfirm
title
="确认是否删除？"
ok-text
="是"
c
ancel-text
="否"
@confirm
="removeB
ank
(rec
ord
)"
>
<a v-if
="QX
.delete"><a-icon class
="iconBtn" type
="delete" />删除</a>
</a-popconfirm>
</sp
an>
</a-table>
<template slot
="action" slot-scope
="text, rec
ord,
index">
<a @click
="removeQuestion
(index
)">删除</a>
</template>
<a-pag
ination
show-size-ch
anger
:total
="totalPage"
:current
="page
Index"
:pageSize
="pageSize"
@showSizeCh
ange
="onShowSizeCh
ange"
@ch
ange
="onCh
angePage"
style
="float: right; marg
in-top: 15px"
/>
<a-drawer
:closable
="
true"
:title
="title"
width
="auto"
:visible
="visible"
@close
="visible
= !visible"
>
<a-sp
in class
="submitLoad
ing" :sp
inn
ing
="submitLoad
ing">
<a-f
orm-model :model
="f
orm" :label-col
="labelCol" :wrapper-col
="wrapperCol" :rules
="rules" ref
="f
orm" class
="lay-drawer-f
orm">
<a-row>
<a-col :sp
an="12">
<a-f
orm-model-item label
="题库名称" prop
="title">
<a-
input v-model
="f
orm
.title" :maxLength
="25" placeholder
="请输入题库名称" style
="width: 380px" />
</a-f
orm-model-item>
</a-col>
<a-col :sp
an="12">
<a-f
orm-model-item label
="关联岗位" prop
="positionId">
<a-select v-model
="f
orm
.positionId" style
="width: 380px" placeholder
="请选择岗位">
<a-select-option v-f
or="
(label, value
) in positionDict" :key
="value" :value
="value">
{{ label }}
</a-select-option>
</a-select>
</a-f
orm-model-item>
</a-col>
<a-col :sp
an="12">
<a-f
orm-model-item label
="参与PK" prop
="participate
InPk">
<a-switch v-model
="f
orm
.participate
InPk" :checkedValue
="1" :unCheckedValue
="0" />
</a-f
orm-model-item>
</a-col>
</a-row>
</a-f
orm-model>
<!-- 新增题目区域 -->
<div class
="question-batch">
<div style
="marg
in: 20px 0;
display: flex; justify-content: space-between; align-items: center;">
<a-button type
="primary" @click
="downloadTemplate">下载模板</a-button>
<div class
="imp
ort-add-buttons">
<a-upload
name
="file"
:showUploadList
="false"
:bef
oreUpload
="bef
oreUpload"
accept
="
.xlsx,
.xls"
:disabled
="!imp
ortEnabled"
>
<a-button :disabled
="!imp
ortEnabled"><a-icon type
="upload" /> 导入题目</a-button>
</a-upload>
<a-button
type
="dashed"
@click
="addTopicVisible
= true"
:disabled
="!addEnabled"
>
<a-icon type
="plus" /> 添加题目
</a-button>
</div>
</div>
<!-- 题目列表容器添加样式 -->
<div class
="topic-list-conta
iner">
<!-- 题目列表 -->
<div class
="topic-grid">
<!-- 题目编号和内容 -->
<div v-f
or="
(topic,
index
) in topicList" :key
="topic
.topicId" class
="topic-item">
<!-- 题目编号和内容 -->
<div class
="topic-content">
<strong>{{
index + 1 }}
. {{ topic
.content }}</strong>
</div>
<!-- 选项列表 -->
<div class
="options" v-if
="topic
.topicType
=== 1">
<label v-f
or="option
in getOptions
(topic
)" :key
="option
.key">
<
input
type
="radio"
:name
="'topic' + topic
.topicId"
:value
="option
.key"
:checked
="topic
.c
orrect
Answer
=== option
.key"
/>
<!-- @ch
ange
="check
Answer
(topic, option
.key
)"-->
{{ option
.key }}
. {{ option
.value }}
</label>
</div>
<!-- 判断题 -->
<div v-if
="topic
.topicType
=== 2" class
="options">
<label>
<
input
type
="radio"
:name
="'topic' + topic
.topicId"
value
="正确"
:checked
="topic
.c
orrect
Answer
=== '正确'"
/>
<!-- @ch
ange
="check
Answer
(topic, '正确'
)"-->
正确
</label>
<label>
<
input
type
="radio"
:name
="'topic' + topic
.topicId"
value
="错误"
:checked
="topic
.c
orrect
Answer
=== '错误'"
/>
<!-- @ch
ange
="check
Answer
(topic, '错误'
)"-->
错误
</label>
</div>
<!-- 删除按钮 -->
<div class
="topic-delete">
<a @click
="removeQuestion
(topic
.topicId
)">
<a-icon type
="delete" /> 删除
</a>
</div>
</div>
</div>
<!-- 分页组件移到题目列表区域外面 -->
<div class
="pag
ination-wrapper">
<a-pag
ination
v-model
="topicPageNum"
:pageSize
="topicPageSize"
:total
="totalTopicCount"
@ch
ange
="h
andleTopicPageCh
ange"
style
="text-align: right;"
/>
</div>
</div>
</div>
<div
:style
="{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
b
orderTop: '1px solid #e9e9e9',
padd
ing: '8px 16px',
background: '#fff',
textAlign: 'right',
z
Index: 1,
}">
<a-button
type
="default"
@click
="visible
= !visible"
>
取消
</a-button>
<a-button
type
="primary"
@click
="submitF
orm"
>
确认
</a-button>
</div>
</a-sp
in>
</a-drawer>
<!-- 新增题目抽屉 -->
<a-drawer
title
="新增题目"
:visible
="addTopicVisible"
@close
="addTopicVisible
= false"
width
="500"
>
<a-f
orm-model :model
="addTopicF
orm" layout
="vertical" :rules
="rulesF
orAddTopic" ref
="addTopicF
ormRef">
<!-- 题目类型 -->
<a-f
orm-model-item label
="题目类型" prop
="topicType">
<a-select v-model
="addTopicF
orm
.topicType" style
="width: 100%">
<a-select-option :value
="1">选择题</a-select-option>
<a-select-option :value
="2">判断题</a-select-option>
</a-select>
</a-f
orm-model-item>
<!-- 题目内容 -->
<a-f
orm-model-item label
="题目内容" prop
="content">
<a-
input v-model
="addTopicF
orm
.content" placeholder
="请输入题目内容" />
</a-f
orm-model-item>
<!-- 选择题选项 -->
<div v-if
="addTopicF
orm
.topicType
=== 1">
<a-f
orm-model-item label
="选项A" prop
="optionA">
<a-
input v-model
="addTopicF
orm
.optionA" placeholder
="请输入选项A内容" />
</a-f
orm-model-item>
<a-f
orm-model-item label
="选项B" prop
="optionB">
<a-
input v-model
="addTopicF
orm
.optionB" placeholder
="请输入选项B内容" />
</a-f
orm-model-item>
<a-f
orm-model-item label
="选项C" prop
="optionC">
<a-
input v-model
="addTopicF
orm
.optionC" placeholder
="请输入选项C内容" />
</a-f
orm-model-item>
<a-f
orm-model-item label
="选项D" prop
="optionD">
<a-
input v-model
="addTopicF
orm
.optionD" placeholder
="请输入选项D内容" />
</a-f
orm-model-item>
<a-f
orm-model-item label
="正确答案" prop
="c
orrect
Answer">
<a-select v-model
="addTopicF
orm
.c
orrect
Answer" style
="width: 100%">
<a-select-option value
="A">A</a-select-option>
<a-select-option value
="B">B</a-select-option>
<a-select-option value
="C">C</a-select-option>
<a-select-option value
="D">D</a-select-option>
</a-select>
</a-f
orm-model-item>
</div>
<!-- 判断题选项 -->
<div v-if
="addTopicF
orm
.topicType
=== 2">
<a-f
orm-model-item label
="正确答案" prop
="c
orrect
Answer">
<a-select v-model
="addTopicF
orm
.c
orrect
Answer" style
="width: 100%">
<a-select-option value
="正确">正确</a-select-option>
<a-select-option value
="错误">错误</a-select-option>
</a-select>
</a-f
orm-model-item>
</div>
<div class
="drawer-footer">
<a-button @click
="addTopicVisible
= false">取消</a-button>
<a-button type
="primary" @click
="saveNewTopic">保存</a-button>
</div>
</a-f
orm-model>
</a-drawer>
</div>
</template>
<script>
imp
ort { req, fileDownload } from '
../
../
../api/axiosFun';
imp
ort preventBack from 'vue-prevent-b
rowser-back';
exp
ort default {
name: 'B
ank',
mix
ins: [preventBack],
data
() {
return {
QX: {},
topicQX: {},
topicList: [],
totalTopicCount: 0, // 题目总数
topicPageNum: 1, // 当前页码
topicPageSize: 10, // 每页数量
addTopicVisible: false,
addTopicF
orm: {
content: '', // 题目内容
topicType: 1, // 题目类型：1
=选择题，2
=判断题
optionA: '',
optionB: '',
optionC: '',
optionD: '',
c
orrect
Answer: '',
},
disabled: false,
checkedKeys: [],
selectAuth: [],
treeData: [],
positionDict: {},
title: '',
labelCol: { sp
an: 4 },
wrapperCol: { sp
an: 20 },
tableHeight: 0,
exp
anded: false, // 筛选条件是否展开
f
orm: {
questionB
ankId: 0,
b
ankCode: '',
title: '',
positionId: '',
participate
InPk:
true,
},
isEdit: false, // 是否是编辑状态
isAdd: false, // 是否是新增状态
imp
ortEnabled: false, // 导入题目按钮是否可用 - 默认为不可用
addEnabled: false, // 添加题目按钮是否可用 - 默认为不可用
rules: {
positionId: [
{ required:
true, message: '请选择岗位', trigger: 'blur' },
],
title: [
{ required:
true, message: '请输入题库名称', trigger: 'blur' },
],
},
rulesF
orAddTopic: {
content: [
{ required:
true, message: '请输入题目内容', trigger: ['blur', 'ch
ange'] },
],
topicType: [
{ required:
true, message: '请选择题目类型', trigger: 'ch
ange' },
],
optionA: [
{
required:
(rule, value
) => this
.addTopicF
orm
.topicType
=== 1,
message: '选择题必须输入选项A',
trigger: ['blur', 'ch
ange'],
},
],
optionB: [
{
required:
(rule, value
) => this
.addTopicF
orm
.topicType
=== 1,
message: '选择题必须输入选项B',
trigger: ['blur', 'ch
ange'],
},
],
optionC: [
{
required:
(rule, value
) => this
.addTopicF
orm
.topicType
=== 1,
message: '选择题必须输入选项C',
trigger: ['blur', 'ch
ange'],
},
],
optionD: [
{
required:
(rule, value
) => this
.addTopicF
orm
.topicType
=== 1,
message: '选择题必须输入选项D',
trigger: ['blur', 'ch
ange'],
},
],
c
orrect
Answer: [
{ required:
true, message: '请选择正确答案', trigger: 'ch
ange' },
],
},
searchF
orm: {
title: '',
},
visible: false,
dataList: [],
columns,
load
ing: false,
submitLoad
ing: false,
page
Index: 1,
pageSize: 10,
totalPage: 0,
ops: {
vuescroll: {},
scrollP
anel: {},
rail: {
keepShow:
true,
},
bar: {
hoverStyle:
true,
onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
background: '#F5F5F5', // 滚动条颜色
opacity: 1, // 滚动条透明度
'overflow-x': '
hidden',
},
},
};
},
watch: {
'addTopicF
orm
.topicType': function
(newVal
) {
// 当题目类型变化时，触发相关字段的验证
this
.$nextTick
(() => {
if
(this
.$refs
.addTopicF
ormRef
) {
// 验证选项字段
if
(newVal
=== 1
) {
this
.$refs
.addTopicF
ormRef
.validateFields
(['optionA', 'optionB', 'optionC', 'optionD']
);
} else {
// 清除非必填字段的验证状态
this
.$refs
.addTopicF
ormRef
.clearValidate
(['optionA', 'optionB', 'optionC', 'optionD']
);
}
}
}
);
},
visible
(newVal, oldVal
) {
if
(!newVal
) {
this
.restF
orm
('f
orm'
);
this
.f
orm
.questionB
ankId
= 0;
this
.checkedKeys
= [];
this
.selectAuth
= [];
this
.treeData
= [];
// 重置状态标志
this
.isEdit
= false;
this
.isAdd
= false;
} else {
// 当抽屉打开时强制更新按钮状态
this
.$nextTick
(() => {
this
.$f
orceUpdate
();
}
);
}
},
},
mounted
() {
this
.actionTitle
= '操作';
this
.getDict
('position'
).then
(res
=> {
const dictMap
= {};
res
.data
.f
orEach
(item
=> {
dictMap[item
.dicValue]
= item
.dic
DisplayName;
}
);
this
.positionDict
= dictMap;
}
);
this
.getB
ankList
();
},
methods: {
// 获取字典数据方法
getDict
(type
) {
return req
('get', `/dict/getDictItemByNo`, { dicNo: type }
)
.then
((res
) => {
if
(res
.result
=== 'success'
) {
return res;
}
throw new Err
or(res
.message || '获取字典数据失败'
);
}
)
.catch
((err
or) => {
console
.err
or(`获取${type}字典失败:`, err
or);
throw err
or;
}
);
},
/* 新增题库 */
addB
ank
() {
this
.visible
= true;
this
.disabled
= false;
this
.title
= '新增题库';
// 获取功能权限树
req
('get', '/b
ank/getTree', {}
).then
((res
) => {
this
.treeData
= res
.data;
}
);
// 初始化题目列表为空
this
.topicList
= [];
this
.totalTopicCount
= 0;
this
.topicPageNum
= 1;
this
.isEdit
= false; // 不是编辑状态
this
.isAdd
= true; // 设置为新增状态
// 在新增状态下禁用导入和添加功能
this
.imp
ortEnabled
= false;
this
.addEnabled
= false;
// 强制更新按钮状态
this
.$nextTick
(() => {
this
.$f
orceUpdate
();
}
);
},
// 查询
getSearch
() {
this
.page
Index
= 1;
this
.getB
ankList
();
},
/* 重置查询 */
restSearch
(f
orm
) {
this
.restF
orm
(f
orm
);
this
.page
Index
= 1;
this
.getB
ankList
();
},
/* 删除题库 */
removeB
ank
(rec
ord
) {
this
.load
ing
= true;
req
('post', '/b
ank/removeBQuestionB
ank', {
questionB
ankId: rec
ord
.questionB
ankId,
}
).then
((res
) => {
this
.load
ing
= false;
if
(res
.result
=== 'success'
) {
this
.$message
.success
(res
.message
);
this
.getB
ankList
();
}
}
);
},
downloadTemplate
() {
fileDownload
('get', '/topic/downloadTemplate', null
).then
((res
) => {
const blob
= new Blob
([res], {
type: 'application/vnd
.openxmlf
ormats-office
document.spreadsheetml
.sheet',
}
);
const l
ink
= document.createElement
('a'
);
l
ink
.href
= w
indow
.URL
.createObjectURL
(blob
);
l
ink
.download
= '题库模板
.xlsx';
l
ink
.click
();
w
indow
.URL
.revokeObjectURL
(l
ink
.href
);
}
).catch
(() => {
this
.$message
.err
or('下载失败'
);
}
);
},
bef
oreUpload
(file
) {
// 显示加载状态
this
.load
ing
= true;
const f
ormData
= new F
ormData
();
f
ormData
.append
('file', file
);
f
ormData
.append
('questionB
ankId', this
.f
orm
.questionB
ankId
); // 添加 questionB
ankId 字段
req
('post', '/topic/imp
ort', f
ormData, {
headers: {
'Content-Type': 'multipart/f
orm-data',
},
}
)
.then
((res
) => {
// 隐藏加载状态
this
.load
ing
= false;
if
(res
.result
=== 'success'
) {
// 确保在DOM更新后再刷新题目列表
this
.$nextTick
(() => {
// 刷新题目列表
this
.getTopicList
(this
.f
orm
.questionB
ankId, this
.topicPageNum, this
.topicPageSize
)
.then
(() => {
this
.$message
.success
('导入成功'
);
}
)
.catch
(() => {
this
.$message
.err
or('刷新题目列表失败'
);
}
);
}
);
} else {
this
.$message
.err
or(res
.message || '导入失败'
);
}
}
)
.catch
((err
or) => {
// 隐藏加载状态
this
.load
ing
= false;
this
.$message
.err
or('导入失败，请重试'
);
console
.err
or('导入题目出错:', err
or);
}
);
return false; // 阻止默认上传行为
},
// 获取题库下的题目列表（返回Promise以便链式调用）
getTopicList
(questionB
ankId, pageNum
= 1, pageSize
= 10
) {
return new Promise
((resolve, reject
) => {
req
('post', '/topic/list', {
questionB
ankId,
page: pageNum,
rows: pageSize,
}
).then
((res
) => {
if
(res
.result
=== 'success'
) {
this
.topicQX
= res
.QX;
if
(!this
.topicQX
.edit && !this
.topicQX
.delete
) {
this
.hideAction
();
} else {
this
.topicList
= res
.data
.map
((item,
index
) =>
({
index:
(pageNum - 1
) * pageSize +
index + 1,
content: item
.content,
optionA: item
.optionA,
optionB: item
.optionB,
optionC: item
.optionC,
optionD: item
.optionD,
topicId: item
.topicId,
c
orrect
Answer: item
.c
orrect
Answer,
topicType: item
.topicType,
}
));
}
// 更新总条数用于分页组件
this
.totalTopicCount
= res
.page
.totalResult;
resolve
(res
);
} else {
this
.$message
.err
or(res
.message || '获取题目列表失败'
);
reject
(res
);
}
}
).catch
((err
or) => {
this
.$message
.err
or('获取题目列表失败'
);
reject
(err
or);
}
);
}
);
},
h
andleTopicPageCh
ange
(page
) {
this
.topicPageNum
= page;
this
.getTopicList
(this
.f
orm
.questionB
ankId, page, this
.topicPageSize
);
},
// 获取选择题的选项
getOptions
(topic
) {
if
(topic
.topicType
=== 1
) {
// 选择题：返回 A/B/C/D 选项
const options
= [];
if
(topic
.optionA
) options
.push
({ key: 'A', value: topic
.optionA }
);
if
(topic
.optionB
) options
.push
({ key: 'B', value: topic
.optionB }
);
if
(topic
.optionC
) options
.push
({ key: 'C', value: topic
.optionC }
);
if
(topic
.optionD
) options
.push
({ key: 'D', value: topic
.optionD }
);
return options;
} else if
(topic
.topicType
=== 2
) {
// 判断题：直接返回 正确/错误
return [
{ key: '正确', value: '正确' },
{ key: '错误', value: '错误' },
];
}
return [];
},
check
Answer
(topic, selected
Answer
) {
// 仅记录用户选择的答案，不进行是否正确的判断
this
.$set
(topic, 'user
Answer', selected
Answer
);
},
resetAddTopicF
orm
() {
this
.addTopicF
orm
= {
content: '',
topicType: 1,
optionA: '',
optionB: '',
optionC: '',
optionD: '',
c
orrect
Answer: '',
};
},
saveNewTopic
() {
this
.$refs
.addTopicF
ormRef
.validate
((valid, fields
) => {
if
(!valid
) {
console
.log
('表单验证失败:', fields
);
// 找出第一个错误字段并聚焦
const firstErr
orField
= Object
.keys
(fields
).f
ind
(key
=> fields[key]
);
if
(firstErr
orField && this
.$refs
.addTopicF
ormRef
) {
const f
ormItem
= this
.$refs
.addTopicF
ormRef
.$children
.f
ind
(
child
=> child
.prop
=== firstErr
orField,
);
if
(f
ormItem && f
ormItem
.$el
) {
const
input
= f
ormItem
.$el
.querySelect
or('
input, select, textarea'
);
if
(input
) input
.focus
();
}
}
return;
}
// 验证通过，处理保存逻辑
const newTopic
= {
...this
.addTopicF
orm };
// 发送请求保存题目
req
('post', '/topic/add', {
questionB
ankId: this
.f
orm
.questionB
ankId,
optionA: newTopic
.optionA,
optionB: newTopic
.optionB,
optionC: newTopic
.optionC,
optionD: newTopic
.optionD,
c
orrect
Answer: newTopic
.c
orrect
Answer,
content: newTopic
.content,
topicType: newTopic
.topicType,
}
).then
((res
) => {
if
(res
.result
=== 'success'
) {
this
.$message
.success
('题目添加成功'
);
this
.addTopicVisible
= false;
this
.getTopicList
(this
.f
orm
.questionB
ankId
); // 刷新题目列表
} else {
this
.$message
.err
or(res
.message || '保存失败'
);
}
this
.resetAddTopicF
orm
();
}
).catch
((err
) => {
this
.$message
.err
or('网络异常，请重试'
);
}
);
}
);
},
/* 删除题库下的题目 */
removeQuestion
(topicId
) {
this
.$confirm
({
title: '确认删除该题目？',
content: '删除后将无法恢复',
okText: '是',
c
ancelText: '否',
onOk:
() => {
req
('post', '/topic/removeBTopic', {
topicId,
questionB
ankId: this
.f
orm
.questionB
ankId,
}
).then
((res
) => {
if
(res
.result
=== 'success'
) {
this
.$message
.success
(res
.message
);
// 刷新题目列表
this
.getTopicList
(this
.f
orm
.questionB
ankId, this
.topicPageNum, this
.topicPageSize
);
} else {
this
.$message
.err
or(res
.message || '删除失败'
);
}
}
);
},
}
);
},
editAuth
(rec
ord
) {
this
.load
ing
= true;
req
('post', '/b
ank/getBQuestionB
ank', {
questionB
ankId: rec
ord
.questionB
ankId,
}
).then
((res
) => {
this
.load
ing
= false;
if
(res
.result
=== 'success'
) {
this
.visible
= true;
this
.disabled
= true;
this
.title
= '修改题库';
this
.isEdit
= true; // 设置为编辑状态
this
.isAdd
= false; // 不是新增状态
// 在编辑状态下启用导入和添加功能
this
.imp
ortEnabled
= true;
this
.addEnabled
= true;
// 强制更新按钮状态
this
.$nextTick
(() => {
this
.$f
orceUpdate
();
}
);
const b
ank
= res
.data;
this
.$nextTick
(() => {
this
.f
orm
.questionB
ankId
= b
ank
.questionB
ankId;
this
.f
orm
.title
= b
ank
.title;
this
.f
orm
.participate
InPk
= Boole
an(b
ank
.participate
InPk
);
this
.f
orm
.positionId
= b
ank
.positionId;
this
.treeData
= b
ank
.treeData;
this
.checkedKeys
= b
ank
.auths;
// 获取题目列表
this
.topicPageNum
= 1;
this
.getTopicList
(b
ank
.questionB
ankId, this
.topicPageNum, this
.topicPageSize
);
}
);
}
}
);
},
/* 保存
or修改题库信息 */
submitF
orm
() {
this
.$refs
.f
orm
.validate
((valid
) => {
if
(valid
) {
this
.f
orm
.participate
InPk
= this
.f
orm
.participate
InPk ? 1 : 0;
const url
= this
.f
orm
.questionB
ankId ? 'edit' : 'add';
const selectAuth
= this
.selectAuth;
this
.f
orm
.selectAuth
= JSON
.str
ingify
(selectAuth
);
this
.submitLoad
ing
= true;
req
('post', `/b
ank/${url}`, this
.f
orm
).then
((res
) => {
if
(res
.result
=== 'success'
) {
this
.visible
= false;
this
.getB
ankList
();
// 如果是新增题库且成功，获取题目列表
if
(!this
.f
orm
.questionB
ankId && res
.data && res
.data
.questionB
ankId
) {
this
.f
orm
.questionB
ankId
= res
.data
.questionB
ankId;
this
.topicPageNum
= 1;
this
.getTopicList
(res
.data
.questionB
ankId, this
.topicPageNum, this
.topicPageSize
);
// 新增成功后启用导入和添加功能
this
.imp
ortEnabled
= true;
this
.addEnabled
= true;
}
this
.$message
.success
(res
.message
);
// 重置新增/编辑状态
this
.isEdit
= false;
this
.isAdd
= false;
}
this
.submitLoad
ing
= false;
}
);
}
}
);
},
/* 重置表单 */
restF
orm
(f
orm
) {
this
.$refs[f
orm]
.resetFields
();
},
/* 改变页数事件 */
onCh
angePage
(page, pageSize
) {
this
.page
Index
= page;
this
.getB
ankList
();
},
/* 改变每页显示条数 */
onShowSizeCh
ange
(current, pageSize
) {
this
.page
Index
= 1;
this
.pageSize
= pageSize;
this
.getB
ankList
();
},
/* 题库信息列表 */
getB
ankList
() {
this
.load
ing
= true;
this
.searchF
orm
.page
= this
.page
Index;
this
.searchF
orm
.rows = this
.pageSize;
req
('post', '/b
ank/list', this
.searchF
orm
)
.then
((res
) => {
if
(res
.result
=== 'success'
) {
this
.dataList
= res
.data;
this
.QX
= res
.QX;
// 无权限隐藏操作列
if
(!this
.QX
.edit && !this
.QX
.delete
) {
this
.hideAction
();
} else if
(columns[
columns.length - 1]
.title !
= '操作'
) {
columns.push
(actionShow
);
}
this
.totalPage
= res
.page
.totalResult;
}
this
.load
ing
= false;
}
).catch
((err
or) => {
this
.load
ing
= false;
}
);
},
/* 无所有行操作权限时,隐藏操作栏 */
hideAction
() {
if
(columns[
columns.length - 1]
.title
== '操作'
) {
columns.splice
(columns.length - 1, 1
);
}
},
/* 校验代号类型 */
validCode
(value
) {
if
(value
.length > 20
) {
value
= value
.slice
(0, 20
);
}
f
or (let i
= value
.length - 1; i >
= 0; i--
) {
const unicode
= value
.charCodeAt
(i
);
if
(unicode > 65280 && unicode < 65375
) {
value
= value
.substr
(0, i
);
}
}
this
.value
= value;
},
},
};
const actionShow
= {
title: '操作',
width: '200px',
hide:
true,
data
Index: 'action',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' },
};
const
columns = [
{
title: '序号',
width: '50px',
align: 'center',
customRender:
(text, row,
index
) =>
index + 1,
},
{
title: '题库名称',
align: 'center',
data
Index: 'title',
key: 'title',
width: '120px',
},
{
title: '涉及岗位',
align: 'center',
data
Index: 'positionName',
key: 'positionName',
width: '110px',
},
{
title: '题目数量',
data
Index: 'topicCount',
key: 'topicCount',
align: 'center',
width: '180px',
},
{
title: '操作',
width: '150px',
hide:
true,
data
Index: 'action',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' },
},
];
</script>
<style scoped>
.topic-list-conta
iner {
max-height: calc
(100vh - 400px
); /* 根据实际布局调整最大高度 */
overflow-y: auto;
}
.pag
ination-wrapper {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padd
ing: 10px;
z-
index: 1;
box-shadow: 0 2px 8px rgba
(0, 0, 0, 0
.1
);
marg
in-top: 15px;
}
.topic-grid {
display: grid;
grid-template-
columns: repeat
(2, 1fr
);
gap: 20px;
}
.topic-item {
b
order: 1px solid #e8e8e8;
padd
ing: 15px;
b
order-radius: 4px;
position: relative; /* 为绝对定位的子元素提供定位上下文 */
}
.topic-content {
font-size: 16px;
marg
in-bottom: 10px;
}
.options label {
display: block;
marg
in: 5px 0;
font-size: 14px;
}
.options
input[type
="radio"] {
marg
in-right: 5px;
}
/* 按钮禁用状态样式优化 */
.ant-upload
.ant-upload-disabled
.ant-upload-list,
.ant-btn[disabled] {
curs
or: not-allowed;
opacity: 0
.5;
}
.topic-delete {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<style scoped>
@imp
ort "
../
../
../assets/css/ma
incss
.css";
</style>
在编辑页面中选择某个题目的选项后，再次打开该题时，默认显示的是上次选择的选项而不是正确答案。修改此问题
本文介绍如何使用Excel对象模型通过VBA代码自动化地隐藏或显示Excel工作表中的行和列。此方法适用于外部Excel文件，并提供了示例代码来演示如何实现这一功能。
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
