tianheng-ui 0.1.0 → 0.1.1

package/packages/FormMaking/WidgetFormItem.vue

@@ -0,0 +1,187 @@
+<template>
+  <el-form-item
+    class="widget-view"
+    :class="{
+      active: selectWidget.model == widget.model,
+      is_req: widget.options.required,
+      hideLabel: widget.options.hideLabel,
+      'widget-col': ['grid', 'tabs', 'table', 'table_h5', 'alliance'].includes(
+        widget.type
+      ),
+      [`widget-form-list-${widget.type}`]: true,
+      [widget.model]: true
+    }"
+    :label="widget.options.hideLabel ? '' : widget.name"
+    :label-width="labelWidth"
+    :ref="widget.model"
+    @click.native.stop="handleSelectWidget"
+  >
+    <component
+      :is="compsData[widget.type].content"
+      :widget="widget"
+      :config="config"
+      :select.sync="selectWidget"
+      :widgetArray="widgetArray"
+    ></component>
+
+    <div
+      v-if="selectWidget.model == widget.model"
+      class="widget-actions"
+      :class="{
+        'widget-actions-col': [
+          'grid',
+          'tabs',
+          'table',
+          'table_h5',
+          'alliance'
+        ].includes(widget.type)
+      }"
+    >
+      <div class="actions">
+        <i
+          class="iconfont icon-icon_clone"
+          @click.stop="handleWidgetClone(widgetIndex)"
+        ></i>
+        <i
+          class="iconfont icon-trash"
+          @click.stop="handleWidgetDelete(widgetIndex)"
+        ></i>
+      </div>
+
+      <div class="drag">
+        <i class="iconfont icon-drag drag-widget"></i>
+      </div>
+    </div>
+  </el-form-item>
+</template>
+
+<script>
+import compsData from "./custom/register";
+import Draggable from "vuedraggable";
+import FmUpload from "./Upload";
+export default {
+  name: "widget-form-item",
+  props: ["widget", "widgetArray", "widgetIndex", "select", "config"],
+  components: { Draggable, FmUpload },
+  data() {
+    return {
+      compsData: JSON.parse(JSON.stringify(compsData)),
+      selectWidget: this.select
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    labelWidth() {
+      if (this.widget.options.hideLabel) return "0";
+      if (this.widget.options.isLabelWidth)
+        return `${this.widget.options.labelWidth}px`;
+
+      return "";
+    }
+  },
+  created() {
+    const keys = Object.keys(this.compsData);
+    for (const key of keys) {
+      this.compsData[key].content = require(`./custom/items/${key}`).default;
+    }
+  },
+  mounted() {},
+  methods: {
+    handleSelectWidget() {
+      this.selectWidget = this.widget;
+    },
+    handleWidgetDelete(index) {
+      if (this.widgetArray.list.length - 1 === index) {
+        if (index === 0) {
+          this.selectWidget = {};
+        } else {
+          this.selectWidget = this.widgetArray.list[index - 1];
+        }
+      } else {
+        this.selectWidget = this.widgetArray.list[index + 1];
+      }
+
+      this.$nextTick(() => {
+        this.widgetArray.list.splice(index, 1);
+      });
+    },
+
+    handleWidgetClone(index) {
+      const data = JSON.parse(JSON.stringify(this.widgetArray.list[index]));
+
+      const initKey = item => {
+        const key =
+          Date.parse(new Date().toString()) +
+          "_" +
+          Math.ceil(Math.random() * 99999);
+
+        item.options.remoteFunc = `func__${key}`;
+        item.key = key;
+        item.model = item.type + "_" + key;
+
+        if (["table", "table_h5"].includes(item.type)) {
+          item.list.forEach(element => {
+            initKey(element);
+          });
+        }
+        if (["tabs"].includes(item.type)) {
+          item.tabs.forEach(tab => {
+            tab.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+        if (["grid"].includes(item.type)) {
+          item.columns.forEach(column => {
+            column.list.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+      };
+      initKey(data);
+
+      // let cloneData = {
+      //   ...JSON.parse(JSON.stringify(this.widgetArray.list[index])),
+      //   options: {
+      //     ...this.widgetArray.list[index].options,
+      //     remoteFunc: "func_" + key
+      //   },
+      //   key,
+      //   model: this.widgetArray.list[index].type + "_" + key,
+      //   rules: this.widgetArray.list[index].rules || []
+      // };
+
+      // if (
+      //   this.widgetArray.list[index].type === "radio" ||
+      //   this.widgetArray.list[index].type === "checkbox" ||
+      //   this.widgetArray.list[index].type === "select"
+      // ) {
+      //   cloneData = {
+      //     ...cloneData,
+      //     options: {
+      //       ...cloneData.options,
+      //       options: cloneData.options.options.map(item => ({ ...item }))
+      //     }
+      //   };
+      // }
+
+      this.widgetArray.list.splice(index, 0, data);
+
+      this.$nextTick(() => {
+        this.selectWidget = this.widgetArray.list[index + 1];
+      });
+    }
+  }
+};
+</script>