@ditari/bsui 1.1.47 → 5.0.1

package/src/form/DQueryForm.tsx

@@ -1,258 +0,0 @@
-import { defineComponent, onMounted, ref, watch, watchEffect } from "vue";
-import { Form, FormItem, Row, Col, Button, Space } from "ant-design-vue";
-import {
-  SearchOutlined,
-  ReloadOutlined,
-  DoubleRightOutlined
-} from "@ant-design/icons-vue";
-import DJsonSchemeRender from "../json-scheme-render/JsonSchemeRender";
-
-/**
- * 查询表单渲染
- * 展开，隐藏功能
- */
-export default defineComponent({
-  name: "DQueryForm",
-  props: {
-    scheme: {
-      type: [Array, Object] as unknown as () => any[] | Record<string, any>,
-      default: () => []
-    },
-    model: {
-      type: Object as () => Record<string, unknown>,
-      default: () => ({})
-    },
-    labelWidth: {
-      type: String,
-      default: "90px"
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["reset", "query"],
-  setup(props, { slots, emit }) {
-    // 表单
-    const { loading, modelValue, formRef, onQuery, onReset, onKeyup } =
-      useForm();
-    // 展开
-    const { rowRef, actionSpan, onExpend, expendBtnVisible, isExpend } =
-      useExpand();
-    //渲染操作列
-    const { renderAction } = useRender();
-
-    function useForm() {
-      const loading = ref(false);
-      const formRef = ref<any>(null);
-      const modelValue = ref<any>({});
-
-      watchEffect(() => {
-        modelValue.value = props.model;
-      });
-
-      watch(
-        () => props.loading,
-        (val) => {
-          loading.value = val;
-        }
-      );
-
-      /// 监听回车事件
-      // watch(enterKey, (v) => {
-      //   if (v) {
-      //     // 有路由名字会被keepalive进行缓存
-      //     // 用于判断当前页面是否被激活 因为页面被缓存的时候，页面切换后，回车事件依然会触发
-      //     const isActive = keepStore.list.some((name) => name === route.name);
-      //     console.log(route.name);
-      //     if (!loading.value && isActive) {
-      //       emit("query", modelValue.value);
-      //     }
-      //     //TODO 逻辑有问题
-      //     if (!route.name) {
-      //       // 没有路由名字，不会被缓存
-      //       if (!loading.value) {
-      //         emit("query", modelValue.value);
-      //       }
-      //     } else {
-      //
-      //     }
-      //   }
-      // });
-
-      const onQuery = () => {
-        emit("query", modelValue.value);
-      };
-
-      const onReset = () => {
-        formRef.value?.resetFields();
-        emit("reset");
-      };
-
-      const onKeyup = (event: any) => {
-        if (event.keyCode === 13) {
-          if (!loading.value) {
-            emit("query", modelValue.value);
-          }
-        }
-      };
-      return {
-        loading,
-        modelValue,
-        formRef,
-        onQuery,
-        onReset,
-        onKeyup
-      };
-    }
-
-    function useRender() {
-      /**
-       * 操作按钮渲染
-       */
-      function renderAction() {
-        return (
-          <Space>
-            <Button
-              loading={loading.value}
-              type={"primary"}
-              shape={"round"}
-              onClick={onQuery}
-            >
-              {{
-                default: () => "查询",
-                icon: () => <SearchOutlined />
-              }}
-            </Button>
-            <Button disabled={loading.value} shape={"round"} onClick={onReset}>
-              {{
-                default: () => "重置",
-                icon: () => <ReloadOutlined />
-              }}
-            </Button>
-            {expendBtnVisible.value ? (
-              <Button onClick={onExpend} shape={"round"}>
-                {{
-                  default: () => (isExpend.value ? "收起" : "展开"),
-                  icon: () => (
-                    <DoubleRightOutlined rotate={isExpend.value ? -90 : 90} />
-                  )
-                }}
-              </Button>
-            ) : null}
-          </Space>
-        );
-      }
-
-      return {
-        renderAction
-      };
-    }
-
-    function useExpand() {
-      // 为24网格布局
-      const gridCount = 24;
-      // 每列占6个格子
-      const colSpan = 6;
-      // 每行显示4列
-      const colsPerRow = 4;
-      // 操作按钮span
-      const actionSpan = ref(6);
-      // 控制展开或隐藏按钮文本
-      const isExpend = ref(false);
-      // 控制展开按按钮是否显示
-      const expendBtnVisible = ref(false);
-      // 行对象
-      const rowRef = ref<any>(null);
-
-      onMounted(() => {
-        handleShowOrHidden();
-      });
-
-      function onExpend() {
-        isExpend.value = !isExpend.value;
-        handleShowOrHidden();
-      }
-
-      /**
-       *  处理隐藏或显示
-       */
-      function handleShowOrHidden() {
-        const colEl = Array.from(rowRef.value?.$el?.children);
-        // col总条数 减掉操作栏按钮的div个数为1
-        const colElLen = colEl.length - 1;
-        // 已占用的网格数 = col总条数 * 每列占用的网格数
-        const occupiedCols = colElLen * colSpan;
-        // 总行数 =  总div数 / 每行显示的列数
-        const fullRows = Math.ceil(colElLen / colsPerRow);
-        // 最后一行的网格数 = 已占用的网格数 % 24
-        const lastRowCols = occupiedCols % gridCount;
-        // 最后一行剩余的网格数
-        const remainingCols = gridCount - lastRowCols;
-
-        // 网格行大于2才显示展开或隐藏按钮
-        if (fullRows > 2) {
-          expendBtnVisible.value = true;
-        } else {
-          // 如果没有大于两行，操作栏占用剩余的宽度
-          actionSpan.value = remainingCols;
-        }
-        // 最后一行的起始索引
-        const lastRowStartIndex = colsPerRow * (fullRows - 1) - 1;
-        // 只有展开按钮显示时才处理
-        if (expendBtnVisible.value) {
-          colEl.forEach((col: any, index) => {
-            if (index >= lastRowStartIndex) {
-              // 最后一个元素不隐藏 是操作按钮的div
-              index !== colElLen
-                ? (col.style.display = !isExpend.value ? "none" : "block")
-                : null; // 隐藏元素
-            }
-          });
-        }
-
-        if (expendBtnVisible.value) {
-          // 如果是展开状态 则操作按钮占用剩余的网格数 否则占用6个网格
-          isExpend.value
-            ? (actionSpan.value = remainingCols)
-            : (actionSpan.value = colSpan);
-        }
-      }
-
-      return {
-        rowRef,
-        actionSpan,
-        onExpend,
-        expendBtnVisible,
-        isExpend
-      };
-    }
-
-    return () => (
-      <div onKeyup={onKeyup}>
-        <Form
-          ref={formRef}
-          colon={false}
-          labelCol={{ style: { width: props.labelWidth } }}
-          model={modelValue.value}
-        >
-          <Row ref={rowRef}>
-            {slots.default ? (
-              slots.default()
-            ) : (
-              <DJsonSchemeRender
-                layout={props.scheme}
-                value={modelValue.value}
-              />
-            )}
-            <Col span={actionSpan.value} style={{ textAlign: "right" }}>
-              <FormItem>
-                {slots.action ? slots.action() : renderAction()}
-              </FormItem>
-            </Col>
-          </Row>
-        </Form>
-      </div>
-    );
-  }
-});

package/src/form/index.ts

@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import QueryForm from "./DQueryForm";
-
-QueryForm.install = function (app: App) {
-  app.component(QueryForm.name, QueryForm);
-  return app;
-};
-
-export default QueryForm;

package/src/grid/Grid.tsx

@@ -1,83 +0,0 @@
-import { ref, defineComponent } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-
-import { useSettingsStore } from "@ditari/store";
-import { prefixName } from "../theme";
-
-import GridItem from "./GridItem";
-
-//class名称
-const baseClassName = `${prefixName}-grid`;
-
-export default defineComponent({
-  name: "DGrid",
-  props: {
-    // css class
-    className: {
-      type: String,
-      default: ""
-    },
-    // 是否补全空白单元格
-    fill: {
-      type: Boolean,
-      default: true
-    },
-    grid: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(props, { slots }: any) {
-    if (!slots.default) {
-      return () => <>ok</>;
-    }
-    // 从store获取网格配置信息
-    const store = useSettingsStore();
-    // 转换成响应式对象 不使用storeToRefs的对象被解构后失去”响应式“
-    const { gridValue } = storeToRefs(store);
-
-    // 获取单元格个数
-    const length =
-      slots?.default()[0]?.children.length || slots?.default().length;
-
-    // 要填充空白的网格数
-    const fillGridItems = ref<number[]>([]);
-
-    gridValue.value.value = props.grid || gridValue.value.value;
-
-    // 网格列
-    const baseStyle = ref<any>({
-      "grid-template-columns": gridValue.value?.value ?? ""
-    });
-
-    //监听屏幕尺寸变化，一般只有人工拉大屏幕尺寸才会触发（默认执行一次）
-    useResizeObserver(document.body, () => {
-      //TODO 检测浏览器是否被缩放
-      // TODO 使用store 会存在所有的配置均有一个对象bug
-      if (props.grid === "") {
-        store.gridMatching();
-      }
-      baseStyle.value["grid-template-columns"] = gridValue.value?.value ?? "";
-      // 获取当前设备匹配到显示的列数配置
-      const colCount = gridValue.value?.col;
-      // 根据总单元格和显示的列数 计算出总行数
-      const rowCount = Math.ceil(length / colCount);
-      // 总行数乘以显示的列数减去传入的子标签个数 等于要填充的空白单元格数
-      const number = props.fill ? rowCount * colCount - length : 0;
-      // 生成一个要填充空白单元格的数组 用于循环空白的单元格
-      fillGridItems.value = Array.from({ length: number }, (_, i) => i + 1);
-    });
-
-    return () => (
-      <>
-        <div class={[baseClassName, props.className]} style={baseStyle.value}>
-          {slots.default && slots.default(fillGridItems.value)}
-          {fillGridItems.value.map((number) => (
-            <GridItem key={number}></GridItem>
-          ))}
-        </div>
-      </>
-    );
-  }
-});

package/src/grid/GridItem.tsx

@@ -1,15 +0,0 @@
-import { defineComponent } from "vue";
-import { prefixName } from "../theme";
-
-//class名称
-const className = `${prefixName}-grid--item`;
-export default defineComponent({
-  name: "DGridItem",
-  setup(props, { slots }) {
-    return () => (
-      <>
-        <div class={className}>{slots.default && slots.default()}</div>
-      </>
-    );
-  }
-});

package/src/grid/index.md

@@ -1,4 +0,0 @@
-# Gird
-
-
-# GridItem

package/src/grid/index.ts

@@ -1,16 +0,0 @@
-import type { App, Plugin } from "vue";
-import Grid from "./Grid";
-import GridItem from "./GridItem";
-
-Grid.install = function (app: App) {
-  app.component(Grid.name, Grid);
-  app.component(GridItem.name, GridItem);
-  return app;
-};
-
-export { GridItem };
-
-export default Grid as typeof Grid &
-  Plugin & {
-    readonly Grid: typeof GridItem;
-  };

package/src/grid/style/index.scss

@@ -1,70 +0,0 @@
-@import "../../theme/variable.scss";
-
-/*输入框获取焦点时候的影响边框*/
-@mixin input-focus {
-  &:focus {
-    box-shadow: 0 0 0 $grid-input-border-width $grid-input-focus-border-color;
-  }
-}
-.#{$prefix-name}-grid {
-  position: relative;
-  display: grid;
-
-  .#{$prefix-name}-grid--item {
-    border: $gird-border-width solid $grid-border-color;
-    margin-left: -$gird-border-width;
-    margin-top: -$gird-border-width;
-  }
-}
-
-// 网格表单样式
-.#{$prefix-name}-grid-form {
-  .ant-form-item {
-    margin-bottom: 0;
-    height: 100%;
-    .ant-form-item-label {
-      border-right: $gird-border-width solid $grid-border-color;
-    }
-    .ant-input,
-    .ant-select-selector,
-    .ant-input-number {
-      border: 0;
-      border-radius: 0;
-      @include input-focus;
-      // 数字输入框要单独处理
-      .ant-input-number-input {
-        border: 0;
-        border-radius: 0;
-        @include input-focus;
-      }
-    }
-    .ant-input[disabled] {
-      color: #525252;
-    }
-  }
-  .ant-form-item-has-error {
-    .ant-input {
-      &::placeholder {
-        //color: red;
-      }
-    }
-    .ant-form-item-explain {
-      display: $gird-error-display;
-    }
-  }
-  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
-      .ant-select-customize-input
-    )
-    .ant-select-selector {
-    box-shadow: 0 0 0 $grid-input-border-width $grid-input-focus-border-color;
-  }
-  .ant-form-item-has-error
-    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
-    box-shadow: 0 0 0px $grid-input-border-width red;
-    border-radius: 0;
-  }
-  .ant-form-item-has-error
-    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
-    box-shadow: 0 0 0px $grid-input-border-width $grid-input-error-border-color;
-  }
-}

package/src/json-scheme-render/JsonSchemeRender.tsx

@@ -1,101 +0,0 @@
-import {
-  defineComponent,
-  h,
-  resolveComponent,
-  Component,
-  computed,
-  ref
-} from "vue";
-
-// 表单元素 tag
-const FORM_TAG = ["a-input", "a-radio", "checkbox", "radio", "textarea"];
-
-export default defineComponent({
-  name: "DJsonSchemeRender",
-  props: {
-    layout: {
-      type: [Array, Object] as unknown as () => any[] | Record<string, any>,
-      default: () => []
-    },
-    value: {
-      type: Object as () => Record<string, unknown>,
-      default: () => ({})
-    }
-  },
-  setup(props, {}) {
-    const modelValue = ref<Record<string, unknown>>(props.value);
-    const { renderLayout } = useRender();
-    // 通过computed计算出渲染的内容
-    const render = computed(() => {
-      const layout = props.layout;
-      return renderLayout(layout);
-    });
-
-    /**
-     * 渲染组件
-     */
-    function useRender() {
-      /**
-       * 渲染布局
-       */
-      const renderLayout = (
-        layout: any[] | Record<string, any> | undefined
-      ) => {
-        return _renderComponent(layout);
-      };
-
-      /**
-       * 渲染组件
-       * @param layout
-       */
-      function _renderComponent(layout: any): any {
-        if (Array.isArray(layout)) {
-          return layout.map(_renderComponent);
-        } else {
-          const { type, props, body } = layout;
-          // 子组件
-          let children: any = null;
-          if (Array.isArray(body)) {
-            // 为数组时，遍历渲染
-            children = body.map(_renderComponent);
-          } else {
-            // 为对象时，渲染
-            children = body && _renderComponent(body);
-          }
-          let componentProps = { ...props };
-          if (FORM_TAG.includes(type)) {
-            componentProps = {
-              ...componentProps,
-              ...{
-                //disabled: props?.disabled || false,
-                value: modelValue.value[props.name],
-                "onUpdate:value": (v: any) => {
-                  modelValue.value[props.name] = v;
-                }
-              }
-            };
-          }
-          if (type === "a-form") {
-            componentProps = {
-              ...componentProps,
-              ...{
-                // model: model.value
-              }
-            };
-          }
-          const component =
-            typeof type === "string" ? resolveComponent(type as string) : type;
-
-          return h(component as Component, componentProps, {
-            default: () => children
-          });
-        }
-      }
-      return {
-        renderLayout
-      };
-    }
-
-    return () => <>{render.value}</>;
-  }
-});

package/src/json-scheme-render/index.ts

@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import JsonSchemeRender from "./JsonSchemeRender";
-
-JsonSchemeRender.install = (app: App) => {
-  app.component(JsonSchemeRender.name, JsonSchemeRender);
-  return app;
-};
-
-export default JsonSchemeRender;

package/src/layout/Breadcrumb.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-/**
- * 面包屑
- * @author 余老
- */
-import { computed } from "vue";
-import { useBreadcrumbStore } from "@ditari/store";
-import { prefixName } from "../theme";
-
-const store = useBreadcrumbStore();
-const breadCrumbs = computed(() => store.getBreadcrumb);
-//class名称
-const baseClassName = `${prefixName}-breadcrumb`;
-</script>
-<template>
-  <div :class="baseClassName">
-    <div class="breadcrumb">
-      <transition-group name="breadcrumb">
-        <div
-          v-for="(item, index) in breadCrumbs"
-          :key="item.path"
-          class="breadcrumb-item"
-        >
-          <router-link
-            v-if="index + 1 !== breadCrumbs.length"
-            class="breadcrumb-link"
-            :to="{ path: item.path }"
-          >
-            {{ item.title }}
-          </router-link>
-          <span v-else class="breadcrumb-link">
-            {{ item.title }}
-          </span>
-        </div>
-      </transition-group>
-    </div>
-  </div>
-</template>
-<style lang="scss"></style>