update order

src/router/index.js

@@ -73,7 +73,7 @@ export function addDynamicRoute (routeParams, router) {
 }
 
 const router = new Router({
-  mode: 'hash',
+  mode: 'history',
   scrollBehavior: () => ({ y: 0 }),
   routes: pageRoutes.concat(moduleRoutes)
 })

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="base-search-form">
+    <div class="brand-color-line"><span style="">{{ headTitle }}</span></div>
+
+    <div class="actual-form">
+      <el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
+        <!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
+        <el-form-item
+          v-for="(opt, index) in headConfig.fields"
+          :key="opt.prop"
+          :label="opt.label ? opt.label : null"
+          :prop="opt.prop ?? '' + index"
+          :rules="opt.bind?.rules ? opt.bind.rules : undefined"
+        >
+          <el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
+          <el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small">
+            <el-option v-for="item in opt.select" :key="item.value + Math.random().toString()" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
+          <el-upload
+            v-if="opt.upload"
+            size="small"
+            :key="'upload_' + Math.random().toString()"
+            class="inline-block pl-3"
+            action="https://jsonplaceholder.typicode.com/posts/"
+          >
+            <el-button type="primary">上传文件</el-button>
+          </el-upload>
+          <el-button
+            v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
+            :key="'button' + Math.random().toString()"
+            size="small"
+            :type="opt.button.type"
+            v-bind="opt.bind"
+            @click="handleBtnClick(opt.button.name)"
+            >{{ opt.button.name }}</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseSearchForm",
+  props: {
+    headConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+    headTitle: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dataForm: {},
+    };
+  },
+
+  // 这个 watch 出现得没啥必要......
+  // watch: {
+  //   dataForm: {
+  //     handler: (val) => {
+  //       console.log("[BaseSearchForm::watcher::dataForm]", val);
+  //     },
+  //     deep: true,
+  //   },
+  // },
+
+  created() {},
+  mounted() {
+    console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
+
+    this.headConfig.fields.forEach((field, index) => {
+      // 没有 field.prop ，则为按钮之类的
+      if (!field.prop) return;
+
+      if (!this.dataForm[field.prop]) {
+        this.$set(this.dataForm, field.prop, null);
+      }
+
+      if (field.default) {
+        // default 必须有个 value 属性！哪怕是 input 输入框
+        this.dataForm[field.prop] = field.default.value;
+      }
+
+      // 更新选项列表
+      if (!field.watch && field.fn && typeof field.fn === "function") {
+        const optionLabel = field.fieldOptionLabel;
+        const optionValue = field.fieldOptionValue;
+        // 设置自身的选项列表
+        field.fn().then(({ data: res }) => {
+          if (res.code === 0 && res.data) {
+            // TODO: 此处需要随具体情况再做更新
+            if ("list" in res.data) {
+              this.$set(
+                field,
+                "select",
+                res.data.list.map((item) => ({
+                  label: optionLabel ? item[optionLabel] : item.name,
+                  value: optionValue ? item[optionValue] : item.id,
+                }))
+              );
+            }
+          } else {
+            this.$message({
+              message: `${field.label} 数据获取出错: ${res.code} - ${res.msg}`,
+              type: "error",
+              duration: 1500,
+            });
+          }
+        });
+      }
+
+      // 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
+      // TODO: 此处也需要修改，碰到具体业务需求才更新...
+      if (field.watch) {
+        // const { index: innerIdx, condition } = field.watch;
+        // console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
+        // // 设置监听器
+        // this.$watch(
+        //   () => this.searchForm[innerIdx],
+        //   (val) => {
+        //     const queryParams = { [condition]: val };
+        //     // field.watch.condition.forEach(c => {
+        //     // 	queryParams
+        //     // })
+        //     this.$http(field.url, queryParams).then((res) => {
+        //       console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
+        //       // 此处是外部的 index
+        //       this.searchForm[index] = Math.floor(Math.random() * 10);
+        //     });
+        //   }
+        // );
+        // console.log("[BaseSearchForm] mounted(): ", this.searchForm);
+        // // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
+        // if (this.searchForm[innerIdx]) {
+        //   // TODO: 这个判断好像不太需要...
+        //   console.log("TODO: 这个判断好像不太需要...");
+        // } else {
+        //   console.log("TODO: 监听的字段还没来得及设置值呢...");
+        // }
+      }
+    });
+  },
+  methods: {
+    handleBtnClick(name) {
+      this.$emit("btn-click", { btnName: name, payload: this.dataForm });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.base-search-form {
+  /* display: flex; */
+  /* align-items: center; */
+  /* position: relative; */
+}
+
+.brand-color-line {
+  position: relative;
+  /* background: red; */
+  /* margin-top: 10px; */
+  height: 20px;
+  margin-bottom: 12px;
+}
+
+.brand-color-line span {
+  display: inline-block;
+  height: 100%;
+  padding: 2px 0;
+  margin-left: 14px;
+  line-height: 1;
+}
+
+.brand-color-line::before {
+  display: inline-block;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  border-radius: 2px;
+  background: #0b58ff;
+  /* margin-right: 8px; */
+  /* position: absolute; */
+}
+
+.actual-form >>> .el-form-item {
+  margin-bottom: 8px;
+}
+</style>

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

@@ -5,17 +5,20 @@
  **/ 
 -->
 <template>
+  <div class="main-container">
+    <div class="inner-sidebar">
+      <a href="#ongoing" :class="{ active: activeTable === '#ongoing' }">进行中的订单</a>
+      <a href="#pending" :class="{ active: activeTable === '#pending' }">等待订单</a>
+      <a href="#finished" :class="{ active: activeTable === '#finished' }">完成订单</a>
+    </div>
+
     <div class="list-view-with-head">
-    <!-- TODO: delete these demo links  -->
-    <ul>
-      <li><a href="#ongoing">ongoing</a></li>
-      <li><a href="#pending">pending</a></li>
-      <li><a href="#finished">finished</a></li>
-    </ul>
-
-
       <section class="ongoing-order" id="ongoing">
-      <BaseSearchForm :head-config="{ fields: headConfigs.ongoingTableSearch }" @btn-click="handleBtnClick('ongoing', $event)" />
+        <BaseSearchForm
+          head-title="进行中的订单"
+          :head-config="{ fields: headConfigs.ongoingTableSearch }"
+          @btn-click="handleBtnClick('ongoing', $event)"
+        />
         <BaseListTable
           key="confirmed"
           v-loading="tableLoading"
@@ -40,7 +43,11 @@
       </section>
 
       <section class="pending-order" id="pending">
-      <BaseSearchForm :head-config="{ fields: headConfigs.pendingTableSearch }" @btn-click="handleBtnClick('pending', $event)" />
+        <BaseSearchForm
+          head-title="等待中的订单"
+          :head-config="{ fields: headConfigs.pendingTableSearch }"
+          @btn-click="handleBtnClick('pending', $event)"
+        />
         <BaseListTable
           key="unconfirmed"
           v-loading="tableLoading"
@@ -64,7 +71,11 @@
       </section>
 
       <section class="finished-order" id="finished">
-      <BaseSearchForm :head-config="{ fields: headConfigs.finishedTableSearch }" @btn-click="handleBtnClick('finished', $event)" />
+        <BaseSearchForm
+          head-title="已完成订单"
+          :head-config="{ fields: headConfigs.finishedTableSearch }"
+          @btn-click="handleBtnClick('finished', $event)"
+        />
         <BaseListTable
           key="ended"
           v-loading="tableLoading"
@@ -105,11 +116,12 @@
       @refreshDataList="handleRefreshDatalist"
     /> -->
     </div>
+  </div>
 </template>
 
 <script>
 import BaseListTable from "./BaseListTable.vue";
-import BaseSearchForm from "@/components/BaseSearchForm.vue";
+import BaseSearchForm from "./BaseSearchForm.vue";
 import DialogWithMenu from "@/components/DialogWithMenu.vue";
 import DialogJustForm from "./DialogJustForm.vue";
 
@@ -154,8 +166,17 @@ export default {
       return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
     },
   },
+  watch: {
+    $route: function (route) {
+      if (route.hash) {
+        console.log("acitive hash", route.hash);
+        this.activeTable = route.hash;
+      }
+    },
+  },
   data() {
     return {
+      activeTable: "",
       refreshLayoutKey: null,
       DIALOG_WITH_MENU,
       DIALOG_JUST_FORM,
@@ -459,14 +480,51 @@ 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;
+  /* 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;
   padding-bottom: 3.125rem;