pms-aomei/src/views/modules/pms/order/components/BatchDialog.vue

<template>
  <el-dialog
    class="batch-dialog"
    title="查看批次"
    width="85%"
    :visible="visible"
    @close="handleClose"
    @closed="$emit('destroy')"
    :append-to-body="true"
    :close-on-click-modal="false">
    <el-row>
      <el-col style="text-align: right">
        <el-button type="text" @click="handleOperate({ type: 'create' })" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>
    <!-- list  -->
    <BaseListTable
      :key="Math.random()"
      v-loading="tableLoading"
      :column-config="tableConfigs"
      :table-data="dataList"
      :current-page="page"
      :current-size="limit"
      @operate-event="handleOperate"
      :refresh-layout-key="refreshLayoutKey" />

    <el-pagination
      style="margin-top: 12px; text-align: right"
      :current-page.sync="page"
      :current-size="limit"
      :page-sizes="[5, 10, 20]"
      :page-size.sync="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <BatchDialogEdit
      v-if="editDialogVisible"
      ref="batchDialogEdit"
      :blender-order-id="blenderOrderId"
      @refreshDataList="getBatchList"
      @destroy="editDialogVisible = false" />
    <!-- footer  -->
    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";
import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import { timeFilter } from "@/utils/filters";
import BatchDialogEdit from "./BatchDialog--edit.vue";
// import { pick as __pick } from "@/utils/filters";

export default {
  name: "DialogList",
  components: { BaseListTable, BatchDialogEdit },
  props: {
    configs: {
      type: Object,
      default: () => ({
        clickModalToClose: false,
        forms: null,
      }),
    },
  },
  data() {
    return {
      visible: false,
      editDialogVisible: false,
      blenderOrderId: null, // 用来获取批次列表
      loading: false,
      limit: 20,
      page: 1,
      total: 0,
      refreshLayoutKey: Math.random(),
      tableLoading: false,
      dataList: [],
      tableConfigs: [
        { type: "index", label: "序号" },
        { prop: "batchNo", label: "批次编码" },
        { prop: "batchSize", label: "批次重量 [kg]" },
        { prop: "status", label: "状态" },
        { prop: "startTime", label: "开始时间" },
        { prop: "task", label: "任务分类" },
        { prop: "blenderCode", label: "混料机" },
        {
          prop: "description",
          label: "详情",
          subcomponent: TableTextComponent,
          actionName: "view-blender-batch-details",
        },
        { width: 160, prop: "createTime", label: "添加时间", filter: timeFilter },
        {
          prop: "operations",
          name: "操作",
          fixed: "right",
          width: 90,
          subcomponent: TableOperaionComponent,
          options: [
            // 只有 injectRow.task 为手动时，才允许编辑
            // { name:"edit", label: "编辑", icon: "edit-outline", enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } },
            // { name: 'delete', icon: 'delete', enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } },
            // 只有 injectRow.status 为 waiting 时，才允许编辑
            {
              name: "edit",
              label: "编辑",
              icon: "edit-outline",
              enable: (injectRow) => {
                return "status" in injectRow && injectRow.status === "Waiting";
              },
            },
            {
              name: "delete",
              icon: "delete",
              emitFull: true,
              promptField: "batchNo",
              enable: (injectRow) => {
                return "status" in injectRow && injectRow.status === "Waiting";
              },
            },
          ],
        },
      ],
    };
  },
  watch: {
    page() {
      this.getBatchList();
    },
    limit() {
      this.getBatchList();
    },
  },
  methods: {
    init(id) {
      this.visible = true;
      console.log("[BatchDialog] init", id);
      this.blenderOrderId = id;
      this.getBatchList();
    },

    /** 获取批次列表 */
    async getBatchList() {
      this.tableLoading = true;
      try {
        const {
          data: { code, data, msg },
        } = await this.$http.get("/pms/blenderBatch/pageView", {
          params: {
            page: this.page,
            limit: this.limit,
            blenderOrderId: this.blenderOrderId,
          },
        });
        console.log("[BatchDialog] getBatchList", data);
        if (code == 0) {
          this.dataList = data.list;
          this.total = data.total;
        } else {
          throw new Error(msg);
        }
        // this.dataList = data;
        this.tableLoading = false;
      } catch (err) {
        this.$message.error("message" in err ? err.message : err);
      }
    },

    handleClose() {
      this.visible = false;
    },

    handleOperate({ type, data }) {
      console.log("[BatchDialog] handleOperate", type, data);
      switch (type) {
        case "create":
          this.editDialogVisible = true;
          this.$nextTick(() => {
            this.$refs.batchDialogEdit.init();
          });
          break;
        case "查看详情":
          break;
        case "edit":
          this.editDialogVisible = true;
          this.$nextTick(() => {
            this.$refs.batchDialogEdit.init(data);
          });
          break;
        case "delete":
          // 确认是否删除
          return this.$confirm("确定删除该批次?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "我再想想",
            type: "warning",
          })
            .then(() => {
              this.$http({
                url: "/pms/blenderBatch",
                method: "DELETE",
                data: [`${data.id}`],
              }).then(({ data: res }) => {
                if (res.code === 0) {
                  this.$message.success("删除成功!");
                  this.getBatchList();
                } else {
                  throw new Error(res.msg);
                }
              });
            })
            .catch((err) => {
              if (err == "cancel") return;
              this.$message[typeof err == "object" ? "error" : "info"](
                typeof err == "object" && "message" in err ? err.message : err
              );
            });
          break;
      }
    },
  },
};
</script>

<style scoped>
.batch-dialog >>> .el-dialog__body {
  padding: 0 20px;
}
</style>