add BatchDialog--detail

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

@@ -0,0 +1,137 @@
+<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>
+
+    <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";
+
+export default {
+  name: "BatchDialog--detail",
+  components: { BaseListTable },
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({
+        clickModalToClose: false,
+        forms: null,
+      }),
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      blenderOrderId: null, // 用来获取批次列表
+      loading: false,
+      limit: 20,
+      page: 1,
+      total: 0,
+      refreshLayoutKey: Math.random(),
+      tableLoading: false,
+      dataList: [],
+      tableConfigs: [
+        { type: "index", label: "序号" },
+        // { prop: "batchId", label: "混料批次ID" },
+        { prop: "materialCode", label: "原料编码" },
+        { prop: "materialDesc", label: "原料描述" },
+        { prop: "materialName", label: "原料中文名称" },
+        { prop: "qty", label: "计算用量" },
+        { prop: "realqty", label: "实际用量" },
+        { width: 160, prop: "createTime", label: "添加时间", filter: timeFilter },
+      ],
+    };
+  },
+  watch: {
+    page() {
+      this.getBatchDetailList();
+    },
+    limit() {
+      this.getBatchDetailList();
+    },
+  },
+  methods: {
+    init(id) {
+      this.visible = true;
+      console.log("[BatchDialog--detail] init", id);
+      this.blenderOrderId = id;
+      this.getBatchDetailList();
+    },
+
+    /** 获取批次列表 */
+    async getBatchDetailList() {
+      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;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.batch-dialog >>> .el-dialog__body {
+  padding: 0 20px;
+}
+</style>

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

@@ -33,12 +33,22 @@
       :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" />
+
+    <!-- 查看详情  -->
+    <BatchDialogDetail
+      v-if="detailDialogVisible"
+      ref="batchDialogDetail"
+      :blender-order-id="blenderOrderId"
+      @refreshDataList="getBatchList"
+      @destroy="detailDialogVisible = false" />
+
     <!-- footer  -->
     <div slot="footer">
       <el-button @click="handleClose">取消</el-button>
@@ -52,11 +62,12 @@ import TableTextComponent from "@/components/noTemplateComponents/detailComponen
 import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
 import { timeFilter } from "@/utils/filters";
 import BatchDialogEdit from "./BatchDialog--edit.vue";
+import BatchDialogDetail from "./BatchDialog--detail.vue";
 // import { pick as __pick } from "@/utils/filters";
 
 export default {
-  name: "DialogList",
-  components: { BaseListTable, BatchDialogEdit },
+  name: "BatchDialog",
+  components: { BaseListTable, BatchDialogEdit, BatchDialogDetail },
   props: {
     configs: {
       type: Object,
@@ -70,6 +81,7 @@ export default {
     return {
       visible: false,
       editDialogVisible: false,
+      detailDialogVisible: false,
       blenderOrderId: null, // 用来获取批次列表
       loading: false,
       limit: 20,