feat: form-helper

fast-crud · Jul 15, 2021 · dc749ae · dc749ae
1 parent 4b36a6b
commit dc749ae
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 26 deletions.
diff --git a/packages/fast-admin/fs-admin-antdv b/packages/fast-admin/fs-admin-antdv
diff --git a/packages/fast-crud/src/components/crud/fs-form-helper.vue b/packages/fast-crud/src/components/crud/fs-form-helper.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="fs-form-helper">
+    <template v-if="typeof helper === 'string'">{{ helper }}</template>
+    <template v-else-if="helper.render">
+      <fs-render :render-func="helper.render" :scope="scope" />
+    </template>
+    <template v-else-if="helper.text">
+      {{ helper.text }}
+    </template>
+  </div>
+</template>
+<script>
+import FsRender from "../render/fs-render.jsx";
+/**
+ * form-item组件封装
+ */
+export default {
+  name: "FsFormHelper",
+  components: { FsRender },
+  props: {
+    helper: {},
+    scope: {}
+  }
+};
+</script>
diff --git a/packages/fast-crud/src/components/crud/fs-form-item.vue b/packages/fast-crud/src/components/crud/fs-form-item.vue
@@ -1,11 +1,19 @@
 <template>
-  <component
-    :is="$fsui.formItem.name"
-    class="fs-form-item"
-    :[$fsui.formItem.label]="item.title"
-    :[$fsui.formItem.prop]="item.key"
-    v-bind="item"
-  >
+  <component :is="$fsui.formItem.name" class="fs-form-item" :[$fsui.formItem.prop]="item.key" v-bind="item">
+    <template #label>
+      {{ item.label || item.title }}
+
+      <component
+        :is="$fsui.tooltip.name"
+        v-if="item.helper && computedHelperPosition === 'label'"
+        v-bind="computedHelperTooltip"
+      >
+        <template #[$fsui.tooltip.content]>
+          <fs-form-helper :helper="item.helper" :scope="buildItemScope(item)" />
+        </template>
+        <fs-icon class="fs-form-item-label-icon" :icon="$fsui.icons.question"></fs-icon>
+      </component>
+    </template>
     <fs-slot-render v-if="formSlot" :slots="formSlot" :scope="buildItemScope(item)" />
     <template v-else-if="item.component?.show !== false">
       <fs-render v-if="item.component?.render" :render-func="item.component.render" :scope="buildItemScope(item)" />
@@ -18,27 +26,22 @@
         @update:modelValue="updateModelValue"
       />
     </template>
-    <template v-if="item.helper">
-      <div class="fs-form-helper">
-        <template v-if="typeof item.helper === 'string'">{{ item.helper }}</template>
-        <template v-else-if="item.helper.render">
-          <fs-render :render-func="item.helper.render" :scope="buildItemScope(item)" />
-        </template>
-      </div>
+    <template v-if="item.helper && computedHelperPosition !== 'label'">
+      <fs-form-helper :helper="item.helper" :scope="buildItemScope(item)" />
     </template>
   </component>
 </template>
 <script>
-import traceUtil from "../../utils/util.trace";
 import FsRender from "../render/fs-render";
-import { ref } from "vue";
-
+import { ref, computed } from "vue";
+import FsFormHelper from "./fs-form-helper.vue";
+import _ from "lodash-es";
 /**
  * form-item组件封装
  */
 export default {
   name: "FsFormItem",
-  components: { FsRender },
+  components: { FsFormHelper, FsRender },
   props: {
     /**
      * 表单字段值(v-model)
@@ -64,11 +67,16 @@ export default {
     getContextFn: {
       type: Function,
       default: undefined
+    },
+    /**
+     * helper配置
+     */
+    helper: {
+      type: Object
     }
   },
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    traceUtil.trace("fs-from-item");
     const componentRenderRef = ref();
     function buildItemScope(item) {
       const scope = props.getContextFn();
@@ -81,14 +89,29 @@ export default {
     function getComponentRef() {
       return componentRenderRef.value?.getTargetRef();
     }
+
+    const computedHelperPosition = computed(() => {
+      return props.item?.helper?.position || props.helper?.position;
+    });
+    const computedHelperTooltip = computed(() => {
+      return _.merge({}, props.item.helper?.tooltip, props.helper?.tooltip);
+    });
     return {
       updateModelValue,
       buildItemScope,
       getComponentRef,
-      componentRenderRef
+      componentRenderRef,
+      computedHelperPosition,
+      computedHelperTooltip
     };
   }
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.fs-form-item {
+  .fs-form-item-label-icon {
+    margin: 0 2px;
+  }
+}
+</style>
diff --git a/packages/fast-crud/src/components/crud/fs-form.vue b/packages/fast-crud/src/components/crud/fs-form.vue
@@ -24,6 +24,7 @@
               }
             "
             :item="item"
+            :helper="helper"
             :model-value="get(form, item.key)"
             :form-slot="slots['form_' + item.key]"
             :get-context-fn="getContextFn"
@@ -191,6 +192,12 @@ export default {
     col: {
       type: Object,
       default: undefined
+    },
+    /**
+     * helper位置：{position:'label'}
+     */
+    helper: {
+      type: Object
     }
   },
   emits: ["reset", "submit", "validationError", "value-change"],

diff --git a/packages/ui/ui-antdv/src/antdv.ts b/packages/ui/ui-antdv/src/antdv.ts
@@ -42,6 +42,7 @@ import {
   ButtonCI,
   PaginationCI
 } from "@fast-crud/ui-interface";
+import { TooltipCI } from "../../ui-interface/src/ui-interface";
 export class Antdv implements UiInterface {
   constructor(target) {
     this.notification.get = target.Notification;
@@ -182,7 +183,8 @@ export class Antdv implements UiInterface {
     refreshRight: "RedoOutlined",
     upload: "UploadOutlined",
     fullScreen: "CompressOutlined",
-    unFullScreen: "ExpandOutlined"
+    unFullScreen: "ExpandOutlined",
+    question: "QuestionCircleOutlined"
   };
 
   dialog: DialogCI = {
@@ -486,4 +488,8 @@ export class Antdv implements UiInterface {
   collapseItem: CollapseItemCI = {
     name: "a-collapse-panel"
   };
+  tooltip: TooltipCI = {
+    name: "a-tooltip",
+    content: "title"
+  };
 }
diff --git a/packages/ui/ui-antdv/src/icons.js b/packages/ui/ui-antdv/src/icons.js
@@ -26,7 +26,8 @@ import {
   UndoOutlined,
   RedoOutlined,
   LikeOutlined,
-  DownOutlined
+  DownOutlined,
+  QuestionCircleOutlined
 } from "@ant-design/icons-vue";
 
 const icons = {
@@ -57,7 +58,8 @@ const icons = {
   UndoOutlined,
   RedoOutlined,
   LikeOutlined,
-  DownOutlined
+  DownOutlined,
+  QuestionCircleOutlined
 };
 export default function(app) {
   for (let key in icons) {

diff --git a/packages/ui/ui-element/src/element.ts b/packages/ui/ui-element/src/element.ts
@@ -42,6 +42,7 @@ import {
   ButtonCI,
   PaginationCI
 } from "@fast-crud/ui-interface";
+import { TooltipCI } from "../../ui-interface/src/ui-interface";
 export class Element implements UiInterface {
   constructor(target) {
     if (target) {
@@ -155,7 +156,8 @@ export class Element implements UiInterface {
     refreshRight: "el-icon-refresh-right",
     upload: "el-icon-upload",
     fullScreen: "el-icon-full-screen",
-    unFullScreen: "el-icon-full-screen"
+    unFullScreen: "el-icon-full-screen",
+    question: "el-icon-question"
   };
 
   dialog: DialogCI = {
@@ -422,4 +424,8 @@ export class Element implements UiInterface {
   collapseItem: CollapseItemCI = {
     name: "el-collapse-item"
   };
+  tooltip: TooltipCI = {
+    name: "el-tooltip",
+    content: "content"
+  };
 }
diff --git a/packages/ui/ui-interface/src/ui-interface.ts b/packages/ui/ui-interface/src/ui-interface.ts
@@ -125,6 +125,10 @@ export interface FormItemCI extends CI {
   label: string;
 }
 
+export interface TooltipCI extends CI {
+  content: string;
+}
+
 export interface TagCI extends CI {
   type: string;
   colors: Array<string>;
@@ -204,6 +208,7 @@ export interface Icons {
   upload;
   fullScreen;
   unFullScreen;
+  question;
 }
 export interface UiInterface {
   modelValue: string;
@@ -220,6 +225,7 @@ export interface UiInterface {
   button: ButtonCI;
   form: CI;
   formItem: FormItemCI;
+  tooltip: TooltipCI;
   radioGroup: RadioGroupCI;
   radio: RadioCI;
   checkboxGroup: CheckboxGroupCI;