1372 lines
37 KiB
Vue
1372 lines
37 KiB
Vue
<template>
|
||
<ai-detail class="form-add">
|
||
<ai-title title="问卷表单" slot="title" isShowBack @onBackClick="cancel(false)">
|
||
<template #rightBtn>
|
||
<el-button type="primary" icon="iconfont iconRepulsebeifen" @click="toPublish">保存模板</el-button>
|
||
</template>
|
||
</ai-title>
|
||
<template #content>
|
||
<el-scrollbar class="left">
|
||
<div class="left-item" v-for="(component, index) in components" :key="index">
|
||
<div class="left-item__title">
|
||
<h2>{{ component.label }}</h2>
|
||
<span>{{ component.tips }}</span>
|
||
</div>
|
||
<div class="left-item__list">
|
||
<draggable
|
||
class="components-draggable"
|
||
:list="component.children"
|
||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||
:clone="cloneComponent"
|
||
:sort="false"
|
||
@end="onEnd">
|
||
<div class="left-item__item" v-for="(item, i) in component.children" :key="i" @click="clone(item)">
|
||
<i class="iconfont" :class="item.icon"></i>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
<el-scrollbar class="middle">
|
||
<div class="middle-content">
|
||
<div class="middle-content__wrapper">
|
||
<div :class="[activeIndex === -1 ? 'active' : '']" @click="activeIndex = -1">
|
||
<div class="left-item__item left-item__item--banner" key="banner">
|
||
<img v-if="form.headPicture.length" :src="form.headPicture[0].url">
|
||
<div class="config-item__banner" v-else>
|
||
<i class="iconfont iconAdd"></i>
|
||
<span>添加图片</span>
|
||
</div>
|
||
</div>
|
||
<div class="left-item__item left-item__item--formname" key="title">
|
||
<h2>{{ form.title }}</h2>
|
||
</div>
|
||
<div class="left-item__item left-item__item--text" key="text" v-if="form.isShowTableExplain">
|
||
<p>{{ form.tableExplain }}</p>
|
||
</div>
|
||
</div>
|
||
<draggable
|
||
class="middle-draggable"
|
||
style="height: 100%;"
|
||
v-model="targetList"
|
||
:animation="340"
|
||
scroll
|
||
element="div"
|
||
draggable=".components-item"
|
||
group="componentsGroup"
|
||
:sort="true">
|
||
<div
|
||
class="left-item__item components-item"
|
||
v-for="(item, i) in targetList"
|
||
:class="[activeIndex === i ? 'active' : '']"
|
||
@click="activeIndex = i"
|
||
:key="i">
|
||
<div class="left-item__item--remove" title="删除" @click.stop="removeItem(i)">
|
||
<i class="iconfont iconDelete"></i>
|
||
</div>
|
||
<div class="left-item__item--title">
|
||
<i :style="{opacity: item.required ? 1 : 0}">*</i>
|
||
<span>{{ i + 1 }}. </span>
|
||
<h2>{{ item.label }}</h2>
|
||
</div>
|
||
<p>{{ item.describe }}</p>
|
||
<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="" />
|
||
<img :src="field.img[0].url" v-if="field.img.length">
|
||
<label>{{ field.label }}</label>
|
||
</div>
|
||
</template>
|
||
<template v-if="item.type === 'upload'">
|
||
<div class="left-item__item--upload">
|
||
<i class="iconfont iconAdd"></i>
|
||
<span>添加图片</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="item.type === 'select'" >
|
||
<el-select placeholder="请选择" disabled v-model="values" style="width: 100%;">
|
||
<el-option
|
||
v-for="(item, index) in item.options"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.label">
|
||
</el-option>
|
||
</el-select>
|
||
</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="" />
|
||
<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" disabled>
|
||
</div>
|
||
</template>
|
||
<template v-if="(item.type === 'textarea')" >
|
||
<div class="textarea-item" resize="none">
|
||
<textarea :placeholder="item.placeholder" disabled></textarea>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
<el-scrollbar class="right">
|
||
<div class="right-item" style="margin-top: 0;">
|
||
<div class="right-item__maintitle">
|
||
<h2>{{ currComponentTitle }}</h2>
|
||
</div>
|
||
</div>
|
||
<template v-if="activeIndex === -1">
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<h2>头图</h2>
|
||
</div>
|
||
<div class="right-item__content right-item__content--banner">
|
||
<ai-uploader v-model="form.headPicture" :maxSize="2" :limit="1" :isShowTip="false" :instance="instance" @change="onheadPictureChange">
|
||
<template #trigger>
|
||
<div class="config-item__banner" v-if="!form.headPicture.length">
|
||
<i class="iconfont iconAdd"></i>
|
||
<span>添加图片</span>
|
||
</div>
|
||
</template>
|
||
</ai-uploader>
|
||
</div>
|
||
<div class="right-item__tips">建议上传比例为375 x 235px，且小于10M</div>
|
||
</div>
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<div class="right-item__title--left">
|
||
<h2>显示头图</h2>
|
||
</div>
|
||
<el-switch
|
||
@change="onHeadImgChange"
|
||
v-model="form.isShowheadPicture">
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<h2>表单名称</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input placeholder="问卷调查" :maxlength="30" show-word-limit v-model="form.title"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item__group">
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<h2>表单说明</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input type="textarea" :rows="5" :maxlength="255" show-word-limit placeholder="问卷调查" v-model="form.tableExplain"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<div class="right-item__title--left">
|
||
<h2>显示说明</h2>
|
||
</div>
|
||
<el-switch
|
||
v-model="form.isShowTableExplain">
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-item__group">
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<h2>按钮名称</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input placeholder="请输入按钮名称" v-model="form.buttonExplain"></el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="right-item" v-if="activeIndex > -1">
|
||
<div class="right-item__title no-solid">
|
||
<h2>标题名称</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input placeholder="标题名称" :maxlength="200" show-word-limit v-model="currTarget.label"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="activeIndex > -1">
|
||
<div class="right-item__title no-solid">
|
||
<h2>说明文字</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input placeholder="说明文字" :maxlength="200" show-word-limit v-model="currTarget.describe"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item right-item__select" v-if="currTarget.type === 'radio' || currTarget.type === 'select' || currTarget.type === 'checkbox'">
|
||
<div class="right-item__title no-solid">
|
||
<h2>选项设置</h2>
|
||
</div>
|
||
<div class="right-item__select--wrapper">
|
||
<draggable
|
||
v-model="currTarget.options"
|
||
:animation="340"
|
||
group="select"
|
||
handle=".mover"
|
||
:sort="true">
|
||
<div class="select-item" v-for="(item, index) in currTarget.options" :key="index">
|
||
<i class="iconfont iconjdq_led_show mover" :style="{marginRight: currTarget.type === 'select' ? '10px' : '0'}"></i>
|
||
<ai-uploader v-model="item.img" :limit="1" :isShowTip="false" :instance="instance" v-if="currTarget.type !== 'select'">
|
||
<template #trigger>
|
||
<div class="config-item__select" v-show="!item.img.length">
|
||
<i class="iconfont iconfangda"></i>
|
||
</div>
|
||
</template>
|
||
</ai-uploader>
|
||
<el-input placeholder="请输入选项名" :maxlength="100" show-word-limit v-model="item.label"></el-input>
|
||
<i class="iconfont iconDelete" @click="removeOptions(index)"></i>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
<el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
|
||
</div>
|
||
<div class="right-item__group" v-if="activeIndex > -1">
|
||
<div class="right-item" v-if="currTarget.type === 'input' || currTarget.type === 'textarea'">
|
||
<div class="right-item__title no-solid">
|
||
<div class="right-item__title--left">
|
||
<h2>提示文字</h2>
|
||
</div>
|
||
</div>
|
||
<el-input placeholder="请输入提示文字" v-model="currTarget.placeholder"></el-input>
|
||
</div>
|
||
<div class="right-item">
|
||
<div class="right-item__title no-solid">
|
||
<div class="right-item__title--left">
|
||
<h2>是否必填</h2>
|
||
</div>
|
||
<el-switch v-model="currTarget.required"></el-switch>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="currTarget.type !== 'upload'">
|
||
<div class="right-item__title no-solid">
|
||
<div class="right-item__title--left">
|
||
<h2>答案与分值</h2>
|
||
</div>
|
||
<el-switch
|
||
v-model="currTarget.isShowPoints">
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
<template v-if="currTarget.isShowPoints">
|
||
<div class="right-item" v-if="currTarget.pointType === '0'">
|
||
<div class="right-item__title no-solid">
|
||
<h2>正确答案</h2>
|
||
</div>
|
||
<div class="right-item__content right-item__content--select-answer">
|
||
<el-select
|
||
style="width: 100%;"
|
||
v-if="currTarget.type === 'radio' || currTarget.type === 'select'"
|
||
clearable
|
||
v-model="currTarget.answer">
|
||
<el-option
|
||
v-for="(item, index) in currTarget.options"
|
||
:key="index"
|
||
:label="item.label.length > 60 ? item.label.substr(0, 50) + '...' : item.label"
|
||
:value="item.label">
|
||
</el-option>
|
||
</el-select>
|
||
<el-checkbox-group v-model="currTarget.answer" v-if="currTarget.type === 'checkbox'">
|
||
<el-checkbox v-for="(item, index) in currTarget.options" :label="item.label" :key="index">{{ item.label }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
<el-input placeholder="正确答案" v-model="currTarget.answer" v-if="currTarget.type === 'input'"></el-input>
|
||
<el-input placeholder="正确答案" :rows="4" v-model="currTarget.answer" v-if="currTarget.type === 'textarea'"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="currTarget.pointType === '0'">
|
||
<div class="right-item__title">
|
||
<h2>本题分值</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
|
||
<span slot="append">分</span>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'">
|
||
<div class="right-item__title no-solid">
|
||
<h2>计分方式</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-select
|
||
style="width: 100%;"
|
||
v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'"
|
||
v-model="currTarget.pointType">
|
||
<el-option
|
||
v-for="(item, index) in currTarget.pointDict"
|
||
:key="index"
|
||
:label="item.dictName"
|
||
:value="item.dictValue">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="currTarget.type === 'checkbox' && currTarget.pointType === '2'">
|
||
<div class="right-item__title no-solid">
|
||
<h2>答案</h2>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<el-checkbox-group
|
||
v-model="currTarget.answer">
|
||
<div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
|
||
<el-checkbox :label="item.label" :key="index"></el-checkbox>
|
||
<el-input placeholder="分值" @change="e => onSelcetKeyup(e, index)" v-model="item.point">
|
||
<span slot="suffix">分</span>
|
||
</el-input>
|
||
</div>
|
||
<div class="right-item__select--item">
|
||
<span style="padding-left: 23px;">全部答对</span>
|
||
<el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
|
||
<span slot="suffix">分</span>
|
||
</el-input>
|
||
</div>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
<div class="right-item" v-if="(currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select') && currTarget.pointType === '1'">
|
||
<div class="right-item__title">
|
||
<div class="right-item__title--left">
|
||
<h2>各选项分值</h2>
|
||
<i>（如需扣分请设置负分）</i>
|
||
</div>
|
||
</div>
|
||
<div class="right-item__content">
|
||
<div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
|
||
<span>{{ item.label }}</span>
|
||
<el-input placeholder="分值" v-model="item.point" @change="e => onSelcetKeyup(e, index)">
|
||
<span slot="suffix">分</span>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</el-scrollbar>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import draggable from 'vuedraggable'
|
||
import { components } from './config'
|
||
|
||
export default {
|
||
name: 'add',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object,
|
||
type: String,
|
||
areaId: String
|
||
},
|
||
|
||
components: {
|
||
draggable
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
components: components,
|
||
targetList: [],
|
||
form: {
|
||
tableExplain: '详细描述',
|
||
title: '问卷调查',
|
||
isShowheadPicture: true,
|
||
isShowTableExplain: true,
|
||
isShowBtn: true,
|
||
headPicture: [],
|
||
count: 0,
|
||
wechatId: '0',
|
||
buttonExplain: '提交',
|
||
tips: true
|
||
},
|
||
successInfo: {},
|
||
date: [],
|
||
values: '',
|
||
activeIndex: -1,
|
||
pickerOptions: {
|
||
disabledDate (time) {
|
||
return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
currTarget () {
|
||
if (this.activeIndex >= 0) {
|
||
return this.targetList[this.activeIndex]
|
||
}
|
||
|
||
return {}
|
||
},
|
||
|
||
currComponentTitle () {
|
||
if (this.activeIndex >= 0) {
|
||
return this.targetList[this.activeIndex].fixedLabel + '设置'
|
||
}
|
||
|
||
return '表单设置'
|
||
}
|
||
},
|
||
|
||
mounted () {
|
||
if (this.params && this.params.id) {
|
||
this.getInfo(this.params.id)
|
||
} else {
|
||
this.init()
|
||
}
|
||
|
||
window.addEventListener('keydown', this.bindEvent)
|
||
},
|
||
|
||
destroyed () {
|
||
window.removeEventListener('keydown', this.bindEvent)
|
||
},
|
||
|
||
methods: {
|
||
onHeadImgChange (e) {
|
||
if (!e) {
|
||
this.form.headPicture = []
|
||
}
|
||
},
|
||
|
||
onheadPictureChange (e) {
|
||
this.form.isShowheadPicture = !!e.length;
|
||
},
|
||
|
||
init () {
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
|
||
}]
|
||
},
|
||
|
||
onKeyup (e) {
|
||
this.$set(this.currTarget, 'points', e.replace(/[^\d]/g, ''))
|
||
},
|
||
|
||
onSelcetKeyup (e, index) {
|
||
this.$set(this.currTarget.options[index], 'point', e.replace(/[^\d]/g, ''))
|
||
},
|
||
|
||
toPublish () {
|
||
for (let item of this.targetList) {
|
||
if (item.isShowPoints) {
|
||
if (item.pointType === '0') {
|
||
if (!item.answer || JSON.stringify(item.answer) === '[]') {
|
||
return this.$message.error(`请输入${item.label}正确答案`)
|
||
}
|
||
|
||
if (!item.points) {
|
||
return this.$message.error(`请输入${item.label}的分值`)
|
||
}
|
||
}
|
||
|
||
if (item.pointType === '1') {
|
||
for (let option of item.options) {
|
||
if (!option.point) {
|
||
return this.$message.error(`请输入${item.label}${option.label}的分值`)
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.pointType === '2') {
|
||
for (let option of item.options) {
|
||
if (!option.point) {
|
||
return this.$message.error(`请输入${item.label}${option.label}的分值`)
|
||
}
|
||
}
|
||
|
||
if (!item.points) {
|
||
return this.$message.error(`请输入${item.label}全部答对分值`)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const fields = this.targetList.map(item => {
|
||
return {
|
||
fieldType: item.type,
|
||
fieldName: item.label,
|
||
fieldInfo: JSON.stringify(item)
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/app/appassessmentscoretemplate/addOrUpdate`, {
|
||
...this.form,
|
||
fields,
|
||
id: this.params.id,
|
||
status: 1,
|
||
headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : ''
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
|
||
setTimeout(() => {
|
||
this.cancel(true)
|
||
}, 600)
|
||
}
|
||
})
|
||
},
|
||
|
||
bindEvent (e) {
|
||
if (this.activeIndex === -1) return
|
||
|
||
if ((e.code === 'Backspace' || e.code === 'Delete') && e.target.nodeName === 'BODY' && this.activeIndex >= 0) {
|
||
this.targetList.splice(this.activeIndex, 1)
|
||
|
||
this.activeIndex = -1
|
||
}
|
||
},
|
||
|
||
removeItem (index) {
|
||
this.activeIndex = -1
|
||
this.targetList.splice(index, 1)
|
||
},
|
||
|
||
getInfo (id) {
|
||
this.instance.post(`/app/appassessmentscoretemplate/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.form = {
|
||
...res.data,
|
||
headPicture: res.data.headPicture ? [{
|
||
url: res.data.headPicture
|
||
}] : [],
|
||
isShowheadPicture: !!res.data.headPicture,
|
||
isShowTableExplain: !!res.data.tableExplain
|
||
}
|
||
|
||
this.targetList = res.data.fields.map(item => {
|
||
return JSON.parse(item.fieldInfo)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'List',
|
||
isRefresh: !!isRefresh
|
||
})
|
||
},
|
||
|
||
addOptions () {
|
||
const len = this.targetList[this.activeIndex].options.length
|
||
let label = `选项${len + 1}`
|
||
|
||
const index= this.targetList[this.activeIndex].options.findIndex(v => label === v.label)
|
||
if (index > -1) {
|
||
label = `新选项${len + 1}`
|
||
}
|
||
|
||
this.targetList[this.activeIndex].options.push({
|
||
label: label,
|
||
value: '',
|
||
point: '',
|
||
img: []
|
||
})
|
||
},
|
||
|
||
removeOptions (index) {
|
||
const len = this.targetList[this.activeIndex].options.length
|
||
const label = this.targetList[this.activeIndex].options[index].label
|
||
|
||
if (len === 2) {
|
||
return this.$message.error('选项不能少于2个')
|
||
}
|
||
|
||
if (this.targetList[this.activeIndex].type === 'checkbox') {
|
||
const answerIndex = this.targetList[this.activeIndex].answer.indexOf(label)
|
||
if (answerIndex > -1) {
|
||
this.targetList[this.activeIndex].answer.splice(answerIndex, 1)
|
||
}
|
||
} else {
|
||
if (label === this.targetList[this.activeIndex].answer) {
|
||
this.targetList[this.activeIndex].answer = ''
|
||
}
|
||
}
|
||
|
||
this.targetList[this.activeIndex].options.splice(index, 1)
|
||
},
|
||
|
||
onEnd () {
|
||
this.$nextTick(() => {
|
||
this.activeIndex = this.targetList.length - 1
|
||
})
|
||
},
|
||
|
||
clone (e) {
|
||
this.targetList.push(JSON.parse(JSON.stringify(e)))
|
||
|
||
this.$nextTick(() => {
|
||
this.activeIndex = this.targetList.length - 1
|
||
})
|
||
},
|
||
|
||
cloneComponent (e) {
|
||
return JSON.parse(JSON.stringify(e))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.form-add {
|
||
background: #fff!important;
|
||
|
||
.right-item__maintitle {
|
||
height: 62px;
|
||
line-height: 62px;
|
||
margin-bottom: 20px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
color: #222222;
|
||
|
||
h2 {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.right-item__content--select-answer {
|
||
::v-deep .el-checkbox {
|
||
display: flex!important;
|
||
align-items: center;
|
||
margin-right: 0;
|
||
}
|
||
|
||
::v-deep .el-checkbox__label {
|
||
flex: 1;
|
||
color: #222;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.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 0;
|
||
padding: 0 12px 32px;
|
||
color: #333333;
|
||
font-size: 15px;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.left-item__item--text {
|
||
line-height: 20px;
|
||
padding: 0 12px 20px;
|
||
text-align: justify;
|
||
color: #666;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
::v-deep .ai-detail__content {
|
||
height: calc(100% - 52px)!important;
|
||
padding: 0!important;
|
||
overflow: hidden!important;
|
||
}
|
||
|
||
.ai-dialog__success {
|
||
::v-deep .ai-dialog__content {
|
||
max-height: initial!important;
|
||
}
|
||
}
|
||
|
||
.middle-draggable {
|
||
& > span {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 600px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.components-item {
|
||
position: relative;
|
||
// margin-bottom: 32px;
|
||
padding: 16px 16px;
|
||
cursor: move;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1111;
|
||
width: 100%;
|
||
height: 100%;
|
||
content: ' ';
|
||
}
|
||
|
||
& > p {
|
||
margin: 0 0 12px 12px;
|
||
color: #888;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.left-item__item--remove {
|
||
display: flex;
|
||
position: absolute;
|
||
align-items: center;
|
||
justify-content: center;
|
||
right: -30px;
|
||
top: 50%;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
&:hover {
|
||
background: #f6f7ff;
|
||
}
|
||
|
||
&.active {
|
||
background: #f6f7ff;
|
||
}
|
||
|
||
.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;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
label {
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
img {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-item__item--title {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
i {
|
||
position: relative;
|
||
top: 2px;
|
||
margin-right: 5px;
|
||
color: #E22120;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
h2 {
|
||
color: #333333;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
.middle-content {
|
||
width: 375px;
|
||
margin: 0 auto;
|
||
padding: 80px 0;
|
||
|
||
.middle-content__wrapper {
|
||
min-height: 800px;
|
||
background: #fff;
|
||
|
||
& > div {
|
||
&.active {
|
||
background: #f6f7ff;
|
||
}
|
||
}
|
||
|
||
.radio-item {
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.right-item__select--wrapper {
|
||
.select-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
::v-deep .ai-detail__title {
|
||
margin: 0!important;
|
||
margin-bottom: 4px!important;
|
||
padding: 0 20px;
|
||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
::v-deep .ai-detail__content--wrapper {
|
||
display: flex;
|
||
max-width: 100%!important;
|
||
height: 100%!important;
|
||
padding: 0!important;
|
||
background: #F5F6F9;
|
||
}
|
||
|
||
.middle {
|
||
flex: 1;
|
||
height: 100%;
|
||
|
||
::v-deep .el-scrollbar__view {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.add-select {
|
||
height: auto;
|
||
line-height: 1;
|
||
margin: 10px 0 0 26px;
|
||
padding: 0;
|
||
}
|
||
|
||
.right-item__select--wrapper {
|
||
|
||
::v-deep .el-upload--picture-card {
|
||
// display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 1;
|
||
}
|
||
|
||
::v-deep .uploader {
|
||
background: #FFFFFF;
|
||
border-radius: 4px;
|
||
margin: 0 10px;
|
||
width: 40px;
|
||
height: 40px;
|
||
|
||
.el-upload-list__item-preview {
|
||
display: none;
|
||
}
|
||
|
||
.el-upload-list--picture-card .el-upload-list__item-actions span + span {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.uploader-item__icon {
|
||
display: none;
|
||
}
|
||
|
||
.el-upload-list__item {
|
||
margin: 0;
|
||
}
|
||
|
||
.uploader-item {
|
||
width: 40px!important;
|
||
height: 40px!important;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.select-item {
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
i {
|
||
color: #8c9dbd;
|
||
}
|
||
|
||
.mover {
|
||
cursor: move;
|
||
}
|
||
|
||
.iconDelete {
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-upload-list__item {
|
||
width: 40px!important;
|
||
height: 40px!important;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.config-item__select {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid #D0D4DC;
|
||
|
||
&:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
i {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-item__content--banner {
|
||
height: 183px;
|
||
padding: 10px;
|
||
background: #F3F6F9;
|
||
border-radius: 4px;
|
||
|
||
::v-deep .el-upload--picture-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 1;
|
||
}
|
||
|
||
::v-deep .uploader {
|
||
width: 260px;
|
||
height: 163px;
|
||
overflow: hidden;
|
||
|
||
.el-row--flex {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.config-item__select {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid #D0D4DC;
|
||
|
||
&:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
i {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.el-upload-list__item {
|
||
width: 260px!important;
|
||
height: 163px!important;
|
||
}
|
||
|
||
.config-item__banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 260px;
|
||
height: 163px;
|
||
line-height: 1;
|
||
background: #fff;
|
||
|
||
span {
|
||
margin-top: 4px;
|
||
color: #555555;
|
||
font-size: 12px;
|
||
}
|
||
|
||
i {
|
||
color: #8899bb;
|
||
}
|
||
}
|
||
}
|
||
|
||
.config-item__banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 260px;
|
||
height: 163px;
|
||
line-height: 1;
|
||
background: #fff;
|
||
|
||
span {
|
||
margin-top: 4px;
|
||
color: #555555;
|
||
font-size: 12px;
|
||
}
|
||
|
||
i {
|
||
color: #8899bb;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-item__select--item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 60px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
span {
|
||
width: 170px;
|
||
font-size: 14px;
|
||
color: #222;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
::v-deep .el-checkbox {
|
||
display: flex!important;
|
||
align-items: center;
|
||
margin-bottom: 0!important;
|
||
}
|
||
|
||
::v-deep .el-checkbox__label {
|
||
max-width: 140px;
|
||
color: #222;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
::v-deep .el-input {
|
||
width: 100px;
|
||
|
||
.el-input__suffix {
|
||
display: flex;
|
||
align-items: center;
|
||
right: 10px;
|
||
color: #222222;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 320px;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
|
||
.el-checkbox {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.right-item {
|
||
margin-top: 20px;
|
||
padding: 0 20px;
|
||
|
||
.right-item__tips {
|
||
margin-top: 10px;
|
||
color: #888888;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.right-item__title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.right-item__title--left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: #888888;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 280px;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
|
||
.left-item {
|
||
padding: 0 20px;
|
||
|
||
&:last-child {
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.left-item__title {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 20px;
|
||
|
||
h2 {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
span {
|
||
color: #888888;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.left-item__item {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
margin-bottom: 10px;
|
||
padding: 0 13px;
|
||
background: #FFFFFF;
|
||
border-radius: 2px;
|
||
color: #222222;
|
||
font-size: 12px;
|
||
border: 1px solid #E4E8EF;
|
||
cursor: move;
|
||
|
||
&:hover {
|
||
border: 1px dashed #2367ff;
|
||
color: #2367ff;
|
||
|
||
i {
|
||
color: #2367ff;
|
||
}
|
||
}
|
||
|
||
i {
|
||
margin-right: 13px;
|
||
font-size: 14px;
|
||
color: #8899BB;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-item {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
.publish {
|
||
.tips {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 36px;
|
||
margin-bottom: 20px;
|
||
padding: 0 12px;
|
||
background: #E8EFFF;
|
||
border-radius: 2px;
|
||
|
||
i {
|
||
margin-right: 2px;
|
||
color: #2367ff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 12px;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.form-item__wrapper {
|
||
padding-left: 24px;
|
||
|
||
.checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 9px;
|
||
|
||
&:first-child {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
span {
|
||
color: #888888;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.form-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
span {
|
||
margin-left: 16px;
|
||
color: #888888;
|
||
font-size: 14px;
|
||
}
|
||
|
||
h2 {
|
||
position: relative;
|
||
padding-left: 8px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #222222;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
z-index: 1;
|
||
width: 3px;
|
||
height: 16px;
|
||
background: #2266FF;
|
||
content: ' ';
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item__container {
|
||
margin-left: 9px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.form-field {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
i {
|
||
margin-right: 4px;
|
||
color: #FF4466;
|
||
font-size: 14px;
|
||
}
|
||
h2 {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
}
|
||
|
||
span {
|
||
color: #888888;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|