update 子订单进度

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

@@ -8,9 +8,11 @@
     :destroy-on-close="false"
     :close-on-click-modal="configs.clickModalToClose ?? true"
   >
-    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
+    <!-- <el-button type="text" icon="el-icon-close" style="position: absolute; z-index: 100; top: 0; right: 18px" @click="handleClose">关闭</el-button> -->
+
+    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
       <el-tab-pane name="sub" label="子订单进度">
-        <SubOrderDetail />
+        <SubOrderDetail v-if="order !== null" :order="order" />
       </el-tab-pane>
       <el-tab-pane name="car" label="窑车详情">
         <CarDetail v-if="order !== null" :order-id="order.id" />
@@ -22,6 +24,20 @@
         <OrderDetail ref="order-detail-tag" :configs="configs" />
       </el-tab-pane>
     </el-tabs>
+    <!-- 
+    <div style="width: 100%; height: 76px; position: absolute; z-index: 100; bottom: 0; text-align: right;">
+      <el-button type="" plain @click="handleClose" style="margin-right: 18px; margin-top: 18px;">关闭</el-button>
+    </div> -->
+
+    <!-- footer  -->
+    <div slot="footer" style="">
+      <!-- <template v-for="(operate, index) in configs.form.operations">
+        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
+          operate.label
+        }}</el-button>
+      </template> -->
+      <el-button @click="handleClose">取消</el-button>
+    </div>
   </el-dialog>
 </template>
 
@@ -98,14 +114,14 @@ export default {
 
 <style scoped>
 .dialog-just-form >>> .el-dialog__body {
-  /* padding-top: 16px !important;
-  padding-bottom: 16px !important; */
-  padding-top: 0 !important;
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+  /* padding-top: 0 !important;
   padding-bottom: 0 !important;
 
   padding-left: 0 !important;
   padding-right: 0 !important;
-  height: 100%;
+  height: 100%; */
 }
 
 .el-select,
@@ -118,6 +134,14 @@ export default {
   padding: 0;
   /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
 }
+.dialog-just-form >>> .el-dialog__body {
+  height: calc(100% - 72px);
+}
+
+.dialog-just-form >>> .el-tabs__content {
+  height: calc(100% - 32px);
+  overflow-y: auto;
+}
 
 .dialog-just-form >>> .el-tabs {
   height: 100%;

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

@@ -27,14 +27,14 @@
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
 
-    <!-- <DialogJustForm
+    <DialogJustForm
       modal-append-to-body
       ref="order-dialog"
       v-if="renderDialog"
       fullscreen
       :configs="dialogConfig"
       @destroy-dialog="renderDialog = false"
-    /> -->
+    />
     <DialogWithMenu
       modal-append-to-body
       ref="menu-dialog"

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="table-pagi" style="">
+    <BaseListTable
+      :key="Math.random()"
+      v-loading="tableLoading"
+      :table-config="tableConfig.table"
+      :column-config="tableConfig.column"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :refresh-layout-key="refreshLayoutKey"
+    />
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="listQuery.page"
+      :page-sizes="[1, 5, 10, 20]"
+      :page-size="listQuery.limit"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+      style="text-align: center;"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import BaseListTable from "./BaseListTable.vue";
+
+export default {
+  name: "TablePaginationComp",
+  components: { BaseListTable },
+  props: {
+    tableConfig: {
+      type: Object,
+      default: () => null,
+    },
+    extraQueryFields: {
+      type: Object,
+      default: () => null,
+    },
+    urls: {
+      type: Object,
+      default: () => ({
+        page: "",
+        base: "",
+      }),
+    },
+    pageIsPost: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      tableLoading: false,
+      dataList: [],
+      listQuery: {
+        limit: 20,
+        page: 1,
+      },
+      totalPage: 0,
+      refreshLayoutKey: 0,
+    };
+  },
+  mounted() {
+    this.getAList();
+  },
+  methods: {
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+    },
+
+    handleSizeChange(newSize) {
+      this.listQuery.page = 1;
+      this.listQuery.limit = newSize;
+      // this.getAList(Object.assign({}, this.listQuery, this.extraQueryFields));
+      this.getAList();
+    },
+
+    handlePageChange(newPage) {
+      // this.getAList(Object.assign({}, this.listQuery, this.extraQueryFields));
+      this.getAList();
+    },
+
+    getAList(payload) {
+      this.tableLoading = true;
+
+      const data = payload ?? {
+        ...this.listQuery,
+        ...this.extraQueryFields,
+      };
+
+      console.log("getAlist", data, this.pageIsPost);
+
+      return this.$http({
+        url: this.urls.page ?? this.urls.base + "/page",
+        method: this.pageIsPost ? "POST" : "GET",
+        data: this.pageIsPost
+          ? data
+          : {
+              params: data,
+            },
+      }).then(({ data: res }) => {
+        if (res.code === 0) {
+          if ("list" in res.data) {
+            this.dataList = res.data.list;
+            this.totalPage = res.data.total;
+          } else {
+            this.dataList.splice(0);
+            this.totalPage = 0;
+            this.$message({
+              message: `${res.code}: ${res.msg}`,
+              type: "error",
+              duration: 1500,
+            });
+          }
+        }
+        this.tableLoading = false;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/views/modules/pms/order/components/tabs/subOrderDetail.vue

@@ -1,19 +1,161 @@
 <template>
   <div class="suborder-detail">
-    Sub Order Detail
+    <!-- 四分表格/田字格  -->
+    <el-row :gutter="20">
+      <el-col style="margin-bottom: 12px">
+        <!-- 混料订单  -->
+        <TablePagi
+          v-if="order !== null"
+          :extra-query-fields="{ code: order.code, cate: order.cate }"
+          :urls="{ page: '/pms/blenderOrder/pageView' }"
+          :page-is-post="true"
+          :table-config="{
+            table: null,
+            column: blenderTableProps,
+          }"
+        />
+      </el-col>
+      <el-col style="margin-bottom: 12px">
+        <!-- 压制订单  -->
+        <TablePagi
+          v-if="order !== null"
+          :extra-query-fields="{ code: order.code, cate: order.cate }"
+          :urls="{ page: '/pms/pressOrder/pageView' }"
+          :page-is-post="true"
+          :table-config="{
+            table: null,
+            column: pressTableProps,
+          }"
+        />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col style="margin-bottom: 12px">
+        <!-- 窑炉订单  -->
+        <TablePagi
+          v-if="order !== null"
+          :extra-query-fields="{ code: order.code, cate: order.cate }"
+          :urls="{ page: '/pms/kilnOrder/pageView' }"
+          :page-is-post="true"
+          :table-config="{
+            table: null,
+            column: kilnTableProps,
+          }"
+        />
+      </el-col>
+      <el-col style="margin-bottom: 12px">
+        <!-- 检测包装订单  -->
+        <TablePagi
+          v-if="order !== null"
+          :extra-query-fields="{ code: order.code, cate: order.cate }"
+          :urls="{ page: '/pms/qualityPackOrder/pageView' }"
+          :page-is-post="true"
+          :table-config="{
+            table: null,
+            column: detectionTableProps,
+          }"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import TablePagi from "../TablePagi.vue";
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+
 export default {
   name: "SuborderDetailTag",
-  props: {},
+  components: { TablePagi },
+  props: {
+    order: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  inject: ["urls"],
   data() {
-    return {};
+    return {
+      // 混料
+      blenderTableProps: [
+        { prop: "code", label: "混料订单号" },
+        { prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
+        {
+          prop: "statusDictValue",
+          label: "订单状态",
+          filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝"][val] : "-"),
+        },
+        { prop: "qty", label: "混料总量 [kg]" },
+        {
+          prop: "operations",
+          name: "操作",
+          fixed: "right",
+
+          subcomponent: TableOperaionComponent,
+          options: [
+            { name: "edit", label: "编辑", emitFull: true, icon: "edit-outline" },
+            { name: "view-batch", label: "查看批次", color: "#ff8000", toRouter: "pms-blenderBatch", icon: "document-copy" }, // 路由跳转至 pms-blenderBatch
+            { name: "detach", label: "下发", color: "#099", icon: "bottom-right" },
+          ],
+        },
+      ],
+      refreshLayoutKey1: "",
+      // 压制
+      pressTableProps: [
+        { prop: "code", label: "压制订单号" },
+        { prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
+        {
+          prop: "statusDictValue",
+          label: "订单状态",
+          filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝"][val] : "-"),
+        },
+        { prop: "qty", label: "生产量" },
+        { prop: "qtyComplete", label: "完成量" },
+        { prop: "goodqty", label: "合格数量" },
+        { prop: "badqty", label: "不合格数量" },
+        {
+          prop: "operations",
+          name: "操作",
+          fixed: "right",
+
+          subcomponent: TableOperaionComponent,
+          options: [{ name: "detach", label: "下发", icon: "bottom-right" }], // , url: '/pms/trans/pressDeli' }]
+        },
+      ],
+      refreshLayoutKey2: "",
+      // 窑炉
+      kilnTableProps: [
+        { prop: "code", label: "烧成订单号" },
+        { prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
+        { prop: "qty", label: "生产量" },
+        { prop: "qtyComplete", label: "完成量" },
+      ],
+      refreshLayoutKey3: "",
+      // 检测
+      detectionTableProps: [
+        { prop: "code", label: "检测包装订单号" },
+        { prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
+        { prop: "qty1", label: "检测量" },
+        { prop: "qty1Complete", label: "完成量" },
+        { prop: "goodqty1", label: "检测合格量" },
+        { prop: "badqty1", label: "检测不合格量" },
+      ],
+      refreshLayoutKey4: "",
+    };
   },
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    init(/** 参数 */) {
+      // Promise.all(
+      // 获取混料订单
+      // 获取压制订单
+      // 获取窑炉订单
+      // 获取检测包装订单
+      // )
+    },
+  },
 };
 </script>
 

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

@@ -43,7 +43,7 @@ export default function () {
       { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "" },
     ],
     finished: [
-      { name: 'view', label: '查看详情' },
+      { name: 'view-ongoing', label: '查看详情' },
       {} // 占位
       // { name: 'view', label: '查看详情' }
       // { name: 'end-order', label: '结束订单', icon: 'error', showText: true },