@ditari/bsui 1.1.16 → 1.1.18

package/example/src/views/form/QueryFormDemo.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const queryParams = ref({
+  name: "",
+  age: ""
+});
+const loading = ref(false);
+const onQuery = () => {
+  console.log("query");
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
+};
+
+const onReset = () => {
+  console.log("reset");
+};
+</script>
+<script lang="ts">
+/**
+ * 表单查询条件组件demo
+ */
+export default {
+  name: "QueryFormDemo"
+};
+</script>
+<template>
+  <d-query-form
+    :loading="loading"
+    :model="queryParams"
+    label-width="90px"
+    @query="onQuery"
+    @reset="onReset"
+  >
+    <a-col :span="6">
+      <a-form-item label="年龄" name="age">
+        <a-input v-model:value="queryParams.age" />
+      </a-form-item>
+    </a-col>
+    <a-col v-for="item in 8" :key="item" :span="6">
+      <a-form-item label="标题" name="name">
+        <a-input v-model:value="queryParams.name" />
+      </a-form-item>
+    </a-col>
+  </d-query-form>
+</template>
+<style scoped></style>

package/example/src/views/table/List.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+import { useTable } from "./hooks";
+
+const { data, loading, config, selectedRowKeys } = useTable();
+</script>
+<script lang="ts">
+export default {
+  name: "List"
+};
+</script>
+<template>
+  <d-list-layout>
+    <template #form>
+<!--      <d-query-form :value="formState" :scheme="scheme"> </d-query-form>-->
+    </template>
+    <template #table="{ height }">
+      <d-table
+        v-model:keys="selectedRowKeys"
+        row-key="id"
+        :loading="loading"
+        :expanded-row-keys="['1', '2']"
+        :data="[]"
+        :config="config"
+        :height="height"
+      >
+        <template #action>
+          <a-button>ok</a-button>
+        </template>
+      </d-table>
+    </template>
+  </d-list-layout>
+</template>
+<style scoped></style>

package/example/src/views/table/hooks.ts

@@ -0,0 +1,106 @@
+import { useRequestList } from "../../../../../hooks/src/http/index";
+import { reactive, ref } from "vue";
+import { testService } from "../../api/list";
+
+export const useTableConfig = () => {
+  const columns = [
+    {
+      title: "Id",
+      dataIndex: "id",
+      width: 350
+    },
+    {
+      title: "Name",
+      dataIndex: "name",
+      width: 350
+    },
+    {
+      title: "avatar",
+      dataIndex: "avatar",
+      width: 350,
+      config: {
+        type: "dic",
+        name: "k_v",
+        style: {
+          D: "red",
+          S: "blue"
+        }
+      }
+    },
+    {
+      title: "Job",
+      dataIndex: "job",
+      width: 350,
+      config: {
+        type: "date",
+        formatter: "YYYY"
+      }
+    },
+    {
+      title: "操作",
+      width: 100,
+      fixed: "right",
+      slot: "action"
+    }
+  ];
+
+  return {
+    columns
+  };
+};
+
+export const useTable = () => {
+  const queryParams = ref({});
+  const selectedRowKeys = ref<any>([]);
+  const { columns } = useTableConfig();
+
+  const { data, loading, onPageChange, pagination, run, onQuery } =
+    useRequestList(testService, {
+      params: queryParams,
+      dataKey: "data.data"
+    });
+
+  const id = ref("");
+
+  //表格选项
+  const config = reactive({
+    columns,
+    bordered: true,
+    pagination,
+    selection: "N",
+    pageOption: {
+      sizeOptions: ["20", "40", "50", "100"],
+
+    },
+    onPageChange,
+    dbClick: (record: any) => {
+      const index = selectedRowKeys.value.indexOf(record.id);
+      if (index > -1) {
+        selectedRowKeys.value.splice(index, 1);
+      }
+      id.value = id.value === record.id ? "" : record.id;
+    },
+    rowClassName: (record: any) => {
+      if (record.id === id.value) {
+        return "row-class";
+      }
+    },
+    getCheckboxProps: (record: any) => {
+      return {
+        disabled: record.id === "1",
+        name: "id",
+        value: id.value
+      };
+    }
+  });
+
+  return {
+    selectedRowKeys,
+    data,
+    loading,
+    queryParams,
+    config: reactive(config),
+    run,
+    onQuery
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "",
   "keywords": [],
   "author": "",

package/src/form/DQueryForm.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent,  onMounted, 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);
+
+      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 () => (
       <>
         <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
+    }
   };
 };
 
@@ -179,7 +179,7 @@ const DXTable = defineComponent({
       });
       // 监听分页组件
       const onPageChange = (page: number, size: number) => {
-        onChange ? onChange({ page, size }) : null;
+        onChange ? onChange({ page: page === 0 ? 1 : page, size }) : null;
         // 切换分页的时候，表体滚动到顶部
         antTableBodyRef.value.scrollTop = 0;
         // 如果当前为单选或未开启分页保留数据选中的数据都会被清除
@@ -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>