update 订单详情-窑车tag

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

@@ -8,94 +8,20 @@
     :destroy-on-close="false"
     :close-on-click-modal="configs.clickModalToClose ?? true"
   >
-    <!-- title  -->
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
-    <!-- {{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }} -->
+      <el-tab-pane name="sub" label="子订单进度">
-    <!-- <div slot="title" class="dialog-title" style="padding: 40px 40px 0">
+        <SubOrderDetail />
-      <h1 class="">
+      </el-tab-pane>
-        查看详情
+      <el-tab-pane name="car" label="窑车详情">
-      </h1>
+        <CarDetail :order-id="orderId" />
-    </div> -->
+      </el-tab-pane>
-
+      <el-tab-pane name="tray" label="托盘详情">
-    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick" style="z-index: -1;">
+        <TrayDetail />
-      <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name" :label="tab.name">
+      </el-tab-pane>
-        <!-- icons  -->
+      <el-tab-pane name="order" label="订单详情">
-        <!-- <span class="slot" slot="label">
+        <OrderDetail />
-          <i
-            :class="{
-              'el-icon-edit': tab.key === 'info',
-              'el-icon-s-data': tab.key === 'attr',
-              'el-icon-folder-opened': tab.key === 'attachment',
-            }"
-          ></i>
-          {{ tab.name }}
-        </span> -->
-
-        <!-- tabs  -->
-        <SubOrderDetail v-if="tab.key === 'sub'" />
-        <CarDetail v-if="tab.key === 'car'" />
-        <TrayDetail v-if="tab.key === 'tray'" />
-        <OrderDetail v-if="tab.key === 'order'" />
-
-        <!-- form  -->
-        <!-- <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" style="padding: 0 40px">
-          <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
-            <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
-              <el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
-                <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
-                <el-cascader
-                  v-if="col.cascader"
-                  v-model="dataForm[col.prop]"
-                  :options="col.options"
-                  :disabled="detailMode"
-                  v-bind="col.elparams"
-                ></el-cascader>
-                <el-select
-                  v-if="col.select"
-                  v-model="dataForm[col.prop]"
-                  clearable
-                  :disabled="detailMode"
-                  v-bind="col.elparams"
-                  @change="handleSelectChange(col, $event)"
-                >
-                  <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
-                </el-select>
-                <el-switch
-                  v-if="col.switch"
-                  v-model="dataForm[col.prop]"
-                  :active-value="col.activeValue ?? 1"
-                  :inactive-value="col.activeValue ?? 0"
-                  @change="handleSwitchChange"
-                  :disabled="detailMode"
-                />
-                <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
-                <el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
-
-                <div class="" v-if="col.component" style="margin: 42px 0 0">
-                  <component
-                    :is="col.component"
-                    :key="'component_' + col.prop"
-                    @update:modelValue="handleComponentModelUpdate(col.prop, $event)"
-                    :modelValue="dataForm[col.prop] ?? ''"
-                    :mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
-                    v-bind="col.bind"
-                  />
-                </div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form> -->
       </el-tab-pane>
     </el-tabs>
-
-    <!-- footer  -->
-    <!-- <div slot="footer" style="padding: 0 40px 0">
-      <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="handleBtnClick({ name: 'cancel' })">取消</el-button>
-    </div> -->
   </el-dialog>
 </template>
 
@@ -180,76 +106,49 @@ export default {
       detailMode: false,
       baseDialogConfig: null,
       visible: false,
-      activeTab: "子订单进度",
+      activeTab: "sub",
+      orderId: null,
+      orderSubId: null,
+      carLayoutKey: 0
     };
   },
   mounted() {
     /** 处理 injectTo 选项 */
-    this.configs.form.rows.forEach((row) => {
+    // this.configs.form.rows.forEach((row) => {
-      row.forEach((col) => {
+    //   row.forEach((col) => {
-        if ("injectTo" in col && Array.isArray(col.injectTo)) {
+    //     if ("injectTo" in col && Array.isArray(col.injectTo)) {
-          // console.log("watching options ..... ", col);
+    //       // console.log("watching options ..... ", col);
-          col.injectTo.map((item) => {
+    //       col.injectTo.map((item) => {
-            const unwatch = this.$watch(
+    //         const unwatch = this.$watch(
-              () => this.dataForm[col.prop],
+    //           () => this.dataForm[col.prop],
-              (newVal) => {
+    //           (newVal) => {
-                const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
+    //             const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
-                if (chosenObject) {
+    //             if (chosenObject) {
-                  // 如果找到了
+    //               // 如果找到了
-                  this.$set(this.dataForm, item[0], chosenObject[item[1]]);
+    //               this.$set(this.dataForm, item[0], chosenObject[item[1]]);
-                }
+    //             }
-              },
+    //           },
-              {
+    //           {
-                immediate: false,
+    //             immediate: false,
-              }
+    //           }
-            );
+    //         );
-            this.watchList.push(unwatch);
+    //         this.watchList.push(unwatch);
-          });
+    //       });
-        }
+    //     }
-      });
+    //   });
-    });
+    // });
   },
-  computed: {
-    uploadHeaders() {
-      return {
-        token: Cookies.get("token") || "",
-      };
-    },
-    actualMenus() {
-      // return this.configs.menu.filter((m) => {
-      //   if (m.onlyEditMode && !this.dataForm.id) {
-      //     return false;
-      //   }
-      //   return true;
-      // });
-      return [
-        { name: "子订单进度", key: "sub" },
-        { name: "窑车详情", key: "car" },
-        { name: "托盘详情", key: "tray" },
-        { name: "订单详情", key: "order" },
-      ];
-    },
-  },
-  methods: {
-    handleTabClick(payload) {},
 
-    handleFilelistUpdate(newFilelist) {
+  methods: {
-      // TODO: 直接访问 .files 可能不太合适
+    handleTabClick(tab, event) {
-      this.dataForm.files = newFilelist.map((file) => ({
+      console.log('handle tab click', tab, event)
-        id: file.id,
+      // tab.getAList(this.orderId)
-        name: file.name,
+      switch (tab.label) {
-        url: file.url,
+        case "子订单进度": break;
-        typeCode: file.typeCode,
+        case "窑车详情": this.carLayoutKey = Math.random(); break;
-      }));
+        case "托盘详情": break;
-      // 更新请求
+        case "订单详情": break;
-      if ("id" in this.dataForm && this.dataForm.id !== null && this.dataForm.id !== undefined) this.addOrUpdate("PUT");
+      }
-      else
-        this.$notify({
-          title: "等待保存",
-          message: "已添加文件，请手动点击保存！",
-          type: "warning",
-          duration: 2500,
-        });
     },
 
     /** utitilities */
@@ -280,18 +179,17 @@ export default {
     },
 
     /** init **/
-    init(id, detailMode) {
+    init(order, detailMode) {
+      this.orderId = order.id;
+      console.log("init menu dialog,", order);
       this.visible = true;
-      // console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
+      // if (this.$refs.dataForm) {
-      if (this.$refs.dataForm) {
+      //   this.$refs.dataForm.clearValidate();
-        // console.log("[DialogJustForm] clearing form validation...");
+      // }
-        // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
-        this.$refs.dataForm.clearValidate();
-      }
 
       this.detailMode = detailMode ?? false;
       this.$nextTick(() => {
-        this.dataForm.id = id || null;
+        // this.dataForm.id = id || null;
         if (this.dataForm.id) {
           // 如果是编辑
           this.loadingStatus = true;

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

@@ -37,11 +37,11 @@
     /> -->
     <DialogWithMenu
       modal-append-to-body
-      ref="order-dialog"
+      ref="menu-dialog"
-      v-if="renderDialog"
+      v-if="renderMenuDialog"
       fullscreen
       :configs="dialogConfig"
-      @destroy-dialog="renderDialog = false"
+      @destroy-dialog="renderMenuDialog = false"
     />
   </section>
 </template>
@@ -114,6 +114,7 @@ export default {
       dataList: [],
       totalPage: 0,
       renderDialog: false,
+      renderMenuDialog: false,
     };
   },
   mounted() {
@@ -298,6 +299,11 @@ export default {
           this.openDialog(data, true);
           break;
         }
+        case "view-ongoing": {
+          console.log('view-ongoing', data)
+          this.openMenuDialog(data, false);
+          break;
+        }
       }
     },
 
@@ -349,6 +355,13 @@ export default {
         this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);
       });
     },
+
+    openMenuDialog(row, detail) {
+      this.renderMenuDialog = true;
+      this.$nextTick(() => {
+        this.$refs["menu-dialog"].init(/** some args... */ row, detail);
+      });
+    },
   },
 };
 </script>

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

@@ -1,19 +1,223 @@
 <template>
   <div class="car-detail">
-    Car Detail
+    <BaseListTable
+      key="car-history-list"
+      v-loading="tableLoading"
+      :table-config="null"
+      :column-config="tableConfig"
+      :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"
+    ></el-pagination>
+
+    <!-- <DialogCarPayload
+      ref="car-payload-dialog"
+      v-if="!!carPayloadDialogConfigs"
+      :dialog-visible.sync="carPayloadDialogVisible"
+      :configs="carPayloadDialogConfigs"
+    /> -->
+    <!-- @refreshDataList="getList" -->
   </div>
 </template>
 
 <script>
+import BaseListTable from "../BaseListTable.vue";
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+// import StateSelect from '@/components/StateSelect.vue';
+import { timeFilter } from "@/utils/filters";
+import DialogCarPayload from "@/components/DialogCarPayload.vue";
+
+
 export default {
   name: "CarDetailTag",
-  props: {},
+  components: { BaseListTable, DialogCarPayload },
-  data() {
+  props: {
-    return {};
+    orderId: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+      tableConfig: [
+        { type: "index", label: "序号" },
+        // { prop: "createTime", label: "添加时间", filter: timeFilter },
+        { prop: "code", label: "窑车号" },
+        { prop: "stateDictValue", label: "状态" }, // , subcomponent: StateSelect },
+        // { prop: "stateDictValue", label: "状态", filter: v => (v !== null && v !== undefined) ? ['没有数据', '正常', '判废', '过渡'][v] : '-' }, // subcomponent
+        // { prop: "orderCode", label: "订单号" },
+        { prop: "posCode", label: "位置" },
+        { prop: "startTime", label: "开始时间", filter: timeFilter },
+        { prop: "endTime", label: "结束时间", filter: timeFilter },
+        // {
+        //   prop: "operations",
+        //   name: "操作",
+        //   fixed: "right",
+        //   width: 90,
+        //   subcomponent: TableOperaionComponent,
+        //   options: [
+        //     { name: "to-car-payload", label: "装载详情", icon: "document" },
+        //     { name: "delete", label: "删除", icon: "delete", emitFull: true, promptField: "code" },
+        //   ],
+        // },
+      ],
+      refreshLayoutKey: null,
+      tableLoading: false,
+      listQuery: {
+        limit: 20,
+        page: 1,
+      },
+      totalPage: 0,
+      carPayloadDialogVisible: false,
+      carPayloadDialogConfigs: {
+        dialogWidth: "70%",
+        carPayloadDialog: true,
+        clickModalToClose: true,
+        tableConfig: {
+          table: null,
+          column: [
+            // 窑车的 装载详情
+            { width: 56, type: "index", label: "序号" },
+            { prop: "orderCode", label: "订单号" },
+            { width: 80, prop: "orderCate", label: "订单子号" },
+            { prop: "bomCode", label: "配方" },
+            { prop: "shapeCode", label: "砖型" },
+            { width: 80, prop: "qty", label: "订单数量" },
+            { width: 72, prop: "goodqty", label: "合格数" },
+            { width: 72, prop: "badqty", label: "废砖数" },
+          ],
+        },
+      },
+    };
+  },
+  watch: {
+    orderId: {
+      handler: function (val) {
+        if (val) {
+          console.log("get car list based on orderId: ", val);
+          this.getAList(val);
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleOperate({ type, data }) {
+      switch (type) {
+        case "delete": {
+          // 找到删除的 prompt 字段
+          const deleteConfig = data.head?.options?.find((item) => item.name === "delete");
+          let promptName = data.name ?? data.id;
+          if (deleteConfig && "promptField" in deleteConfig) {
+            promptName = data[deleteConfig.promptField];
+          }
+          // 确认是否删除
+          return this.$confirm(`确定要删除记录 "${promptName}" 吗?`, "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          })
+            .then(() => {
+              // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
+              this.$http({
+                url: this.urls.base,
+                method: "DELETE",
+                data: data.id,
+                // data: [`${data.id}`],
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+
+                  this.page = 1;
+                  this.size = 10;
+                  this.getList();
+                } else {
+                  this.$message({
+                    message: `${res.code}: ${res.msg}`,
+                    type: "error",
+                    duration: 1500,
+                  });
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "to-car-history": {
+          return this.$router.push({
+            name: "pms-carHistory",
+            query: {
+              code: data.code,
+            },
+          });
+        }
+        case "to-car-payload": {
+          // open dialog instead of redirect to a new page
+          this.openCarPayloadDialog(data);
+        }
+      }
+    },
+
+    openCarPayloadDialog(id) {
+      this.carPayloadDialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["car-payload-dialog"].init(id);
+      });
+    },
+
+    getAList(orderId) {
+      console.log("geting car list, ", orderId);
+      if (!orderId) orderId = this.orderId;
+
+      this.tableLoading = true;
+      this.$http.post("/pms/carHandle/pageHis", { ...this.listQuery, orderId }).then(({ data: res }) => {
+        if (res.code === 0 && res.data) {
+          if ("list" in res.data) {
+            this.dataList = res.data.list;
+            this.totalPage = res.data.total;
+          } else console.log("没有res.data.list属性");
+        } else {
+          this.dataList.splice(0);
+          this.totalPage = 0;
+          this.$message({
+            message: `${res.code}: ${res.msg}`,
+            type: "error",
+            duration: 1500,
+          });
+        }
+        this.refreshLayoutKey = this.layoutTable();
+        this.tableLoading = false;
+      });
+    },
+
+    layoutTable() {
+      return Math.random();
+    },
+
+    /** 导航器的操作 */
+    handleSizeChange(newSize) {
+      this.listQuery.page = 1;
+      this.listQuery.limit = newSize;
+      this.getAList();
+    },
+
+    handlePageChange(newPage) {
+      this.getAList();
+    },
   },
-  created() {},
-  mounted() {},
-  methods: {},
 };
 </script>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="tray-detail">
-    Tary Detail
+    托盘详情
   </div>
 </template>
 

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

@@ -24,7 +24,7 @@ export default function () {
   const operations = {
     ongoing: [
       // { name: 'confirm-order', label: '确认', icon: 'success', showText: true },
-      { name: 'view', label: '查看详情', icon: 'view' },
+      { name: 'view-ongoing', label: '查看详情', icon: 'view', emitFull: true },
       { name: "end-order", label: "结束", icon: "finished" },
       { name: "move-up", label: "上移", icon: "arrow-up" },
       { name: "move-down", label: "下移", icon: "arrow-down" },