tianheng-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,71 @@
+<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-radio-group v-model="widget.options.textAlign">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="center">居中对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <code-editor v-model="widget.options.defaultValue" language="html"></code-editor>
+      </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";
+import CodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: {
+    Draggable,
+    CodeEditor
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,167 @@
+<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"
+          type="textarea"
+          :rows="5"
+        >
+        </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="设置行高" :inline="true">
+        <div style="display: flex;">
+          <div style="flex:1;">最小值：</div>
+          <el-input-number
+            v-model="widget.options.minRows"
+            :min="1"
+            @change="handleInputNumberChange"
+          >
+          </el-input-number>
+        </div>
+        <div style="display: flex;">
+          <div style="flex:1;">最大值：</div>
+          <el-input-number
+            v-model="widget.options.maxRows"
+            :min="widget.options.minRows || 1"
+          >
+          </el-input-number>
+        </div>
+      </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.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="请选择"
+                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: {
+    handleInputNumberChange() {
+      if (this.widget.options.minRows > this.widget.options.maxRows) {
+        this.widget.options.maxRows = this.widget.options.minRows;
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,153 @@
+<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 v-model="widget.options.format"></el-input>
+      </el-form-item>
+
+      <el-form-item label="是否为范围选择">
+        <el-switch v-model="widget.options.isRange"> </el-switch>
+      </el-form-item>
+
+      <template v-if="widget.options.isRange">
+        <el-form-item label="开始时间占位内容">
+          <el-input v-model="widget.options.startPlaceholder"></el-input>
+        </el-form-item>
+
+        <el-form-item label="结束时间占位内容">
+          <el-input v-model="widget.options.endPlaceholder"></el-input>
+        </el-form-item>
+      </template>
+
+      <el-form-item label="范围值" v-else>
+        <el-time-picker
+          class="selectableRange"
+          is-range
+          v-model="widget.options.pickerOptions.selectableRange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          placeholder="选择时间范围"
+          size="small"
+          value-format="HH:mm:ss"
+          :clearable="false"
+        >
+        </el-time-picker>
+      </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.clearable"> 清除按钮</el-checkbox>
+        <el-checkbox v-model="widget.options.editable"
+          >文本框可输入
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.arrowControl"
+          >使用箭头进行时间选择</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 lang="less" scoped>
+.selectableRange {
+  width: 100%;
+
+  /deep/ .el-range-separator {
+    width: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,155 @@
+<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-select
+          v-model="widget.options.listType"
+          @change="handleImguploadType"
+        >
+          <el-option value="default" label="文件列表"></el-option>
+          <el-option value="picture-card" label="照片墙"></el-option>
+          <el-option value="picture" label="图片列表缩略图"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        label="大小"
+        v-if="widget.options.listType === 'picture-card'"
+      >
+        <span>宽度</span>
+        <el-input
+          style="width: 90px;"
+          type="number"
+          v-model.number="widget.options.size.width"
+        ></el-input>
+        <span>高度</span>
+        <el-input
+          style="width: 90px;"
+          type="number"
+          v-model.number="widget.options.size.height"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="最大上传数">
+        <el-input v-model.number="widget.options.length"></el-input>
+      </el-form-item>
+
+      <el-form-item label="文字提示">
+        <el-input
+          v-model.number="widget.options.elUploadTip"
+          placeholder="请输入文字提示或HTML"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="上传地址" :required="true">
+        <el-radio-group v-model="widget.options.remote" size="mini">
+          <el-radio-button :label="false">静态接口</el-radio-button>
+          <el-radio-button :label="true">远端接口</el-radio-button>
+        </el-radio-group>
+        <el-select
+          v-if="widget.options.remote"
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          value-key="api"
+          placeholder="请选择远端方法"
+        >
+          <el-option
+            v-for="item in remoteApis"
+            :key="item.api"
+            :label="item.name"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+        <el-input
+          v-else
+          v-model.number="widget.options.action"
+          placeholder="请输入上传地址"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.disabled">禁用 </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.multiple"
+          @change="handleSelectMuliple"
+          >支持多选
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.drag" @change="handleImguploadDrag"
+          >支持拖拽
+        </el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</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: {
+    handleImguploadType(val) {
+      if (val == "picture-card") {
+        this.widget.options.drag = false;
+      }
+    },
+    handleImguploadDrag(val) {
+      if (val) {
+        this.widget.options.listType = "default";
+      }
+    },
+    handleSelectMuliple(value) {
+      if (value) {
+        if (this.widget.options.defaultValue) {
+          this.widget.options.defaultValue = [this.widget.options.defaultValue];
+        } else {
+          this.widget.options.defaultValue = [];
+        }
+      } else {
+        if (this.widget.options.defaultValue.length > 0) {
+          this.widget.options.defaultValue = this.widget.options.defaultValue[0];
+        } else {
+          this.widget.options.defaultValue = "";
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/index.js

@@ -0,0 +1,32 @@
+//在此声明组件
+const basicComponents = [
+  "input",
+  "textarea",
+  "cell",
+  "text",
+  "radio",
+  "checkbox",
+  "time",
+  "date",
+  "select",
+  "color",
+  "switch",
+  "button",
+  "slider",
+  "number",
+  "rate",
+  "image",
+  "upload",
+  "editor",
+  "cascader"
+];
+
+const advanceComponents = ["table", "table_h5", "tabs", "blank"];
+
+const layoutComponents = ["grid", "alliance", "filler", "divider"];
+
+module.exports = {
+  basicComponents,
+  advanceComponents,
+  layoutComponents
+};