tianheng-ui 0.1.0 → 0.1.2

package/packages/FormMaking/custom/items/radio.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-radio-group
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :disabled="widget.options.disabled"
+    @change="handleEventAction(widget.events.onChange)"
+  >
+    <template v-if="widget.options.buttonType">
+      <el-radio-button
+        v-for="(item, index) in widget.options.options"
+        :key="`radio_${index}_${item.value}`"
+        :style="{
+          display: widget.options.inline ? 'inline-block' : 'block'
+        }"
+        :label="item.value"
+        :border="widget.options.border"
+      >
+        {{ widget.options.showLabel ? item.label : item.value }}
+      </el-radio-button>
+    </template>
+    <template v-else>
+      <el-radio
+        :style="{
+          display: widget.options.inline ? 'inline-block' : 'block'
+        }"
+        :label="item.value"
+        :border="widget.options.border"
+        v-for="(item, index) in widget.options.options"
+        :key="`radio_${index}_${item.value}`"
+      >
+        {{ widget.options.showLabel ? item.label : item.value }}
+      </el-radio>
+    </template>
+  </el-radio-group>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/rate.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-rate
+    v-model="widget.options.defaultValue"
+    :max="widget.options.max"
+    :disabled="widget.options.disabled"
+    :allow-half="widget.options.allowHalf"
+    :show-text="widget.options.showText"
+    :texts="widget.options.auxiliaryValue"
+    @change="handleEventAction(widget.events.onChange)"
+  ></el-rate>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/select.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-select
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :disabled="widget.options.disabled"
+    :multiple="widget.options.multiple"
+    :collapseTags="widget.options.collapseTags"
+    :allowCreate="widget.options.allowCreate"
+    :clearable="widget.options.clearable"
+    :placeholder="widget.options.placeholder"
+    :filterable="widget.options.allowCreate ? true : widget.options.filterable"
+    @change="handleEventAction(widget.events.onChange)"
+    @focus="handleEventAction(widget.events.onFocus)"
+    @blur="handleEventAction(widget.events.onBlur)"
+  >
+    <el-option
+      v-for="(item, index) in widget.options.options"
+      :key="`select_${index}_${item.value}`"
+      :value="item.value"
+      :label="widget.options.showLabel ? item.label : item.value"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/slider.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-slider
+    v-model="widget.options.defaultValue"
+    :min="widget.options.min"
+    :max="widget.options.max"
+    :disabled="widget.options.disabled"
+    :step="widget.options.step"
+    :show-input="widget.options.showInput"
+    :range="widget.options.range"
+    :style="{
+      width: widget.options.width,
+      height: widget.options.height
+    }"
+    :show-tooltip="widget.options.showTooltip"
+    :format-tooltip="val => formatTooltip(val, widget.options.formatTooltip)"
+    :show-stops="widget.options.showStops"
+    :vertical="widget.options.vertical"
+    @change="handleEventAction(widget.events.onChange)"
+  ></el-slider>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent],
+  methods: {
+    formatTooltip(val, num) {
+      return val / num;
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/switch.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-switch
+    v-model="widget.options.defaultValue"
+    :width="widget.options.width - 20"
+    :disabled="widget.options.disabled"
+    :inactive-text="widget.options.switchInactiveText"
+    :active-text="widget.options.switchActiveText"
+    :inactive-color="widget.options.switchInactiveColor"
+    :active-color="widget.options.switchActiveColor"
+    @change="handleEventAction(widget.events.onChange)"
+  >
+  </el-switch>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/table.vue

@@ -0,0 +1,106 @@
+<template>
+  <draggable
+    v-model="widget.list"
+    :no-transition-on-drag="true"
+    v-bind="{
+      group: 'people',
+      ghostClass: 'ghost',
+      animation: 200,
+      handle: '.drag-widget'
+    }"
+    @add="handleWidgetTableAdd($event, widget)"
+  >
+    <transition-group name="fade" tag="div" class="widget-table-list">
+      <widget-form-item
+        v-for="(element, elementIndex) in widget.list.filter(item => {
+          return item.key;
+        })"
+        :key="element.key"
+        :widget="element"
+        :widgetIndex="elementIndex"
+        :widgetArray="widget"
+        :select.sync="selectWidget"
+        :config="config"
+      >
+      </widget-form-item>
+    </transition-group>
+  </draggable>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods:{
+    handleWidgetTableAdd($event, row) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("no-put") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.list.splice(oldIndex, 0, row.list[newIndex]);
+
+        row.list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+
+      this.$set(row.list, newIndex, {
+        ...row.list[newIndex],
+        options: {
+          ...row.list[newIndex].options
+          // remoteFunc: "func_" + key
+        },
+        key,
+        // 绑定键值
+        model: row.list[newIndex].type + "_" + key,
+        rules: []
+      });
+
+      if (
+        row.list[newIndex].type === "radio" ||
+        row.list[newIndex].type === "checkbox" ||
+        row.list[newIndex].type === "select"
+      ) {
+        this.$set(row.list, newIndex, {
+          ...row.list[newIndex],
+          options: {
+            ...row.list[newIndex].options,
+            options: row.list[newIndex].options.options.map(item => ({
+              ...item
+            }))
+          }
+        });
+      }
+
+      this.selectWidget = row.list[newIndex];
+    },
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/table_h5.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <draggable
+      v-model="widget.list"
+      :no-transition-on-drag="true"
+      v-bind="{
+        group: 'people',
+        ghostClass: 'ghost',
+        animation: 200,
+        handle: '.drag-widget'
+      }"
+      @add="handleWidgetTableAdd($event, widget)"
+    >
+      <transition-group name="fade" tag="div" class="tableH5">
+        <div
+          class="tableH5-item"
+          v-for="(element, elementIndex) in widget.list.filter(item => {
+            return item.key;
+          })"
+          :key="element.key"
+        >
+          <widget-form-item
+            class="tableH5-item-widget"
+            :widget="element"
+            :widgetIndex="elementIndex"
+            :widgetArray="widget"
+            :select.sync="selectWidget"
+            :config="config"
+          >
+          </widget-form-item>
+          <div
+            v-if="widget.options.isDelete && elementIndex === 0"
+            class="actions"
+          >
+            <el-button type="danger">{{
+              widget.options.deleteButtonText
+            }}</el-button>
+          </div>
+        </div>
+      </transition-group>
+    </draggable>
+    <div v-if="widget.options.isAdd" style="text-align: center;">
+      <el-button type="text" :disabled="widget.options.disabled">{{
+        widget.options.addButtonText
+      }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleWidgetTableAdd($event, row) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("no-put") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.list.splice(oldIndex, 0, row.list[newIndex]);
+
+        row.list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+
+      this.$set(row.list, newIndex, {
+        ...row.list[newIndex],
+        options: {
+          ...row.list[newIndex].options
+          // remoteFunc: "func_" + key
+        },
+        key,
+        // 绑定键值
+        model: row.list[newIndex].type + "_" + key,
+        rules: []
+      });
+
+      if (
+        row.list[newIndex].type === "radio" ||
+        row.list[newIndex].type === "checkbox" ||
+        row.list[newIndex].type === "select"
+      ) {
+        this.$set(row.list, newIndex, {
+          ...row.list[newIndex],
+          options: {
+            ...row.list[newIndex].options,
+            options: row.list[newIndex].options.options.map(item => ({
+              ...item
+            }))
+          }
+        });
+      }
+
+      this.selectWidget = row.list[newIndex];
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/tabs.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-tabs
+    v-model="widget.options.defaultValue"
+    :type="widget.options.type"
+    :tab-position="widget.options.tabPosition"
+  >
+    <el-tab-pane
+      v-for="(column, columnIndex) in widget.tabs"
+      :key="`tabs_${column.value}`"
+      :label="column.label"
+      :name="column.value"
+    >
+      <draggable
+        v-model="column.list"
+        :no-transition-on-drag="true"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @add="handleWidgetTabAdd($event, widget, columnIndex)"
+      >
+        <transition-group name="fade" tag="div" class="widget-col-list">
+          <widget-form-item
+            v-for="(element, elementIndex) in column.list.filter(item => {
+              return item.key;
+            })"
+            :key="element.key"
+            :widget="element"
+            :widgetIndex="elementIndex"
+            :widgetArray="column"
+            :select.sync="selectWidget"
+            :config="config"
+          ></widget-form-item>
+        </transition-group>
+      </draggable>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleWidgetTabAdd($event, row, colIndex) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+
+      // 防止布局元素的嵌套拖拽
+      if (
+        item.className.indexOf("tabs") !== -1 ||
+        item.className.indexOf("alliance") !== -1
+      ) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.list.splice(
+            oldIndex,
+            0,
+            row.tabs[colIndex].list[newIndex]
+          );
+
+        row.tabs[colIndex].list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+
+      this.$set(row.tabs[colIndex].list, newIndex, {
+        ...row.tabs[colIndex].list[newIndex],
+        options: {
+          ...row.tabs[colIndex].list[newIndex].options
+          // remoteFunc: "func_" + key
+        },
+        key,
+        // 绑定键值
+        model: row.tabs[colIndex].list[newIndex].type + "_" + key,
+        rules: []
+      });
+
+      if (
+        row.tabs[colIndex].list[newIndex].type === "radio" ||
+        row.tabs[colIndex].list[newIndex].type === "checkbox" ||
+        row.tabs[colIndex].list[newIndex].type === "select"
+      ) {
+        this.$set(row.tabs[colIndex].list, newIndex, {
+          ...row.tabs[colIndex].list[newIndex],
+          options: {
+            ...row.tabs[colIndex].list[newIndex].options,
+            options: row.tabs[colIndex].list[newIndex].options.options.map(
+              item => ({
+                ...item
+              })
+            )
+          }
+        });
+      }
+
+      if (row.tabs[colIndex].list[newIndex].type === "grid") {
+        this.$set(
+          row.tabs[colIndex].list,
+          newIndex,
+          JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex]))
+        );
+      }
+
+      if (row.tabs[colIndex].list[newIndex].type === "table") {
+        this.$set(row.tabs[colIndex].list, newIndex, {
+          ...row.tabs[colIndex].list[newIndex],
+          list: row.tabs[colIndex].list[newIndex].list.map(item => ({
+            ...item
+          }))
+        });
+      }
+
+      this.selectWidget = row.tabs[colIndex].list[newIndex];
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/text.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    :style="{
+      height: widget.options.height,
+      textAlign: widget.options.textAlign
+    }"
+    v-html="widget.options.defaultValue"
+  ></div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/textarea.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-input
+    type="textarea"
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :disabled="widget.options.disabled"
+    :placeholder="widget.options.placeholder"
+    :maxlength="widget.options.maxlength"
+    :show-word-limit="widget.options.showWordLimit"
+    :clearable="widget.options.clearable"
+    :suffix-icon="widget.options.suffixIcon"
+    :prefix-icon="widget.options.prefixIcon"
+    :autosize="{
+      minRows: widget.options.minRows,
+      maxRows: widget.options.maxRows
+    }"
+    @input="handleEventAction(widget.events.onChange)"
+    @focus="handleEventAction(widget.events.onFocus)"
+    @blur="handleEventAction(widget.events.onBlur)"
+  >
+    <template v-if="widget.options.prepend" slot="prepend">
+      <span v-html="widget.options.prepend"></span>
+    </template>
+    <template v-if="widget.options.append" slot="append">
+      <span v-html="widget.options.append"></span>
+    </template>
+  </el-input>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/time.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-time-picker
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :is-range="widget.options.isRange"
+    :placeholder="widget.options.placeholder"
+    :start-placeholder="widget.options.startPlaceholder"
+    :end-placeholder="widget.options.endPlaceholder"
+    :readonly="widget.options.readonly"
+    :disabled="widget.options.disabled"
+    :editable="widget.options.editable"
+    :clearable="widget.options.clearable"
+    :arrow-control="widget.options.arrowControl"
+    :picker-options="{
+      selectableRange: `${widget.options.pickerOptions.selectableRange[0]} - ${widget.options.pickerOptions.selectableRange[1]}`
+    }"
+    :value-format="widget.options.format"
+    @change="handleEventAction(widget.events.onChange)"
+    @focus="handleEventAction(widget.events.onFocus)"
+    @blur="handleEventAction(widget.events.onBlur)"
+  >
+  </el-time-picker>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>