add 订单详情弹窗细化“

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

@@ -0,0 +1,504 @@
+<template>
+  <el-dialog
+    class="dialog-just-form"
+    style="padding: 40px"
+    :fullscreen="fullscreen"
+    :visible="visible"
+    @close="handleClose"
+    :destroy-on-close="false"
+    :close-on-click-modal="configs.clickModalToClose ?? true"
+  >
+    <!-- title  -->
+    <!-- {{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }} -->
+    <!-- <div slot="title" class="dialog-title" style="padding: 40px 40px 0">
+      <h1 class="">
+        查看详情
+      </h1>
+    </div> -->
+
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick" style="z-index: -1;">
+      <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name" :label="tab.name">
+        <!-- icons  -->
+        <!-- <span class="slot" slot="label">
+          <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>
+
+<script>
+import { pick as __pick } from "@/utils/filters";
+import Cookies from "js-cookie";
+import moment from "moment";
+
+import CarDetail from "./tabs/carDetail.vue";
+import OrderDetail from "./tabs/orderDetail.vue";
+import SubOrderDetail from "./tabs/subOrderDetail.vue";
+import TrayDetail from "./tabs/trayDetail.vue";
+
+export default {
+  name: "DialogWithMenu--OrderVersion",
+  components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
+  props: {
+    configs: {
+      type: Object,
+      default: () => null,
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  inject: ["urls"],
+  data() {
+    const dataForm = {};
+    const watchList = [];
+    const cachedList = {};
+
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
+        dataForm[col.prop] = col.default ?? null;
+
+        if (col.fetchData)
+          col.fetchData().then(({ data: res }) => {
+            // console.log("[DialogJustForm fetchData -->]", res.data.list);
+            if (res.code === 0 && res.data.list) {
+              if ("injectTo" in col) {
+                // 保存完整的数据列表
+                cachedList[col.prop] = res.data.list;
+              }
+
+              this.$set(
+                col,
+                "options",
+                res.data.list.map((i) => ({
+                  label: col.optionLabel ? i[col.optionLabel] : i.name,
+                  value: col.optionValue ? i[col.optionValue] : i.id,
+                }))
+              );
+              // col.options = res.data.list;
+            } else {
+              col.options.splice(0);
+            }
+            // dataForm[col.prop] = col.default ?? null; // not perfect!
+          });
+        else if (col.fetchTreeData) {
+          // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
+          col.fetchTreeData().then(({ data: res }) => {
+            // console.log("[DialogJustForm fetchTreeData -->]", res.data);
+            if (res.code === 0 && res.data) {
+              if ("list" in res.data) {
+                this.$set(col, "options", res.data.list);
+              } else if (Array.isArray(res.data)) {
+                this.$set(col, "options", res.data);
+              }
+            } else {
+              col.options.splice(0);
+            }
+          });
+        }
+      });
+    });
+    return {
+      loadingStatus: false,
+      dataForm,
+      watchList,
+      cachedList,
+      detailMode: false,
+      baseDialogConfig: null,
+      visible: false,
+      activeTab: "子订单进度",
+    };
+  },
+  mounted() {
+    /** 处理 injectTo 选项 */
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
+        if ("injectTo" in col && Array.isArray(col.injectTo)) {
+          // console.log("watching options ..... ", col);
+          col.injectTo.map((item) => {
+            const unwatch = this.$watch(
+              () => this.dataForm[col.prop],
+              (newVal) => {
+                const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
+                if (chosenObject) {
+                  // 如果找到了
+                  this.$set(this.dataForm, item[0], chosenObject[item[1]]);
+                }
+              },
+              {
+                immediate: false,
+              }
+            );
+            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) {
+      // TODO: 直接访问 .files 可能不太合适
+      this.dataForm.files = newFilelist.map((file) => ({
+        id: file.id,
+        name: file.name,
+        url: file.url,
+        typeCode: file.typeCode,
+      }));
+      // 更新请求
+      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 */
+    showButton(operate) {
+      const notDetailMode = !this.detailMode;
+      const showAlways = operate.showAlways ?? false;
+      const editMode = operate.showOnEdit && this.dataForm.id;
+      const addMode = !operate.showOnEdit && !this.dataForm.id;
+      const permission = operate.permission ? this.$hasPermission(operate.permission) : true;
+      return notDetailMode && (showAlways || ((editMode || addMode) && permission));
+    },
+
+    resetForm(excludeId = false, immediate = false) {
+      setTimeout(
+        () => {
+          Object.keys(this.dataForm).forEach((key) => {
+            if (excludeId && key === "id") return;
+            this.dataForm[key] = null;
+          });
+          // console.log("[DialogJustForm resetForm()] clearing form...");
+          this.$refs.dataForm.clearValidate();
+          this.$emit("dialog-closed"); // 触发父组件销毁自己
+          this.watchList.map((unwatch) => unwatch());
+          this.cachedList = {};
+        },
+        immediate ? 0 : 200
+      );
+    },
+
+    /** 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;
+        }
+      });
+    },
+
+    /** handlers */
+    handleSelectChange(col, eventValue) {
+      // console.log("[dialog] select change: ", col, eventValue);
+      this.$forceUpdate();
+    },
+
+    handleSwitchChange(val) {
+      // console.log("[dialog] switch change: ", val, this.dataForm);
+    },
+
+    handleComponentModelUpdate(propName, { subject, payload: { data } }) {
+      this.dataForm[propName] = JSON.stringify(data);
+      // console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
+    },
+
+    addOrUpdate(method = "POST") {
+      if ("parentId" in this.dataForm) {
+        // console.log("[DialogJustForm parentId]", this.dataForm.parentId);
+        // 对特殊的键做特殊处理，如 parentId 是一个 cascader，获取的值是 ["xxx"]，后端只需要xxx
+        const lastItem = this.dataForm.parentId.length - 1;
+        this.dataForm.parentId = this.dataForm.parentId[lastItem];
+      }
+
+      this.$refs.dataForm.validate((passed, result) => {
+        if (passed) {
+          this.loadingStatus = true;
+
+          let httpPayload = null;
+          /** 针对有文件上传选项的弹窗提供特殊的 payload */
+          if (this.dataForm.files) {
+            httpPayload = {
+              ...this.dataForm,
+              fileIds: this.dataForm.files.map((file) => file.id),
+            };
+          } else {
+            httpPayload = this.dataForm;
+          }
+
+          /** 针对时间段设置 payload */
+          if ("startTime" in this.dataForm && "endTime" in this.dataForm) {
+            const { startTime, endTime } = this.dataForm;
+            httpPayload = {
+              ...httpPayload,
+              startTime: startTime ? moment(startTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
+              endTime: endTime ? moment(endTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
+            };
+          }
+
+          // /** 针对时间段设置 payload */
+          // if ("updateTime" in this.dataForm) {
+          //   const { updateTime } = this.dataForm;
+          //   httpPayload = {
+          //     ...httpPayload,
+          //     updateTime: updateTime ? moment(updateTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
+          //   };
+          // }
+          /** 针对时间段设置 payload */
+          if ("deliveryTime" in this.dataForm) {
+            const { deliveryTime } = this.dataForm;
+            httpPayload = {
+              ...httpPayload,
+              deliveryTime: deliveryTime ? moment(deliveryTime).format("YYYY-MM-DDTHH:mm:ss") : null,
+            };
+          }
+
+          /** 发送 */
+          return this.$http({
+            url: this.urls.base,
+            method,
+            data: httpPayload,
+          })
+            .then(({ data: res }) => {
+              // console.log("[add&update] res is: ", res);
+              this.loadingStatus = false;
+              if (res.code === 0) {
+                this.$message.success(method === "POST" ? "添加成功" : "更新成功");
+                this.$emit("refreshDataList");
+                if (method === "POST") this.handleClose();
+              } else {
+                this.$message({
+                  message: `${res.code}: ${res.msg}`,
+                  type: "error",
+                  duration: 2000,
+                });
+              }
+            })
+            .catch((errMsg) => {
+              this.$message.error("参数错误：" + errMsg);
+              if (this.loadingStatus) this.loadingStatus = false;
+            });
+        } else {
+          this.$message.error("请核查字段信息");
+        }
+      });
+    },
+
+    handleBtnClick(payload) {
+      // console.log("btn click payload: ", payload);
+
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+          case "reset":
+            this.resetForm(true, true); // true means exclude id, immediate execution
+            break;
+          case "add":
+          case "update":
+            this.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
+            break;
+        }
+      } else {
+        console.log("[x] 不是这么用的! 缺少name属性");
+      }
+    },
+
+    handleUploadChange(file, fileList) {
+      // console.log("[Upload] handleUploadChange...", file, fileList);
+    },
+
+    handleClose() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.$emit("destroy-dialog");
+        // this.resetForm();
+        // this.$emit("update:dialogVisible", false);
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog-just-form >>> .el-dialog__body {
+  /* padding-top: 16px !important;
+  padding-bottom: 16px !important; */
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  height: 100%;
+}
+
+.el-select,
+.el-cascader,
+.el-date-editor {
+  width: 100% !important;
+}
+
+.dialog-just-form >>> .el-dialog__header {
+  padding: 0;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+
+.dialog-just-form >>> .el-tabs {
+  height: 100%;
+}
+
+.h0 {
+  height: 0;
+  width: 0;
+}
+</style>

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

@@ -27,7 +27,15 @@
       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="order-dialog"
       v-if="renderDialog"
@@ -42,12 +50,13 @@
 import BaseListTable from "./BaseListTable.vue";
 import BaseSearchForm from "./BaseSearchForm.vue";
 import DialogJustForm from "./DialogJustForm.vue";
+import DialogWithMenu from "./DialogWithMenu.vue";
 import moment from "moment";
 
 const dictList = JSON.parse(localStorage.getItem("dictList"));
 export default {
   name: "ListSectionWithHead",
-  components: { BaseSearchForm, BaseListTable, DialogJustForm },
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
   props: {
     headConfig: {
       type: Object,
@@ -104,7 +113,7 @@ export default {
       },
       dataList: [],
       totalPage: 0,
-      renderDialog: false
+      renderDialog: false,
     };
   },
   mounted() {
@@ -334,7 +343,7 @@ export default {
     /** 打开对话框 */
     openDialog(row_id, detail_mode) {
       this.renderDialog = true;
-      
+
       this.$nextTick(() => {
         // console.log("init dialog", row_id, detail_mode);
         this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="car-detail">
+    Car Detail
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CarDetailTag",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="order-detail">
+    Order Detail
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OrderDetailTag",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="suborder-detail">
+    Sub Order Detail
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SuborderDetailTag",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="tray-detail">
+    Tary Detail
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TrayDetailTag",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped></style>