@wp1001/ui 2.9.13

package/packages/components/xtable/pc.vue

@@ -0,0 +1,421 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <div class="x-table pc-x-table" :class="{ fullscreen: isFullscreen, 'hide-header': hideHeader }">
+    <searcher
+      ref="searcher"
+      :uid="_uid"
+      :columns="searcherColumns"
+      :config="searcherConfig"
+      @search="handleSearch"
+      @save="saveSettings"
+    />
+
+    <el-collapse
+      v-model="activeNames"
+      :class="(_useCollapse ? 'use' : 'no') + '-collapse'"
+      @change="handleCollapseChange"
+    >
+      <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>
+        <slot name="tools-top" />
+        <pc-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>
+          <template #tools-end>
+            <pc-x-icon
+              v-if="!hideChart"
+              name="PieChart"
+              class="chart"
+              @click="handleShowPieDialog"
+            />
+            <span class="minus" @click="handleMinus">
+              <pc-x-icon name="FullScreen" />
+              <span>-</span>
+            </span>
+            <pc-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>
+        </pc-x-table-tools>
+        <slot name="tools-bottom" />
+
+        <el-table
+          ref="tableRef"
+          element-loading-text="加载中..."
+          v-bind="elTableAttrs"
+          v-loading="_loading"
+          v-el-table-infinite-scroll="_onLoad"
+          :infinite-scroll-disabled="_finished"
+          @header-dragend="handleHeaderDragend"
+          @selection-change="handleSelectionChange"
+          @sort-change="handleSortChange"
+        >
+          <el-table-column
+            v-for="(column, index) in _visibleColumns"
+            v-bind="column"
+            :key="index"
+            :min-width="column.minWidth"
+            :align="column.align || _attrs.tableAlign || 'center'"
+            :resizable="column.resizable || true"
+            :show-overflow-tooltip="calcOverflowTooltip(column)"
+          >
+            <template #default="scope" v-if="!['selection','index'].includes(column.type)">
+              <input
+                v-if="column.type === 'radio'"
+                type="radio"
+                :value="scope.$index"
+                :checked="scope.$index === checked"
+                @change="handleCheckedChange"
+              >
+              <el-space v-else-if="column.slot === '$image'" wrap>
+                <div class="image-item" v-for="(image, index) in calcImages(scope, column)" :key="index">
+                  <el-image
+                    v-if="image.type === 'image'"
+                    :src="image.url"
+                    :preview-src-list="scope._image_urls"
+                    :initial-index="scope._image_urls.indexOf(image.url)"
+                    lazy preview-teleported
+                  />
+                  <video
+                    v-else-if="image.type === 'video'"
+                    :src="image.url" controls
+                  />
+                  <a
+                    v-else
+                    :href="image.url" target="_blank"
+                  >
+                    <pc-x-icon :name="image.icon" class="file-icon" />
+                  </a>
+                </div>
+              </el-space>
+              <el-tag
+                v-else-if="column.slot === '$tag'"
+                :type="calcTagType(scope, column)"
+              >
+                {{ calcTagValue(scope, column) }}
+              </el-tag>
+              <a
+                v-else-if="column.slot === '$link' && /https?\:/.test(column.to(scope.row))"
+                :href="column.to(scope.row)" target="_blank" @click.native="column.onDownload?.(scope.row, scope.$index, $event)"
+              >
+                {{ calcLink(scope.row, column) }}
+              </a>
+              <router-link
+                v-else-if="column.slot === '$link'"
+                :to="column.to(scope.row)"
+              >
+                {{ calcLink(scope.row, column) }}
+              </router-link>
+              <a :href="`tel:${scope.row[column.prop]}`" v-else-if="column.slot === '$phone'">
+                {{ scope.row[column.prop] }}
+              </a>
+              <img
+                v-else-if="column.slot === '$qrcode'"
+                :title="scope.row[column.prop]"
+                :data-qrcodeid="`qrcode-${index}-${scope.$index}`"
+                :style="{ width: '128px', height: '128px', ...(column.tableAttrs?.style || column.style) }"
+              />
+              <el-icon
+                v-else-if="column.slot === '$icon'"
+                class="cell-icon"
+              >
+                <component :is="scope.row[column.prop]" />
+              </el-icon>
+              <div
+                v-else-if="column.slot === '$html'"
+                v-html="scope.row[column.prop]"
+              />
+              <slot
+                v-else-if="column.slot"
+                :name="column.slot"
+                :scope
+                :column
+                :value="scope.row[column.prop]"
+              />
+              <slot
+                v-else-if="slotAll"
+                name="all"
+                :scope
+                :column
+                :value="scope.row[column.prop]"
+              />
+              <template v-else>
+                <component
+                  v-if="column.comp === 'ElSwitch' || table.isRowEdit && scope.row.isEditing && (column.visible !== false || column.canEdit)"
+                  :is="column.comp || 'ElInput'"
+                  v-bind="{...column, ...column.formAttrs, onChange: undefined}"
+                  v-model="scope.row[column.prop]"
+                  @change="column.onChange?.($event, scope)"
+                  :disabled="!scope.row.editable || !scope.row.isEditing"
+                />
+                <span v-else>
+                  {{ calcValue(scope.row, column) }}
+                </span>
+              </template>
+            </template>
+            <template #header="{ column, $index }">
+              <span v-if="!$slots.header">{{ column.label }}</span>
+              <slot v-else name="header" v-bind="{ column, $index }" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="!hideOperates"
+            label="操作"
+            :min-width="operatesWidth"
+            :align="_attrs.operatesAlign || _attrs.tableAlign || 'center'"
+            :fixed="_attrs.operatesFixed ?? 'right'"
+          >
+            <template #default="scope">
+              <slot
+                name="operates-prefix"
+                :scope
+              />
+              <el-dropdown v-if="operatesDropdown" class="operates-dropdown">
+                <el-button
+                  v-bind="{ type: 'primary', ..._attrs['operates-btn'] }"
+                  icon="arrow-down"
+                  v-domid="domids['operates']"
+                  class="x-table-operates"
+                >
+                  {{ _attrs['operates-btn-text'] ?? '操作' }}
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu class="operates-dropdown-menu">
+                    <el-dropdown-item v-if="canEdit(scope.row)">
+                      <el-button
+                        v-bind="{ type: 'warning', ..._attrs['edit-btn'] }"
+                        v-domid="domids['edit']"
+                        icon="edit"
+                        class="x-table-edit"
+                        @click="_emit('edit', scope)"
+                      >
+                        {{ _attrs['edit-btn-text'] ?? '编辑' }}
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="canSave(scope.row)">
+                      <el-button
+                        v-bind="{ type: 'success', ..._attrs['row-edit-btn'] }"
+                        v-loading="scope.row._loading"
+                        :disabled="scope.row._loading"
+                        v-domid="domids['row-edit']"
+                        icon="collection"
+                        class="x-table-row-edit"
+                        @click="_emit('row-edit', scope)"
+                      >
+                        {{ _attrs['row-edit-btn-text'] ?? '保存' }}
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="canCancelEdit(scope.row)">
+                      <el-button
+                        v-bind="{ type: 'warning', ..._attrs['cancel-edit-btn'] }"
+                        v-domid="domids['cancel-edit']"
+                        icon="refresh-left"
+                        class="x-table-cancel-edit"
+                        @click="_emit('cancel-edit', scope)"
+                      >
+                        {{ _attrs['cancel-edit-btn-text'] ?? '取消编辑' }}
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="canDelete(scope.row)">
+                      <el-button
+                        v-bind="{ type: 'danger', ..._attrs['delete-btn'] }"
+                        v-domid="domids['delete']"
+                        icon="DeleteFilled"
+                        class="x-table-delete"
+                        @click="_emit('delete', scope)"
+                      >
+                        {{ _attrs['delete-btn-text'] ?? '删除' }}
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-button
+                v-if="!operatesDropdown && canEdit(scope.row)"
+                v-bind="{ type: 'warning', ..._attrs['edit-btn'] }"
+                v-domid="domids['edit']"
+                icon="edit"
+                class="x-table-edit"
+                @click="_emit('edit', scope)"
+              >
+                {{ _attrs['edit-btn-text'] ?? '编辑' }}
+              </el-button>
+              <el-button
+                v-if="!operatesDropdown && canSave(scope.row)"
+                v-bind="{ type: 'success', ..._attrs['row-edit-btn'] }"
+                v-loading="scope.row._loading"
+                :disabled="scope.row._loading"
+                v-domid="domids['row-edit']"
+                icon="collection"
+                class="x-table-row-edit"
+                @click="_emit('row-edit', scope)"
+              >
+                {{ _attrs['row-edit-btn-text'] ?? '保存' }}
+              </el-button>
+              <el-button
+                v-if="!operatesDropdown && canCancelEdit(scope.row)"
+                v-bind="{ type: 'warning', ..._attrs['cancel-edit-btn'] }"
+                v-domid="domids['cancel-edit']"
+                icon="refresh-left"
+                class="x-table-cancel-edit"
+                @click="_emit('cancel-edit', scope)"
+              >
+                {{ _attrs['cancel-edit-btn-text'] ?? '取消编辑' }}
+              </el-button>
+              <el-button
+                v-if="!operatesDropdown && canDelete(scope.row)"
+                v-bind="{ type: 'danger', ..._attrs['delete-btn'] }"
+                v-domid="domids['delete']"
+                icon="DeleteFilled"
+                class="x-table-delete"
+                @click="_emit('delete', scope)"
+              >
+                {{ _attrs['delete-btn-text'] ?? '删除' }}
+              </el-button>
+              <el-button
+                v-for="(action, index) in _actions" :key="index"
+                v-bind="action"
+                @click="action.handler(scope)"
+              >
+                {{ action.name }}
+              </el-button>
+              <slot
+                name="operates-suffix"
+                :scope
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <x-pagination
+          v-if="!!_query && !!_total && !hidePagination"
+          :query="_query"
+          :total="_total"
+          @search="onPaging"
+        />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+
+  <x-dialog
+    v-if="!hideChart"
+    v-model="dialog.visible"
+    width="96%" class="x-chart-dialog"
+    @fullscreenchange="handleChartDialogFullscreen"
+  >
+    <template #header>
+      <span class="el-dialog__title">
+        图表
+        <span v-show="_chartOption.maxLimit" class="max-limit">
+          (系统设置最多统计 {{ _chartOption.maxLimit }} 条数据)
+        </span>
+      </span>
+    </template>
+    <x-chart
+      ref="chartRef"
+      :height="_chartHeight"
+      :option="_chartOption"
+      :datasource="{ columns: _columns, search }"
+    />
+  </x-dialog>
+</template>
+
+<style lang="scss">
+.pc-x-table {
+  &.fullscreen {
+    background-color: white;
+    z-index: 2000;
+  }
+  &.hide-header .el-table__header {
+    display: none;
+  }
+  .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);
+  }
+  .cell-icon {
+    font-size: 17px;
+  }
+  .file-icon {
+    font-size: 50px;
+    color: #606666;
+  }
+}
+.minus {
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+  span {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+    font-weight: 200;
+  }
+}
+.max-limit {
+  color: #a0aaaa;
+  font-size: 15px;
+  margin-left: 5px;
+}
+.x-chart-dialog {
+  .el-dialog__body {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+}
+</style>