iov-pro-components 0.0.3

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

@@ -0,0 +1,237 @@
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+import ProForm from '@/packages/form'
+import Space from '@/packages/space'
+import ProFormCollapse from '@/packages/form-collapse'
+import { toUpperCamelCase } from '@/utils'
+import { getComponentNames } from '@/utils/config-center'
+
+export default {
+  name: 'IovProSearchTableInnerTabs',
+  provide() {
+    return {
+      isInnerTable: true,
+      innerTableConfig: {
+        table: this.config.table,
+        pagination: this.config.pagination
+      }
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: '请输入标题'
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      tabName: 'tab-0'
+    }
+  },
+  computed: {
+    /**
+     * 表单配置
+     * @time 2024-11-18 09:18:54
+     */
+    formConfig() {
+      return {
+        grid: true,
+        span: 6,
+        gutter: 16,
+        collapse: true,
+        maxLine: 2,
+        ...this.config.form
+      }
+    },
+
+    /**
+     * 给表单组件增加slots以及label-width
+     * @time 2024-11-26 20:10:08
+     */
+    normalizedFormItems() {
+      return this.formItems.map(item => {
+        // 浅拷贝一下对象
+        const itemCopy = { ...item }
+        // 如果当前是如下组件，则默认需要插槽
+        if (![
+          'Radio',
+          'Checkbox',
+          'RadioGroup',
+          'CheckboxGroup'
+        ].includes(toUpperCamelCase(item.type))) {
+          // label宽度
+          itemCopy['labelWidth'] = '0px'
+          // 设置文字插槽
+          itemCopy['slots'] = {
+            component: {
+              prefixLabel: `${item.name}-prefix-label`
+            }
+          }
+        }
+        // 删除reloadRequest属性
+        delete itemCopy['reloadRequest']
+        return itemCopy
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => this.onSearch())
+  },
+  methods: {
+    /**
+     * 搜索表单
+     * @time 2024-11-18 09:43:49
+     */
+    onSearch() {
+      // 遍历子组件
+      this.$slots.default.forEach(({ componentInstance }) => {
+        // 如果组件实例存在
+        if (componentInstance) {
+          // 赋值
+          componentInstance.formData = this.formData
+          // 重新赋值表单数据
+          componentInstance.queryData = cloneDeep(this.formData)
+          // 重置表单分页数据
+          componentInstance.$refs.table.reset()
+        }
+      })
+    },
+
+    /**
+     * 重置表单数据
+     * @time 2024-11-18 09:49:31
+     */
+    onReset() {
+      // 重置表单数据
+      this.$refs.form.resetFields()
+      // 接口重新加载数据
+      this.$nextTick(() => this.onSearch())
+    },
+
+    /**
+     * 当表单字段发生改变
+     * @param  {Object} newValue 新值
+     * @param  {Object} oldValue 旧值
+     * @time 2024-12-16 16:06:23
+     */
+    onFormChange(newValue, oldValue) {
+      // 重新加载接口的字段
+      const reloadFields = this.formItems.filter(item => item.reloadRequest).map(item => item.name)
+      // 是否需要重新加载
+      const needReloadRequest = reloadFields.some(field => {
+        return Array.isArray(field)
+          ? field.some(item => newValue[item] !== oldValue[item])
+          : newValue[field] !== oldValue[field]
+      })
+      // 只要任意一个字段发生改变
+      if (needReloadRequest) {
+        // 接口重新加载数据
+        this.onSearch()
+      }
+    }
+  },
+  render() {
+    const [
+      Tabs,
+      TabPane,
+      Col,
+      Button
+    ] = getComponentNames(['tabs', 'tab-pane', 'col', 'button'])
+
+    // 生成pro表单
+    const renderProForm = ({ status, toggleStatus, needCollapse }) => {
+      // 插槽
+      const scopedSlots = this.config.simple ? {} : {
+        append: () => (
+          <Col span={this.formConfig.span}>
+            <Space class='search-table__append' direction='horizontal' space={8}>
+              <Button type='info' size='small' round onClick={this.onSearch}>查询</Button>
+              <Button size='small' round onClick={this.onReset}>重置</Button>
+              { status && needCollapse && <span class={['search-table__toggle-status', status].join(' ')} onClick={toggleStatus}>{status === 'expand' ? '收起' : '展开'}筛选项 <i class={ status === 'expand' ? 'iov-icon-arrow-up' : 'iov-icon-arrow-down'} /></span> }
+            </Space>
+          </Col>
+        )
+      }
+      // 遍历所有的prefixLabel
+      this.normalizedFormItems
+        .filter(item => item.slots && item.slots.component && item.slots.component.prefixLabel)
+        .forEach(item => {
+          // 塞入插槽
+          scopedSlots[item.slots.component.prefixLabel] = () => item.label
+        })
+      return (
+        <ProForm
+          ref='form'
+          data-source={this.dataSource}
+          value={this.formData}
+          items={this.normalizedFormItems}
+          config={this.formConfig}
+          onInput={val => (this.formData = val)}
+          onChange={this.onFormChange}
+          scopedSlots={scopedSlots}
+        />
+      )
+    }
+    return (
+      <div class='inner-tabs'>
+        <div class='inner-tabs__module'>
+          <div class='inner-tabs__title-main'>
+            { this.$slots.title ? this.$slots.title : <span class='inner-tabs__title'>{this.title}</span> }
+            { this.$slots.subTitle ? this.$slots.subTitle : this.subTitle ? <span class='inner-tabs__sub-title'>{this.subTitle}</span> : null }
+          </div>
+          { // 如果需要折叠，则展示需要折叠的组件
+            this.formConfig.collapse
+              ? (
+                <ProFormCollapse
+                  buttonSpan={this.formConfig.span}
+                  maxLine={this.formConfig.maxLine}
+                  scopedSlots={{
+                    default: renderProForm
+                  }}
+                />
+              )
+              : renderProForm({})
+          }
+        </div>
+        <div class='inner-tabs__module'>
+          <Tabs
+            value={this.tabName}
+            onInput={val => (this.tabName = val)}
+          >
+            { // 遍历插槽的值
+              this.$slots.default
+                .filter(comp => !!comp.tag)
+                .map((comp, index) => {
+                  const label = comp.componentOptions.propsData.title
+                  return (
+                    <TabPane
+                      label={label}
+                      name={`tab-${index}`}
+                    >{comp}</TabPane>
+                  )
+                })
+            }
+          </Tabs>
+        </div>
+      </div>
+    )
+  }
+}
+</script>

package/src/packages/search-table/src/main.vue

@@ -0,0 +1,472 @@
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+import lodashGet from 'lodash/get'
+import ProForm from '@/packages/form'
+import ProTable from '@/packages/table'
+import { PAGINATION_EVENTS, TABLE_EVENTS } from '@/packages/table/src/main.vue'
+import Toolbar from '@/packages/toolbar'
+import Space from '@/packages/space'
+import ProFormCollapse from '@/packages/form-collapse'
+import { toUpperCamelCase } from '@/utils'
+import { getComponentNames } from '@/utils/config-center'
+import isEqual from 'lodash/isEqual'
+
+export default {
+  name: 'IovProSearchTable',
+  inject: {
+    isInnerTable: { value: 'isInnerTable', default: false },
+    innerTableConfig: { value: 'innerTableConfig', default: {}}
+  },
+  props: {
+    title: {
+      type: String,
+      default: '请输入标题'
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    tableColumns: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    // 接口请求方法
+    request: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      queryData: {},
+      tableAdvanceData: {}
+    }
+  },
+  computed: {
+    /**
+     * 表单配置
+     * @time 2024-11-18 09:18:54
+     */
+    formConfig() {
+      return {
+        grid: true,
+        span: 6,
+        gutter: 16,
+        collapse: true,
+        maxLine: 2,
+        space: 16,
+        ...this.config.form
+      }
+    },
+
+    /**
+     * 给表单组件增加slots以及label-width
+     * @time 2024-11-26 20:10:08
+     */
+    normalizedFormItems() {
+      return this.formItems.map(item => {
+        // 浅拷贝一下对象
+        const itemCopy = { ...item }
+        // 如果当前是如下组件，则默认需要插槽
+        if (![
+          'Radio',
+          'Checkbox',
+          'RadioGroup',
+          'CheckboxGroup'
+        ].includes(toUpperCamelCase(item.type))) {
+          // label宽度
+          itemCopy['labelWidth'] = '0px'
+          // 设置文字插槽
+          itemCopy['slots'] = {
+            component: {
+              prefixLabel: `${item.name}-prefix-label`
+            }
+          }
+        }
+        // 如果当前是简易模式
+        if (this.config.simple) {
+          // 如果无监听的事件
+          if (!itemCopy.on) {
+            itemCopy.on = {}
+          }
+          // 当值发生改变时触发校验
+          const onSearchByValueChange = () => {
+            // 等数据更新后再判断
+            this.$nextTick(() => {
+              // 如果前后值相等，则不处理
+              if (isEqual(this.formData, this.queryData)) {
+                return
+              }
+              // 如果值不相等
+              this.onSearch()
+            })
+          }
+          // 如果是输入框，则绑定blur方法
+          if (toUpperCamelCase(item.type) === 'Input') {
+            itemCopy.on['blur'] = onSearchByValueChange
+          }
+          // 绑定change方法
+          itemCopy.on['change'] = onSearchByValueChange
+        }
+        // 删除reloadRequest属性
+        delete itemCopy['reloadRequest']
+        return itemCopy
+      })
+    },
+
+    /**
+     * 表格配置如果是tag则需要按照不同tag类型进行大小设定
+     * @time 2024-12-10 10:10:39
+     */
+    normalizedTableColumns() {
+      return this.tableColumns.map(item => {
+        // 浅拷贝一下对象
+        const itemCopy = { ...item }
+        // 如果当前类型是tag
+        if (itemCopy.type === 'tag') {
+          // 如果没有config配置，则初始化
+          if (!itemCopy.config) {
+            itemCopy.config = {}
+          }
+          // 设置hit属性
+          itemCopy.config['hit'] = true
+          // 如果当前是dot模式,并且未设置
+          if ([undefined, null].includes(itemCopy.config.size)) {
+            // 如果当前是dot模式,则默认是medium，否则是small
+            itemCopy.config.size = [undefined, null].includes(itemCopy.config.dot) ? 'mini' : 'medium'
+          }
+        }
+        return itemCopy
+      })
+    },
+
+    /**
+     * 表格配置
+     * @time 2024-11-18 09:26:23
+     */
+    tableConfig() {
+      return {
+        pagination: {
+          ...(this.innerTableConfig.pagination || {}),
+          ...(this.config.pagination || {})
+        },
+        table: {
+          outerBorder: true,
+          ...(this.innerTableConfig.table || {}),
+          ...(this.config.table || {})
+        }
+      }
+    },
+
+    /**
+     * 表格请求配置
+     * @time 2024-11-18 09:54:07
+     */
+    tableRequest() {
+      return {
+        reloadOnParamsChange: true,
+        ...this.request,
+        api: async params => {
+          // 触发请求前事件
+          this.$emit('before-request', params)
+          // 获取接口请求接口
+          const respData = await this.request.api(params)
+          // 触发请求后事件
+          this.$emit('after-request', respData)
+          return respData
+        },
+        params: {
+          ...this.queryData,
+          ...(this.request.params || {})
+        }
+      }
+    },
+
+    /**
+     * 绑定表格的事件
+     * @time 2025-01-09 17:41:50
+     */
+    bindTableEvent() {
+      // 当前事件
+      const EVENTS = [
+        ...PAGINATION_EVENTS,
+        ...TABLE_EVENTS
+      ]
+      return EVENTS.reduce(
+        (memo, eventKey) => {
+          // 开始透传事件
+          memo[eventKey] = (...args) => {
+            // 如果当前是过滤数据
+            if (eventKey === 'filter-change') {
+              this.onFilterChange(...args)
+            }
+            // 抛出事件
+            this.$emit(eventKey, ...args)
+          }
+          // 返回事件
+          return memo
+        }, []
+      )
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.queryData = cloneDeep(this.formData)
+    })
+  },
+  methods: {
+    /**
+     * 搜索表单
+     * @time 2024-11-18 09:43:49
+     */
+    onSearch() {
+      // 深拷贝一份对象
+      this.queryData = cloneDeep(this.formData)
+      // 重置表格分页数据
+      this.$refs.table.reset()
+    },
+
+    /**
+     * 刷新表格数据
+     * @time 2024-11-21 15:52:13
+     */
+    refresh() {
+      // 如果数据相同，则需要手动刷新
+      if (isEqual(this.queryData, this.formData)) {
+        this.$refs.table.refresh()
+      } else {
+        // 深拷贝一份对象
+        this.queryData = cloneDeep(this.formData)
+      }
+    },
+
+    /**
+     * 重置表单数据
+     * @time 2024-11-18 09:49:31
+     */
+    onReset() {
+      // 重置表单数据
+      this.$refs.form.resetFields()
+      // 接口重新加载数据
+      this.$nextTick(() => {
+        this.queryData = cloneDeep(this.formData)
+        // 重置表格分页数据
+        this.$refs.table.reset()
+      })
+    },
+
+    /**
+     * 当表单字段发生改变
+     * @param  {Object} newValue 新值
+     * @param  {Object} oldValue 旧值
+     * @time 2024-12-16 16:06:23
+     */
+    onFormChange(newValue, oldValue) {
+      // 重新加载接口的字段
+      const reloadFields = this.formItems.filter(item => item.reloadRequest).map(item => item.name)
+      // 是否需要重新加载
+      const needReloadRequest = reloadFields.some(field => {
+        return Array.isArray(field)
+          ? field.some(item => newValue[item] !== oldValue[item])
+          : newValue[field] !== oldValue[field]
+      })
+      // 只要任意一个字段发生改变
+      if (needReloadRequest) {
+        // 接口重新加载数据
+        this.queryData = cloneDeep(this.formData)
+      }
+    },
+
+    /**
+     * 当筛选字段发生变化
+     * @param  {Object} column 表格字段
+     * @param  {String} value  当前选中的值
+     * @time 2025-02-18 13:49:55
+     */
+    onFilterChange(column, value) {
+      this.$set(this.tableAdvanceData, column.prop, value)
+    }
+  },
+  render() {
+    const [
+      Col,
+      Button
+    ] = getComponentNames(['col', 'button'])
+
+    // 生成pro表单
+    const renderProForm = ({ status, toggleStatus, needCollapse }) => {
+      // 插槽
+      const scopedSlots = this.config.simple ? {} : {
+        append: () => (
+          <Col span={this.formConfig.span}>
+            <Space class='search-table__append' direction='horizontal' space={8}>
+              <Button type='info' size='small' round onClick={this.onSearch}>查询</Button>
+              <Button size='small' round onClick={this.onReset}>重置</Button>
+              { status && needCollapse && <span class={['search-table__toggle-status', status].join(' ')} onClick={toggleStatus}>{status === 'expand' ? '收起' : '展开'}筛选项 <i class={ status === 'expand' ? 'iov-icon-arrow-up' : 'iov-icon-arrow-down'} /></span> }
+            </Space>
+          </Col>
+        )
+      }
+      // 遍历所有的prefixLabel
+      this.normalizedFormItems
+        .filter(item => item.slots && item.slots.component && item.slots.component.prefixLabel)
+        .forEach(item => {
+          // 塞入插槽
+          scopedSlots[item.slots.component.prefixLabel] = () => item.label
+        })
+      return (
+        <ProForm
+          ref='form'
+          data-source={this.dataSource}
+          value={this.formData}
+          items={this.normalizedFormItems}
+          config={this.formConfig}
+          onInput={val => (this.formData = val)}
+          onChange={this.onFormChange}
+          scopedSlots={scopedSlots}
+        />
+      )
+    }
+
+    // 生成pro表格
+    const renderProTable = () => (
+      <ProTable
+        ref='table'
+        columns={this.normalizedTableColumns}
+        request={this.tableRequest}
+        config={this.tableConfig}
+        scopedSlots={this.$scopedSlots}
+        on={this.bindTableEvent}
+      />
+    )
+
+    // 生成actionbar
+    const renderActionBar = () => (
+      this.$scopedSlots['action-bar']
+        ? this.$scopedSlots['action-bar']({
+          data: cloneDeep({
+            ...this.queryData,
+            ...this.tableAdvanceData
+          }),
+          ref: {
+            form: () => lodashGet(this.$refs.form, '$refs.form'),
+            table: () => lodashGet(this.$refs.table, '$refs.table')
+          }
+        }) : this.$slots['action-bar']
+    )
+
+    // 如果内嵌到inner-tabs组件中
+    if (this.isInnerTable) {
+      return (
+        <div class='search-table'>
+          <div class='search-table__module'>
+            <div class='search-table__row'>
+              <div class='search-table__action-bar'>
+                {renderActionBar()}
+              </div>
+            </div>
+            {renderProTable()}
+          </div>
+        </div>
+      )
+    }
+
+    // 如果是简单模式
+    if (this.config.simple) {
+      return (
+        <div class='search-table'>
+          <div class='search-table__module'>
+            <iov-pro-space space='12'>
+              <div class='search-table__row'>
+                {renderProForm({})}
+                <div class='search-table__action-bar'>
+                  {renderActionBar()}
+                </div>
+              </div>
+              {renderProTable()}
+            </iov-pro-space>
+          </div>
+        </div>
+      )
+    }
+
+    // 如果没有插槽
+    if (!this.$slots['action-bar'] && !this.$scopedSlots['action-bar']) {
+      return (
+        <div class='search-table'>
+          <div class='search-table__module'>
+            <div class='search-table__title-main'>
+              <span class='search-table__title'>{this.$slots.title || this.title}</span>
+              <span class='search-table__sub-title'>{this.$slots.subTitle || this.subTitle}</span>
+            </div>
+            <iov-pro-space space='16'>
+              { // 如果需要折叠，则展示需要折叠的组件
+                this.formConfig.collapse
+                  ? (
+                    <ProFormCollapse
+                      buttonSpan={this.formConfig.span}
+                      maxLine={this.formConfig.maxLine}
+                      scopedSlots={{
+                        default: renderProForm
+                      }}
+                    />
+                  )
+                  : renderProForm({})
+              }
+              {renderProTable()}
+            </iov-pro-space>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div class='search-table'>
+        <div class='search-table__module'>
+          <div class='search-table__title-main'>
+            { this.$slots.title ? this.$slots.title : <span class='search-table__title'>{this.title}</span> }
+            { this.$slots.subTitle ? this.$slots.subTitle : this.subTitle ? <span class='search-table__sub-title'>{this.subTitle}</span> : null }
+          </div>
+          { // 如果需要折叠，则展示需要折叠的组件
+            this.formConfig.collapse
+              ? (
+                <ProFormCollapse
+                  buttonSpan={this.formConfig.span}
+                  maxLine={this.formConfig.maxLine}
+                  scopedSlots={{
+                    default: renderProForm
+                  }}
+                />
+              )
+              : renderProForm({})
+          }
+        </div>
+        <div class='search-table__module'>
+          <div class='search-table__bar'>
+            <div class='search-table__action-bar'>
+              {renderActionBar()}
+            </div>
+            <div class='search-table__toolbar'>
+              <Toolbar config={this.config.toolbar} table={() => this.$refs.table} />
+            </div>
+          </div>
+          {renderProTable()}
+        </div>
+      </div>
+    )
+  }
+}
+</script>