iov-pro-components 0.0.3

package/src/packages/description/src/main.vue

@@ -0,0 +1,375 @@
+<script>
+import isNil from 'lodash/isNil'
+import Space from '@/packages/space'
+import DescriptionText from './text.vue'
+import { getComponentNames } from '@/utils/config-center'
+import functionEval, { isEvalFunction } from '@/utils/function-eval'
+import { isUrl, randomString, splitColsToRow } from '@/utils'
+
+const FILE_ICON = {
+  img: 'https://prod-common-public.obs-helf.cucloud.cn/user/74f61000000000128620027',
+  pdf: 'https://prod-common-public.obs-helf.cucloud.cn/user/e0e61000000000128620062',
+  excel: 'https://prod-common-public.obs-helf.cucloud.cn/user/da5a1000000000128609725',
+  zip: 'https://prod-common-public.obs-helf.cucloud.cn/user/e6981000000000128620103',
+  rar: 'https://prod-common-public.obs-helf.cucloud.cn/user/e6981000000000128620103',
+  '7z': 'https://prod-common-public.obs-helf.cucloud.cn/user/e6981000000000128620103',
+  ppt: 'https://prod-common-public.obs-helf.cucloud.cn/user/fa371000000000128620154',
+  word: 'https://prod-common-public.obs-helf.cucloud.cn/user/97a81000000000128620217',
+  default: 'https://prod-common-public.obs-helf.cucloud.cn/user/27351000000000128609979'
+}
+
+export default {
+  name: 'IovProDescription',
+  inject: {
+    pageThis: { value: 'pageThis', default: null },
+    preview: { value: 'preview', default: null }
+  },
+  props: {
+    // 数据源
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    },
+    // 当前需要渲染的配置项
+    items: {
+      type: Array,
+      default: () => []
+    },
+    // 默认值
+    defaultValue: {
+      type: String,
+      default: '--'
+    },
+    // label宽度
+    labelWidth: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      values: {}
+    }
+  },
+  computed: {
+    /**
+     * 对原始数据进行处理
+     * @time 2024-11-19 11:30:18
+     */
+    descriptionItems() {
+      return this.items.map(item => {
+        // 当前label宽度
+        const labelWidth = `${item.labelWidth || this.labelWidth}`
+        return {
+          type: item.type || 'text',
+          label: item.label,
+          labelWidth: labelWidth.indexOf('px') > 0
+            ? labelWidth
+            : labelWidth ? `${labelWidth}px` : '',
+          vif: item.vif,
+          prop: item.prop,
+          value: item.value,
+          key: item.prop || randomString(),
+          enums: item.enums,
+          span: item.span || 12,
+          config: item.config,
+          showOverflowTooltip: item.showOverflowTooltip || false,
+          onClick: item.onClick
+        }
+      })
+    }
+  },
+  watch: {
+    /**
+     * 监听数据源变化，重新设置值
+     * @time 2024-11-19 16:07:12
+     */
+    dataSource() {
+      // 初始化值
+      this.initValue()
+    },
+
+    /**
+     * 监听配置变化，重新设置值
+     * @time 2025-04-17 18:25:48
+     */
+    items() {
+      this.initValue()
+    }
+  },
+  created() {
+    // 当前转换函数
+    this.functionEval = functionEval(() => ({
+      model: this.dataSource,
+      $route: this.$route,
+      $router: this.$router,
+      pageThis: this.pageThis || this.$parent
+    }))
+  },
+  mounted() {
+    // 初始化值
+    this.initValue()
+  },
+  methods: {
+    /**
+     * 初始化值
+     * @time 2024-11-19 11:14:48
+     */
+    initValue() {
+      // 如果没有传入需要渲染的值
+      const dataSource = this.dataSource || {}
+      // 遍历所有数据
+      this.descriptionItems.forEach(async item => {
+        // 当前值
+        const value = isNil(item.value)
+          ? dataSource[item.prop]
+          : item.value
+        // 当前渲染类型
+        const itemType = item.type || 'text'
+        // 当前枚举字段值
+        let enums = []
+        // 根据类型去赋值
+        switch (itemType) {
+          case 'tag': // 如果当前是标签
+          case 'enum': // 如果是枚举类型
+            // 如果是函数，则需要动态获取
+            if (item.enums instanceof Function) {
+              enums = await this.functionEval(item.enums)(value) || []
+            } else {
+              enums = item.enums || []
+            }
+            // 开始赋值
+            this.$set(
+              this.values,
+              item.key,
+              Array.isArray(value)
+                ? enums.find(option => value.includes(option.value))
+                : enums.find(option => option.value === value)
+            )
+            break
+          default: // 其他类型
+            this.$set(this.values, item.key, value)
+            break
+        }
+      })
+    },
+
+    /**
+     * 判断当前值是否是空
+     * @param  {String｜Array} val 需要判断的值
+     * @time 2024-08-08 11:10:33
+     */
+    isEmpty(val) {
+      // 如果是null，undefined，空字符串都返回true
+      if ([null, undefined, ''].includes(val)) {
+        return true
+      }
+      // 如果是空数组，则返回true
+      if (Array.isArray(val) && val.length === 0) {
+        return true
+      }
+      // 其他默认有值
+      return false
+    },
+
+    /**
+     * 触发被点击事件
+     * @param  {Object} col 当前配置
+     * @time 2024-11-19 10:40:44
+     */
+    onItemClick(item, value) {
+      // 如果当前有点击事件
+      if (item.onClick) {
+        this.functionEval(item.onClick)(value)
+      }
+      // 如果是文件类型，则
+      if (item.type === 'file' && this.preview) {
+        // 开始预览文件
+        this.preview({
+          name: value[item.props?.name || 'name'],
+          uuid: value[item.props?.uuid || 'uuid'],
+          url: value[item.props?.url || 'url'],
+          isPrivate: value[item.props?.isPrivate || 'isPrivate']
+        })
+      }
+      // 触发事件
+      this.$emit('item-click', item)
+    },
+
+    /**
+    * 根据文件名称获取对应的icon
+    * @param  {str} fileName 文件名称
+    * @time 2025-05-08 10:15:57
+    */
+    getFileIcon(fileName) {
+      const ext = fileName.split('.').pop().toLowerCase()
+      if (['png', 'jpg', 'jpeg'].includes(ext)) {
+        return FILE_ICON.img
+      } else if (['doc', 'docx'].includes(ext)) {
+        return FILE_ICON.word
+      } else if (['xls', 'xlsx'].includes(ext)) {
+        return FILE_ICON.excel
+      } else if (['ppt', 'pptx'].includes(ext)) {
+        return FILE_ICON.ppt
+      } else if (['pdf'].includes(ext)) {
+        return FILE_ICON.pdf
+      } else {
+        return FILE_ICON[ext] || FILE_ICON.default
+      }
+    }
+  },
+  render() {
+    // 是否需要展示
+    const vif = col => [null, undefined, ''].includes(col.vif)
+      ? true
+      : isEvalFunction(col.vif)
+        ? this.functionEval(col.vif)(this.dataSource)
+        : col.vif
+    // 取出组件
+    const [Row, Col, Link, Tag] = getComponentNames(['row', 'col', 'link', 'tag'])
+    // 将数据转换到行中
+    const itemsInRows = splitColsToRow(this.descriptionItems.filter(vif))
+    return (
+      <Space space='12' class='iov-pro-description'>
+        { // 按行遍历数据
+          itemsInRows.map(items => (
+            <Row class='iov-pro-description__row' key={items.map(item => item.key).join('|')}>
+              { // 遍历每个子项目
+                items.map((item) => {
+                  // 值当前需要展示的组件
+                  let valueComp = <span>{this.defaultValue}</span>
+                  // 获取当前需要展示的值
+                  let value = this.values[item.key]
+                  // 单项的配置
+                  const itemConfig = item.config || {}
+                  // 如果值是空
+                  if (!this.isEmpty(value)) {
+                    // 当前插槽名称
+                    const slotName = item.slotName || item.prop
+                    // 判断类型
+                    switch (item.type) {
+                      case 'text':
+                        valueComp = <span>{value}</span>
+                        break
+                      case 'enum':
+                        // 将值转换成数组类型
+                        value = Array.isArray(value) ? value : [value]
+                        // 开始设置值的组件
+                        valueComp = <span>{value.map(v => v.label).join(', ')}</span>
+                        break
+                      case 'rich-text':
+                        valueComp = <div v-html={value} />
+                        break
+                      case 'tag': // 如果当前是标签
+                        // 将值转换成数组类型
+                        value = Array.isArray(value) ? value : [value]
+                        // 开始设置值的组件
+                        valueComp = (
+                          <Space direction='horizontal' space={8}>
+                            { // 当前值渲染的组件
+                              value.map(v => <Tag type={v.type} size='small'>{v.label}</Tag>)
+                            }
+                          </Space>
+                        )
+                        break
+                      case 'file':
+                        value = Array.isArray(value) ? value : [value]
+                        valueComp = (
+                          <div class='iov-pro-description__link-group'>
+                            <Space direction='horizontal' space={8}>
+                              {
+                                value.map(v => {
+                                  return (
+                                    <Link
+                                      type='primary'
+                                      class={['iov-pro-description__link primary', 'has-icon']}
+                                      underline={false}
+                                      onClick={this.onItemClick.bind(this, item, v)}
+                                    >
+                                      {
+                                        v[itemConfig.props?.icon || 'icon']
+                                          ? isUrl(v[itemConfig.props?.icon || 'icon'])
+                                            ? <img src={v[itemConfig.props?.icon || 'icon']} class='iov-pro-description__link-icon' />
+                                            : null
+                                          : <img src={this.getFileIcon(v[itemConfig.props?.name || 'name'] || v)} class='iov-pro-description__link-icon' />
+                                      }
+                                      {v[itemConfig.props?.name || 'name'] ? v[itemConfig.props?.name || 'name'] : v}
+                                    </Link>
+                                  )
+                                })
+                              }
+                            </Space>
+                          </div>
+                        )
+                        break
+                      case 'link':
+                        // 将值转换成数组类型
+                        value = Array.isArray(value) ? value : [value]
+                        // 开始设置值的组件
+                        valueComp = (
+                          <div class='iov-pro-description__link-group'>
+                            <Space direction='horizontal' space={8}>
+                              { // 遍历值的数据
+                                value.map(v => (
+                                  <Link
+                                    type='primary'
+                                    class={['iov-pro-description__link primary', v[itemConfig.props?.icon || 'icon'] ? 'has-icon' : ''].join(' ')}
+                                    underline={false}
+                                    onClick={this.onItemClick.bind(this, item, v)}
+                                  >
+                                    {
+                                      v[itemConfig.props?.icon || 'icon']
+                                        ? isUrl(v[itemConfig.props?.icon || 'icon'])
+                                          ? <img src={v[itemConfig.props?.icon || 'icon']} class='iov-pro-description__link-icon' />
+                                          : <i class={['iov-pro-description__link-icon', v[itemConfig.props?.icon || 'icon']].join(' ')} />
+                                        : null
+                                    }
+                                    {v[itemConfig.props?.name || 'name'] ? v[itemConfig.props?.name || 'name'] : v}
+                                  </Link>
+                                ))
+                              }
+                            </Space>
+                          </div>
+                        )
+                        break
+                      case 'slot':
+                        // 如果当前放了自定义插槽，则调用方法生成
+                        if (this.$scopedSlots[slotName]) {
+                          valueComp = this.$scopedSlots[slotName]({ data: value })
+                        }
+                        break
+                      default:
+                        valueComp = <span>{value}</span>
+                        break
+                    }
+                    // 如果组件需要超出隐藏
+                    if (item.showOverflowTooltip) {
+                      valueComp = (
+                        <DescriptionText>{valueComp}</DescriptionText>
+                      )
+                    }
+                  }
+                  // 当前label的样式
+                  const labelStyle = [null, undefined].includes(item.labelWidth)
+                    ? {}
+                    : { width: item.labelWidth }
+                  return (
+                    <Col
+                      span={item.span}
+                      key={item.key}
+                      class='iov-pro-description__col'
+                    >
+                      <div style={labelStyle} class='iov-pro-description__label'>{item.label && `${item.label}：`}</div>
+                      <div class='iov-pro-description__value'>{valueComp}</div>
+                    </Col>
+                  )
+                })
+              }
+            </Row>
+          ))
+        }
+      </Space>
+    )
+  }
+}
+</script>

package/src/packages/description/src/text.vue

@@ -0,0 +1,103 @@
+<script>
+import { getComponentNames } from '@/utils/config-center'
+
+export default {
+  name: 'IovProText',
+  props: {
+    lineClamp: {
+      type: Number,
+      default: 1
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    }
+  },
+  data() {
+    return {
+      content: ''
+    }
+  },
+  computed: {
+    /**
+     * 文案样式
+     * @time 2024-05-08 17:36:42
+     */
+    textStyle() {
+      return {
+        '-webkit-line-clamp': this.lineClamp
+      }
+    }
+  },
+  methods: {
+    /**
+     * 检测文案移除状态
+     * @time 2024-05-08 17:16:55
+     */
+    detectOverflowStatus() {
+      // 如果当前不需要显示省略号
+      if (this.lineClamp === 0) {
+        return
+      }
+      // 先清空内容
+      this.content = ''
+      // 当前文案dom实例
+      const $el = this.$refs.text
+      // 当前块的长度
+      const blockWidth = $el.offsetWidth
+      // 如果当前有元素，才计算是否需要tooltip
+      if ($el.innerText) {
+        // 创建一个承接内容的透明区域用于计算宽度
+        const span = document.createElement('span')
+        // 获取当前样式
+        const style = getComputedStyle($el)
+        // 设置样式
+        span.setAttribute(
+          'style',
+          [
+            `font: ${style.font}`,
+            `font-weight: ${style.fontWeight}`,
+            'opactiy: 0',
+            'position: fixed',
+            'top: 100vh',
+            'white-space: nowrap'
+          ].join('; ')
+        )
+        // 将当前文案塞进去
+        span.appendChild(
+          document.createTextNode($el.innerText)
+        )
+        // 将当前临时dom插到body下
+        document.body.appendChild(span)
+        // 当前文本宽度
+        const textWidth = span.offsetWidth
+        // 如果当前顶格了,说明超长
+        if (blockWidth * this.lineClamp < textWidth) {
+          this.content = $el.innerText
+        }
+        // 移除当前临时区块
+        document.body.removeChild(span)
+      }
+    }
+  },
+  render() {
+    const [Tooltip] = getComponentNames(['tooltip'])
+    return (
+      <Tooltip
+        disabled={!this.content}
+        content={this.content}
+        placement={this.placement}
+      >
+        <div
+          ref='text'
+          style={this.textStyle}
+          class='iov-pro-text__content'
+          onMouseover={this.detectOverflowStatus.bind(this)}
+        >
+          {this.$slots.default}
+        </div>
+      </Tooltip>
+    )
+  }
+}
+</script>

package/src/packages/dialog-select/index.js

@@ -0,0 +1,7 @@
+import DialogSelect from './src/main.vue'
+
+DialogSelect.install = function(Vue) {
+  Vue.component(DialogSelect.name, DialogSelect)
+}
+
+export default DialogSelect