@ditari/bsui 1.1.42 → 1.1.44

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

@@ -1,276 +1,282 @@
 <script setup lang="ts">
 import { ref, onDeactivated, onBeforeUnmount } from "vue";
 import { useTable } from "./hooks";
-
+import AddForm from "./components/AddForm.vue";
 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: "请输入姓名"
-        }
-      }
-    }
-  },
-  {
-    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");
+// 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: "请输入姓名"
+//         }
+//       }
+//     }
+//   },
+//   {
+//     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");
+// };
+//
+// const queryParams = ref({ from: "", to: "" });
+//
+// setTimeout(() => {
+//   queryParams.value.from = "2023-02-04";
+//   queryParams.value.to = "2023-05-06";
+// }, 3000);
+const addFormRef = ref();
+const showLayoutRef = ref();
+const onSubmit = async () => {
+  await addFormRef.value.validate();
+  showLayoutRef.value.closePage();
 };
-
-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 {
@@ -278,24 +284,12 @@ export default {
 };
 </script>
 <template>
-  <d-table
-    v-model:keys="selectedRowKeys"
-    row-key="id"
-    :loading="loading"
-    :expanded-row-keys="['1', '2']"
-    :data="data"
-    :config="config"
-    :height="400"
-    @change="
-      () => {
-        console.log('change');
-      }
-    "
-  >
-    <template #action>
-      <a-button>ok</a-button>
+  <d-show-layout ref="showLayoutRef">
+    <add-form ref="addFormRef" />
+    <template #footer>
+      <a-button @click="onSubmit">提交</a-button>
     </template>
-  </d-table>
+  </d-show-layout>
 </template>
 <style lang="scss">
 @mixin rowEdit {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onDeactivated, onBeforeUnmount } from "vue";
+import { ref, onDeactivated, onBeforeUnmount, onActivated } from "vue";
 import { useTable } from "./hooks";
 
 const { data, loading, config, selectedRowKeys } = useTable();
@@ -17,6 +17,9 @@ onBeforeUnmount(() => {
 onDeactivated(() => {
   console.log("222");
 });
+onActivated(() => {
+  console.log("onActivated");
+});
 
 const scheme = [
   {
@@ -271,6 +274,11 @@ setTimeout(() => {
   queryParams.value.from = "2023-02-04";
   queryParams.value.to = "2023-05-06";
 }, 200);
+
+const customHeaderCell = (columns: any) => {
+  console.log(columns);
+  return "ddd";
+};
 </script>
 <script lang="ts">
 export default {
@@ -278,13 +286,18 @@ export default {
 };
 </script>
 <template>
-  <d-list-layout>
+  <d-list-layout @refresh="onQuery">
     <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>
+    <template #tools>
+      <router-link :to="{ name: 'Add' }">
+        <a-button>添加</a-button>
+      </router-link>
+    </template>
     <template #table="{ height }">
       <d-table
         v-model:keys="selectedRowKeys"
@@ -294,6 +307,7 @@ export default {
         :data="data"
         :config="config"
         :height="height"
+        :custom-header-cell="customHeaderCell"
         @change="
           () => {
             console.log('change');

package/example/src/views/table/components/AddForm.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const formState = ref({
+  code: ""
+});
+const rules = {
+  code: [
+    {
+      required: true
+    }
+  ]
+};
+const formRef = ref();
+const validate = () => {
+  return new Promise<void>((resolve, reject) => {
+    formRef.value?.validate().then(() => {
+      resolve();
+    });
+  });
+};
+
+const onSearch = () => {};
+
+defineExpose({
+  validate
+});
+</script>
+
+<template>
+  <div>
+    <a-form ref="formRef" :model="formState" :rules="rules">
+      32432
+      <a-form-item label="商品编码" name="code">
+        <a-input v-model:value="formState.code" allow-clear>
+          <template #suffix>
+            <search-outlined type="user" @click="onSearch" />
+          </template>
+        </a-input>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<style scoped></style>