feat(Input,Form): 单行文本组件新增前缀后缀配置项,表单设置新增表单名,表单使用位置,表单尺寸配置项

src/component/form-designer/src/FormConfig.vue

@@ -6,10 +6,29 @@
 -->
 <template>
   <div class="form-config-container">
-    <el-form label-position="top">
-      <el-form-item label="是否使用表格布局">
-        <el-switch v-model="data.isTableClass"
-                   @change="isTableClass"></el-switch>
+    <el-form size="mini" label-position="top">
+      <el-form-item label="表单名称">
+        <el-input v-model="data.name"
+                  placeholder="表单名称"></el-input>
+      </el-form-item>
+      <el-form-item label="使用位置">
+        <el-input v-model="data.position"
+                  placeholder="表单使用位置"></el-input>
+      </el-form-item>
+      <el-form-item label="表单尺寸">
+        <el-radio-group @change="isTableClass"
+                        v-model="data.size">
+          <el-radio-button label="medium">中等</el-radio-button>
+          <el-radio-button label="small">较小</el-radio-button>
+          <el-radio-button label="mini">迷你</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="布局方式">
+        <el-radio-group @change="isTableClass"
+                        v-model="data.isTableClass">
+          <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="标签对齐方式">
         <el-radio-group v-model="data.labelPosition">
@@ -29,9 +48,7 @@
 </template>
 
 <script lang="ts">
-import {
-  Component, Vue, Prop,
-} from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 @Component
 export default class FormConfig extends Vue {
@@ -44,7 +61,6 @@ export default class FormConfig extends Vue {
   isTableClass() {
     if (this.data.isTableClass) {
       this.data.labelPosition = 'right';
-      this.data.labelWidth = 110;
     }
   }
 }

src/component/form-designer/src/FormDesigner.vue

@@ -58,27 +58,13 @@
         <!-- 中间区域顶部按钮栏 -->
         <el-header class="btn-bar" style="height: 60px;">
           <el-row :gutter="15">
-            <!-- 对话框内动态表单 -->
-            <el-col :span="12">
-              <el-form size="small" :inline="true" :model="formValues" class="inline-form">
-                <el-form-item label="表单名">
-                  <el-select  v-if="allTables" filterable allow-create v-model="formValues.tableName" placeholder="名称">
-                    <el-option v-for="(item, index) in allTables" :label="item.label" :value="item.value" :key="index"></el-option>
-                  </el-select>
-                  <el-input v-else v-model="formValues.tableName" placeholder="请输入表单名称"></el-input>
-                </el-form-item>
-                <el-form-item>
-                  <el-input v-model="formValues.position" placeholder="使用位置"></el-input>
-                </el-form-item>
-              </el-form>
-            </el-col>
-            <el-col :span="12" style="text-align:right;margin-top:5px">
-              <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview">预览</el-button>
-              <el-button type="text" size="small" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
-              <el-button type="text" size="small" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
-              <el-button type="text" size="small" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
-              <el-button type="text" size="small" icon="el-icon-delete" @click="handleClear">清空</el-button>
-              <el-button type="text" size="small" icon="el-icon-form" :disabled="!(allTables && getFormKey)" @click="formVisible = true">自动绑定</el-button>
+            <el-col :span="24" style="text-align:right;margin-top:5px">
+              <el-button type="primary" size="small" icon="el-icon-view" @click="handlePreview">预览</el-button>
+              <el-button type="primary" size="small" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
+              <el-button type="primary" size="small" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
+              <el-button type="primary" size="small" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
+              <el-button type="danger" size="small" icon="el-icon-delete" @click="handleClear">清空</el-button>
+              <el-button type="normal" size="small" icon="el-icon-form" :disabled="!(allTables && getFormKey)" @click="formVisible = true">自动绑定</el-button>
               <slot name="custom-btn"></slot>
             </el-col>
           </el-row>

src/component/form-designer/src/GenerateForm.vue

@@ -16,12 +16,11 @@
         <FormDesigner ref="formDesigner" />
       </div> -->
       <el-form ref="generateForm"
-              status-icon
              :class='{"table-form":data.config && data.config.isTableClass}'
              :model="models"
              :label-position="data.config && data.config.labelPosition"
              :label-width="data.config && data.config.labelWidth?data.config.labelWidth+ 'px':'140px'"
-             size="small">
+             :size="data.config.size">
       <!-- 遍历从父组件传入的data，data下有list和config两个属性，list下的每个对象是表示一行组件的集合 -->
       <template v-for="item in this.data.list">
         <!-- 如果这一行时网格grid布局 -->

src/component/form-designer/src/GenerateFormItem.vue

@@ -33,22 +33,31 @@
       <el-divider :content-position="widget.options.align">{{widget.name}}</el-divider>
     </template>
     <template v-if="widget.type == 'input'">
-      <el-input v-if="widget.options.dataType == 'number'
-                      || widget.options.dataType == 'integer'
-                      || widget.options.dataType == 'float'"
+      <el-input v-if="['number','integer','float'].includes(widget.options.dataType)"
                 :type="widget.options.dataType"
                 v-model.number="dataModel"
                 :placeholder="widget.options.placeholder"
                 :readonly="readOnly || widget.options.readonly"
                 :disabled="readOnly || widget.options.disabled"
                 :style="{width: widget.options.width}"></el-input>
       <el-input v-else
-                :type="widget.options.dataType"
+                type="text"
                 v-model="dataModel"
+                :show-word-limit="widget.options.showWordLimit"
+                :maxlength="widget.options.maxLength"
                 :placeholder="widget.options.placeholder"
                 :readonly="readOnly || widget.options.readonly"
                 :disabled="readOnly || widget.options.disabled"
-                :style="{width: widget.options.width}"></el-input>
+                :style="{width: widget.options.width}"
+                :suffix-icon="widget.options.suffix"
+                :prefix-icon="widget.options.prefix">
+                  <span slot="prepend" v-if="widget.options.prepend">
+                    {{widget.options.prepend}}
+                  </span>
+                  <span slot="append" v-if="widget.options.append">
+                    {{widget.options.append}}
+                  </span>
+      </el-input>
     </template>
     <template v-if="widget.type == 'button'">
       <el-button type="primary"
@@ -98,6 +107,8 @@
       <el-input type="textarea"
                 :autosize="{ minRows: 5}"
                 v-model="dataModel"
+                :show-word-limit="widget.options.showWordLimit"
+                :maxlength="widget.options.maxLength"
                 :disabled="readOnly || widget.options.disabled"
                 :readonly="readOnly || widget.options.readonly"
                 :placeholder="widget.options.placeholder"

src/component/form-designer/src/WidgetConfig.vue

@@ -291,7 +291,30 @@
         <el-switch v-if="elementConfig.type=='switch' || elementConfig.type == 'date'"
                    v-model="elementConfig.options.defaultValue"></el-switch>
       </el-form-item>
-
+      <el-form-item label="最多输入"
+                    v-if="elementConfig.options.maxLength !== undefined">
+        <el-input v-model="elementConfig.options.maxLength" placeholder="请输入最大长度">
+              <span slot="append">个字符</span>
+        </el-input>
+      </el-form-item>
+      <template v-if="elementConfig.type == 'input'">
+         <el-form-item label="前图标">
+        <el-input v-model="elementConfig.options.prefix" placeholder="请输入图标名(例如el-icon-message)">
+        </el-input>
+        </el-form-item>
+        <el-form-item label="后图标">
+          <el-input v-model="elementConfig.options.suffix" placeholder="请输入图标名(例如el-icon-message)">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="前缀">
+          <el-input v-model="elementConfig.options.prepend" placeholder="请输入前缀">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="后缀">
+          <el-input v-model="elementConfig.options.append" placeholder="请输入后缀">
+          </el-input>
+        </el-form-item>
+      </template>
       <template v-if="elementConfig.type == 'time' || elementConfig.type == 'date'">
         <el-form-item label="显示类型"
                       v-if="elementConfig.type == 'date'">
@@ -383,8 +406,8 @@
 
       <template v-if="elementConfig.type == 'grid'">
         <el-form-item label="栅格间隔">
-          <el-input size="mini" type="number"
-                    v-model.number="elementConfig.options.gutter"></el-input>
+          <el-input-number size="mini" :min="0" :max="50" :step="5"
+                    v-model="elementConfig.options.gutter"></el-input-number>
         </el-form-item>
         <el-form-item label="列配置项">
           <Draggable tag="ul"
@@ -454,6 +477,8 @@
                        v-if="Object.keys(elementConfig.options).indexOf('disabled')>=0">禁用 </el-checkbox>
           <el-checkbox v-model="elementConfig.options.editable"
                        v-if="Object.keys(elementConfig.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
+          <el-checkbox v-model="elementConfig.options.showWordLimit"
+                       v-if="Object.keys(elementConfig.options).indexOf('showWordLimit')>=0">输入统计</el-checkbox>
           <el-checkbox v-model="elementConfig.options.clearable"
                        v-if="Object.keys(elementConfig.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
           <el-checkbox v-model="elementConfig.options.arrowControl"

src/component/form-designer/src/WidgetForm.vue

@@ -8,6 +8,7 @@
       :label-width="
         data.config.labelWidth ? data.config.labelWidth + 'px' : '140px'
       "
+      :size="data.config.size"
     >
       <draggable
         v-model="data.list"

src/component/form-designer/src/WidgetFormItem.vue

@@ -15,8 +15,19 @@
     </template>
     <template v-if="element.type === 'input'">
       <el-input v-model="element.options.defaultValue"
+                :show-word-limit="element.options.showWordLimit"
+                :maxlength="element.options.maxLength"
                 :style="{width: element.options.width}"
-                :placeholder="element.options.placeholder"></el-input>
+                :placeholder="element.options.placeholder"
+                :suffix-icon="element.options.suffix"
+                :prefix-icon="element.options.prefix">
+                  <span slot="prepend" v-if="element.options.prepend">
+                    {{element.options.prepend}}
+                  </span>
+                  <span slot="append" v-if="element.options.append">
+                    {{element.options.append}}
+                  </span>
+      </el-input>
     </template>
      <template v-if="element.type === 'text'">
         <h3 style="
@@ -43,6 +54,8 @@
     <template v-if="element.type === 'textarea'">
       <el-input type="textarea"
                 :rows="5"
+                :maxlength="element.options.maxLength"
+                :show-word-limit="element.options.showWordLimit"
                 v-model="element.options.defaultValue"
                 :style="{width: element.options.width}"
                 :placeholder="element.options.placeholder"></el-input>

src/component/form-designer/src/componentsConfig.ts

@@ -10,9 +10,11 @@ export const basicComponents = [
       defaultValue: '',
       readonly: false,
       disabled: false,
+      showWordLimit: false,
       required: false,
       dataType: 'string',
       pattern: '',
+      maxLength: '',
       placeholder: '',
       hiddenLabel: false,
     },
@@ -28,7 +30,9 @@ export const basicComponents = [
       defaultValue: '',
       readonly: false,
       disabled: false,
+      showWordLimit: false,
       required: false,
+      maxLength: '',
       pattern: '',
       placeholder: '',
       hiddenLabel: false,