|
|
@@ -268,27 +268,27 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- //
|
|
|
- /deep/.group .el-form-item__content{
|
|
|
- margin-right:0px!important;
|
|
|
+ //
|
|
|
+ /deep/.group .el-form-item__content {
|
|
|
+ margin-right: 0px !important;
|
|
|
}
|
|
|
- .active_item{
|
|
|
- border:2px solid #3a8ee6;
|
|
|
+ .active_item {
|
|
|
+ border: 2px solid #3a8ee6;
|
|
|
}
|
|
|
// 提示信息展示
|
|
|
- .noteInfoDialog{
|
|
|
+ .noteInfoDialog {
|
|
|
width: 90%;
|
|
|
- margin:0 auto;
|
|
|
+ margin: 0 auto;
|
|
|
height: 300px;
|
|
|
- border:1px solid #ccc;
|
|
|
+ border: 1px solid #ccc;
|
|
|
position: absolute;
|
|
|
- top:10vh;
|
|
|
- left:5%;
|
|
|
+ top: 10vh;
|
|
|
+ left: 5%;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
- .noteInfoDialog .body{
|
|
|
+ .noteInfoDialog .body {
|
|
|
width: 100%;
|
|
|
- margin:0 auto;
|
|
|
+ margin: 0 auto;
|
|
|
height: 300px;
|
|
|
// border:1px solid red;
|
|
|
position: absolute;
|
|
|
@@ -296,6 +296,21 @@
|
|
|
// left:5%;
|
|
|
}
|
|
|
}
|
|
|
+.tool_text {
|
|
|
+ width: 205px;
|
|
|
+ p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .toolText_img {
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ img:nth-child(odd) {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<section>
|
|
|
@@ -370,12 +385,12 @@
|
|
|
@start="start"
|
|
|
@end="end"
|
|
|
>
|
|
|
- <transition-group>
|
|
|
+ <transition-group>
|
|
|
<el-form-item
|
|
|
v-for="(item, index) in widgetList"
|
|
|
:key="index"
|
|
|
:prop="item.label"
|
|
|
- :class="item.active==1?'active_item':'test'"
|
|
|
+ :class="item.active == 1 ? 'active_item' : 'test'"
|
|
|
@click.native.self="activeItem(index)"
|
|
|
>
|
|
|
<section v-if="item.type == 'input'">
|
|
|
@@ -431,10 +446,19 @@
|
|
|
<el-checkbox class="item_require" v-model="item.require"
|
|
|
>必填</el-checkbox
|
|
|
>
|
|
|
- <span @click="item.edit = !item.edit">{{
|
|
|
- item.edit ? "编辑" : "保存"
|
|
|
- }}</span>
|
|
|
- <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
+ <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.edit = !item.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ item.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="widgetList.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
</font>
|
|
|
<el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
>拖拽移动顺序</el-button
|
|
|
@@ -477,10 +501,19 @@
|
|
|
<el-checkbox class="item_require" v-model="item.require"
|
|
|
>必填</el-checkbox
|
|
|
>
|
|
|
- <span @click="item.edit = !item.edit">{{
|
|
|
- item.edit ? "编辑" : "保存"
|
|
|
- }}</span>
|
|
|
- <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
+ <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.edit = !item.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ item.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="widgetList.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
</font>
|
|
|
<el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
>拖拽移动顺序</el-button
|
|
|
@@ -523,10 +556,19 @@
|
|
|
<el-checkbox class="item_require" v-model="item.require"
|
|
|
>必填</el-checkbox
|
|
|
>
|
|
|
- <span @click="item.edit = !item.edit">{{
|
|
|
- item.edit ? "编辑" : "保存"
|
|
|
- }}</span>
|
|
|
- <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
+ <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.edit = !item.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ item.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="widgetList.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
</font>
|
|
|
<el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
>拖拽移动顺序</el-button
|
|
|
@@ -554,10 +596,19 @@
|
|
|
<el-checkbox class="item_require" v-model="item.require"
|
|
|
>必填</el-checkbox
|
|
|
>
|
|
|
- <span @click="item.edit = !item.edit">{{
|
|
|
- item.edit ? "编辑" : "保存"
|
|
|
- }}</span>
|
|
|
- <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
+ <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.edit = !item.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ item.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="widgetList.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
</font>
|
|
|
<el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
>拖拽移动顺序</el-button
|
|
|
@@ -599,6 +650,7 @@
|
|
|
>拖拽移动顺序</el-button
|
|
|
>
|
|
|
</section>
|
|
|
+
|
|
|
<!-- 域组件 -->
|
|
|
<section v-if="item.type == 'group'" class="group">
|
|
|
<el-input
|
|
|
@@ -649,20 +701,201 @@
|
|
|
>删除</span
|
|
|
>
|
|
|
</font>
|
|
|
- <!-- <el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
- >拖拽移动顺序</el-button
|
|
|
- > -->
|
|
|
+ </section>
|
|
|
+ <section v-if="iitem.type == 'textarea'">
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iitem.label"
|
|
|
+ :class="[
|
|
|
+ iitem.edit ? 'edit_label' : '',
|
|
|
+ iitem.require ? 'require' : '',
|
|
|
+ ]"
|
|
|
+ ></el-input>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="iitem.placeholder"
|
|
|
+ ></el-input>
|
|
|
+ <font>
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_note"
|
|
|
+ @click="addNote(iitem)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ @click="iitem.edit = !iitem.edit"
|
|
|
+ >{{ iitem.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ @click="item.children.splice(index, 1)"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </font>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section v-if="iitem.type == 'radio'" class="radio">
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iitem.label"
|
|
|
+ :class="[
|
|
|
+ iitem.edit ? 'edit_label' : '',
|
|
|
+ iitem.require ? 'require' : '',
|
|
|
+ ]"
|
|
|
+ ></el-input
|
|
|
+ >（单选）
|
|
|
+ <el-radio-group>
|
|
|
+ <el-radio
|
|
|
+ :label="iiitem.label"
|
|
|
+ v-for="(iiitem, index) in iitem.items"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iiitem.label"
|
|
|
+ :class="iitem.edit ? 'edit_label' : ''"
|
|
|
+ ></el-input>
|
|
|
+ <template v-if="!iitem.edit">
|
|
|
+ <i
|
|
|
+ class="el-icon-minus opicon"
|
|
|
+ @click="minusOption(iitem.items, index)"
|
|
|
+ ></i
|
|
|
+ ><i
|
|
|
+ class="el-icon-plus opicon"
|
|
|
+ @click="plusOption(iitem.items, index)"
|
|
|
+ ></i>
|
|
|
+ </template>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <font>
|
|
|
+ <el-checkbox
|
|
|
+ class="item_require"
|
|
|
+ v-model="iitem.require"
|
|
|
+ >必填</el-checkbox
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_note"
|
|
|
+ @click="addNote(iitem)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="iitem.edit = !iitem.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ iitem.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.children.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </font>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section v-if="iitem.type == 'checkbox'" class="checkbox">
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iitem.label"
|
|
|
+ :class="[
|
|
|
+ iitem.edit ? 'edit_label' : '',
|
|
|
+ iitem.require ? 'require' : '',
|
|
|
+ ]"
|
|
|
+ ></el-input
|
|
|
+ >（多选）
|
|
|
+ <el-radio-group>
|
|
|
+ <el-checkbox
|
|
|
+ :label="iiitem.label"
|
|
|
+ v-for="(iiitem, index) in iitem.items"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iiitem.label"
|
|
|
+ :class="iitem.edit ? 'edit_label' : ''"
|
|
|
+ ></el-input>
|
|
|
+ <template v-if="!iitem.edit">
|
|
|
+ <i
|
|
|
+ class="el-icon-minus opicon"
|
|
|
+ @click="minusOption(iitem.items, index)"
|
|
|
+ ></i
|
|
|
+ ><i
|
|
|
+ class="el-icon-plus opicon"
|
|
|
+ @click="plusOption(iitem.items, index)"
|
|
|
+ ></i>
|
|
|
+ </template>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-radio-group>
|
|
|
+ <font>
|
|
|
+ <el-checkbox
|
|
|
+ class="item_require"
|
|
|
+ v-model="iitem.require"
|
|
|
+ >必填</el-checkbox
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_note"
|
|
|
+ @click="addNote(iitem)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="iitem.edit = !iitem.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ iitem.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.children.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </font>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section v-if="iitem.type == 'image'">
|
|
|
+ <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
|
|
|
+ <el-input
|
|
|
+ :readonly="iitem.edit"
|
|
|
+ v-model="iitem.label"
|
|
|
+ :class="[
|
|
|
+ iitem.edit ? 'edit_label' : '',
|
|
|
+ iitem.require ? 'require' : '',
|
|
|
+ ]"
|
|
|
+ ></el-input>
|
|
|
+ <el-upload
|
|
|
+ action="/api/admin/uploadfile"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ <font>
|
|
|
+ <el-checkbox class="item_require" v-model="iitem.require"
|
|
|
+ >必填</el-checkbox
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="ctl_btn ctl_btn_note"
|
|
|
+ @click="addNote(iitem)"
|
|
|
+ >批注</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="iitem.edit = !iitem.edit"
|
|
|
+ class="ctl_btn ctl_btn_edit"
|
|
|
+ >{{ iitem.edit ? "编辑" : "保存" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="item.children.splice(index, 1)"
|
|
|
+ class="ctl_btn ctl_btn_del"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </font>
|
|
|
</section>
|
|
|
</el-form-item>
|
|
|
- <font>
|
|
|
- <!-- <el-checkbox class="item_require" v-model="item.require">必填</el-checkbox> -->
|
|
|
- <!-- <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> -->
|
|
|
- <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
- </font>
|
|
|
- <el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
- >拖拽移动顺序</el-button
|
|
|
- >
|
|
|
</section>
|
|
|
+ <font style="top: -18px" v-if="item.type == 'group'">
|
|
|
+ <span @click="widgetList.splice(index, 1)">删除</span>
|
|
|
+ </font>
|
|
|
+ <el-button type="primary" class="dargBtn drag" size="mini"
|
|
|
+ >拖拽移动顺序</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</transition-group>
|
|
|
</vuedraggable>
|
|
|
@@ -731,21 +964,34 @@
|
|
|
<div class="content-item right">
|
|
|
<div class="item-title">效果预览</div>
|
|
|
<div class="phone">
|
|
|
- <div class="item-main" style="position:relative;">
|
|
|
+ <div class="item-main" style="position: relative">
|
|
|
<!-- <img src="../../assets/survey_logo.png" alt="" class="survey_logo"> -->
|
|
|
<h5 align="center" class="tpl_title">{{ title }}</h5>
|
|
|
<el-form ref="form" :model="form" class="tpl_form over_y">
|
|
|
<template v-for="(item, index) in widgetList">
|
|
|
+ <h6 v-if="item.type=='group'" align="center" class="tpl_title">----{{ item.label }}----</h6>
|
|
|
<el-form-item :key="index" :label="item.label + item.cntype">
|
|
|
- <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="bottom-end">
|
|
|
- <i v-if="item.noteDesc"
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="dark"
|
|
|
+ content="Left Bottom 提示文字"
|
|
|
+ placement="bottom-end"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ v-if="item.noteDesc"
|
|
|
class="el-icon-info"
|
|
|
style="position: absolute; top: -28px; right: 0px"
|
|
|
- @click="showNoteInfo"
|
|
|
></i>
|
|
|
- <div slot="content">
|
|
|
- <p>{{item.noteDesc}}</p>
|
|
|
- <img width="100px" :src="item" alt="" v-for="(item,index) in item.noteImgs" :key="index" />
|
|
|
+ <div slot="content" class="tool_text">
|
|
|
+ <p>{{ item.noteDesc }}</p>
|
|
|
+ <div class="toolText_img">
|
|
|
+ <img
|
|
|
+ :src="item"
|
|
|
+ alt=""
|
|
|
+ v-for="(item, index) in item.noteImgs"
|
|
|
+ :key="index"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
<el-input
|
|
|
@@ -976,54 +1222,32 @@ export default {
|
|
|
placeholder: "请输入",
|
|
|
edit: false,
|
|
|
require: true,
|
|
|
- children: [
|
|
|
- {
|
|
|
- type: "input",
|
|
|
- cntype: "",
|
|
|
- label: "请输入标题",
|
|
|
- placeholder: "请输入",
|
|
|
- edit: false,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- {
|
|
|
- type: "input",
|
|
|
- cntype: "",
|
|
|
- label: "请输入标题",
|
|
|
- placeholder: "请输入",
|
|
|
- edit: false,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- ],
|
|
|
+ children: [],
|
|
|
},
|
|
|
],
|
|
|
widgetList: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- showNoteInfo(){
|
|
|
+ showNoteInfo() {
|
|
|
// this.dialogTitle1 = true
|
|
|
// this.dialogVisible1 = true;
|
|
|
},
|
|
|
- activeItem(index){
|
|
|
- var widgetList=this.widgetList
|
|
|
- for(let i=0;i<widgetList.length;i++){
|
|
|
- if(i == index){
|
|
|
- this.$set(widgetList[i],'active',1)
|
|
|
- }else{
|
|
|
- this.$set(widgetList[i],'active',0)
|
|
|
+ activeItem(index) {
|
|
|
+ var widgetList = this.widgetList;
|
|
|
+ for (let i = 0; i < widgetList.length; i++) {
|
|
|
+ if (i == index) {
|
|
|
+ this.$set(widgetList[i], "active", 1);
|
|
|
+ } else {
|
|
|
+ this.$set(widgetList[i], "active", 0);
|
|
|
}
|
|
|
}
|
|
|
- this.widgetList=widgetList;
|
|
|
- },
|
|
|
- change(evt) {
|
|
|
- },
|
|
|
- start(evt) {
|
|
|
- },
|
|
|
- end(evt) {
|
|
|
- },
|
|
|
- upload() {
|
|
|
-
|
|
|
+ this.widgetList = widgetList;
|
|
|
},
|
|
|
+ change(evt) {},
|
|
|
+ start(evt) {},
|
|
|
+ end(evt) {},
|
|
|
+ upload() {},
|
|
|
imgchange(file, fileList) {
|
|
|
console.log(fileList);
|
|
|
var img = this.noteImgs;
|
|
|
@@ -1131,9 +1355,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
addWidget(i) {
|
|
|
- console.log(i);
|
|
|
- this.widgetList.push(JSON.parse(JSON.stringify(this.stdWidgetList[i])));
|
|
|
- console.log(this.widgetList);
|
|
|
+ let item = JSON.parse(JSON.stringify(this.stdWidgetList[i]));
|
|
|
+ if (item.type == "group") {
|
|
|
+ item.active = 1;
|
|
|
+ this.widgetList.forEach((item, index) => {
|
|
|
+ item.active = 0;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 筛选域组件
|
|
|
+ let gwidget = this.widgetList.filter(function (val) {
|
|
|
+ return val.type == "group" && val.active == 1;
|
|
|
+ });
|
|
|
+ if (gwidget.length) {
|
|
|
+ gwidget[0].children.push(item);
|
|
|
+ } else {
|
|
|
+ this.widgetList.push(item);
|
|
|
+ }
|
|
|
},
|
|
|
minusOption(options, index) {
|
|
|
if (options.length <= 1) {
|
xjc