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

package/src/filter-panel/conditions/department-condition/department-condition.vue

@@ -0,0 +1,92 @@
+<template>
+  <SingleMenuCondition
+    :multiple="true"
+    :showSearch="false"
+    :loading="loading"
+    @visible-change="handleVisibleChange"
+  >
+    <template #value="{ selected }">
+      {{ formatValue(selected) }}
+    </template>
+
+    <DepartmentNode v-for="item of data" :item="item"></DepartmentNode>
+  </SingleMenuCondition>
+</template>
+
+<script setup>
+import SingleMenuCondition from '../single-menu-condition.vue';
+import DepartmentNode from './department-node.vue';
+import { ref, unref } from 'vue';
+import { useService } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaDepartmentCondition',
+});
+
+const props = defineProps({});
+
+const departmentService = useService('DepartmentService');
+
+const data = ref([]);
+
+const loading = ref(false);
+
+const map = new Map();
+
+const formatValue = (selected) => {
+  selected = Array.isArray(selected) ? selected : selected ? [selected] : [];
+
+  selected = selected.map((item) => map.get(item.value + '')).filter(Boolean);
+
+  if (!selected.length) {
+    return '全部';
+  }
+
+  return selected.map((item) => item.desc).join(',');
+};
+
+const handleVisibleChange = async (isShow) => {
+  if (!isShow || !unref(departmentService)) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    const departmentsResult = await unref(departmentService).getDepartments();
+
+    if (departmentsResult.code != 0) {
+      return;
+    }
+
+    const departments = [];
+    for (let department of departmentsResult.data || []) {
+      department.children = [];
+
+      if (!department.pid) {
+        departments.push(department);
+      }
+
+      map.set(department.id + '', department);
+    }
+
+    for (const department of departmentsResult.data || []) {
+      if (!department.pid) {
+        continue;
+      }
+
+      const parent = map.get(department.pid + '');
+
+      if (!parent) {
+        continue;
+      }
+
+      parent.children.push(department);
+    }
+
+    data.value = departments;
+  } finally {
+    loading.value = false;
+  }
+};
+</script>

package/src/filter-panel/conditions/department-condition/department-node.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :class="ns.b()">
+    <div :class="ns.e('content')">
+      <div
+        :class="ns.e('arrow-wrapper')"
+        @click="isShowChildren = !isShowChildren"
+      >
+        <ElIcon
+          :class="[ns.e('arrow'), ns.is('collpase', !isShowChildren)]"
+          v-if="item.children.length"
+        >
+          <CaretBottom />
+        </ElIcon>
+      </div>
+      <BwaAdvanceOption :value="item.id" :label="item.name"></BwaAdvanceOption>
+    </div>
+
+    <ElCollapseTransition>
+      <div
+        v-if="isShowChildren"
+        :class="ns.e('children')"
+        :style="{ paddingLeft: 22 + level * 5 + 'px' }"
+      >
+        <BwaDepartmentNode v-for="child of item.children" :item="child" />
+      </div>
+    </ElCollapseTransition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaDepartmentNode',
+});
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  level: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const ns = useNamespace('department-node');
+
+const isShowChildren = ref(false);
+</script>

package/src/filter-panel/conditions/index.js

@@ -0,0 +1,22 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+
+import Condition from './condition';
+import DateRangeCondition from './date-range-condition.vue';
+import SingleMenuCondition from './single-menu-condition.vue';
+import MultipleMenuCondition from './multiple-menu-condition.vue';
+import MultiUserCondition from './multi-user-condition.vue';
+import SingleUserCondition from './single-user-condition.vue';
+import InputCondition from './input-condition.vue';
+import DepartmentCondition from './department-condition/department-condition.vue';
+
+export const BwaCondition = withInstall(Condition, {
+  DateRangeCondition,
+  SingleMenuCondition,
+  MultipleMenuCondition,
+  InputCondition,
+  MultiUserCondition,
+  DepartmentCondition,
+  SingleUserCondition
+});
+
+export default BwaCondition;

package/src/filter-panel/conditions/input-condition.vue

@@ -0,0 +1,63 @@
+<template>
+  <ElTooltip
+    v-model:visible="visible"
+    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"
+  >
+    <div :class="[ns.b(), ns.is('active', visible)]">
+      <slot name="label">
+        <span v-if="column" :class="ns.e('label')">{{ column.title }}</span>
+      </slot>
+    </div>
+    <template #content>
+      <div :class="ns.e('content')">
+        <ElInput :class="ns.e('input')" v-model="value" clearable />
+      </div>
+    </template>
+  </ElTooltip>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+import { useNamespace, filterPanelItemKey } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaInputCondition',
+  __conditionTitle__: '输入框',
+  __conditionDefault__: '',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const ns = useNamespace('input-condition');
+
+if (typeof props.modelValue !== 'string') {
+  emit('update:modelValue', '');
+}
+
+const value = computed({
+  get: () => props.modelValue || '',
+  set: emit.bind(null, 'update:modelValue'),
+});
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const visible = ref(false);
+</script>

package/src/filter-panel/conditions/multi-user-condition.vue

@@ -0,0 +1,56 @@
+<template>
+  <BwaAdvanceSelect v-bind="attrs" :multiple="true" @search="loadUserList">
+    <BwaAdvanceOption
+      v-for="item of userList"
+      :key="item.value"
+      :value="item.value"
+      :label="item.label"
+    />
+
+    <template #operation>
+      <slot name="operation"></slot>
+    </template>
+    <template #empy>
+      <slot name="empy"></slot>
+    </template>
+    <template #label="{ selectedValue, column }">
+      <slot name="label" :selectedValue="selectedValue" :column="column"></slot>
+    </template>
+    <template #value>
+      <slot name="value"></slot>
+    </template>
+  </BwaAdvanceSelect>
+</template>
+
+<script setup>
+import { onMounted, ref, unref, useAttrs } from 'vue';
+import { useService } from 'web-base-client-vue';
+import { BwaAdvanceSelect, BwaAdvanceOption } from '../../advance-select';
+
+defineOptions({
+  name: 'BwaMultiUserCondition',
+  __conditionTitle__: '多选用户',
+  __conditionDefault__: () => [],
+});
+
+const attrs = useAttrs();
+const userService = useService('UserService');
+
+const userList = ref([]);
+
+const loadUserList = async (name = '') => {
+  if (!unref(userService)) {
+    return;
+  }
+
+  const userListResult = await unref(userService).getUserList({ name });
+
+  if (userListResult.code != 0) {
+    return;
+  }
+
+  userList.value = userListResult.data || [];
+};
+
+onMounted(loadUserList);
+</script>

package/src/filter-panel/conditions/multiple-menu-condition.vue

@@ -0,0 +1,45 @@
+<template>
+  <BwaAdvanceSelect v-bind="attrs" :multiple="true">
+    <slot></slot>
+    <template #operation>
+      <slot name="operation"></slot>
+    </template>
+    <template #empy>
+      <slot name="empy"></slot>
+    </template>
+    <template #label="{ selectedValue, column }">
+      <slot name="label" :selectedValue="selectedValue" :column="column"></slot>
+    </template>
+    <template #value>
+      <slot name="value"></slot>
+    </template>
+  </BwaAdvanceSelect>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue';
+import { BwaAdvanceSelect } from '../../advance-select';
+
+defineOptions({
+  name: 'BwaMultipleMenuCondition',
+  __conditionTitle__: '多选列表',
+  __conditionDefault__: () => [],
+});
+
+const attrs = useAttrs();
+
+// const props = defineProps({
+//   modelValue: {
+//     type: null,
+//   },
+// });
+
+// const emit = defineEmits(['update:modelValue']);
+
+// const value = computed({
+//   get: () => props.modelValue,
+//   set: (v) => {
+//     emit('update:modelValue', v);
+//   },
+// });
+</script>

package/src/filter-panel/conditions/single-menu-condition.vue

@@ -0,0 +1,58 @@
+<template>
+  <BwaAdvanceSelect v-bind="attrs" v-model="value" :multiple="false">
+    <slot></slot>
+    <template #operation>
+      <!-- <BwaAdvanceOperation class="is-border">
+        <ElButton
+          :class="ns.e('clear')"
+          style="width: 100%"
+          @click="handleClear"
+        >
+          清除已选择项
+        </ElButton>
+      </BwaAdvanceOperation> -->
+      <slot name="operation"></slot>
+    </template>
+    <template #empy>
+      <slot name="empy"></slot>
+    </template>
+    <template #label="{ selectedValue, column }">
+      <slot name="label" :selectedValue="selectedValue" :column="column"></slot>
+    </template>
+    <template #value="{selected}">
+      <slot name="value" :selected="selected"></slot>
+    </template>
+  </BwaAdvanceSelect>
+</template>
+
+<script setup>
+import { useNamespace } from 'web-base-client-vue';
+import { computed, useAttrs } from 'vue';
+import { BwaAdvanceOperation, BwaAdvanceSelect } from '../../advance-select';
+import { ElButton } from 'element-plus';
+
+defineOptions({
+  name: 'BwaSingleMenuCondition',
+  __conditionTitle__: '单选列表',
+  __conditionDefault__: '',
+});
+
+const props = defineProps({
+  modelValue: null,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+});
+
+const ns = useNamespace('single-menu');
+
+const attrs = useAttrs();
+
+const handleClear = () => {
+  value.value = '';
+};
+</script>

package/src/filter-panel/conditions/single-user-condition.vue

@@ -0,0 +1,56 @@
+<template>
+  <BwaAdvanceSelect v-bind="attrs" :multiple="false" @search="loadUserList">
+    <BwaAdvanceOption
+      v-for="item of userList"
+      :key="item.value"
+      :value="item.value"
+      :label="item.label"
+    />
+
+    <template #operation>
+      <slot name="operation"></slot>
+    </template>
+    <template #empy>
+      <slot name="empy"></slot>
+    </template>
+    <template #label="{ selectedValue, column }">
+      <slot name="label" :selectedValue="selectedValue" :column="column"></slot>
+    </template>
+    <template #value>
+      <slot name="value"></slot>
+    </template>
+  </BwaAdvanceSelect>
+</template>
+
+<script setup>
+import { onMounted, ref, unref, useAttrs } from 'vue';
+import { useService } from 'web-base-client-vue';
+import { BwaAdvanceSelect, BwaAdvanceOption } from '../../advance-select';
+
+defineOptions({
+  name: 'BwaSingleUserCondition',
+  __conditionTitle__: '单选用户',
+  __conditionDefault__: () => [],
+});
+
+const attrs = useAttrs();
+const userService = useService('UserService');
+
+const userList = ref([]);
+
+const loadUserList = async (name = '') => {
+  if (!unref(userService)) {
+    return;
+  }
+
+  const userListResult = await unref(userService).getUserList({ name });
+
+  if (userListResult.code != 0) {
+    return;
+  }
+
+  userList.value = userListResult.data || [];
+};
+
+onMounted(loadUserList);
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div :class="ns.b('item')">
+    <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: 'BwaFilterPanelItem',
+});
+
+const props = defineProps({
+  prop: {
+    type: String,
+  },
+  close: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const ns = useNamespace('filterpanel');
+
+const { value, column, allowClose, closeHandle } = useFilterPanelItem(props);
+
+const data = reactive({ value });
+
+provide(
+  filterPanelItemKey,
+  reactive({
+    column,
+  })
+);
+</script>

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

@@ -0,0 +1,149 @@
+<template>
+  <div :class="ns.b()">
+    <slot>
+      <slot
+        v-for="column in currentFilterColumns"
+        :key="column.attrName"
+        :name="`condition-${column.attrName}`"
+        :attrName="column.attrName"
+      >
+        <FilterPanelItem :prop="column.fullAttrName">
+          <template #default="{ data }">
+            <BwaCondition
+              v-model="data.value"
+              :column="column"
+              :record="searchParams"
+            />
+          </template>
+        </FilterPanelItem>
+      </slot>
+    </slot>
+    <FilterPanelItem v-if="showFieldOptions">
+      <BwaAdvanceSelect
+        v-model="selectedColumnAttrNames"
+        :show-selectIcon="true"
+        @search="handleFieldSearch"
+        :class="ns.e('options')"
+      >
+        <template #reference-content>
+          <!-- <ElIcon><Plus /></ElIcon> -->
+          <div :class="ns.be('filter', 'plus')"></div>
+
+          <span :class="ns.be('filter', 'label')"> 筛选 </span>
+        </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>
+    </FilterPanelItem>
+
+    <ElInput
+      v-if="showSearch"
+      prefix-icon="Search"
+      size="small"
+      clearable
+      v-model="searchValue"
+      :placeholder="searchPlaceholder"
+      :class="ns.e('search')"
+    />
+
+    <ElButton
+      v-if="isChange"
+      size="small"
+      :class="ns.e('reset')"
+      @click="handleReset"
+    >
+      重置
+    </ElButton>
+  </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 FilterPanelItem from './filter-panel-item.vue';
+
+defineOptions({
+  name: 'BwaFilterPanel',
+});
+
+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: () => [],
+  },
+});
+
+const emit = defineEmits(['reset', 'filter']);
+
+const ns = useNamespace('filterpanel');
+
+const {
+  dataTable,
+  filterPanel,
+  currentFilterColumns,
+  selectedColumnAttrNames,
+  closableColumns,
+  searchParams,
+  handleFieldSearch,
+  searchValue,
+  isChange,
+  handleReset,
+} = useFilterPanel(props, { emit });
+
+watch(
+  filterPanel,
+  (filterPanel, _, onCleanup) => {
+    filterPanel.existComponent = true;
+
+    onCleanup(() => {
+      filterPanel.existComponent = false;
+    });
+  },
+  { immediate: true }
+);
+
+provide(
+  filterPanelKey,
+  reactive({
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+  })
+);
+</script>

package/src/filter-panel/index.js

@@ -0,0 +1,17 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import FilterPanel from "./filter-panel.vue"
+import FilterPanelItem from './filter-panel-item.vue'
+// import FilterPanel from './filter-panel.vue';
+// import FilterPanelItem from './filter-panel-item.vue';
+import { BwaCondition } from './conditions';
+
+export const BwaFilterPanel = withInstall(FilterPanel, {
+  FilterPanelItem,
+});
+export const BwaFilterpanelItem = withInstall(FilterPanelItem, {
+  BwaCondition,
+});
+
+export { BwaCondition };
+
+export default FilterPanel;