From 18b8bc1b77d6e9718a77a410f35950cfb78ad709 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Wed, 13 Jan 2021 16:29:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(Input,Form):=20=E5=8D=95=E8=A1=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=89=8D=E7=BC=80?=
 =?UTF-8?q?=E5=90=8E=E7=BC=80=E9=85=8D=E7=BD=AE=E9=A1=B9,=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E8=AE=BE=E7=BD=AE=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=90=8D,=E8=A1=A8=E5=8D=95=E4=BD=BF=E7=94=A8=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE,=E8=A1=A8=E5=8D=95=E5=B0=BA=E5=AF=B8=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form-designer/src/FormConfig.vue          | 32 ++++++++++++++-----
 .../form-designer/src/FormDesigner.vue        | 28 ++++------------
 .../form-designer/src/GenerateForm.vue        |  3 +-
 .../form-designer/src/GenerateFormItem.vue    | 21 +++++++++---
 .../form-designer/src/WidgetConfig.vue        | 31 ++++++++++++++++--
 .../form-designer/src/WidgetForm.vue          |  1 +
 .../form-designer/src/WidgetFormItem.vue      | 15 ++++++++-
 .../form-designer/src/componentsConfig.ts     |  4 +++
 8 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/src/component/form-designer/src/FormConfig.vue b/src/component/form-designer/src/FormConfig.vue
index 38f9662..ae9b8c2 100644
--- a/src/component/form-designer/src/FormConfig.vue
+++ b/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;
     }
   }
 }
diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
index 9d808a8..daec339 100644
--- a/src/component/form-designer/src/FormDesigner.vue
+++ b/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>
diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
index 805ea46..f709edb 100644
--- a/src/component/form-designer/src/GenerateForm.vue
+++ b/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布局 -->
diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
index c414b41..ce822d4 100644
--- a/src/component/form-designer/src/GenerateFormItem.vue
+++ b/src/component/form-designer/src/GenerateFormItem.vue
@@ -33,9 +33,7 @@
       <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"
@@ -43,12 +41,23 @@
                 :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"
diff --git a/src/component/form-designer/src/WidgetConfig.vue b/src/component/form-designer/src/WidgetConfig.vue
index 7eee89c..8413924 100644
--- a/src/component/form-designer/src/WidgetConfig.vue
+++ b/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"
diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
index 96401d2..3bbecdd 100644
--- a/src/component/form-designer/src/WidgetForm.vue
+++ b/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"
diff --git a/src/component/form-designer/src/WidgetFormItem.vue b/src/component/form-designer/src/WidgetFormItem.vue
index 7c59100..7b1ae0e 100644
--- a/src/component/form-designer/src/WidgetFormItem.vue
+++ b/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>
diff --git a/src/component/form-designer/src/componentsConfig.ts b/src/component/form-designer/src/componentsConfig.ts
index 495a233..7537bd5 100644
--- a/src/component/form-designer/src/componentsConfig.ts
+++ b/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,