@kyfe/fms-vue2-components 0.0.8 → 0.0.11

package/src/components/fms-approval-header/fms-approval-header.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="private-approval">
+    <div class="prior-approval">
+      <div v-for="item in displayConfig"
+           :key="item.key"
+           class="cell">
+        <div class="label">{{ item.label }}</div>
+        <div class="content">
+          <component v-if="isJsxFormatter(item)" 
+                     :is="getJsxComponent(item)" />
+          <template v-else>
+            {{ getContent(item) }}
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { get } from 'lodash'
+  import * as filters from '@kyfe/fms-utils/filter'
+
+  export default {
+    name: 'FmsApprovalHeader',
+    props: {
+      // 数据对象
+      data: {
+        type: Object,
+        default: () => ({})
+      },
+      // 配置项数组
+      config: {
+        type: Array,
+        default: () => []
+      },
+      // 自定义过滤器
+      customFilters: {
+        type: Object,
+        default: () => ({})
+      },
+    },
+    computed: {
+      // 显示的配置项（过滤掉show: false的）
+      displayConfig () {
+        return this.config.filter(item => item.show !== false)
+      },
+      // 合并过滤器
+      allFilters () {
+        return {
+          ...filters,
+          ...this.customFilters
+        }
+      }
+    },
+    methods: {
+      /**
+       * 获取格式化器参数
+       */
+      getFormatterArgs(item) {
+        const { key } = item
+        const value = get(this.data, key, '')
+        return {
+          value,
+          data: this.data,
+          h: this.$createElement // 传入 h 函数
+        }
+      },
+      /**
+       * 判断是否是JSX格式化器
+       */
+      isJsxFormatter(item) {
+        const { formatter } = item
+        if (typeof formatter !== 'function') return false
+        const args = this.getFormatterArgs(item)
+        const result = formatter(args.h, { 
+          value: args.value, 
+          data: args.data 
+        })
+        // 检查是否是 JSX 元素（JSX 会编译成 VNode）
+        return result && (
+          result.__v_isVNode === true ||
+          (typeof result === 'object' && result.tag) ||
+          (typeof result === 'object' && result.type) // Vue 3
+        )
+      },
+
+      /**
+       * 获取 JSX 组件
+       */
+      getJsxComponent(item) {
+        const { formatter } = item
+        const args = this.getFormatterArgs(item)
+        const jsxResult = formatter(args.h, { 
+          value: args.value, 
+          data: args.data 
+        })
+        // 如果是 JSX 元素（VNode），包装成组件
+        if (jsxResult && (jsxResult.__v_isVNode || jsxResult.tag)) {
+          return {
+            render: () => jsxResult
+          }
+        }
+        // 如果已经是组件配置，直接返回
+        if (jsxResult && (jsxResult.render || jsxResult.template)) {
+          return jsxResult
+        }
+        // 默认返回空组件
+        return {
+          render: () => this.$createElement('span', '渲染错误')
+        }
+      },
+      /**
+       * 获取显示内容
+       */
+      getContent (item) {
+        const { key, filter, lookupCode } = item
+        // 获取原始值
+        let value = get(this.data, key, '')
+        // 如果值为空，直接返回
+        if (value === undefined || value === null || value === '') {
+          return ''
+        }
+        // 使用字典映射
+        if (lookupCode) {
+          return filters.lookupLabelByValue(String(value), lookupCode)
+        }
+        // 使用过滤器
+        if (filter) {
+          if (typeof filter === 'function') {
+            return filter(value, this.data)
+          } else if (typeof filter === 'string' && this.allFilters[filter]) {
+            return this.allFilters[filter](value)
+          }
+        }
+        // 直接返回原始值
+        return value
+      },
+    }
+  }
+</script>
+<style lang="less" scoped>
+  // 审批详情样式
+  .prior-approval {
+    margin: 0 16px;
+    padding: 4px 0 16px 0;
+    border-radius: 0px 0px 6px 6px;
+    background: #ffffff;
+
+    .cell {
+      display: flex;
+      margin-bottom: 10px;
+      min-height: 20px;
+      line-height: 20px;
+      padding: 0 16px;
+      font-size: 14px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label {
+        color: #858793;
+        font-size: 14px;
+        width: 72px;
+        word-break: break-all;
+
+        &-click {
+          color: #7972fe;
+        }
+      }
+
+      .content {
+        flex: 1;
+        margin-left: 14px;
+        color: #03050d;
+        font-size: 14px;
+        text-align: left;
+        word-break: break-all;
+      }
+    }
+
+    .form-title {
+      position: relative;
+      padding: 8px 0 0 26px;
+      margin-bottom: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      height: 28px;
+      line-height: 28px;
+      background: #ffffff;
+      color: #333333;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        width: 2px;
+        height: 14px;
+        background: #7972fe;
+      }
+
+      &::after {
+        position: absolute;
+        content: " ";
+        pointer-events: none;
+        right: 0;
+        top: 0;
+        left: 16px;
+        right: 16px;
+        border-bottom: 1px solid #ebedf5;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+      }
+    }
+
+    .form-title-no-after {
+      position: relative;
+      padding: 8px 0 0 26px;
+      margin-bottom: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      height: 28px;
+      line-height: 28px;
+      background: #ffffff;
+      color: #333333;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        width: 2px;
+        height: 14px;
+        background: #7972fe;
+      }
+    }
+
+    .line {
+      height: 1px;
+      background-color: #eee;
+      margin: 6px 0;
+    }
+
+    .upload-detail {
+      .van-uploader__wrapper {
+        .van-uploader__preview-delete {
+          display: none;
+        }
+
+        .van-uploader__upload {
+          display: none;
+        }
+      }
+    }
+  }
+</style>

package/src/components/fms-approval-header/index.js

@@ -0,0 +1,7 @@
+import FmsApprovalHeader from './fms-approval-header.vue'
+
+FmsApprovalHeader.install = function(Vue) {
+  Vue.component(FmsApprovalHeader.name, FmsApprovalHeader)
+}
+
+export default FmsApprovalHeader