@ctzy-web-client/plugin-component-vue 1.0.0

package/src/data-table/data-table.vue

@@ -0,0 +1,426 @@
+<template>
+  <div :class="ns.b()" ref="dataTableEl">
+    <slot :dataTable="dataTable">
+      <ElTable
+        class="content"
+        height="100%"
+        ref="elTable"
+        :data="data"
+        :row-key="dataTable.primaryKey"
+        show-header
+        stripe
+        v-bind="attrs"
+        @selection-change="selectionChange"
+        @sort-change="sortHandle"
+        :border="border"
+      >
+        <ElTableColumn v-if="showDrag" width="40px">
+          <div :class="ns.e('drag')">
+            <slot>
+              <i class="ptp-icon ptp-buzhou-yidong"></i>
+            </slot>
+          </div>
+        </ElTableColumn>
+        <slot v-if="selection" name="selection">
+          <ElTableColumn type="selection" align="center" width="56" :reserve-selection="true" />
+        </slot>
+        <slot v-if="showIndex" name="index">
+          <ElTableColumn
+            type="index"
+            width="60"
+            align="center"
+            :label="indexColumnLabel"
+          />
+        </slot>
+
+        <slot name="table-columns" :dataTable="dataTable">
+          <BwaDataTableColumn
+            v-for="item in displayColumns"
+            :column-key="item.attrName"
+            :key="item.attrName"
+            :label="item.title"
+            :prop="item.fullAttrName"
+            :min-width="item.width"
+            :align="item.align"
+            v-bind="item.componentProps"
+            :sortable="item.sortable=='custom'"
+          >
+            <template #header>
+              <slot :name="`table-header-col-${item.attrName}`">
+                {{ item.title }}
+              </slot>
+            </template>
+            <template #default="{ row, $index }">
+              <slot
+                v-if="data.length"
+                :name="'table-col-' + item.attrName"
+                :row="row"
+                :index="$index"
+                :column="item"
+                :dataTable="dataTable"
+              >
+                <DynamicComponent :column="item" :record="row" />
+              </slot>
+            </template>
+          </BwaDataTableColumn>
+        </slot>
+
+        <slot name="column-append"></slot>
+          <template #empty>
+              <slot name="empty-table"></slot>
+          </template>
+      </ElTable>
+    </slot>
+    <div v-if="showPagination" :class="ns.e('pagination')">
+      <div :class="ns.e('pagination-info')">
+        共{{ totalPage }}页，{{ dataTable.totalRecCount }}条
+      </div>
+      <ElPagination
+        :currentPage="dataTable.pageNum"
+        :page-sizes="paginationPageSizes"
+        :page-size="dataTable.pageSize"
+        :layout="paginationLayout"
+        :total="dataTable.totalRecCount"
+        @size-change="dataTable.setPageSize($event)"
+        @current-change="dataTable.pageTo($event)"
+        :teleported="false"
+      />
+    </div>
+    <div
+      v-if="barRectangle"
+      :class="ns.e('dragbar')"
+      :style="{
+        left: barRectangle.left + 'px',
+        top: barRectangle.top + 'px',
+        width: barRectangle.width + 'px',
+        height: barRectangle.height + 'px',
+      }"
+    ></div>
+  </div>
+</template>
+<script setup>
+import { ElMessage, ElPagination, ElTable, ElTableColumn } from 'element-plus';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onUnmounted,
+  provide,
+  reactive,
+  watch,
+  ref,
+  unref,
+  useAttrs,
+} from 'vue';
+import {
+  dataTableKey,
+  useNamespace,
+  useEventDispatcher,
+  useGlobalConfig,
+  useService,
+} from 'web-base-client-vue';
+import DynamicComponent from './dynamic-component.js';
+import BwaDataTableColumn from './data-table-column.vue';
+import { useDataTableDrag } from './use-datatable-drag';
+import { get } from 'lodash';
+import {
+  from,
+  delayWhen,
+  map,
+  skipWhile,
+  Observable,
+  filter,
+  Subject,
+  debounceTime,
+} from 'rxjs';
+
+defineOptions({ name: 'BwaDataTable' });
+
+const props = defineProps({
+  dataTable: {
+    type: Object,
+    required: true,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true,
+  },
+  showIndex: {
+    type: Boolean,
+    default: false,
+  },
+  indexColumnLabel: {
+    type: String,
+    default: '编号',
+  },
+  selection: {
+    type: Boolean,
+    default: false,
+  },
+  paginationLayout: {
+    type: String,
+    default: 'sizes, prev, pager, next, jumper',
+  },
+  paginationPageSizes: {
+    type: Array,
+    default: () => [10, 20, 50, 100, 200],
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  whereParamName: {
+    type: String,
+    default: '',
+  },
+  showDrag: {
+    type: Boolean,
+    default: false,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  }
+});
+
+const attrs = useAttrs();
+
+const userService = useService('UserService');
+
+const elTable = ref(null);
+
+const dataTable = props.dataTable;
+dataTable._userService = userService.value?.getUserList
+
+const dataTableEl = ref(null);
+
+const displayColumns = computed(
+  () => unref(dataTable).getDisplayColumns() || []
+);
+
+watch(
+  computed(() => props.whereParamName),
+  (whereParamName) => {
+    dataTable.setWhereParamName(whereParamName || '');
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+const searchParams = computed(() => props.searchParams);
+
+const emit = defineEmits(['drag']);
+
+const debounceDelay = useGlobalConfig('debounceDelay', 500);
+
+//当前data table 上下文对象
+provide(
+  dataTableKey,
+  reactive({
+    dataTable,
+    displayColumns,
+  })
+);
+
+const ns = useNamespace('datatable');
+
+const { barRectangle } = useDataTableDrag(
+  dataTableEl,
+  '.bwa-datatable__drag',
+  '.el-table__row',
+  { emit }
+);
+
+const processing = ref(false);
+
+const data = computed(() => {
+  return props.dataTable.data;
+});
+
+useEventDispatcher(dataTable, 'load-successfully', async (res) => {
+  if (res.code != 0) {
+    return;
+  }
+
+  const _userService = unref(userService);
+
+  if (!_userService) {
+    return;
+  }
+
+  let columns = dataTable.getColumns();
+
+  const componentNames = ['BwaUserSelect', 'BwaUserMultiSelect'];
+
+  columns = columns
+    .filter((column) => componentNames.includes(column.formComponent))
+    .filter((column) => column.visible)
+    .filter((column) => column.isExtend);
+
+  if (!columns.length) {
+    return;
+  }
+
+  processing.value = true;
+
+  const data = res.data;
+
+  let ids = data
+    .reduce((result, item) => {
+      return result.concat(
+        columns.reduce((result, column) => {
+          let value = get(item, column.fullAttrName);
+
+          value = Array.isArray(value) ? value : value ? [value] : [];
+
+          return result.concat(value);
+        }, [])
+      );
+    }, [])
+    .map((id) => id + '');
+
+  ids = [...new Set(ids)];
+
+  try {
+    const userListResult = await _userService.getUserListByIds(ids);
+
+    if (userListResult.code != 0) {
+      return;
+    }
+
+    for (const column of columns) {
+      column.componentProps = column.componentProps || {};
+      column.componentProps.options = (userListResult.data || []).map(
+        (item) => ({
+          label: item.label,
+          value: item.value,
+        })
+      );
+    }
+
+    console.log(userListResult);
+  } finally {
+    processing.value = false;
+  }
+});
+
+//手动排序
+const sortHandle = (column, prop, order) => {
+    let sortColumn = ''
+    let sortType = ''
+    if (column.order){
+        sortColumn = column.prop
+        sortType = column.order=="descending"?0:1
+        dataTable.setParam('sortColumn', sortColumn);
+        dataTable.setParam('sortType', sortType);
+    }else{
+        dataTable.setParam('sortColumn', sortColumn);
+        dataTable.setParam('sortType', sortType);
+    }
+    dataTable.load()
+}
+
+useEventDispatcher(dataTable, 'load-successfully', (res) => {
+  if (!elTable.value) {
+    return;
+  }
+
+  unref(elTable).store.updateSelectionByRowKey();
+
+  if (res.code != 0) {
+    ElMessage.error(res.msg);
+  }
+});
+
+function sortColumn(array) {
+  array.forEach((item) => {
+    item.no = item.getColumnIndex?.();
+    if (item.children?.length) {
+      sortColumn(item.children);
+    }
+  });
+  array.sort((cur, pre) => cur.no - pre.no);
+}
+
+const tableSelectSubject = new Subject();
+const selectionChange = tableSelectSubject.next.bind(tableSelectSubject);
+
+const totalPage = computed(() => dataTable.getTotalPage());
+
+const tableSelectSubscription = tableSelectSubject
+  .pipe(debounceTime(debounceDelay))
+  .subscribe(unref(dataTable).setSelection.bind(unref(dataTable)));
+
+const selectChangeAPIObservable = new Observable((observer) =>
+  useEventDispatcher(
+    props.dataTable,
+    'select-change',
+    observer.next.bind(observer)
+  )
+)
+  .pipe(
+    filter((selection) => {
+      if (!unref(elTable)) {
+        return false;
+      }
+
+      const selectionRows = unref(elTable).getSelectionRows();
+
+      if (selectionRows.length !== selection.length) {
+        return true;
+      }
+
+      const primaryKey = dataTable.primaryKey;
+      return !selectionRows.every((item) =>
+        selection.find((itm) => item[primaryKey] === item[primaryKey])
+      );
+    })
+  )
+  .subscribe((selection) => {
+    unref(elTable).clearSelection();
+    for (const item of selection) {
+      unref(elTable).toggleRowSelection(item, true);
+    }
+  });
+
+if (props.autoLoad) {
+  //初始化加载
+  dataTable.load();
+}
+
+const searchParamsSubscription = new Observable((observer) =>
+  useEventDispatcher(
+    props.dataTable.filterPanel,
+    'params-change',
+    observer.next.bind(observer)
+  )
+)
+  .pipe(
+    filter(() => props.dataTable.filterPanel.ready),
+    debounceTime(unref(debounceDelay))
+  )
+  .subscribe(() => {
+    props.dataTable.load();
+  });
+
+const subscription = props.dataTable
+  .getDisplayColumnsSubject()
+  .pipe(
+    map(() => unref(elTable)),
+    delayWhen(() => from(nextTick())),
+    map((elTable) => elTable?.store),
+    skipWhile((store) => !store)
+  )
+  .subscribe((store) => {
+    sortColumn(unref(store.states._columns));
+
+    store.updateColumns();
+    store.scheduleLayout();
+  });
+
+onUnmounted(() => {
+  selectChangeAPIObservable.unsubscribe();
+  subscription.unsubscribe();
+  tableSelectSubscription.unsubscribe();
+  searchParamsSubscription.unsubscribe();
+});
+</script>

package/src/data-table/dynamic-component.js

@@ -0,0 +1,58 @@
+import { computed, h, unref } from 'vue';
+import get from 'lodash/get';
+import { useDynamicComponent } from '../utils.js';
+
+const formatValue = (column, value) => {
+  const options = column.componentProps.options || [];
+
+  const _value = Array.isArray(value) ? value : [value];
+
+  const labels = _value.map(
+    (v) => options.find((option) => option.value === v) ?? null
+  );
+
+  if (labels.includes(null)) {
+    return null;
+  }
+
+  return labels.map((item) => item.label).join(',');
+};
+
+export default {
+  props: {
+    column: Object,
+    record: Object,
+  },
+  emits: ['on-change'],
+  setup(props, context) {
+    //组件信息
+    const { component, params } = useDynamicComponent(
+      props,
+      context,
+      'BwaDataColumnView',
+      'fullAttrName'
+    );
+
+    const viewType = computed(() =>
+      props.column.formComponent === 'BwaRichText' ? 'html' : ''
+    );
+
+    return () => {
+      let value = get(props.record, props.column.fullAttrName);
+
+      if (Array.isArray(props.column.componentProps?.options)) {
+        value = formatValue(props.column, value) || value;
+      }
+
+      return h(unref(component), {
+        ...unref(params),
+        value,
+        type: props.column.type,
+        align: props.column.align,
+        rule: props.column.rule,
+        template: props.column.template,
+        defaultValue: props.column.default || '-',
+      });
+    };
+  },
+};

package/src/data-table/index.js

@@ -0,0 +1,13 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DataTable from './data-table.vue';
+import DataTableColumn from './data-table-column.vue';
+import DataColumnView from '../data-table/data-column-view.vue';
+
+export const BwaDataTable = withInstall(DataTable, {
+  DataTableColumn,
+  DataColumnView,
+});
+export const BwaDataTableColumn = withInstall(DataTableColumn);
+export const BwaDataColumnView = withInstall(DataColumnView);
+
+export default BwaDataTable;

package/src/data-table/use-datatable-drag.js

@@ -0,0 +1,156 @@
+import { onBeforeUnmount, onMounted, ref, unref } from 'vue';
+import { filter, fromEvent, map, switchMap, takeUntil, tap } from 'rxjs';
+import { Rectangle } from '../math/Rectangle';
+
+/**
+ * @param {import("vue").Ref<HTMLElement>} el
+ * @param {string} dragClass
+ * @param {string} itemClass
+ */
+export const useDataTableDrag = (el, dragClass, itemClass, context) => {
+  /** @type {import("rxjs").Subscription} */
+  let mousedownSubscription = null;
+
+  let barRectangle = ref(null);
+
+  onMounted(() => {
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    let mouseDownObservable = fromEvent(unref(el), 'mousedown');
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    let mousemoveObservable = fromEvent(unref(document), 'mousemove');
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    let mouseupObservable = fromEvent(unref(document), 'mouseup');
+
+    /** @type {Rectangle[]} */
+    let rectangles = [];
+
+    /** @type {HTMLElement} */
+    let cloneEl = null;
+    let offsetX = 0;
+    let offsetY = 0;
+    let targetIndex = -1;
+
+    // moousedown mousemove* mouseup
+    mousedownSubscription = mouseDownObservable
+      .pipe(
+        filter((event) => {
+          const list = Array.from(unref(el).querySelectorAll(dragClass));
+          const item = list.find((item) => item.contains(event.target));
+
+          if (item) {
+            event.index = list.indexOf(item);
+
+            const row = Array.from(unref(el).querySelectorAll(itemClass)).find(
+              (row) => row.contains(item)
+            );
+            const _cloneEl = row.cloneNode(true);
+
+            const boundary = row.getBoundingClientRect();
+
+            cloneEl = document.createElement('div');
+            cloneEl.className = 'bwa-datatable';
+            const tableEl = document.createElement('table');
+            tableEl.className = 'el-table';
+            const tbodyEl = document.createElement('tbody');
+            cloneEl.append(tableEl);
+            tableEl.appendChild(tbodyEl);
+            tbodyEl.appendChild(_cloneEl);
+
+            offsetX = event.x - boundary.left;
+            offsetY = event.y - boundary.top;
+
+            console.log();
+
+            Object.assign(cloneEl.style, {
+              position: 'absolute',
+              left: event.clientX - offsetX + 'px',
+              top: event.clientY - offsetY + 'px',
+              zIndex: '9999',
+              height: boundary.height + 'px',
+              width: boundary.width + 'px',
+              opacity: '0.6',
+              pointerEvents: 'none',
+            });
+
+            document.body.appendChild(cloneEl);
+
+            document.body.style.cursor = 'move';
+            document.body.style.userSelect = 'none';
+          }
+
+          return !!item;
+        }),
+        tap(() => {
+          rectangles = Array.from(unref(el).querySelectorAll(itemClass)).map(
+            (item) => {
+              const { x, y, width, height } = item.getBoundingClientRect();
+              return new Rectangle(x, y, width, height);
+            }
+          );
+        }),
+        map((event) => {
+          return {
+            index: event.index,
+            x: event.clientX,
+            y: event.clientY,
+          };
+        }),
+        switchMap(({ index, x, y }) => {
+          return mousemoveObservable.pipe(
+            takeUntil(
+              mouseupObservable.pipe(
+                tap(() => {
+                  if (targetIndex !== -1) {
+                    context.emit('drag', index, targetIndex);
+                  }
+                  cloneEl?.remove();
+                  rectangles = [];
+                  offsetX = offsetY = 0;
+                  document.body.style.cursor = '';
+                  document.body.style.userSelect = '';
+                  barRectangle.value = null;
+                  targetIndex = -1;
+                })
+              )
+            ),
+            map((event) => {
+              Object.assign(cloneEl.style, {
+                left: event.clientX - offsetX + 'px',
+                top: event.clientY - offsetY + 'px',
+              });
+
+              const rectangle = rectangles.find((rectangle) =>
+                rectangle.pointIn(event.x, event.y)
+              );
+
+              if (!rectangle) {
+                targetIndex = -1;
+                barRectangle.value = null;
+                return;
+              }
+
+              targetIndex = rectangles.indexOf(rectangle);
+              const direction =
+                event.clientY >= rectangle.cy ? 'after' : 'before';
+
+              targetIndex = targetIndex + (direction === 'after' ? 1 : 0);
+
+              barRectangle.value = new Rectangle(
+                rectangle.left,
+                direction === 'after' ? rectangle.bottom : rectangle.top,
+                rectangle.width,
+                2
+              );
+            })
+          );
+        })
+      )
+      .subscribe((info) => {});
+  });
+
+  onBeforeUnmount(() => {
+    mousedownSubscription?.unsubscribe();
+  });
+
+  return { barRectangle };
+};