add dialog car payload

src/components/DialogCarPayload.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-dialog
+    class="dialog-car-payload"
+    :visible="dialogVisible"
+    @close="handleClose"
+    :destroy-on-close="false"
+    :close-on-click-modal="configs.clickModalToClose ?? true"
+  >
+    <!-- main content  -->
+    <!-- footer  -->
+    <div slot="footer">
+      <!-- <template v-for="(operate, index) in configs.form.operations">
+        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
+          operate.label
+        }}</el-button>
+      </template> -->
+      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
+    </div></el-dialog
+  >
+</template>
+
+<script>
+export default {
+  name: "DialogCarPayload",
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({
+        clickModalToClose: true,
+        forms: null,
+      }),
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    // extraParams: {
+    //   type: Object,
+    //   default: () => ({})
+    // }
+  },
+  inject: ["urls"],
+  data() {
+    return {
+      loadingStatus: false,
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleBtnClick(payload) {
+      console.log("btn click payload: ", payload);
+
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+          // case "reset":
+          //   this.resetForm(true, true); // true means exclude id, immediate execution
+          //   break;
+          // case "add":
+          // case "update":
+          //   this.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
+          //   break;
+        }
+      } else {
+        console.log("[x] 不是这么用的! 缺少name属性");
+      }
+    },
+
+    handleClose() {
+      this.$emit("update:dialogVisible", false);
+    },
+  },
+};
+</script>
+
+<style scoped></style>