1740 lines
48 KiB
Vue
1740 lines
48 KiB
Vue
<template>
|
||
<ai-detail class="form-add">
|
||
<ai-title :title="pageTitle" slot="title" isShowBack @onBackClick="cancel(false)">
|
||
<template #rightBtn>
|
||
<el-button @click="onConfirm(0)" icon="iconfont iconCreate_Files" v-if="form.status !== '1' && params.templateType == 0">保存为草稿</el-button>
|
||
<el-button type="primary" icon="iconfont iconRepulsebeifen" @click="toPublish">{{ params.templateType == 1 ? '保存模板' : '发布' }}</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">
|
||
<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>
|
||
<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
|
||
@change="form.tableExplain = ''"
|
||
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 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>
|
||
<ai-dialog
|
||
:visible.sync="isShowAdd"
|
||
width="800px"
|
||
customFooter
|
||
title="发布">
|
||
<el-form label-position="top" class="publish" ref="form" label-width="120px" :model="form">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-title">
|
||
<h2>基本信息</h2>
|
||
</div>
|
||
<div class="form-field">
|
||
<i>*</i>
|
||
<h2>截止时间</h2>
|
||
<span>（表单截止后，用户打开表单会提示此表单已结束）</span>
|
||
</div>
|
||
<div class="form-item__container">
|
||
<el-radio-group v-model="form.periodValidityType">
|
||
<el-radio label="0">永久有效</el-radio>
|
||
<el-radio label="1">自定义时间</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="form-item__container" v-if="form.periodValidityType === '1'">
|
||
<el-date-picker
|
||
v-model="form.periodValidityEndTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetime"
|
||
size="small"
|
||
:picker-options="pickerOptions"
|
||
placeholder="截止时间">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="form-field">
|
||
<i>*</i>
|
||
<h2>匹配客户方式</h2>
|
||
<span>（将参与活动的微信客户和企业微信客户匹配）</span>
|
||
</div>
|
||
<div class="form-item__container">
|
||
<el-radio-group v-model="form.wechatId">
|
||
<el-radio label="0">客户微信ID匹配</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="form-item__wrapper">
|
||
<div class="form-title">
|
||
<h2>提交次数限制</h2>
|
||
<span>此功能发布后不可修改</span>
|
||
</div>
|
||
<div class="form-field">
|
||
<i>*</i>
|
||
<h2>提交次数</h2>
|
||
</div>
|
||
<div class="form-item__container">
|
||
<el-radio-group v-model="form.commitType">
|
||
<el-radio label="0">不限次数</el-radio>
|
||
<el-radio label="1">限提交一次</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<!-- <div class="checkbox-wrapper">
|
||
<div class="checkbox">
|
||
<el-checkbox v-model="form.actionNotice" true-label="1" false-label="0">行为通知</el-checkbox>
|
||
<span>（当客户点击或者发布表单时，发送表单的员工将会受到消息提醒）</span>
|
||
</div>
|
||
<div class="checkbox">
|
||
<el-checkbox v-model="form.dynamicNotice" true-label="1" false-label="0">动态通知</el-checkbox>
|
||
<span>（当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里）</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="isShowAdd = false">返回</el-button>
|
||
<el-button type="primary" @click="onConfirm(1)">完成并发布</el-button>
|
||
</template>
|
||
</ai-dialog>
|
||
<ai-dialog
|
||
class="ai-dialog__success"
|
||
:visible.sync="isShowSuccess"
|
||
customFooter
|
||
@close="cancel(false)"
|
||
width="800px"
|
||
title="">
|
||
<div class="success-dialog">
|
||
<div class="success-header">
|
||
<i class="iconfont iconSteps_Finished"></i>
|
||
<h2>发布成功，请分享表单</h2>
|
||
</div>
|
||
<div class="success-wrapper">
|
||
<div class="step">
|
||
<div class="step-left">
|
||
<div class="stop-left__title">
|
||
<i></i>
|
||
<h2>分享方法</h2>
|
||
</div>
|
||
<p>可以将生成的二维码或链接分享给居民</p>
|
||
<el-input size="small" :value="successInfo.linkUrl">
|
||
<el-button slot="append" type="primary" @click="copy(successInfo.linkUrl)">复制链接</el-button>
|
||
</el-input>
|
||
</div>
|
||
<div class="step-right">
|
||
<div class="step-code">
|
||
<img :src="successInfo.qrCodeUrl">
|
||
</div>
|
||
<el-button type="text" @click="downloadImg(successInfo.qrCodeUrl)">下载二维码</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ai-dialog>
|
||
</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 {
|
||
isShowAdd: false,
|
||
isShowSuccess: false,
|
||
components: components,
|
||
targetList: [],
|
||
form: {
|
||
tableExplain: '详细描述',
|
||
title: '问卷调查',
|
||
isShowheadPicture: true,
|
||
isShowTableExplain: true,
|
||
isShowBtn: true,
|
||
headPicture: [],
|
||
commitType: '1',
|
||
periodValidityType: '0',
|
||
actionNotice: '1',
|
||
dynamicNotice: '1',
|
||
periodValidityEndTime: '',
|
||
shareStatus: '0',
|
||
count: 0,
|
||
wechatId: '0',
|
||
type: 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 {}
|
||
},
|
||
|
||
pageTitle () {
|
||
let typeName = '新增'
|
||
let itemName = '问卷调查'
|
||
|
||
if (this.params.id) {
|
||
typeName = '编辑'
|
||
}
|
||
|
||
if (this.params.type == 0) {
|
||
itemName = '问卷调查'
|
||
}
|
||
|
||
if (this.params.type == 1) {
|
||
itemName = '考试测评'
|
||
}
|
||
|
||
if (this.params.type == 2) {
|
||
itemName = '报名登记'
|
||
}
|
||
|
||
if (this.params.type == 3) {
|
||
itemName = '满意调查'
|
||
}
|
||
|
||
if (this.params.type == 4) {
|
||
itemName = '投票评选'
|
||
}
|
||
|
||
return `${typeName}${itemName}`
|
||
},
|
||
|
||
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 () {
|
||
if (this.params.type == 0) {
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
|
||
}]
|
||
}
|
||
if (this.params.type == 1) {
|
||
this.form.title = '考试测评'
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/exam.png'
|
||
}]
|
||
}
|
||
if (this.params.type == 2) {
|
||
this.form.title = '报名登记'
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/apply.png'
|
||
}]
|
||
}
|
||
if (this.params.type == 3) {
|
||
this.form.title = '满意调查'
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/satisfaction.png'
|
||
}]
|
||
}
|
||
if (this.params.type == 4) {
|
||
this.form.title = '投票评选'
|
||
this.form.headPicture = [{
|
||
url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/vote.png'
|
||
}]
|
||
}
|
||
},
|
||
|
||
downloadImg (url) {
|
||
let image = new Image()
|
||
image.setAttribute('crossOrigin', 'anonymous')
|
||
image.onload = function() {
|
||
let canvas = document.createElement('canvas')
|
||
canvas.width = image.width
|
||
canvas.height = image.height
|
||
let context = canvas.getContext('2d')
|
||
context.drawImage(image, 0, 0, image.width, image.height)
|
||
let url = canvas.toDataURL("image/png")
|
||
let a = document.createElement("a")
|
||
let event = new MouseEvent("click")
|
||
a.download = name || 'photo'
|
||
a.href = url
|
||
a.dispatchEvent(event)
|
||
}
|
||
image.src = url
|
||
},
|
||
|
||
onKeyup (e) {
|
||
this.$set(this.currTarget, 'points', e.replace(/[^\d]/g, ''))
|
||
},
|
||
|
||
onSelcetKeyup (e, index) {
|
||
console.log(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}全部答对分值`)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (this.params.templateType != 1) {
|
||
this.isShowAdd = true
|
||
} else {
|
||
const fields = this.targetList.map(item => {
|
||
return {
|
||
fieldType: item.type,
|
||
fieldName: item.label,
|
||
fieldInfo: JSON.stringify(item)
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
|
||
...this.form,
|
||
fields,
|
||
status: 0,
|
||
areaId: this.params.templateType == 0 ? this.areaId : '',
|
||
id: this.params.id,
|
||
headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
|
||
type: this.params.type,
|
||
templateType: this.params.templateType
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
|
||
setTimeout(() => {
|
||
this.cancel()
|
||
}, 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/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.form = {
|
||
...res.data,
|
||
headPicture: res.data.headPicture ? [{
|
||
url: res.data.headPicture
|
||
}] : []
|
||
}
|
||
|
||
this.form.isShowheadPicture = !!res.data.headPicture
|
||
this.form.isShowTableExplain = !!res.data.tableExplain
|
||
|
||
this.targetList = res.data.fields.map(item => {
|
||
return JSON.parse(item.fieldInfo)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
onConfirm (status) {
|
||
if (this.params.templateType == 1) {
|
||
// this.submitTemp()
|
||
}
|
||
|
||
if (this.form.periodValidityType === '1') {
|
||
if (!this.form.periodValidityEndTime) {
|
||
return this.$message.error('请选择截止时间')
|
||
}
|
||
|
||
if (new Date(this.form.periodValidityEndTime).getTime() < Date.now()) {
|
||
return this.$message.error('截止时间不能晚于当前时间')
|
||
}
|
||
}
|
||
|
||
const fields = this.targetList.map(item => {
|
||
return {
|
||
fieldType: item.type,
|
||
fieldName: item.label,
|
||
fieldInfo: JSON.stringify(item)
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
|
||
...this.form,
|
||
fields,
|
||
areaId: this.areaId,
|
||
status: status,
|
||
id: this.params.isQuote ? '' : this.params.id,
|
||
headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
|
||
type: this.params.type,
|
||
templateType: this.params.templateType,
|
||
periodValidityEndTime: this.form.periodValidityType === '1' ? this.form.periodValidityEndTime : ''
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
if (this.params.isQuote) {
|
||
this.instance.post(`/app/appquestionnairetemplate/quoteCount?id=${this.params.id}`)
|
||
}
|
||
this.$message.success('提交成功')
|
||
|
||
if (status === 0) {
|
||
return this.cancel()
|
||
}
|
||
|
||
this.successInfo = res.data
|
||
|
||
this.$nextTick(() => {
|
||
this.isShowSuccess = true
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
copy (link) {
|
||
let oInput = document.createElement('input')
|
||
oInput.value = link
|
||
document.body.appendChild(oInput)
|
||
oInput.select()
|
||
document.execCommand('Copy')
|
||
this.$message({
|
||
message: '已复制',
|
||
type: 'success'
|
||
})
|
||
oInput.remove()
|
||
},
|
||
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'list',
|
||
isRefresh: !!isRefresh,
|
||
isQuote: !!this.params.isQuote
|
||
})
|
||
},
|
||
|
||
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 {
|
||
:deep( .el-checkbox ){
|
||
display: flex!important;
|
||
align-items: center;
|
||
margin-right: 0;
|
||
}
|
||
|
||
: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 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;
|
||
}
|
||
|
||
:deep( .ai-detail__content ){
|
||
height: calc(100% - 52px)!important;
|
||
padding: 0!important;
|
||
overflow: hidden!important;
|
||
}
|
||
|
||
.ai-dialog__success {
|
||
: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: ' ';
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.success-dialog {
|
||
.success-wrapper {
|
||
margin-top: 40px;
|
||
|
||
.step {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&:last-child {
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
|
||
.step-right {
|
||
text-align: center;
|
||
color: #2266FF;
|
||
|
||
a {
|
||
display: block;
|
||
margin-top: 10px;
|
||
color: #2266FF;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-code {
|
||
width: 130px;
|
||
height: 130px;
|
||
padding: 5px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
|
||
border-radius: 4px;
|
||
border: 1px solid #E4E8EF;
|
||
}
|
||
|
||
:deep( .el-input ){
|
||
width: 418px;
|
||
margin-top: 20px;
|
||
margin-left: 12px;
|
||
|
||
span {
|
||
color: #fff;
|
||
}
|
||
|
||
button:hover {
|
||
background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-left {
|
||
p {
|
||
max-width: 348px;
|
||
line-height: 22px;
|
||
margin-left: 12px;
|
||
color: #888888;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.stop-left__title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
color: #222222;
|
||
}
|
||
|
||
i {
|
||
width: 4px;
|
||
height: 4px;
|
||
flex-shrink: 1;
|
||
margin-right: 8px;
|
||
background: #8899BB;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.success-header {
|
||
padding: 16px 0 40px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
i {
|
||
font-size: 64px;
|
||
color: #2DD77D;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 16px;
|
||
color: #222222;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
: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);
|
||
}
|
||
|
||
:deep( .ai-detail__content--wrapper ){
|
||
display: flex;
|
||
max-width: 100%!important;
|
||
height: 100%!important;
|
||
padding: 0!important;
|
||
background: #F5F6F9;
|
||
}
|
||
|
||
.middle {
|
||
flex: 1;
|
||
height: 100%;
|
||
|
||
:deep( .el-scrollbar__view ){
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.add-select {
|
||
height: auto;
|
||
line-height: 1;
|
||
margin: 10px 0 0 26px;
|
||
padding: 0;
|
||
}
|
||
|
||
.right-item__select--wrapper {
|
||
|
||
:deep( .el-upload--picture-card ){
|
||
// display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 1;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
|
||
// .el-upload-list__item-actions {
|
||
// display: none;
|
||
// }
|
||
}
|
||
|
||
.select-item {
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
i {
|
||
color: #8c9dbd;
|
||
}
|
||
|
||
.mover {
|
||
cursor: move;
|
||
}
|
||
|
||
.iconDelete {
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
: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;
|
||
|
||
:deep( .el-upload--picture-card ){
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 1;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
|
||
:deep( .el-checkbox ){
|
||
display: flex!important;
|
||
align-items: center;
|
||
margin-bottom: 0!important;
|
||
}
|
||
|
||
:deep( .el-checkbox__label ){
|
||
max-width: 140px;
|
||
color: #222;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
: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>
|