tianheng-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,142 @@
+<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 v-model="widget.options.defaultValue"></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.formatTooltip"
+            :min="0.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.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+        <el-checkbox v-model="widget.options.vertical">竖向模式</el-checkbox>
+        <el-checkbox v-model="widget.options.showInput"
+          >显示输入框
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.showStops"
+          >显示间断点
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.showTooltip">
+          显示Tooltip
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.range">范围选择 </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>

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

@@ -0,0 +1,130 @@
+<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.number="widget.options.width"></el-input>
+      </el-form-item>
+
+      <el-form-item label="默认值">
+        <el-switch v-model="widget.options.defaultValue"></el-switch>
+      </el-form-item>
+
+      <el-form-item label="文字描述" :inline="true">
+        <div style="display: flex;">
+          <span class="el-form-item__label">inactiveText：</span>
+          <el-input
+            v-model="widget.options.switchInactiveText"
+            placeholder="请输入内容"
+          >
+          </el-input>
+        </div>
+        <div style="display: flex;">
+          <span class="el-form-item__label">activeText：</span>
+          <el-input
+            v-model="widget.options.switchActiveText"
+            placeholder="请输入内容"
+          >
+          </el-input>
+        </div>
+        <div style="display: flex;">
+          <span class="el-form-item__label">inactiveColor：</span>
+          <el-input
+            v-model="widget.options.switchInactiveColor"
+            placeholder="例：#C0CCDA"
+          >
+          </el-input>
+        </div>
+        <div style="display: flex;">
+          <span class="el-form-item__label">activeColor：</span>
+          <el-input
+            v-model="widget.options.switchActiveColor"
+            placeholder="例：#409EFF"
+          >
+          </el-input>
+        </div>
+      </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>
+        <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>

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

@@ -0,0 +1,105 @@
+<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>
+        <div class="config-header" slot="label">
+          <span class="title">默认值</span>
+          <span class="value" @click="handleAddData">新增一组</span>
+        </div>
+        <code-editor
+          v-model="widget.options.defaultValue"
+          language="json"
+        ></code-editor>
+      </el-form-item>
+
+      <!-- <el-form-item label="高度">
+        <el-input v-model.number="widget.options.height"></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.isAdd">可新增 </el-checkbox>
+        <el-checkbox v-model="widget.options.isDelete">可删除 </el-checkbox>
+        <!-- <el-checkbox v-model="widget.options.isEdit">可编辑 </el-checkbox> -->
+        <el-checkbox v-model="widget.options.isSerial">显示序号 </el-checkbox>
+        <el-checkbox v-model="widget.options.border">显示边框 </el-checkbox>
+
+        <el-checkbox v-model="widget.options.stripe">是否为斑马纹 </el-checkbox>
+        <el-checkbox v-model="widget.options.showHeader"
+          >是否显示表头
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.highlightCurrentRow"
+          >是否高亮当前行
+        </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";
+import CodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: {
+    Draggable,
+    CodeEditor
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {
+    handleAddData() {
+      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
+      let dic = {};
+      this.widget.list.forEach(item => {
+        if (item.type === "grid") {
+          for (let i = 0; i < item.columns.length; i++) {
+            const element = item.columns[i];
+            for (let j = 0; j < element.list.length; j++) {
+              const element2 = element.list[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+      defaultValue.push(dic);
+      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,102 @@
+<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>
+        <div class="config-header" slot="label">
+          <span class="title">默认值</span>
+          <span class="value" @click="handleAddData">添加数据</span>
+        </div>
+        <code-editor
+          v-model="widget.options.defaultValue"
+          language="json"
+        ></code-editor>
+      </el-form-item>
+
+      <el-form-item label="新增按钮文本内容">
+        <el-input v-model.number="widget.options.addButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="删除按钮文本内容">
+        <el-input v-model.number="widget.options.deleteButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="可删除的最小索引">
+        <el-input-number v-model="widget.options.deleteIndex" :min="0">
+        </el-input-number>
+      </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.isAdd">可新增 </el-checkbox>
+        <el-checkbox v-model="widget.options.isDelete">可删除 </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";
+import CodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: {
+    Draggable,
+    CodeEditor
+  },
+  props: {},
+  mixins: [configComponent],
+  mounted() {},
+  methods: {
+    handleAddData() {
+      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
+      let dic = {};
+      this.widget.list.forEach(item => {
+        if (item.type === "grid") {
+          for (let i = 0; i < item.columns.length; i++) {
+            const element = item.columns[i];
+            for (let j = 0; j < element.list.length; j++) {
+              const element2 = element.list[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+      defaultValue.push(dic);
+      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,175 @@
+<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-radio-group v-model="widget.options.type" size="mini">
+          <el-radio-button label="">默认</el-radio-button>
+          <el-radio-button label="card">选项卡</el-radio-button>
+          <el-radio-button label="border-card">卡片化</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选项卡位置">
+        <el-radio-group v-model="widget.options.tabPosition" size="mini">
+          <el-radio-button label="top">顶部</el-radio-button>
+          <el-radio-button label="right">右侧</el-radio-button>
+          <el-radio-button label="bottom">底部</el-radio-button>
+          <el-radio-button label="left">左侧</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选项">
+        <el-radio-group
+          v-model="widget.options.remote"
+          size="mini"
+          style="margin-bottom:10px;"
+        >
+          <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">
+          <el-select
+            class="remoteApis"
+            size="mini"
+            v-model="widget.options.remoteFunc"
+            placeholder="请选择远端方法"
+          >
+            <template slot="prefix">
+              <div style="width:70px;">接口名</div>
+            </template>
+            <el-option-group
+              v-for="group in remoteApis"
+              :key="group.label"
+              :label="group.label"
+            >
+              <el-option
+                v-for="item in group.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-option-group>
+          </el-select>
+
+          <el-input size="mini" style="" v-model="widget.options.props.value">
+            <template slot="prepend">
+              <div style="width:30px;">值</div>
+            </template>
+          </el-input>
+          <el-input size="mini" style="" v-model="widget.options.props.label">
+            <template slot="prepend">
+              <div style="width:30px;">标签</div>
+            </template>
+          </el-input>
+        </div>
+        <template v-else>
+          <el-radio-group v-model="widget.options.defaultValue">
+            <draggable
+              tag="ul"
+              :list="widget.tabs"
+              v-bind="{
+                group: { name: 'tabs' },
+                ghostClass: 'ghost',
+                handle: '.drag-item'
+              }"
+              handle=".drag-item"
+            >
+              <li v-for="(item, index) in widget.tabs" :key="index">
+                <el-radio :label="item.value" style="margin-right: 5px;">
+                  <el-input
+                    v-model="item.value"
+                    style="width:90px;"
+                    size="mini"
+                    placeholder="value"
+                  ></el-input>
+                  <el-input
+                    v-model="item.label"
+                    style="width:90px;"
+                    size="mini"
+                    placeholder="label"
+                  ></el-input>
+                </el-radio>
+                <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"
+                  size="mini"
+                  icon="el-icon-minus"
+                  style="padding: 4px;margin-left: 5px;"
+                ></el-button>
+              </li>
+            </draggable>
+          </el-radio-group>
+
+          <div style="margin-left: 22px;">
+            <el-button type="text" @click="handleAddOption">添加选项</el-button>
+          </div>
+        </template>
+      </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: {
+    handleOptionsRemove(index) {
+      this.widget.tabs.splice(index, 1);
+    },
+    handleAddOption() {
+      this.widget.tabs.push({
+        label: `选项${this.widget.tabs.length + 1}`,
+        value: `tab${this.widget.tabs.length + 1}`,
+        list: []
+      });
+    }
+  }
+};
+</script>
+
+<style></style>