update：更新徽标和格式化指令

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/editors/span.hbs

@@ -15,6 +15,10 @@
 {{/if}}
 {{#if item.psEditor.editorParams.valueFormat}}
   valueFormat="{{item.psEditor.editorParams.valueFormat}}"
+{{else if (item.valueFormat)}}
+  valueFormat="{{item.valueFormat}}"
+{{else if (item.psAppDEField.valueFormat)}}
+  valueFormat="{{item.psAppDEField.valueFormat}}"
 {{/if}}
 {{#if item.psEditor.precision}}
   :precision="{{item.psEditor.precision}}"

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-details-model.hbs

-    '{{formDetail.codeName}}': {
+    {{formDetail.codeName}}: {
       caption: '{{formDetail.caption}}',
       name: '{{formDetail.name}}',
       disabled: false, 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/package.json

@@ -24,7 +24,8 @@
     "rxjs": "^7.4.0",
     "vue": "^3.2.23",
     "vue-global-api": "^0.4.1",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "moment": "2.24.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.12",

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-span.vue

@@ -8,7 +8,7 @@ interface SpanProps {
    * @type {*}
    * @memberof AppSpan
    */
-  value?: string;
+  value: string;
 
   /**
    * 传入表单数据
@@ -134,7 +134,7 @@ onBeforeMount(() => {
 
 <template>
   <div :class="['app-editor-container', 'app-span', `app-span-${name}`]">
-    <span>\{{text}}</span>
+    <span v-format="textFormat">\{{text}}</span>
   </div>
 </template>
 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/utils/util.ts

@@ -97,6 +97,16 @@ export function hasFunction(arg: any, fnName: string): boolean{
   return arg[fnName] && arg[fnName] instanceof Function;
 }
 
+/**
+ * @description 字符串是否存在并且不为空
+ * @export
+ * @param {(string | undefined | null)} str
+ * @return {*}  {boolean}
+ */
+export function isExistAndNotEmpty(str: string | undefined | null): boolean {
+  return isExist(str) && !isEmpty(str);
+}
+
 /**
  * @description 获取当前数据值类型
  * @export

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/directives/badge/badge.scss

+sup.ibiz-badge {
+  position: absolute;
+  top: -0.2rem;
+  z-index: 10;
+  min-width: 0.4rem;
+  height: 0.4rem;
+  padding: 0 0.12rem;
+  font-size: 0.24rem;
+  line-height: 0.36rem;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background: #ed4014;
+  border: 1px solid transparent;
+  border-radius: 0.2rem;
+  //预设类型颜色
+  &.primary {
+    background: #2d8cf0;
+  }
+  &.success {
+    background: #19be6b;
+  }
+  &.normal {
+    color: #808695;
+    background: #e6ebf1;
+  }
+  &.error {
+    background: #ed4014;
+  }
+  &.warning {
+    background: #f90;
+  }
+  &.info {
+    background: #2db7f5;
+  }
+  //预设为标大小
+  &.small {
+    min-width: 0.32rem;
+    height: 0.28rem;
+    padding: 0 0.08rem;
+    line-height: 0.24rem;
+  }
+  &.large {
+    min-width: 0.48rem;
+    height: 0.48rem;
+    padding: 0 0.16rem;
+    line-height: 0.4rem;
+  }
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/directives/badge/badge.ts

+import { VNode } from 'vue';
+import { isExistAndNotEmpty } from '@/core';
+
+/**
+ * 微标指令
+ *
+ * @export
+ * @class Badge
+ */
+export const Badge: any = {
+  /**
+   * 指令初始化
+   *
+   * @param {HTMLDivElement} el
+   * @param {*} binding
+   * @param {VNode} vNode
+   * @param {VNode} oldVNode
+   */
+  beforeMount(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
+    bc.init(el, binding);
+  },
+
+  /**
+   * 指令更新
+   *
+   * @param {HTMLDivElement} el
+   * @param {*} binding
+   * @param {VNode} vNode
+   * @param {VNode} oldVNode
+   */
+  updated(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
+    bc.update(el, binding);
+  },
+};
+
+/**
+ * 微标控制器
+ *
+ * @export
+ * @class BadgeController
+ */
+export class BadgeController {
+  /**
+   * 唯一实例
+   *
+   * @private
+   * @static
+   * @memberof BadgeControllerController
+   */
+  private static readonly instance = new BadgeController();
+
+  /**
+   * 容器
+   *
+   * @protected
+   * @type {HTMLDivElement}
+   * @memberof NotificationSignalController
+   */
+  protected el!: HTMLElement;
+
+  /**
+   * Creates an instance of BadgeControllerController.
+   * @memberof BadgeControllerController
+   */
+  private constructor() {
+    if (BadgeController.instance) {
+      return BadgeController.instance;
+    }
+  }
+
+  /**
+   * 初始化
+   *
+   * @param {HTMLDivElement}
+   * @param {any}
+   * @memberof BadgeController
+   */
+  public init(el: HTMLDivElement, binding: any): void {
+    const item: any = binding.value;
+    if (Object.keys(item).length > 0 && isExistAndNotEmpty(item.count)) {
+      if (!item.showZero && item.count == 0) {
+        return;
+      }
+      const badge: HTMLElement = document.createElement('sup');
+      badge.innerHTML = String(item.count);
+      badge.classList.add('ibiz-badge');
+      this.el = badge;
+      el.append(badge);
+      this.setBadgeclass(item.type);
+      this.setBadgeclass(item.size);
+      this.setBadgeclass(item.className);
+      this.setBadgeOffset(item.offset);
+    }
+  }
+
+  /**
+   * 更新
+   *
+   * @param {HTMLDivElement}
+   * @param {any}
+   * @memberof BadgeController
+   */
+  public update(el: HTMLDivElement, binding: any): void {
+    const item: any = binding.value;
+    if (Object.keys(item).length > 0 && isExistAndNotEmpty(item.count)) {
+      if (!item.showZero && item.count == 0) {
+        return;
+      }
+      this.el.innerHTML = String(item.count);
+    }
+  }
+
+  /**
+   * 设置徽标类型样式
+   *
+   * @param {string}
+   * @memberof BadgeController
+   */
+  public setBadgeclass(type: string) {
+    if (!type) {
+      return;
+    }
+    this.el.classList.add(type);
+  }
+
+  /**
+   * 设置徽标偏移量
+   *
+   * @param {string}
+   * @memberof BadgeController
+   */
+  public setBadgeOffset(offset: Array<number>) {
+    if (offset && offset.length == 2) {
+      this.el.style.transform = `translate(${offset[0] / 50}rem, ${offset[1] / 50}rem)`;
+    }
+  }
+
+  /**
+   * 获取唯一实例
+   *
+   * @static
+   * @returns {BadgeController}
+   * @memberof BadgeController
+   */
+  public static getInstance(): BadgeController {
+    return BadgeController.instance;
+  }
+}
+
+// 导出服务
+export const bc: BadgeController = BadgeController.getInstance();

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/directives/directives.ts

+import { Badge } from './badge/badge';
+import { Format } from './format/format';
+
+export default (Vue: any) => {
+  Vue.directive('badge', Badge);
+  Vue.directive('format', Format);
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/directives/format/format.scss

+.vue-format-single {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.vue-format-single > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.vue-format-single-color-red {
+  color: red;
+}
+.vue-format-single-color-black {
+  color: black;
+}
+.vue-format-single-color-yellow {
+  color: yellow;
+}
+.vue-format-single-color-green {
+  color: green;
+}
+.vue-format-single-color-white {
+  color: white;
+}
+.vue-format-single-color-blue {
+  color: blue;
+}
+.vue-format-single-color-cyan {
+  color: cyan;
+}
+.vue-format-single-color-magenta {
+  color: rmagentaed;
+}
+.vue-format-single-fill {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/main.ts

@@ -3,9 +3,10 @@ import Antd from 'ant-design-vue';
 import { Interceptors } from '@core';
 import 'font-awesome/css/font-awesome.min.css';
 import 'ant-design-vue/dist/antd.css';
-import '@/style/index.scss'
-import App from './App.vue'
+import '@/style/index.scss';
+import App from './App.vue';
+import directives from '@/directives/directives';
 
 // 挂载拦截器
 Interceptors.getInstance();
-createApp(App).use(Router).use(Antd).mount('#app')
+createApp(App).use(Router).use(Antd).use(directives).mount('#app')