tianheng-ui 0.0.56 → 0.0.58

package/packages/formMaking/WidgetConfig.vue

@@ -1,1539 +0,0 @@
-<template>
-  <div v-if="show">
-    <el-form label-position="top">
-      <el-form-item label="字段标识" v-if="data.type != 'grid'">
-        <el-input v-model="data.model"></el-input>
-      </el-form-item>
-
-      <el-form-item label="标题" v-if="data.type != 'grid'">
-        <el-input v-model="data.name"></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="宽度"
-        v-if="Object.keys(data.options).indexOf('width') >= 0"
-      >
-        <el-input v-model="data.options.width"></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="标签宽度"
-        v-if="Object.keys(data.options).indexOf('labelWidth') >= 0"
-      >
-        <div style="display: flex;">
-          <el-checkbox v-model="data.options.isLabelWidth">自定义</el-checkbox>
-          <el-input-number
-            v-model="data.options.labelWidth"
-            :min="0"
-            :max="200"
-            :disabled="!data.options.isLabelWidth"
-          ></el-input-number>
-        </div>
-      </el-form-item>
-
-      <el-form-item
-        label="高度"
-        v-if="Object.keys(data.options).indexOf('height') >= 0"
-      >
-        <el-input v-model="data.options.height"></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="格式化"
-        v-if="
-          data.type === 'slider' &&
-            Object.keys(data.options).indexOf('formatTooltip') >= 0
-        "
-      >
-        <el-input-number
-          v-model="data.options.formatTooltip"
-          :min="0.1"
-        ></el-input-number>
-      </el-form-item>
-
-      <el-form-item
-        label="大小"
-        v-if="Object.keys(data.options).indexOf('size') >= 0"
-      >
-        宽度
-        <el-input
-          style="width: 90px;"
-          type="number"
-          v-model.number="data.options.size.width"
-        ></el-input>
-        高度
-        <el-input
-          style="width: 90px;"
-          type="number"
-          v-model.number="data.options.size.height"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="对齐方式"
-        v-if="Object.keys(data.options).indexOf('contentPosition') >= 0"
-      >
-        <el-radio-group v-model="data.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="文件列表样式" v-if="data.type == 'imgupload'">
-        <el-select
-          v-model="data.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="
-          Object.keys(data.options).indexOf('placeholder') >= 0 &&
-            (data.type != 'time' || data.type != 'date')
-        "
-      >
-        <el-input v-model="data.options.placeholder"></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="布局方式"
-        v-if="Object.keys(data.options).indexOf('inline') >= 0"
-      >
-        <el-radio-group v-model="data.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>
-
-      <template v-if="['number', 'checkbox', 'slider'].includes(data.type)">
-        <el-form-item label="">
-          <div v-if="Object.keys(data.options).indexOf('min') >= 0">
-            <div class="el-form-item__label">
-              最小{{ ["checkbox"].includes(data.type) ? "勾选" : "值" }}：
-            </div>
-            <br />
-            <el-input-number v-model="data.options.min" :min="0">
-            </el-input-number>
-          </div>
-          <div v-if="Object.keys(data.options).indexOf('max') >= 0">
-            <div class="el-form-item__label">
-              最大{{ ["checkbox"].includes(data.type) ? "勾选" : "值" }}：
-            </div>
-            <br />
-            <el-input-number
-              v-model="data.options.max"
-              :min="data.options.min || 1"
-            >
-            </el-input-number>
-          </div>
-        </el-form-item>
-      </template>
-
-      <el-form-item
-        label="步长"
-        v-if="Object.keys(data.options).indexOf('step') >= 0"
-      >
-        <el-input-number
-          v-model="data.options.step"
-          :min="0"
-          :max="100"
-          :step="1"
-        ></el-input-number>
-      </el-form-item>
-
-      <el-form-item
-        label="显示输入框"
-        v-if="Object.keys(data.options).indexOf('showInput') >= 0"
-      >
-        <el-switch v-model="data.options.showInput"></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="显示间断点"
-        v-if="Object.keys(data.options).indexOf('showStops') >= 0"
-      >
-        <el-switch v-model="data.options.showStops"></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="开启范围选择"
-        v-if="
-          data.type === 'slider' &&
-            Object.keys(data.options).indexOf('range') >= 0
-        "
-      >
-        <el-switch v-model="data.options.range"></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="精度"
-        v-if="Object.keys(data.options).indexOf('precision') >= 0"
-      >
-        <el-input-number
-          v-model="data.options.precision"
-          :min="0"
-          :max="100"
-          :step="1"
-        ></el-input-number>
-      </el-form-item>
-
-      <el-form-item
-        label="按钮位置"
-        v-if="Object.keys(data.options).indexOf('controlsPosition') >= 0"
-      >
-        <el-radio-group v-model="data.options.controlsPosition">
-          <el-radio-button :label="false">两边</el-radio-button>
-          <el-radio-button :label="true">右边</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item
-        label="是否多选"
-        v-if="data.type == 'select' || data.type == 'imgupload'"
-      >
-        <el-switch
-          v-model="data.options.multiple"
-          @change="handleSelectMuliple"
-        ></el-switch>
-      </el-form-item>
-      <el-form-item label="是否可以拖拽" v-if="data.type == 'imgupload'">
-        <el-switch
-          v-model="data.options.drag"
-          @change="handleImguploadDrag"
-        ></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="是否可搜索"
-        v-if="data.type === 'select' || data.type === 'cascader'"
-      >
-        <el-switch v-model="data.options.filterable"></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="是否可创建条目"
-        v-if="data.type == 'select' && data.options.multiple"
-      >
-        <el-switch v-model="data.options.allowCreate"></el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="允许半选"
-        v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
-      >
-        <el-switch v-model="data.options.allowHalf"> </el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="加入辅助文字"
-        v-if="Object.keys(data.options).indexOf('showText') >= 0"
-      >
-        <el-switch v-model="data.options.showText"> </el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="支持透明度选择"
-        v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
-      >
-        <el-switch v-model="data.options.showAlpha"> </el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="是否显示标签"
-        v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
-      >
-        <el-switch v-model="data.options.showLabel"> </el-switch>
-      </el-form-item>
-
-      <el-form-item
-        label="选项"
-        v-if="Object.keys(data.options).indexOf('options') >= 0"
-      >
-        <el-radio-group
-          v-model="data.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>
-        <template v-if="data.options.remote">
-          <div>
-            <!-- <el-input size="mini" style="" v-model="data.options.remoteFunc">
-              <template slot="prepend">远端方法</template>
-            </el-input> -->
-            <!-- <div style="width:70px;">接口名</div> -->
-            <el-select
-              class="remoteApis"
-              size="mini"
-              v-model="data.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="data.options.props.value">
-              <template slot="prepend">
-                <div style="width:30px;">值</div>
-              </template>
-            </el-input>
-            <el-input size="mini" style="" v-model="data.options.props.label">
-              <template slot="prepend">
-                <div style="width:30px;">标签</div>
-              </template>
-            </el-input>
-          </div>
-        </template>
-        <template v-else>
-          <template
-            v-if="
-              data.type == 'radio' ||
-                (data.type == 'select' && !data.options.multiple)
-            "
-          >
-            <el-radio-group v-model="data.options.defaultValue">
-              <draggable
-                tag="ul"
-                :list="data.options.options"
-                v-bind="{
-                  group: { name: 'options' },
-                  ghostClass: 'ghost',
-                  handle: '.drag-item'
-                }"
-                handle=".drag-item"
-              >
-                <li v-for="(item, index) in data.options.options" :key="index">
-                  <el-radio :label="item.value" style="margin-right: 5px;">
-                    <el-input
-                      :style="{
-                        width: data.options.showLabel ? '90px' : '180px'
-                      }"
-                      size="mini"
-                      v-model="item.value"
-                    ></el-input>
-                    <el-input
-                      style="width:90px;"
-                      size="mini"
-                      v-if="data.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
-                    @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>
-          </template>
-
-          <template
-            v-if="
-              data.type == 'checkbox' ||
-                (data.type == 'select' && data.options.multiple)
-            "
-          >
-            <el-checkbox-group v-model="data.options.defaultValue">
-              <draggable
-                tag="ul"
-                :list="data.options.options"
-                v-bind="{
-                  group: { name: 'options' },
-                  ghostClass: 'ghost',
-                  handle: '.drag-item'
-                }"
-                handle=".drag-item"
-              >
-                <li v-for="(item, index) in data.options.options" :key="index">
-                  <el-checkbox :label="item.value" style="margin-right: 5px;">
-                    <el-input
-                      :style="{
-                        width: data.options.showLabel ? '90px' : '180px'
-                      }"
-                      size="mini"
-                      v-model="item.value"
-                    ></el-input>
-                    <el-input
-                      style="width:90px;"
-                      size="mini"
-                      v-if="data.options.showLabel"
-                      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
-                    @click="handleOptionsRemove(index)"
-                    circle
-                    plain
-                    type="danger"
-                    size="mini"
-                    icon="el-icon-minus"
-                    style="padding: 4px;margin-left: 5px;"
-                  ></el-button>
-                </li>
-              </draggable>
-            </el-checkbox-group>
-          </template>
-          <div style="margin-left: 22px;">
-            <el-button type="text" @click="handleAddOption">添加选项</el-button>
-          </div>
-        </template>
-      </el-form-item>
-
-      <el-form-item
-        label="辅助文字"
-        v-if="
-          Object.keys(data.options).indexOf('showText') >= 0 &&
-            data.options.showText
-        "
-      >
-        <template v-if="data.type == 'rate' && data.options.showText">
-          <el-radio-group v-model="data.options.defaultValue">
-            <draggable
-              tag="ul"
-              :list="data.options.auxiliaryValue"
-              v-bind="{
-                group: { name: 'options' },
-                ghostClass: 'ghost',
-                handle: '.drag-item'
-              }"
-              handle=".drag-item"
-            >
-              <li
-                v-for="(item, index) in data.options.auxiliaryValue"
-                :key="index"
-              >
-                <span style="margin-right: 5px;">
-                  <el-input
-                    :style="{
-                      width: data.options.showLabel ? '90px' : '180px'
-                    }"
-                    size="mini"
-                    v-model="data.options.auxiliaryValue[index]"
-                  ></el-input>
-                </span>
-                <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>
-        </template>
-        <div style="margin-left: 22px;">
-          <el-button type="text" @click="handleAddOption">添加选项</el-button>
-        </div>
-      </el-form-item>
-
-      <el-form-item
-        label="默认值"
-        v-if="
-          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
-            [
-              'textarea',
-              'input',
-              'rate',
-              'color',
-              'switch',
-              'text',
-              'select'
-            ].includes(data.type)
-        "
-      >
-        <el-input
-          v-if="data.type == 'textarea'"
-          type="textarea"
-          :rows="5"
-          v-model="data.options.defaultValue"
-        ></el-input>
-        <el-input
-          v-if="data.type == 'input' || data.type == 'select'"
-          v-model="data.options.defaultValue"
-        ></el-input>
-        <template v-if="data.type == 'rate'">
-          <el-rate
-            style="display:inline-block;vertical-align: middle;"
-            :max="data.options.max"
-            :allow-half="data.options.allowHalf"
-            v-model="data.options.defaultValue"
-          ></el-rate>
-          <el-button
-            type="text"
-            style="display:inline-block;vertical-align: middle;margin-left: 10px;"
-            @click="data.options.defaultValue = 0"
-            >清空</el-button
-          >
-        </template>
-
-        <el-color-picker
-          v-if="data.type == 'color'"
-          v-model="data.options.defaultValue"
-          :show-alpha="data.options.showAlpha"
-        ></el-color-picker>
-        <el-switch
-          v-if="data.type == 'switch'"
-          v-model="data.options.defaultValue"
-        ></el-switch>
-        <el-input
-          v-if="data.type == 'text'"
-          v-model="data.options.defaultValue"
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item
-        label="最大字数"
-        v-if="data.type == 'textarea' || data.type == 'input'"
-      >
-        <el-input-number
-          v-model="data.options.maxlength"
-          :min="-1"
-        ></el-input-number>
-      </el-form-item>
-
-      <template v-if="data.type == 'textarea'">
-        <el-form-item label="设置行高" :inline="true">
-          <template>
-            <span class="el-form-item__label">最小值：</span>
-            <el-input-number
-              v-if="Object.keys(data.options).indexOf('minRows') >= 0"
-              v-model="data.options.minRows"
-              :min="1"
-              @change="handleInputNumberChange"
-            >
-            </el-input-number>
-          </template>
-          <br />
-          <template>
-            <span class="el-form-item__label">最大值：</span>
-            <el-input-number
-              v-if="Object.keys(data.options).indexOf('maxRows') >= 0"
-              v-model="data.options.maxRows"
-              :min="data.options.minRows || 1"
-            >
-            </el-input-number>
-          </template>
-        </el-form-item>
-      </template>
-
-      <el-form-item
-        label="显示字数统计"
-        v-if="data.type == 'textarea' || data.type == 'input'"
-      >
-        <el-switch v-model="data.options.showWordLimit"></el-switch>
-      </el-form-item>
-
-      <template v-if="data.type == 'time' || data.type == 'date'">
-        <el-form-item label="显示类型" v-if="data.type == 'date'">
-          <el-select v-model="data.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="Object.keys(data.options).indexOf('timeType') >= 0"
-        >
-          <el-radio-group v-model="data.options.timeType">
-            <el-radio-button :label="true">任意时间点</el-radio-button>
-            <el-radio-button :label="false">固定时间点</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item
-          label="是否为范围选择"
-          v-if="data.type == 'time' && !data.options.timeType"
-        >
-          <el-switch v-model="data.options.selectRange"> </el-switch>
-        </el-form-item>
-
-        <el-form-item
-          label="是否为范围选择"
-          v-if="data.type == 'time' && data.options.timeType"
-        >
-          <el-switch v-model="data.options.isRange"> </el-switch>
-        </el-form-item>
-
-        <el-form-item
-          label="是否获取时间戳"
-          v-if="data.type == 'date' && data.options.timeType"
-        >
-          <el-switch v-model="data.options.timestamp"> </el-switch>
-        </el-form-item>
-
-        <el-form-item
-          label="占位内容"
-          v-if="
-            (!data.options.isRange &&
-              data.type == 'time' &&
-              data.options.timeType) ||
-              (data.type != 'time' &&
-                data.options.type != 'datetimerange' &&
-                data.options.type != 'daterange' &&
-                data.options.timeType)
-          "
-        >
-          <el-input v-model="data.options.placeholder"></el-input>
-        </el-form-item>
-
-        <el-form-item
-          label="格式"
-          v-if="
-            (data.type == 'time' && data.options.timeType) ||
-              ['datetimerange', 'daterange', 'date'].includes(data.options.type)
-          "
-        >
-          <el-input v-model="data.options.format"></el-input>
-        </el-form-item>
-
-        <el-form-item
-          label="默认值"
-          v-if="
-            data.type == 'time' &&
-              Object.keys(data.options).indexOf('isRange') >= 0 &&
-              data.options.timeType
-          "
-        >
-          <el-time-picker
-            key="1"
-            style="width: 100%;"
-            v-if="!data.options.isRange"
-            v-model="data.options.defaultValue"
-            :arrowControl="data.options.arrowControl"
-            :value-format="data.options.format"
-          >
-          </el-time-picker>
-          <el-time-picker
-            key="2"
-            v-if="data.options.isRange"
-            style="width: 100%;"
-            v-model="data.options.defaultValue"
-            is-range
-            :arrowControl="data.options.arrowControl"
-            :value-format="data.options.format"
-          >
-          </el-time-picker>
-        </el-form-item>
-
-        <template>
-          <el-form-item
-            :label="data.options.selectRange ? '开始时间范围值' : '时间范围值'"
-            v-if="
-              data.type == 'time' &&
-                Object.keys(data.options).indexOf('stretTimePickerOptions') >=
-                  0 &&
-                !data.options.timeType
-            "
-          >
-            <el-time-picker
-              key="1"
-              v-if="data.options.stretTimePickerOptions.start"
-              style="width: 100%;"
-              v-model="data.options.stretTimePickerOptions.start"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-            <el-time-picker
-              key="2"
-              v-if="data.options.stretTimePickerOptions.end"
-              style="width: 100%;"
-              v-model="data.options.stretTimePickerOptions.end"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-          </el-form-item>
-
-          <el-form-item
-            :label="data.options.selectRange ? '开始时间步长' : '时间步长'"
-            v-if="
-              data.type == 'time' &&
-                Object.keys(data.options).indexOf('stretTimePickerOptions') >=
-                  0 &&
-                !data.options.timeType
-            "
-          >
-            <el-time-picker
-              key="1"
-              v-if="data.options.stretTimePickerOptions.step"
-              style="width: 100%;"
-              v-model="data.options.stretTimePickerOptions.step"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-          </el-form-item>
-        </template>
-
-        <el-form-item
-          label="开始时间占位内容"
-          v-if="
-            data.options.isRange ||
-              data.options.type == 'datetimerange' ||
-              data.options.type == 'daterange' ||
-              (!data.options.timeType && data.options.selectRange)
-          "
-        >
-          <el-input v-model="data.options.startPlaceholder"></el-input>
-        </el-form-item>
-
-        <template v-if="data.options.selectRange">
-          <el-form-item
-            label="结束时间范围值"
-            v-if="
-              data.type == 'time' &&
-                Object.keys(data.options).indexOf('endTimePickerOptions') >=
-                  0 &&
-                !data.options.timeType
-            "
-          >
-            <el-time-picker
-              key="1"
-              v-if="data.options.endTimePickerOptions.start"
-              style="width: 100%;"
-              v-model="data.options.endTimePickerOptions.start"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-            <el-time-picker
-              key="2"
-              v-if="data.options.endTimePickerOptions.end"
-              style="width: 100%;"
-              v-model="data.options.endTimePickerOptions.end"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-          </el-form-item>
-
-          <el-form-item
-            label="结束时间步长"
-            v-if="
-              data.type == 'time' &&
-                Object.keys(data.options).indexOf('endTimePickerOptions') >=
-                  0 &&
-                !data.options.timeType
-            "
-          >
-            <el-time-picker
-              key="1"
-              v-if="data.options.endTimePickerOptions.step"
-              style="width: 100%;"
-              v-model="data.options.endTimePickerOptions.step"
-              value-format="HH:mm"
-              format="HH:mm"
-            >
-            </el-time-picker>
-          </el-form-item>
-        </template>
-
-        <el-form-item
-          label="结束时间占位内容"
-          v-if="
-            data.options.isRange ||
-              data.options.type == 'datetimerange' ||
-              data.options.type == 'daterange' ||
-              (!data.options.timeType && data.options.selectRange)
-          "
-        >
-          <el-input v-model="data.options.endPlaceholder"></el-input>
-        </el-form-item>
-      </template>
-
-      <template v-if="data.type == 'imgupload'">
-        <el-form-item label="最大上传数">
-          <el-input
-            type="number"
-            v-model.number="data.options.length"
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="文字提示">
-          <el-input
-            v-model.number="data.options.elUploadTip"
-            placeholder="请输入文字提示或HTML"
-          ></el-input>
-        </el-form-item>
-
-        <!-- <el-form-item label="使用七牛上传">
-          <el-switch v-model="data.options.isQiniu"></el-switch>
-        </el-form-item> -->
-
-        <template v-if="data.options.isQiniu">
-          <el-form-item label="Domain" :required="true">
-            <el-input v-model="data.options.domain"></el-input>
-          </el-form-item>
-          <el-form-item label="获取七牛Token方法" :required="true">
-            <el-input v-model="data.options.tokenFunc"></el-input>
-          </el-form-item>
-        </template>
-
-        <template v-else>
-          <el-form-item label="文件上传" :required="true">
-            <el-select
-              class="remoteApis"
-              v-model="data.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-form-item>
-          <!-- <el-form-item label="选取文件后立即上传">
-            <el-switch v-model="data.options.autoUpload"></el-switch>
-          </el-form-item> -->
-        </template>
-      </template>
-
-      <template v-if="data.type == 'blank'">
-        <el-form-item label="绑定数据类型">
-          <el-select v-model="data.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>
-
-      <template v-if="data.type == 'grid'">
-        <el-form-item label="栅格间隔">
-          <el-input
-            type="number"
-            v-model.number="data.options.gutter"
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="列配置项">
-          <draggable
-            tag="ul"
-            :list="data.columns"
-            v-bind="{
-              group: { name: 'options' },
-              ghostClass: 'ghost',
-              handle: '.drag-item'
-            }"
-            handle=".drag-item"
-          >
-            <li v-for="(item, index) in data.columns" :key="index">
-              <i
-                class="drag-item"
-                style="font-size: 16px;margin: 0 5px;cursor: move;"
-                ><i class="iconfont icon-icon_bars"></i
-              ></i>
-              <el-input
-                placeholder="栅格值"
-                size="mini"
-                style="width: 100px;"
-                type="number"
-                v-model.number="item.span"
-              ></el-input>
-
-              <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>
-          <div style="margin-left: 22px;">
-            <el-button type="text" @click="handleAddOption">添加列</el-button>
-          </div>
-        </el-form-item>
-
-        <el-form-item label="水平排列方式">
-          <el-select v-model="data.options.justify">
-            <el-option value="start" label="左对齐"></el-option>
-            <el-option value="end" label="右对齐"></el-option>
-            <el-option value="center" label="居中"></el-option>
-            <el-option value="space-around" label="两侧间隔相等"></el-option>
-            <el-option value="space-between" label="两端对齐"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="垂直排列方式">
-          <el-select v-model="data.options.align">
-            <el-option value="top" label="顶部对齐"></el-option>
-            <el-option value="middle" label="居中"></el-option>
-            <el-option value="bottom" label="底部对齐"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-
-      <template v-if="data.type == 'tabs'">
-        <el-form-item label="标签对齐方式">
-          <el-radio-group v-model="data.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="data.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="data.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="data.options.remote">
-            <el-select
-              class="remoteApis"
-              size="mini"
-              v-model="data.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="data.options.props.value">
-              <template slot="prepend">
-                <div style="width:30px;">值</div>
-              </template>
-            </el-input>
-            <el-input size="mini" style="" v-model="data.options.props.label">
-              <template slot="prepend">
-                <div style="width:30px;">标签</div>
-              </template>
-            </el-input>
-          </div>
-          <template v-else>
-            <el-radio-group v-model="data.options.defaultValue">
-              <draggable
-                tag="ul"
-                :list="data.tabs"
-                v-bind="{
-                  group: { name: 'tabs' },
-                  ghostClass: 'ghost',
-                  handle: '.drag-item'
-                }"
-                handle=".drag-item"
-              >
-                <li v-for="(item, index) in data.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>
-      </template>
-
-      <template v-if="data.type != 'grid'">
-        <el-form-item label="带入icon" v-if="data.type == 'input'">
-          <el-input
-            v-if="Object.keys(data.options).indexOf('prefixIcon') >= 0"
-            placeholder="请输入icon类名"
-            v-model="data.options.prefixIcon"
-          >
-            <template slot="prepend">
-              <div style="width:50px;">prefixIcon</div>
-            </template>
-          </el-input>
-          <el-input
-            v-if="Object.keys(data.options).indexOf('suffixIcon') >= 0"
-            placeholder="请输入icon类名"
-            v-model="data.options.suffixIcon"
-          >
-            <template slot="prepend">
-              <div style="width:50px;">suffixIcon</div>
-            </template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item
-          label="组件插槽"
-          v-if="data.type === 'input' || data.type === 'cascader'"
-        >
-          <el-input
-            v-if="Object.keys(data.options).indexOf('prepend') >= 0"
-            placeholder="请输入内容或HTML"
-            v-model="data.options.prepend"
-          >
-            <template slot="prepend">
-              <div style="width:50px;">prepend</div>
-            </template>
-          </el-input>
-          <el-input
-            v-if="Object.keys(data.options).indexOf('append') >= 0"
-            placeholder="请输入内容或HTML"
-            v-model="data.options.append"
-          >
-            <template slot="prepend">
-              <div style="width:50px;">append</div>
-            </template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item label="远端数据" v-if="data.type == 'cascader'">
-          <div>
-            <!-- <el-input size="mini" style="" v-model="data.options.remoteFunc">
-              <template slot="prepend">远端方法</template>
-            </el-input> -->
-            <el-select
-              class="remoteApis"
-              size="mini"
-              v-model="data.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="data.options.props.value">
-              <template slot="prepend">值</template>
-            </el-input>
-            <el-input size="mini" style="" v-model="data.options.props.label">
-              <template slot="prepend">标签</template>
-            </el-input>
-            <el-input
-              size="mini"
-              style=""
-              v-model="data.options.props.children"
-            >
-              <template slot="prepend">子选项</template>
-            </el-input>
-          </div>
-        </el-form-item>
-
-        <el-form-item
-          label="文字描述"
-          v-if="data.type === 'switch'"
-          :inline="true"
-        >
-          <div
-            v-if="Object.keys(data.options).indexOf('switchInactiveText') >= 0"
-          >
-            <span class="el-form-item__label">inactiveText：</span>
-            <el-input
-              v-model="data.options.switchInactiveText"
-              placeholder="请输入内容"
-            >
-            </el-input>
-          </div>
-          <div
-            v-if="Object.keys(data.options).indexOf('switchActiveText') >= 0"
-          >
-            <span class="el-form-item__label">activeText：</span>
-            <el-input
-              v-model="data.options.switchActiveText"
-              placeholder="请输入内容"
-            >
-            </el-input>
-          </div>
-          <div
-            v-if="Object.keys(data.options).indexOf('switchInactiveColor') >= 0"
-          >
-            <span class="el-form-item__label">inactiveColor：</span>
-            <el-input
-              v-model="data.options.switchInactiveColor"
-              placeholder="请输入色值，例如#ff4949"
-            >
-            </el-input>
-          </div>
-          <div
-            v-if="Object.keys(data.options).indexOf('switchActiveColor') >= 0"
-          >
-            <span class="el-form-item__label">activeColor：</span>
-            <el-input
-              v-model="data.options.switchActiveColor"
-              placeholder="请输入色值，例如#ff4949"
-            >
-            </el-input>
-          </div>
-        </el-form-item>
-
-        <el-form-item label="操作属性">
-          <el-checkbox
-            v-model="data.options.readonly"
-            v-if="Object.keys(data.options).indexOf('readonly') >= 0"
-            >完全只读</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.hidden"
-            v-if="Object.keys(data.options).indexOf('hidden') >= 0"
-            >隐藏
-          </el-checkbox>
-          <el-checkbox
-            v-model="data.options.hideLabel"
-            v-if="Object.keys(data.options).indexOf('hideLabel') >= 0"
-            >隐藏标签
-          </el-checkbox>
-          <el-checkbox
-            v-model="data.options.disabled"
-            v-if="Object.keys(data.options).indexOf('disabled') >= 0"
-            >禁用
-          </el-checkbox>
-          <el-checkbox
-            v-model="data.options.editable"
-            v-if="Object.keys(data.options).indexOf('editable') >= 0"
-            >文本框可输入</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.showPassword"
-            v-if="Object.keys(data.options).indexOf('showPassword') >= 0"
-            >显示切换密码图标</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.arrowControl"
-            v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
-            >使用箭头进行时间选择</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.isAdd"
-            v-if="Object.keys(data.options).indexOf('isAdd') >= 0"
-            >可新增</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.isDelete"
-            v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
-            >可删除</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.isEdit"
-            v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
-            >编辑</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.isSerial"
-            v-if="Object.keys(data.options).indexOf('isSerial') >= 0"
-            >显示序号</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.border"
-            v-if="Object.keys(data.options).indexOf('border') >= 0"
-            >显示边框</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.buttonType"
-            v-if="Object.keys(data.options).indexOf('buttonType') >= 0"
-            >按钮样式</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.showTooltip"
-            v-if="
-              data.type === 'slider' &&
-                Object.keys(data.options).indexOf('showTooltip') >= 0
-            "
-            >显示showTooltip</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.vertical"
-            v-if="
-              data.type === 'slider' &&
-                Object.keys(data.options).indexOf('vertical') >= 0
-            "
-            >竖向模式</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.showAllLevels"
-            v-if="
-              data.type === 'cascader' &&
-                Object.keys(data.options).indexOf('showAllLevels') >= 0
-            "
-            >仅显示最后一级</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.props.multiple"
-            v-if="data.type === 'cascader'"
-            >是否多选</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.props.checkStrictly"
-            v-if="['cascader'].includes(data.type)"
-            >选择任意一级选项</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.collapseTags"
-            v-if="['select', 'cascader'].includes(data.type)"
-            >是否折叠展示Tag</el-checkbox
-          >
-          <el-checkbox
-            v-model="data.options.clearable"
-            v-if="Object.keys(data.options).indexOf('clearable') >= 0"
-            >显示清除按钮</el-checkbox
-          >
-        </el-form-item>
-
-        <el-form-item label="校验">
-          <div v-if="Object.keys(data.options).indexOf('required') >= 0">
-            <el-checkbox v-model="data.options.required">必填</el-checkbox>
-          </div>
-          <el-select
-            v-if="Object.keys(data.options).indexOf('dataType') >= 0"
-            v-model="data.options.dataType"
-            size="mini"
-          >
-            <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>
-
-          <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
-            <el-input
-              size="mini"
-              class="config-pattern-input"
-              v-model.lazy="data.options.pattern"
-              style=" width: 240px;"
-              placeholder="填写正则表达式"
-            >
-              <template slot="prepend">/</template>
-              <template slot="append">/</template>
-            </el-input>
-          </div>
-        </el-form-item>
-      </template>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import Draggable from "vuedraggable";
-
-export default {
-  components: {
-    Draggable
-  },
-  props: ["data", "remoteApis"],
-  data() {
-    return {
-      validator: {
-        type: null,
-        required: null,
-        pattern: null,
-        range: null,
-        length: null
-      }
-    };
-  },
-  computed: {
-    show() {
-      if (this.data && Object.keys(this.data).length > 0) {
-        return true;
-      }
-      return false;
-    }
-  },
-  methods: {
-    handleOptionsRemove(index) {
-      if (this.data.type === "grid") {
-        this.data.columns.splice(index, 1);
-      } else if (this.data.type === "rate") {
-        this.data.options.auxiliaryValue.splice(index, 1);
-      } else if (this.data.type === "tabs") {
-        this.data.tabs.splice(index, 1);
-      } else {
-        this.data.options.options.splice(index, 1);
-      }
-    },
-    handleAddOption() {
-      if (this.data.type === "grid") {
-        this.data.columns.push({
-          span: "",
-          list: []
-        });
-        return;
-      }
-      if (this.data.type === "tabs") {
-        this.data.tabs.push({
-          label: `选项${this.data.tabs.length + 1}`,
-          value: `tab_${this.data.tabs.length + 1}`,
-          list: []
-        });
-        return;
-      }
-      if (this.data.type === "rate") {
-        this.data.options.auxiliaryValue.push("新选项");
-        return;
-      }
-
-      if (this.data.options.showLabel) {
-        this.data.options.options.push({
-          value: "新选项",
-          label: "新选项"
-        });
-        return;
-      }
-
-      this.data.options.options.push({
-        value: "新选项"
-      });
-    },
-    generateRule() {
-      this.data.rules = [];
-      Object.keys(this.validator).forEach(key => {
-        if (this.validator[key]) {
-          this.data.rules.push(this.validator[key]);
-        }
-      });
-    },
-    handleSelectMuliple(value) {
-      if (value) {
-        if (this.data.options.defaultValue) {
-          this.data.options.defaultValue = [this.data.options.defaultValue];
-        } else {
-          this.data.options.defaultValue = [];
-        }
-      } else {
-        if (this.data.options.defaultValue.length > 0) {
-          this.data.options.defaultValue = this.data.options.defaultValue[0];
-        } else {
-          this.data.options.defaultValue = "";
-        }
-      }
-    },
-
-    validateRequired(val) {
-      if (val) {
-        this.validator.required = {
-          required: true,
-          message: `${this.data.name}必须填写`
-        };
-      } else {
-        this.validator.required = null;
-      }
-
-      this.$nextTick(() => {
-        this.generateRule();
-      });
-    },
-
-    validateDataType(val) {
-      if (!this.show) {
-        return false;
-      }
-
-      if (val) {
-        this.validator.type = {
-          type: val,
-          message: this.data.name + "格式不正确"
-        };
-      } else {
-        this.validator.type = null;
-      }
-
-      this.generateRule();
-    },
-    valiatePattern(val) {
-      if (!this.show) {
-        return false;
-      }
-
-      if (val) {
-        this.validator.pattern = {
-          pattern: val,
-          message: this.data.name + "格式不匹配"
-        };
-      } else {
-        this.validator.pattern = null;
-      }
-
-      this.generateRule();
-    },
-    handleInputNumberChange() {
-      if (this.data.options.minRows > this.data.options.maxRows) {
-        this.data.options.maxRows = this.data.options.minRows;
-      }
-    },
-    handleImguploadType(val) {
-      if (val == "picture-card") {
-        this.data.options.drag = false;
-      }
-    },
-    handleImguploadDrag(val) {
-      if (val) {
-        this.data.options.listType = "default";
-      }
-    }
-  },
-  watch: {
-    "data.options.isRange": function(val) {
-      if (typeof val !== "undefined") {
-        if (val) {
-          this.data.options.defaultValue = null;
-        } else {
-          if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
-            this.data.options.defaultValue = "";
-        }
-      }
-    },
-    "data.options.required": function(val) {
-      this.validateRequired(val);
-    },
-    "data.options.dataType": function(val) {
-      this.validateDataType(val);
-    },
-    "data.options.pattern": function(val) {
-      this.valiatePattern(val);
-    },
-    "data.name": function(val) {
-      if (this.data.options) {
-        this.validateRequired(this.data.options.required);
-        this.validateDataType(this.data.options.dataType);
-        this.valiatePattern(this.data.options.pattern);
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.remoteApis {
-  width: 100%;
-  margin-bottom: 6px;
-  /deep/ .el-input--prefix .el-input__inner {
-    padding-left: 85px;
-  }
-  /deep/ .el-input__prefix {
-    left: 0;
-    width: 75px;
-    color: #999;
-  }
-}
-</style>