iov-pro-components 0.0.3

package/src/packages/toolbar/src/setting.vue

@@ -0,0 +1,217 @@
+<script>
+import Draggable from 'vuedraggable'
+import { getComponentNames } from '@/utils/config-center'
+import { randomString } from '@/utils'
+
+export default {
+  name: 'IovProToolbarSetting',
+  props: {
+    placement: {
+      type: String,
+      default: ''
+    },
+    table: {
+      type: [Object, Function],
+      default: null
+    }
+  },
+  data() {
+    return {
+      settingVisible: false,
+      selectAll: false,
+      prevState: {
+        columns: [],
+        checked: []
+      },
+      tableColumns: [],
+      checkedColumns: []
+    }
+  },
+  mounted() {
+    // 初始化表头列
+    this.initTableColumns()
+  },
+  methods: {
+    /**
+     * 获取表格列数据
+     * @time 2024-11-27 16:18:44
+     */
+    initTableColumns() {
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 记录当前表格列
+      this.tableColumns = iovProTable.columns
+        .map(column => ({
+          label: column.label || column.type,
+          value: randomString(32),
+          disabled: column.keepInPlace,
+          target: column
+        }))
+      // 设置全选
+      this.onSelectAll(true)
+      // 重置历史数据
+      this.prevState = {
+        columns: [...this.tableColumns],
+        checked: [...this.checkedColumns]
+      }
+    },
+
+    /**
+     * 当复选框选中了
+     * @param  {Array} val 当前所有值
+     * @time 2024-11-27 17:12:07
+     */
+    onCheckboxSelected(val) {
+      // 设置当前选中的值
+      this.checkedColumns = val
+      // 如果当前是选中的状态
+      this.selectAll = val.length === this.tableColumns.length
+    },
+
+    /**
+     * 当选中了全部
+     * @param  {} data 参数说明
+     * @param  {参数类型} data 参数说明
+     * @return {返回类型} data 返回说明
+     * @time 2024-11-27 17:13:27
+     */
+    onSelectAll(val) {
+      // 设置当前值
+      this.selectAll = val
+      // 如果当前是选中的状态，则取出所有值。否则清空
+      this.checkedColumns = val
+        ? this.tableColumns.map(column => column.value)
+        : this.tableColumns.filter(column => column.disabled).map(column => column.value)
+    },
+
+    /**
+     * 恢复到预设
+     * @time 2024-11-27 18:04:28
+     */
+    onResetToDefault() {
+      // 取消全选状态
+      this.selectAll = false
+      // 清空选中项目
+      this.checkedColumns = []
+      // 重新生成表头数据
+      this.initTableColumns()
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 隐藏当前选中的数据
+      iovProTable.doLayout(this.tableColumns.map(column => column.target))
+      // 关闭弹出框
+      this.settingVisible = false
+    },
+
+    /**
+     * 确认用户选择的表头
+     * @time 2024-11-27 18:47:11
+     */
+    onConfirm() {
+      // 需要默认选中的列
+      const defaultCheckedColumns = this.tableColumns.filter(column => column.disabled)
+      // 如果一个都没有选中，则不让点确定
+      if (this.checkedColumns.length === defaultCheckedColumns.length) {
+        return
+      }
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 当前需要展示的key
+      const displayColumns = this.tableColumns
+        .filter(column => this.checkedColumns.includes(column.value))
+        .map(column => column.target)
+      // 隐藏当前选中的数据
+      iovProTable.doLayout(displayColumns)
+      // 记录当前选中的数据到历史数据中
+      this.prevState = {
+        columns: [...this.tableColumns],
+        checked: [...this.checkedColumns]
+      }
+      // 关闭弹框
+      this.settingVisible = false
+    },
+
+    /**
+     * 点击取消方法
+     * @time 2024-11-27 18:49:10
+     */
+    onCancel() {
+      // 关闭弹框
+      this.settingVisible = false
+      // 等弹框关闭了再恢复之前的数据
+      this.$nextTick(() => {
+        // 还原胡乱排序的表头
+        this.tableColumns = [...this.prevState.columns]
+        // 设置当前选中的值
+        this.onCheckboxSelected([...this.prevState.checked])
+      })
+    }
+  },
+  render() {
+    const [
+      Tooltip,
+      Popover,
+      Checkbox,
+      Link,
+      Button,
+      CheckboxGroup
+    ] = getComponentNames(['tooltip', 'popover', 'checkbox', 'link', 'button', 'checkbox-group'])
+    // 是否需要模态
+    const indeterminate = this.checkedColumns.length > 0 && this.checkedColumns.length < this.tableColumns.length
+    return (
+      <Popover
+        value={this.settingVisible}
+        width='184'
+        popper-class='iov-pro-toolbar__setting-popper'
+        onInput={val => (this.settingVisible = val)}
+      >
+        <Tooltip
+          slot='reference'
+          effect='dark'
+          content='设置'
+          placement={this.placement}
+        >
+          <i class={['iov-pro-toolbar__icon iov-icon-setting', this.settingVisible ? 'is-active' : ''].join(' ')} />
+        </Tooltip>
+        <div class='iov-pro-toolbar__setting'>
+          <div class='iov-pro-toolbar__setting-header'>
+            <Checkbox
+              value={this.selectAll}
+              indeterminate={indeterminate}
+              onInput={this.onSelectAll}
+            >列展示</Checkbox>
+            <Link type='primary' onClick={this.onResetToDefault}>恢复预设</Link>
+          </div>
+          <div class='iov-pro-toolbar__setting-body'>
+            <CheckboxGroup
+              value={this.checkedColumns}
+              onInput={this.onCheckboxSelected}
+            >
+              <Draggable
+                list={this.tableColumns}
+                item-key='value'
+                group='column'
+                handle='.iov-pro-toolbar__setting-item--drag'
+                filter='.undraggable'
+              >
+                { // 遍历表格列
+                  this.tableColumns.map(column => (
+                    <div class='iov-pro-toolbar__setting-item'>
+                      <Checkbox label={column.value} disabled={column.disabled}>{column.label}</Checkbox>
+                      <i class={['iov-pro-toolbar__setting-item--drag iov-icon-line-drag', column.disabled ? 'undraggable' : ''].join(' ')} />
+                    </div>
+                  ))
+                }
+              </Draggable>
+            </CheckboxGroup>
+          </div>
+          <div class='iov-pro-toolbar__setting-footer'>
+            <Button size='mini' onClick={this.onCancel}>取消</Button>
+            <Button type='info' size='mini' onClick={this.onConfirm}>确定</Button>
+          </div>
+        </div>
+      </Popover>
+    )
+  }
+}
+</script>

package/src/packages/toolbar/src/style.vue

@@ -0,0 +1,68 @@
+<script>
+import { getComponentNames } from '../../../utils/config-center'
+
+export default {
+  name: 'IovProToolbarStyle',
+  props: {
+    placement: {
+      type: String,
+      default: ''
+    },
+    table: {
+      type: [Object, Function],
+      default: null
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    /**
+     * 切换表格的是否展示border
+     * @param  {String} size 当前尺寸
+     * @time 2024-11-27 18:10:59
+     */
+    onChangeTableBorder(border) {
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 更新配置
+      iovProTable.updateTableConfig({
+        border: border === 'border',
+        outerBorder: border === 'none'
+      })
+    }
+  },
+  render() {
+    const [
+      Dropdown,
+      DropdownMenu,
+      DropdownItem,
+      Tooltip
+    ] = getComponentNames(['dropdown', 'dropdown-menu', 'dropdown-item', 'tooltip'])
+    return (
+      <Dropdown
+        trigger='click'
+        onCommand={this.onChangeTableBorder}
+        on={{
+          command: this.onChangeTableBorder,
+          'visible-change': val => (this.visible = val)
+        }}
+      >
+        <Tooltip
+          effect='dark'
+          content='样式'
+          placement={this.placement}
+        >
+          <i class={['iov-pro-toolbar__icon iov-icon-wand', this.visible ? 'is-active' : ''].join(' ')} />
+        </Tooltip>
+        <DropdownMenu slot='dropdown' class='iov-pro-toolbar__dropdown-menu'>
+          <DropdownItem command='none'>无分割线</DropdownItem>
+          <DropdownItem command='border'>有分割线</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    )
+  }
+}
+</script>

package/src/packages/toolbar/src/zoom.vue

@@ -0,0 +1,65 @@
+<script>
+import { getComponentNames } from '@/utils/config-center'
+
+export default {
+  name: 'IovProToolbarZoom',
+  props: {
+    placement: {
+      type: String,
+      default: ''
+    },
+    table: {
+      type: [Object, Function],
+      default: null
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    /**
+     * 切换表格的尺寸
+     * @param  {String} size 当前尺寸
+     * @time 2024-11-27 18:10:59
+     */
+    onChangeTableSize(size) {
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 更新配置
+      iovProTable.updateTableConfig({ size })
+    }
+  },
+  render() {
+    const [
+      Dropdown,
+      DropdownMenu,
+      DropdownItem,
+      Tooltip
+    ] = getComponentNames(['dropdown', 'dropdown-menu', 'dropdown-item', 'tooltip'])
+    return (
+      <Dropdown
+        trigger='click'
+        on={{
+          command: this.onChangeTableSize,
+          'visible-change': val => (this.visible = val)
+        }}
+      >
+        <Tooltip
+          effect='dark'
+          content='密度'
+          placement={this.placement}
+        >
+          <i class={['iov-pro-toolbar__icon iov-icon-zoom', this.visible ? 'is-active' : ''].join(' ')} />
+        </Tooltip>
+        <DropdownMenu slot='dropdown' class='iov-pro-toolbar__dropdown-menu'>
+          <DropdownItem command='medium'>默认</DropdownItem>
+          <DropdownItem command='small'>中等</DropdownItem>
+          <DropdownItem command='mini'>紧凑</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    )
+  }
+}
+</script>

package/src/router.js

@@ -0,0 +1,83 @@
+import VueRouter from 'vue-router'
+
+// 当前路由
+const routes = [
+  {
+    path: '/debug/column-tooltip',
+    name: 'ColumnTooltipDemo',
+    component: () => import('./views/column-tooltip.vue'),
+    meta: { title: '单元格提示' }
+  },
+  {
+    path: '/debug/description',
+    name: 'DescriptionDemo',
+    component: () => import('./views/description.vue'),
+    meta: { title: '描述组件' }
+  },
+  {
+    path: '/debug/detail',
+    name: 'DetailPageDemo',
+    component: () => import('./views/detail.vue'),
+    meta: { title: '描述' }
+  },
+  {
+    path: '/debug/enums',
+    name: 'EnumsDemo',
+    component: () => import('./views/enums.vue'),
+    meta: { title: '枚举' }
+  },
+  {
+    path: '/debug/export',
+    name: 'ExportDemo',
+    component: () => import('./views/export.vue'),
+    meta: { title: '导出' }
+  },
+  {
+    path: '/debug/link-group',
+    name: 'LinkGroupDemo',
+    component: () => import('./views/link-group.vue'),
+    meta: { title: '按钮组' }
+  },
+  {
+    path: '/debug/form-collapse',
+    name: 'FormCollapseDemo',
+    component: () => import('./views/form-collapse.vue'),
+    meta: { title: '表格收起/展开' }
+  },
+  {
+    path: '/debug/form',
+    name: 'FormDemo',
+    component: () => import('./views/form.vue'),
+    meta: { title: '表单' }
+  },
+  {
+    path: '/debug/table',
+    name: 'TableDemo',
+    component: () => import('./views/table.vue'),
+    meta: { title: '表格' }
+  },
+  {
+    path: '/debug/request',
+    name: 'RequestDemo',
+    component: () => import('./views/request.vue'),
+    meta: { title: '接口请求' }
+  },
+  {
+    path: '/debug/search-table',
+    name: 'SearchTableDemo',
+    component: () => import('./views/search-table.vue'),
+    meta: { title: '搜索表单' }
+  },
+  {
+    path: '/debug/toolbar',
+    name: 'ToolbarDemo',
+    component: () => import('./views/toolbar.vue'),
+    meta: { title: '工具栏' }
+  }
+]
+
+export default new VueRouter({
+  mode: 'history',
+  base: process.env.VUE_APP_ROUTER,
+  routes
+})

package/src/utils/config-center.js

@@ -0,0 +1,218 @@
+import { toUpperCamelCase } from './index'
+
+let Vue = null
+let componentConfig = {}
+
+/**
+ * 初始化方法
+ * @param  {Object} vue vue实例
+ * @time 2024-10-28 17:53:17
+ */
+export const init = (vue, config) => {
+  Vue = vue
+  componentConfig = config
+}
+
+/**
+ * 判断当前是否是ElementUI库
+ * @time 2024-10-28 17:52:27
+ */
+export function isElementUI() {
+  const {
+    $ELEMENT,
+    $loading,
+    $msgbox,
+    $alert,
+    $confirm,
+    $prompt,
+    $notify,
+    $message
+  } = Vue?.prototype || {}
+  return $ELEMENT && $loading && $msgbox && $alert && $confirm && $prompt && $notify && $message
+}
+
+/**
+ * 判断当前是否是AntDesign
+ * @time 2024-10-28 17:54:53
+ */
+export function isAntDesign() {
+  const {
+    $message,
+    $notification,
+    $info,
+    $success,
+    $error,
+    $warning,
+    $confirm,
+    $destroyAll
+  } = Vue?.prototype || {}
+  return $message && $notification && $info && $success && $error && $warning && $confirm && $destroyAll
+}
+
+/**
+ * 是否是组件支持的标签名
+ * @param  {String} tagName 标签名
+ * @time 2024-10-31 17:54:07
+ */
+const isSupportTagName = tagName => {
+  // 如果是elementUI
+  if (isElementUI()) {
+    // 字段映射
+    const ALIAS_MAP = {
+      'Button': 'Button',
+      'Link': 'Link',
+      'Input': 'Input',
+      'Row': 'Row',
+      'Col': 'Col',
+      'InputNumber': 'InputNumber',
+      'Checkbox': 'Checkbox',
+      'CheckboxButton': 'CheckboxButton',
+      'CheckboxGroup': 'CheckboxGroup',
+      'Radio': 'Radio',
+      'RadioButton': 'RadioButton',
+      'RadioGroup': 'RadioGroup',
+      'Select': 'Select',
+      'Option': 'Option',
+      'Cascader': 'Cascader',
+      'Switch': 'Switch',
+      'Slider': 'Slider',
+      'Rate': 'Rate',
+      'ColorPicker': 'ColorPicker',
+      'Transfer': 'Transfer',
+      'TimePicker': 'TimePicker',
+      'DatePicker': 'DatePicker',
+      'Upload': 'Upload',
+      'Dropdown': 'Dropdown',
+      'DropdownMenu': 'DropdownMenu',
+      'DropdownItem': 'DropdownItem',
+      'Tooltip': 'Tooltip',
+      'Tree': 'Tree',
+      'Tag': 'Tag',
+      'Tabs': 'Tabs',
+      'TabPane': 'TabPane',
+      'Table': 'Table',
+      'TableColumn': 'TableColumn',
+      'Form': 'Form',
+      'FormItem': 'FormItem',
+      'Pagination': 'Pagination',
+      'Popover': 'Popover'
+    }
+    return Object.keys(ALIAS_MAP).includes(tagName)
+  }
+  // 如果是AntDesign
+  if (isAntDesign()) {
+    // 字段映射
+    const ALIAS_MAP = {
+      'Button': 'Button',
+      'Link': 'Link',
+      'Icon': 'Icon',
+      'Row': 'Row',
+      'Col': 'Col',
+      'Input': 'Input',
+      'InputNumber': 'InputNumber',
+      'Checkbox': 'Checkbox',
+      'Radio': 'Radio',
+      'Select': 'Select',
+      'Option': 'Option',
+      'Cascader': 'Cascader',
+      'Switch': 'Switch',
+      'Slider': 'Slider',
+      'Rate': 'Rate',
+      'ColorPicker': 'ColorPicker',
+      'Transfer': 'Transfer',
+      'TimePicker': 'TimePicker',
+      'DatePicker': 'DatePicker',
+      'Upload': 'Upload',
+      'TreeSelect': 'TreeSelect',
+      'Dropdown': 'Dropdown',
+      'DropdownMenu': 'Menu',
+      'DropdownItem': 'MenuItem',
+      'Tooltip': 'Tooltip',
+      'Tree': 'Tree',
+      'Tag': 'Tag',
+      'Tabs': 'Tabs',
+      'TabPane': 'TabPane',
+      'Table': 'Table',
+      'TableColumn': 'TableColumn',
+      'Form': 'FormModel',
+      'FormItem': 'FormModelItem',
+      'Pagination': 'Pagination',
+      'Popover': 'Popover'
+    }
+    return Object.keys(ALIAS_MAP).includes(tagName)
+  }
+  return false
+}
+
+/**
+ * 获取组件名称
+ * @param  {String} componentTagName 组件tag名称
+ * @time 2024-10-28 17:50:19
+ */
+export const getComponentName = componentTagName => {
+  // 首字母大写,并且去掉中划线的格式
+  const tagName = toUpperCamelCase(componentTagName)
+  // 如果当前是ElementUI
+  if (isElementUI() && isSupportTagName(tagName)) {
+    return `El${tagName}`
+  }
+  // 如果当前是AntDesign
+  if (isAntDesign() && isSupportTagName(tagName)) {
+    return `A${tagName}`
+  }
+  return componentTagName
+}
+
+/**
+ * 获取组件名称
+ * @param  {Array} tagNames 组件名
+ * @time 2024-11-13 14:18:18
+ */
+export const getComponentNames = componentTagNames => {
+  return componentTagNames.map(getComponentName)
+}
+
+/**
+ * 获取组件配置
+ * @param  {String} componentTagName 组件名
+ * @time 2025-05-09 09:46:46
+ */
+export const getComponentConfig = componentTagName => componentConfig[componentTagName]
+
+/**
+ * 是否是需要过滤的属性数据key
+ * @param  {String} tagName 标签名称
+ * @param  {String} propKey 属性key
+ * @time 2024-12-10 09:34:34
+ */
+export const isFilteredDataKey = (tagName, propKey) => {
+  return !!getFilteredDataType(tagName, propKey)
+}
+
+/**
+ * 获取当前需要过滤的数据类型
+ * @param  {String} tagName 标签名称
+ * @param  {String} propKey 属性key
+ * @time 2024-12-10 09:36:38
+ */
+export const getFilteredDataType = (tagName, propKey) => {
+  // 将标签名称转换成大驼峰
+  const tagNameUpperCase = toUpperCamelCase(tagName)
+  // 如果当前是ElementUI
+  if (isElementUI()) {
+    // 当前过滤的数据
+    const FILTERED_TYPE = {
+      'Select': {
+        options: ['remoteMethod', 'filterMethod']
+      }
+    }
+    // 如果没找到对应字段
+    if (!FILTERED_TYPE[tagNameUpperCase]) {
+      return null
+    }
+    // 返回需要过滤的key
+    return Object
+      .keys(FILTERED_TYPE[tagNameUpperCase])
+      .find(key => FILTERED_TYPE[tagNameUpperCase][key].includes(propKey))
+  }
+}