add ListSectionWithHead & 拆分组件

2023-03-09 10:43:53 +08:00
parent 3709d3a29f
commit faa1daa343
5 changed files with 350 additions and 70 deletions
--- a/src/views/modules/pms/order/components/BaseSearchForm.vue
+++ b/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;
-  margin-bottom: 12px;
+  height: 24px;
+  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>
--- a/src/views/modules/pms/order/components/ListSectionWithHead.vue
+++ b/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>
--- a/src/views/modules/pms/order/components/ListViewWithHead.vue
+++ b/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;
--- a/src/views/modules/pms/order/config.js
+++ b/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: '确认订单' },
-      { name: 'edit' },
-      { name: 'move-up', label: '上移', icon: 'caret-top' },
-      { name: 'move-down', label: '下移', icon: 'caret-bottom' },
-      { name: 'move-to-top', label: '移至顶部', icon: 'upload2' },
-      { name: 'move-to-bottom', label: '移至底部', icon: 'download' },
-      // { name: 'move-to-top', label: 'to top' },
-      // { name: 'move-up', label: 'up' },
-      // { name: 'move-down', label: 'down' },
-      // { name: 'move-to-bottom', label: 'to bottom' },
-      { name: 'delete' },
-
+      'edit',
+      { name: 'confirm-order', label: '确认订单', icon: 'success', showText: true },
+      { name: 'move-up', label: '上移', icon: 'caret-top', showText: true },
+      { name: 'move-down', label: '下移', icon: 'caret-bottom', showText: true },
+      { name: 'move-to-top', label: '至顶', icon: 'upload2', showText: true },
+      { name: 'move-to-bottom', label: '至底', icon: 'download', showText: true },
+      '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
-      },
+      }
    ];


--- a/src/views/modules/pms/order/index.vue
+++ b/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>