tianheng-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,211 @@
+<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;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-radio-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-radio :label="item.value" style="margin-right: 5px;">
+                  <el-input
+                    :style="{
+                      width: widget.options.showLabel ? '90px' : '180px'
+                    }"
+                    v-model="item.value"
+                  ></el-input>
+                  <el-input
+                    v-if="widget.options.showLabel"
+                    style="width:90px;"
+                    v-model="item.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
+                  style="padding: 4px;margin-left: 5px;"
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-minus"
+                  circle
+                  plain
+                  :disabled="widget.options.defaultValue === item.value"
+                  @click="handleOptionsRemove(index)"
+                ></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-input v-model="widget.options.defaultValue" clearable></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-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/rate.vue

@@ -0,0 +1,109 @@
+<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;align-items: center;justify-content: space-evenly;"
+        >
+          <el-rate
+            :max="widget.options.max"
+            :allow-half="widget.options.allowHalf"
+            v-model="widget.options.defaultValue"
+          ></el-rate>
+          <el-button type="text" @click="widget.options.defaultValue = 0"
+            >清空</el-button
+          >
+        </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.allowHalf">允许半选 </el-checkbox>
+        <el-checkbox v-model="widget.options.showText">辅助文字 </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>

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

@@ -0,0 +1,305 @@
+<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="选项">
+        <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>
+          <template v-if="widget.options.multiple">
+            <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>
+          </template>
+          <template v-else>
+            <el-radio-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-radio :label="item.value" style="margin-right: 5px;">
+                    <el-input
+                      :style="{
+                        width: widget.options.showLabel ? '90px' : '180px'
+                      }"
+                      v-model="item.value"
+                    ></el-input>
+                    <el-input
+                      style="width:90px;"
+                      size="mini"
+                      v-if="widget.options.showLabel"
+                      v-model="item.label"
+                    >
+                    </el-input>
+                    <!-- <input v-model="item.value"/> -->
+                  </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
+                    style="padding: 4px;margin-left: 5px;"
+                    circle
+                    plain
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-minus"
+                    :disabled="
+                      widget.options.defaultValue.indexOf(item.value) !== -1
+                    "
+                    @click="handleOptionsRemove(index)"
+                  ></el-button>
+                </li>
+              </draggable>
+            </el-radio-group>
+          </template>
+
+          <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="
+            widget.options.multiple
+              ? JSON.stringify(widget.options.defaultValue || [])
+              : widget.options.defaultValue
+          "
+          clearable
+          @clear="
+            widget.options.multiple
+              ? (widget.options.defaultValue = [])
+              : (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-checkbox v-model="widget.options.clearable">清除按钮</el-checkbox>
+        <el-checkbox
+          v-model="widget.options.multiple"
+          @change="handleSelectMuliple"
+        >
+          是否多选
+        </el-checkbox>
+        <el-checkbox v-model="widget.options.collapseTags">折叠Tag</el-checkbox>
+        <el-checkbox v-model="widget.options.filterable">可搜索</el-checkbox>
+        <el-checkbox v-model="widget.options.allowCreate">创建条目</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: {
+    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 = "";
+        }
+      }
+    },
+    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>