diff --git a/src/views/modules/pms/bomTechAndFiring/components/detail.vue b/src/views/modules/pms/bomTechAndFiring/components/detail.vue
new file mode 100644
index 0000000..0820cb4
--- /dev/null
+++ b/src/views/modules/pms/bomTechAndFiring/components/detail.vue
@@ -0,0 +1,25 @@
+<!-- 
+    filename: detail.vue
+    author: liubin
+    date: 2023-07-19 09:00:13
+    description: 
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "BomTechAndFiringDetail",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/modules/pms/bomTechAndFiring/components/edit.vue b/src/views/modules/pms/bomTechAndFiring/components/edit.vue
new file mode 100644
index 0000000..a23a85c
--- /dev/null
+++ b/src/views/modules/pms/bomTechAndFiring/components/edit.vue
@@ -0,0 +1,25 @@
+<!-- 
+    filename: edit.vue
+    author: liubin
+    date: 2023-07-19 09:00:04
+    description: 
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "BomTechAndFiringEdit",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/modules/pms/bomTechAndFiring/index.vue b/src/views/modules/pms/bomTechAndFiring/index.vue
index ec5b14d..d66a4b3 100644
--- a/src/views/modules/pms/bomTechAndFiring/index.vue
+++ b/src/views/modules/pms/bomTechAndFiring/index.vue
@@ -1,10 +1,33 @@
 <template>
-  <ListViewWithHead
+  <!-- <ListViewWithHead
     :table-config="tableConfig"
     :head-config="headFormConfigs"
     :dialog-configs="dialogConfigs"
-    :list-query-extra="['key', 'tech']" />
+    :list-query-extra="['key', 'tech']" /> -->
   <!-- :list-query-extra="['key', 'bom', { wsId: 3 }]" -->
+  <div class="list-view-with-head" ref="pointer-loading-ref">
+    <BaseSearchForm :head-config="headFormConfigs" @btn-click="handleBtnClick" />
+
+    <BaseListTable
+      v-loading="tableLoading"
+      :table-config="tableConfig.table"
+      :column-config="tableConfig.column"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :current-page="page"
+      :current-size="size"
+      :refresh-layout-key="refreshLayoutKey" />
+
+    <el-pagination
+      class="mt-5 flex justify-end"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="page"
+      :page-size.sync="size"
+      :page-sizes="[10, 20, 50, 100]"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+  </div>
 </template>
 
 <script>
@@ -26,12 +49,204 @@ export default {
       headFormConfigs,
       allUrls: urls,
       dialogConfigs,
+      dataList: [],
+      page: 1,
+      size: 20,
+      totalPage: 0,
+      tableLoading: false,
     };
   },
   created() {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    // 更新页面默认 size
+    const size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20;
+    this.size = size;
+
+    this.initDataWhenLoad && this.getList();
+  },
+  methods: {
+    /** 获取 列表数据 */
+    getList(queryParams) {
+      this.tableLoading = true;
+
+      const params = queryParams
+        ? { ...queryParams, page: this.page, limit: this.size }
+        : {
+            page: this.page,
+            limit: this.size,
+          };
+
+      if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
+        this.listQueryExtra.map((nameOrObj) => {
+          if (typeof nameOrObj === "string") params[nameOrObj] = "";
+          else if (typeof nameOrObj === "object") {
+            Object.keys(nameOrObj).forEach((key) => {
+              params[key] = nameOrObj[key];
+            });
+          }
+        });
+        this.cachedSearchCondition = Object.assign({}, params);
+      }
+
+      this.$http[this.urls.pageIsPostApi ? "post" : "get"](
+        this.urls.page,
+        this.urls.pageIsPostApi
+          ? {
+              ...params,
+            }
+          : {
+              params,
+            }
+      )
+        .then(({ data: res }) => {
+          console.log("[http response] res is: ", res);
+
+          if (res.code === 0) {
+            // page 场景:
+            if ("list" in res.data) {
+              // if (res.data.list.length == 0 && res.data.total != 0) {
+              //   // refresh list
+              //   if (this.page > 1) {
+              //     this.page -= 1
+              //     this.getList()
+              //     return
+              //   } else return
+              // }
+              /** 破碎记录的特殊需求：数据要结合单位 material + materialUnitDictValue */
+              if ("attachDictValue" in this.tableConfig.column) {
+                this.dataList = res.data.list.map((row) => {
+                  this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue");
+                  return row;
+                });
+              } else this.dataList = res.data.list;
+
+              this.totalPage = res.data.total;
+            } else if ("records" in res.data) {
+              this.dataList = res.data.records.map((item) => ({
+                ...item,
+                id: item._id ?? item.id,
+              }));
+              this.totalPage = res.data.total;
+            } else if (Array.isArray(res.data)) {
+              this.dataList = res.data;
+            } else {
+              this.dataList.splice(0);
+              this.totalPage = 0;
+            }
+          } else {
+            this.$message({
+              message: `${res.code}: ${res.msg}`,
+              type: "error",
+              duration: 2000,
+            });
+          }
+          this.tableLoading = false;
+        })
+        .catch((err) => {
+          this.$message({
+            message: `${err}`,
+            type: "error",
+            duration: 2000,
+          });
+          this.tableLoading = false;
+        });
+      // }
+    },
+
+    layoutTable() {
+      return Math.random();
+    },
+
+    handleBtnClick({ btnName, payload }) {
+      console.log("[search] form handleBtnClick", btnName, payload);
+      switch (btnName) {
+        case "新增":
+          this.openDialog();
+          break;
+        case "导入":
+          this.openUploadDialog();
+          break;
+        case "手动添加": {
+          this.openDialog();
+          return;
+        }
+      }
+    },
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+      switch (type) {
+        case "delete": {
+          // 找到删除的 prompt 字段
+          const deleteConfig = data.head?.options?.find((item) => item.name === "delete");
+          let promptName = data.name ?? data.id;
+          if (deleteConfig && "promptField" in deleteConfig) {
+            promptName = data[deleteConfig.promptField];
+          }
+
+          let hintMsg = `确定要删除记录 "${promptName}" 吗?`;
+          if (promptName == data.id) {
+            // 如果 promptName 计算出来是 data.id 就以'该记录'代称
+            hintMsg = "确定删除该记录?";
+          }
+
+          let currenPageListLength = this.dataList.length;
+          // 确认是否删除
+          return this.$confirm(hintMsg, "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          })
+            .then(() => {
+              this.$http({
+                url: this.urls.base,
+                method: "DELETE",
+                data: [`${data.id}`],
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+                  if (currenPageListLength == 1) this.page = this.page > 1 ? this.page - 1 : 1;
+
+                  this.getList();
+                } else {
+                  this.$message({
+                    message: `${res.code}: ${res.msg}`,
+                    type: "error",
+                    duration: 1500,
+                  });
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          console.log("[edit] ", data);
+          this.openDialog(data); /** data is ==> id */
+          break;
+        }
+      }
+    },
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getList(this.cachedSearchCondition);
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getList(this.cachedSearchCondition);
+    },
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.list-view-with-head {
+  background: white;
+  /* height: 100%; */
+  min-height: inherit;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
+}
+</style>