@wp1001/ui 2.9.13

package/packages/components/xtabletools/mobile.vue

@@ -0,0 +1,126 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div class="x-table-tools mobile-x-table-tools">
+    <span ref="fbc" v-domid="domids['add']" class="floating-bubble-checker" />
+    <van-floating-bubble
+      v-if="domidsCanAdd"
+      axis="xy"
+      magnetic="x"
+      icon="plus"
+      class="flex-center x-table-add"
+      style="position: fixed; top: 0; font-size: 22px; width: 40px; height: 40px; background-color: #1989fa; border-radius: 50%; color: white;"
+      @click="$emit('add')"
+    />
+    <div class="tools">
+      <slot name="tools-prefix" />
+
+      <van-search
+        v-if="!!$attrs.onKeywordsSearch"
+        v-domid="domids['keywords-search']"
+        v-model="keywords"
+        :placeholder="$attrs['keywords-placeholder'] || '输入关键词搜索'"
+        clearable
+        show-action
+        class="keywords-search"
+        @search="$emit('keywords-search', keywords.trim())"
+      >
+        <template #action>
+          <div @click="$emit('keywords-search', keywords.trim())">搜索</div>
+        </template>
+      </van-search>
+
+      <van-button
+        v-if="!!$attrs.onSearch"
+        v-bind="{ type: 'success', ...searchBtn }"
+        v-domid="domids['search']"
+        class="x-table-search"
+        @click="$emit('search')"
+      >
+        <mobile-x-icon name="search" />
+        高级查询
+      </van-button>
+      <van-button
+        v-if="!!$attrs.onMultiEdit"
+        v-bind="{ type: 'warning', ...multiEditBtn }"
+        v-domid="domids['multi-edit']"
+        class="x-table-edit"
+        @click="$emit('multi-edit')"
+      >
+        <mobile-x-icon name="edit" />
+        编辑
+      </van-button>
+      <van-button
+        v-if="!!$attrs.onMultiDelete"
+        v-bind="{ type: 'danger', ...multiDeleteBtn }"
+        v-domid="domids['multi-delete']"
+        class="x-table-multi-delete"
+        @click="$emit('multi-delete')"
+      >
+        <mobile-x-icon name="DeleteFilled" />
+        批量删除
+      </van-button>
+      <van-button
+        v-if="!!$attrs.onExport"
+        v-bind="{ type: 'success', ...exportBtn }"
+        v-domid="domids['export']"
+        class="x-table-export"
+        @click="$emit('export')"
+      >
+        <mobile-x-icon name="printer" />
+        导出
+      </van-button>
+      <van-button
+        v-if="!!$attrs.onSearchExport"
+        v-bind="{ type: 'success', ...exportBtn }"
+        v-domid="domids['search-export']"
+        class="x-table-search-export"
+        @click="$emit('search-export')"
+      >
+        <mobile-x-icon name="printer" />
+        查询导出
+      </van-button>
+      <van-button
+        v-if="!!$attrs.onImport"
+        v-bind="{ type: 'warning', ...importBtn }"
+        v-domid="domids['import']"
+        class="x-table-import"
+        @click="$emit('import')"
+      >
+        <mobile-x-icon name="UploadFilled" />
+        导入
+      </van-button>
+
+      <slot name="tools-suffix" />
+
+      <div class="tools-end">
+        <slot name="tools-end" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-x-table-tools {
+  margin: 5px;
+  .tools {
+    position: relative;
+    min-height: 32px;
+    .van-button {
+      width: calc(33.33% - 6px);
+      height: 30px;
+      margin: 3px;
+    }
+  }
+  .tools-end {
+    position: absolute;
+    right: 0;
+    top: 0;
+    :deep(.van-icon) {
+      margin-right: 0;
+    }
+  }
+}
+</style>

package/packages/components/xtabletools/pc.js

@@ -0,0 +1,18 @@
+export default {
+  name: 'PcXTableTools',
+  inheritAttrs: false,
+  props: {
+    searchBtn: Object,
+    addBtn: Object,
+    multiEditBtn: Object,
+    multiDeleteBtn: Object,
+    exportBtn: Object,
+    importBtn: Object,
+    domids: Object
+  },
+  data () {
+    return {
+      keywords: ''
+    }
+  }
+}

package/packages/components/xtabletools/pc.vue

@@ -0,0 +1,135 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-card shadow="hover" :body-style="{ padding: '10px' }" class="x-table-tools pc-x-table-tools">
+    <div class="tools">
+      <slot name="tools-prefix" />
+
+      <el-input
+        v-if="!!$attrs.onKeywordsSearch"
+        v-domid="domids['keywords-search']"
+        v-model="keywords"
+        :placeholder="$attrs['keywords-placeholder'] || '输入关键词搜索'"
+        clearable
+        class="keywords-search"
+        @keyup.enter="$emit('keywords-search', keywords.trim())"
+      />
+
+      <el-button
+        v-if="!!$attrs.onSearch"
+        v-bind="{ type: 'success', ...searchBtn }"
+        v-domid="domids['search']"
+        icon="search"
+        class="x-table-search"
+        @click="$emit('search')"
+      >
+        {{ $attrs['search-btn-text'] ?? '高级查询' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onAdd"
+        v-bind="{ type: 'primary', ...addBtn }"
+        v-domid="domids['add']"
+        icon="circle-plus-filled"
+        class="x-table-add"
+        @click="$emit('add')"
+      >
+        {{ $attrs['add-btn-text'] ?? '新增' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onMultiEdit"
+        v-bind="{ type: 'warning', ...multiEditBtn }"
+        v-domid="domids['multi-edit']"
+        icon="edit"
+        class="x-table-edit"
+        @click="$emit('multi-edit')"
+      >
+        {{ $attrs['edit-btn-text'] ?? '编辑' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onMultiDelete"
+        v-bind="{ type: 'danger', ...multiDeleteBtn }"
+        v-domid="domids['multi-delete']"
+        icon="DeleteFilled"
+        class="x-table-multi-delete"
+        @click="$emit('multi-delete')"
+      >
+        {{ $attrs['multi-delete-btn-text'] ?? '批量删除' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onExport"
+        v-bind="{ type: 'success', ...exportBtn }"
+        v-domid="domids['export']"
+        icon="printer"
+        class="x-table-export"
+        @click="$emit('export')"
+      >
+        {{ $attrs['export-btn-text'] ?? '导出' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onSearchExport"
+        v-bind="{ type: 'success', ...exportBtn }"
+        v-domid="domids['search-export']"
+        icon="printer"
+        class="x-table-search-export"
+        @click="$emit('search-export')"
+      >
+        {{ $attrs['search-export-btn-text'] ?? '查询导出' }}
+      </el-button>
+      <el-button
+        v-if="!!$attrs.onImport"
+        v-bind="{ type: 'warning', ...importBtn }"
+        v-domid="domids['import']"
+        icon="UploadFilled"
+        class="x-table-import"
+        @click="$emit('import')"
+      >
+        {{ $attrs['import-btn-text'] ?? '导入' }}
+      </el-button>
+
+      <slot name="tools-suffix" />
+
+      <div class="tools-end flex-center">
+        <slot name="tools-end" />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.pc-x-table-tools {
+  margin-bottom: 5px;
+  :deep(.el-button) {
+    vertical-align: top;
+  }
+  :deep(.el-input) {
+    width: 100%;
+    margin-right: 5px;
+  }
+  .keywords-search {
+    width: 200px;
+    margin-right: 10px;
+  }
+  .tools {
+    position: relative;
+    min-height: 32px;
+  }
+  .tools-end {
+    position: absolute;
+    right: 0;
+    top: 0;
+    & > :deep(*) {
+      margin-left: 10px;
+    }
+    :deep(.el-icon) {
+      font-size: 18px;
+      cursor: pointer;
+      height: 32px;
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+</style>

package/packages/components/xtablev2/index.js

@@ -0,0 +1,53 @@
+import tableUtils from '../xtable/utils.js'
+import utils from './utils.jsx'
+import Searcher from '../xtable/searcher.vue'
+import Settings from '../xtable/settings.vue'
+
+export default {
+  name: 'XTableV2',
+  props: {
+    ...tableUtils.props(),
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: String,
+      default: '60vh'
+    }
+  },
+  emits: [
+    ...tableUtils.emits()
+  ],
+  components: { Searcher, Settings },
+  data () {
+    return {
+      isFullscreen: false,
+      zoom: 1,
+      selected: new Set(),
+      checked: null,
+      activeNames: ['name'],
+      settings: {}
+    }
+  },
+  computed: {
+    ...tableUtils.computed
+  },
+  watch: {
+    ...tableUtils.watch,
+    settings: 'saveSettings'
+  },
+  created () {
+    this.initSettings()
+  },
+  mounted () {
+    if (this.table) {
+      this.table.tableRef = this.$refs.tableRef
+    }
+    this.$emit('update:tref', this.$refs.tableRef)
+  },
+  methods: {
+    ...tableUtils.methods,
+    convertColumnsForTableV2: utils.convertColumnsForTableV2
+  }
+}

package/packages/components/xtablev2/utils.jsx

@@ -0,0 +1,214 @@
+import { h, resolveComponent } from 'vue'
+
+const makeSelectionHeader = (vm) => {
+  const all = vm._data.length > 0 && (vm.selected.size === vm._data.length)
+  const indeterminate = !all && vm.selected.size > 0
+
+  const onChange = (value) => {
+    if (value) {
+      vm._data.forEach((_, i) => vm.selected.add(i))
+    } else {
+      vm.selected.clear()
+    }
+    const rows = value ? vm._data.slice() : []
+    vm.handleSelectionChange(rows)
+  }
+  return (
+    <el-checkbox
+      modelValue={all}
+      indeterminate={indeterminate}
+      onChange={onChange}
+    />
+  )
+}
+
+const makeSelection = (props, vm) => {
+  const { rowIndex: $index, rowData: row } = props
+  const onChange = () => {
+    if (vm.selected.has($index)) {
+      vm.selected.delete($index)
+    } else {
+      vm.selected.add($index)
+    }
+    const rows = [...vm.selected].map(i => vm._data[i])
+    vm.handleSelectionChange(rows)
+  }
+  return (
+    <el-checkbox
+      modelValue={vm.selected.has($index)}
+      onChange={onChange}
+    />
+  )
+}
+
+const makeIndex = (props, vm) => {
+  const { page, limit } = vm._query
+  return (page - 1) * limit + props.rowIndex + 1
+}
+
+const makeRadio = (props, vm) => {
+  const { rowIndex: $index } = props
+  return (
+    <input
+      type="radio"
+      value={$index}
+      checked={$index === vm.checked}
+      onChange={vm.handleCheckedChange}
+    />
+  )
+}
+
+const makeButton = ([props, vm, emit, type, icon, text]) => {
+  const { rowIndex: $index, rowData: row } = props
+  const onClick = () => {
+    vm._emit(emit, { $index, row })
+  }
+  return (
+    <el-button
+      type={type}
+      {...vm._attrs[emit + '-btn']}
+      icon={icon}
+      onClick={onClick}
+    >
+      {text}
+    </el-button>
+  )
+}
+
+const makeEditButton = (props, vm) => {
+  if (vm.canEdit(props.rowData)) {
+    return makeButton([props, vm, 'edit', 'warning', 'edit', '编辑'])
+  }
+}
+
+const makeRowEditButton = (props, vm) => {
+  if (vm.canRowEdit(props.rowData)) {
+    return makeButton([props, vm, 'row-edit', 'success', 'collection', '保存'])
+  }
+}
+
+const makeCancelEditButton = (props, vm) => {
+  if (vm.canCancelEdit(props.rowData)) {
+    return makeButton([props, vm, 'cancel-edit', 'warning', 'refresh-left', '取消编辑'])
+  }
+}
+
+const makeDeleteButton = (props, vm) => {
+  if (vm.canDelete(props.rowData)) {
+    return makeButton([props, vm, 'delete', 'danger', 'DeleteFilled', '删除'])
+  }
+}
+
+const makeRenderer = (col, vm) => {
+  const { _attrs, $slots } = vm
+  const { slotRenderers = {} } = _attrs
+
+  if (col.type === 'selection') {
+    return (props) => makeSelection(props, vm)
+  } else if (col.type === 'index') {
+    return (props) => makeIndex(props, vm)
+  } else if (col.type === 'radio') {
+    return (props) => makeRadio(props, vm)
+  } else if (col.slot) {
+    if (slotRenderers[col.slot]) {
+      return slotRenderers[col.slot]
+    } else if ($slots[col.slot]) {
+      return (props) => {
+        return $slots[col.slot]({
+          scope: {
+            $index: props.rowIndex,
+            row: props.rowData
+          },
+          column: col
+        })
+      }
+    }
+  } else if (vm.slotAll) {
+    return (props) => {
+      return $slots.all({
+        scope: {
+          $index: props.rowIndex,
+          row: props.rowData
+        },
+        column: col
+      })
+    }
+  }
+  return (props) => {
+    const { rowData: row, column } = props
+    if (column.comp === 'ElSwitch' || vm.table.isRowEdit && row.isEditing && (column.visible !== false || column.canEdit)) {
+      const onInput = (value) => {
+        row[column.prop] = value
+      }
+      const comp = column.comp || 'ElInput'
+      return h(resolveComponent(comp), {
+        ...column,
+        ...column.formAttrs,
+        modelValue: row[column.prop],
+        onInput,
+        disabled: !row.editable || !row.isEditing
+      })
+    }
+    const value = vm.calcValue(props.rowData, col)
+    const { showOverflowTooltip } = column.tableAttrs || {}
+    if (showOverflowTooltip) {
+      return (
+        <el-tooltip content={value}>
+          {value}
+        </el-tooltip>
+      )
+    }
+    return value
+  }
+}
+
+export const convertColumnsForTableV2 = (columns, vm) => {
+  const { _attrs, $slots } = vm
+
+  const cols = columns.map((column, index) => {
+    const { tableAttrs = {} } = column
+    const col = {
+      ...column,
+      key: column.prop,
+      dataKey: column.prop,
+      title: column.label,
+      width: column.width || tableAttrs.width ||
+            column.minWidth || tableAttrs.minWidth ||
+            column.maxWidth || tableAttrs.maxWidth,
+      align: column.align || _attrs.tableAlign || 'center'
+    }
+    if (col.type === 'selection') {
+      col.width = col.width || 46
+      col.headerCellRenderer = makeSelectionHeader(vm)
+    }
+    col.cellRenderer = makeRenderer(col, vm)
+    return col
+  })
+  if (!vm.hideOperates) {
+    cols.push({
+      key: cols.length,
+      title: '操作',
+      type: 'operates',
+      width: vm.operatesWidth || 150,
+      align: _attrs.operatesAlign || _attrs.tableAlign || 'center',
+      fixed: _attrs.operatesFixed || 'right',
+      cellRenderer (props) {
+        return (
+          <div class="operates">
+            {$slots['operates-prefix'] ? $slots['operates-prefix']() : null}
+            {makeEditButton(props, vm)}
+            {makeRowEditButton(props, vm)}
+            {makeCancelEditButton(props, vm)}
+            {makeDeleteButton(props, vm)}
+            {$slots['operates-suffix'] ? $slots['operates-suffix']() : null}
+          </div>
+        )
+      }
+    })
+  }
+  return cols
+}
+
+export default {
+  convertColumnsForTableV2
+}

package/packages/components/xtablev2/xtablev2.vue

@@ -0,0 +1,147 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div class="x-table-v2 pc-x-table-v2" :class="{ fullscreen: isFullscreen }">
+    <searcher
+      ref="searcher"
+      :uid="_uid"
+      :columns="searcherColumns"
+      :config="searcherConfig"
+      @search="handleSearch"
+      @save="saveSettings"
+    />
+
+    <el-collapse
+      v-model="activeNames"
+      :class="(useCollapse ? 'use' : 'no') + '-collapse'"
+    >
+      <el-collapse-item :name="activeNames[0]">
+        <template #title>
+          <div class="collapse-header">
+            <slot v-if="$slots['collapse-title']" name="collapse-title" />
+            <span v-else-if="activeNames.length" class="collapse-title">{{ title }}</span>
+            <span v-else class="collapse-title">
+              {{ title }}，当前第
+              <span>{{ _query.page }}</span>
+              页，展示
+              <span>{{ _data.length }}</span>
+              条数据，
+              共
+              <span>{{ _total || _data.length }}</span> 条数据
+            </span>
+          </div>
+        </template>
+        <x-table-tools
+          v-if="hideTools !== '' && hideTools !== true"
+          v-bind="_attrs"
+          :domids
+          @add="_onAdd"
+          @search="_onSearch"
+          @export="_onExport"
+          @search-export="_onSearchExport"
+          @import="_onImport"
+          @multi-delete="_onMultiDelete"
+        >
+          <template v-if="$slots['tools-prefix']" #tools-prefix>
+            <slot name="tools-prefix" />
+          </template>
+          <template v-if="$slots['tools-suffix']" #tools-suffix>
+            <slot name="tools-suffix" />
+          </template>
+          <template #tools-end>
+            <x-icon
+              name="FullScreen"
+              class="full"
+              @click="handleToggleFullscreen"
+            />
+            <settings
+              v-if="!hideSettings"
+              v-model="settings"
+              ref="settings"
+              v-bind="{ ..._attrs.settings, ...$attrs }"
+              :width="_attrs['cols-popover-width'] || 500"
+              @sort="$emit('sort', $event)"
+              @reset="handleResetSettings"
+              @sort-change="handleSortChange"
+              @init="initSettings"
+              @save="saveSettings"
+            />
+          </template>
+        </x-table-tools>
+
+        <el-auto-resizer :style="{ height }">
+          <template #default="{ width, height }">
+            <el-table-v2
+              ref="tableRef"
+              :header-height="46"
+              :row-height="40"
+              v-bind="elTableAttrs"
+              v-loading="_loading"
+              :data="_data"
+              :columns="convertColumnsForTableV2(_visibleColumns, this)"
+              :fixed
+              :width
+              :height
+            >
+              <template v-if="$slots['footer']" #footer>
+                <slot name="footer" />
+              </template>
+              <template v-if="$slots['empty']" #empty>
+                <slot name="empty" />
+              </template>
+              <template v-if="$slots['overlay']" #overlay>
+                <slot name="overlay" />
+              </template>
+            </el-table-v2>
+          </template>
+        </el-auto-resizer>
+
+        <x-pagination
+          v-if="!!_query && !!_total && !!(onSearch || _listen['search'])"
+          :query="_query"
+          :total="_total"
+          @search="_emit('search')"
+        />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<style lang="scss">
+.pc-x-table-v2 {
+  &.fullscreen {
+    background-color: white;
+    z-index: 2000;
+  }
+  .collapse-header {
+    border-left: 5px solid var(--el-color-primary);
+    padding-left: 10px;
+    height: 30px;
+    line-height: 30px;
+  }
+  .collapse-title span {
+    color: var(--el-color-danger);
+  }
+  .el-icon.full {
+    font-size: 20px;
+    color: #606666;
+    height: 32px;
+    cursor: pointer;
+    margin-right: 10px !important;
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+  .el-table-v2__header-cell.is-align-center {
+    .el-checkbox {
+      width: 15px !important;
+    }
+  }
+}
+.visible-cols-reference {
+  padding: 0 10px;
+  font-size: 18px;
+}
+</style>