提交

src/view/allMedia/H5Editor.vue

@@ -13,6 +13,7 @@
         v-if="H5Editor && leftEle"
         :is="H5EditorObj[H5Editor.type]"
         :item="H5Editor"
+        :index="H5Editor.index"
       ></component>
     </van-popup>
     <div class="H5Editor_center">
@@ -31,29 +32,45 @@
               v-for="(item, index) in hoversList[selectPage].components || []"
               :key="index"
             >
-              <h5-image v-if="item.type === 'image'" :item="item"></h5-image>
+              <h5-image
+                v-if="item.type === 'image'"
+                :item="item"
+                :index="index"
+              ></h5-image>
               <h5-paragraph
                 v-if="item.type === 'paragraph'"
                 :item="item"
+                :index="index"
                 @saveParagraph="text => saveParagraph(text, index)"
               ></h5-paragraph>
               <h5-from-component
                 v-if="item.type === 'fromComponent'"
+                :index="index"
                 :item="item"
               >
                 <template v-for="(v, i) in item.child_list || []" :key="i">
                   <h5-van-field
                     v-if="v.type === 'van-field'"
                     :item="v"
+                    :index="index + '-' + i"
                     @click="
-                      () => selectComponent({ ...v, leftEle: true }, index)
+                      () =>
+                        selectComponent(
+                          { ...v, leftEle: true },
+                          index + '-' + i
+                        )
                     "
                   ></h5-van-field>
                   <h5-van-buttom
                     v-if="v.type === 'van-buttom'"
+                    :index="index + '-' + i"
                     :item="v"
                     @click="
-                      () => selectComponent({ ...v, leftEle: true }, index)
+                      () =>
+                        selectComponent(
+                          { ...v, leftEle: true },
+                          index + '-' + i
+                        )
                     "
                   ></h5-van-buttom>
                 </template>
@@ -114,9 +131,9 @@ const page = ref({ width: 375, height: 0 });
 const selectPageFunc = (index = 0) => {
   selectPage.value = index;
 };
-const selectComponent = v => {
+const selectComponent = (v, i) => {
   const type = H5EditorObjEle[v.type];
-  H5Editor.value = { item: v, type };
+  H5Editor.value = { item: v, type, index: i };
   leftEle.value = v.leftEle || false;
 };
 
@@ -145,16 +162,29 @@ const saveParagraph = (paragraph, index) => {
 };
 
 // provide 传递方法
-provide('starEditorFormwork', value => {
-  selectComponent(value);
+provide('starEditorFormwork', (value, i) => {
+  selectComponent(value, i);
 });
 
 provide('saveComponents', value => {
   console.log(value);
+  //   保存修改
 });
 
 provide('deleteItemComponents', value => {
-  console.log(value);
+  const vList = value.toString().split('-');
+  const list = JSON.parse(
+    JSON.stringify(hoversList.value[selectPage.value].components)
+  );
+  console.log(list,vList);
+  if (vList.length == 1) {
+    list.splice(vList[0], 1);
+  } else {
+    // 2层组件，只删除里层
+    list[vList[0]].child_list.splice(vList[1],1);
+  }
+  hoversList.value[selectPage.value].components = list;
+  //   删除组件
 });
 </script>
 

src/view/allMedia/components/H5Editor/img.vue

@@ -12,6 +12,7 @@ import { defineProps, ref, inject } from 'vue';
 const starEditorFormwork  = inject("starEditorFormwork");
 const props = defineProps({
   item: Object,
+  index: Number
 });
 const oriUrl = ref('');
 const outStyle = () => {
@@ -32,7 +33,7 @@ const editorFunc = () => {
         leftEle: true
     }
     if(oriUrl.value) p.src = oriUrl.value;
-    starEditorFormwork(p);
+    starEditorFormwork(p, props.index);
 };
 </script>
 

src/view/allMedia/components/H5Editor/paragraph.vue

@@ -27,6 +27,7 @@ const starEditorFormwork  = inject("starEditorFormwork");
 
 const props = defineProps({
   item: Object,
+  index: Number
 });
 const emit = defineEmits(['saveParagraph']);
 
@@ -42,7 +43,7 @@ const inputFuncTitle = e => {
 };
 
 const selectThis = () => {
-    starEditorFormwork(newItem);
+    starEditorFormwork(newItem, props.index);
 }
 </script>
 

src/view/allMedia/components/H5EditorLeft/imgEditor.vue

@@ -2,36 +2,48 @@
   <left-skeleton @save="save" @deleteFunc="deleteFunc">
     <el-input v-model="inputText" placeholder="请输入在线地址或在下方上传" />
     <el-upload
-      ref="uploadEle"
-      v-model:file-list="fileList"
-      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-      list-type="picture-card"
-      class="upload-demo"
+      drag
+      :action="config.base.origin + '/h5template/upload'"
       accept="image/*"
       :limit="1"
+      :on-success="onSuccess"
+      :headers="{ Authorization: token }"
     >
-      <el-icon><Plus /></el-icon>
+      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+      <div class="el-upload__text">
+        拖拽图片到此处或<em>点击上传图片</em>
+      </div>
     </el-upload>
+    <img :src="inputText" style="width: 100%;" />
   </left-skeleton>
 </template>
 
 <script setup>
+import config from '../../../../config/index';
 import { defineProps, ref, inject } from 'vue';
 import leftSkeleton from '../H5Editor/leftSkeleton.vue';
 
 const inputText = ref('');
-const uploadEle = ref(null);
-const fileList = ref([]);
-const saveComponents = inject("saveComponents")
-const deleteItemComponents = inject("deleteItemComponents")
+const saveComponents = inject('saveComponents');
+const deleteItemComponents = inject('deleteItemComponents');
 
 const props = defineProps({
   item: Object,
+  index: Number,
 });
 
+const item = JSON.parse(JSON.stringify(props.item));
+const token = localStorage.getItem('token');
+
+inputText.value = item.item.src;
+
+const onSuccess = res => {
+  if (res.code != 0) return;
+  inputText.value = res.data.url;
+};
+
 const save = () => {
-  uploadEle.value.submit();
-  saveComponents("保存")
+  saveComponents('保存');
 };
 
 const deleteFunc = () => {
@@ -39,14 +51,14 @@ const deleteFunc = () => {
    * 1.删除本地
    * 2.删除远程
    */
-   deleteItemComponents(props.item);
+  deleteItemComponents(props.index);
 };
 
 console.log(props.item);
 </script>
 
 <style scoped>
-.upload-demo {
-  margin-top: 1em;
+.el-upload {
+  margin: 1em 0;
 }
 </style>

src/view/allMedia/components/H5EditorLeft/vanButtom.vue

@@ -20,6 +20,7 @@ const deleteItemComponents = inject('deleteItemComponents');
 
 const props = defineProps({
   item: Object,
+  index: String,
 });
 
 
@@ -37,7 +38,7 @@ const deleteFunc = () => {
    * 1.删除本地
    * 2.删除远程
    */
-  deleteItemComponents(props.item);
+  deleteItemComponents(props.index);
 };
 
 console.log(form.value,props.item);

src/view/allMedia/components/H5EditorLeft/vanField.vue

@@ -12,6 +12,14 @@
       </el-form-item>
     </el-form>
     <div v-else>
+      <el-form :model="form">
+        <el-form-item label="组件名称">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="是否必填">
+          <el-switch v-model="form.isRequired" />
+        </el-form-item>
+      </el-form>
       <component
         v-for="(item, index) in form.eleList"
         :key="index"
@@ -28,19 +36,20 @@
 import { defineProps, inject, ref } from 'vue';
 import leftSkeleton from '../H5Editor/leftSkeleton.vue';
 
-import vanRadioGroup from "./van_radio_group"
-import vanUploader from "./van_uploader"
+import vanRadioGroup from './van_radio_group';
+import vanUploader from './van_uploader';
 
 const H5EditorObj = {
-    "van-radio-group": vanRadioGroup,
-    "van-uploader": vanUploader,
-}
+  'van-radio-group': vanRadioGroup,
+  'van-uploader': vanUploader,
+};
 
 const saveComponents = inject('saveComponents');
 const deleteItemComponents = inject('deleteItemComponents');
 
 const props = defineProps({
   item: Object,
+  index: String,
 });
 const item = JSON.parse(JSON.stringify(props.item.item));
 const defaultForm = ref(false);
@@ -54,18 +63,26 @@ if (!item.child_list || !item.child_list.length) {
 } else {
   defaultForm.value = false;
   formSele.eleList = item.child_list;
+  formSele.name = item.attr.label;
+  formSele.isRequired = item.attr.isRequired;
 }
 
 const form = ref(formSele);
 
-
 // 获取子组件内更新的数据
 const seacechange = (item, index) => {
-    item.eleList[index] = item;
-}
+  form.value.eleList[index] = item;
+};
 
 const save = () => {
-  saveComponents('保存');
+  let V = {};
+  if (defaultForm.value) {
+    V = { ...item, attr: { ...form.value } };
+  } else {
+    V = { ...item, ...form.value, child_list: { ...form.value.eleList } };
+  }
+  delete V.eleList;
+  saveComponents({ item: V, index: props.index });
 };
 
 const deleteFunc = () => {
@@ -73,10 +90,8 @@ const deleteFunc = () => {
    * 1.删除本地
    * 2.删除远程
    */
-  deleteItemComponents(props.item);
+  deleteItemComponents(props.index );
 };
-
-console.log(props.item);
 </script>
 
 <style scoped>

src/view/allMedia/components/H5EditorLeft/van_radio_group.vue

@@ -40,7 +40,7 @@ import { defineProps, ref, defineEmits } from 'vue';
 import H5VanRadio from './van_radio.vue';
 const props = defineProps({
   item: Object,
-  index: Number,
+  index: String,
 });
 
 const localItem = ref(JSON.parse(JSON.stringify(props.item)));
@@ -55,6 +55,7 @@ const emit = defineEmits(['change']);
 const form = ref({
   name: '',
 });
+console.log(localItem.value);
 
 const editEle = (v, i) => {
   showEle.value = true;

src/view/allMedia/components/H5EditorLeft/van_uploader.vue

@@ -12,7 +12,7 @@
 import { defineProps, ref, defineEmits } from 'vue';
 const props = defineProps({
   item: Object,
-  index: Number
+  index: String
 });