update 进行中订单--查看批次--编辑

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

@@ -1,21 +1,48 @@
 <template>
   <el-dialog
-    class="dialog-just-form"
+    class="batch-dialog"
     title="查看批次"
-    width="75%"
+    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="handleBtnClick({ name: 'cancel' })">取消</el-button>
+    </div>
   </el-dialog>
 </template>
 
@@ -24,12 +51,12 @@ 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 },
+  components: { BaseListTable, BatchDialogEdit },
   props: {
     configs: {
       type: Object,
@@ -42,8 +69,12 @@ export default {
   data() {
     return {
       visible: false,
+      editDialogVisible: false,
+      blenderOrderId: null, // 用来获取批次列表
       loading: false,
-      dataForm: {},
+      limit: 20,
+      page: 1,
+      total: 0,
       refreshLayoutKey: Math.random(),
       tableLoading: false,
       dataList: [],
@@ -95,16 +126,80 @@ export default {
       ],
     };
   },
+  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() {},
+    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":
+          break;
+      }
+    },
   },
 };
 </script>
+
+<style scoped>
+.batch-dialog >>> .el-dialog__body {
+  padding: 0 20px;
+}
+</style>