tianheng-ui 0.0.55 → 0.0.57

package/packages/FormMaking/WidgetFormItem.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-form-item
+    class="widget-view"
+    :class="{
+      active: selectWidget.key == widget.key,
+      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.key == widget.key"
+      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 key =
+        Date.parse(new Date().toString()) +
+        "_" +
+        Math.ceil(Math.random() * 99999);
+      let cloneData = {
+        ...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, cloneData);
+
+      this.$nextTick(() => {
+        this.selectWidget = this.widgetArray.list[index + 1];
+      });
+    }
+  }
+};
+</script>