iov-pro-components 0.0.3

package/src/packages/search-table/src/outer-tabs.vue

@@ -0,0 +1,45 @@
+<script>
+import { getComponentNames } from '@/utils/config-center'
+import Display from '@/packages/display'
+
+export default {
+  name: 'IovProSearchTableOuterTabs',
+  data() {
+    return {
+      tabName: 'tab-0'
+    }
+  },
+  render() {
+    const [
+      Tabs,
+      TabPane
+    ] = getComponentNames(['tabs', 'tab-pane'])
+
+    return (
+      <div class='outer-tabs'>
+        <Tabs
+          value={this.tabName}
+          onInput={val => (this.tabName = val)}
+          class='outer-tabs__tabs'
+        >
+          { // 遍历插槽的值
+            this.$slots.default
+              .filter(comp => !!comp.tag)
+              .map((comp, index) => {
+                const label = comp.componentOptions.propsData.title
+                return (
+                  <TabPane
+                    label={label}
+                    name={`tab-${index}`}
+                  >
+                    <Display visible={this.tabName === `tab-${index}`}>{comp}</Display>
+                  </TabPane>
+                )
+              })
+          }
+        </Tabs>
+      </div>
+    )
+  }
+}
+</script>

package/src/packages/search-table-inner-tabs/index.js

@@ -0,0 +1,7 @@
+import ProSearchTableInnerTabs from '@/packages/search-table/src/inner-tabs.vue'
+
+ProSearchTableInnerTabs.install = function(Vue) {
+  Vue.component(ProSearchTableInnerTabs.name, ProSearchTableInnerTabs)
+}
+
+export default ProSearchTableInnerTabs

package/src/packages/search-table-outer-tabs/index.js

@@ -0,0 +1,7 @@
+import ProSearchTableOuterTabs from '@/packages/search-table/src/outer-tabs.vue'
+
+ProSearchTableOuterTabs.install = function(Vue) {
+  Vue.component(ProSearchTableOuterTabs.name, ProSearchTableOuterTabs)
+}
+
+export default ProSearchTableOuterTabs

package/src/packages/space/index.js

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

package/src/packages/space/src/main.vue

@@ -0,0 +1,74 @@
+<script>
+export default {
+  name: 'IovProSpace',
+  props: {
+    // 互相间隔大小
+    space: {
+      type: [Number, String],
+      default: 0
+    },
+    // 间距方向	vertical: 垂直 horizontal: 水平
+    direction: {
+      type: String,
+      default: 'vertical'
+    },
+    // 对其方式 如果水平对其，则值为align-items属性值，如果垂直对其，则值为justify-content属性值
+    align: {
+      type: String,
+      default: 'start'
+    }
+  },
+  computed: {
+    /**
+     * 每个item的padding间隔
+     * @time 2024-11-01 14:10:17
+     */
+    paddingSpace() {
+      // padding的间隔
+      const PADDING_SPACE = `${this.space}`
+        .toLowerCase()
+        .replace('px', '')
+      return `${PADDING_SPACE / 2}px`
+    },
+
+    /**
+     * space组件的样式
+     * @time 2024-11-01 14:20:48
+     */
+    spaceStyle() {
+      return this.direction === 'horizontal'
+        ? { 'align-items': this.align, margin: `0 -${this.paddingSpace}` }
+        : { 'justify-content': this.align, margin: `-${this.paddingSpace} 0` }
+    },
+
+    /**
+     * space每一项的样式
+     * @param  {Number} index 当前索引
+     * @time 2024-11-01 14:16:00
+     */
+    spaceItemStyle() {
+      // 根据水平或者竖设置样式
+      return this.direction === 'horizontal'
+        ? { padding: `0 ${this.paddingSpace}` }
+        : { padding: `${this.paddingSpace} 0` }
+    }
+  },
+  render() {
+    return (
+      <div
+        class={['iov-pro-space', this.direction].join(' ')}
+        style={this.spaceStyle}
+      >
+        { // 遍历数据
+          this.$slots.default && this.$slots.default.filter(item => ![undefined].includes(item.tag)).map(item => (
+            <div
+              class='iov-pro-space__item'
+              style={this.spaceItemStyle}
+            >{item}</div>
+          ))
+        }
+      </div>
+    )
+  }
+}
+</script>

package/src/packages/sub-title/index.js

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

package/src/packages/sub-title/src/main.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="iov-pro-sub-title">
+    <i
+      v-if="icon"
+      class="iov-pro-sub-title__icon"
+      :style="iconStyle"
+    />
+    <div class="iov-pro-sub-title__name">{{ name }}</div>
+    <div
+      v-if="desc"
+      class="iov-pro-sub-title__desc"
+    >{{ desc }}</div>
+    <div class="iov-pro-sub-title__help">
+      <slot
+        v-if="$slots.help"
+        name="help"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { isUrl, isBase64Image } from '@/utils'
+
+// icon
+const ICONS = {
+  1: 'https://prod-common-public.obs-helf.cucloud.cn/user/c72a1000000000128483477',
+  2: 'https://prod-common-public.obs-helf.cucloud.cn/user/d9d41000000000128477129',
+  3: 'https://prod-common-public.obs-helf.cucloud.cn/user/aec71000000000128477151',
+  4: 'https://prod-common-public.obs-helf.cucloud.cn/user/48311000000000128477185',
+  5: 'https://prod-common-public.obs-helf.cucloud.cn/user/66dc1000000000128483607',
+  6: 'https://prod-common-public.obs-helf.cucloud.cn/user/0a3c1000000000128477284'
+}
+
+export default {
+  name: 'IovProSubTitle',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    desc: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconStyle() {
+      if (!this.icon) {
+        return {}
+      }
+      // 如果传入的是链接
+      if (isUrl(this.icon)) {
+        return { backgroundImage: `url(${this.icon})` }
+      }
+      // 如果传入的是图片
+      if (isBase64Image(this.icon)) {
+        return { backgroundImage: `url(${this.icon})` }
+      }
+      return {
+        backgroundImage: `url(${ICONS[this.icon]})`
+      }
+    }
+  }
+}
+</script>

package/src/packages/submit-module/index.js

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

package/src/packages/submit-module/src/main.vue

@@ -0,0 +1,67 @@
+<script>
+export default {
+  name: 'IovProSubmitModule',
+  props: {
+    left: {
+      type: [String, Number],
+      default: 228
+    },
+    right: {
+      type: [String, Number],
+      default: 20
+    }
+  },
+  computed: {
+    offsetStyle() {
+      return {
+        left: this.left + 'px',
+        right: this.right + 'px'
+      }
+    }
+  },
+  mounted() {
+    this.setPreviousSiblingStyle()
+  },
+  methods: {
+    /**
+    * 设置上一个相邻元素margin-bttom
+    * @time 2024-12-15 13:28:03
+    */
+    setPreviousSiblingStyle() {
+      const containerElement = document.querySelector('.app-container')
+      const containerElementStyle = window.getComputedStyle(containerElement)
+      // 容器元素padding-bottom margin-bottom
+      const containerElementPaddingBottom = +containerElementStyle.paddingBottom.replace('px', '')
+      const containerElementMarginBottom = +containerElementStyle.marginBottom.replace('px', '')
+
+      // 获取当前组件的 DOM 元素
+      const currentElement = this.$el
+      const height = currentElement.offsetHeight - containerElementPaddingBottom - containerElementMarginBottom
+      // 获取当前组件的前一个兄弟元素
+      const previousSibling = currentElement.previousElementSibling
+      if (previousSibling) {
+        previousSibling.style.marginBottom = height + 'px'
+        return
+      }
+
+      // 如果当前组件的前一个兄弟元素不存在, 则获取当前组件的父元素
+      const parentElement = currentElement.parentElement
+      // 获取父元素的前一个兄弟元素
+      const previousParentSibling = parentElement ? parentElement.previousElementSibling : null
+      // 如果父元素的前一个兄弟元素存在
+      if (previousParentSibling) {
+        previousParentSibling.style.marginBottom = height + 'px'
+      }
+    }
+  },
+  render() {
+    return (
+      <div class='iov-pro-submit-module' style={this.offsetStyle}>
+        {
+          this.$slots.default
+        }
+      </div>
+    )
+  }
+}
+</script>

package/src/packages/table/index.js

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

package/src/packages/table/src/filter.vue

@@ -0,0 +1,89 @@
+<script>
+import { getComponentNames } from '@/utils/config-center'
+
+export default {
+  name: 'IovProTableFilter',
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      value: [],
+      isActived: false
+    }
+  },
+  methods: {
+    /**
+     * 点击重置方法
+     * @time 2024-11-21 20:17:46
+     */
+    onReset() {
+      // 先清空数据
+      this.value = []
+      // 标记当前不需要激活状态
+      this.isActived = false
+      // 抛出去重置方法
+      this.$emit('reset')
+      // 关闭popover
+      this.visible = false
+    },
+
+    /**
+     * 点击搜索方法
+     * @time 2024-11-21 20:18:49
+     */
+    onConfirm() {
+      // 如果啥都没输入，就不搜索
+      if (this.value.length === 0) return
+      // 标记当前需要激活状态
+      this.isActived = true
+      // 抛出去搜索方法
+      this.$emit('confirm', this.value)
+      // 关闭popover
+      this.visible = false
+    }
+  },
+  render() {
+    const [Popover, CheckboxGroup, Checkbox, Button] = getComponentNames(['popover', 'checkbox-group', 'checkbox', 'button'])
+    return (
+      <Popover
+        value={this.visible}
+        placement={this.placement}
+        width='120'
+        trigger='click'
+        popper-class='iov-pro-table-filter__popper'
+        onInput={val => (this.visible = val)}
+      >
+        <i
+          slot='reference'
+          class={{
+            'iov-pro-table-filter__icon': true,
+            'is-actived': this.isActived,
+            'iov-icon-filter': true
+          }}
+          size='12px'
+        />
+        <CheckboxGroup class='iov-pro-table-filter__checkbox-group' value={this.value} onInput={val => (this.value = val)}>
+          { // 遍历数据
+            this.column.filters && this.column.filters.map(item => (
+              <Checkbox class='iov-pro-table-filter__checkbox' label={item.value} disabled={item.disabled}>{item.label}</Checkbox>
+            ))
+          }
+        </CheckboxGroup>
+        <div class='iov-pro-table-filter__operation'>
+          <Button size='mini' onClick={this.onReset}>重置</Button>
+          <Button type='info' size='mini' onClick={this.onConfirm}>确定</Button>
+        </div>
+      </Popover>
+    )
+  }
+}
+</script>