tianheng-ui 0.0.45 → 0.0.48

package/packages/formMaking/WidgetForm.vue

@@ -10,7 +10,6 @@
       :label-width="data.config.labelWidth + 'px'"
     >
       <draggable
-        class=""
         v-model="data.list"
         v-bind="{
           group: 'people',
@@ -23,82 +22,14 @@
       >
         <transition-group name="fade" tag="div" class="widget-form-list">
           <template v-for="(element, index) in data.list">
-            <template v-if="element.type == 'grid'">
-              <el-row
-                class="widget-col widget-view"
-                v-if="element && element.key"
-                :key="element.key"
-                type="flex"
-                :class="{ active: selectWidget.key == element.key }"
-                :gutter="element.options.gutter ? element.options.gutter : 0"
-                :justify="element.options.justify"
-                :align="element.options.align"
-                @click.native="handleSelectWidget(index)"
-              >
-                <el-col
-                  v-for="(col, colIndex) in element.columns"
-                  :key="colIndex"
-                  :span="col.span ? col.span : 0"
-                >
-                  <draggable
-                    v-model="col.list"
-                    :no-transition-on-drag="true"
-                    v-bind="{
-                      group: 'people',
-                      ghostClass: 'ghost',
-                      animation: 200,
-                      handle: '.drag-widget'
-                    }"
-                    @end="handleMoveEnd"
-                    @add="handleWidgetColAdd($event, element, colIndex)"
-                  >
-                    <transition-group
-                      name="fade"
-                      tag="div"
-                      class="widget-col-list"
-                    >
-                      <template v-for="(el, i) in col.list">
-                        <widget-form-item
-                          :key="el.key"
-                          v-if="el.key"
-                          :element="el"
-                          :select.sync="selectWidget"
-                          :index="i"
-                          :data="col"
-                        >
-                        </widget-form-item>
-                      </template>
-                    </transition-group>
-                  </draggable>
-                </el-col>
-                <div
-                  class="widget-view-action widget-col-action"
-                  v-if="selectWidget.key == element.key"
-                >
-                  <i
-                    class="iconfont icon-trash"
-                    @click.stop="handleWidgetDelete(index)"
-                  ></i>
-                </div>
-
-                <div
-                  class="widget-view-drag widget-col-drag"
-                  v-if="selectWidget.key == element.key"
-                >
-                  <i class="iconfont icon-drag drag-widget"></i>
-                </div>
-              </el-row>
-            </template>
-            <template v-else>
-              <widget-form-item
-                v-if="element && element.key"
-                :key="element.key"
-                :element="element"
-                :select.sync="selectWidget"
-                :index="index"
-                :data="data"
-              ></widget-form-item>
-            </template>
+            <widget-form-item
+              v-if="element && element.key"
+              :key="element.key"
+              :element="element"
+              :select.sync="selectWidget"
+              :index="index"
+              :data="data"
+            ></widget-form-item>
           </template>
         </transition-group>
       </draggable>
@@ -118,7 +49,8 @@ export default {
   props: ["data", "select"],
   data() {
     return {
-      selectWidget: this.select
+      selectWidget: this.select,
+      config: {}
     };
   },
   mounted() {
@@ -142,115 +74,49 @@ export default {
       //为拖拽到容器的元素添加唯一 key
       const key =
         Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-      this.$set(this.data.list, newIndex, {
-        ...this.data.list[newIndex],
-        options: {
-          ...this.data.list[newIndex].options,
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: this.data.list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        this.data.list[newIndex].type === "radio" ||
-        this.data.list[newIndex].type === "checkbox" ||
-        this.data.list[newIndex].type === "select"
-      ) {
-        this.$set(this.data.list, newIndex, {
-          ...this.data.list[newIndex],
-          options: {
-            ...this.data.list[newIndex].options,
-            options: this.data.list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        });
-      }
-
-      if (this.data.list[newIndex].type === "grid") {
-        this.$set(this.data.list, newIndex, {
-          ...this.data.list[newIndex],
-          columns: this.data.list[newIndex].columns.map(item => ({ ...item }))
-        });
-      }
+      let dic = JSON.parse(JSON.stringify(this.data.list[newIndex]));
+      dic.key = key;
+      dic.model = dic.type + "_" + key;
+      dic.rules = [];
+
+      this.$set(this.data.list, newIndex, dic);
+
+      // if (
+      //   this.data.list[newIndex].type === "radio" ||
+      //   this.data.list[newIndex].type === "checkbox" ||
+      //   this.data.list[newIndex].type === "select"
+      // ) {
+      //   this.$set(this.data.list, newIndex, {
+      //     ...this.data.list[newIndex],
+      //     options: {
+      //       ...this.data.list[newIndex].options,
+      //       options: this.data.list[newIndex].options.options.map(item => ({
+      //         ...item
+      //       }))
+      //     }
+      //   });
+      // }
+
+      // if (this.data.list[newIndex].type === "grid") {
+      // this.$set(
+      //   this.data.list,
+      //   newIndex,
+      //   JSON.parse(JSON.stringify(this.data.list[newIndex]))
+      // );
+      // }
+
+      // if (this.data.list[newIndex].type === "tabs") {
+      //   this.$set(this.data.list, newIndex, JSON.parse(JSON.stringify(this.data.list[newIndex])));
+      // }
+
+      // if (this.data.list[newIndex].type === "table") {
+      //   this.$set(this.data.list, newIndex, {
+      //     ...this.data.list[newIndex],
+      //     list: this.data.list[newIndex].list.map(item => ({ ...item }))
+      //   });
+      // }
 
       this.selectWidget = this.data.list[newIndex];
-    },
-    handleWidgetColAdd($event, row, colIndex) {
-      console.log("coladd", $event, row, colIndex);
-      const newIndex = $event.newIndex;
-      const oldIndex = $event.oldIndex;
-      const item = $event.item;
-
-      // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("data-grid") >= 0) {
-        // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
-          this.data.list.splice(
-            oldIndex,
-            0,
-            row.columns[colIndex].list[newIndex]
-          );
-
-        row.columns[colIndex].list.splice(newIndex, 1);
-
-        return false;
-      }
-
-      console.log("from", item);
-
-      const key =
-        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.columns[colIndex].list, newIndex, {
-        ...row.columns[colIndex].list[newIndex],
-        options: {
-          ...row.columns[colIndex].list[newIndex].options,
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.columns[colIndex].list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.columns[colIndex].list[newIndex].type === "radio" ||
-        row.columns[colIndex].list[newIndex].type === "checkbox" ||
-        row.columns[colIndex].list[newIndex].type === "select"
-      ) {
-        this.$set(row.columns[colIndex].list, newIndex, {
-          ...row.columns[colIndex].list[newIndex],
-          options: {
-            ...row.columns[colIndex].list[newIndex].options,
-            options: row.columns[colIndex].list[newIndex].options.options.map(
-              item => ({
-                ...item
-              })
-            )
-          }
-        });
-      }
-
-      this.selectWidget = row.columns[colIndex].list[newIndex];
-    },
-    handleWidgetDelete(index) {
-      if (this.data.list.length - 1 === index) {
-        if (index === 0) {
-          this.selectWidget = {};
-        } else {
-          this.selectWidget = this.data.list[index - 1];
-        }
-      } else {
-        this.selectWidget = this.data.list[index + 1];
-      }
-
-      this.$nextTick(() => {
-        this.data.list.splice(index, 1);
-      });
     }
   },
   watch: {