<template>
|
<div class="examineemanagement">
|
<!-- 左侧栏 -->
|
|
<div class="sidecolumn">
|
<div class="sidecolumn-top">
|
<div class="top-wj">历史版本</div>
|
<!-- <div class="top-tj" @click="dialogFormVisible = true">+添加</div> -->
|
</div>
|
<div class="bottom-fl">
|
<el-tabs tab-position="right" v-model="activeName">
|
<el-tab-pane
|
class="tab-paness"
|
:key="index"
|
v-for="(item, index) in editableTabs"
|
>
|
<div class="mulsz" slot="label">
|
{{ item.versionsac
|
}}<span style="margin-left: 30px">{{
|
item.startUsing ? "启用" : "禁用"
|
}}</span>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<!-- 右侧数据 -->
|
|
<div class="leftvlue">
|
<div v-if="activeName == '0'">
|
<div class="examine-top">
|
<span>编辑人：{{ basicInformation.name }}</span>
|
<span>编辑时间：{{ basicInformation.day }}</span>
|
<span class="ewmyl">二维码预览</span>
|
</div>
|
<!-- 基础信息 -->
|
<div class="examine-jic">
|
<div class="headline">基础信息</div>
|
<div class="jic-value">
|
<div>
|
问卷名称：{{ basicInformation.wname
|
}}<span>适用疾病：{{ basicInformation.jbname }}</span>
|
</div>
|
<div>表单描述：{{ basicInformation.miaosname }}</div>
|
</div>
|
</div>
|
<!-- 问卷预览 -->
|
<div class="examine-jic">
|
<div class="headline">问卷预览</div>
|
<div class="jic-value">
|
<div>
|
问卷介绍：<span class="wenjuanjs"
|
>非常好非常好非常好非常好非常好非常好非常好非常好</span
|
>
|
</div>
|
<div>
|
问卷介绍：<span class="wenjuanjs"
|
>非常好非常好非常好非常好非常好非常好</span
|
>
|
</div>
|
</div>
|
<div class="preview-left">
|
<!-- 单选 -->
|
<div class="topic-dev" v-for="item in valssu" :key="item.aaa">
|
<div class="dev-text">
|
{{ item.idd }}、[单选]  <span>{{ item.wssd }}</span>
|
</div>
|
<div class="dev-xx">
|
<el-radio-group v-model="radio">
|
<el-radio
|
v-for="(items, index) in item.sdadd"
|
:key="index"
|
:label="index"
|
>{{ items }}</el-radio
|
>
|
</el-radio-group>
|
</div>
|
</div>
|
<!-- 多选 -->
|
<div class="topic-dev" v-for="item in valssu" :key="item.aaa">
|
<div class="dev-text">
|
{{ item.idd }}、[多选]  <span>{{ item.wssd }}</span>
|
</div>
|
<div class="dev-xx">
|
<el-checkbox-group v-model="radios">
|
<el-checkbox
|
v-for="(items, index) in item.sdadd"
|
:key="index"
|
:label="index"
|
>
|
{{ items }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<!-- 填空 -->
|
<div class="topic-dev" v-for="item in valssu" :key="item.aaa">
|
<div class="dev-text">
|
{{ item.idd }}、[填空]  <span>{{ item.wssd }}</span>
|
</div>
|
<div class="dev-xx">
|
<el-input placeholder="请输入答案" v-model="radioas" clearable>
|
</el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="examine-jieg">
|
<div class="headline">结果反馈</div>
|
<div></div>
|
<div></div>
|
</div>
|
</div>
|
<div v-else-if="activeName == '1'">bbb</div>
|
<div v-else-if="activeName == '2'">ccc</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
activeName: "0",
|
radios: [], //多选题选中
|
|
basicInformation: {
|
name: "老吴",
|
day: "2023年12月11日16时12分11秒",
|
wname: "大大大",
|
jbname: "小小小",
|
miaosname: "非常好大大大",
|
},
|
valssu: [
|
{
|
idd: 1,
|
wssd: "你最近怎么样",
|
sdadd: ["sss", "ssccss", "ssaas", "ss"],
|
},
|
],
|
editableTabs: [
|
{
|
versionsac: "1.0.3",
|
startUsing: true,
|
},
|
{
|
versionsac: "1.0.2",
|
startUsing: false,
|
},
|
{
|
versionsac: "1.0.1",
|
startUsing: false,
|
},
|
],
|
};
|
},
|
|
created() {},
|
|
methods: {
|
handleClick() {},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.examineemanagement {
|
display: flex;
|
.sidecolumn {
|
width: 300px;
|
min-height: 100vh;
|
text-align: center;
|
// display: flex;
|
margin-top: 20px;
|
margin: 20px;
|
padding: 30px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.sidecolumn-top {
|
display: flex;
|
justify-content: space-between;
|
.top-wj {
|
font-size: 20px;
|
}
|
.top-tj {
|
font-size: 18px;
|
|
color: rgb(0, 89, 255);
|
cursor: pointer;
|
}
|
}
|
.center-ss {
|
margin-top: 30px;
|
.input-with-select {
|
height: 40px !important;
|
}
|
}
|
.bottom-fl {
|
margin-top: 30px;
|
display: center !important;
|
}
|
}
|
.leftvlue {
|
width: 80%;
|
margin-top: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.mulsz {
|
font-size: 20px;
|
span {
|
margin-left: 30px;
|
}
|
}
|
.examine-top {
|
font-size: 20px;
|
margin-bottom: 40px;
|
span {
|
margin-right: 30px;
|
}
|
.ewmyl {
|
color: rgb(0, 81, 255);
|
cursor: pointer;
|
}
|
}
|
.examine-jic {
|
.headline {
|
font-size: 28px;
|
border-left: 8px solid #41a1be;
|
padding-left: 5px;
|
margin-bottom: 15px;
|
}
|
.jic-value {
|
font-size: 20px;
|
border-top: 1px solid #a7abac;
|
padding: 20px;
|
div {
|
margin-bottom: 15px;
|
span {
|
margin-left: 180px;
|
}
|
}
|
.wenjuanjs {
|
margin-left: 15px;
|
padding-bottom: 5px;
|
border-bottom: 1px solid #a7abac;
|
}
|
}
|
.preview-left {
|
margin: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.topic-dev {
|
margin-bottom: 25px;
|
font-size: 20px !important;
|
.dev-text {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
.examine-jieg {
|
.headline {
|
font-size: 28px;
|
padding-left: 5px;
|
border-left: 8px solid #41a1be;
|
// border-bottom: 1px solid #41a1be;
|
margin-bottom: 15px;
|
}
|
}
|
}
|
}
|
::v-deep.el-tabs--left,
|
.el-tabs--right {
|
overflow: hidden;
|
align-items: center;
|
display: flex;
|
}
|
::v-deep.el-input--medium .el-input__inner {
|
height: 40px !important;
|
}
|
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
|
height: 40px;
|
width: 5px;
|
left: 0;
|
}
|
::v-deep.el-tabs--right .el-tabs__item.is-right {
|
display: block;
|
font-size: 20px;
|
}
|
::v-deep.el-radio-group {
|
span {
|
font-size: 24px;
|
}
|
}
|
::v-deep.el-checkbox-group {
|
span {
|
font-size: 24px;
|
}
|
}
|
</style>
|
