update 订单详情-子订单进度-查看批次

src/assets/scss/aui.scss

@@ -9,3 +9,5 @@
 @import "./pages/404.scss";
 // 模块
 @import "./modules/home.scss";
+// 组件
+@import "./components/dialog.scss";

src/assets/scss/components/dialog.scss

@@ -0,0 +1,4 @@
+[modal-append-to-body],
+.el-dialog__wrapper {
+  backdrop-filter: blur(2px);
+}

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

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog
+    class="dialog-just-form"
+    title="查看批次"
+    width="75%"
+    :visible="visible"
+    @close="handleClose"
+    @closed="$emit('destroy')"
+    :append-to-body="true"
+    :close-on-click-modal="false">
+    <!-- list  -->
+    <BaseListTable
+      :key="Math.random()"
+      v-loading="tableLoading"
+      :column-config="tableConfigs"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :refresh-layout-key="refreshLayoutKey" />
+  </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 { pick as __pick } from "@/utils/filters";
+
+export default {
+  name: "DialogList",
+  components: { BaseListTable },
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({
+        clickModalToClose: false,
+        forms: null,
+      }),
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      dataForm: {},
+      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";
+              },
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    init(id) {
+      this.visible = true;
+    },
+
+    handleClose() {
+      this.visible = false;
+    },
+
+    handleOperate() {},
+  },
+};
+</script>

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

@@ -1,107 +0,0 @@
-<template>
-  <el-dialog
-    class="dialog-just-form"
-    :fullscreen="fullscreen"
-    :title="查看批次"
-    :visible="visible"
-    @close="handleClose"
-    :destroy-on-close="false"
-    :close-on-click-modal="configs.clickModalToClose ?? false"></el-dialog>
-</template>
-
-<script>
-import { pick as __pick } from "@/utils/filters";
-
-export default {
-  name: "DialogList",
-  components: {},
-  props: {
-    configs: {
-      type: Object,
-      default: () => ({
-        clickModalToClose: false,
-        forms: null,
-      }),
-    },
-  },
-  data() {
-    return {
-      loadingStatus: false,
-      dataForm,
-      watchList,
-      cachedList,
-      detailMode: false,
-      baseDialogConfig: null,
-      visible: false,
-    };
-  },
-  methods: {
-    /** init **/
-    init(id, detailMode) {
-      this.visible = true;
-      // console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
-      if (this.$refs.dataForm) {
-        // console.log("[DialogJustForm] clearing form validation...");
-        // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
-        this.$refs.dataForm.clearValidate();
-      }
-
-      this.detailMode = detailMode ?? false;
-      this.$nextTick(() => {
-        this.dataForm.id = id || null;
-        if (this.dataForm.id) {
-          // 如果是编辑
-          this.loadingStatus = true;
-
-          // 获取基本信息
-          this.$http
-            .get(this.urls.base + `/${this.dataForm.id}`)
-            .then(({ data: res }) => {
-              if (res && res.code === 0) {
-                this.dataForm = __pick(res.data, Object.keys(this.dataForm));
-                /** 格式化文件上传列表 */
-                if (Array.isArray(this.dataForm.files)) {
-                  this.dataForm.files = this.dataForm.files.map((file) => ({
-                    id: file.id,
-                    name: file.fileUrl.split("/").pop(),
-                    typeCode: file.typeCode,
-                    url: file.fileUrl,
-                  }));
-                }
-                // console.log("[DialogJustForm] init():", this.dataForm);
-              } else {
-                this.$message({
-                  message: `${res.code}: ${res.msg}`,
-                  type: "error",
-                  duration: 1500,
-                });
-              }
-              this.loadingStatus = false;
-            })
-            .catch((err) => {
-              this.loadingStatus = false;
-              this.$message({
-                message: `${err}`,
-                type: "error",
-                duration: 1500,
-              });
-            });
-        } else {
-          // 如果不是编辑
-          this.loadingStatus = false;
-        }
-      });
-    },
-
-    handleClose() {
-      this.visible = false;
-
-      setTimeout(() => {
-        this.$emit("destroy-dialog");
-        // this.resetForm();
-        // this.$emit("update:dialogVisible", false);
-      }, 200);
-    },
-  },
-};
-</script>

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

@@ -21,18 +21,22 @@
     <!-- 编辑弹窗 -->
     <DialogJustForm ref="vdialog" v-if="false" />
     <!-- 批次弹窗 -->
-    <DialogList ref="dialogList" :configs="{}" />
+    <BatchDialog
+      ref="batchDialog"
+      v-if="batchDialogVisible"
+      @destroy="batchDialogVisible = false"
+      :configs="batchDialogConfigs" />
   </div>
 </template>
 
 <script>
 import BaseListTable from "./BaseListTable.vue";
 import DialogJustForm from "./DialogJustForm.vue";
-import DialogList from "./DialogList.vue";
+import BatchDialog from "./BatchDialog.vue";
 
 export default {
   name: "TablePaginationComp",
-  components: { BaseListTable, DialogJustForm, DialogList },
+  components: { BaseListTable, DialogJustForm, BatchDialog },
   props: {
     tableConfig: {
       type: Object,
@@ -64,6 +68,9 @@ export default {
       },
       totalPage: 0,
       refreshLayoutKey: 0,
+      /** batch related */
+      batchDialogVisible: false,
+      batchDialogConfigs: {},
     };
   },
   mounted() {
@@ -80,7 +87,10 @@ export default {
           break;
         case "view-batch":
           // 查看批次
-          console.log("查看批次");
+          this.batchDialogVisible = true;
+          this.$nextTick(() => {
+            this.$refs.batchDialog.init();
+          });
           break;
         case "detach":
           // 下发