pms-aomei/src/components/DialogCarPayload.vue

<template>
  <el-dialog
    class="dialog-car-payload"
    :visible="dialogVisible"
    @close="handleClose"
    :destroy-on-close="false"
    :close-on-click-modal="configs.clickModalToClose ?? false"
    :width="configs.dialogWidth ?? '50%'"
    :append-to-body="true">
    <!-- title  -->
    <div slot="title" class="dialog-title" style="display: flex; align-items: center">
      <span style="font-size: 18px">装载详情</span>
      <el-button
        v-if="configs.showAdd ?? false"
        size="small"
        type="primary"
        plain
        style="margin-left: 16px"
        @click="$emit('add-record', id)">
        添加记录
      </el-button>
    </div>

    <!-- main content  -->
    <BaseListTable
      v-loading="tableLoading"
      :table-config="configs.tableConfig.table"
      :column-config="configs.tableConfig.column"
      :table-data="dataList"
      :current-page="page"
      :current-size="size"
      :refresh-layout-key="refreshLayoutKey" />
    <!-- @operate-event="handleOperate" -->

    <el-pagination
      v-if="showPaination"
      class="mt-5 flex justify-end"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :current-page.sync="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="size"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </el-dialog>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";

export default {
  name: "DialogCarPayload",
  components: { BaseListTable },
  props: {
    configs: {
      type: Object,
      default: () => ({
        clickModalToClose: false,
        forms: null,
      }),
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    updateKey: {
      type: Number,
      default: 1,
    },
    // extraParams: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  inject: ["urls"],
  data() {
    return {
      // dialogVisible: false,
      loadingStatus: false,
      page: 1,
      size: 20,
      totalPage: 0,
      dataList: [],
      tableLoading: false,
      refreshLayoutKey: 0,
      id: null,
      showPaination: false,
    };
  },
  watch: {
    updateKey(val, oldVal) {
      if (val !== oldVal) {
        this.getList();
      }
    },
  },
  activated() {
    this.refreshLayoutKey = Math.random();
  },
  methods: {
    /** init **/
    init(id) {
      if (!id) {
        this.$message({
          message: `没有传 id!`,
          type: "error",
          duration: 1500,
        });
        console.log("[*] 传入car payload对话框的id是", id);
        return;
      }
      this.showPaination = false;
      this.id = id;
      this.getList();
    },

    /** 获取 列表数据 */
    getList(queryParams) {
      this.tableLoading = true;

      const params = queryParams
        ? { ...queryParams, page: this.page, limit: this.size }
        : {
            page: this.page,
            limit: this.size,
          };

      this.$http
        .get((this.urls.payload ? this.urls.payload : this.urls.base) + `/${this.id}`, {
          params,
        })
        .then(({ data: res }) => {
          console.log("[car payload dialog] [http response] res is: ", res);

          if (res.code === 0) {
            // page 场景:
            if ("list" in res.data) {
              this.dataList = res.data.list;
              this.totalPage = res.data.total;
              this.showPaination = true;
            }
            if (Array.isArray(res.data)) {
              this.dataList = res.data;
              this.totalPage = 0;
            } else {
              this.dataList.splice(0);
              this.totalPage = 0;
            }
          } else {
            this.$message({
              message: `${res.code}: ${res.msg}`,
              type: "error",
              duration: 2000,
            });
          }
          this.tableLoading = false;

          this.$nextTick(() => {
            this.refreshLayoutKey = Math.random();
          });
        })
        .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);

      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() {
      // clear list
      setTimeout(() => {
        this.dataList.splice(0);
        this.totalPage = 0;
      }, 300);
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style scoped>
.dialog-car-payload >>> .el-dialog__body {
  padding: 5px 20px 20px;
}
</style>