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

package/src/pct-filter-panel/pct-compents/pct-multiple-menu-condition2.vue

@@ -0,0 +1,142 @@
+<template>
+    <span v-if="showTitle" :class="ns.e('title')">{{column.title}}</span>
+    <ElSelect
+        v-model="modelValue"
+        clearable
+        :multiple="multiple"
+        :filterable="filterable"
+        :placeholder="placeholderStr"
+        :loading="loading"
+        @visible-change="visibleChange"
+        :remote="remote"
+        :remote-method="remoteMethod"
+        :size="size"
+        :class="ns.e('multiple')"
+        collapse-tags
+        collapse-tags-tooltip
+        no-data-text="暂无数据"
+    >
+        <ElOption
+            v-for="(item, index) in data"
+            :key="item[valueProp] + index"
+            :value="item[valueProp] + ''"
+            :label="item[labelProp]"
+        />
+    </ElSelect>
+</template>
+
+<script setup>
+import {ElOption, ElSelect} from 'element-plus';
+import { useNamespace } from 'web-base-client-vue';
+import {computed, unref, defineEmits, inject, ref, useAttrs} from 'vue';
+import {dataProps} from "../../hooks/use-data";
+import {
+    useService,
+    HttpRequest,
+    filterPanelItemKey,
+} from 'web-base-client-vue';
+
+const httpRequest = useService(HttpRequest);
+defineOptions({
+    name: 'BwaPctMultipleMenuCondition',
+    __conditionTitle__: '多选菜单-PZ',
+    __conditionDefault__: () => [],
+});
+
+
+const props = defineProps({
+    ...dataProps,
+    modelValue: {
+        type: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    labelProp: {
+        type: String,
+        default: 'label',
+    },
+    valueProp: {
+        type: String,
+        default: 'value',
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    filterable: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+        default: '请选择',
+    },
+    remote: {
+        type: Boolean,
+        default: true,
+    },
+    size: {
+        type: String,
+        default: 'small',
+    }
+});
+const ns = useNamespace('pctfilterpanel-item');
+
+const attrs = useAttrs();
+const showTitle = computed(() => attrs.showTitle)
+
+const data = ref([])
+const loading = ref(false)
+const emit = defineEmits(['update:modelValue', 'search', 'visible-change']);
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title)
+
+
+const getData = async (query) => {
+    loading.value = true
+    const { itfInfo, searchAttr } = column.value.componentProps
+    const {url, method, options, params } = {
+        url: unref(itfInfo).url,
+        method: unref(itfInfo).method || 'POST',
+        options: unref(itfInfo).options || {},
+        params: { ...unref(itfInfo).params, [searchAttr]: query || ''} || {},
+    }
+    data.value = (await unref(httpRequest)[method.toLowerCase()](url, params, options))?.data
+    loading.value = false
+}
+if (column.value?.componentProps) {
+
+} else {
+    data.value = props.options ?? []
+}
+const visibleChange = (val) => {
+    if (!val || !column.value.componentProps) return
+    getData()
+}
+
+const remoteMethod = (query) => {
+    if (column.value.componentProps) {
+        getData(query)
+    } else {
+        emit('search', query)
+    }
+}
+
+const modelValue = computed({
+    get: () => {
+        if (props.multiple) {
+            return Array.isArray(props.modelValue)
+                ? props.modelValue.map((item) => item + '')
+                : [];
+        } else {
+            return props.modelValue == null ? '' : props.modelValue + '';
+        }
+    },
+    set: (v) => emit('update:modelValue', v),
+});
+</script>

package/src/pct-filter-panel/pct-filter-panel-item.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="ns.b('item')" :style="{ 'width': filterPanelLineNum ? (100 / filterPanelLineNum).toFixed(2) + '%' : showTitle ? '25%' : '20%', }">
+    <slot :data="data"></slot>
+    <i
+      v-if="allowClose"
+      :class="['ptp-icon', 'ptp-close', ns.be('item', 'close')]"
+      @click="closeHandle"
+    >
+    </i>
+  </div>
+</template>
+
+<script setup>
+import { reactive, provide } from 'vue';
+import { useNamespace, filterPanelItemKey } from 'web-base-client-vue';
+import { useFilterPanelItem } from './use-filter-panel-item';
+
+defineOptions({
+  name: 'BwaPctFilterPanelItem',
+});
+
+const props = defineProps({
+  prop: {
+    type: String,
+  },
+  close: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const ns = useNamespace('pctfilterpanel');
+
+const { value, column, allowClose, closeHandle, showTitle, filterPanelLineNum } = useFilterPanelItem(props);
+
+const data = reactive({ value });
+
+provide(
+  filterPanelItemKey,
+  reactive({
+    column,
+  })
+);
+</script>

package/src/pct-filter-panel/pct-filter-panel.vue

@@ -0,0 +1,201 @@
+<template>
+  <div :class="ns.b()">
+    <slot>
+      <slot
+        v-for="column in currentFilterColumns"
+        :key="column.attrName"
+        :name="`condition-${column.attrName}`"
+        :attrName="column.attrName"
+      >
+          <PctFilterPanelItem :prop="column.fullAttrName">
+              <template #default="{ data }">
+                  <BwaPctMultipleMenuCondition
+                      v-if="!column.component || column.component === 'BwaMultipleMenuCondition'|| column.component === 'BwaSingleMenuCondition'"
+                      v-model="data.value"
+                      :column="column"
+                      :multiple="column.component !== 'BwaSingleMenuCondition'"
+                      :showTitle="props.showTitle"
+                      :showSearch="column.componentProps?.showSearch"
+                      :options="column.componentProps?.options || []"
+                  />
+                  <BwaPctInputCondition
+                      v-if="column.component === 'BwaInputCondition'"
+                      v-model="data.value"
+                      :column="column"
+                      :showTitle="props.showTitle"
+                  />
+                  <BwaPctDateRangeCondition
+                      v-if="column.component === 'BwaDateRangeCondition'"
+                      v-model="data.value"
+                      :showTitle="props.showTitle"
+                  />
+              </template>
+          </PctFilterPanelItem>
+
+      </slot>
+    </slot>
+      <div style="display: flex; align-items: center; padding-right: 20px; box-sizing: border-box" v-if="showSearch"
+           :style="{
+               'width': props.filterPanelLineNum ? (100 / props.filterPanelLineNum).toFixed(2) + '%' : props.showTitle ? '25%' : '20%',
+           }"
+      >
+          <div v-if="showTitle" :class="ns.e('title')" style="padding-right: 8px">{{searchTitle}}</div>
+          <ElInput
+              prefix-icon="Search"
+              size="small"
+              clearable
+              v-model="searchValue"
+              :placeholder="searchPlaceholder"
+              :class="ns.e('search')"
+          />
+      </div>
+    <PctFilterPanelItem v-if="showFieldOptions" style="width: auto;padding-right: 16px">
+      <BwaAdvanceSelect
+        v-if="showFieldOptions"
+        v-model="selectedColumnAttrNames"
+        :show-selectIcon="false"
+        @search="handleFieldSearch"
+        :class="ns.e('options')"
+        source="pct"
+      >
+        <template #reference-content>
+            <ElButton
+                size="small"
+                :class="ns.e('filterBut')"
+            >
+                <div :class="ns.be('filter', 'plus')"></div>
+                <span :class="ns.be('filter', 'label')"> 筛选 </span>
+            </ElButton>
+        </template>
+        <BwaAdvanceOption
+          v-for="column in closableColumns"
+          :value="column.fullAttrName"
+          :label="column.title"
+          :key="column.fullAttrName"
+          :class="ns.be('filter', 'option')"
+        >
+          <ElCheckbox
+            @click.prevent
+            :modelValue="selectedColumnAttrNames.includes(column.fullAttrName)"
+            :class="ns.be('filter', 'checkbox')"
+          >
+            {{ column.title }}
+          </ElCheckbox>
+          <span :class="ns.be('filter', 'title')">
+            {{ column.componentTitle }}
+          </span>
+        </BwaAdvanceOption>
+      </BwaAdvanceSelect>
+    </PctFilterPanelItem>
+
+
+      <ElButton
+          size="small"
+          type="primary"
+          :class="ns.e('reset')"
+          @click="handleSearch"
+      >
+          查询
+      </ElButton>
+    <ElButton
+      size="small"
+      :class="ns.e('reset')"
+      @click="handleReset"
+    >
+      重置
+    </ElButton>
+
+    <slot
+        name="button"
+    ></slot>
+  </div>
+</template>
+
+<script setup>
+import { useNamespace, filterPanelKey } from 'web-base-client-vue';
+import { useFilterPanel } from './use-filter-panel';
+import { computed, provide, reactive, unref, watch } from 'vue';
+import PctFilterPanelItem from './pct-filter-panel-item.vue';
+
+defineOptions({
+  name: 'BwaPctFilterPanel',
+});
+
+const props = defineProps({
+  dataTable: {
+    type: Object,
+  },
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  showFieldOptions: {
+    type: Boolean,
+    default: true,
+  },
+  searchAttr: {
+    type: String,
+    default: 'search',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  searchFields: {
+    type: Array,
+    default: () => [],
+  },
+    showTitle: {
+        type: Boolean,
+        default: false,
+    },
+    searchTitle: {
+        type: String,
+        default: '标题名称',
+    },
+    filterPanelLineNum: {
+        type: Number
+    }
+});
+
+const emit = defineEmits(['reset', 'filter']);
+
+const ns = useNamespace('pctfilterpanel');
+
+const {
+  dataTable,
+  filterPanel,
+  currentFilterColumns,
+  selectedColumnAttrNames,
+  closableColumns,
+  searchParams,
+  handleFieldSearch,
+  searchValue,
+  isChange,
+  handleReset,
+    handleSearch
+} = useFilterPanel(props, { emit });
+console.log(currentFilterColumns)
+watch(
+  filterPanel,
+  (filterPanel, _, onCleanup) => {
+    filterPanel.existComponent = true;
+
+    onCleanup(() => {
+      filterPanel.existComponent = false;
+    });
+  },
+  { immediate: true }
+);
+
+provide(
+  filterPanelKey,
+  reactive({
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+      showTitle: props.showTitle,
+      filterPanelLineNum: props.filterPanelLineNum
+  })
+);
+</script>

package/src/pct-filter-panel/use-filter-panel-item.js

@@ -0,0 +1,61 @@
+import {
+  inject,
+  watch,
+  computed,
+  unref,
+  onBeforeUnmount,
+  onMounted,
+  resolveComponent,
+} from 'vue';
+import { filterPanelKey } from 'web-base-client-vue';
+
+export const useFilterPanelItem = (props) => {
+  const filterPanelContext = inject(filterPanelKey);
+    const showTitle = computed(() => filterPanelContext.showTitle)
+    const filterPanelLineNum = computed(() => filterPanelContext.filterPanelLineNum)
+    // console.log('filterPanelLineNum',filterPanelLineNum)
+  const filterPanel = computed(() => filterPanelContext.filterPanel);
+  const column = computed(() => {
+    if (!unref(filterPanel)) {
+      return null;
+    }
+    return unref(filterPanel).getColumn(props.prop);
+  });
+
+  const value = computed({
+    get: () => {
+      if (!unref(column)) {
+        return null;
+      }
+      return unref(filterPanel).getFilterParam(unref(column));
+    },
+    set: (v) => {
+      if (!unref(column)) {
+        return;
+      }
+      // 搜索条件改变是否支持自动检索
+      unref(filterPanel).setFilterParam(unref(column), v, false);
+    },
+  });
+
+  const allowClose = computed(() => props.close || !!unref(column)?.closable);
+
+  const closeHandle = () => {
+    if (!unref(column)) {
+      return;
+    }
+    unref(filterPanel).closeColumn(unref(column));
+
+    unref(filterPanel).dataTable.refresh();
+  };
+
+  onMounted(() => {
+    unref(filterPanel).changeOriginFilterParams();
+  });
+
+  onBeforeUnmount(() => {
+    unref(filterPanel).changeOriginFilterParams();
+  });
+
+  return { value, column, allowClose, closeHandle, showTitle, filterPanelLineNum };
+};

package/src/pct-filter-panel/use-filter-panel.js

@@ -0,0 +1,206 @@
+import { useProp } from 'element-plus';
+import { useEventDispatcher, useService, useValue } from 'web-base-client-vue';
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  resolveComponent,
+  unref,
+  watch,
+  withCtx,
+} from 'vue';
+import { Observable } from 'rxjs';
+import { dataModelDB } from '../utils/db';
+
+export const useFilterPanel = (props, context) => {
+  const dataTable = useProp('dataTable');
+  const filterPanel = computed(() => unref(dataTable).filterPanel);
+
+  /** @type {import('dexie').Table} */
+  const filterPanelTable = dataModelDB.filterPanel;
+
+  const currentFilterColumns = computed(() =>
+    unref(filterPanel).getAppliedColumns()
+  );
+
+  const userService = useService('UserService');
+  const _userID = userService?.userInfo?.id || '0';
+
+  const searchParams = computed(() => unref(filterPanel)._filterParams);
+
+  const selectedColumnAttrNames = computed({
+    get: () => unref(filterPanel).getSelectedColumnAttrNames(),
+    set: (v) => {
+      const oldSelectedColumnAttrNames = selectedColumnAttrNames.value;
+      unref(filterPanel).setSelectedColumnAttrNames(v);
+
+      if (unref(filterPanel).ready) {
+        const existsOldAttrNames = oldSelectedColumnAttrNames.filter(
+          (attrName) => v.includes(attrName)
+        );
+        if (existsOldAttrNames.length < oldSelectedColumnAttrNames.length) {
+          unref(dataTable).refresh();
+        }
+      }
+    },
+  });
+  const closableColumns = computed(() =>
+    unref(filterPanel).getSearchClosableColumns()
+  );
+
+  const searchValue = computed({
+    get: () => unref(filterPanel).getSearchValue(),
+      // 搜索条件改变是否支持自动检索
+    set: (v) => unref(filterPanel).setSeachValue(v, false),
+  });
+
+  const isChange = computed(() => unref(filterPanel).isChange());
+
+  watch(
+    useProp('searchAttr'),
+    (searchAttr) => {
+      unref(filterPanel).setSearchAttr(searchAttr);
+    },
+    { immediate: true }
+  );
+
+  watch(
+    useProp('searchFields'),
+    (searchFields) => {
+      unref(filterPanel).setSearchFields(searchFields);
+    },
+    { immediate: true }
+  );
+
+  const handleFieldSearch = (value) => {
+    unref(filterPanel).fieldSearchValue = value;
+  };
+
+  const handleReset = () => {
+    unref(filterPanel).resetFilterParams();
+    context.emit('reset');
+  };
+  const handleSearch = () => {
+      dataTable.value.load()
+  }
+
+  useEventDispatcher(filterPanel, 'params-change', () => {
+    const _filterPanel = unref(filterPanel);
+    context.emit('filter', {
+      ..._filterPanel.getFilterParams(),
+      [_filterPanel.getSearchAttr()]: _filterPanel.getSearchValue(),
+    });
+  });
+
+  const appName = useValue('AppName');
+
+  const selectedColumnChangeSubscription = new Observable((observer) =>
+    useEventDispatcher(
+      filterPanel,
+      'selected-column-change',
+      observer.next.bind(observer)
+    )
+  ).subscribe(async () => {
+    const _appName = unref(appName);
+    const _tableName = unref(dataTable).name;
+
+    let result = await filterPanelTable
+      .where('[app+tableName+userID]')
+      .equals([_appName, _tableName, _userID])
+      .toArray();
+
+    let filterPanelOrder = result.length ? result[0].order ?? [] : [];
+
+    const attrNames = unref(filterPanel).getSelectedColumnAttrNames();
+
+    attrNames.sort((a1, a2) => {
+      const index1 = filterPanelOrder.indexOf(a1);
+      const index2 = filterPanelOrder.indexOf(a2);
+
+      if (index1 === -1 && index2 === -1) {
+        return 1;
+      }
+
+      if (index1 === -1) {
+        return 1;
+      }
+
+      if (index2 === -1) {
+        return -1;
+      }
+
+      return index1 - index2;
+    });
+
+    filterPanelTable.put({
+      app: _appName,
+      tableName: _tableName,
+      userID: _userID,
+      order: attrNames,
+    });
+  });
+
+  const loadFilterPanelItemOrder = () => {
+    filterPanelTable
+      .where('[app+tableName+userID]')
+      .equals([unref(appName), unref(dataTable).name, _userID])
+      .toArray((res) => {
+        selectedColumnAttrNames.value = res[0]?.order ?? [];
+
+        // 因为设置值监听会有一个异步过程，所以等待一次tick
+        nextTick(() => {
+          unref(filterPanel).ready = true;
+          unref(filterPanel).changeOriginFilterParams();
+          unref(filterPanel).changeOriginSearchValue();
+        });
+      });
+  };
+
+  if (!unref(filterPanel).isInited) {
+    useEventDispatcher(filterPanel, 'initCompleted', loadFilterPanelItemOrder);
+  } else {
+    loadFilterPanelItemOrder();
+  }
+
+  onBeforeUnmount(() => {
+    selectedColumnChangeSubscription.unsubscribe();
+  });
+
+  const columns = computed(() => unref(filterPanel).getColumns());
+
+  const instance = getCurrentInstance();
+
+  // watch(
+  //   computed(() => unref(columns).map((column) => column.componentTitle)),
+  //   withCtx(() => {
+  //     for (const column of unref(columns)) {
+  //       const component = resolveComponent(
+  //         column.component || 'BwaMultipleMenuCondition'
+  //       );
+  //
+  //       if (!component) {
+  //         unref(column).componentTitle = '';
+  //         return;
+  //       }
+  //
+  //       unref(column).componentTitle = component.__conditionTitle__;
+  //     }
+  //   }, instance),
+  //   { immediate: true }
+  // );
+
+  return {
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+    searchParams,
+    selectedColumnAttrNames,
+    closableColumns,
+    handleFieldSearch,
+    searchValue,
+    isChange,
+    handleReset,
+      handleSearch
+  };
+};

package/src/plugins.js

@@ -0,0 +1,3 @@
+import { BwaContextmenu } from './contextmenu';
+
+export default [BwaContextmenu];

package/src/progress/index.js

@@ -0,0 +1,8 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Progress from './progress.vue';
+import ProgressItem from './progress-item.vue';
+
+export const BwaProgress = withInstall(Progress, { ProgressItem });
+export const BwaProgressItem = withInstall(ProgressItem);
+
+export default BwaProgress;