@wp1001/ui 2.9.13

package/packages/components/xtable/mobile.js

@@ -0,0 +1,108 @@
+import utils from './utils.js'
+import Searcher from './searcher.vue'
+
+export default {
+  name: 'MobileXTable',
+  inheritAttrs: false,
+  props: {
+    ...utils.props(),
+    platform: String,
+    labelWidth: {
+      type: String,
+      default: '80px'
+    }
+  },
+  emits: [
+    ...utils.emits()
+  ],
+  components: { Searcher },
+  data () {
+    return {
+      scope: {},
+      selected: [],
+      settings: {},
+      checked: null,
+      operatesVisible: false
+    }
+  },
+  computed: {
+    ...utils.computed,
+    hasIndex () {
+      return this._visibleColumns.some(col => col.type === 'index' || col.type === '_index')
+    },
+    hasSelection () {
+      return this._visibleColumns.some(col => col.type === 'selection')
+    },
+    hasRadio () {
+      return this._visibleColumns.some(col => col.type === 'radio')
+    },
+    cols () {
+      return this._visibleColumns.filter(col => {
+        return !['index', 'selection', 'expand', 'radio', '_index'].includes(col.type)
+      })
+    },
+    _mobileColumns () {
+      return this._visibleColumns.filter(col => !['_index', 'index', 'selection'].includes(col.type))
+    }
+  },
+  watch: {
+    selected: {
+      handler (value) {
+        const rows = []
+        value.forEach((ele, index) => {
+          if (ele) rows.push(this._data[index])
+        })
+        this.handleSelectionChange(rows)
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.initSettings()
+  },
+  mounted () {
+    if (this.table) {
+      this.table.tableRef = this
+      this.table.ref = this
+    }
+    this.$emit('update:tref', this)
+  },
+  methods: {
+    ...utils.methods,
+    handleClickCard (index) {
+      if (this.hasSelection) {
+        this.selected[index] = !this.selected[index]
+      } else if (this.hasRadio) {
+        this.handleCheckedChange({ target: { value: index } })
+      }
+    },
+    handleShowActionSheet (row, $index) {
+      this.scope = { row, $index }
+      this.operatesVisible = true
+    },
+    handleSelectAction (action, index) {
+      const { handler } = this._actions[index]
+      if (typeof handler === 'function') {
+        return handler(this.scope)
+      } else if (typeof handler === 'string') {
+        return this.controller[handler]?.(this.scope)
+      }
+      if (action.name === '编辑') {
+        this._emit('edit', this.scope)
+      } else if (action.name === '删除') {
+        this._emit('delete', this.scope)
+      }
+    },
+    clearSelection () {
+      this.selected = []
+      this.checked = null
+    },
+    calcScope (row, $index) {
+      this._scopes ||= new WeakMap()
+      if (!this._scopes.get(row)) {
+        this._scopes.set(row, { row, $index })
+      }
+      return this._scopes.get(row)
+    }
+  }
+}

package/packages/components/xtable/mobile.vue

@@ -0,0 +1,246 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div
+    class="x-table mobile-x-table"
+    v-loading="_loading"
+    element-loading-text="加载中..."
+  >
+    <searcher
+      ref="searcher"
+      :uid="_uid"
+      :columns="searcherColumns"
+      :config="searcherConfig"
+      @search="handleSearch"
+      @save="saveSettings"
+    />
+
+    <x-table-tools
+      v-if="hideTools !== '' && hideTools !== true"
+      v-bind="_attrs"
+      :domids
+      @add="_onAdd"
+      @keywords-search="_onKeywordsSearch"
+      @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>
+    </x-table-tools>
+
+    <div class="x-table-body">
+      <div
+        v-for="(row, index) in _data"
+        :key="index"
+        class="card"
+      >
+        <div class="card-header flex-center">
+          <span class="flex-center">
+            <van-checkbox
+              v-if="hasSelection"
+              v-model="selected[index]"
+              shape="square"
+              class="selection"
+              @click.stop
+            />
+            <span class="index">{{ (_query.page - 1) * _query.limit + index + 1 }}</span>
+          </span>
+          <van-button
+            v-if="_actions.length" icon="ellipsis" size="mini" type="primary" circle plain
+            @click.stop="handleShowActionSheet(row, index)"
+          />
+        </div>
+        <input
+          v-if="hasRadio"
+          type="radio"
+          :value="index"
+          :checked="index === checked"
+          class="radio"
+          @click.stop
+          @change="handleCheckedChange"
+        >
+        <van-row class="card-info" :gutter="10">
+          <van-col
+            v-for="(column, i) in _mobileColumns"
+            :key="i"
+            :span="column.xs ?? 24"
+            class="card-field flex-center"
+          >
+            <span class="card-field__label">{{ column.label }}</span>
+            <span class="card-field__value">
+              <el-space v-if="column.slot === '$image'" wrap>
+                <div class="image-item" v-for="(image, index) in calcImages(calcScope(row, index), column)" :key="index">
+                  <el-image
+                    v-if="image.type === 'image'"
+                    :src="image.url"
+                    :preview-src-list="calcScope(row, index)._image_urls"
+                    :initial-index="calcScope(row, index)._image_urls.indexOf(image.url)"
+                    lazy preview-teleported
+                  />
+                  <a v-else :href="image.url" target="_blank">
+                    <x-icon :name="image.icon" class="file-icon" />
+                  </a>
+                </div>
+              </el-space>
+              <el-tag
+                v-else-if="column.slot === '$tag'"
+                :type="calcTagType({ row, $index: index }, column)"
+              >
+                {{ calcTagValue({ row, $index: index }, column) }}
+              </el-tag>
+              <a
+                v-else-if="column.slot === '$link' && /https?\:/.test(column.to(row))"
+                :href="column.to(row)" target="_blank"
+              >
+                {{ calcLink(row, column) }}
+              </a>
+              <router-link
+                v-else-if="column.slot === '$link'"
+                :to="column.to(row)"
+              >
+                {{ calcLink(row, column) }}
+              </router-link>
+              <a :href="`tel:${row[column.prop]}`" v-else-if="column.slot === '$phone'">
+                {{ row[column.prop] }}
+              </a>
+              <img
+                v-else-if="column.slot === '$qrcode'"
+                :title="row[column.prop]"
+                :data-qrcodeid="`qrcode-${i}-${index}`"
+                :style="{ width: '128px', height: '128px', ...(column.tableAttrs?.style || column.style) }"
+              />
+              <el-icon v-else-if="column.slot === '$icon'" class="cell-icon">
+                <component :is="row[column.prop]" />
+              </el-icon>
+              <slot
+                v-else-if="column.slot"
+                :name="column.slot"
+                :scope="{ row, $index: index }"
+                :column
+                :value="row[column.prop]"
+              />
+              <slot
+                v-else-if="slotAll"
+                name="all"
+                :scope="{ row, $index: index }"
+                :column
+                :value="row[column.prop]"
+              />
+              <template v-else>
+                <component
+                  v-if="column.comp === 'ElSwitch' || table.isRowEdit && row.isEditing && (column.visible !== false || column.canEdit)"
+                  :is="column.comp || 'ElInput'"
+                  v-bind="{...column, ...column.formAttrs}"
+                  v-model="row[column.prop]"
+                  :disabled="!row.editable || !row.isEditing"
+                />
+                <span v-else class="card-field__value">
+                  {{ calcValue(row, column) }}
+                </span>
+              </template>
+            </span>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+
+    <x-pagination
+      v-if="!!_query && !!_total && !!(onSearch || _listen['search'])"
+      :query="_query"
+      :total="_total"
+      @search="_emit('search')"
+    />
+
+    <van-action-sheet
+      v-model:show="operatesVisible"
+      :actions="_actions"
+      close-on-click-action
+      @select="handleSelectAction"
+    >
+    </van-action-sheet>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-x-table {
+  font-size: 14px;
+  padding: 1px 0;
+  color: #303333;
+  background-color: var(--x-bg-color);
+  .selection, .radio {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: var(--x-medium-padding);
+  }
+  .radio {
+    width: 18px;
+    height: 18px;
+  }
+  .card {
+    border-radius: 8px;
+    margin: var(--x-medium-padding);
+    padding: var(--x-medium-padding);
+    background-color: white;
+    .card-header {
+      justify-content: space-between;
+      margin-bottom: 5px;
+      .van-button {
+        font-size: 13px;
+      }
+    }
+    .card-info {
+      .card-field {
+        padding: 5px 0;
+      }
+      .card-field__label {
+        display: inline-block;
+        width: v-bind('labelWidth');
+        color: #909999;
+        vertical-align: top;
+      }
+      .card-field__value {
+        display: inline-block;
+        width: calc(100% - v-bind('labelWidth'));
+        color: #303333;
+        text-align: right;
+      }
+    }
+  }
+  .index {
+    display: inline-block;
+    width: 30px;
+  }
+  :deep(.van-cell__value) {
+    text-align: left;
+  }
+}
+.van-popup {
+  position: relative;
+  .x-info {
+    height: calc(100% - 65px);
+    overflow-y: auto;
+  }
+  .operates {
+    position: absolute;
+    width: calc(100% - var(--x-medium-padding) * 2);
+    left: var(--x-medium-padding);
+    bottom: var(--x-medium-padding);
+  }
+}
+:deep(.van-collapse-item__content) {
+  --van-collapse-item-content-padding: 0;
+}
+.van-pagination {
+  --van-pagination-height: 33px;
+  margin: var(--x-medium-padding) 0;
+}
+</style>

package/packages/components/xtable/pc.js

@@ -0,0 +1,143 @@
+import utils from './utils.js'
+import { baseDialog } from '../../utils/model.js'
+import Searcher from './searcher.vue'
+import Settings from './settings.vue'
+
+const { funcs, highdict } = StardustJs
+
+export default {
+  name: 'PcXTable',
+  inheritAttrs: false,
+  props: {
+    ...utils.props()
+  },
+  emits: [
+    ...utils.emits()
+  ],
+  components: { Searcher, Settings },
+  data () {
+    return {
+      searcher: null,
+      isMinus: false,
+      isFullscreen: false,
+      zoom: 1,
+      checked: null,
+      activeNames: ['name'],
+      settings: {},
+      params: {},
+      _useCollapse: false,
+      dialog: {
+        ...baseDialog()
+      }
+    }
+  },
+  computed: {
+    ...utils.computed,
+    hasQrcodeColumns () {
+      return this._visibleColumns.some(c => c.slot === '$qrcode' || c.tableAttrs?.slot === '$qrcode')
+    }
+  },
+  watch: {
+    ...utils.watch,
+    settings: 'saveSettings'
+  },
+  watch: {
+    _uid: 'initSettings',
+    _columns: {
+      deep: true,
+      immediate: true,
+      handler: 'initSettings'
+    },
+    _loading: {
+      immediate: true,
+      async handler (loading) {
+        if (window.QRCode && !loading && this.hasQrcodeColumns) {
+          await funcs.sleep(0)
+          window.$all('img[data-qrcodeid]').forEach(async img => {
+            const [_, colIndex, rowIndex] = img.dataset.qrcodeid.split('-').map(Number)
+            const column = this._visibleColumns[colIndex]
+            if (column?.prop) {
+              const value = this.table.list[rowIndex]?.[column.prop]
+              if (!value) return
+              this.qrcodeDict ||= {}
+              this.qrcodeDict[value] ||= new Promise(resolve => {
+                QRCode.toDataURL(value, {
+                  width: 128, height: 128, margin: 1, ...(column.tableAttrs || column)
+                }).then(src => {
+                  this.qrcodeDict[value] = src
+                  resolve(src)
+                })
+              })
+              img.src = await this.qrcodeDict[value]
+            }
+          })
+        }
+      }
+    }
+  },
+  created () {
+    this._useCollapse = this.useCollapse
+  },
+  mounted () {
+    if (this.table) {
+      this.table.tableRef = this.$refs.tableRef
+      this.table.ref = this
+    }
+    this.$emit('update:tref', this.$refs.tableRef)
+  },
+  methods: {
+    ...utils.methods,
+    async handleShowPieDialog () {
+      this.dialog.visible = true
+      await this.$nextTick()
+      if (this.table) {
+        this.table.chartRef = this.$refs.chartRef
+      }
+      await this.$refs.chartRef.init()
+      this.$refs.chartRef.initDatasource()
+    },
+    async handleChartDialogFullscreen () {
+      await this.$nextTick()
+      this.$refs.chartRef.chart.resize()
+    },
+    async search (params = {}) {
+      const { remote, maxLimit, query, remoteMethod, search } = this._chartOption
+      if (search) {
+        return search()
+      } else if (this.controller[remoteMethod]) {
+        return this.controller[remoteMethod]()
+      } else if (remote && this.controller.getSearchParams) {
+        let searchParams = this.controller.getSearchParams({ page: 1, limit: 100, ...query }, false)
+        if (typeof params === 'function') {
+          searchParams = params(searchParams)
+        } else {
+          Object.assign(searchParams, params)
+        }
+        const paramsJson = JSON.stringify(searchParams)
+        if (paramsJson === this._lastSearchParams) return this._lastList
+        this._lastSearchParams = paramsJson
+        const data = await this.controller.dbTable.search(searchParams)
+        if (maxLimit && maxLimit > query.limit && data.total > query.limit) {
+          const numPages = Math.ceil(Math.min(maxLimit, data.total) / query.limit)
+          const left = await this.controller.dbTable.batch({
+            transaction: false,
+            operations: Array.from({ length: numPages - 1 }).map((_, i) => ({
+              type: 'search',
+              data: { ...searchParams, page: i + 2 }
+            }))
+          }, 'data')
+          left.forEach(ele => data.data = data.data.concat(ele.data))
+        }
+        let list = highdict.get(data, this.controller.listProp)
+        list = this.controller.formatList(this.controller._defaultFormatList(list, data), data)
+        this._lastList = list
+        return list
+      }
+      return this._data
+    },
+    onPaging () {
+      if (this.params.page) delete this.params.page
+      this._emit('search', this.params)
+    }
+  }
+}