add dialog car payload

src/components/DialogCarPayload.vue

@@ -7,6 +7,28 @@
     :close-on-click-modal="configs.clickModalToClose ?? true"
   >
     <!-- main content  -->
+    <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-sizes="[1, 5, 10, 20, 50, 100]"
+      :page-size="size"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+
     <!-- footer  -->
     <div slot="footer">
       <!-- <template v-for="(operate, index) in configs.form.operations">
@@ -30,6 +52,13 @@ export default {
         forms: null,
       }),
     },
+    tableConfigs: {
+      type: Object,
+      default: () => ({
+        table: null,
+        column: null
+      }),
+    },
     dialogVisible: {
       type: Boolean,
       default: false,
@@ -43,11 +72,109 @@ export default {
   data() {
     return {
       loadingStatus: false,
+      page: 1,
+      size: 20,
+      totalPage: 0,
+      dataList: [],
+      tableLoading: false,
+      refreshLayoutKey: "",
     };
   },
   created() {},
   mounted() {},
   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];
+            });
+          }
+        });
+      }
+
+      // if (this.urls.pageIsPostApi) {
+      // } else {
+      // 默认是 get 方式请求 page
+      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) {
+              /** 破碎记录的特殊需求：数据要结合单位 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 {
+              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;
+        });
+    },
+
+    /** 导航器的操作 */
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getList();
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getList();
+    },
+
     handleBtnClick(payload) {
       console.log("btn click payload: ", payload);