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

package/src/menu/menu-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <ElMenuItem v-if="!children.length" :index="id">
+    <i v-if="item.iconName" :class="['ptp-icon', `ptp-${item.iconName}`]"></i>
+    <span :class="ns.be('item', 'content')">{{ item.title }}</span>
+  </ElMenuItem>
+  <ElSubMenu v-else :index="id" :popper-class="ns.b('sub')">
+    <template #title>
+      <i v-if="item.iconName" :class="['ptp-icon', `ptp-${item.iconName}`]"></i>
+      <span :class="ns.be('item', 'content')">{{ item.title }}</span>
+    </template>
+    <BwaMenuItem v-for="child in children" :item="child" :key="child.id" />
+  </ElSubMenu>
+</template>
+
+<script setup>
+import { useNamespace } from 'web-base-client-vue';
+import { computed } from 'vue';
+
+defineOptions({
+  name: 'BwaMenuItem',
+});
+
+const ns = useNamespace('menu');
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const id = computed(() => {
+  if (typeof props.id !== 'number' && !props.item.id) {
+    return '';
+  }
+
+  return props.item.id + '';
+});
+
+const children = computed(() => props.item?.children || []);
+</script>

package/src/menu/menu.vue

@@ -0,0 +1,53 @@
+<template>
+  <ElMenu
+    :default-active="currentMenuID"
+    :class="[ns.b(), collapsed ? ns.m('collapsed') : '']"
+    :collapse="collapsed"
+    @select="handleSelect"
+  >
+    <MenuItem v-for="item in menus" :key="item.id" :item="item" />
+  </ElMenu>
+</template>
+
+<script setup>
+import { useNamespace } from 'web-base-client-vue';
+import MenuItem from './menu-item.vue';
+
+defineOptions({
+  name: 'BwaMenu',
+});
+
+const props = defineProps({
+  currentMenuID: String,
+  menus: {
+    type: Array,
+    default: () => [],
+  },
+  collapsed: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['select']);
+
+const ns = useNamespace('menu');
+
+const getMenuById = (id) => {
+  const menus = props.menus || [];
+
+  let list = [...menus];
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+
+    if (item.id === id) {
+      return item;
+    }
+
+    list = list.concat(item.children || []);
+  }
+
+  return null;
+};
+
+const handleSelect = (id) => {
+  emit('select', getMenuById(id));
+};
+</script>

package/src/panel/index.js

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

package/src/panel/panel.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="ns.b()">
+    <div :class="ns.e('header')" v-if="slots.header">
+      <slot name="header"></slot>
+    </div>
+
+    <div :class="ns.e('tools')" v-if="slots.tools">
+      <slot name="tools"></slot>
+    </div>
+
+    <div :class="ns.e('body')">
+      <slot></slot>
+    </div>
+
+    <div :class="ns.e('footer')" v-if="slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useSlots } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaPanel',
+});
+
+defineProps({
+  name: {
+    type: String,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const ns = useNamespace('panel');
+
+const slots = useSlots();
+</script>

package/src/panel-tabs/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import PanelTab from './panel-tabs';
+
+export const BwaPanelTab = withInstall(PanelTab);
+
+export default BwaPanelTab;

package/src/panel-tabs/panel-tabs.js

@@ -0,0 +1,92 @@
+import { ElTabPane, ElTabs } from 'element-plus';
+import {
+  defineComponent,
+  h,
+  ref,
+  useAttrs,
+  useSlots,
+  unref,
+  reactive,
+  watch,
+  computed,
+} from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+
+export default defineComponent({
+  name: 'BwaPanelTabs',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const ns = useNamespace('panel-tabs');
+
+    const modelValue = ref(props.modelValue || '');
+    const visibledNames = [];
+
+    watch(
+      modelValue,
+      (modelValue) => {
+        emit('update:modelValue', modelValue);
+        if (modelValue && !visibledNames.includes(modelValue)) {
+          visibledNames.push(modelValue);
+        }
+      },
+      { immediate: true }
+    );
+
+    watch(
+      computed(() => props.modelValue),
+      (value) => {
+        modelValue.value = value || '';
+      }
+    );
+
+    return () => {
+      let panels = slots.default?.() ?? [];
+
+      panels = panels.filter(
+        (panel) => panel.props?.label && panel.props?.name
+      );
+
+      if (!modelValue.value && panels.length) {
+        modelValue.value = panels[0].props.name;
+      }
+
+      return h(
+        ElTabs,
+        {
+          class: ns.b(),
+          type: 'card',
+          ...attrs,
+          modelValue: unref(modelValue),
+          'onUpdate:modelValue': (value) => {
+            modelValue.value = value;
+          },
+        },
+        {
+          default: () =>
+            panels.map((panel) => {
+              return h(
+                ElTabPane,
+                {
+                  class: ns.b('item'),
+                  label: panel.props.label,
+                  name: panel.props.name,
+                },
+                {
+                  default: () =>
+                    visibledNames.includes(panel.props.name) ? panel : null,
+                }
+              );
+            }),
+        }
+      );
+    };
+  },
+});

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

@@ -0,0 +1,10 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import PctFilterPanel from "./pct-filter-panel.vue"
+
+import PctFilterPanelItem from './pct-filter-panel-item.vue'
+
+export const BwaPctFilterPanel = withInstall(PctFilterPanel, {
+   PctFilterPanelItem,
+});
+
+export default PctFilterPanel;

package/src/pct-filter-panel/pct-compents/index.js

@@ -0,0 +1,10 @@
+
+import {withInstall} from "element-plus/es/utils/vue/install";
+import PctMultipleMenuCondition from './pct-multiple-menu-condition.vue'
+import PctInputCondition from './pct-Input-condition.vue'
+import PctDateRangeCondition from './pct-date-range-condition.vue'
+
+export const BwaPctInputCondition = withInstall(PctInputCondition, {});
+export const BwaPctMultipleMenuCondition = withInstall(PctMultipleMenuCondition, {});
+export const BwaPctDateRangeCondition = withInstall(PctDateRangeCondition, {});
+

package/src/pct-filter-panel/pct-compents/pct-Input-condition.vue

@@ -0,0 +1,63 @@
+<template>
+    <div :class="ns.e('inputCon')">
+        <span v-if="showTitle" :class="ns.e('title')">{{column.title}}</span>
+        <el-input
+            :prefix-icon="showIcon ? prefixIcon : ''"
+            size="small"
+            clearable
+            :class="ns.e('search')"
+            :placeholder="placeholderStr"
+            v-model="modelValue"
+        />
+    </div>
+</template>
+
+<script setup>
+import { useNamespace, filterPanelItemKey } from 'web-base-client-vue';
+import {computed, defineEmits, inject, useAttrs} from 'vue';
+import {dataProps} from "../../hooks/use-data";
+const ns = useNamespace('pct-input');
+const emit = defineEmits(['update:modelValue']);
+defineOptions({
+    name: 'BwaPctInputCondition',
+    __conditionTitle__: '输入框',
+    __conditionDefault__: () => [],
+});
+
+const props = defineProps({
+    ...dataProps,
+    modelValue: {
+        type: null,
+    },
+    placeholder: {
+        type: String,
+        default: '请输入',
+    },
+    prefixIcon: {
+        type: String,
+        default: 'Search',
+    },
+    showIcon: {
+        type: Boolean,
+        default: false,
+    }
+})
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title)
+
+const attrs = useAttrs();
+const showTitle = computed(() => attrs.showTitle)
+
+
+const modelValue = computed({
+    get: () =>  props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>
+
+<style scoped>
+
+</style>

package/src/pct-filter-panel/pct-compents/pct-date-range-condition.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :class="ns.e('cont')">
+    <div v-if="column && showTitle" :class="ns.e('label')">{{ column.title }}</div>
+    <el-date-picker
+      v-model="value"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :value-format="valueFormat"
+      size="small"
+    />
+  </div>
+</template>
+
+<script setup>
+import {computed, inject} from 'vue';
+import {useNamespace, filterPanelItemKey} from 'web-base-client-vue';
+const ns = useNamespace('pct-daterange');
+defineOptions({
+  name: 'BwaPctDateRangeCondition',
+  __conditionTitle__: '日期选择',
+  __conditionDefault__: () => ({ start: '', end: '' }),
+});
+
+const props = defineProps({
+    modelValue: {
+        type: null,
+    },
+    valueFormat: {
+        type: String,
+        default: 'YYYY-MM-DD',
+    },
+    showTitle: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const filterPanelItem = inject(filterPanelItemKey);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const value = computed({
+  get: () => {
+    if (props.modelValue && props.modelValue.start && props.modelValue.end) {
+      return [props.modelValue.start, props.modelValue.end];
+    }
+    return [];
+  },
+  set: (v) => {
+    if (v && v.length === 2) {
+      emit('update:modelValue', { start: v[0], end: v[1] });
+    } else {
+      emit('update:modelValue', { start: '', end: '' });
+    }
+  },
+});
+</script>

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

@@ -0,0 +1,177 @@
+<template>
+    <div :class="ns.e('conditbox')">
+        <div v-if="showTitle" :class="ns.e('title')">{{column.title}}</div>
+        <el-select
+            :multiple="multiple"
+            v-model="modelValue"
+            @visible-change="visibleChange"
+            :class="ns.e('options')"
+            :loading="loading"
+            :placeholder="placeholderStr"
+            :clearable="true"
+            :filterable="showSearch"
+            :remote="remote"
+            :remote-method="remoteMethod"
+            size="small"
+        >
+            <el-option
+                v-for="item in data"
+                :key="item[valuePropStr] + ''"
+                :value="item[valuePropStr] + ''"
+                :label="item[labelPropStr] + ''"
+            />
+        </el-select>
+    </div>
+</template>
+
+<script setup>
+import { useNamespace } from 'web-base-client-vue';
+import {computed, unref, defineEmits, inject, ref, useAttrs, watch} 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__: '多选列表',
+    __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: true,
+    },
+    showSearch: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+        default: '请选择',
+    },
+    remote: {
+        type: Boolean,
+        default: true,
+    },
+    size: {
+        type: String,
+        default: 'small',
+    },
+    searchPlaceholder: {
+        type: String,
+        default: '',
+    },
+    labelAttr: '',
+    valueAttr: '',
+    searchAttr: '',
+    itfInfo: null,
+    // 自定义选项时  是否通过展开自动触发自定义search
+    isRequiredByVisibleChange: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const ns = useNamespace('pctfilterpanel-item');
+const isShowPopper = ref(false)
+
+const attrs = useAttrs();
+const showTitle = computed(() => attrs.showTitle)
+
+const data = ref([])
+const loading = ref(false)
+const emit = defineEmits(['update:modelValue', 'search']);
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+const column = computed(() => filterPanelItem?.column ?? null);
+
+/**
+ * 页面参数层级覆盖配置文件传递的参数层级
+ */
+if (props.itfInfo) {
+    column.value.componentProps = {
+        itfInfo: props.itfInfo || {},
+        labelAttr: props.labelAttr || 'label',
+        valueAttr: props.valueAttr || 'value',
+        searchAttr: props.searchAttr || 'search'
+    }
+}
+
+const searchPlaceholderStr = computed(() => column.value?.componentProps?.searchPlaceholder || props.searchPlaceholder)
+const placeholderStr = computed(() => showTitle.value ? props.placeholder : column.value.title)
+
+const labelPropStr = computed(() => column.value?.componentProps?.labelAttr || props.labelProp)
+const valuePropStr = computed(() => column.value?.componentProps?.valueAttr || props.valueProp)
+
+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
+}
+
+data.value = props.options ?? []
+const visibleChange = (val) => {
+    isShowPopper.value = val
+    if (!val || !column.value.componentProps || column.value?.componentProps?.options) {
+        if (isShowPopper.value && props.isRequiredByVisibleChange) {
+            emit('search', '')
+        }
+        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 || Array.isArray(props.modelValue) ? '' : props.modelValue;
+        }
+    },
+    set: (v) => emit('update:modelValue', v),
+});
+
+defineExpose({
+    data
+})
+</script>