add BatchDialog--detail

src/views/modules/pms/blenderBatchDetails/config.js

@@ -1,6 +1,3 @@
-// import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
-// import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
-// import StatusComponent from "@/components/noTemplateComponents/statusComponent";
 import { timeFilter } from "@/utils/filters";
 
 export default function () {
@@ -13,74 +10,26 @@ export default function () {
     { prop: "qty", label: "计算用量" },
     { prop: "realqty", label: "实际用量" },
     { width: 160, prop: "createTime", label: "添加时间", filter: timeFilter },
-    // {
-    //   prop: "operations",
-    //   name: "操作",
-    //   fixed: "right",
-    //   width: 120,
-    //   subcomponent: TableOperaionComponent,
-    //   options: [{ name: { name: "edit", label: "编辑", icon: "edit-outline"}, enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } }] // 只有 injectRow.task 为手动时，才允许编辑
-    // },
   ];
 
   const headFormFields = [
     {
-      label: '批次详情'
+      label: "批次详情",
     },
-    // {
-    //   button: {
-    //     type: "plain",
-    //     name: "新增",
-    //     permission: "",
-    //   },
-    // },
   ];
-
-  // const dialogJustFormConfigs = {
-  //   // extra blenderOrderId
-  //   // extraIds: {},
-  //   form: {
-  //     rows: [
-  //       [
-  //         {
-  //           input: true,
-  //           label: "批次编码",
-  //           prop: "batchNo",
-  //           rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-  //           elparams: { placeholder: "请输入批次编码" },
-  //         },
-  //         {
-  //           input: true,
-  //           label: "批次重量",
-  //           prop: "batchSize",
-  //           rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-  //           elparams: { placeholder: "请输入批次重量" },
-  //         },
-  //       ],
-  //     ],
-  //     operations: [
-  //       { name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false },
-  //       { name: "update", label: "更新", type: "primary", permission: "", showOnEdit: true },
-  //       { name: "reset", label: "重置", type: "warning", showAlways: true },
-  //     ],
-  //   },
-  // };
-
   return {
     dialogConfigs: null,
     tableConfig: {
-      table: null, // 此处可省略，el-table 上的配置项
-      column: tableProps, // el-column-item 上的配置项
+      table: null,
+      column: tableProps,
     },
     headFormConfigs: {
-      rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
-      fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
+      rules: null,
+      fields: headFormFields,
     },
     urls: {
       base: "/pms/blenderDetail",
       page: "/pms/blenderDetail/pageView",
-      // pageIsPostApi: true, // 使用post接口来获取page数据，极少用，目前基本上只有工艺管理模块里在用
-      // subase: "/pms/equipmentTechParam",
     },
   };
 }

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,