tianheng-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,234 @@
+<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-radio-group v-model="widget.options.inline">
+          <el-radio-button :label="false">块级</el-radio-button>
+          <el-radio-button :label="true">inline</el-radio-button>
+        </el-radio-group>
+      </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>
+      </el-form-item>
+
+      <el-form-item label="选项">
+        <div
+          style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;"
+        >
+          <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>
+
+          <div v-if="!widget.options.remote">
+            <span>显示标签</span>
+            <el-switch v-model="widget.options.showLabel"> </el-switch>
+          </div>
+        </div>
+        <template v-if="widget.options.remote">
+          <el-select
+            style="width:100%"
+            v-model="widget.options.remoteFunc"
+            value-key="api"
+            placeholder="请选择远端方法"
+            clearable
+          >
+            <el-option
+              v-for="item in remoteApis"
+              :key="item.api"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+
+          <el-input v-model="widget.options.props.value">
+            <div slot="prepend" style="width:50px;">值</div>
+          </el-input>
+          <el-input v-model="widget.options.props.label">
+            <div slot="prepend" style="width:50px;">标签</div>
+          </el-input>
+          <el-input v-model="widget.options.props.children">
+            <div slot="prepend" style="width:50px">子选项</div>
+          </el-input>
+        </template>
+        <template v-else>
+          <el-checkbox-group v-model="widget.options.defaultValue">
+            <draggable
+              tag="ul"
+              :list="widget.options.options"
+              v-bind="{
+                group: { name: 'options' },
+                ghostClass: 'ghost',
+                handle: '.drag-item'
+              }"
+              handle=".drag-item"
+            >
+              <li v-for="(item, index) in widget.options.options" :key="index">
+                <el-checkbox :label="item.value" style="margin-right: 5px;">
+                  <el-input
+                    :style="{
+                      width: widget.options.showLabel ? '90px' : '180px'
+                    }"
+                    v-model="item.value"
+                    :disabled="
+                      widget.options.defaultValue.indexOf(item.value) !== -1
+                    "
+                  ></el-input>
+                  <el-input
+                    v-if="widget.options.showLabel"
+                    style="width:90px;"
+                    v-model="item.label"
+                  >
+                  </el-input>
+                </el-checkbox>
+                <i
+                  class="drag-item"
+                  style="font-size: 16px;margin: 0 5px;cursor: move;"
+                  ><i class="iconfont icon-icon_bars"></i
+                ></i>
+                <el-button
+                  style="padding: 2px;margin-left: 5px;"
+                  type="danger"
+                  icon="el-icon-minus"
+                  circle
+                  plain
+                  :disabled="
+                    widget.options.defaultValue.indexOf(item.value) !== -1
+                  "
+                  @click="handleOptionsRemove(index)"
+                ></el-button>
+              </li>
+            </draggable>
+          </el-checkbox-group>
+
+          <div style="margin-left: 22px;">
+            <el-button type="text" @click="handleAddOption">添加选项</el-button>
+          </div>
+        </template>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <el-input
+          :value="JSON.stringify(widget.options.defaultValue || [])"
+          readonly
+        ></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.border">显示边框 </el-checkbox>
+        <el-checkbox v-model="widget.options.buttonType"> 按钮样式</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: {
+    handleAddOption() {
+      this.widget.options.options.push({
+        value: `新选项${this.widget.options.options.length + 1}`,
+        label: `新选项${this.widget.options.options.length + 1}`
+      });
+    },
+    handleOptionsRemove(index) {
+      this.widget.options.options.splice(index, 1);
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,137 @@
+<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-color-picker
+          v-model="widget.options.defaultValue"
+          :show-alpha="widget.options.showAlpha"
+        ></el-color-picker>
+      </el-form-item>
+
+      <el-form-item label="预定义颜色">
+        <el-select
+          style="width:100%"
+          v-model="widget.options.predefine"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          placeholder=""
+          no-data-text="输入颜色值后回车"
+        >
+          <el-option
+            v-for="item in predefine"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </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.showAlpha"
+          >支持透明度
+        </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],
+  data() {
+    return {
+      predefine: [
+        "#1989FA",
+        "#67C23A",
+        "#FF976A",
+        "#EE0A24",
+        "#000000",
+        "#333333",
+        "#666666",
+        "#999999",
+        "#FFFFFF"
+      ]
+    };
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,158 @@
+<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
+          :value="
+            ['datetimerange', 'daterange', 'monthrange'].includes(
+              widget.options.type
+            )
+              ? JSON.stringify(widget.options.defaultValue || [])
+              : widget.options.defaultValue
+          "
+          readonly
+        ></el-input>
+      </el-form-item>
+
+      <template>
+        <el-form-item label="格式">
+          <el-input v-model="widget.options.format"></el-input>
+        </el-form-item>
+
+        <el-form-item label="显示类型">
+          <el-select v-model="widget.options.type">
+            <el-option value="year"></el-option>
+            <el-option value="month"></el-option>
+            <el-option value="date"></el-option>
+            <el-option value="dates"></el-option>
+            <!-- <el-option value="week"></el-option> -->
+            <el-option value="datetime"></el-option>
+            <el-option value="monthrange"></el-option>
+            <el-option value="datetimerange"></el-option>
+            <el-option value="daterange"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          label="开始时间占位内容"
+          v-if="
+            ['datetimerange', 'daterange', 'monthrange'].includes(
+              widget.options.type
+            )
+          "
+        >
+          <el-input v-model="widget.options.startPlaceholder"></el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="结束时间占位内容"
+          v-if="
+            ['datetimerange', 'daterange', 'monthrange'].includes(
+              widget.options.type
+            )
+          "
+        >
+          <el-input v-model="widget.options.endPlaceholder"></el-input>
+        </el-form-item>
+      </template>
+
+      <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-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="请选择"
+                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/divider.vue

@@ -0,0 +1,61 @@
+<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.defaultValue"></el-input>
+      </el-form-item>
+
+      <el-form-item label="宽度">
+        <el-input v-model="widget.options.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="对齐方式">
+        <el-radio-group v-model="widget.options.contentPosition">
+          <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="操作属性">
+        <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 { configComponent } from "../mixins";
+export default {
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/configs/editor.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-input
+          type="textarea"
+          :rows="5"
+          v-model="widget.options.defaultValue"
+        >
+        </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-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: {}
+};
+</script>
+
+<style></style>