tianheng-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="configComponents">
+    <el-form label-position="top" size="small">
+      <el-form-item label="字段标识" required>
+        <el-input v-model="widget.model"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth"
+            >自定义</el-checkbox
+          >
+          <el-input-number
+            v-model="widget.options.labelWidth"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="宽度">
+        <el-input v-model="widget.options.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="高度">
+        <el-input v-model="widget.options.height"></el-input>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+export default {
+  components: {
+    Draggable
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="configComponents">
+    <el-form label-position="top" size="small">
+      <el-form-item label="字段标识" required>
+        <el-input v-model="widget.model"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="栅格间隔">
+        <el-input
+          type="number"
+          v-model.number="widget.options.gutter"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="列配置项">
+        <draggable
+          tag="ul"
+          :list="widget.columns"
+          v-bind="{
+            group: { name: 'options' },
+            ghostClass: 'ghost',
+            handle: '.drag-item'
+          }"
+          handle=".drag-item"
+        >
+          <li v-for="(item, index) in widget.columns" :key="index">
+            <el-input
+              placeholder="栅格值"
+              style="width: 100px;"
+              type="number"
+              v-model.number="item.span"
+            >
+            </el-input>
+            <i
+              class="drag-item"
+              style="font-size: 16px;margin: 0 5px;cursor: move;"
+              ><i class="iconfont icon-icon_bars"></i
+            ></i>
+            <el-button
+              @click="handleOptionsRemove(index)"
+              circle
+              plain
+              type="danger"
+              icon="el-icon-minus"
+              style="padding: 3px;margin-left: 5px;"
+            ></el-button>
+          </li>
+        </draggable>
+        <div style="margin-left: 22px;">
+          <el-button type="text" @click="handleAddOption">添加列</el-button>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="水平排列方式">
+        <el-select v-model="widget.options.justify">
+          <el-option value="start" label="左对齐"></el-option>
+          <el-option value="end" label="右对齐"></el-option>
+          <el-option value="center" label="居中"></el-option>
+          <el-option value="space-around" label="两侧间隔相等"></el-option>
+          <el-option value="space-between" label="两端对齐"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="垂直排列方式">
+        <el-select v-model="widget.options.align">
+          <el-option value="top" label="顶部对齐"></el-option>
+          <el-option value="middle" label="居中"></el-option>
+          <el-option value="bottom" label="底部对齐"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+export default {
+  components: {
+    Draggable
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {
+    handleAddOption() {
+      this.widget.columns.push({
+        span: "",
+        list: []
+      });
+    },
+    handleOptionsRemove(index) {
+      this.widget.columns.splice(index, 1);
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="configComponents">
+    <el-form label-position="top" size="small">
+      <el-form-item label="字段标识" required>
+        <el-input v-model="widget.model"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth"
+            >自定义</el-checkbox
+          >
+          <el-input-number
+            v-model="widget.options.labelWidth"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="图片路径">
+        <div
+          style="display: flex;"
+          v-for="(item, index) in widget.options.defaultValue"
+          :key="item.url"
+        >
+          <div style="width:80px;">地址{{ index + 1 }}：</div>
+          <el-input v-model="item.url"></el-input>
+          <el-button
+            style="padding: 8px;margin-left: 5px;"
+            type="danger"
+            icon="el-icon-minus"
+            size="mini"
+            circle
+            plain
+            @click="handleImageRemove(index)"
+          ></el-button>
+        </div>
+
+        <div style="margin-left: 22px;">
+          <el-button type="text" @click="handleAddImage">添加选项</el-button>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="图片宽度">
+        <div style="display: flex;">
+          <div style="width:80px;">宽度：</div>
+          <el-input v-model="widget.options.width"></el-input>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="图片高度">
+        <div style="display: flex;">
+          <div style="width:80px;">高度：</div>
+          <el-input v-model="widget.options.height"></el-input>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="图片圆角">
+        <div style="display: flex;">
+          <div style="width:80px;">圆角：</div>
+          <el-input v-model="widget.options.borderRadius"></el-input>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="加载失败链接">
+        <div style="display: flex;">
+          <div style="width:80px;">地址：</div>
+          <el-input v-model="widget.options.errorSrc"></el-input>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="控制元素">
+        <div style="display: flex;">
+          <el-select v-model="widget.options.displayStyle" placeholder="类型">
+            <el-option label="inline-block" value="inline-block"></el-option>
+            <el-option label="block" value="block"></el-option>
+          </el-select>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="图片裁剪方式">
+        <el-select v-model="widget.options.fit" placeholder="图片裁剪方式">
+          <el-option label="fill" value="fill"></el-option>
+          <el-option label="contain" value="contain"></el-option>
+          <el-option label="cover" value="cover"></el-option>
+          <el-option label="none" value="none"></el-option>
+          <el-option label="scale-down" value="scale-down"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.hidden">隐藏组件</el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签</el-checkbox>
+        <el-checkbox v-model="widget.options.isLoding"
+          >开启加载动画</el-checkbox
+        >
+        <el-checkbox v-model="widget.options.isLazy">开启懒加载</el-checkbox>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+import CodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: {
+    Draggable,
+    CodeEditor
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {
+    console.log(this.widget);
+  },
+  methods: {
+    handleAddImage() {
+      const obj = {
+        url: ""
+      };
+      this.widget.options.defaultValue.push(obj);
+    },
+    handleImageRemove(index) {
+      this.widget.options.defaultValue.splice(index, 1);
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div class="configComponents">
+    <el-form label-position="top" size="small">
+      <el-form-item label="字段标识" required>
+        <el-input v-model="widget.model"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth"
+            >自定义</el-checkbox
+          >
+          <el-input-number
+            v-model="widget.options.labelWidth"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="宽度">
+        <el-input v-model="widget.options.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="占位内容">
+        <el-input v-model="widget.options.placeholder"></el-input>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <el-input v-model="widget.options.defaultValue"></el-input>
+      </el-form-item>
+
+      <el-form-item label="最大字数">
+        <el-input-number
+          v-model="widget.options.maxlength"
+          :min="-1"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="显示字数统计">
+        <el-switch v-model="widget.options.showWordLimit"></el-switch>
+      </el-form-item>
+
+      <el-form-item label="带入icon">
+        <el-input
+          placeholder="请输入icon类名"
+          v-model="widget.options.prefixIcon"
+        >
+          <template slot="prepend">
+            <div style="width:50px;">prefixIcon</div>
+          </template>
+        </el-input>
+        <el-input
+          placeholder="请输入icon类名"
+          v-model="widget.options.suffixIcon"
+        >
+          <template slot="prepend">
+            <div style="width:50px;">suffixIcon</div>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="组件插槽">
+        <el-input
+          placeholder="请输入内容或HTML"
+          v-model="widget.options.prepend"
+        >
+          <template slot="prepend">
+            <div style="width:50px;">prepend</div>
+          </template>
+        </el-input>
+        <el-input
+          placeholder="请输入内容或HTML"
+          v-model="widget.options.append"
+        >
+          <template slot="prepend">
+            <div style="width:50px;">append</div>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.disabled">禁用</el-checkbox>
+        <el-checkbox v-model="widget.options.readonly">只读</el-checkbox>
+        <el-checkbox v-model="widget.options.hidden">隐藏组件</el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签</el-checkbox>
+        <el-checkbox v-model="widget.options.showPassword">
+          切换密码
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.clearable">清除按钮</el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</el-checkbox>
+        <el-select style="width:100%" v-model="widget.options.dataType">
+          <el-option value="string" label="字符串"></el-option>
+          <el-option value="number" label="数字"></el-option>
+          <el-option value="boolean" label="布尔值"></el-option>
+          <el-option value="integer" label="整数"></el-option>
+          <el-option value="float" label="浮点数"></el-option>
+          <el-option value="url" label="URL地址"></el-option>
+          <el-option value="email" label="邮箱地址"></el-option>
+          <el-option value="hex" label="十六进制"></el-option>
+        </el-select>
+
+        <el-input
+          class="config-pattern-input"
+          style=" width: 100%;"
+          v-model.lazy="widget.options.pattern"
+          placeholder="填写正则表达式"
+        >
+          <template slot="prepend">/</template>
+          <template slot="append">/</template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <div class="config-header" slot="label">
+          <span class="title">动作设置</span>
+          <span class="value" @click="handleEventsShow">配置</span>
+        </div>
+        <el-collapse class="eventsCollapse">
+          <el-collapse-item
+            v-for="event in Object.keys(widget.events)"
+            :key="event"
+            :title="event"
+            :name="event"
+          >
+            <div class="eventsCollapse-item">
+              <el-select
+                v-model="widget.events[event]"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in config.eventScript"
+                  :key="item.key"
+                  :label="item.name"
+                  :value="item.key"
+                >
+                </el-option>
+              </el-select>
+              <i
+                v-if="widget.events[event]"
+                class="el-icon-edit"
+                @click="handleEventsEdit(widget.events[event])"
+              ></i>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+export default {
+  components: {
+    Draggable
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="configComponents">
+    <el-form label-position="top" size="small">
+      <el-form-item label="字段标识" required>
+        <el-input v-model="widget.model"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth">
+            自定义
+          </el-checkbox>
+          <el-input-number
+            v-model="widget.options.labelWidth"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="宽度">
+        <el-input v-model="widget.options.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="设置范围">
+        <div style="display: flex;">
+          <div style="flex:1;">最小值：</div>
+          <el-input-number v-model="widget.options.min" :min="0">
+          </el-input-number>
+        </div>
+        <div style="display: flex;">
+          <div style="flex:1;">最大值：</div>
+          <el-input-number
+            v-model="widget.options.max"
+            :min="widget.options.min || 1"
+          >
+          </el-input-number>
+        </div>
+        <div style="display: flex;">
+          <div style="flex:1;">步长：</div>
+          <el-input-number
+            v-model="widget.options.step"
+            :min="0"
+            :max="100"
+            :step="1"
+          ></el-input-number>
+        </div>
+        <div style="display: flex;">
+          <div style="flex:1;">精度：</div>
+          <el-input-number
+            v-model="widget.options.precision"
+            :min="0"
+            :max="100"
+            :step="1"
+          ></el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="按钮位置">
+        <el-radio-group v-model="widget.options.controlsPosition">
+          <el-radio-button :label="false">两边</el-radio-button>
+          <el-radio-button :label="true">右边</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <el-input v-model="widget.options.defaultValue"></el-input>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+        <el-checkbox v-model="widget.options.disabled">禁用 </el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</el-checkbox>
+      </el-form-item>
+
+      <el-form-item>
+        <div class="config-header" slot="label">
+          <span class="title">动作设置</span>
+          <span class="value" @click="handleEventsShow">配置</span>
+        </div>
+        <el-collapse class="eventsCollapse">
+          <el-collapse-item
+            v-for="event in Object.keys(widget.events)"
+            :key="event"
+            :title="event"
+            :name="event"
+          >
+            <div class="eventsCollapse-item">
+              <el-select
+                v-model="widget.events[event]"
+                placeholder="请选择"
+                size="mini"
+                clearable
+              >
+                <el-option
+                  v-for="item in config.eventScript"
+                  :key="item.key"
+                  :label="item.name"
+                  :value="item.key"
+                >
+                </el-option>
+              </el-select>
+              <i
+                v-if="widget.events[event]"
+                class="el-icon-edit"
+                @click="handleEventsEdit(widget.events[event])"
+              ></i>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
+export default {
+  components: {
+    Draggable
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>