add 导入订单弹窗

2023-04-10 15:47:02 +08:00 · 2023-04-10 15:47:02 +08:00 · 99b054ab39
commit 99b054ab39
parent 0caaab8df3
5 changed files with 311 additions and 87 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1,3 +1,7 @@
 {
-  "printWidth": 150
+  "printWidth": 120,
+  "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "semi": true,
+  "trailingComma": "es5"
 }
--- a/src/views/modules/pms/finishedOrder/config.js
+++ b/src/views/modules/pms/finishedOrder/config.js
@ -125,34 +125,9 @@ export default function () {
    },
  };

-  const carPayloadDialogConfigs = {
-    dialogWidth: '70%',
-    carPayloadDialog: true,
-    clickModalToClose: true,
-    tableConfig: {
-      table: null,
-      column: [
-        // 窑车的 装载详情
-        // tableProps
-        { 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: "废砖数" },
-        // { prop: "startTime", label: "开始时间" },
-        // { prop: "endTime", label: "结束时间" },
-        // { prop: "remark", label: "备注" },
-      ],
-    },
-  };
-


  return {
-    carPayloadDialogConfigs,
    dialogConfigs: dialogJustFormConfigs,
    tableConfig: {
      table: null, // 此处可省略，el-table 上的配置项
--- a/src/views/modules/pms/finishedOrder/index.vue
+++ b/src/views/modules/pms/finishedOrder/index.vue
@ -9,7 +9,6 @@
    ]"
    :trigger-update="triggerUpdateKey"
  /> 
-  <!-- :car-payload-dialog-configs="carPayloadDialogConfigs" -->
 </template>

 <script>
@ -17,7 +16,7 @@ import initConfig from "./config";
 import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue";

 export default {
-  name: "currentCarLocationView",
+  name: "FinishedOrderView",
  components: { ListViewWithHead },
  provide() {
    return {
@ -25,19 +24,15 @@ export default {
    };
  },
  data() {
-    const { tableConfig, headFormConfigs, urls, carPayloadDialogConfigs, dialogConfigs } = initConfig.call(this);
+    const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
    return {
      tableConfig,
-      carPayloadDialogConfigs,
      headFormConfigs,
      allUrls: urls,
      dialogConfigs,
      triggerUpdateKey: "",
    };
  },
-  created() {},
-  mounted() {},
-  methods: {},
  activated() {
    this.triggerUpdateKey = Math.random().toString();
  },
--- a/src/views/modules/pms/order/components/DialogUpload.vue
+++ b/src/views/modules/pms/order/components/DialogUpload.vue
@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    class="dialog-just-form"
+    :visible="visible"
+    @close="handleClose"
+    width="30%"
+    title="导入订单"
+    :destroy-on-close="false"
+    :close-on-click-modal="configs.clickModalToClose ?? true">
+    <el-upload style="margin-top: 24px; text-align: center" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
+      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+    </el-upload>
+
+    <!-- footer  -->
+    <div slot="footer">
+      <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";
+
+export default {
+  name: "DialogUpload",
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({
+        clickModalToClose: true,
+        forms: null,
+      }),
+    },
+  },
+  inject: ["urls"],
+  data() {
+    return {
+      loadingStatus: false,
+      visible: false,
+    };
+  },
+  computed: {
+    uploadHeaders() {
+      return {
+        token: Cookies.get("token") || "",
+      };
+    },
+  },
+  methods: {
+    init(data) {
+      this.visible = true;
+    },
+
+    /** handlers */
+    handleSelectChange(col, eventValue) {
+      // console.log("[dialog] select change: ", col, eventValue);
+      this.$forceUpdate();
+    },
+
+    handleComponentModelUpdate(propName, { subject, payload: { data } }) {
+      this.dataForm[propName] = JSON.stringify(data);
+      // console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
+    },
+
+    handleUpload() {},
+
+    handleBtnClick(payload) {
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+        }
+      }
+    },
+
+    handleUploadChange(file, fileList) {
+      // console.log("[Upload] handleUploadChange...", file, fileList);
+    },
+
+    handleClose() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.$emit("destroy-dialog");
+        // 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;
+}
+
+.el-select,
+.el-cascader,
+.el-date-editor {
+  width: 100% !important;
+}
+
+.dialog-just-form >>> .el-dialog__header {
+  padding: 10px 20px 10px;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+
+.h0 {
+  height: 0;
+  width: 0;
+}
+
+.dialog-just-form >>> .dialog-demo {
+  text-align: center;
+}
+
+
+</style>
--- a/src/views/modules/pms/order/components/ListSectionWithHead.vue
+++ b/src/views/modules/pms/order/components/ListSectionWithHead.vue
@ -6,20 +6,55 @@
 -->
 <template>
  <section class="list-section-with-head">
-    <BaseSearchForm :id="$attrs.id" :head-title="headConfig.title" :head-config="{ fields: headConfig.form }"
-      @btn-click="handleBtnClick" />
-    <BaseListTable :key="headConfig.title" v-loading="tableLoading" :table-config="tableConfig.table"
-      :column-config="tableConfig.column" :table-data="dataList" @operate-event="handleOperate"
-      :refresh-layout-key="refreshLayoutKey" />
+    <BaseSearchForm
+      :id="$attrs.id"
+      :head-title="headConfig.title"
+      :head-config="{ fields: headConfig.form }"
+      @btn-click="handleBtnClick"
+    />
+    <BaseListTable
+      :key="headConfig.title"
+      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"></el-pagination>
+    <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>

-    <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" v-if="renderMenuDialog" fullscreen :configs="dialogConfig"
-      @destroy-dialog="renderMenuDialog = false" />
+    <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"
+      v-if="renderMenuDialog"
+      fullscreen
+      :configs="dialogConfig"
+      @destroy-dialog="renderMenuDialog = false"
+    />
+
+    <DialogUpload
+      ref="uploadDialog"
+      v-if="uploadDialogVisible"
+      @destroy-dialog="uploadDialogVisible = false"
+    />
  </section>
 </template>

@ -28,12 +63,13 @@ import BaseListTable from "./BaseListTable.vue";
 import BaseSearchForm from "./BaseSearchForm.vue";
 import DialogJustForm from "./DialogJustForm.vue";
 import DialogWithMenu from "./DialogWithMenu.vue";
+import DialogUpload from "./DialogUpload.vue";
 import moment from "moment";

-const dictList = JSON.parse(localStorage.getItem("dictList"));
+// const dictList = JSON.parse(localStorage.getItem("dictList"));
 export default {
  name: "ListSectionWithHead",
-  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogUpload },
  props: {
    headConfig: {
      type: Object,
@ -75,7 +111,14 @@ export default {
  watch: {
    refreshKey(newVal) {
      // 外部触发更新列表
-      this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+      this.getAList(
+        Object.assign(
+          {},
+          this.listQuery,
+          this.extraSearchConditions,
+          this.params
+        )
+      );
    },
  },
  data() {
@ -92,10 +135,13 @@ export default {
      totalPage: 0,
      renderDialog: false,
      renderMenuDialog: false,
+      uploadDialogVisible: false,
    };
  },
  mounted() {
-    this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions));
+    this.getAList(
+      Object.assign({}, this.listQuery, this.extraSearchConditions)
+    );
  },
  activated() {
    this.refreshLayoutKey = this.layoutTable();
@ -142,19 +188,17 @@ export default {
      switch (type) {
        // 确认订单
        case "confirm-order": {
-
          this.$confirm(`是否要确认订单?`, "提示", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            type: "warning",
          })
            .then(() => {
-              return this.$http
-                .post("/pms/order/confirm", data, {
-                  headers: {
-                    "Content-Type": "application/json",
-                  },
-                })
+              return this.$http.post("/pms/order/confirm", data, {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              });
            })
            .then(({ data: res }) => {
              if (res.code === 0) {
@ -164,7 +208,14 @@ export default {
                  type: "success",
                  duration: 2000,
                  onClose: () => {
-                    this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+                    this.getAList(
+                      Object.assign(
+                        {},
+                        this.listQuery,
+                        this.extraSearchConditions,
+                        this.params
+                      )
+                    );
                    this.$emit("refresh-tables", ["ongoing"]);
                  },
                });
@ -186,18 +237,21 @@ export default {
        case "destroy-order":
        // 结束订单
        case "end-order": {
-          this.$confirm(`确定${type === 'end-order' ? '结束订单' : '废除订单'}?`, "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          })
+          this.$confirm(
+            `确定${type === "end-order" ? "结束订单" : "废除订单"}?`,
+            "提示",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            }
+          )
            .then(() => {
-              return this.$http
-                .post("/pms/order/end", data, {
-                  headers: {
-                    "Content-Type": "application/json",
-                  },
-                })
+              return this.$http.post("/pms/order/end", data, {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              });
            })
            .then(({ data: res }) => {
              if (res.code === 0) {
@ -207,7 +261,14 @@ export default {
                  type: "success",
                  duration: 2000,
                  onClose: () => {
-                    this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+                    this.getAList(
+                      Object.assign(
+                        {},
+                        this.listQuery,
+                        this.extraSearchConditions,
+                        this.params
+                      )
+                    );
                    this.$emit("refresh-tables", ["finished"]);
                  },
                });
@ -241,11 +302,20 @@ export default {
          };

          return this.$http
-            .get("/pms/order/change", { params: { id: data, location: locationMap[type] } })
+            .get("/pms/order/change", {
+              params: { id: data, location: locationMap[type] },
+            })
            .then(({ data: res }) => {
              if (res.code === 0) {
                // success
-                this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+                this.getAList(
+                  Object.assign(
+                    {},
+                    this.listQuery,
+                    this.extraSearchConditions,
+                    this.params
+                  )
+                );
              } else {
                // failed
                throw new Error(res.msg);
@ -261,11 +331,15 @@ export default {
        }
        case "delete": {
          // 确认是否删除
-          return this.$confirm(`确定要删除 "${data.code ?? data.id}" 吗?`, "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "我再想想",
-            type: "warning",
-          })
+          return this.$confirm(
+            `确定要删除 "${data.code ?? data.id}" 吗?`,
+            "提示",
+            {
+              confirmButtonText: "确认",
+              cancelButtonText: "我再想想",
+              type: "warning",
+            }
+          )
            .then(() => {
              // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
              this.$http({
@ -276,11 +350,18 @@ export default {
                if (res.code === 0) {
                  this.$message.success("删除成功!");
                  // 获取数据
-                  this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+                  this.getAList(
+                    Object.assign(
+                      {},
+                      this.listQuery,
+                      this.extraSearchConditions,
+                      this.params
+                    )
+                  );
                }
              });
            })
-            .catch((err) => { });
+            .catch((err) => {});
        }
        case "edit": {
          this.openDialog(data); /** data is ==> id */
@ -292,7 +373,7 @@ export default {
          break;
        }
        case "view-ongoing": {
-          console.log('view-ongoing', data)
+          console.log("view-ongoing", data);
          this.openMenuDialog(data, false);
          break;
        }
@ -304,6 +385,8 @@ export default {
    },

    handleBtnClick({ btnName, payload }) {
+      console.log("SearchForm", btnName, payload);
+
      switch (btnName) {
        case "查询": {
          this.params = Object.assign({}, payload);
@ -312,30 +395,66 @@ export default {
            // 处理时间段
            if (!!payload.timerange) {
              const [startTime, endTime] = payload["timerange"];
-              this.params.startTime = moment(startTime).format("YYYY-MM-DDTHH:mm:ss");
-              this.params.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss");
+              this.params.startTime = moment(startTime).format(
+                "YYYY-MM-DDTHH:mm:ss"
+              );
+              this.params.endTime = moment(endTime).format(
+                "YYYY-MM-DDTHH:mm:ss"
+              );
            }
            delete this.params.timerange;
          }
          // 发起请求
-          this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+          this.getAList(
+            Object.assign(
+              {},
+              this.listQuery,
+              this.extraSearchConditions,
+              this.params
+            )
+          );
          break;
        }
        case "新增":
          this.openDialog();
          break;
+        case "导入订单":
+          this.showUploadDialog(payload);
+          // alert('/pms/order/importExcelOrder');
+          break;
      }
    },

+    showUploadDialog(data) {
+      this.uploadDialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs.uploadDialog.init(data);
+      });
+    },
+
    /** 导航器的操作 */
    handleSizeChange(newSize) {
      this.listQuery.page = 1;
      this.listQuery.limit = newSize;
-      this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+      this.getAList(
+        Object.assign(
+          {},
+          this.listQuery,
+          this.extraSearchConditions,
+          this.params
+        )
+      );
    },

    handlePageChange(newPage) {
-      this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+      this.getAList(
+        Object.assign(
+          {},
+          this.listQuery,
+          this.extraSearchConditions,
+          this.params
+        )
+      );
    },

    /** 打开对话框 */
@ -344,13 +463,16 @@ export default {

      this.$nextTick(() => {
        // console.log("init dialog", row_id, detail_mode);
-        this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);
+        this.$refs["order-dialog"].init(
+          /** some args... */ row_id,
+          detail_mode
+        );
      });
    },

    openMenuDialog(row, detail) {
      this.renderMenuDialog = true;
-      console.log("this.renderMenuDialog = true;", row, detail)
+      console.log("this.renderMenuDialog = true;", row, detail);
      this.$nextTick(() => {
        this.$refs["menu-dialog"].init(/** some args... */ row, detail);
      });