<template>
|
<div>
|
<div class="presentation-right">
|
<el-card class="box-card">
|
<el-form :inline="true" :model="topicobj" class="demo-form-inline">
|
<div class="headline">
|
题目设置详情
|
<span style="margin-left: 30px"
|
><el-button type="primary" @click="Submittopicobj"
|
>保存</el-button
|
></span
|
>
|
</div>
|
|
<el-row :gutter="10">
|
<el-col :span="8"
|
><el-form-item label="题目标题">
|
<el-input
|
v-model="topicobj.title"
|
placeholder="请输入标题"
|
></el-input> </el-form-item
|
></el-col>
|
<el-col :span="6"
|
><el-form-item label="是否隐藏">
|
<el-radio-group v-model="topicobj.resourcea">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group> </el-form-item
|
></el-col>
|
<el-col :span="6"
|
><el-form-item label="语言">
|
<el-select
|
v-model="topicobj.languageh"
|
size="medium"
|
filterable
|
placeholder="请选择分类"
|
>
|
<el-option
|
class="topicobjaa"
|
v-for="item in xjxsoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="8"
|
><el-form-item label="是否必答">
|
<el-radio-group v-model="topicobj.resource">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group> </el-form-item
|
></el-col>
|
<el-col :span="12"
|
><el-form-item label="题目类型">
|
<el-select
|
v-model="topicobj.languageh"
|
size="medium"
|
filterable
|
placeholder="请选择分类"
|
>
|
<el-option
|
class="topicobjaa"
|
v-for="item in xjxsoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-form-item label="题目内容">
|
<el-input
|
style="width: 40vw"
|
type="textarea"
|
v-model="topicobj.title"
|
placeholder="请输入标题"
|
></el-input>
|
</el-form-item>
|
<el-row :gutter="10">
|
<el-col :span="8"
|
><el-form-item label="适用方式">
|
<el-select
|
v-model="topicobj.languageh"
|
size="medium"
|
filterable
|
placeholder="请选择分类"
|
>
|
<el-option
|
class="topicobjaa"
|
v-for="item in xjxsoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option> </el-select></el-form-item
|
></el-col>
|
<el-col :span="12"
|
><el-form-item label="适用疾病">
|
<el-select
|
v-model="topicobj.languageh"
|
size="medium"
|
filterable
|
placeholder="请选择分类"
|
>
|
<el-option
|
class="topicobjaa"
|
v-for="item in xjxsoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-form-item label="标签" prop="desc">
|
<div class="xinz-inf">
|
<el-tag
|
:key="tag"
|
type="success"
|
v-for="tag in dynamicTags"
|
closable
|
:disable-transitions="false"
|
@close="handleClose(tag)"
|
>
|
{{ tag }}
|
</el-tag>
|
<el-select
|
v-model="inputValue"
|
v-if="inputVisible"
|
@change="handleInputConfirm"
|
filterable
|
allow-create
|
default-first-option
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in optionstag"
|
:key="item.tagname"
|
:label="item.tagname"
|
:value="item.tagname"
|
>
|
</el-option>
|
</el-select>
|
<el-button
|
v-else
|
class="button-new-tag"
|
size="small"
|
@click="showInput"
|
>+ 新增标签</el-button
|
>
|
</div>
|
</el-form-item>
|
<div class="headline">
|
选项设置<span style="margin-left: 30px"
|
><el-button type="primary" @click="addoption"
|
>+新增</el-button
|
></span
|
>
|
</div>
|
<div class="topicxq" v-for="item in optionlist">
|
<el-row :gutter="10">
|
<el-col :span="11"
|
><el-form-item label="选项">
|
<el-input
|
type="text"
|
placeholder="请输入选项"
|
v-model="text"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
<el-col :span="11"
|
><el-form-item label="分值">
|
<el-input
|
type="text"
|
placeholder="请输入分值"
|
v-model="text"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
<el-col :span="2">
|
<el-button
|
type="danger"
|
icon="el-icon-delete"
|
circle
|
></el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="11"
|
><el-form-item label="选中提示">
|
<el-input
|
type="text"
|
placeholder="请输入内容"
|
v-model="text"
|
maxlength="10"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
<el-col :span="11"
|
><el-form-item label="下题跳转">
|
<el-input
|
type="text"
|
placeholder="请输入题号"
|
v-model="text"
|
show-word-limit
|
>
|
</el-input> </el-form-item
|
></el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { listtag } from "@/api/system/label";
|
|
export default {
|
data() {
|
return {
|
topicobj: {},
|
inputVisible: false,
|
inputValue: "",
|
dynamicTags: ["标签一", "标签二", "标签三"],
|
optionlist: [
|
{ value: "topic", table: "topic" },
|
{ value: "topic", table: "topic" },
|
{ value: "topic", table: "topic" },
|
],
|
options: [
|
{
|
value: "选项1",
|
label: "心血管",
|
},
|
{
|
value: "选项2",
|
label: "骨科",
|
},
|
{
|
value: "选项3",
|
label: "妇科",
|
},
|
],
|
optionstag:[],
|
xjxsoptions: [
|
{
|
value: "1",
|
label: "单选",
|
},
|
{
|
value: "2",
|
label: "多选",
|
},
|
],
|
};
|
},
|
|
created() {
|
this.gettabList();
|
},
|
|
methods: {
|
Submittopicobj() {},
|
// 新增选项
|
addoption() {},
|
// 标签-----------------
|
/** 查询标签列表 */
|
gettabList() {
|
const tagqueryParams = {
|
pageNum: 1,
|
pageSize: 1000,
|
tagcategoryid: "0",
|
};
|
listtag(tagqueryParams).then((response) => {
|
console.log(response);
|
this.options = response.rows;
|
});
|
},
|
handleClose(tag) {
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
},
|
handleInputConfirm() {
|
let inputValue = this.inputValue;
|
if (inputValue) {
|
this.dynamicTags.push(inputValue);
|
}
|
this.inputVisible = false;
|
this.inputValue = "";
|
},
|
showInput() {
|
this.inputVisible = true;
|
// 自动获取焦点
|
// this.$nextTick((_) => {
|
// this.$refs.saveTagInput.$refs.input.focus();
|
// });
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.presentation-right {
|
margin-top: 20px;
|
padding: 0 20px;
|
font-size: 18px;
|
overflow: auto;
|
.headline {
|
font-size: 20px;
|
border-left: 3px solid #41a1be;
|
padding-left: 5px;
|
margin: 15px 0;
|
}
|
.topicxq {
|
width: 50%;
|
background-color: #e2f5fc;
|
border-radius: 4px;
|
margin-top: 10px;
|
padding-left: 10px;
|
padding-top: 15px;
|
}
|
.xinz-inf {
|
font-size: 18px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
line-height: 48px;
|
|
.el-tag + .el-tag {
|
margin-left: 10px;
|
}
|
.button-new-tag {
|
margin-left: 10px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
.input-new-tag {
|
width: 90px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
}
|
}
|
</style>
|
