@ditari/bsui 1.1.16 → 1.1.17

package/src/form/DQueryForm.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent, nextTick, ref, watch, watchEffect } from "vue";
 import { Form, FormItem, Row, Col, Button, Space } from "ant-design-vue";
 import {
   SearchOutlined,
@@ -10,6 +10,7 @@ import DJsonSchemeRender from "../json-scheme-render/JsonSchemeRender";
 
 /**
  * 查询表单渲染
+ * 展开，隐藏功能
  */
 export default defineComponent({
   name: "DQueryForm",
@@ -18,7 +19,7 @@ export default defineComponent({
       type: [Array, Object] as unknown as () => any[] | Record<string, any>,
       default: () => []
     },
-    value: {
+    model: {
       type: Object as () => Record<string, unknown>,
       default: () => ({})
     },
@@ -33,131 +34,168 @@ export default defineComponent({
   },
   emits: ["reset", "query"],
   setup(props, { slots, emit }) {
-    const modelValue = ref(props.value);
-    const loading = ref(props.loading);
-
-    // 为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);
-    nextTick(() => {
-      handleShowOrHidden();
-    });
-
-    /**
-     * 操作按钮渲染
-     */
-    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>
-      );
-    }
+    // 表单
+    const { loading, modelValue, formRef, onQuery, onReset } = useForm();
+    // 展开
+    const { rowRef, actionSpan, onExpend, expendBtnVisible, isExpend } =
+      useExpand();
+    //渲染操作列
+    const { renderAction } = useRender();
 
-    function onExpend() {
-      isExpend.value = !isExpend.value;
-      handleShowOrHidden();
-    }
+    function useForm() {
+      const loading = ref(false);
+      const formRef = ref<any>(null);
+      const modelValue = ref<any>({});
 
-    /**
-     *  处理隐藏或显示
-     */
-    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;
-      }
-      // 最后一行的起始索引
-      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; // 隐藏元素
-          }
-        });
-      }
+      watchEffect(() => {
+        modelValue.value = props.model;
+      });
 
-      if (expendBtnVisible.value) {
-        // 如果是展开状态 则操作按钮占用剩余的网格数 否则占用6个网格
-        isExpend.value
-          ? (actionSpan.value = remainingCols)
-          : (actionSpan.value = colSpan);
-      }
-    }
+      watch(
+        () => props.loading,
+        (val) => {
+          loading.value = val;
+        }
+      );
 
-    // 表单
-    const { formRef, onQuery, onReset } = useForm();
-    function useForm() {
-      const formRef = ref<any>(null);
       const onQuery = () => {
-        emit("query");
+        emit("query", modelValue.value);
       };
 
       const onReset = () => {
-        formRef.value.resetFields();
+        formRef.value?.resetFields();
         emit("reset");
       };
       return {
+        loading,
+        modelValue,
         formRef,
         onQuery,
         onReset
       };
     }
 
+    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);
+
+      nextTick(() => {
+        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 () => (
       <>
         <Form

package/src/table/Table.tsx

@@ -47,10 +47,10 @@ const tableProps = () => {
       type: Object as PropType<TableProps["expandedRowKeys"]>,
       default: () => []
     },
-    defaultExpandAllRows: Boolean as PropType<
-      TableProps["defaultExpandAllRows"]
-    >,
-    default: () => true
+    defaultExpandAllRows: {
+      type: Boolean as PropType<TableProps["defaultExpandAllRows"]>,
+      default: () => true
+    }
   };
 };
 
@@ -386,6 +386,15 @@ const DXTable = defineComponent({
       return <>{slots.summary && slots.summary()}</>;
     };
 
+    /**
+     * 展开行事件
+     * @param expanded
+     * @param record
+     */
+    const onExpand = (expanded: any, record: any) => {
+      props.config.onExpand && props.config.onExpand({ expanded, record });
+    };
+
     return () => (
       <div ref={tableRootRef} style={{ height: "100%" }}>
         <Table
@@ -408,6 +417,7 @@ const DXTable = defineComponent({
           customRow={customRow}
           rowSelection={rowSelection.value}
           rowClassName={onRowClassName}
+          onExpand={onExpand}
         >
           {{
             bodyCell: ({ column, record, index }: any) => {

package/example/src/Test.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const name = ref("");
-</script>
-<script lang="ts">
-export default {
-  name: "Test"
-};
-</script>
-<template>
-  <a-input v-model:value="name" />
-</template>
-<style scoped></style>