@ditari/bsui 1.1.39 → 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 {
@@ -300,26 +304,7 @@ export default {
           <a-button>ok</a-button>
         </template>
       </d-table>
-      <!--      <d-table-->
-      <!--        v-model:keys="selectedRowKeys"-->
-      <!--        row-key="id"-->
-      <!--        :loading="loading"-->
-      <!--        :expanded-row-keys="['1', '2']"-->
-      <!--        :data="data"-->
-      <!--        :config="config"-->
-      <!--        :height="200"-->
-      <!--        @change="-->
-      <!--          () => {-->
-      <!--            console.log('change');-->
-      <!--          }-->
-      <!--        "-->
-      <!--      >-->
-      <!--        <template #action>-->
-      <!--          <a-button>ok</a-button>-->
-      <!--        </template>-->
-      <!--      </d-table>-->
     </template>
-    <!--    <TestModal v-model:visible="visible" />-->
   </d-list-layout>
 </template>
 <style lang="scss">

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.39",
+  "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/FuckMain.vue

@@ -2,7 +2,7 @@
 /**
  * FUCK MAIN 入口文件
  */
-import { computed, getCurrentInstance, nextTick, ref } from "vue";
+import { computed, provide } from "vue";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
 import { useKeepAliveStore, useSettingsStore } from "@ditari/store";
 
@@ -11,6 +11,20 @@ import DNavTabs from "./NavTabs.vue";
 // 菜单组件
 import Menu from "../menu/Menu";
 
+const props = withDefaults(
+  defineProps<{
+    showConfig?: any;
+    breadcrumbStatus?: boolean;
+  }>(),
+  {
+    showConfig: { backBtn: "LeftOutlined" } as any
+  }
+);
+
+// 注入show组件的配置文件
+// eslint-disable-next-line vue/no-setup-props-destructure
+provide("showConfig", props.showConfig);
+
 // 缓存store
 const store = useKeepAliveStore();
 // 缓存的names
@@ -19,13 +33,6 @@ const keepAliveNames = computed(() => store.get);
 const settingsStore = useSettingsStore();
 const { switchCollapsed } = settingsStore;
 const collapsedStatus = computed(() => settingsStore.getCollapsed);
-
-const keepAliveRef = ref();
-
-nextTick(() => {
-  const instance: any = getCurrentInstance();
-  console.log(instance);
-});
 </script>
 <template>
   <a-layout class="ditari-layout">
@@ -68,12 +75,13 @@ nextTick(() => {
         class="ditari-layout-content"
         :style="{ marginLeft: collapsedStatus ? '80px' : '200px' }"
       >
-        <router-view />
-        <!--          <transition name="main" mode="out-in" appear>-->
-        <!--            <keep-alive ref="keepAliveRef" :include="keepAliveNames">-->
-        <!--              <component :is="Component" :key="$route.path" />-->
-        <!--            </keep-alive>-->
-        <!--          </transition>-->
+        <router-view v-slot="{ Component }">
+          <transition name="main" mode="out-in" appear>
+            <keep-alive ref="keepAliveRef" :include="keepAliveNames">
+              <component :is="Component" :key="$route.path" />
+            </keep-alive>
+          </transition>
+        </router-view>
         <slot name="micro"></slot>
       </a-layout-content>
     </a-layout>

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();
 });
 
 // 动态计算高度