add 导入订单弹窗

.prettierrc

@@ -1,3 +1,7 @@
 {
-  "printWidth": 150
+  "printWidth": 120,
+  "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "semi": true,
+  "trailingComma": "es5"
 }

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 上的配置项

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();
   },

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>

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 }"
+    <BaseSearchForm
-      @btn-click="handleBtnClick" />
+      :id="$attrs.id"
-    <BaseListTable :key="headConfig.title" v-loading="tableLoading" :table-config="tableConfig.table"
+      :head-title="headConfig.title"
-      :column-config="tableConfig.column" :table-data="dataList" @operate-event="handleOperate"
+      :head-config="{ fields: headConfig.form }"
-      :refresh-layout-key="refreshLayoutKey" />
+      @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"
+    <el-pagination
-      :page-sizes="[1, 5, 10, 20]" :page-size="listQuery.limit" :total="totalPage"
+      @size-change="handleSizeChange"
-      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      @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"
+    <DialogJustForm
-      @destroy-dialog="renderDialog = false" />
+      modal-append-to-body
-    <DialogWithMenu modal-append-to-body ref="menu-dialog" v-if="renderMenuDialog" fullscreen :configs="dialogConfig"
+      ref="order-dialog"
-      @destroy-dialog="renderMenuDialog = false" />
+      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
+              return this.$http.post("/pms/order/confirm", data, {
-                .post("/pms/order/confirm", data, {
+                headers: {
-                  headers: {
+                  "Content-Type": "application/json",
-                    "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' ? '结束订单' : '废除订单'}?`, "提示", {
+          this.$confirm(
-            confirmButtonText: "确定",
+            `确定${type === "end-order" ? "结束订单" : "废除订单"}?`,
-            cancelButtonText: "取消",
+            "提示",
-            type: "warning",
+            {
-          })
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            }
+          )
             .then(() => {
-              return this.$http
+              return this.$http.post("/pms/order/end", data, {
-                .post("/pms/order/end", data, {
+                headers: {
-                  headers: {
+                  "Content-Type": "application/json",
-                    "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}" 吗?`, "提示", {
+          return this.$confirm(
-            confirmButtonText: "确认",
+            `确定要删除 "${data.code ?? data.id}" 吗?`,
-            cancelButtonText: "我再想想",
+            "提示",
-            type: "warning",
+            {
-          })
+              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.startTime = moment(startTime).format(
-              this.params.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss");
+                "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);
       });