update

src/views/message/modelForm.vue

@@ -210,6 +210,37 @@
   /deep/.checkbox .el-input {
     width: 85%;
   }
+  // 操作按钮
+  .ctl_btn{
+    display: inline-block;
+    width: 28px;
+    position: absolute;
+    top:13px;
+  }
+  .ctl_btn_note{
+    right: 55px;
+    color:#ffb800;
+  }
+  .ctl_btn_edit{
+    right: 20px;
+    color: green;
+  }
+  .ctl_btn_del{
+    right: -15px;
+    color:red;
+  }
+  // 批注弹窗
+  /deep/.noteDialog .el-form-item__content{
+    margin-right: 0px!important;
+    margin-left:0px!important;
+  }
+  // /deep/.noteDialog .el-dialog{
+  //   margin-top:20vh!important;
+  // }
+  /deep/.noteDialog .el-dialog__body {
+    padding:10px 20px!important;
+  }
+
 }
 </style>
 <template>
@@ -246,20 +277,26 @@
                         </div>
                     </el-col>
                 </el-row>
-                <!-- <el-row>
+                <el-row>
                     <el-col :span='12'>
                         <div class='model' @click="addWidget(4)">
                             <img src="../../assets/upload_small.png" alt="">
                             <span>图片上传</span>
                         </div>
                     </el-col>
-                    <el-col :span='12'>
+                    <!-- <el-col :span='12'>
                         <div class='model' @click="addWidget(5)">
                             <img src="../../assets/file_small.png" alt="">
                             <span>文件上传</span>
                         </div>
+                    </el-col> -->
+                    <el-col :span='12'>
+                        <div class='model' @click="addWidget(6)">
+                            <img src="../../assets/slt_small.png" alt="">
+                            <span>域组件</span>
+                        </div>
                     </el-col>
-                </el-row> -->
+                </el-row>
             </div>
             <div class="content-item middle">
                 <div class='item-title'>编辑模板-{{title}}</div>
@@ -274,10 +311,11 @@
                             <el-input placeholder='请输入' v-model="item.placeholder"></el-input>
                             <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>
+                                 <span class="ctl_btn ctl_btn_note" @click="addNote(item)">批注</span> 
+                                 <span class="ctl_btn ctl_btn_edit" @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
+                                 <span class="ctl_btn ctl_btn_del" @click="widgetList.splice(index,1)">删除</span>
                             </font>
-                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='textarea'">
                             <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
@@ -287,7 +325,7 @@
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
-                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='radio'" class="radio">
                             <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>（单选）
@@ -304,7 +342,7 @@
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
-                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='checkbox'"  class="checkbox">
                             <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>（多选）
@@ -321,29 +359,31 @@
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
-                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='image'">
-                            <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
+                            <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
+                            <el-input :readonly="item.edit" v-model="item.label" :class="[item.edit?'edit_label':'',item.require?'require':'']"></el-input>
                             <el-upload
-                                action="https://jsonplaceholder.typicode.com/posts/"
+                                action="/api/admin/uploadfile"
                                 list-type="picture-card"
-                                :on-preview="handlePictureCardPreview"
+                                :on-preview="handlePreview"
                                 :on-remove="handleRemove">
                                 <i class="el-icon-plus"></i>
                             </el-upload>
                             <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'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                         <section v-if="item.type=='file'">
                             <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input>
                             <el-upload
                                 class="upload-demo"
                                 ref="upload"
-                                action="https://jsonplaceholder.typicode.com/posts/"
+                                action="/api/admin/uploadfile"
                                 :on-preview="handlePreview"
                                 :on-remove="handleRemove"
                                 :file-list="fileList"
@@ -356,7 +396,7 @@
                                  <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                  <span @click="widgetList.splice(index,1)">删除</span>
                             </font>
-                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
+                            <el-button type='primary' class='dargBtn drag' size="mini">拖拽移动顺序</el-button>
                         </section>
                     </el-form-item>
                     </transition-group>
@@ -365,6 +405,19 @@
                         <el-button size="medium" type="primary" @click="save">保存</el-button>
                     </div>
                 </el-form>
+                <!-- 添加批注 -->
+                <el-dialog
+                  class="noteDialog"
+                  :title="dialogTitle"
+                  :close-on-click-modal="false"
+                  :visible.sync="dialogVisible"
+                > 
+                    <fuEditor :value="curNote"></fuEditor>
+                  <span slot="footer" class="dialog-footer">
+                    <el-button size="small" type="normal" @click="dialogVisible=false,noteForm={}">取消</el-button>
+                    <el-button size="small" type="primary" @click="saveNote(curItem)">确 定</el-button>
+                  </span>
+                </el-dialog>
             </div>
             <div class="content-item right">
                 <div class='item-title'>效果预览</div>
@@ -384,10 +437,11 @@
                                     <el-checkbox :label="iitem.label" v-for="(iitem,index) in item.items" :key="index">{{iitem.label}}</el-checkbox>
                                 </el-radio-group>
                                 <el-upload
+                                    :class="item.require?'require':''"
                                     v-if="item.type=='image'"
-                                    action="https://jsonplaceholder.typicode.com/posts/"
+                                    action="/api/admin/uploadfile"
                                     list-type="picture-card"
-                                    :on-preview="handlePictureCardPreview"
+                                    :on-preview="handlePreview"
                                     :on-remove="handleRemove">
                                     <i class="el-icon-plus"></i>
                                 </el-upload>
@@ -395,7 +449,7 @@
                                     v-if="item.type=='file'"
                                     class="upload-demo"
                                     ref="upload"
-                                    action="https://jsonplaceholder.typicode.com/posts/"
+                                    action="/api/admin/uploadfile"
                                     :on-preview="handlePreview"
                                     :on-remove="handleRemove"
                                     :file-list="fileList"
@@ -418,10 +472,16 @@
 </template>
 <script>
 import vuedraggable from "vuedraggable";
+import fuEditor from "../../components/fuEditor";
 export default {
-  components: { vuedraggable },
+  components: { vuedraggable,fuEditor },
   data() {
     return {
+      curItem:{},
+      dialogTitle:"",
+      noteForm:{},
+      curNote:"",
+      dialogVisible:false,
       rules: {
         姓名: [{ required: true, message: "请输入标题", trigger: "blur" }],
       },
@@ -498,6 +558,7 @@ export default {
         },
         {
           type: "image",
+          cntype:"",
           label: "请输入标题",
           placeholder: "请输入",
           edit: true,
@@ -513,6 +574,24 @@ export default {
     };
   },
   methods: {
+    upload(){
+
+    },
+    addNote(item){
+      this.curNote = "";
+      this.dialogTitle = "为"+'"'+item.label+'"添加批注信息'
+      this.dialogVisible = true;
+    },
+    saveNote(item){
+      // this.curItem = item;
+      this.dialogVisible = false;
+    },
+    handlePreview(){
+
+    },
+    handleRemove(){
+
+    },
     unique(arr) {
       var x = new Set(arr);
       return [...x];