This commit is contained in:
yanran200730
2022-10-25 16:31:11 +08:00
parent a62913ee6c
commit aeb4fcd452
2 changed files with 274 additions and 6 deletions

View File

@@ -83,6 +83,13 @@
</div>
</template>
</el-table-column>
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="showDetail(row.id)">查看内容</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</div>
</div>
@@ -124,6 +131,76 @@
</div>
</template>
</ai-card>
<ai-dialog
customFooter
:visible.sync="isShow"
@onConfirm="isShow = false"
width="800px"
title="表单">
<div class="middle-content form">
<div class="middle-content__wrapper">
<div>
<div class="left-item__item left-item__item--banner" key="banner" v-if="info.headPicture">
<img :src="info.headPicture">
</div>
<div class="left-item__item left-item__item--formname" key="title">
<h2>{{ info.title }}</h2>
</div>
<div class="left-item__item left-item__item--text" key="text">
<p>{{ info.tableExplain }}</p>
</div>
</div>
<div
class="left-item__item components-item"
v-for="(item, i) in targetList"
:key="i">
<div class="left-item__item--title">
<i :style="{opacity: item.required ? 1 : 0}">*</i>
<span>{{ i + 1 }}.</span>
<h2>{{ item.label }}</h2>
</div>
<div class="left-item__item--wrapper">
<template v-if="(item.type === 'radio')">
<div class="radio-item" v-for="(field, index) in item.options" :key="index">
<input type="radio" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
<img :src="field.img[0].url" v-if="field.img.length">
<label>{{ field.label }}</label>
</div>
</template>
<template v-if="item.type === 'upload'">
<img style="width: 100%; height: 100%;" :src="formInfo[`field_${i}`]" v-if="formInfo[`field_${i}`]">
<div class="left-item__item--upload" v-else>
<span>图片</span>
</div>
</template>
<template v-if="item.type === 'select'">
<el-input resize="none" class="preview" type="textarea" style="color: #333" :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></el-input>
</template>
<template v-if="(item.type === 'checkbox')">
<div class="radio-item" v-for="(field, index) in item.options" :key="index">
<input type="checkbox" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
<img :src="field.img[0].url" v-if="field.img.length">
<label>{{ field.label }}</label>
</div>
</template>
<template v-if="(item.type === 'input')">
<div class="text-item">
<input :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled>
</div>
</template>
<template v-if="(item.type === 'textarea')">
<div class="textarea-item" resize="none">
<textarea :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></textarea>
</div>
</template>
</div>
</div>
</div>
</div>
<template #footer>
<el-button @click="isShow = false">关闭</el-button>
</template>
</ai-dialog>
</template>
</ai-detail>
</template>
@@ -144,6 +221,7 @@
total2: 0,
name1: '',
name2: '',
info: {},
search1: {
current: 1,
size: 10,
@@ -179,7 +257,10 @@
dictName: '已填报',
dictValue: '1'
}
]
],
formInfo: {},
isShow: false,
targetList: []
}
},
@@ -194,6 +275,29 @@
this.instance.post(`/app/appassessmentscortask/taskTemplateDetail?id=${id}`).then(res => {
if (res.code === 0) {
this.info = res.data
this.instance.post(`/app/appassessmentscoretemplate/queryDetailById?id=${res.data.templateId}`).then(res => {
if (res.code === 0) {
this.targetList = res.data.fields.map(item => {
return JSON.parse(item.fieldInfo)
})
}
})
}
})
},
showDetail (id) {
this.instance.post(`/app/appassessmentscortask/queryDataInfoById?taskDetailId=${id}&dataId=${id}`).then(res => {
if (res.code == 0) {
this.formInfo = res.data
this.targetList.forEach((item, index) => {
if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
}
})
this.isShow = true
}
})
},
@@ -288,5 +392,169 @@
}
}
}
.form {
.left-item__item--banner {
img {
width: 100%;
height: 235px;
}
.config-item__banner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 235px;
line-height: 1;
border: 1px dashed #bbb;
span {
margin-top: 4px;
color: #555555;
font-size: 14px;
}
i {
font-size: 30px;
color: #8899bb;
}
}
}
.left-item__item--formname {
margin: 16px 0 32px;
padding: 0 12px;
color: #333333;
font-size: 15px;
font-weight: normal;
text-align: center;
word-break: break-all;
}
.left-item__item--text {
line-height: 20px;
// margin-bottom: 48px;
padding: 0 12px 20px;
text-align: justify;
color: #666;
font-size: 14px;
word-break: break-all;
}
.components-item {
position: relative;
padding: 16px 16px;
.left-item__item--wrapper {
& > img {
max-width: 300px;
}
}
.left-item__item--upload {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 120px;
height: 120px;
border-radius: 6px;
border: 1px dashed #bbb;
i {
font-size: 24px;
color: #8899bb;
}
span {
margin-top: 4px;
font-size: 12px;
color: #555;
}
}
.text-item {
input {
display: block;
width: 100%;
height: 40px;
border: none;
border-bottom: 1px solid #ddd;
&:focus {
outline: none;
}
&:disabled {
background: #fff;
}
}
}
.textarea-item {
textarea {
width: 100%;
height: 120px;
resize: none;
border: 1px solid #ddd;
padding: 10px;
&:focus {
outline: none;
}
&:disabled {
background: #fff;
}
}
}
.radio-item {
display: flex;
margin-bottom: 10px;
input {
position: relative;
top: 2px;
}
&:last-child {
margin-bottom: 0;
}
label {
margin-left: 10px;
}
img {
width: 60px;
margin-left: 10px;
}
}
}
.left-item__item--title {
display: flex;
margin-bottom: 10px;
i {
position: relative;
top: 3px;
margin-right: 5px;
color: #E22120;
}
span {
position: relative;
top: 3px;
}
h2 {
color: #333333;
font-size: 15px;
}
}
}
}
</style>