vxe-pc-ui 4.6.49 → 4.7.0

package/packages/list-design/src/layout-preview.ts

@@ -1,190 +0,0 @@
-import { h, inject, ref, watch, onMounted, createCommentVNode, nextTick, computed } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { VxeUI, getI18n } from '../../ui'
-import { errLog } from '../../ui/src/log'
-import VxeFormComponent from '../../form/src/form'
-import XEUtils from 'xe-utils'
-
-import { VxeListDesignConstructor, VxeListDesignPrivateMethods } from '../../../types'
-import type { VxeGridInstance, VxeGridPropTypes } from '../../../types/components/grid'
-import type { VxeTableEvents, VxeTablePropTypes } from '../../../types/components/table'
-
-export default defineVxeComponent({
-  name: 'ListDesignLayoutView',
-  props: {},
-  emits: [],
-  setup () {
-    const VxeTableGridComponent = VxeUI.getComponent('vxe-grid')
-
-    const $xeListDesign = inject<(VxeListDesignConstructor & VxeListDesignPrivateMethods) | null>('$xeListDesign', null)
-
-    if (!$xeListDesign) {
-      return () => []
-    }
-
-    const { reactData: listDesignReactData } = $xeListDesign
-
-    const refGrid = ref<VxeGridInstance>()
-
-    const tableData = ref<VxeTablePropTypes.Data>([])
-
-    const computeFormItems = computed(() => {
-      const { searchFormItems } = listDesignReactData
-      if (searchFormItems.length) {
-        return searchFormItems.concat([
-          {
-            field: 'active',
-            title: '',
-            folding: false,
-            collapseNode: searchFormItems.some(item => item.folding),
-            itemRender: {
-              name: 'VxeButtonGroup',
-              options: [
-                { content: '查询', icon: 'vxe-icon-search', status: 'primary', type: 'submit' },
-                { content: '重置', icon: 'vxe-icon-repeat', type: 'reset' }
-              ]
-            }
-          }
-        ])
-      }
-      return searchFormItems
-    })
-
-    const computeTableColumn = computed(() => {
-      const { formData, listTableColumns } = listDesignReactData
-      const { showSeq, actionButtonList } = formData
-      const columns: VxeGridPropTypes.Columns = []
-      if (showSeq) {
-        columns.push({
-          type: 'seq',
-          field: '_seq',
-          width: 70
-        })
-      }
-      listTableColumns.forEach(item => {
-        columns.push({
-          field: item.field,
-          title: item.title,
-          visible: item.visible,
-          width: item.width
-        })
-      })
-      if (actionButtonList && actionButtonList.length) {
-        columns.push({
-          field: '_active',
-          title: getI18n('vxe.table.actionTitle'),
-          fixed: 'right',
-          width: 'auto',
-          cellRender: {
-            name: 'VxeButtonGroup',
-            options: []
-          }
-        })
-      }
-      return columns
-    })
-
-    const updateColumnWidthEvent: VxeTableEvents.ResizableChange = ({ column, resizeWidth }) => {
-      const { listTableColumns } = listDesignReactData
-      const rest = XEUtils.findTree(listTableColumns, item => item.field === column.field, { children: 'children' })
-      if (rest) {
-        const { item } = rest
-        item.width = resizeWidth
-      }
-    }
-
-    const updateTableData = () => {
-      const { listTableColumns } = listDesignReactData
-      const data: Record<string, any>[] = [{}, {}]
-      data.forEach(row => {
-        listTableColumns.forEach(column => {
-          row[column.field] = '-'
-        })
-      })
-      tableData.value = data
-    }
-
-    const dataFlag = ref(0)
-    watch(() => listDesignReactData.listTableColumns ? listDesignReactData.listTableColumns.length : -1, () => {
-      dataFlag.value++
-    })
-    watch(() => listDesignReactData.listTableColumns, () => {
-      dataFlag.value++
-    })
-    watch(dataFlag, () => {
-      updateTableData()
-    })
-
-    onMounted(() => {
-      updateTableData()
-    })
-
-    nextTick(() => {
-      if (!VxeTableGridComponent) {
-        errLog('vxe.error.reqComp', ['vxe-grid'])
-      }
-    })
-
-    return () => {
-      const { searchFormData, searchFormItems } = listDesignReactData
-      const formItems = computeFormItems.value
-      const tableColumn = computeTableColumn.value
-
-      return h('div', {
-        class: 'vxe-list-design--preview'
-      }, [
-        h('div', {
-          class: 'vxe-list-design--preview-wrapper'
-        }, [
-          h('div', {
-            class: 'vxe-list-design--preview-search'
-          }, [
-            h('div', {
-              class: 'vxe-list-design--preview-title'
-            }, getI18n('vxe.listDesign.searchTitle')),
-            searchFormItems.length
-              ? h(VxeFormComponent, {
-                data: searchFormData,
-                items: formItems
-              })
-              : h('div', {
-                class: 'vxe-list-design--field-configs-empty-data'
-              }, [
-                h('span', {}, getI18n('vxe.listDesign.search.emptyText'))
-              ])
-          ]),
-          h('div', {
-            class: 'vxe-list-design--preview-table'
-          }, [
-            h('div', {
-              class: 'vxe-list-design--preview-title'
-            }, getI18n('vxe.listDesign.listTitle')),
-            VxeTableGridComponent
-              ? h(VxeTableGridComponent, {
-                ref: refGrid,
-                columns: tableColumn,
-                data: tableData.value,
-                showOverflow: true,
-                border: true,
-                columnConfig: {
-                  minWidth: 'auto',
-                  resizable: true
-                },
-                rowConfig: {
-                  isHover: true
-                },
-                scrollX: {
-                  enabled: false
-                },
-                scrollY: {
-                  enabled: false
-                },
-                onResizableChange: updateColumnWidthEvent
-              })
-              : createCommentVNode()
-          ])
-        ])
-      ])
-    }
-  }
-})

package/packages/list-design/src/layout-setting.ts

@@ -1,59 +0,0 @@
-import { h, ref } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { getI18n, getIcon } from '@vxe-ui/core'
-import VxeTabsComponent from '../../tabs/src/tabs'
-import VxeTabPaneComponent from '../../tabs/src/tab-pane'
-import { DefaultFieldSettingFormComponent, DefaultParameterSettingFormComponent } from './default-setting-form'
-
-export default defineVxeComponent({
-  name: 'ListDesignLayoutSetting',
-  props: {},
-  emits: [],
-  setup () {
-    const activeTab = ref(1)
-
-    return () => {
-      return h('div', {
-        class: 'vxe-list-design--setting'
-      }, [
-        h('div', {
-          class: 'vxe-list-design--setting-form'
-        }, [
-          h(VxeTabsComponent, {
-            modelValue: activeTab.value,
-            titleWidth: '50%',
-            titleAlign: 'center',
-            padding: true,
-            class: 'vxe-list-design--setting-form-tabs',
-            'onUpdate:modelValue' (val) {
-              activeTab.value = val
-            }
-          }, {
-            default () {
-              return [
-                h(VxeTabPaneComponent, {
-                  title: getI18n('vxe.listDesign.fieldSettingTab'),
-                  icon: getIcon().LIST_DESIGN_FIELD_SETTING,
-                  name: 1
-                }, {
-                  default () {
-                    return h(DefaultFieldSettingFormComponent)
-                  }
-                }),
-                h(VxeTabPaneComponent, {
-                  title: getI18n('vxe.listDesign.listSettingTab'),
-                  icon: getIcon().LIST_DESIGN_LIST_SETTING,
-                  name: 2
-                }, {
-                  default () {
-                    return h(DefaultParameterSettingFormComponent)
-                  }
-                })
-              ]
-            }
-          })
-        ])
-      ])
-    }
-  }
-})

package/packages/list-design/src/list-design.ts

@@ -1,353 +0,0 @@
-import { ref, h, PropType, reactive, nextTick, provide, watch } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { toCssUnit } from '../../ui/src/dom'
-import { getConfig, createEvent, renderer, useSize } from '../../ui'
-import { createListDesignActionButton } from '../render/util'
-import { getDefaultSettingFormData } from './default-setting-data'
-import LayoutPreviewComponent from './layout-preview'
-import LayoutSettingComponent from './layout-setting'
-
-import type { VxeListDesignDefines, VxeListDesignPropTypes, ListDesignReactData, ListDesignPrivateRef, VxeListDesignPrivateComputed, VxeListDesignConstructor, VxeListDesignPrivateMethods, ListDesignMethods, ListDesignPrivateMethods, VxeFormDesignDefines, VxeGlobalRendererHandles } from '../../../types'
-
-export default defineVxeComponent({
-  name: 'VxeListDesign',
-  props: {
-    size: {
-      type: String as PropType<VxeListDesignPropTypes.Size>,
-      default: () => getConfig().listDesign.size || getConfig().size
-    },
-    height: {
-      type: [String, Number] as PropType<VxeListDesignPropTypes.Height>,
-      default: () => getConfig().listDesign.height
-    },
-    config: Object as PropType<VxeListDesignPropTypes.Config>,
-    showPc: {
-      type: Boolean as PropType<VxeListDesignPropTypes.ShowPc>,
-      default: () => getConfig().listDesign.showPc
-    },
-    showMobile: {
-      type: Boolean as PropType<VxeListDesignPropTypes.ShowMobile>,
-      default: () => getConfig().listDesign.showMobile
-    },
-    actionCodes: Array as PropType<VxeListDesignPropTypes.ActionCodes>,
-    formRender: Object as PropType<VxeListDesignPropTypes.FormRender>
-  },
-  emits: [],
-  setup (props, context) {
-    const { emit, slots } = context
-
-    const xID = XEUtils.uniqueId()
-
-    const refElem = ref<HTMLDivElement>()
-
-    const { computeSize } = useSize(props)
-
-    const reactData = reactive<ListDesignReactData>({
-      formData: {} as VxeListDesignDefines.DefaultSettingFormDataObjVO,
-      searchFormData: {},
-      searchFormItems: [],
-      listTableColumns: []
-    })
-
-    const refMaps: ListDesignPrivateRef = {
-      refElem
-    }
-
-    const computeMaps: VxeListDesignPrivateComputed = {
-      computeSize
-    }
-
-    const $xeListDesign = {
-      xID,
-      props,
-      context,
-      reactData,
-
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as unknown as VxeListDesignConstructor & VxeListDesignPrivateMethods
-
-    const systemConfigList: VxeGlobalRendererHandles.CreateListDesignSettingActionButtonConfigResult[] = []
-    const customConfigList: VxeGlobalRendererHandles.CreateListDesignSettingActionButtonConfigResult[] = []
-    renderer.forEach((item, name) => {
-      const { createListDesignSettingActionButtonConfig } = item
-      if (createListDesignSettingActionButtonConfig) {
-        const params = { name }
-        const btnConfig = Object.assign(createListDesignActionButton({ code: name }), createListDesignSettingActionButtonConfig(params))
-        if (btnConfig.type === 'custom') {
-          customConfigList.push(btnConfig)
-        } else {
-          systemConfigList.push(btnConfig)
-        }
-      }
-    })
-
-    const parseWidgetColumn = (widget: VxeFormDesignDefines.WidgetObjItem) => {
-      return {
-        title: widget.title,
-        field: widget.field,
-        visible: !widget.hidden,
-        width: '',
-        cellRender: {
-          name: widget.name,
-          props: widget.options
-        }
-      }
-    }
-
-    /**
-     * 解析表单设计 JSON
-     */
-    const parseFormDesignColumns = (config: Partial<VxeFormDesignDefines.FormDesignConfig>) => {
-      const tableColumns: VxeListDesignDefines.ListColumnObjItem[] = []
-      if (config) {
-        const { widgetData } = config
-        if (widgetData) {
-          widgetData.forEach(item => {
-            const { name } = item
-            if (name) {
-              // 如果是行列
-              if (name === 'row') {
-                item.children.forEach(childItem => {
-                  if (childItem.name) {
-                    tableColumns.push(parseWidgetColumn(childItem))
-                  }
-                })
-              } else if (name === 'subtable') {
-              // 如果是子表
-              } else {
-                tableColumns.push(parseWidgetColumn(item))
-              }
-            }
-          })
-        }
-      }
-      return tableColumns
-    }
-
-    const configToSearchItems = (searchItems: VxeListDesignDefines.SearchItemObjItem[]): {
-      data: Record<string, any>
-      items: VxeListDesignDefines.SearchItemObjItem[]
-    } => {
-      if (searchItems) {
-        const data: Record<string, any> = {}
-        const items = searchItems.map(item => {
-          data[item.field] = null
-          return {
-            field: item.field,
-            title: item.title,
-            folding: item.folding,
-            itemRender: item.itemRender
-          }
-        })
-        return {
-          items,
-          data
-        }
-      }
-      return { items: [], data: {} }
-    }
-
-    const configToListColumns = (listColumns: VxeListDesignDefines.ListColumnObjItem[]): VxeListDesignDefines.ListColumnObjItem[] => {
-      if (listColumns) {
-        return listColumns.map(item => {
-          return {
-            field: item.field,
-            title: item.title,
-            visible: !!item.visible,
-            width: item.width,
-            cellRender: XEUtils.clone(item.cellRender)
-          }
-        })
-      }
-      return []
-    }
-
-    const loadConfig = (config: Partial<VxeListDesignDefines.ListDesignConfig>) => {
-      const { formConfig, searchItems, listColumns } = config
-      if (formConfig) {
-        loadFormConfig(formConfig)
-      }
-      if (searchItems) {
-        setSearchItems(searchItems)
-      }
-      if (listColumns) {
-        reactData.listTableColumns = parseColumnConfigs(listColumns)
-      }
-      return nextTick()
-    }
-
-    const parseColumnConfigs = (listColumns: VxeListDesignDefines.ListColumnObjItem[]) => {
-      return configToListColumns(listColumns)
-    }
-
-    const loadFormConfig = (data: any) => {
-      reactData.formData = Object.assign({}, createSettingForm(), data)
-      return nextTick()
-    }
-
-    const getSearchItems = () => {
-      return reactData.searchFormItems
-    }
-
-    const setSearchItems = (searchItems: VxeListDesignDefines.SearchItemObjItem[]) => {
-      const { data, items } = configToSearchItems(searchItems)
-      reactData.searchFormData = data
-      reactData.searchFormItems = items
-      return nextTick()
-    }
-
-    const getListColumns = () => {
-      return reactData.listTableColumns
-    }
-
-    const setListColumns = (listColumns: VxeListDesignDefines.ListColumnObjItem[]) => {
-      reactData.listTableColumns = parseColumnConfigs(listColumns)
-      return nextTick()
-    }
-
-    const createSettingForm = () => {
-      const { actionCodes, formRender } = props
-      let conf = getDefaultSettingFormData()
-      // 处理默认按钮
-      if (actionCodes && actionCodes.length) {
-        if (!conf.actionButtonList || !conf.actionButtonList.length) {
-          const defActionBtnList: VxeListDesignDefines.DefaultSettingFormActionButton[] = []
-          actionCodes.forEach(item => {
-            if (XEUtils.isObject(item) && item.default) {
-              const sysItem = systemConfigList.find(obj => obj.code === item.code)
-              if (sysItem) {
-                defActionBtnList.push(createListDesignActionButton({
-                  type: sysItem.type,
-                  code: sysItem.code
-                }))
-              }
-            }
-          })
-          conf.actionButtonList = defActionBtnList
-        }
-      }
-      // 如果为自定义渲染
-      if (formRender && formRender.name) {
-        const compConf = renderer.get(formRender.name)
-        const createFormConfig = compConf ? compConf.createListDesignSettingFormConfig : null
-        const params = { name: formRender.name }
-        conf = ((createFormConfig ? createFormConfig(params) : {}) || {}) as any
-      }
-
-      return conf
-    }
-
-    const initSettingForm = () => {
-      reactData.formData = createSettingForm()
-    }
-
-    const clearConfig = () => {
-      loadConfig({
-        searchItems: [],
-        listColumns: []
-      })
-      initSettingForm()
-      return nextTick()
-    }
-
-    const listDesignMethods: ListDesignMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $listDesign: $xeListDesign }, params))
-      },
-      loadFormDesignConfig (config) {
-        const { listTableColumns } = reactData
-        const oldMaps: Record<string, VxeListDesignDefines.ListColumnObjItem> = {}
-        XEUtils.eachTree(listTableColumns, item => {
-          oldMaps[item.field] = item
-        }, { children: 'children' })
-        const columns = parseFormDesignColumns(config)
-        XEUtils.eachTree(columns, item => {
-          const oldItem = oldMaps[item.field]
-          if (oldItem) {
-            if (oldItem.width) {
-              item.width = oldItem.width
-            }
-            item.visible = oldItem.visible
-          }
-        }, { children: 'children' })
-        reactData.listTableColumns = columns
-        return nextTick()
-      },
-      reloadFormDesignConfig (config) {
-        reactData.listTableColumns = parseFormDesignColumns(config)
-        return nextTick()
-      },
-      getSearchItems,
-      setSearchItems,
-      getListColumns,
-      setListColumns,
-      getConfig () {
-        return {
-          formConfig: reactData.formData,
-          searchItems: getSearchItems(),
-          listColumns: getListColumns()
-        }
-      },
-      loadConfig,
-      reloadConfig (config) {
-        clearConfig()
-        return loadConfig(config)
-      },
-      clearConfig
-    }
-
-    const listDesignPrivateMethods: ListDesignPrivateMethods = {
-    }
-
-    Object.assign($xeListDesign, listDesignMethods, listDesignPrivateMethods)
-
-    const renderVN = () => {
-      const { height } = props
-      const vSize = computeSize.value
-      const headerSlot = slots.header
-
-      return h('div', {
-        ref: refElem,
-        class: ['vxe-list-design', {
-          [`size--${vSize}`]: vSize
-        }],
-        style: height
-          ? {
-              height: toCssUnit(height)
-            }
-          : null
-      }, [
-        h('div', {
-          class: 'vxe-list-design--header'
-        }, headerSlot ? headerSlot({}) : []),
-        h('div', {
-          class: 'vxe-list-design--body'
-        }, [
-          h(LayoutPreviewComponent),
-          h(LayoutSettingComponent)
-        ])
-      ])
-    }
-
-    provide('$xeListDesign', $xeListDesign)
-
-    watch(() => props.config, (value) => {
-      loadConfig(value || {})
-    })
-
-    initSettingForm()
-
-    if (props.config) {
-      loadConfig(props.config)
-    }
-
-    $xeListDesign.renderVN = renderVN
-
-    return $xeListDesign
-  },
-  render () {
-    return this.renderVN()
-  }
-})