iov-pro-components 0.0.3

package/src/packages/dialog-select/src/main.vue

@@ -0,0 +1,308 @@
+<template>
+  <el-dialog
+    ref="dialog"
+    :visible.sync="showDialog"
+    :title="title"
+    width="1096px"
+    class="iov-pro-dialog-select"
+    :close-on-click-modal="false"
+    append-to-body
+    @close="onClose"
+  >
+    <div
+      v-if="showDialog"
+      ref="content"
+      class="iov-pro-dialog-select__table"
+    >
+      <el-tabs
+        v-model="activeName"
+        type="card"
+        size="small"
+      >
+        <div class="iov-pro-dialog-select__filter">
+          <el-input
+            v-model="filterText"
+            :placeholder="placeholder"
+            prefix-icon="iov-icon-search"
+            size="small"
+          />
+        </div>
+        <el-tab-pane
+          label="全部"
+          name="0"
+        >
+          <IovProTable
+            ref="unselect"
+            :columns="unselectColumns"
+            :data-source="unselectList"
+            :config="{table: { border: true, size: 'small', rowKey, maxHeight: tableHeight }, pagination: false}"
+            @selection-change="onChangeSelection"
+          />
+        </el-tab-pane>
+        <el-tab-pane
+          :label="`本次已选 (${selectedData.length})`"
+          type="card"
+          name="1"
+        >
+          <IovProTable
+            ref="selected"
+            :columns="selectedColumns"
+            :data-source="selectedList"
+            :config="{table: { border: true, size: 'small', maxHeight: tableHeight }, pagination: false}"
+          >
+            <template #operation="scope">
+              <el-link
+                type="primary"
+                @click="onRemove(scope.row)"
+              >移除</el-link>
+            </template>
+          </IovProTable>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <template slot="footer">
+      <el-button
+        round
+        size="small"
+        @click="showDialog = false"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        round
+        size="small"
+        @click="onConfirm"
+      >确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+export default {
+  name: 'IovProDialogSelect',
+  props: {
+    value: {
+      type: Array,
+      default: () => ([])
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    rowKey: {
+      type: String,
+      default: ''
+    },
+    // 过滤字段
+    filterField: {
+      type: Array,
+      default: () => ([])
+    },
+    // 全部列scheme
+    unselectColumns: {
+      type: Array,
+      default: () => ([])
+    },
+    // 已选列scheme
+    selectedColumns: {
+      type: Array,
+      default: () => ([])
+    },
+    // 全部数据列表
+    data: {
+      type: Array,
+      default: () => ([])
+    },
+    placeholder: {
+      type: String,
+      default: '请输入关键字'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      activeName: '0',
+      filterText: '',
+      selectedData: [],
+      tableHeight: 'auto'
+    }
+  },
+  computed: {
+    unselectList() {
+      const data = cloneDeep(this.data)
+      // 如果切换到已选择tab
+      if (this.activeName === '1') {
+        return data
+      }
+      // 如果当前没有过滤数据
+      if ([null, undefined, ''].includes(this.filterText) || this.filterField.length === 0) {
+        return data
+      }
+      // 返回过滤后的数据
+      return data.filter(item => {
+        return this.filterField.some(name => {
+          return item[name].indexOf(this.filterText) >= 0
+        })
+      })
+    },
+    selectedList() {
+      // 如果切换到未选择tab
+      if (this.activeName === '0') {
+        return this.selectedData
+      }
+      // 如果当前没有过滤数据
+      if ([null, undefined, ''].includes(this.filterText) || this.filterField.length === 0) {
+        return this.selectedData
+      }
+      // 返回过滤后的数据
+      return this.selectedData.filter(item => {
+        return this.filterField.some(name => {
+          return item[name].indexOf(this.filterText) >= 0
+        })
+      })
+    }
+  },
+  watch: {
+    visible(val) {
+      this.showDialog = val
+      if (val) {
+        this.$nextTick(() => {
+          this.selectedData = this.value
+          this.$refs.unselect.$refs.table.clearSelection()
+          this.selectedData.forEach(row => {
+            this.$refs.unselect.$refs.table.toggleRowSelection(row)
+          })
+          this.initHeight()
+        })
+      } else {
+        this.filterText = ''
+        this.activeName = '0'
+        this.selectedData = []
+        this.$refs.unselect.$refs.table.clearSelection()
+      }
+    },
+    activeName() {
+      this.filterText = ''
+    }
+  },
+  methods: {
+    /**
+    * 初始化弹窗内容高度
+    * @time 2025-04-10 15:00:23
+    */
+    initHeight() {
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        const dialogBodyHeight = this.getDialogBodyHeight()
+        const { tabHeaderHeight, tabFilterHeight, contentHeight } = this.getDialogContentHeight()
+        if (contentHeight >= dialogBodyHeight) {
+          this.tableHeight = Math.ceil((dialogBodyHeight - tabHeaderHeight - tabFilterHeight)) + 'px'
+          // 固定弹窗内容高度
+          this.$refs.content.style.height = dialogBodyHeight + 'px'
+          this.$refs.unselect.$refs.table.doLayout()
+          this.setDialogFooterShadow()
+        } else {
+          // 固定弹窗内容高度
+          this.$refs.content.style.height = contentHeight + 'px'
+          this.tableHeight = 'auto'
+        }
+      }, 100)
+    },
+
+    /**
+    * 设置弹窗按钮区域投影
+    * @time 2025-04-24 19:28:27
+    */
+    setDialogFooterShadow() {
+      const footer = this.$refs.dialog.$el.querySelector('.el-dialog__footer')
+      footer.style.boxShadow = '0px 0px 12px 0px rgba(196, 198, 207, 0.21)'
+    },
+
+    /**
+    * 弹窗内部高度
+    * @time 2025-04-23 15:31:29
+    */
+    getDialogBodyHeight() {
+      const body = this.$refs.dialog.$el.querySelector('.el-dialog__body')
+      const style = window.getComputedStyle(body)
+      const height = Math.ceil(+style.maxHeight.replace('px', ''))
+      return height
+    },
+
+    /**
+    * 弹窗内容高度
+    * @time 2025-04-23 15:32:53
+    */
+    getDialogContentHeight() {
+      const tabHeader = this.$refs.content.querySelector('.el-tabs__header')
+      const tabFilter = this.$refs.content.querySelector('.iov-pro-dialog-select__filter')
+      const tabHeaderStyle = window.getComputedStyle(tabHeader)
+      const tabFilterStyle = window.getComputedStyle(tabFilter)
+      const contentStyle = window.getComputedStyle(this.$refs.content)
+      return {
+        // tab高度 height + margin-bottom + border-bottom-width
+        tabHeaderHeight: Math.ceil(+tabHeaderStyle.height.replace('px', '')) + Math.ceil(+tabHeaderStyle.marginBottom.replace('px', '') + 1),
+        // 搜索框高度
+        tabFilterHeight: Math.ceil(+tabFilterStyle.height.replace('px', '')) + Math.ceil(+tabFilterStyle.marginBottom.replace('px', '')),
+        // 内容总高度 包括tab + 搜索框 + 表格
+        contentHeight: Math.ceil(+contentStyle.height.replace('px', ''))
+      }
+    },
+
+    /**
+    * 表格选择事件
+    * @param  {arr} selection 已选择的项
+    * @time 2025-03-17 19:56:24
+    */
+    onChangeSelection(selection) {
+      this.selectedData = cloneDeep(selection) || []
+    },
+
+    /**
+    * 除移数据
+    * @param  {obj} row 当前行数据
+    * @time 2024-12-20 13:59:57
+    */
+    onRemove(row) {
+      // 过滤出本次不需要删除的数据
+      const selectedData = this.selectedData.filter(item => item[this.rowKey] !== row[this.rowKey])
+      // 清空表格选择的数据
+      this.$refs.unselect.$refs.table.clearSelection()
+      // 重新赋值选择的数据
+      selectedData.forEach(row => {
+        this.$refs.unselect.$refs.table.toggleRowSelection(row)
+      })
+    },
+
+    /**
+    * 关闭弹窗
+    * @time 2025-03-17 19:56:54
+    */
+    onClose() {
+      this.$emit('update:visible', false)
+    },
+
+    /**
+    * 确定事件
+    * @time 2024-12-20 14:20:19
+    */
+    onConfirm() {
+      const selectedData = this.selectedData.map(item => {
+        // 如果已选择的数据中包含其他字段, 则使用初始传进来的数据
+        const val = this.value.filter(row => item[this.rowKey] === row[this.rowKey])
+        if (val.length > 0) {
+          return val[0]
+        }
+        return item
+      })
+      this.$emit('input', selectedData)
+      this.onClose()
+    }
+  }
+}
+</script>

package/src/packages/display/index.js

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

package/src/packages/display/src/main.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    v-if="isLoaded"
+    v-show="isVisible"
+    class="iov-pro-display"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IovProDisplay',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isVisible: false,
+      isLoaded: false
+    }
+  },
+  watch: {
+    /**
+     * 监听visible变化
+     * @time 2024-12-31 09:36:37
+     */
+    visible: {
+      handler(val) {
+        // 重新赋值
+        this.isVisible = val
+        // 如果当前已经展示
+        if (val) {
+          this.isLoaded = true
+        }
+      },
+      immediate: true
+    }
+  }
+}
+</script>

package/src/packages/enums/index.js

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

package/src/packages/enums/src/main.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  name: 'IovProEnums',
+  props: {
+    value: {
+      type: [Number, String, Boolean],
+      default: null
+    },
+    enums: {
+      type: Array,
+      default: () => []
+    }
+  },
+  render() {
+    // 如果有返回数据，则不渲染
+    if ([null, undefined].includes(this.value)) {
+      return null
+    }
+    // 取出枚举字段渲染
+    return <span>{ this.enums.find(item => item.value === this.value)?.label }</span>
+  }
+}
+</script>

package/src/packages/export/index.js

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