add ListSectionWithHead & 拆分组件

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

@@ -1,6 +1,6 @@
 <template>
   <div class="base-search-form">
-    <div class="brand-color-line"><span style="">{{ headTitle }}</span></div>
+    <div class="brand-color-line"><span style="font-size: 20px;">{{ headTitle }}</span></div>
 
     <div class="actual-form">
       <el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
@@ -165,8 +165,8 @@ export default {
   position: relative;
   /* background: red; */
   /* margin-top: 10px; */
-  height: 20px;
+  height: 24px;
-  margin-bottom: 12px;
+  margin: 16px 0;
 }
 
 .brand-color-line span {
@@ -192,6 +192,6 @@ export default {
 }
 
 .actual-form >>> .el-form-item {
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 </style>

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

@@ -0,0 +1,252 @@
+<!-- 
+/**
+ * 说明：表格页加上搜索条件 - <物料管理>模块的定制化版本
+ * 
+ **/ 
+-->
+<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"
+    />
+
+    <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>
+  </section>
+</template>
+
+<script>
+import BaseListTable from "./BaseListTable.vue";
+import BaseSearchForm from "./BaseSearchForm.vue";
+import DialogWithMenu from "@/components/DialogWithMenu.vue";
+import DialogJustForm from "./DialogJustForm.vue";
+import moment from "moment";
+
+const DIALOG_WITH_MENU = "DialogWithMenu";
+const DIALOG_JUST_FORM = "DialogJustForm";
+const dictList = JSON.parse(localStorage.getItem("dictList"));
+
+export default {
+  name: "ListSectionWithHead",
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
+  props: {
+    headConfig: {
+      type: Object,
+      default: () => ({
+        title: "",
+        form: null,
+      }),
+    },
+    tableConfig: {
+      type: Object,
+      default: () => ({
+        table: null,
+        column: null,
+      }),
+    },
+    dialogConfig: {
+      type: Object,
+      default: null,
+    },
+    pageUrl: {
+      type: String,
+      default: "#",
+    },
+    extraSearchConditions: {
+      // 除了 limit 和 page 之外的查询参数
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    dialogType() {
+      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
+    },
+  },
+
+  data() {
+    return {
+      refreshLayoutKey: null,
+      DIALOG_WITH_MENU,
+      DIALOG_JUST_FORM,
+      dialogVisible: false,
+      tableLoading: false,
+      params: {}, // 由 search form 生成的查询条件
+      listQuery: {
+        limit: 20,
+        page: 1,
+      },
+      conditions: {
+        ongoing: {
+          limit: 20,
+          code: "",
+          page: 1,
+        },
+        pending: {
+          limit: 20,
+          page: 1,
+        },
+        finished: {
+          limit: 20,
+          page: 1,
+        },
+      },
+      dataList: [],
+      totalPage: 0,
+    };
+  },
+  mounted() {
+    this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions));
+  },
+  activated() {
+    this.refreshLayoutKey = this.layoutTable();
+  },
+  methods: {
+    getAList(payload) {
+      if (this.pageUrl != "#") {
+        this.tableLoading = true;
+        this.$http.post(this.pageUrl, payload).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.tableLoading = false;
+        });
+      } else {
+        this.$message({
+          message: "请检查page url",
+          type: "error",
+          duration: 1500,
+        });
+      }
+    },
+
+    layoutTable() {
+      return Math.random();
+    },
+
+    /** 处理 表格操作 */
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+      // 编辑、删除、跳转路由、打开弹窗（动态component）都可以在配置里加上 url
+      // payload: { type: string, data: string | number | object }
+      switch (type) {
+        case "delete": {
+          // 确认是否删除
+          return this.$confirm(`确定要删除 "${data.name}" 吗?`, "提示", {
+            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}`],
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+                  // 获取数据
+                  this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          this.openDialog(data); /** data is ==> id */
+          break;
+        }
+        case "view":
+        case "view-detail-action": {
+          this.openDialog(data, true);
+          break;
+        }
+      }
+    },
+
+    handleRefreshDatalist() {
+      location.reload();
+    },
+
+    handleBtnClick({ btnName, payload }) {
+      switch (btnName) {
+        case "查询": {
+          this.params = Object.assign({}, payload);
+          console.log("this.params", this.params);
+          if ("timerange" in payload) {
+            // 处理时间段
+            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");
+            }
+            delete this.params.timerange;
+          }
+          // 发起请求
+          this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+        }
+        case "新增":
+          break;
+      }
+    },
+
+    /** 导航器的操作 */
+    handleSizeChange(newSize) {
+      this.listQuery.page = 1;
+      this.listQuery.limit = newSize;
+      this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+    },
+
+    handlePageChange(newPage) {
+      this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
+    },
+
+    /** 打开对话框 */
+    openDialog(row_id, detail_mode) {
+      this.dialogVisible = true;
+
+      this.$nextTick(() => {
+        // this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+section {
+  padding: 16px;
+  padding-bottom: 3.125rem;
+}
+
+section:not(:last-of-type) {
+  /* margin-bottom: 1rem; */
+  border-bottom: 1px solid #f1e3d5;
+}
+</style>

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

@@ -5,7 +5,7 @@
  **/ 
 -->
 <template>
-  <div class="list-view-with-head">
+  <div class="">
     <section class="ongoing-order" id="ongoing">
       <BaseSearchForm
         head-title="进行中的订单"
@@ -500,50 +500,7 @@ export default {
 </script>
 
 <style scoped>
-.main-container {
+ 
-  min-height: inherit;
-  display: flex;
-}
-
-.inner-sidebar {
-  position: fixed;
-  width: 240px;
-  margin-right: 16px;
-  padding: 8px 0;
-  /* min-height: inherit; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.inner-sidebar a {
-  text-decoration: unset;
-  color: #777c;
-  padding: 12px;
-  width: 100%;
-  text-align: center;
-}
-
-.inner-sidebar a.active,
-.inner-sidebar a:hover {
-  background-color: #f5f7fa;
-  color: #000;
-}
-
-.inner-sidebar,
-.list-view-with-head {
-  background: white;
-  /* height: 100%; */
-  /* min-height: inherit; */
-  border-radius: 6px;
-  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
-}
-
-.list-view-with-head {
-  width: 1px;
-  margin-left: 256px;
-  flex-grow: 1;
-}
 
 section {
   padding: 16px;

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

@@ -32,21 +32,16 @@ export default function () {
       { name: 'destroy-order', label: '废除', icon: 'delete-solid', showText: true },
     ],
     'pending': [
-      { name: 'confirm-order', label: '确认订单' },
+      'edit',
-      { name: 'edit' },
+      { name: 'confirm-order', label: '确认订单', icon: 'success', showText: true },
-      { name: 'move-up', label: '上移', icon: 'caret-top' },
+      { name: 'move-up', label: '上移', icon: 'caret-top', showText: true },
-      { name: 'move-down', label: '下移', icon: 'caret-bottom' },
+      { name: 'move-down', label: '下移', icon: 'caret-bottom', showText: true },
-      { name: 'move-to-top', label: '移至顶部', icon: 'upload2' },
+      { name: 'move-to-top', label: '至顶', icon: 'upload2', showText: true },
-      { name: 'move-to-bottom', label: '移至底部', icon: 'download' },
+      { name: 'move-to-bottom', label: '至底', icon: 'download', showText: true },
-      // { name: 'move-to-top', label: 'to top' },
+      'delete'
-      // { name: 'move-up', label: 'up' },
-      // { name: 'move-down', label: 'down' },
-      // { name: 'move-to-bottom', label: 'to bottom' },
-      { name: 'delete' },
-
     ],
     'finished': [
-      // { name: 'view-detail', label: '查看详情' }
+      { name: 'end-order', label: '结束订单', icon: 'error', showText: true },
     ]
   }
 
@@ -88,7 +83,7 @@ export default function () {
         subcomponent: TableOperaionComponent,
         options: operations[type],
         width: operations[type].length * 64
-      },
+      }
     ];
 
 

src/views/modules/pms/order/index.vue

@@ -6,7 +6,33 @@
       <a href="#finished" :class="{ active: activeTable === '#finished' }">完成订单</a>
     </div>
 
-    <ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" />
+    <div class="list-view-with-head-list">
+      <!-- <ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" /> -->
+      <ListSectionWithHead
+        id="ongoing"
+        :extra-search-conditions="{ code: '' }"
+        :page-url="allUrls.confirmedOrder"
+        :table-config="{ table: null, column: tableConfigs.ongoingTable }"
+        :head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }"
+        :dialog-config="null"
+      />
+      <ListSectionWithHead
+        id="pending"
+        :extra-search-conditions="{ code: '' }"
+        :page-url="allUrls.unConfirmedOrder"
+        :table-config="{ table: null, column: tableConfigs.pendingTable }"
+        :head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }"
+        :dialog-config="null"
+      />
+      <ListSectionWithHead
+        id="finished"
+        :extra-search-conditions="{ code: '' }"
+        :page-url="allUrls.finishedOrder"
+        :table-config="{ table: null, column: tableConfigs.finishedTable }"
+        :head-config="{ title: '完成的订单', form: headFormConfigs.finishedTableSearch }"
+        :dialog-config="null"
+      />
+    </div>
   </div>
 
   <!-- <div style="padding: 16px; background: #fff; border-radius: 8px">
@@ -27,10 +53,10 @@
 <script>
 import initConfig from "./config";
 import ListViewWithHead from "./components/ListViewWithHead.vue";
-
+import ListSectionWithHead from "./components/ListSectionWithHead.vue";
 export default {
   name: "OrderView",
-  components: { ListViewWithHead },
+  components: { ListViewWithHead, ListSectionWithHead },
   provide() {
     return {
       urls: this.allUrls,
@@ -43,6 +69,7 @@ export default {
       headFormConfigs,
       allUrls: urls,
       dialogConfigs,
+      activeTable: "",
     };
     // return {
     //   dataList: [
@@ -57,12 +84,16 @@ export default {
   },
   created() {},
   mounted() {},
+  watch: {
+    $route: function (route) {
+      if (route.hash) {
+        this.activeTable = route.hash;
+      }
+    },
+  },
   methods: {
     handleUp({ $index, row }) {
       console.log("row: ", $index, row);
-      // const { id } = row;
-      // const index = this.dataList.findIndex((o) => o.id === id);
-      // console.log("index: ", index);
       if ($index === 0) return;
       const [item] = this.dataList.splice($index, 1);
       console.log("item: ", item);
@@ -80,4 +111,49 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.main-container {
+  min-height: inherit;
+  display: flex;
+}
+
+.inner-sidebar {
+  position: fixed;
+  width: 240px;
+  margin-right: 16px;
+  padding: 8px 0;
+  /* min-height: inherit; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inner-sidebar a {
+  text-decoration: unset;
+  color: #777c;
+  padding: 12px;
+  width: 100%;
+  text-align: center;
+}
+
+.inner-sidebar a.active,
+.inner-sidebar a:hover {
+  background-color: #f5f7fa;
+  color: #000;
+}
+
+.inner-sidebar,
+.list-view-with-head-list {
+  background: white;
+  /* height: 100%; */
+  /* min-height: inherit; */
+  border-radius: 6px;
+  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
+}
+
+.list-view-with-head-list {
+  width: 1px;
+  margin-left: 256px;
+  flex-grow: 1;
+}
+</style>