iov-pro-components 0.0.3

package/src/utils/function-eval.js

@@ -0,0 +1,84 @@
+/**
+ * 执行函数
+ * @param  {Object | Function} inject 需要注入的属性
+ * @time 2024-10-31 15:52:08
+ */
+function functionEval(inject = {}) {
+  /**
+   * 将注入的key转换成value
+   * @param  {Object} map 映射的数据
+   * @param  {String} key 当前key
+   * @time 2024-11-01 14:52:01
+   */
+  const injectKeyToValue = map => key => {
+    // 如果当前是字符串，则取出原始值
+    if (typeof key === 'string') {
+      return map[key]
+    }
+    // 如果当前是对象
+    if (key instanceof Object) {
+      return '__value' in key ? key.__value : key
+    }
+    return null
+  }
+
+  /**
+   * 返回需要可执行的方法
+   * @param  {Function} fn 可执行的方法
+   * @param  {Array}    injectKeys 需要注入的属性
+   * @time 2024-10-31 15:54:11
+   */
+  return function(fn) {
+    // 转换后的方法
+    let evalFn = null
+    // 需要注入的属性集合
+    let injectValues = []
+    // 获取需要注入的属性值
+    const injectMaps = inject instanceof Function ? inject() : inject
+    // 如果当前是函数
+    if (fn instanceof Function) {
+      // 重新指向this
+      evalFn = fn.bind(null)
+    } else if (fn instanceof Object) {
+      // 方法需要注入的keys
+      const handlerInjectKeys = [...(fn.inject || [])]
+      // 如果是可执行的方法
+      if (fn.handler instanceof Function) {
+        evalFn = fn.handler.bind(null)
+      } else if (typeof fn.handler === 'string') {
+        evalFn = new Function(
+          ...handlerInjectKeys,
+          fn.handler
+        )
+      }
+      // 获取需要注入的属性值
+      injectValues = handlerInjectKeys.map(injectKeyToValue(injectMaps))
+    }
+    // 如果有回调方法，则直接执行
+    return (...args) => evalFn ? evalFn(...args, ...injectValues) : null
+  }
+}
+
+/**
+ * 是否是可转换的函数
+ * @param  {Object|Function}  参数说明
+ * @param  {参数类型} data 参数说明
+ * @return {返回类型} data 返回说明
+ * @time 2024-11-11 18:04:00
+ */
+export const isEvalFunction = fn => {
+  // 如果当前不是对象或者函数
+  if (!(fn instanceof Object)) {
+    return false
+  }
+  // 如果当前是方法，则认为是可eval的方法
+  if (fn instanceof Function) {
+    return true
+  }
+  if (fn.handler instanceof Function && Array.isArray(fn.inject)) {
+    return true
+  }
+  return false
+}
+
+export default functionEval

package/src/utils/index.js

@@ -0,0 +1,104 @@
+import lodashGet from 'lodash/get'
+
+/**
+ * 转换成大驼峰
+ * @param  {String} tagName 参数说明
+ * @time 2024-10-29 10:33:46
+ */
+export const toUpperCamelCase = tagName => {
+  // 如果当前是字符串
+  if (typeof tagName === 'string') {
+    // 首字母大写,并且去掉中划线的格式
+    return tagName
+      // 首字母大写
+      .replace(/\b(\w)/, match => match.toUpperCase())
+      // 去掉中划线，并将中划线后的首字母大写
+      .replace(/-\w/g, match => match.slice(1).toUpperCase())
+  }
+  return tagName
+}
+
+/**
+ * 从子元素中获取组件
+ * @param  {Array}  children 当前孩子节点
+ * @param  {String} tagName  组件名
+ * @time 2024-11-14 14:46:45
+ */
+export const getComponentFromChildren = (children, tagName) => {
+  // 当前组件
+  let component = null
+  // 遍历所有子节点
+  children.forEach(child => {
+    // 如果没找到子节点
+    if (!component) {
+      // 如果子节点能匹配上
+      if (child.$options.name === tagName) {
+        component = child
+      } else {
+        component = getComponentFromChildren(child.$children, tagName)
+      }
+    }
+  })
+  return component
+}
+
+/**
+ * 是否是url链接
+ * @param  {String} target 需要判断的字符
+ * @time 2024-11-19 11:08:26
+ */
+export const isUrl = target => {
+  // 如果非字符串类型
+  if (typeof target !== 'string') {
+    return false
+  }
+  return /^(https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,}(\/[^\s]*)?$/i.test(target.toLowerCase()) || /^(\/[a-zA-Z]:|[a-zA-Z]:\\|\.\/|\.\.\/|\/)[a-zA-Z0-9\-_./\\]*$/.test(target.toLowerCase())
+}
+
+/**
+ * 是否是base64格式的图片字符串
+ * @param  {String} target 需要判断的字符
+ * @time 2024-12-20 15:55:53
+ */
+export const isBase64Image = target => {
+  return /^data:image\/.*;base64,/.test(target)
+}
+
+/**
+ * 生成随机字符串
+ * @param  {Number} length 随机字符串的长度
+ * @time 2024-11-19 11:33:07
+ */
+export const randomString = (length = 10) => {
+  // 所有字符串
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  // 当前结果
+  let result = ''
+  // 开始生成
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  return result
+}
+
+/**
+ * 将列的数据转换到行中
+ * @param  {Array} cols 当前总数
+ * @time 2024-11-21 09:06:39
+ */
+export const splitColsToRow = (cols, key = 'span') => {
+  // 当前所在的索引
+  let index = 0
+  // 开始处理数据
+  return cols.reduce((memo, col) => {
+    // 当前栅格
+    const totalSpan = memo[index].reduce((memo, c) => (memo + lodashGet(c, key)), 0)
+    // 如果当前栅格大于24，则另起一行
+    if (totalSpan + lodashGet(col, key) > 24) {
+      memo[++index] = [col]
+    } else {
+      memo[index].push(col)
+    }
+    return memo
+  }, [[]])
+}

package/src/views/column-tooltip.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="width: 50%">
+    <iov-pro-column-tooltip
+      :data="DATA"
+      effect="light"
+      placement="top-start"
+      overflow="auto"
+    />
+  </div>
+</template>
+
+<script>
+const DATA = [
+  'key1: value1',
+  'key2: value2',
+  'key3: value3',
+  'key4: value4',
+  'key5: value5',
+  'key6: value6',
+  'key7: value7',
+  'key8: value8',
+  'key9: value9',
+  'key10: value10',
+  'key11: value11',
+  'key12: value12',
+  'key13: value13'
+]
+
+export default {
+  name: 'ColumnTooltipDemo',
+  data() {
+    return {
+      DATA
+    }
+  }
+}
+</script>

package/src/views/components/OtherSelect.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-select :value="value" placeholder="请选择值" @input="val => $emit('input', val)">
+    <el-option label="值1" value="1" />
+    <el-option label="值2" value="2" />
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'OtherSelect',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/src/views/description.vue

@@ -0,0 +1,60 @@
+<template>
+  <iov-pro-preview>
+    <iov-pro-description
+      :data-source="dataSource"
+      :items="ITEMS"
+    >
+      <template #instro>
+        <div style="color: red;">{{ dataSource.instro }}</div>
+      </template>
+    </iov-pro-description>
+  </iov-pro-preview>
+</template>
+
+<script>
+const SEX = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 }
+]
+
+const TAGS = [
+  { label: '性格好', value: 1, type: 'success' },
+  { label: '是个好人', value: 2, type: 'success' },
+  { label: '渣男', value: 3, type: 'danger' }
+]
+
+const ITEMS = [
+  { label: '姓名', prop: 'name' },
+  { label: '性别', prop: 'sex', type: 'enum', enums: SEX },
+  { label: '年龄', prop: 'age' },
+  { label: '标签', prop: 'tag', type: 'tag', enums: TAGS },
+  { label: '简介', value: '查看详情', type: 'link', onClick: { handler: console.log, inject: ['$router'] }},
+  { label: '文件', type: 'file', prop: 'file' },
+  { label: '附件', type: 'link', prop: 'attachment' },
+  { label: '自我介绍', prop: 'instro', type: 'slot', span: 24 }
+]
+
+export default {
+  name: 'DescriptionDemo',
+  data() {
+    return {
+      dataSource: {
+        name: '张三',
+        sex: 1,
+        age: 18,
+        tag: 1,
+        instro: '1111111',
+        file: [
+          { name: '附件1.jpg', uuid: '1', isPrivate: true, url: 'https://prod-common-public.obs-helf.cucloud.cn/mall/goods/893f1000000000114669556' },
+          { name: '附件2.JPG', uuid: '2', isPrivate: false, url: 'https://prod-common-public.obs-helf.cucloud.cn/mall/goods/bcaa1000000000114669571' }
+        ],
+        attachment: [
+          { name: '附件1', icon: 'el-icon-video-camera-solid' },
+          { name: '附件2', icon: 'https://pic.rmb.bdstatic.com/bjh/news/8b97506ad15a7a495cefe17a0f7f9abf.gif' }
+        ]
+      },
+      ITEMS
+    }
+  }
+}
+</script>

package/src/views/detail.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="detail-page-demo">
+    <iov-pro-request
+      :api="queryPageData"
+      :params="params"
+    >
+      <template #default="{ data, loading }">
+        <iov-pro-space
+          v-loading.fullscreen.lock="loading"
+          element-loading-spinner="page-loading"
+          space="10"
+        >
+          <iov-pro-page-detail
+            name="应用详情 - 单点登录"
+            icon="1"
+            desc="租户ID"
+          >
+            <iov-pro-description
+              :data-source="data"
+              :items="DETAIL_ITEMS"
+              label-width="180px"
+            />
+            <el-divider />
+            <iov-pro-sub-title
+              name="应用列表"
+              icon="1"
+            />
+            <iov-pro-table
+              :data-source="data ? data.tableData : []"
+              :columns="TABLE_COLUMNS"
+            />
+          </iov-pro-page-detail>
+          <iov-pro-page-module name="基本信息">
+            <iov-pro-description
+              :data-source="data"
+              :items="BASIC_LOGIN_ITEMS"
+              label-width="180px"
+            />
+          </iov-pro-page-module>
+          <iov-pro-page-module name="登录信息">
+            <iov-pro-description
+              :data-source="data"
+              :items="SSO_LOGIN_ITEMS"
+              label-width="180px"
+            />
+          </iov-pro-page-module>
+        </iov-pro-space>
+      </template>
+    </iov-pro-request>
+    <iov-pro-fixed-button-group height="88">
+      <el-button
+        size="small"
+        round
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        round
+      >确定</el-button>
+    </iov-pro-fixed-button-group>
+  </div>
+</template>
+
+<script>
+const DETAIL_ITEMS = [
+  { label: 'clientID', prop: 'clientId' },
+  { label: '是否接入单点登录', prop: 'isSso' }
+]
+
+const BASIC_LOGIN_ITEMS = [
+  { label: '应用首页地址', prop: 'indexPageUrl' },
+  { label: '外部appid', prop: 'openAppKey' },
+  { label: '访问令牌有效期(秒)', prop: 'accessTokenTerm' }
+]
+
+// SSO登录配置
+const SSO_LOGIN_ITEMS = [
+  { label: '客户端id', prop: 'clientId' },
+  { label: '客户端密钥', prop: 'clientSecret' }
+]
+
+const TABLE_COLUMNS = [
+  { label: '应用ID', prop: 'appId' },
+  { label: '应用名称', prop: 'appName' },
+  { label: '是否接入单点登录', prop: 'isSso' },
+  { label: '应用首页地址', prop: 'indexPageUrl' }
+]
+
+export default {
+  name: 'DetailPageDemo',
+  data() {
+    return {
+      DETAIL_ITEMS,
+      BASIC_LOGIN_ITEMS,
+      SSO_LOGIN_ITEMS,
+      TABLE_COLUMNS,
+      params: {
+        id: 111111
+      }
+    }
+  },
+  methods: {
+    queryPageData(params) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          console.log('接口请求参数：', params)
+          resolve({
+            isSso: '是',
+            indexPageUrl: 'https://www.baidu.com/',
+            openAppKey: 'alll1091899sjj18981',
+            accessTokenTerm: '1800',
+            clientId: 'i129jk91289837372',
+            clientSecret: 'o19276734jdhey78',
+            tableData: [
+              { appId: 1, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 2, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 3, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 4, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 5, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 6, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 7, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 8, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 9, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 10, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 11, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 12, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 13, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 14, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' },
+              { appId: 15, appName: '小明', isSso: '是', indexPageUrl: 'https://www.baidu.com/' },
+              { appId: 26, appName: '小红', isSso: '否', indexPageUrl: 'https://www.google.com/' }
+            ]
+          })
+        }, 1000)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.detail-page-demo {
+  background-color: lightgrey;
+  padding: 20px;
+  min-height: 600px;
+}
+</style>

package/src/views/directive/number.js

@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import lodashGet from 'lodash/get'
+
+function checkNumber(el, binding, vnode) {
+  const decimals = !isNaN(binding.value) ? binding.value : 2 // 默认小数位数为 2
+
+  // 构建正则表达式，支持 0 和空值，不允许以 '.' 开头，也不允许多个零开头
+  const regex = new RegExp(`^(?!\\.)[0-9]*(\\.\\d{0,${decimals}})?$|^$`)
+
+  // 获取 el-input 内部的 input 元素
+  const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
+  if (input) {
+    let previousValue = '' // 记录上次合法的值
+
+    input.addEventListener('input', (event) => {
+      let currentValue = input.value
+
+      // 使用 slice 去除多余的零
+      if (/^0[0-9]/.test(currentValue)) {
+        currentValue = currentValue.slice(0, 1) // 保留一个零，移除其他零
+      }
+
+      // 防止以小数点开头，例如 ".123" -> "0.123"
+      if (/^\./.test(currentValue)) {
+        currentValue = '0' + currentValue // 补全为 "0.123"
+      }
+
+      if (+decimals === 0 && /^\d+\.$/.test(currentValue)) {
+        currentValue = currentValue.slice(0, -1)
+      }
+
+      // 如果当前值合法，保存为上次合法值
+      if (regex.test(currentValue)) {
+        previousValue = currentValue
+        input.value = previousValue
+      } else {
+        // 如果不合法，恢复到上次合法值
+        const cursorPosition = input.selectionStart - 1 // 获取光标位置
+        input.value = previousValue // 恢复到合法值
+
+        // 修复光标位置
+        input.setSelectionRange(cursorPosition, cursorPosition)
+
+        // 手动触发 input 事件以更新 v-model
+        const event = new Event('input', { bubbles: true })
+        input.dispatchEvent(event)
+      }
+      // 如果当前正在合成，则关闭合成方法
+      if (lodashGet(vnode, 'componentInstance.isComposing')) {
+        // 设置当前未在合成
+        vnode.componentInstance.isComposing = false
+        vnode.componentInstance.handleInput(event)
+      }
+    })
+    input.addEventListener('blur', () => {
+      // 当前输入的值
+      const currentValue = input.value
+      // 如果当前输入的值以.结尾
+      if (/\.$/.test(currentValue)) {
+        previousValue = currentValue.slice(0, currentValue.length - 1)
+        input.value = previousValue
+        // 手动触发 input 事件以更新 v-model
+        const event = new Event('input', { bubbles: true })
+        input.dispatchEvent(event)
+      }
+    })
+  }
+}
+
+// 注册自定义指令
+Vue.directive('number', {
+  bind(el, binding, vnode) {
+    checkNumber(el, binding, vnode)
+  },
+  unbind(el) {
+    const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
+    if (input) {
+      input.removeEventListener('input', () => {})
+      input.removeEventListener('blur', () => {})
+    }
+  }
+})

package/src/views/enums.vue

@@ -0,0 +1,22 @@
+<template>
+  <iov-pro-enums
+    :value="1"
+    :enums="ENUMS"
+  />
+</template>
+
+<script>
+const ENUMS = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 }
+]
+
+export default {
+  name: 'EnumsDemo',
+  data() {
+    return {
+      ENUMS
+    }
+  }
+}
+</script>

package/src/views/export.vue

@@ -0,0 +1,9 @@
+<template>
+  <iov-pro-export />
+</template>
+
+<script>
+export default {
+  name: 'ExportDemo'
+}
+</script>