tianheng-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,132 @@
+<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">
+        <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>
+  </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: {
+    handleWidgetTabAdd($event, row, colIndex) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("alliance") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        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 lang="scss" scoped>
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+  <div
+    style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;"
+  >
+    自定义区域
+  </div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,27 @@
+<template>
+  <th-button
+    :style="{
+      width: widget.options.width,
+      height: widget.options.height
+    }"
+    :size="widget.options.buttonSize"
+    :type="widget.options.buttonType"
+    :plain="widget.options.buttonPlain"
+    :round="widget.options.buttonRound"
+    :circle="widget.options.buttonCircle"
+    :loading="widget.options.loading"
+    :disabled="widget.options.disabled"
+    :icon="widget.options.buttonIcon"
+  >
+    {{ widget.options.defaultValue }}
+  </th-button>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <el-cascader
+    v-model="widget.options.defaultValue"
+    :disabled="widget.options.disabled"
+    :clearable="widget.options.clearable"
+    :placeholder="widget.options.placeholder"
+    :style="{ width: widget.options.width }"
+    :options="widget.options.remoteOptions"
+    :props="widget.options.props"
+    :show-all-levels="widget.options.showAllLevels ? false : true"
+    :collapse-tags="widget.options.collapseTags"
+    @change="handleEventAction(widget.events.onChange)"
+  >
+    <template slot-scope="{ data }">
+      <span v-html="widget.options.prepend"></span>
+      <span>{{ data.label }}</span>
+      <span v-html="widget.options.append"></span>
+    </template>
+  </el-cascader>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,18 @@
+<template>
+  <th-cell
+    :title="widget.options.title"
+    :value="widget.options.value"
+    :label="widget.options.label"
+  ></th-cell>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import ThCell from "ui/Cell/index.vue";
+export default {
+  components: { ThCell },
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

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

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

@@ -0,0 +1,19 @@
+<template>
+  <el-color-picker
+    v-model="widget.options.defaultValue"
+    :disabled="widget.options.disabled"
+    :show-alpha="widget.options.showAlpha"
+    :color-format="widget.options.showAlpha ? 'rgb' : 'hex'"
+    :predefine="widget.options.predefine"
+    @change="handleEventAction(widget.events.onChange)"
+  ></el-color-picker>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <el-date-picker
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :type="widget.options.type"
+    :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"
+    :value-format="widget.options.format"
+    @change="handleEventAction(widget.events.onChange)"
+    @focus="handleEventAction(widget.events.onFocus)"
+    @blur="handleEventAction(widget.events.onBlur)"
+  >
+  </el-date-picker>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,14 @@
+<template>
+  <el-divider :content-position="widget.options.contentPosition">
+    {{ widget.options.defaultValue }}
+  </el-divider>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,22 @@
+<template>
+  <vue-editor
+    v-model="widget.options.defaultValue"
+    :style="{
+      width: widget.options.width,
+      height: widget.options.height
+    }"
+    :disabled="widget.options.disabled"
+  >
+  </vue-editor>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import { VueEditor } from "vue2-editor";
+export default {
+  components: { VueEditor },
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>

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

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

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

@@ -0,0 +1,130 @@
+<template>
+  <!-- widget.key -->
+  <th-row
+    :class="{ active: selectWidget.model == widget.model }"
+    :gutter="widget.options.gutter ? widget.options.gutter : 0"
+    :justify="widget.options.justify"
+    :align="widget.options.align"
+  >
+    <th-col
+      v-for="(column, columnIndex) in widget.columns"
+      :key="`grid_${columnIndex}`"
+      :span="column.span ? column.span : 0"
+    >
+      <draggable
+        v-model="column.list"
+        :no-transition-on-drag="true"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @add="handleWidgetColAdd($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>
+    </th-col>
+  </th-row>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+import ThRow from "ui/Row/index.vue";
+import ThCol from "ui/Col/index.vue";
+export default {
+  components: { Draggable, WidgetFormItem, ThRow, ThCol },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleWidgetColAdd($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.widgetArray.list.splice(
+            oldIndex,
+            0,
+            row.columns[colIndex].list[newIndex]
+          );
+
+        row.columns[colIndex].list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      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.$emit("update:select", row.columns[colIndex].list[newIndex]);
+      this.selectWidget = row.columns[colIndex].list[newIndex];
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,70 @@
+<template>
+  <!-- <div>
+    <th-image
+      v-if="!widget.options.remote"
+      :src="widget.options.defaultValue"
+      :height="widget.options.height"
+      :width="widget.options.width"
+      :fit="widget.options.fit"
+      :border-radius="widget.options.borderRadius"
+      :display-style="widget.options.displayStyle"
+      :error-src="widget.options.errorSrc"
+      :is-loding="widget.options.isLoding"
+    ></th-image>
+    <div v-for="item in widget.options.defaultValueArr" :key="item.url">
+      <th-image
+        v-if="widget.options.remote"
+        :src="item"
+        src-key="url"
+        :height="widget.options.height"
+        :width="widget.options.width"
+        :fit="widget.options.fit"
+        :border-radius="widget.options.borderRadius"
+        :preview-list="widget.options.defaultValueArr"
+        :display-style="widget.options.displayStyle"
+        :error-src="widget.options.errorSrc"
+        :is-loding="widget.options.isLoding"
+      ></th-image>
+    </div>
+  </div> -->
+  <div>
+    <el-image
+      v-for="(item, index) in widget.options.defaultValue"
+      :key="index"
+      :style="selfStyle"
+      :src="item.url"
+      :fit="widget.options.fit"
+      :preview-src-list="imagePreviewList"
+      :lazy="widget.options.isLazy"
+    ></el-image>
+  </div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import ThImage from "ui/Image/index.vue";
+
+export default {
+  components: { ThImage },
+  mixins: [itemsComponent],
+  computed: {
+    selfStyle() {
+      const style = { display: "inline-block" };
+      style.width = this.widget.options.width;
+      style.height = this.widget.options.height;
+      style.borderRadius = `${this.widget.options.borderRadius || 0}`;
+      style.verticalAlign = "middle";
+      return style;
+    },
+    imagePreviewList() {
+      const list = [];
+      this.widget.options.defaultValue.forEach(item => {
+        list.push(item.url);
+      });
+      return list;
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,33 @@
+<template>
+  <el-input
+    v-model="widget.options.defaultValue"
+    :style="{ width: widget.options.width }"
+    :placeholder="widget.options.placeholder"
+    :disabled="widget.options.disabled"
+    :maxlength="widget.options.maxlength"
+    :show-word-limit="widget.options.showWordLimit"
+    :show-password="widget.options.showPassword"
+    :clearable="widget.options.clearable"
+    :suffix-icon="widget.options.suffixIcon"
+    :prefix-icon="widget.options.prefixIcon"
+    @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/login.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-input-number
+    v-model="widget.options.defaultValue"
+    :disabled="widget.options.disabled"
+    :controls-position="widget.options.controlsPosition ? 'right' : ''"
+    :style="{ width: widget.options.width }"
+    :min="widget.options.min"
+    :max="widget.options.max"
+    :step="widget.options.step"
+    :precision="widget.options.precision"
+    @change="handleEventAction(widget.events.onChange)"
+    @focus="handleEventAction(widget.events.onFocus)"
+    @blur="handleEventAction(widget.events.onBlur)"
+  ></el-input-number>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+export default {
+  mixins: [itemsComponent]
+};
+</script>
+
+<style></style>