feat: 新增隐藏标签配置项

BoBoooooo · Dec 31, 2020 · 02e20df · 02e20df
1 parent e28d7e8
commit 02e20df
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/packages/form-designer/src/CusDialog.vue b/packages/form-designer/src/CusDialog.vue
@@ -2,7 +2,6 @@
   <el-dialog class="cus-dialog-container"
              :title="title"
              :visible.sync="dialogVisible"
-             :close-on-click-modal="false"
              :width="width"
              ref="elDialog"
              :id="id"

diff --git a/packages/form-designer/src/GenerateFormItem.vue b/packages/form-designer/src/GenerateFormItem.vue
@@ -9,19 +9,21 @@
 -->
 <template>
   <el-form-item :prop="widget.type == 'button'?undefined:widget.model"
-                :label-width="labelWidth">
+                :label-width="widget.options.hiddenLabel ? '0' : labelWidth">
     <template #label>
-      <span v-html="label"></span>
-      <el-popover placement="top-start"
-                  title="输入提示"
-                  v-if="widget.options.tips"
-                  width="200"
-                  trigger="hover">
-        <i class="el-icon el-icon-question"
-           slot="reference"></i>
-        <div style="color:#8492a6"
-             v-html="widget.options.tips"></div>
-      </el-popover>
+      <template v-if="widget.options.hiddenLabel ? '' : label">
+        <span v-html="label"></span>
+        <el-popover placement="top-start"
+                    title="输入提示"
+                    v-if="widget.options.tips"
+                    width="200"
+                    trigger="hover">
+          <i class="el-icon el-icon-question"
+            slot="reference"></i>
+          <div style="color:#8492a6"
+              v-html="widget.options.tips"></div>
+        </el-popover>
+      </template>
     </template>
     <template v-if="widget.type == 'input'">
       <el-input v-if="widget.options.dataType == 'number'

diff --git a/packages/form-designer/src/WidgetConfig.vue b/packages/form-designer/src/WidgetConfig.vue
@@ -26,9 +26,16 @@
                     v-if="Object.keys(data.options).indexOf('btnCommand')>=0">
         <el-input v-model="data.options.btnCommand"></el-input>
       </el-form-item>
-      <el-form-item label="label宽度" v-if="data.labelWidth">
-        <el-input v-model="data.labelWidth"
-                  placeholder="label宽度"></el-input>
+      <el-form-item label="标签宽度">
+         <el-input-number v-model="data.labelWidth"
+                         :min="100"
+                         :max="180"
+                         :step="10"
+                        :disabled="data.options.hiddenLabel"
+                        placeholder="自定义标签宽度"></el-input-number>
+      </el-form-item>
+      <el-form-item label="隐藏标签">
+        <el-switch v-model="data.options.hiddenLabel"></el-switch>
       </el-form-item>
       <el-form-item label="组件宽度"
                     v-if="Object.keys(data.options).indexOf('width')>=0">

diff --git a/packages/form-designer/src/WidgetFormItem.vue b/packages/form-designer/src/WidgetFormItem.vue
@@ -5,12 +5,13 @@
                   active: selectWidget.key == element.key,
                   'is_req': element.options.required
                   }"
-                :label="label"
-                :label-width="labelWidth"
+                :label-width="element.options.hiddenLabel ? '0' : labelWidth"
                 @click.native.stop="handleSelectWidget(index)">
     <template #label>
+      <template v-if="element.options.hiddenLabel ? '' : label">
         <span v-html="label"></span>
-       <i v-if="element.options.tips" class="el-icon el-icon-question"></i>
+        <i v-if="element.options.tips" class="el-icon el-icon-question"></i>
+      </template>
     </template>
     <template v-if="element.type == 'input'">
       <el-input v-model="element.options.defaultValue"

diff --git a/packages/form-designer/src/componentsConfig.ts b/packages/form-designer/src/componentsConfig.ts
@@ -8,6 +8,7 @@ export const basicComponents = [
     options: {
       text: '确认',
       btnCommand: 'btnCallback',
+      hiddenLabel: false,
     },
   },
   {
@@ -19,6 +20,7 @@ export const basicComponents = [
       remoteFunc: '',
       align: 'center',
       fontSize: '16px',
+      hiddenLabel: false,
     },
   },
   {
@@ -36,6 +38,7 @@ export const basicComponents = [
       dataType: 'string',
       pattern: '',
       placeholder: '',
+      hiddenLabel: false,
     },
   },
   {
@@ -52,6 +55,7 @@ export const basicComponents = [
       required: false,
       pattern: '',
       placeholder: '',
+      hiddenLabel: false,
     },
   },
   {
@@ -69,6 +73,7 @@ export const basicComponents = [
       step: 1,
       disabled: false,
       controlsPosition: '',
+      hiddenLabel: false,
     },
   },
   {
@@ -81,6 +86,7 @@ export const basicComponents = [
       inline: true,
       defaultValue: '',
       showLabel: false,
+      hiddenLabel: false,
       options: [
         {
           value: '选项1',
@@ -122,6 +128,7 @@ export const basicComponents = [
       disabled: false,
       min: null,
       max: null,
+      hiddenLabel: false,
       options: [
         {
           value: '选项1',
@@ -151,6 +158,7 @@ export const basicComponents = [
     hidden: false,
     icon: 'regular/calendar-alt',
     options: {
+      hiddenLabel: false,
       defaultValue: false,
       readonly: false,
       disabled: false,
@@ -173,6 +181,7 @@ export const basicComponents = [
     hidden: false,
     icon: 'clock',
     options: {
+      hiddenLabel: false,
       defaultValue: '',
       readonly: false,
       disabled: false,
@@ -195,6 +204,7 @@ export const basicComponents = [
     labelWidth: '',
     hidden: false,
     options: {
+      hiddenLabel: false,
       defaultValue: null,
       max: 5,
       disabled: false,
@@ -209,6 +219,7 @@ export const basicComponents = [
     labelWidth: '',
     hidden: false,
     options: {
+      hiddenLabel: false,
       defaultValue: '',
       disabled: false,
       showAlpha: false,
@@ -222,6 +233,7 @@ export const basicComponents = [
     hidden: false,
     icon: 'regular/caret-square-down',
     options: {
+      hiddenLabel: false,
       defaultValue: '',
       multiple: false,
       disabled: false,
@@ -257,6 +269,7 @@ export const basicComponents = [
     hidden: false,
     icon: 'toggle-off',
     options: {
+      hiddenLabel: false,
       defaultValue: false,
       required: false,
       disabled: false,
@@ -269,6 +282,7 @@ export const basicComponents = [
     labelWidth: '',
     hidden: false,
     options: {
+      hiddenLabel: false,
       defaultValue: 0,
       disabled: false,
       required: false,