@wp1001/ui 2.9.13

package/packages/components/xtable/utils.js

@@ -0,0 +1,692 @@
+import { getUrlType, getFiletypeIcon } from '../../utils/funcs.js'
+
+const { highdict } = StardustJs
+const { storage } = StardustBrowser
+
+const { local } = storage
+
+const TYPES = ['index', 'selection', 'expand', 'radio', '_index']
+
+export function props () {
+  return {
+    table: Object,
+    loading: Boolean,
+    data: Array,
+    columns: Array,
+    query: Object,
+    total: Number,
+    finished: Boolean,
+    selection: Array,
+    chartHeight: String,
+    chartOption: Object,
+    tref: Object,
+    defaultValue: '',
+    slotAll: {
+      type: Boolean,
+      default: false
+    },
+    onSelectionChange: Function,
+    onSortChange: Function,
+    onHeaderDragend: Function,
+    onCheckedChange: Function,
+    onKeywordsSearch: Function,
+    onSearch: Function,
+    onAdd: Function,
+    onEdit: Function,
+    onDelete: Function,
+    onRowEdit: Function,
+    onCancelEdit: Function,
+    onExport: Function,
+    onSearchExport: Function,
+    onImport: Function,
+    onMultiDelete: Function,
+    onLoad: Function,
+
+    controller: Object,
+    listen: {
+      type: String,
+      default: '*'
+    },
+
+    actions: {
+      type: Array,
+      default: () => []
+    },
+
+    title: {
+      type: String,
+      default: '表格'
+    },
+    useCollapse: {
+      type: Boolean,
+      default: false
+    },
+    uid: String,
+    doms: Array
+  }
+}
+
+export function emits () {
+  return [
+    'update:tref',
+    'search',
+    'add',
+    'edit',
+    'row-edit',
+    'cancel-edit',
+    'delete',
+    'export',
+    'search-export',
+    'load'
+  ]
+}
+
+export function _attrs () {
+  const platform = this.$.attrs.platform || (window.isMobile ? 'mobile' : 'pc')
+  const key = platform + 'TableAttrs'
+  const dict = {}
+  if (key in this) Object.assign(dict, this[key])
+  Object.assign(dict, this.$attrs)
+  return dict
+}
+
+export function domids () {
+  const domids = {}
+  const keys = [
+    'keywords-search',
+    'search',
+    'add',
+    'multi-delete',
+    'export',
+    'search-export',
+    'import',
+
+    'edit',
+    'row-edit',
+    'cancel-edit',
+    'delete',
+    'operates'
+  ]
+  keys.forEach(key => domids[key] = key)
+  return { ...domids, ...this.$attrs.domids }
+}
+
+export function elTableAttrs () {
+  const keys = Object.keys(this._attrs).filter(key => !key.endsWith('-btn'))
+  const attrs = {}
+  keys.forEach(key => attrs[key] = this._attrs[key])
+  delete attrs.platform
+  return {
+    border: true,
+    stripe: true,
+    fit: true,
+    'highlight-current-row': true,
+    ...attrs,
+    data: this._data,
+    'cell-class-name': this.cellClassName,
+    'cell-style': this.cellStyle
+  }
+}
+
+export function _loading () {
+  const { table, loading } = this.$props
+  return loading || table?.loading
+}
+
+export function _data () {
+  const { table, data } = this.$props
+  return data || table?.list || []
+}
+
+export function _columns () {
+  const { $props, _query } = this
+  const { table, columns } = $props
+  const cols = columns || table?.columns || []
+  const domids = cols.map(col => col.tableAttrs?.domid)
+  return cols.filter((col, index) => !domids[index] || this._doms.includes(domids[index])).map(col => {
+    if (col.type === '_index') {
+      return Object.assign({
+        width: 60,
+        label: '序号',
+        index (num) {
+          const { page, limit } = _query
+          return (table.isInfinite ? 0 : (page - 1) * limit) + num + 1
+        }
+      }, col, { type: 'index' })
+    } else if (col.type === 'radio') {
+      return Object.assign({ width: 60, label: '单选' }, col)
+    }
+    return Object.assign({}, col, col.tableAttrs)
+  })
+}
+
+export function _doms () {
+  return this.doms || this.$store?.acl?.routeDoms || []
+}
+
+export function _query () {
+  const { table, query } = this.$props
+  return query || table?.query
+}
+
+export function _total () {
+  const { table, total } = this.$props
+  return total || table?.total
+}
+
+export function _finished () {
+  const { table, finished } = this.$props
+  return finished ?? table?.finished
+}
+
+export function _selection () {
+  const { table, selection } = this.$props
+  return selection || table?.selection
+}
+
+export function _actions () {
+  const path = this.$route?.path.slice(1).replaceAll('/', ':')
+  const doms = this.$store?.acl?.routeDoms || []
+  let items = this.$attrs.platform === 'pc' ? [] : [
+    { name: '编辑', color: '#07c160', domid: 'edit' },
+    { name: '删除', color: '#eb6f6f', domid: 'delete' },
+  ]
+  items = items.concat(this.actions)
+  items.forEach(it => {
+    if (this.$attrs.platform === 'pc') {
+      if (it.type) delete it.color
+    }
+    if (typeof it.handler === 'string') {
+      it.handler = this.controller[it.handler]
+    }
+  })
+  return items.filter(ele => {
+    return !ele.domid || doms?.includes(this.domids[ele.domid] ?? ele.domid)
+  })
+}
+
+export function _chartHeight () {
+  const { table, chartHeight } = this.$props
+  return chartHeight || table?.chartHeight || (Math.max(window.innerHeight - 300, 360) + 'px')
+}
+
+export function _chartOption () {
+  const { table, chartOption } = this.$props
+  return { ...this._attrs.chartOption, ...table?.chartOption, ...chartOption }
+}
+
+export function _onKeywordsSearch () {
+  if (this.onKeywordsSearch || this._listen['keywords-search']) {
+    return (...props) => this._emit('keywords-search', ...props)
+  }
+  return null
+}
+
+export function _onSearch () {
+  if (this.hideSearcher) {
+    return (this.onSearch || this._listen['search']) ? () => this._emit('search') : null
+  }
+  if (this.onSearch || this._listen['search']) {
+    return (params) => {
+      if (params) {
+        this._emit('search')
+      } else {
+        this.$refs.searcher.open()
+      }
+    }
+  }
+  return null
+}
+
+export function _onAdd () {
+  return (this.onAdd || this._listen['add']) ? () => this._emit('add') : null
+}
+
+export function _onExport () {
+  return (this.onExport || this._listen['export']) ? () => this._emit('export') : null
+}
+
+export function _onSearchExport () {
+  return (this.onSearchExport || this._listen['search-export']) ? () => this._emit('search-export') : null
+}
+
+export function _onImport () {
+  return (this.onImport || this._listen['import']) ? () => this._emit('import') : null
+}
+
+export function _onMultiDelete () {
+  return (this.onMultiDelete || this._listen['multi-delete']) ? () => this._emit('multi-delete') : null
+}
+
+export function _onLoad () {
+  return this.onLoad || this._listen['load'] ? () => this._emit('load') : () => {}
+}
+
+export function _listen () {
+  if (!this.controller || !this.listen?.length) return {}
+  let events = this.listen.split(',')
+  if (events.includes('*')) {
+    events = [...new Set([
+      ...events, 'keywords-search', 'search', 'add', 'multi-delete', 'export', 'search-export', 'import',
+      'edit', 'row-edit', 'cancel-edit', 'delete'
+    ])]
+  }
+  const dict = {}
+  events.forEach(e => {
+    const funcName = 'handle' + e.split('-').map(p => p[0].toUpperCase() + p.slice(1)).join('')
+    dict[e] = this.controller[funcName]
+  })
+  return dict
+}
+
+export function _visibleColumns () {
+  const left = this._columns.filter(col => col.type && TYPES.includes(col.type) || col.fixed === 'left')
+  const right = this.settings.columns.filter(col => !col.hide && col.fixed !== 'left').map(col => {
+    const column = this._columns.find(c => c.prop === col.prop)
+    if (!column) return
+    return {
+      sortable: 'custom',
+      ...column,
+      width: col.width || column.width
+    }
+  }).filter(col => col)
+  return left.concat(right)
+}
+
+export function _uid () {
+  const { table, uid } = this.$props
+  return uid || table?.uid || ''
+}
+
+export function plain () {
+  const { plain } = this._attrs
+  return plain || plain === ''
+}
+
+export function hideHeader () {
+  const { 'hide-header': hideHeader } = this._attrs
+  return hideHeader || hideHeader === ''
+}
+
+export function hideTools () {
+  const { 'hide-tools': hideTools } = this._attrs
+  return this.plain ? hideTools !== false : (hideTools || hideTools === '')
+}
+
+export function hideSearcher () {
+  const { 'hide-searcher': hideSearcher } = this._attrs
+  return this.plain ? hideSearcher !== false : (hideSearcher || hideSearcher === '')
+}
+
+export function hideChart () {
+  const { 'hide-chart': hideChart } = this._attrs
+  return this.plain ? hideChart !== false : (hideChart || hideChart === '')
+}
+
+export function hideSettings () {
+  const { 'hide-settings': hideSettings } = this._attrs
+  return this.plain ? hideSettings !== false : (hideSettings || hideSettings === '')
+}
+
+export function hideOperates () {
+  const { 'hide-operates': hideOperates } = this._attrs
+  return this.plain ? hideOperates !== false : (hideOperates || hideOperates === '')
+}
+
+export function hidePagination () {
+  const { 'hide-pagination': hidePagination } = this._attrs
+  return this.plain ? hidePagination !== false : (hidePagination || hidePagination === '')
+}
+
+export function operatesWidth () {
+  return this._attrs['operates-width'] ?? 150
+}
+
+export function operatesDropdown () {
+  return this._attrs['operates-dropdown']
+}
+
+export function searcherColumns () {
+  return this._columns.filter(col => !col.virtual && col.canSearch !== false && (!col.type || !TYPES.includes(col.type)))
+}
+
+export function searcherConfig () {
+  const config = this.table.searcherConfig ?? this._attrs['searcher-config'] ?? {}
+  if (config.conditions?.length) {
+    const props = this._columns.map(col => col.prop)
+    config.conditions = config.conditions.filter(con => props.includes(con.prop))
+  }
+  return config
+}
+
+export function initSettings () {
+  const settings = this._uid && local.getJson(`Settings[${this._uid}]`, {}) || {}
+  if (!settings.columns?.length) {
+    settings.columns = this._columns.filter(col => {
+      return col.label && (col.prop || col.prop === 0) && !(col.type && TYPES.includes(col.type))
+    }).map(col => {
+      const { prop, label, show, hide, width, virtual, fixed } = col
+      return { prop, label, show, hide, width, virtual, fixed }
+    })
+  }
+  this.settings = settings
+}
+
+export function saveSettings (value) {
+  Object.assign(this.settings, value)
+  local.setJson(`Settings[${this._uid}]`, this.settings)
+}
+
+export function calcValue (row, column) {
+  const { prop } = column
+  const value = row[prop]
+  let { format, formatter } = column.tableAttrs || column
+  if (formatter) return formatter(value, row)
+  format = Array.isArray(column.options) ? format !== false : format
+  if (format) {
+    const formatProp = `_formatted_${prop}`
+    if (formatProp in row) {
+      return row[formatProp]
+    }
+  }
+  if (value == undefined) {
+    if (prop.includes('.') || prop.includes('[')) {
+      return highdict.get(row, prop, this.defaultValue)
+    }
+    return this.defaultValue
+  }
+  if (value === '') {
+    return this.defaultValue
+  }
+  return value
+}
+
+export function calcLink (row, column) {
+  if (column.link) return column.link(row)
+  return highdict.get(row, column.linkProp || column.prop)
+}
+
+export function calcOverflowTooltip (column) {
+  if (['index', 'selection', 'expand'].includes(column.type)) {
+    return false
+  }
+  const { showOverflowTooltip } = column.tableAttrs || column
+  return showOverflowTooltip !== false
+}
+
+export function handleSearch (params) {
+  this.params = params
+  this._emit('search', params)
+}
+
+export function handleResetSettings () {
+  this.saveSettings({})
+  this.initSettings()
+}
+
+export function handleHeaderDragend (newWidth, oldWidth, column, event) {
+  const col = this.settings.columns.find(col => col.prop === column.property)
+  if (col) {
+    col.width = newWidth
+    this.saveSettings(this.settings)
+  }
+  if (this.onHeaderDragend) {
+    this.onHeaderDragend(newWidth, oldWidth, column, event)
+  }
+}
+
+export function handleSelectionChange (rows) {
+  if (this._selection) {
+    this._selection.splice(0)
+    this._selection.push(...rows)
+  }
+  if (this.onSelectionChange) {
+    this.onSelectionChange(rows)
+  }
+}
+
+export function handleSortChange (params) {
+  if (this.onSortChange) {
+    this.onSortChange(params)
+  } else {
+    if (Array.isArray(params)) {
+      this.controller?.handleSortChange?.(params)
+    } else if (params.column.sortable === 'custom') {
+      this.controller?.handleSortChange?.(params)
+    }
+  }
+}
+
+export function handleCheckedChange (e) {
+  this.checked = e.target.value * 1
+  const row = this._data[this.checked]
+  if (this.table) {
+    this.table.checked = row
+  }
+  if (this.onCheckedChange) {
+    this.onCheckedChange(row)
+  }
+}
+
+export function handleCollapseChange (activeNames) {
+  if (activeNames.length) {
+    this.isMinus = false
+    if (!this.useCollapse) {
+      this._useCollapse = false
+    }
+  }
+}
+
+export function handleMinus () {
+  this.isMinus = !this.isMinus
+  if (this.isMinus) {
+    this._useCollapse = true
+    this.activeNames = []
+  } else {
+    this._useCollapse = this.useCollapse
+    this.activeNames = ['name']
+  }
+}
+
+export function handleToggleFullscreen () {
+  this.isFullscreen = !this.isFullscreen
+  if (this.isFullscreen) {
+    this.zoom = document.documentElement.style.zoom
+    document.documentElement.style.zoom = 1
+  } else {
+    document.documentElement.style.zoom = this.zoom
+  }
+}
+
+export function cellClassName (props) {
+  let classNames = this._attrs['cell-class-name'] ? this._attrs['cell-class-name'](props) : ''
+  const col = this._visibleColumns[props.columnIndex]
+  if (col?.tableAttrs?.class) {
+    const klass = col.tableAttrs.class
+    if (typeof klass === 'function') {
+      classNames += ' ' + klass(props)
+    } else if (typeof klass === 'string') {
+      classNames += ' ' + klass
+    }
+  }
+  return !classNames ? '' : [...new Set(classNames.split(' '))].join(' ')
+}
+
+export function cellStyle (props) {
+  const style = this._attrs['cell-style'] ? this._attrs['cell-style'](props) : {}
+  const col = this._visibleColumns[props.columnIndex]
+  if (col?.tableAttrs?.style) {
+    const sty = col.tableAttrs.style
+    if (typeof sty === 'function') {
+      Object.assign(style, sty(props))
+    } else if (typeof sty === 'object') {
+      Object.assign(style, sty)
+    }
+  }
+  return Object.keys(style) ? style : null
+}
+
+export function calcTagType (scope, column) {
+  const { tagTypes, prop, options } = column
+  const value = scope.row[prop]
+  if (tagTypes) {
+    if (typeof tagTypes === 'function') {
+      return tagTypes(value, scope, column)
+    } else if (typeof tagTypes === 'object') {
+      return tagTypes[value]
+    }
+  } else if (options) {
+    const op = options.find(o => o[column.value || 'value'] === value)
+    if (op?.tagType) return op.tagType
+  }
+  return value ? 'success' : 'danger'
+}
+
+export function calcTagValue (scope, column) {
+  const { tagValues, prop, options } = column
+  const value = scope.row[prop]
+  if (tagValues) {
+    if (typeof tagValues === 'function') {
+      return tagValues(value, scope, column)
+    } else if (typeof tagValues === 'object') {
+      return tagValues[value]
+    }
+  } else if (options) {
+    const op = options.find(o => o[column.value || 'value'] === value)
+    if (op) return op[column.text || 'text']
+  }
+  return value
+}
+
+export function canEdit (row) {
+  return !!(this.onEdit || this._listen['edit']) && (row.editable !== false) && !row.isEditing
+}
+
+export function canSave (row) {
+  return !!(this.onRowEdit || this._listen['row-edit']) && this.table.isRowEdit && row.isEditing
+}
+
+export function canRowEdit (row) {
+  return !!(this.onRowEdit || this._listen['row-edit']) && this.table.isRowEdit && row.isEditing
+}
+
+export function canCancelEdit (row) {
+  return !!(this.onCancelEdit || this._listen['cancel-edit']) && this.table.isRowEdit && row.isEditing
+}
+
+export function canDelete (row) {
+  return !!(this.onDelete || this._listen['delete']) && row.deletable !== false
+}
+
+export function calcImages (scope, column) {
+  const value = scope.row[column.prop]
+  let images = []
+  if (column.images) {
+    images = column.images(value, scope.row)
+  } else {
+    images = Array.isArray(value) ? value : [value]
+  }
+  images = images.filter(ele => ele).map(ele => {
+    if (typeof ele !== 'object') {
+      ele = { url: ele, name: ele.split('/').pop() }
+    }
+    ele.type ||= getUrlType(ele.url)
+    ele.icon = column.icons?.[ele.type] ?? getFiletypeIcon(ele.type)
+    return ele
+  })
+  scope._images = images
+  scope._urls = images.map(ele => ele.url)
+  scope._image_urls = images.filter(ele => ele.type === 'image').map(ele => ele.url)
+  return images
+}
+
+export function _emit (event, payload) {
+  const funcName = 'on' + event.split('-').map(p => p[0].toUpperCase() + p.slice(1)).join('')
+  if (this[funcName]) {
+    this[funcName](payload)
+  } else if (this._listen[event]) {
+    this._listen[event](payload)
+  } else {
+    this.$emit(event, payload)
+  }
+}
+
+export function $route () {
+  if (this.zoom !== 1) {
+    document.documentElement.style.zoom = this.zoom
+  }
+}
+
+export default {
+  props,
+  emits,
+  computed: {
+    _attrs,
+    domids,
+    elTableAttrs,
+    _loading,
+    _data,
+    _columns,
+    _doms,
+    _query,
+    _total,
+    _finished,
+    _selection,
+    _actions,
+    _chartHeight,
+    _chartOption,
+    _onKeywordsSearch,
+    _onSearch,
+    _onAdd,
+    _onExport,
+    _onSearchExport,
+    _onImport,
+    _onMultiDelete,
+    _onLoad,
+    _listen,
+    _visibleColumns,
+    _uid,
+    plain,
+    hideHeader,
+    hideTools,
+    hideSearcher,
+    hideChart,
+    hideSettings,
+    hideOperates,
+    hidePagination,
+    operatesWidth,
+    operatesDropdown,
+    searcherColumns,
+    searcherConfig
+  },
+  watch: {
+    $route
+  },
+  methods: {
+    initSettings,
+    saveSettings,
+    calcValue,
+    calcLink,
+    calcOverflowTooltip,
+    handleSearch,
+    handleResetSettings,
+    handleHeaderDragend,
+    handleSelectionChange,
+    handleSortChange,
+    handleCheckedChange,
+    handleCollapseChange,
+    handleMinus,
+    handleToggleFullscreen,
+    cellClassName,
+    cellStyle,
+    calcTagType,
+    calcTagValue,
+    canEdit,
+    canSave,
+    canRowEdit,
+    canCancelEdit,
+    canDelete,
+    calcImages,
+    _emit
+  }
+}

package/packages/components/xtabletools/mobile.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'MobileXTableTools',
+  inheritAttrs: false,
+  props: {
+    searchBtn: Object,
+    addBtn: Object,
+    multiEditBtn: Object,
+    multiDeleteBtn: Object,
+    exportBtn: Object,
+    importBtn: Object,
+    domids: Object
+  },
+  data () {
+    return {
+      keywords: '',
+      domidsCanAdd: true
+    }
+  },
+  async mounted () {
+    await this.$nextTick()
+    if (!this.$refs.fbc.isConnected) {
+      this.domidsCanAdd = false
+    }
+  }
+}