update style

src/App.vue

@@ -35,7 +35,8 @@ export default {
 
 <style>
 ::-webkit-scrollbar {
-	width: 12px !important;
+	width: 8px !important;
+	height: 8px !important;
 }
 
 ::-webkit-scrollbar-track {
@@ -43,7 +44,10 @@ export default {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgb(188, 188, 188);
+	height: 8px !important;
+	width: 8px !important;
+  background: rgba(200, 200, 200, 0.6);
+	border-radius: 4px !important;
 }
 
 ::-webkit-scrollbar-button {

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

@@ -6,61 +6,89 @@
 -->
 <template>
   <div class="list-view-with-head">
-    <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
-    <BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
-
-    <BaseListTable
-      key="confirmed"
-      v-loading="tableLoading"
-      :table-config="null"
-      :column-config="tableConfigs.ongoingTable"
-      :table-data="dataList"
-      @operate-event="handleOperate"
-      @load-sub="handleLoadSub"
-      :refresh-layout-key="refreshLayoutKey"
-    />
-    
-    <br>
-    <hr>
-    <br>
-
-    <BaseListTable
-      key="ended"
-      v-loading="tableLoading"
-      :table-config="null"
-      :column-config="tableConfigs.finishedTable"
-      :table-data="dataList"
-      @operate-event="handleOperate"
-      @load-sub="handleLoadSub"
-      :refresh-layout-key="refreshLayoutKey"
-    />
-    <br>
-    <hr>
-    <br>
-
-    <BaseListTable
-      key="unconfirmed"
-      v-loading="tableLoading"
-      :table-config="null"
-      :column-config="tableConfigs.pendingTable"
-      :table-data="dataList"
-      @operate-event="handleOperate"
-      @load-sub="handleLoadSub"
-      :refresh-layout-key="refreshLayoutKey"
-    />
+    <!-- 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)" />
+      <BaseListTable
+        key="confirmed"
+        v-loading="tableLoading"
+        :table-config="null"
+        :column-config="tableConfigs.ongoingTable"
+        :table-data="dataList"
+        @operate-event="handleOperate"
+        @load-sub="handleLoadSub"
+        :refresh-layout-key="refreshLayoutKey"
+      />
+
+      <el-pagination
+        class="mt-5 flex justify-end"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+        :current-page.sync="page"
+        :page-sizes="[1, 5, 10, 20, 50, 100]"
+        :page-size="size"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </section>
+
+    <section class="pending-order" id="pending">
+      <BaseSearchForm :head-config="{ fields: headConfigs.pendingTableSearch }" @btn-click="handleBtnClick('pending', $event)" />
+      <BaseListTable
+        key="unconfirmed"
+        v-loading="tableLoading"
+        :table-config="null"
+        :column-config="tableConfigs.pendingTable"
+        :table-data="dataList"
+        @operate-event="handleOperate"
+        @load-sub="handleLoadSub"
+        :refresh-layout-key="refreshLayoutKey"
+      />
+      <el-pagination
+        class="mt-5 flex justify-end"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+        :current-page.sync="page"
+        :page-sizes="[1, 5, 10, 20, 50, 100]"
+        :page-size="size"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </section>
 
-    <el-pagination
-      class="mt-5 flex justify-end"
-      @size-change="handleSizeChange"
-      @current-change="handlePageChange"
-      :current-page.sync="page"
-      :page-sizes="[1, 5, 10, 20, 50, 100]"
-      :page-size="size"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper"
-    ></el-pagination>
-    <!-- :current-page.sync="currentPage"
+    <section class="finished-order" id="finished">
+      <BaseSearchForm :head-config="{ fields: headConfigs.finishedTableSearch }" @btn-click="handleBtnClick('finished', $event)" />
+      <BaseListTable
+        key="ended"
+        v-loading="tableLoading"
+        :table-config="null"
+        :column-config="tableConfigs.finishedTable"
+        :table-data="dataList"
+        @operate-event="handleOperate"
+        @load-sub="handleLoadSub"
+        :refresh-layout-key="refreshLayoutKey"
+      />
+
+      <el-pagination
+        class="mt-5 flex justify-end"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+        :current-page.sync="page"
+        :page-sizes="[1, 5, 10, 20, 50, 100]"
+        :page-size="size"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+      <!-- :current-page.sync="currentPage"
 			:page-size.sync="pageSize" -->
+    </section>
 
     <!-- <DialogWithMenu
       ref="edit-dialog"
@@ -96,14 +124,18 @@ export default {
     tableConfigs: {
       type: Object,
       default: () => ({
-        ongoingTable: null, 
-        finishedTable: null, 
-        pendingTable: null
-      })
+        ongoingTable: null,
+        finishedTable: null,
+        pendingTable: null,
+      }),
     },
-    headConfig: {
+    headConfigs: {
       type: Object,
-      default: () => ({}),
+      default: () => ({
+        ongoingTableSearch: null,
+        pendingTableSearch: null,
+        finishedTableSearch: null,
+      }),
     },
     /** 请求page接口的时候有些字段是必填的，没有会报500，把相关字段名传入这个prop: */
     listQueryExtra: {
@@ -211,46 +243,48 @@ export default {
   },
   inject: ["urls"],
   mounted() {
-    this.getConfirmedList()
+    this.getConfirmedList();
+    console.log("[list view with head]", this.headConfigs);
   },
   activated() {
     this.refreshLayoutKey = this.layoutTable();
   },
   methods: {
     // get confirmed list
-    getConfirmedList(){
-      this.$http.post(this.urls.confirmedOrder, {
-        bomId: "0",
-        cate: "1",
-        code: "39999",
-        startTime: '2022-02-05T22:00:00',
-        endTime: '2022-02-06T22:00:00',
-        id: "0",
-        limit: 10,
-        page: 1,
-        shapeId: "1",
-        techId: "0",
-        types: 1 // 0 等待 , 1 确认 , 2 生产, 3 暂停, 4 结束， 5 接受, 6 拒绝
-      }).then(({data: res}) => {
-        if (res.code === 0) {
-          console.log('[get confirmed list]', res)
-        } else {
-          this.$message({
-            message: `${res.code}: ${res.msg}`,
-            type: 'error',
-            duration: 1500
-          })
-        }
-      })
+    getConfirmedList() {
+      this.$http
+        .post(this.urls.confirmedOrder, {
+          bomId: "0",
+          cate: "1",
+          code: "39999",
+          startTime: "2022-02-05T22:00:00",
+          endTime: "2022-02-06T22:00:00",
+          id: "0",
+          limit: 10,
+          page: 1,
+          shapeId: "1",
+          techId: "0",
+          types: 1, // 0 等待 , 1 确认 , 2 生产, 3 暂停, 4 结束， 5 接受, 6 拒绝
+        })
+        .then(({ data: res }) => {
+          if (res.code === 0) {
+            console.log("[get confirmed list]", res);
+          } else {
+            this.$message({
+              message: `${res.code}: ${res.msg}`,
+              type: "error",
+              duration: 1500,
+            });
+          }
+        });
     },
     // get unconfirmed list
-    getUnConfirmedList(){},
+    getUnConfirmedList() {},
     // get ended list
-    getEndedList(){
+    getEndedList() {
       // 只有查看详情
-    }, 
-    
-    
+    },
+
     handleLoadSub({ tree, treeNode, resolve }) {
       // console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve);
       this.$http.get(`${this.urls.tree}?rootId=${tree.id}`).then(({ data: res }) => {
@@ -430,7 +464,16 @@ export default {
   /* height: 100%; */
   min-height: inherit;
   border-radius: 6px;
-  padding: 16px;
   box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
 }
+
+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/config.js

@@ -150,9 +150,15 @@ export default function () {
           plain: true
         }
       },
-      
+
     ],
     'finished': [
+      {
+        label: '订单号',
+        prop: 'code',
+        input: true,
+        bind: { placeholder: '请输入订单号' }
+      },
       {
         // 查询
         button: {
@@ -160,88 +166,10 @@ export default function () {
           name: "查询",
         },
       },
-      {
-        label: '订单号',
-        prop: 'code',
-        input: true,
-        bind: { placeholder: '请输入订单号' }
-      },
     ]
   })[type]
 
 
-  // const headFormFields = [
-  //   {
-  //     label: '订单号',
-  //     prop: 'code',
-  //     input: true,
-  //     bind: { placeholder: '请输入订单号' }
-  //   },
-  //   // {
-  //   //   label: '子订单号',
-  //   //   prop: 'cate',
-  //   //   input: true,
-  //   //   bind: { placeholder: '请输入子订单号', rules: [{ type: 'number', message: '请输入整数', trigger: 'blur', transform: val => Number(val) }] }
-  //   // },
-  //   // {
-  //   //   label: "配方",
-  //   //   prop: "bomId",
-  //   //   select: [],
-  //   //   fn: () => this.$http.get('/pms/bom/page', { params: { key: '', limit: 999, page: 1 } }),
-  //   //   bind: { placeholder: "请选择配方" },
-  //   // },
-  //   // {
-  //   //   label: '砖型',
-  //   //   prop: 'shapeId',
-  //   //   select: [],
-  //   //   fn: () => this.$http.get('/pms/shape/page', { params: { key: '', limit: 999, page: 1 } }),
-  //   //   bind: { placeholder: "请选择砖型" },
-  //   // },
-  //   // {
-  //   //   label: '工艺',
-  //   //   prop: 'techId',
-  //   //   select: [],
-  //   //   fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
-  //   //   bind: { placeholder: "请选择砖型" },
-  //   // },
-  //   // {
-  //   //   label: '订单状态',
-  //   //   prop: 'types', // 0等待, 1确认, 2生产，3暂停, 4结束, 5接受, 6拒绝
-  //   //   select: [
-  //   //     {label: '等待', value: 0},
-  //   //     {label: '确认', value: 1},
-  //   //     {label: '生产', value: 2},
-  //   //     {label: '暂停', value: 3},
-  //   //     {label: '结束', value: 4},
-  //   //     {label: '接受', value: 5},
-  //   //     {label: '拒绝', value: 6},
-  //   //   ],
-  //   //   // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
-  //   //   bind: { placeholder: "请选择订单状态" },
-  //   // },
-  //   {
-  //     button: {
-  //       type: "primary",
-  //       name: "查询",
-  //     },
-  //   },
-  //   {
-  //     button: {
-  //       type: "primary",
-  //       name: "新增",
-  //       permission: "",
-  //     },
-  //     bind: {
-  //       plain: true,
-  //     },
-  //   },
-  // ];
-
-  /**
-   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
-   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
-   * 此为后者的配置:
-   */
   const dictList = JSON.parse(localStorage.getItem("dictList"));
   const dialogConfigs = {
     menu: [
@@ -417,3 +345,72 @@ export default function () {
     },
   };
 }
+
+
+
+  // const headFormFields = [
+  //   {
+  //     label: '订单号',
+  //     prop: 'code',
+  //     input: true,
+  //     bind: { placeholder: '请输入订单号' }
+  //   },
+  //   // {
+  //   //   label: '子订单号',
+  //   //   prop: 'cate',
+  //   //   input: true,
+  //   //   bind: { placeholder: '请输入子订单号', rules: [{ type: 'number', message: '请输入整数', trigger: 'blur', transform: val => Number(val) }] }
+  //   // },
+  //   // {
+  //   //   label: "配方",
+  //   //   prop: "bomId",
+  //   //   select: [],
+  //   //   fn: () => this.$http.get('/pms/bom/page', { params: { key: '', limit: 999, page: 1 } }),
+  //   //   bind: { placeholder: "请选择配方" },
+  //   // },
+  //   // {
+  //   //   label: '砖型',
+  //   //   prop: 'shapeId',
+  //   //   select: [],
+  //   //   fn: () => this.$http.get('/pms/shape/page', { params: { key: '', limit: 999, page: 1 } }),
+  //   //   bind: { placeholder: "请选择砖型" },
+  //   // },
+  //   // {
+  //   //   label: '工艺',
+  //   //   prop: 'techId',
+  //   //   select: [],
+  //   //   fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
+  //   //   bind: { placeholder: "请选择砖型" },
+  //   // },
+  //   // {
+  //   //   label: '订单状态',
+  //   //   prop: 'types', // 0等待, 1确认, 2生产，3暂停, 4结束, 5接受, 6拒绝
+  //   //   select: [
+  //   //     {label: '等待', value: 0},
+  //   //     {label: '确认', value: 1},
+  //   //     {label: '生产', value: 2},
+  //   //     {label: '暂停', value: 3},
+  //   //     {label: '结束', value: 4},
+  //   //     {label: '接受', value: 5},
+  //   //     {label: '拒绝', value: 6},
+  //   //   ],
+  //   //   // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
+  //   //   bind: { placeholder: "请选择订单状态" },
+  //   // },
+  //   {
+  //     button: {
+  //       type: "primary",
+  //       name: "查询",
+  //     },
+  //   },
+  //   {
+  //     button: {
+  //       type: "primary",
+  //       name: "新增",
+  //       permission: "",
+  //     },
+  //     bind: {
+  //       plain: true,
+  //     },
+  //   },
+  // ];

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

@@ -1,5 +1,5 @@
 <template>
-  <ListViewWithHead :table-configs="tableConfigs" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" />
+  <ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" />
   <!-- <div style="padding: 16px; background: #fff; border-radius: 8px">
     <el-table :data="dataList">
       <el-table-column key="id" prop="id" label="ID"></el-table-column>