@ditari/bsui 1.1.40 → 1.1.41

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

@@ -1,58 +1,393 @@
 <script setup lang="ts">
-import { onActivated, onUnmounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { ref, onDeactivated, onBeforeUnmount } from "vue";
+import { useTable } from "./hooks";
 
-const columns = [
+const { data, loading, config, selectedRowKeys } = useTable();
+
+const formState = ref({
+  name: "",
+  to: "",
+  from: ""
+});
+
+onBeforeUnmount(() => {
+  console.log("onBeforeUnmount");
+});
+
+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: "请输入姓名"
+        }
+      }
+    }
+  },
   {
-    title: "商品编码"
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
   },
   {
-    title: "商品名称"
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
   },
   {
-    title: "第一计量单位"
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
   },
   {
-    title: "申报总价"
+    type: "a-col",
+    props: {
+      span: 6
+    },
+    body: {
+      type: "a-form-item",
+      props: {
+        label: "姓名",
+        name: "name"
+      },
+      body: {
+        type: "a-input",
+        props: {
+          name: "name",
+          placeholder: "请输入姓名"
+        }
+      }
+    }
   },
   {
-    title: "毛重"
+    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 route = useRoute();
-const loading = ref(false);
 
-const formState = ref({
-  originCountry: ""
-});
+const onQuery = () => {
+  console.log("22");
+};
 
-onUnmounted(() => {
-  console.log("onUnmounted");
-});
-onActivated(() => {
-  console.log("onActivated");
-});
+const queryParams = ref({ from: "", to: "" });
+
+setTimeout(() => {
+  queryParams.value.from = "2023-02-04";
+  queryParams.value.to = "2023-05-06";
+}, 3000);
 </script>
 <script lang="ts">
 export default {
-  name: "Add"
+  name: "TableList"
 };
 </script>
 <template>
-  <d-show-layout :loading="loading">
-    <template #footer>
-      <a-space>
-        <a-button type="primary" @click="loading = true">暂存</a-button>
-        {{ loading }}
-        <a-button type="primary">申报</a-button>
-      </a-space>
+  <d-list-layout>
+    <template #form>
+      <d-query-form :value="formState" :scheme="scheme" @query="onQuery">
+      </d-query-form>
+      {{ queryParams }}
+      <d-range-picker v-model:value="queryParams" :field="['from', 'to']" />
     </template>
-  </d-show-layout>
+    <template #table="{ height }">
+      <d-table
+        v-model:keys="selectedRowKeys"
+        row-key="id"
+        :loading="loading"
+        :expanded-row-keys="['1', '2']"
+        :data="data"
+        :config="config"
+        :height="height"
+        @change="
+          () => {
+            console.log('change');
+          }
+        "
+      >
+        <template #action>
+          <a-button>ok</a-button>
+        </template>
+      </d-table>
+    </template>
+  </d-list-layout>
 </template>
-<style scoped>
-.title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #2589ff;
+<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/List.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onDeactivated } from "vue";
+import { ref, onDeactivated, onBeforeUnmount } from "vue";
 import { useTable } from "./hooks";
 
 const { data, loading, config, selectedRowKeys } = useTable();
@@ -10,6 +10,10 @@ const formState = ref({
   from: ""
 });
 
+onBeforeUnmount(() => {
+  console.log("onBeforeUnmount");
+});
+
 onDeactivated(() => {
   console.log("222");
 });
@@ -266,7 +270,7 @@ const queryParams = ref({ from: "", to: "" });
 setTimeout(() => {
   queryParams.value.from = "2023-02-04";
   queryParams.value.to = "2023-05-06";
-}, 3000);
+}, 200);
 </script>
 <script lang="ts">
 export default {

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

@@ -20,7 +20,7 @@ export const useTable = () => {
     columns,
     // bordered: true,
     pagination,
-
+    selection: "M",
     clickSelectedClassName: "ant-table-row-selected",
     onPageChange,
     dbClick: (record: any) => {

package/package.json

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

package/src/date/RangePicker.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watchEffect } from "vue";
+import { defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
 import { RangePicker } from "ant-design-vue";
 
@@ -43,27 +43,27 @@ export default defineComponent({
       emit("update:value", internalModel.value);
     };
 
-    watchEffect(() => {
-      const value: any = props.value;
-      props.field.forEach((key, index) => {
-        if (value[key] === "") {
-          dates.value && (dates.value[index] = "");
-        } else {
-          dates.value && (dates.value[index] = value[key]);
-        }
-      });
+    //循环字段
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    const watchExpressions = props.field.map((key) => () => {
+      return props.value?.[key];
     });
 
-    watchEffect(() => {
-      const value: any = props.value;
-      props.field.forEach((key, index) => {
-        if (value[key] === "") {
-          dates.value && (dates.value[index] = "");
-        } else {
-          dates.value && (dates.value[index] = value[key]);
-        }
+    const watchHandler = (newValues: any) => {
+      // 判断是否被置空只有这两个字段同时为空，才是表明被置空
+      const isClear = props.field.every((key, index) => {
+        return newValues[index] === "" || newValues[index] === undefined;
       });
-    });
+      if (isClear) {
+        dates.value = [];
+      } else {
+        props.field.forEach((key, index) => {
+          dates.value && (dates.value[index] = newValues[index]);
+        });
+      }
+    };
+    //监听多个字段变化
+    watch(watchExpressions, watchHandler);
 
     return () => (
       <div>

package/src/dic/DicReplace.tsx

@@ -3,7 +3,7 @@
  * 根据字典名字及对应的value替换成中文或者人能看懂的文字
  * @author 余春林
  */
-import { defineComponent, ref, watchEffect } from "vue";
+import { defineComponent, ref, watch } from "vue";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 // import DicWorker from "./replace.worker?worker&inline";
@@ -45,12 +45,18 @@ export default defineComponent({
     //   // 赋值给下拉选择数据变量
     //   dicValueTxt.value = e.data;
     // };
-    watchEffect(() => {
-      const value = props.value;
-      const name = props.name;
-      dicValueTxt.value = getDicTextByValue(name, value);
-      // workerInstance.postMessage({ list: JSON.stringify(list), name, value });
-    });
+
+    watch(
+      () => props.value,
+      (val: any) => {
+        const value = val;
+        const name = props.name;
+        dicValueTxt.value = getDicTextByValue(name, value);
+      },
+      {
+        immediate: true
+      }
+    );
 
     return () => <>{dicValueTxt.value}</>;
   }

package/src/layout/List.vue

@@ -8,8 +8,7 @@ import {
   onUnmounted,
   WatchStopHandle,
   inject,
-  nextTick,
-  watchEffect
+  nextTick
 } from "vue";
 import { useElementSize, useResizeObserver } from "@vueuse/core";
 import { useSettingsStore } from "@ditari/store";
@@ -81,22 +80,24 @@ function useWatch() {
 
 // 监听表单高度变化
 // 然后再获取表格高度
+// 在表格高度动态变化的时候会被监听到
 const formRef = ref(null);
 const { height: formHeight } = useElementSize(formRef);
 watch(
   () => formHeight.value,
   () => {
-    calcHeight();
-  },
-  { immediate: true }
+    nextTick(() => {
+      calcHeight();
+    });
+  }
 );
 
-watchEffect(() => {
+const { stop } = useResizeObserver(document.body, () => {
   calcHeight();
 });
 
-useResizeObserver(document.body, () => {
-  calcHeight();
+onUnmounted(() => {
+  stop();
 });
 
 // 动态计算高度

package/src/menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, resolveComponent, watchEffect } from "vue";
+import { defineComponent, h, inject, resolveComponent, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 import { storeToRefs } from "pinia";
@@ -18,19 +18,36 @@ export default defineComponent({
     const settingsStore = useSettingsStore();
     const { getCollapsed } = storeToRefs(settingsStore) as any;
 
-    watchEffect(() => {
-      if (getCollapsed.value) {
-        // 如果菜单是收缩的状态，则不匹配激活的菜单
-        // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
-        return;
+    // watchEffect(() => {
+    //   if (getCollapsed.value) {
+    //     // 如果菜单是收缩的状态，则不匹配激活的菜单
+    //     // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
+    //     return;
+    //   }
+    //   // 会被触发两次
+    //   // 当前激活的url
+    //   const activatedUrl =
+    //     selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
+    //   const parentUrls = getParentUrls(list.value, activatedUrl);
+    //   openMenusKeys.value = parentUrls || [];
+    // });
+
+    watch(
+      () => selectedMenuKeys.value,
+      (newValue: any) => {
+        if (getCollapsed.value) {
+          // 如果菜单是收缩的状态，则不匹配激活的菜单
+          // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
+          return;
+        }
+        const activatedUrl = newValue.length > 0 ? newValue[0] : "";
+        const parentUrls = getParentUrls(list.value, activatedUrl);
+        openMenusKeys.value = parentUrls || [];
+      },
+      {
+        deep: true
       }
-      // 会被触发两次
-      // 当前激活的url
-      const activatedUrl =
-        selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
-      const parentUrls = getParentUrls(list.value, activatedUrl);
-      openMenusKeys.value = parentUrls || [];
-    });
+    );
 
     function getParentUrls(menus: any, url: any) {
       for (let i = 0; i < menus.length; i++) {

package/src/table/Table.tsx

@@ -2,6 +2,8 @@ import {
   computed,
   defineComponent,
   nextTick,
+  onBeforeUnmount,
+  onDeactivated,
   PropType,
   reactive,
   ref,
@@ -184,6 +186,8 @@ const DXTable = defineComponent({
       //     });
       //   }
       // });
+
+      let playTimeout: any = null;
       watch(
         () => props.height,
         (val) => {
@@ -193,7 +197,7 @@ const DXTable = defineComponent({
                 playHeight(props.height);
               } else {
                 // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
-                setTimeout(() => {
+                playTimeout = setTimeout(() => {
                   playHeight(props.height);
                   // 如果表格头有很多列的情况下，获取到的头部高度不对，需要延迟执行获取高度方法
                 }, 100);
@@ -202,6 +206,14 @@ const DXTable = defineComponent({
           }
         }
       );
+
+      onBeforeUnmount(() => {
+        playTimeout && clearTimeout(playTimeout);
+      });
+      onDeactivated(() => {
+        playTimeout && clearTimeout(playTimeout);
+      });
+
       // 监听分页组件
       const onPageChange = (page: number, size: number) => {
         onChange ? onChange({ page: page === 0 ? 1 : page, size }) : null;
@@ -311,6 +323,9 @@ const DXTable = defineComponent({
           } else {
             rowSelection.value = undefined;
           }
+        },
+        {
+          immediate: true
         }
       );