iov-pro-components 0.0.3

package/src/packages/export/src/main.vue

@@ -0,0 +1,316 @@
+<script>
+import { toUpperCamelCase } from '@/utils'
+import { isElementUI, isAntDesign, getComponentName } from '@/utils/config-center'
+
+export default {
+  name: 'IovProExport',
+  props: {
+    // 当前类型 button: 按钮 link：链接
+    type: {
+      type: String,
+      default: 'button'
+    },
+    // 按钮的类型 primary | info | danger | warning
+    buttonType: {
+      type: String,
+      default: 'primary'
+    },
+    // 任务key
+    taskKey: {
+      type: String,
+      default: ''
+    },
+    // 导出按钮的icon
+    icon: {
+      type: String,
+      default: 'iov-icon-export'
+    },
+    // 当前表单对象
+    formRef: {
+      type: Object,
+      default: null
+    },
+    // 当前表格对象
+    tableRef: {
+      type: Object,
+      default: null
+    },
+    // 导出的api
+    exportApi: {
+      type: Function,
+      default: null
+    },
+    // 是否使用自定义的导出前确认框
+    customConfirm: {
+      type: Function,
+      default: null
+    },
+    // 消息内容标题
+    messageTitle: {
+      type: String,
+      default: '确认将当前列表数据导出至本地吗？'
+    },
+    // 消息内容
+    messageContent: {
+      type: String,
+      default: '导出的任务记录请稍后在“下载中心”中查看'
+    },
+    // 请求接口前的拦截方法
+    beforeRequest: {
+      type: Function,
+      default: null
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是只读状态
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    /**
+     * 确认是否导出
+     * @time 2024-09-05 11:21:33
+     */
+    async onConfirmExport() {
+      // 如果不需要默认弹框
+      if (this.customConfirm) {
+        // 调用自定义弹框
+        await this.customConfirm()
+        return
+      }
+
+      // 创建确认弹框
+      const h = this.$createElement
+      // 消息弹框内容
+      const messageBoxContent = [
+        h('p', { style: 'color: #333; padding-bottom: 3px;' }, this.messageTitle),
+        h('p', { style: 'color: #999; font-size: 12px;' }, this.messageContent)
+      ]
+      // 如果是elementui
+      if (isElementUI()) {
+        await this.$msgbox({
+          title: this.title,
+          message: h('div', null, messageBoxContent),
+          showCancelButton: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          customClass: this.msgboxCustomClass
+        })
+      }
+      // 如果是AntDesign
+      if (isAntDesign()) {
+        const callbackPromised = new Promise((resolve, reject) => {
+          this.$confirm({
+            content: messageBoxContent,
+            okText: '确定',
+            cancelText: '取消',
+            onOk() {
+              self.destroyAll()
+              resolve()
+            },
+            onCancel() {
+              self.destroyAll()
+              reject()
+            }
+          })
+        })
+        // 等待promise执行完毕
+        await callbackPromised
+      }
+    },
+
+    /**
+     * 获取组件选中值的展示文案
+     * @param  {Object} field 当前字段对象
+     * @time 2024-10-30 15:40:19
+     */
+    getComponentDisplayField(field) {
+      // 条件的展示文案
+      const consitionValueLabel = []
+      // 如果当前是ElementUI
+      if (isElementUI()) {
+        // 当前字段ref
+        const fieldRef = this.formRef.getFieldRef(field.name)
+        // 根据类型判断
+        switch (toUpperCamelCase(field.type)) {
+          case 'Select': // 如果是下拉选择器
+            // 如果是多选
+            if (fieldRef.multiple) {
+              consitionValueLabel.push(
+                fieldRef.selected
+                  .filter(option => fieldRef.value.includes(option.value))
+                  .map(option => option.label)
+                  .join('，')
+              )
+            } else {
+              consitionValueLabel.push(
+                fieldRef.selected?.label
+              )
+            }
+            break
+          case 'Cascader': // 级联选择器
+            consitionValueLabel.push(fieldRef.presentText)
+            break
+          case 'RadioButton': // 单选按钮
+          case 'Radio': // 单选
+            consitionValueLabel.push(
+              fieldRef.$children.find(child => child.label === fieldRef.value)?.$el?.innerText
+            )
+            break
+          case 'CheckboxButton': // 多选按钮
+          case 'Checkbox': // 多选
+            consitionValueLabel.push(
+              fieldRef.$children
+                .filter(child => fieldRef.value.includes(child.label))
+                .map(child => child.$el?.innerText)
+            )
+            break
+          case 'DatePicker': // 日期选择器
+            // 如果选择你时间区间
+            if (fieldRef.displayValue) {
+              // 如果当前是日期连续选择
+              if (['datetimerange', 'daterange', 'monthrange'].includes(fieldRef.type)) {
+                consitionValueLabel.push(
+                  fieldRef.displayValue.join(' 至 ')
+                )
+              } else {
+                consitionValueLabel.push(fieldRef.displayValue)
+              }
+            }
+            break
+          case 'TimePicker': // 时间选择器
+            // 如果选择你时间区间
+            if (fieldRef.displayValue) {
+              // 如果当前是时间连续选择
+              if (fieldRef.isRange) {
+                consitionValueLabel.push(
+                  fieldRef.displayValue.join(' 至 ')
+                )
+              } else {
+                consitionValueLabel.push(fieldRef.displayValue)
+              }
+            }
+            break
+          default: // 默认
+            consitionValueLabel.push(fieldRef.value)
+            break
+        }
+      }
+      // 如果当前是AntDesign
+      if (isAntDesign) {
+        // TODO: 等待适配
+      }
+    },
+
+    /**
+     * 导出方法
+     * @param  {Object} event 当前点击事件
+     * @time 2024-10-30 15:05:42
+     */
+    async onExport(event) {
+      // 如果是只读状态，则禁止点击
+      if (event && this.readonly) {
+        // 触发click点击事件
+        return this.$emit('click')
+      }
+      // 先弹框确认
+      await this.onConfirmExport()
+      // 导出接口请求入参
+      const params = {
+        // 导出列的数据
+        columnList: [],
+        // 导出条件
+        condition: [],
+        // 导出参数
+        params: {}
+      }
+      // 如果当前未传入表单ref
+      if (!this.formRef) {
+        console.warn('当前未传入formRef')
+      } else {
+        // 取出表单双向绑定的数据和配置条件
+        const { value, items } = this.formRef
+        // 设置导出参数
+        params.params = value
+        // 设置导出条件
+        params.condition = items.map(item => ({
+          key: item.name,
+          label: item.label,
+          // 获取字段中文名
+          value: this.getComponentDisplayField(item)
+        }))
+      }
+      // 当前未传入表单ref
+      if (!this.tableRef) {
+        console.warn('当前未传入tableRef')
+      } else {
+        params.columnList = this.tableRef.columns
+          .filter(column => column.prop)
+          .map(column => ({ name: column.label, column: column.prop }))
+      }
+      // 如果有请求拦截
+      this.beforeRequest && this.beforeRequest(params)
+      // 如果当前有导出api，则直接导出
+      if (this.exportApi) {
+        // 展示全局loading
+        this.fullscreenLoading = true
+        // 开始执行导出方法
+        await this.exportApi({
+          taskKey: this.taskKey,
+          paramCondition: params.condition,
+          paramJson: {
+            columnList: params.columnList,
+            ...params.params
+          }
+        })
+        // 给出导出成功提示
+        this.$message.success('数据导出任务已创建成功，您可以进入「下载中心」查看任务进度并下载文件')
+      }
+    }
+  },
+  render() {
+    // 获取链接的组件名
+    const Link = getComponentName('link')
+    // 获取按钮的组件名
+    const Button = getComponentName('button')
+    // 如果当前是链接
+    if (this.type === 'link') {
+      return (
+        <Link
+          v-loading_fullscreen_lock={this.loading}
+          element-loading-spinner='page-loading'
+          disabled={this.disabled}
+          type={this.buttonType}
+          onClick={this.onExport}
+        >
+          {this.$scopedSlots.default ? this.$scopedSlots.default() : '导出'}
+        </Link>
+      )
+    }
+    return (
+      <Button
+        v-loading_fullscreen_lock={this.loading}
+        element-loading-spinner='page-loading'
+        disabled={this.disabled}
+        type={this.buttonType}
+        icon={this.icon}
+        size='small'
+        round
+        onClick={this.onExport}
+      >
+        {this.$scopedSlots.default ? this.$scopedSlots.default() : '导出'}
+      </Button>
+    )
+  }
+}
+</script>

package/src/packages/fixed-button-group/index.js

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

package/src/packages/fixed-button-group/src/main.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    :style="fixedWrapperStyle"
+    class="iov-pro-fixed-button-group"
+  >
+    <div
+      :class="fixedButtonGroupClass"
+      :style="fixedButtonGroupStyle"
+      class="iov-pro-fixed-button-group__content"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import isNil from 'lodash/isNil'
+
+export default {
+  name: 'IovProFixedButtonGroup',
+  props: {
+    // 对其方式 align：居中对齐 left: 左对齐 right: 右对齐
+    align: {
+      type: String,
+      default: 'center'
+    },
+    // 当前高度
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    // 距离左侧的偏移
+    left: {
+      type: [String, Number],
+      default: null
+    },
+    // 距离右侧的偏移
+    right: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  computed: {
+    /**
+     * 当前浮动框的样式
+     * @time 2024-07-15 09:37:10
+     */
+    fixedButtonGroupClass() {
+      // 样式集合
+      const className = []
+      // 如果有对齐方式
+      if (this.align) {
+        className.push(this.align)
+      }
+      // 将样式合并
+      return className.join(' ')
+    },
+
+    /**
+     * 当前浮动框的css样式
+     * @time 2024-11-21 15:04:39
+     */
+    fixedButtonGroupStyle() {
+      // 当前样式
+      const style = {}
+      // 当前高度
+      const height = `${this.height}`
+      // 当前距离左侧距离
+      const left = `${this.left}`
+      // 当前距离右侧距离
+      const right = `${this.right}`
+      // 如果当前设置了高度
+      if (!isNil(this.height)) {
+        style.height = `${height.replace('px', '')}px`
+      }
+      // 如果当前设置了左侧距离
+      if (!isNil(this.left)) {
+        style.left = `${left.replace('px', '')}px`
+      }
+      // 如果当前设置了右侧距离
+      if (!isNil(this.right)) {
+        style.right = `${right.replace('px', '')}px`
+      }
+      return style
+    },
+
+    /**
+     * 浮动容器的样式
+     * @time 2024-11-21 15:20:58
+     */
+    fixedWrapperStyle() {
+      // 当前样式
+      const style = {}
+      // 当前高度
+      const height = `${this.height}`
+      // 如果当前设置了高度
+      if (!isNil(this.height)) {
+        style.height = `${height.replace('px', '')}px`
+      }
+      return style
+    }
+  }
+}
+</script>

package/src/packages/form/index.js

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

package/src/packages/form/src/collapse.vue

@@ -0,0 +1,149 @@
+<script>
+import { getComponentFromChildren } from '@/utils'
+import { getComponentName } from '@/utils/config-center'
+
+const STATUS = {
+  EXPAND: 'expand',
+  COLLAPSE: 'collapse'
+}
+
+export default {
+  name: 'IovProFormCollapse',
+  props: {
+    maxLine: {
+      type: [Number, String],
+      default: 2
+    }
+  },
+  data() {
+    return {
+      status: STATUS.EXPAND,
+      needCollapse: false
+    }
+  },
+  computed: {
+    /**
+     * 透传给子组件的状态
+     * @time 2024-11-14 10:04:30
+     */
+    propData() {
+      return {
+        status: this.status,
+        needCollapse: this.needCollapse,
+        toggleStatus: this.onToggleStatus.bind(this)
+      }
+    }
+  },
+  mounted() {
+    // 取出子组件中的proForm
+    const formThis = getComponentFromChildren(this.$children, 'IovProForm')
+    // 如果没有子应用
+    if (!formThis) {
+      return console.warn('默认插槽仅支持IovProForm组件')
+    }
+    // 如果当前配置了grid
+    if (!formThis.config.grid) {
+      return console.warn('默认插槽仅支持栅格系统')
+    }
+    // 取出栅格系统的行
+    this.spaceVm = getComponentFromChildren(formThis.$children, getComponentName('IovProSpace'))
+    // 开始收起菜单
+    this.$nextTick(() => {
+      // 是否需要折叠
+      this.needCollapse = this.spaceVm.$children.length > this.maxLine
+      // 如果不需要折叠，则不操作
+      if (!this.needCollapse) {
+        return
+      }
+      this.onToggleStatus()
+    })
+  },
+  methods: {
+    /**
+     * 重置展开收起状态
+     * @time 2024-11-14 10:02:43
+     */
+    onToggleStatus() {
+      // 取出栅格系统的行
+      const formVm = getComponentFromChildren(this.$children, getComponentName('IovProForm'))
+      // 当前所有的孩子节点实例
+      const spaceChildrenVm = this.spaceVm.$children
+      // 切换状态
+      this.status = this.status === STATUS.EXPAND ? STATUS.COLLAPSE : STATUS.EXPAND
+      // 遍历行节点
+      spaceChildrenVm.forEach((rowVm, rowIndex) => {
+        // 如果行索引大于等于最大行数，则隐藏该行
+        if (rowIndex >= this.maxLine) {
+          // 设置el-row的隐藏状态
+          rowVm.$el.parentNode.style.display = this.status === STATUS.EXPAND ? '' : 'none'
+        }
+        // 如果表单有 append 插槽的内容
+        if (formVm.$scopedSlots.append) {
+          // 隐藏超过一行的span内容
+          this.hideOverSpanCol(formVm, rowVm, rowIndex)
+          // 是否需要移动append的节点内容
+          this.moveFormAppend(rowVm, rowIndex)
+        }
+      })
+    },
+
+    /**
+     * 隐藏收起状态下，最大展示行放不下append插槽内容的col数据
+     * @param  {参数类型} data 参数说明
+     * @param  {参数类型} data 参数说明
+     * @return {返回类型} data 返回说明
+     * @time 2024-11-21 14:11:37
+     */
+    hideOverSpanCol(formVm, rowVm, rowIndex) {
+      // 如果当前不是收起状态下最后一行，则不处理
+      if (rowIndex !== this.maxLine - 1) {
+        return
+      }
+      // 当前分割空间组件实例
+      const spaceChildrenVm = this.spaceVm.$children
+      // 如果有追加的插槽
+      let spanCount = spaceChildrenVm[spaceChildrenVm.length - 1].$children.slice(-1)[0].span || formVm.config.span || 6
+      // 开始处理数据
+      rowVm.$children.forEach(colVm => {
+        // 累加每个col的span
+        spanCount += colVm.span
+        // 如果当前超过展示的最大限制
+        if (spanCount > 24) {
+          colVm.$el.style.display = this.status === STATUS.EXPAND ? '' : 'none'
+        }
+      })
+    },
+
+    /**
+     * 移动表单中append插槽的内容
+     * @param  {Object} formVm   当前表单实例
+     * @param  {Number} rowIndex 当前行索引
+     * @time 2024-11-21 14:06:09
+     */
+    moveFormAppend(rowVm, rowIndex) {
+      // 当前分割空间组件实例
+      const spaceChildrenVm = this.spaceVm.$children
+      // 当前子节点的长度
+      const spaceLength = spaceChildrenVm.length
+      // 如果有追加的插槽
+      const formAppendEl = spaceChildrenVm[spaceLength - 1].$children.slice(-1)[0].$el
+      // 是否需要移动append的节点内容
+      // 收起状态，最大展示的行 或 展开状态，最后一行 都需要操作append的节点
+      const isMoveAppendEl = ((rowIndex === this.maxLine - 1 && this.status === STATUS.COLLAPSE) || (rowIndex === spaceLength - 1 && this.status === STATUS.EXPAND))
+      // 如果需要移动append的节点内容
+      if (isMoveAppendEl) {
+        // 将当前表单节点元素追加到容器节点中
+        rowVm.$el.appendChild(formAppendEl)
+      }
+    }
+  },
+  render() {
+    // 生成子组件
+    return (
+      <div class='iov-pro-form-collpase'>
+        {this.$scopedSlots.default(this.propData)}
+      </div>
+    )
+  }
+}
+</script>