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

package/src/datatable-settings/datatable-settings.vue

@@ -0,0 +1,323 @@
+<template>
+  <ElTooltip
+    v-model:visible="value"
+    v-bind="attrs"
+    effect="light"
+    :show-arrow="false"
+    trigger="click"
+    :popper-class="ns.b()"
+    :gpu-acceleration="false"
+    placement="bottom"
+    append-to=".bwa-application"
+  >
+    <span>
+      <slot> </slot>
+    </span>
+    <template #content>
+      <div :class="ns.e('content')">
+        <div :class="ns.e('header')">
+          表头设置
+
+          <span :class="ns.e('tools')">
+            <span
+              v-if="isShowResetColumn"
+              :class="[ns.e('tools-item'), ns.e('refresh')]"
+              @click="resetColumns"
+            >
+              <ElTooltip content="恢复默认" append-to=".bwa-application">
+                <ElIcon>
+                  <RefreshRight />
+                </ElIcon>
+              </ElTooltip>
+            </span>
+
+            <span
+              :class="[ns.e('tools-item'), ns.e('close')]"
+              @click="value = false"
+            >
+              <ElTooltip content="关闭" append-to=".bwa-application">
+                <ElIcon>
+                  <Close />
+                </ElIcon>
+              </ElTooltip>
+            </span>
+          </span>
+        </div>
+
+        <!-- <div :class="ns.e('search')">
+          <ElInput
+            v-model="search"
+            :clearable="true"
+            prefix-icon="Search"
+            placeholder="请输入关键词搜索"
+          />
+        </div> -->
+
+        <ElScrollbar max-height="500px">
+          <div :class="ns.e('main')">
+            <div v-if="displaySearchedColumns.length" :class="ns.b('section')">
+              <div :class="ns.be('section', 'header')">显示字段</div>
+              <BwaDraglist
+                :data="displaySearchedColumns"
+                labelAttr="title"
+                idAttr="attrName"
+                @sort-change="handleSortChange"
+              >
+                <template #default="{ item }">
+                  <div :class="ns.be('section', 'content')">
+                    <div :class="ns.e('field-item')">
+                      <span>
+                        {{ item.title }}
+                      </span>
+                      <ElSwitch
+                        v-model="item.visible"
+                        size="small"
+                        :disabled="item.settings.disabled"
+                        @mousedown.stop
+                      />
+                    </div>
+                  </div>
+                </template>
+              </BwaDraglist>
+              <!-- <div
+                v-show="!displaySearchedColumns.length"
+                :class="ns.be('section', 'empty')"
+              >
+                暂无字段
+              </div> -->
+            </div>
+
+            <div v-if="hiddenSearchedColumns.length" :class="ns.b('section')">
+              <div :class="ns.be('section', 'header')">未显示字段</div>
+
+              <div :class="ns.be('section', 'content')">
+                <div
+                  v-for="column in hiddenSearchedColumns"
+                  :key="column.attrName"
+                  :class="ns.e('field-item')"
+                >
+                  <span>
+                    {{ column.title }}
+                  </span>
+                  <ElSwitch
+                    v-model="column.visible"
+                    size="small"
+                    :disabled="column.settings.disabled"
+                  />
+                </div>
+              </div>
+
+              <!-- <div
+                v-show="!hiddenSearchedColumns.length"
+                :class="ns.be('section', 'empty')"
+              >
+                暂无字段
+              </div> -->
+            </div>
+          </div>
+        </ElScrollbar>
+      </div>
+    </template>
+  </ElTooltip>
+</template>
+
+<script setup>
+import { ElIcon, ElScrollbar, ElSwitch, ElTooltip } from 'element-plus';
+import {
+  useNamespace,
+  useValue,
+  useService,
+  useEventDispatcher,
+} from 'web-base-client-vue';
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  ref,
+  unref,
+  useAttrs,
+  withCtx,
+} from 'vue';
+import BwaDraglist from '../drag-list';
+import { map } from 'rxjs';
+import { dataModelDB } from '../utils/db';
+
+defineOptions({ name: 'BwaDataTableSetting' });
+
+const props = defineProps({
+  dataTable: {
+    type: Object,
+    required: true,
+  },
+});
+
+const attrs = useAttrs();
+
+const ns = useNamespace('datatable-settings');
+
+const value = ref(false);
+
+const appName = useValue('AppName');
+const userService = useService('UserService');
+
+const userID = computed(() => unref(userService)?.userInfo?.id || '');
+
+const isShowResetColumn = computed(
+  () => !props.dataTable.isDefaultColumnSort()
+);
+
+const key = computed(
+  () => `${unref(appName)}_${props.dataTable.name}_settings`
+);
+
+const search = ref('');
+
+const columns = computed(() =>
+  props.dataTable
+    .getColumns()
+    .filter((column) => column.settings.visible)
+    .filter((column) => column.settings.visible)
+);
+
+const initColumns = async () => {
+  let persistentColumnInfos = [];
+
+  const result = await dataModelDB.tableHeaderSettings
+    .where('[app+tableName+userID]')
+    .equals([unref(appName), props.dataTable.name, unref(userID)])
+    .toArray();
+
+  if (result.length) {
+    persistentColumnInfos = result[0]?.columnInfo ?? [];
+  }
+
+  if (persistentColumnInfos.some((item) => typeof item === 'string')) {
+    persistentColumnInfos = persistentColumnInfos.map((columnInfo) => {
+      return typeof columnInfo === 'object'
+        ? columnInfo
+        : { name: columnInfo, visible: true };
+    });
+  }
+
+  const _dataTable = props.dataTable;
+  let dataTableColumns = _dataTable
+    .getColumns()
+    .slice()
+    .filter((item) => item.settings.visible);
+
+  persistentColumnInfos = persistentColumnInfos.filter(
+    (item) =>
+      dataTableColumns.findIndex((column) => column.name === item.name) !== -1
+  );
+
+  if (!persistentColumnInfos) {
+    return dataTableColumns;
+  }
+
+  let sortedColumns = persistentColumnInfos
+    .map((columnInfo) =>
+      dataTableColumns.find((column) => column.name === columnInfo.name)
+    )
+    .filter(Boolean);
+
+  dataTableColumns = sortedColumns.concat(
+    dataTableColumns.filter(
+      (column) => !sortedColumns.find((col) => column.name === col.name)
+    )
+  );
+
+  for (const column of dataTableColumns) {
+    const persistentItem = persistentColumnInfos.find(
+      (item) => item.name === column.name
+    );
+    column.visible = persistentItem?.visible ?? column.visible;
+  }
+
+  props.dataTable.setDisplayColumns(
+    dataTableColumns.filter((column) => column.visible)
+  );
+
+  return dataTableColumns;
+};
+
+const resetColumns = () => {
+  const _dataTable = props.dataTable;
+
+  _dataTable.resetColumnSort();
+};
+
+const allSearchedColumns = computed(() => {
+  const _search = unref(search);
+  return unref(columns).filter((column) => column.title.indexOf(_search) > -1);
+});
+
+const hiddenSearchedColumns = computed(() =>
+  unref(allSearchedColumns).filter((item) => !item.visible)
+);
+
+const displaySearchedColumns = computed(() => {
+  const _search = unref(search);
+  return props.dataTable
+    .getDisplayColumns()
+    .filter((column) => column.settings.visible)
+    .filter((column) => column.title.indexOf(_search) > -1);
+});
+
+const handleSortChange = (sort) => {
+  const _columns = unref(columns);
+  const displayColumns = sort
+    .map(
+      (attrName) =>
+        _columns.find((column) => column.attrName === attrName) ?? null
+    )
+    .filter(Boolean);
+
+  props.dataTable.setDisplayColumns(displayColumns);
+};
+
+const scope = getCurrentScope();
+
+const handleInitCompleted = async () => {
+  const dataTableColumns = await initColumns();
+
+  const subscription = props.dataTable
+    .getDisplayColumnsSubject()
+    .pipe(
+      map((displayColumns) => {
+        const hiddenColumns = dataTableColumns.filter(
+          (column) =>
+            !displayColumns.find(
+              (displayColumn) => displayColumn.attrName === column.attrName
+            )
+        );
+
+        return [...displayColumns, ...hiddenColumns].map((column) => ({
+          name: column.name,
+          visible: column.visible,
+        }));
+      })
+    )
+    .subscribe({
+      next: (columnInfo) => {
+        dataModelDB.tableHeaderSettings.put({
+          app: unref(appName),
+          tableName: props.dataTable.name,
+          userID: unref(userID),
+          columnInfo: columnInfo,
+        });
+      },
+    });
+
+  scope.run(() => {
+    onScopeDispose(() => {
+      subscription.unsubscribe();
+    });
+  });
+};
+
+if (!props.dataTable.inited) {
+  useEventDispatcher(props.dataTable, 'init-completed', handleInitCompleted);
+} else {
+  handleInitCompleted();
+}
+</script>

package/src/datatable-settings/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DataTableSettings from './datatable-settings.vue';
+
+export const BwaDataTableSetting = withInstall(DataTableSettings);
+
+export default BwaDataTableSetting;

package/src/date-range/date-picker.vue

@@ -0,0 +1,115 @@
+<template>
+  <ElTooltip
+    trigger="click"
+    pure
+    teleported
+    effect="light"
+    role="dialog"
+    :transition="`el-zoom-in-top`"
+    :fallback-placements="['bottom', 'top', 'right', 'left']"
+    :gpu-acceleration="false"
+    :show-arrow="false"
+    :stop-popper-mouse-event="false"
+    v-model:visible="visible"
+    :hide-after="0"
+    :popper-class="ns.b()"
+    persistent
+    append-to=".bwa-application"
+  >
+    <template #default>
+      <slot :visible="visible"> </slot>
+    </template>
+    <template #content>
+      <ElPanelDatePicker type="date" :parsed-value="parsedValue" @pick="onPick" :teleported="false">
+        <template #sidebar>
+          <div :class="ns.e('sidebar')">
+            <ElButton size="small" @click="onClear">清空</ElButton>
+          </div>
+        </template>
+      </ElPanelDatePicker>
+    </template>
+  </ElTooltip>
+</template>
+
+<script setup>
+import { ROOT_PICKER_INJECTION_KEY } from 'element-plus/es/components/date-picker/src/constants';
+import ElPanelDatePicker from 'element-plus/es/components/date-picker/src/date-picker-com/panel-date-pick';
+import {
+  formatter,
+  parseDate,
+  valueEquals,
+} from 'element-plus/es/components/time-picker/src/utils';
+import { useLocale } from 'element-plus/es/hooks/index';
+import { computed, provide, ref, watch } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+
+defineOptions({ name: 'BwaDatePicker' });
+const props = defineProps({
+  modelValue: {
+    type: [String, Date, Array],
+  },
+  visible: {
+    type: Boolean,
+  },
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD',
+  },
+  shortcuts: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(['update:modelValue', 'update:visible']);
+
+const ns = useNamespace('datepicker');
+
+const { lang } = useLocale();
+
+const visible = ref(false);
+
+watch(visible, () => {
+  emit('update:visible', visible.value);
+});
+
+provide('EP_PICKER_BASE', {
+  props,
+});
+provide(ROOT_PICKER_INJECTION_KEY, {
+  slots: {},
+  pickerNs: null,
+});
+
+const parsedValue = computed(() => {
+  return parseDate(props.modelValue, props.format, lang);
+});
+
+const emitInput = (input) => {
+  if (valueEquals(props.modelValue, input)) {
+    return;
+  }
+  let formatted;
+  if (Array.isArray(input)) {
+    formatted = input.map((item) => formatter(item, props.format, lang.value));
+  } else {
+    formatted = formatter(input, props.format, lang.value);
+  }
+  emit('update:modelValue', formatted);
+};
+
+const onPick = (date) => {
+  let result;
+  if (Array.isArray(date)) {
+    result = date.map((_) => _.toDate());
+  } else {
+    result = date ? date.toDate() : date;
+  }
+  emitInput(result);
+  visible.value = false;
+};
+
+const onClear = () => {
+  emit('update:modelValue', '');
+  visible.value = false;
+};
+</script>

package/src/date-range/date-range.vue

@@ -0,0 +1,202 @@
+<template>
+  <ElTooltip
+    v-model:visible="pickerVisivle"
+    pure
+    teleported
+    effect="light"
+    role="dialog"
+    :transition="`el-zoom-in-top`"
+    :fallback-placements="['bottom', 'top', 'right', 'left']"
+    :gpu-acceleration="false"
+    :show-arrow="false"
+    :stop-popper-mouse-event="false"
+    :hide-after="0"
+    persistent
+    trigger="click"
+    append-to=".bwa-application"
+  >
+    <template #default>
+        <slot name="pct-default" :formatStartTime="formatStartTime" :formatEndTime="formatEndTime">
+      <div :class="[ns.b(), ns.is('active', pickerVisivle)]">
+        <slot name="label">
+          <span v-if="column" :class="ns.e('label')">{{ column.title }}</span>
+        </slot>
+
+        <span :class="[ns.e('time'), ns.is('empty', !formatStartTime)]">
+          <span :class="ns.e('content')">
+            {{ formatStartTime ? formatStartTime : '开始日期' }}
+          </span>
+          <ElIcon :class="ns.e('caret')">
+            <CaretBottom />
+          </ElIcon>
+        </span>
+        至
+        <span :class="[ns.e('time'), ns.is('empty', !formatEndTime)]">
+          <span :class="ns.e('content')">
+            {{ formatEndTime ? formatEndTime : '结束日期' }}
+          </span>
+          <ElIcon :class="ns.e('caret')">
+            <CaretBottom />
+          </ElIcon>
+        </span>
+      </div>
+        </slot>
+    </template>
+
+    <template #content>
+      <PanelDateRange
+        :parsed-value="parsedValue"
+        type="daterange"
+        :visible="pickerVisivle"
+        @pick="onPick"
+        :teleported="false"
+      />
+    </template>
+  </ElTooltip>
+</template>
+
+<script setup>
+import { computed, watch, inject, ref, provide, useSlots, unref } from 'vue';
+import {
+  useNamespace,
+  filterPanelItemKey,
+  useGlobalConfig,
+} from 'web-base-client-vue';
+import { dayjs } from 'element-plus';
+import PanelDateRange from 'element-plus/es/components/date-picker/src/date-picker-com/panel-date-range';
+import { timePickerDefaultProps } from 'element-plus/es/components/time-picker/src/common/props';
+import { ROOT_PICKER_INJECTION_KEY } from 'element-plus/es/components/date-picker/src/constants';
+import { useNamespace as useElementPlusNamesplace } from 'element-plus/es/hooks/index';
+import {
+  formatter,
+  parseDate,
+  valueEquals,
+} from 'element-plus/es/components/time-picker/src/utils';
+
+defineOptions({ name: 'BwaDateRange' });
+
+const props = defineProps({
+  ...timePickerDefaultProps,
+  modelValue: {
+    type: null,
+    required: true,
+  },
+});
+
+const ns = useNamespace('daterange');
+
+const pickerVisivle = ref(false);
+
+const filterPanelItem = inject(filterPanelItemKey);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const emit = defineEmits(['update:modelValue']);
+
+const slots = useSlots();
+
+const locale = useGlobalConfig('locale', 'ZH');
+const lang = computed(() => unref(locale).name);
+
+provide(ROOT_PICKER_INJECTION_KEY, {
+  slots,
+  pickerNs: useElementPlusNamesplace('picker-panel'),
+});
+provide('EP_PICKER_BASE', {
+  props,
+});
+
+watch(
+  computed(() => props.modelValue),
+  () => {
+    if (
+      !props.modelValue ||
+      Array.isArray(props.modelValue) ||
+      typeof props.modelValue !== 'object'
+    ) {
+      emit('update:modelValue', { start: '', end: '' });
+    }
+  },
+  { immediate: true }
+);
+
+const formatShowTime = (date) => {
+  return date ? dayjs(date).format('YYYY-MM-DD') : '';
+};
+
+/** @type {import('vue').ComputedRef<string>} */
+const startTime = computed(() => {
+  if (!props.modelValue?.start) {
+    return '';
+  }
+
+  return dayjs(props.modelValue.start)
+    .set('hour', 0)
+    .set('minute', 0)
+    .set('second', 0)
+    .format('YYYY-MM-DD HH:mm:ss');
+});
+/** @type {import('vue').ComputedRef<string>} */
+const endTime = computed(() => {
+  if (!props.modelValue?.end) {
+    return '';
+  }
+
+  return dayjs(props.modelValue.end)
+    .set('hour', 23)
+    .set('minute', 59)
+    .set('second', 59)
+    .format('YYYY-MM-DD HH:mm:ss');
+});
+
+const formatStartTime = computed(() => formatShowTime(unref(startTime)));
+const formatEndTime = computed(() => formatShowTime(unref(endTime)));
+
+const dateRangeValue = computed(() => [unref(startTime), unref(endTime)]);
+
+const valueIsEmpty = computed(() => {
+  const value = unref(dateRangeValue);
+  return !value || (Array.isArray(value) && !value.filter(Boolean).length);
+});
+
+const parsedValue = computed(() => {
+  const { valueFormat } = props;
+  const value = unref(dateRangeValue);
+
+  if (!unref(valueIsEmpty)) {
+    return value.map((d) => parseDate(d, valueFormat, unref(lang)));
+  }
+
+  return [];
+});
+
+const emitInput = (input) => {
+  if (!valueEquals(unref(dateRangeValue), input)) {
+    const formatted = input.map((item) =>
+      formatter(item, props.valueFormat, unref(lang))
+    );
+
+    emit('update:modelValue', {
+      start: formatted[0]
+        ? dayjs(formatted[0])
+            .set('hour', 0)
+            .set('minute', 0)
+            .set('second', 0)
+            .format('YYYY-MM-DD HH:mm:ss')
+        : '',
+      end: formatted[1]
+        ? dayjs(formatted[1])
+            .set('hour', 23)
+            .set('minute', 59)
+            .set('second', 59)
+            .format('YYYY-MM-DD HH:mm:ss')
+        : '',
+    });
+  }
+};
+
+const onPick = (date, visible = false) => {
+  pickerVisivle.value = visible;
+
+  emitInput(date.map((item) => item.toDate()));
+};
+</script>

package/src/date-range/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DateRange from './date-range.vue';
+
+export const BwaDateRange = withInstall(DateRange);
+
+export default BwaDateRange;

package/src/drag-list/constants.js

@@ -0,0 +1 @@
+export const dragListContextKey = 'DRAG_LIST_CONTEXT_KEY';

package/src/drag-list/drag-item.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="ns.b()" draggable-context-id="" @mousedown="handleMousedown">
+    <i :class="[ns.e('drag-icon'), 'ptp-icon', 'ptp-buzhou-yidong']"></i>
+    <span :class="ns.e('content')">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, inject, onBeforeUnmount, onMounted } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragListContextKey } from './constants';
+
+const ns = useNamespace('dragitem');
+
+defineOptions({ name: 'BwaDragItem' });
+
+const dragListContext = inject(dragListContextKey);
+
+const id = dragListContext.nextID();
+
+const instance = getCurrentInstance();
+
+/**
+ * @param {MouseEvent} event
+ */
+const handleMousedown = (event) => {
+  if (event.button !== 0) {
+    return;
+  }
+  dragListContext.startDrag(instance.proxy);
+};
+
+onMounted(() => {
+  dragListContext.handleItemCreate(id, instance.proxy);
+});
+
+onBeforeUnmount(() => {
+  dragListContext.handleItemDestroy(id, instance.proxy);
+});
+
+defineExpose({
+  id,
+});
+</script>