tianheng-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,54 @@
+<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>
+
+      <template v-if="widget.type == 'blank'">
+        <el-form-item label="绑定数据类型">
+          <el-select v-model="widget.options.defaultType">
+            <el-option value="String" label="字符串"></el-option>
+            <el-option value="Object" label="对象"></el-option>
+            <el-option value="Array" label="数组"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</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/button.vue

@@ -0,0 +1,172 @@
+<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" clearable></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="按钮类型">
+        <el-select
+          style="width:100%;"
+          v-model="widget.options.buttonType"
+          clearable
+        >
+          <el-option
+            v-for="key in buttonTypes"
+            :key="key"
+            :label="key"
+            :value="key"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="图标类名">
+        <th-icons v-model="widget.options.buttonIcon"></th-icons>
+      </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="操作属性">
+        <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.loading"
+          >是否加载中状态
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.buttonPlain"
+          >是否朴素按钮
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.buttonRound"
+          >是否圆角按钮
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.buttonCircle"
+          >是否圆形按钮
+        </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-radio-group
+          style="margin-bottom:10px;"
+          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-show="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>
+        </div>
+
+        <el-collapse v-show="!widget.options.remote" 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 { configComponent } from "../mixins";
+import ThIcons from "ui/Icons/index.vue";
+export default {
+  components: {
+    ThIcons
+  },
+  props: {},
+  mixins: [configComponent],
+  data() {
+    return {
+      buttonTypes: ["primary", "success", "warning", "danger", "info", "text"]
+    };
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/configs/cascader.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.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="默认值">
+        <code-editor v-model="widget.options.defaultValue"></code-editor>
+      </el-form-item> -->
+
+      <el-form-item
+        label="组件插槽"
+        v-if="widget.type === 'input' || widget.type === 'cascader'"
+      >
+        <el-input
+          v-if="Object.keys(widget.options).indexOf('prepend') >= 0"
+          placeholder="请输入内容或HTML"
+          v-model="widget.options.prepend"
+        >
+          <template slot="prepend">
+            <div style="width:50px;">prepend</div>
+          </template>
+        </el-input>
+        <el-input
+          v-if="Object.keys(widget.options).indexOf('append') >= 0"
+          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-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>
+      </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.props.multiple"
+          >支持多选</el-checkbox
+        >
+        <el-checkbox v-model="widget.options.showAllLevels"
+          >仅显示最后一级</el-checkbox
+        >
+        <el-checkbox v-model="widget.options.props.checkStrictly"
+          >选择任意一级选项
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.filterable"
+          >是否可搜索
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.collapseTags"
+          >是否折叠展示Tag
+        </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-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";
+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/cell.vue

@@ -0,0 +1,81 @@
+<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="默认值">
+        <div style="display: flex;">
+          <div style="width:80px;">标题：</div>
+          <el-input v-model="widget.options.title"></el-input>
+        </div>
+        <div style="display: flex;">
+          <div style="width:80px;">内容：</div>
+          <el-input v-model="widget.options.value"></el-input>
+        </div>
+        <div style="display: flex;">
+          <div style="width:80px;">副标题：</div>
+          <el-input v-model="widget.options.label"></el-input>
+        </div>
+      </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="操作属性">
+        <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>