模板评分
This commit is contained in:
yanran200730
@@ -7,7 +7,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Add from './components/Add'
|
||||
import List from './components/List'
|
||||
|
||||
export default {
|
||||
@@ -28,8 +27,7 @@
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Add
|
||||
List
|
||||
},
|
||||
|
||||
mounted () {
|
||||
@@ -40,11 +38,6 @@
|
||||
|
||||
methods: {
|
||||
onChange (data) {
|
||||
if (data.type === 'Add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'List') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,7 +5,6 @@
|
||||
<div class="content">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template #left>
|
||||
<!-- <el-button type="primary" @click="toAdd('')">新建模板</el-button> -->
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
@@ -28,25 +27,60 @@
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
|
||||
<el-button type="text" @click="changeStatus(row.id, row.status)">{{ row.status === '0' ? '启用' : '停用' }}</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
<el-button type="text" @click="toDetail(row.id)">查看</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
customFooter
|
||||
:visible.sync="isShowForm"
|
||||
@onConfirm="isShowForm = 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="group"
|
||||
v-for="(data, index) in targetList"
|
||||
:key="index">
|
||||
<h2>{{ index }}</h2>
|
||||
<RenderForm :dict="dict" :data="data"></RenderForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="isShowForm = false">关闭</el-button>
|
||||
</template>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RenderForm from './RenderForm'
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
components: {
|
||||
RenderForm
|
||||
},
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
@@ -59,23 +93,27 @@
|
||||
size: 10,
|
||||
title: ''
|
||||
},
|
||||
formInfo: {},
|
||||
colConfigs: [
|
||||
{ prop: 'title', label: '模板名称' },
|
||||
{ prop: 'createUserName', align: 'center', label: '创建人' },
|
||||
{ prop: 'updateTime', align: 'center', label: '更新时间' }
|
||||
],
|
||||
ids: [],
|
||||
isShowForm: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
filedList: []
|
||||
filedList: [],
|
||||
targetList: {},
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.loading = true
|
||||
|
||||
this.dict.load(['EP_riskLevel', 'EP_handleType', 'modeType', 'EP_riskStatus', 'EP_source']).then(() => {
|
||||
this.dict.load(['EP_riskLevel']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
@@ -108,14 +146,44 @@
|
||||
toDetail (id) {
|
||||
this.instance.post(`/app/appassessmentscorev2template/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.filedList = res.data.tableFieldInfos.filter(v => {
|
||||
this.info = res.data
|
||||
let list = {}
|
||||
const filedList = res.data.tableFieldInfos.filter(v => {
|
||||
return v.inputType === '0' || v.inputType === '1'
|
||||
})
|
||||
|
||||
let groups1 = this.unique(this.filedList.map(v => v.groupLevel1Name))
|
||||
let groups2 = this.unique(this.filedList.map(v => v.groupLevel2Name))
|
||||
const dicts = filedList.filter(v => v.dictionaryCode).map(v => v.dictionaryCode)
|
||||
this.dict.load(dicts)
|
||||
let groups = this.unique(filedList.map(v => v.groupLevel1Name))
|
||||
|
||||
console.log(groups1, groups2)
|
||||
groups.forEach(item => {
|
||||
let arr = {}
|
||||
if (!list[item]) {
|
||||
list[item] = []
|
||||
}
|
||||
|
||||
const groupList = filedList.filter(v => v.groupLevel1Name === item)
|
||||
const groups2 = this.unique(groupList.map(v => v.groupLevel2Name))
|
||||
if (groups2.length) {
|
||||
groups2.forEach(v => {
|
||||
if (!arr[v]) {
|
||||
arr[v] = []
|
||||
}
|
||||
|
||||
arr[v] = groupList.filter(e => v === e.groupLevel2Name)
|
||||
})
|
||||
|
||||
list[item] = arr
|
||||
} else {
|
||||
list[item] = {
|
||||
'0': groupList
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.isShowForm = true
|
||||
this.targetList = list
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -127,32 +195,59 @@
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
changeStatus (id, status) {
|
||||
this.$confirm(`确定${status === '0' ? '启用' : '停用'}该数据？`).then(() => {
|
||||
this.instance.post(`/app/appassessmentscoretemplate/stopRelease?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`${status === '0' ? '启用' : '停用'}成功！`)
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appassessmentscoretemplate/delete?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list .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;
|
||||
}
|
||||
|
||||
.group {
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
188
project/hlj/app/AppFormTemplate/components/RenderForm.vue
Normal file
188
project/hlj/app/AppFormTemplate/components/RenderForm.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="render-form">
|
||||
<div class="render-form__item" v-for="(group, name) in data" :key="name">
|
||||
<h2 class="render-form__title" v-if="name !== '0'">{{ name }}</h2>
|
||||
<div
|
||||
class="left-item__item components-item"
|
||||
v-for="(item, i) in group"
|
||||
:key="i">
|
||||
<div class="left-item__item--title">
|
||||
<i :style="{opacity: item.mustFill === '1' ? 1 : 0}">*</i>
|
||||
<span>{{ i + 1 }}.</span>
|
||||
<h2>{{ item.fieldName }}</h2>
|
||||
</div>
|
||||
<p class="text" v-if="item.explain">{{ item.explain }}</p>
|
||||
<div class="left-item__item--wrapper">
|
||||
<template v-if="(item.fieldType === 'radio')">
|
||||
<el-radio-group v-model="formInfo[`field_${i}`]">
|
||||
<el-radio :label="v.dictName" v-for="v in dict.getDict(item.dictionaryCode)" :key="v.dictName">{{ v.dictName }}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-if="(item.fieldType === 'score')">
|
||||
<el-input-number style="width: 300px" size="small" :placeholder="`请输入${item.fieldName}`" v-model="formInfo[`field_${i}`]" :precision="1" :step="0.1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<template v-if="item.fieldType === '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.fieldType === 'select'">
|
||||
<ai-select
|
||||
v-model="formInfo[`field_${i}`]"
|
||||
:placeholder="`请输入${item.fieldName}`"
|
||||
:selectList="dict.getDict(item.dictionaryCode)">
|
||||
</ai-select>
|
||||
</template>
|
||||
<template v-if="(item.fieldType === 'checkbox')">
|
||||
<el-checkbox-group v-model="formInfo[`field_${i}`]">
|
||||
<el-checkbox :label="v.dictName" v-for="v in dict.getDict(item.dictionaryCode)" :key="v.dictName">{{ v.dictName }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-if="(item.fieldType === 'sign')">
|
||||
<AiDrawer></AiDrawer>
|
||||
</template>
|
||||
<template v-if="(item.fieldType === 'input')">
|
||||
<el-input size="small" :placeholder="`请输入${item.fieldName}`" v-model="formInfo[`field_${i}`]"></el-input>
|
||||
</template>
|
||||
<template v-if="(item.fieldType === 'textarea')">
|
||||
<el-input size="small" type="textarea" :placeholder="`请输入${item.fieldName}`" v-model="formInfo[`field_${i}`]"></el-input>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data', 'dict'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
formInfo: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.render-form {
|
||||
.render-form__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.render-form__item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.components-item {
|
||||
position: relative;
|
||||
padding: 8px 0px;
|
||||
|
||||
& > p {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
white-space: break-spaces;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.left-item__item--wrapper {
|
||||
padding: 0 10px;
|
||||
& > 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,202 +0,0 @@
|
||||
export const components = [
|
||||
{
|
||||
type: 'options',
|
||||
tips: '（可重复添加）',
|
||||
label: '选项',
|
||||
children: [
|
||||
{
|
||||
type: 'radio',
|
||||
label: '单选',
|
||||
fixedLabel: '单选',
|
||||
value: '',
|
||||
points: '',
|
||||
describe: '',
|
||||
icon: 'iconradio',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
pointType: '0',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: '多选',
|
||||
fixedLabel: '多选',
|
||||
describe: '',
|
||||
points: '',
|
||||
icon: 'iconcheck_box',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: [],
|
||||
value: [],
|
||||
pointType: '0',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
},
|
||||
{
|
||||
dictName: '答对几项得几分，答错不得分',
|
||||
dictValue: '2'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
point: '',
|
||||
value: '',
|
||||
img: []
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '单下拉框',
|
||||
fixedLabel: '单下拉框',
|
||||
value: '',
|
||||
points: '',
|
||||
describe: '',
|
||||
icon: 'iconSelect',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
pointType: '0',
|
||||
pointDict: [
|
||||
{
|
||||
dictName: '此题有唯一答案和分值',
|
||||
dictValue: '0'
|
||||
},
|
||||
{
|
||||
dictName: '每个选项都有对应分值',
|
||||
dictValue: '1'
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '',
|
||||
point: '',
|
||||
img: []
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
tips: '（可重复添加）',
|
||||
label: '填空',
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '单行填空',
|
||||
describe: '',
|
||||
fixedLabel: '单行填空',
|
||||
value: '',
|
||||
pointType: '0',
|
||||
icon: 'icontext_box',
|
||||
isShowPoints: false,
|
||||
points: '',
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
placeholder: '请输入...',
|
||||
answer: ''
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
label: '多行填空',
|
||||
describe: '',
|
||||
fixedLabel: '多行填空',
|
||||
pointType: '0',
|
||||
icon: 'icontext_area',
|
||||
points: '',
|
||||
isShowPoints: false,
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: '',
|
||||
placeholder: '请输入...',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'annex',
|
||||
tips: '（可重复添加）',
|
||||
label: '附件',
|
||||
children: [
|
||||
{
|
||||
type: 'upload',
|
||||
label: '上传图片',
|
||||
fixedLabel: '上传图片',
|
||||
describe: '',
|
||||
value: '',
|
||||
icon: 'iconpic',
|
||||
isShowPoints: false,
|
||||
points: '',
|
||||
required: true,
|
||||
hasAnswer: false,
|
||||
answer: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'layout',
|
||||
tips: '（可重复添加）',
|
||||
label: '分组',
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
label: '卡片',
|
||||
fixedLabel: '卡片',
|
||||
icon: 'iconpic',
|
||||
groupName: '分组标题',
|
||||
column: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user