@ditari/bsui 1.1.25 → 1.1.26

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

@@ -1,18 +1,276 @@
 <script setup lang="ts">
-
+import { ref, onDeactivated } from "vue";
 import { useTable } from "./hooks";
 
 const { data, loading, config, selectedRowKeys } = useTable();
+
+const formState = ref({
+  name: "",
+  to: "",
+  from: ""
+});
+
+onDeactivated(() => {
+  console.log("222");
+});
+
+const scheme = [
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
+  },
+  {
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "申报日期",
+        name: "date"
+      },
+      body: {
+        type: "d-range-picker",
+        props: {
+          value: formState,
+          field: ["to", "from"]
+        }
+      }
+    }
+  }
+];
+
+const onQuery = () => {
+  console.log("22");
+};
 </script>
 <script lang="ts">
 export default {
-  name: "List"
+  name: "TableList"
 };
 </script>
 <template>
   <d-list-layout>
     <template #form>
-<!--      <d-query-form :value="formState" :scheme="scheme"> </d-query-form>-->
+      <d-query-form :value="formState" :scheme="scheme" @query="onQuery">
+      </d-query-form>
     </template>
     <template #table="{ height }">
       <d-table
@@ -24,14 +282,95 @@ export default {
         :config="config"
         :height="height"
       >
-        <template #expandedRowRender="{ record }">
-          {{record}}
-        </template>
         <template #action>
           <a-button>ok</a-button>
         </template>
       </d-table>
     </template>
+    <!--    <TestModal v-model:visible="visible" />-->
   </d-list-layout>
 </template>
-<style scoped></style>
+<style lang="scss">
+@mixin rowEdit {
+  //content: "";
+  //display: block;
+  //position: absolute;
+  //top: 0;
+  //left: 0;
+  //z-index: 1993;
+  //transition: all 0.3s ease-in-out; /* 或者使用动画实现 */
+  content: "";
+  position: absolute;
+  //top: 0;
+  //left: 0;
+  //right: 0;
+  //bottom: 0;
+  z-index: 1993;
+
+  // border: 1px solid red;
+  //transform: scaleY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.row-edit-class {
+  position: relative;
+
+  &:after {
+    @include rowEdit;
+    //box-shadow: 0 0 0 2px red;
+  }
+
+  //&::before {
+  //  border-top: 1px solid #ccc;
+  //  border-bottom: 1px solid #ccc;
+  //  transform: scaleY(0);
+  //}
+  //
+  //&::after {
+  //  border-left: 1px solid #ccc;
+  //  border-right: 1px solid #ccc;
+  //}
+}
+
+//tr:hover::before,
+//tr:hover::after {
+//  transform: scaleY(1) scaleX(1);
+//}
+
+.row-class {
+  position: relative;
+  z-index: 1993;
+  //box-shadow: 2px 1px 8px 2px #162157;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  transform: translate(0px, 1px);
+  transition: box-shadow 0.3s, transform 0.3s, font-weight 0.9s;
+  td {
+    font-weight: bold;
+
+    &:first-child {
+      &::before {
+        position: absolute;
+        left: 0px;
+        top: -2px;
+        bottom: -2px;
+        content: "";
+        width: 4px;
+        background: #017ffe;
+        transition: width 0.3s, background 0.3s;
+      }
+    }
+  }
+}
+//
+//tr {
+//  &:hover {
+//    position: relative;
+//    z-index: 1993;
+//    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+//    transform: translateZ(10px);
+//    transition: box-shadow 0.3s, transform 0.3s;
+//  }
+//}
+tr {
+  cursor: pointer;
+}
+</style>

package/example/src/views/table/Test.tsx

@@ -0,0 +1,42 @@
+import { defineComponent, ref } from "vue";
+import { Table } from "ant-design-vue";
+import type { ExpandedRowRender } from "ant-design-vue/es/vc-table/interface";
+
+export default defineComponent({
+  setup(props,{ slots }) {
+    const renderExpandedRow: ExpandedRowRender<any> = (
+      record: any,
+      index: number,
+      indent: number,
+      expanded: boolean
+    ) => {
+      // 这里可以根据 record 等参数动态生成展开行的内容
+      return (
+        <a-card>
+          <p>这是一行展开的内容</p>
+        </a-card>
+      );
+    };
+
+    const mySlots:any = {};
+    if (slots.expandedRowRender) {
+      mySlots.expandedRowRender = () => {};
+    }
+    return {
+      mySlots,
+      renderExpandedRow
+    };
+  },
+  render() {
+    return (
+      <Table
+        columns={[{ title: "序号", dataIndex: "index" }]}
+        dataSource={[{ index: 1 }, { index: "2" }]}
+      >
+        {{
+          ...this.mySlots
+        }}
+      </Table>
+    );
+  }
+});

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useRequestList } from "../../../src/hooks";
+import { userList } from "../../api/list";
+
+const visible = ref(true);
+const selectedKeys = ref([]);
+const queryParams = ref({
+  page: 1,
+  size: 30
+});
+
+const columns = [
+  {
+    title: "边民姓名",
+    dataIndex: "civilName",
+    align: "center"
+  },
+  {
+    title: "边民身份证号",
+    dataIndex: "idcardNo",
+    align: "center",
+    render: (h: any, params: any) => {
+      if (!params.row.idcardNo) {
+        return "";
+      }
+      return h(
+        "span",
+        params.row.idcardNo.replace(
+          /^(\d{6})\d{6}(.{6}$)/g,
+          `$1${Array(9).join("*")}$2`
+        )
+      );
+    }
+  }
+];
+
+const { data, pagination, loading, run, onPageChange, onQuery } =
+  useRequestList(userList, {
+    params: queryParams,
+    dataKey: "data.data"
+  });
+
+//表格选项
+const config = reactive({
+  columns,
+  selection: "S",
+  bordered: true,
+  pagination,
+  onPageChange,
+  dbClick: (record: unknown) => {}
+});
+</script>
+<template>
+  <d-modal v-model:visible="visible" title="2222">
+    <d-table
+      v-model:keys="selectedKeys"
+      row-key="idcardNo"
+      :data="[{}, {}, {}, {}, {}, {}, {}, {}]"
+      :height="650"
+      :config="config"
+    ></d-table>
+  </d-modal>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps({
+  background: {
+    type: String,
+    default: "red"
+  },
+  text: {
+    type: String,
+    default: "red"
+  }
+});
+</script>
+<script lang="ts">
+export default {
+  name: "WorkStatusRound"
+};
+</script>
+<template>
+  <div>
+    <div class="status" :style="{ background: background }"></div>
+    {{ text }}
+  </div>
+</template>
+<style scoped>
+.status {
+  width: 10px;
+  height: 10px;
+  borderradius: 50%;
+  margin-right: 5px;
+}
+</style>

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

@@ -1,4 +1,4 @@
-import { useRequestList } from "../../../../../hooks/src/http/index";
+import { useRequestList } from "../../../../../hooks";
 import { reactive, ref } from "vue";
 import { testService } from "../../api/list";
 
@@ -50,17 +50,14 @@ export const useTableConfig = () => {
 };
 
 export const useTable = () => {
-  const queryParams = ref({});
+  const queryParams = ref({ limit: 20, page: 1 });
   const selectedRowKeys = ref<any>([]);
   const { columns } = useTableConfig();
 
   const { data, loading, onPageChange, pagination, run, onQuery } =
     useRequestList(testService, {
       params: queryParams,
-      dataKey: "data.data",
-      onBefore: () => {
-        return false;
-      }
+      dataKey: "data.data"
     });
 
   const id = ref("");
@@ -71,9 +68,6 @@ export const useTable = () => {
     bordered: true,
     pagination,
     selection: "N",
-    pageOption: {
-      sizeOptions: ["20", "40", "50", "100"]
-    },
     onPageChange,
     dbClick: (record: any) => {
       const index = selectedRowKeys.value.indexOf(record.id);

package/example/src/views/task/Todo.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+/**
+ * 待办项
+ */
+</script>
+<template></template>

package/package.json

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

package/src/form/DQueryForm.tsx

@@ -7,7 +7,8 @@ import {
   ReloadOutlined,
   DoubleRightOutlined
 } from "@ant-design/icons-vue";
-
+import { useKeepAliveStore } from "@ditari/store";
+import { useRoute } from "vue-router";
 import DJsonSchemeRender from "../json-scheme-render/JsonSchemeRender";
 
 /**
@@ -36,6 +37,9 @@ export default defineComponent({
   },
   emits: ["reset", "query"],
   setup(props, { slots, emit }) {
+    const keepStore = useKeepAliveStore();
+    const route = useRoute();
+
     // 表单
     const { loading, modelValue, formRef, onQuery, onReset } = useForm();
     // 展开
@@ -66,9 +70,21 @@ export default defineComponent({
       /// 监听回车事件
       watch(enterKey, (v) => {
         if (v) {
-          if (!loading.value) {
+          // 有路由名字会被keepalive进行缓存
+          // 用于判断当前页面是否被激活 因为页面被缓存的时候，页面切换后，回车事件依然会触发
+          const isActive = keepStore.list.some((name) => name === route.name);
+          if (!loading.value && isActive) {
             emit("query", modelValue.value);
           }
+          // TODO 逻辑有问题
+          // if (!route.name) {
+          //   // 没有路由名字，不会被缓存
+          //   if (!loading.value) {
+          //     emit("query", modelValue.value);
+          //   }
+          // } else {
+          //
+          // }
         }
       });
 
@@ -126,6 +142,7 @@ export default defineComponent({
           </Space>
         );
       }
+
       return {
         renderAction
       };