From 94b510ac90d3525262c19af375c2095f20f3a2f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Mon, 20 May 2024 17:30:16 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90nev-=E5=B9=B3=E6=9D=BF=E3=80=91?=
 =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/PC/src/mixins/padListPageMixins.js         |  53 ++++
 fe/PC/src/styles/padMain.scss                 |   9 +-
 .../components/padListPage/index.vue          | 243 ++++++++++++++++++
 .../padManage/isPadForTransferLibJob_new.vue  | 212 +++------------
 4 files changed, 341 insertions(+), 176 deletions(-)
 create mode 100644 fe/PC/src/mixins/padListPageMixins.js
 create mode 100644 fe/PC/src/views/padManage/components/padListPage/index.vue

diff --git a/fe/PC/src/mixins/padListPageMixins.js b/fe/PC/src/mixins/padListPageMixins.js
new file mode 100644
index 000000000..b5f4f8c5e
--- /dev/null
+++ b/fe/PC/src/mixins/padListPageMixins.js
@@ -0,0 +1,53 @@
+export const padListPageMixins = {
+  data() {
+    return{
+      // searchForm:[],// 查询条件属性
+      // searchFormData:null,//查询条件数据
+      padListLoading:false,//页面加载
+      padListData:[],//页面数据
+      // 分页配置
+      padListPager:{
+        totalCount:null,//总条数
+        pageSize:10,//当前页显示条数
+        currentPage:0,//当前页
+        totalPage:null,//总页
+      },
+      // 查询条件配置
+      padListParams:{
+        sorting: null,
+        maxResultCount: 10,
+        skipCount:0,
+        condition:{filters:null}
+      }
+    }
+  },
+  methods:{
+    initPadParams(page){
+      this.padListParams={
+        sorting: null,
+        maxResultCount: this.padListPager.pageSize,
+        skipCount: this.padListPager.pageSize * (Number(page) - 1),
+        condition: {
+          filters: this.intSearchFilters(),
+        }
+      }
+    },
+    // 查询条件拼接
+    intSearchFilters(){
+      let _filters = []
+      this.searchForm.forEach(item => {
+        if(this.searchFormData[item.prop]){
+          _filters.push(
+            {
+              logic: 'And',
+              column: item.prop,
+              action: item.action || "==",
+              value: this.searchFormData[item.prop]
+            }
+          )
+        }
+      });
+      return _filters
+    },
+  }
+}
\ No newline at end of file
diff --git a/fe/PC/src/styles/padMain.scss b/fe/PC/src/styles/padMain.scss
index ba0b4aab9..2cb0241d6 100644
--- a/fe/PC/src/styles/padMain.scss
+++ b/fe/PC/src/styles/padMain.scss
@@ -7,10 +7,13 @@
   min-width:800px;
   overflow:auto;
 }
+.padListPageOuter{
+  height: 100%;
+  padding:15px;
+}
 .padListPage{
   background:#fff;
-  margin:15px;
-  height:calc(100% - 30px);
+  height: 100%;
   min-width:800px;
   overflow:auto;
   display: flex;
@@ -47,6 +50,7 @@
       padding: 10px;
       background: #fff;
       margin-bottom: 10px;
+      border-bottom: #ddd solid 1px;
     }
 
     .detailDataBox{
@@ -62,6 +66,7 @@
     text-align: center;
     color: #999;
     overflow: hidden;
+    box-shadow: 1px -1px 5px #ddd;
 
     ::v-deep .el-loading-spinner {
       display: flex;
diff --git a/fe/PC/src/views/padManage/components/padListPage/index.vue b/fe/PC/src/views/padManage/components/padListPage/index.vue
new file mode 100644
index 000000000..34d5b7701
--- /dev/null
+++ b/fe/PC/src/views/padManage/components/padListPage/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="padListPage">
+    <!-- 搜索头部 -->
+    <div class="padListHeader">
+      <div class="leftSearchHeader">
+        <el-form :inline="true" :model="searchFormData" :size="'mini'">
+          <el-form-item 
+            v-for="(item,index) in searchForm"
+            :key="index"
+            :label="item.label"
+          >
+            <!-- input -->
+            <el-input
+              v-if="item.type == 'input'" 
+              v-model="searchFormData[item.prop]" 
+              :placeholder="item.label"
+              clearable
+            ></el-input>
+            <!-- select -->
+            <el-select 
+              v-if="item.type == 'select'" 
+              v-model="searchFormData[item.prop]" 
+              :placeholder="item.label"
+            >
+              <el-option 
+                v-for="(opItem,opIndex) in item.options"
+                :key="opIndex"
+                :label="opItem.label" 
+                :value="opItem.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchHandle">查询</el-button>
+            <el-button 
+              v-for="(btnItem,btnIndex) in headerButton"
+              :key="btnIndex"
+              :type="btnItem.type" 
+              v-show="typeof btnItem.hide == 'function' ? !btnItem.hide() : !btnItem.hide"
+              @click="headerButtonClick(btnItem,btnIndex)"
+            >{{ btnItem.label }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-button circle icon="el-icon-upload2" type="primary" class="pageToTop" @click="pageToTopHandle"></el-button>
+    </div>
+    <!-- 列表 -->
+    <div class="padListCard" v-show="padListPager.totalCount" id="padListCard">
+      <div 
+        class="padListRow" 
+        v-for="(item,index) in padListData"
+        :key="index"
+      > 
+        <!-- 主表 -->
+        <div class="mainDataBox">
+          <curren-descriptions
+            :column="5"
+            :tabsDesTions="padMainColumn"
+            :propsData="item"
+            :labelStyle="{'margin-right':'5px'}"
+          ></curren-descriptions>
+        </div>
+        <!-- 子表 todo：封装时候确定是否为子表直接显示数据-->
+        <div class="detailDataBox">
+          <curren-descriptions
+            :column="4"
+            :tabsDesTions="padDeatilColumn"
+            :propsData="item.details[0]"
+            :labelStyle="{'margin-right':'5px'}"
+          ></curren-descriptions>
+        </div>
+        <!-- 按钮 -->
+        <div class="listRowButtonBox">
+          <el-button 
+            v-for="(btnItem,btnIndex) in listRowButton"
+            :key="btnIndex"
+            :type="btnItem.type" 
+            @click="headerButtonClick(btnItem,btnIndex)"
+            :size="'mini'"
+          >{{ btnItem.label }}</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 无数据 -->
+    <el-empty v-show="!padListPager.totalCount || padListPager.totalCount<=0" description="暂无数据"></el-empty>
+    <!-- 页脚 -->
+    <div class="padListPager" v-if="padListPager.totalCount">
+      <div v-loading="padListLoading" element-loading-text="拼命加载中">{{padListPager.currentPage}}/{{padListPager.totalPage}}</div>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { getPageList } from "@/api/wms-api";
+import currenDescriptions from "@/components/currenDescriptions"
+import { padListPageMixins } from "@/mixins/padListPageMixins"
+export default {
+  name: 'padListPage',
+  components: { currenDescriptions },
+  mixins: [
+    padListPageMixins,
+  ],
+  props:{
+    // 列表链接
+    listUrl: {
+      type: String,
+      default: null
+    },
+    // 查询条件数据
+    searchFormData:{
+      type: Object,
+      default: null
+    },
+    // 查询条件属性
+    searchForm: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 头部其他自定义按钮
+    headerButton: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 列表筛选条件
+    filters: {
+      type: Array,
+      default: null
+    },
+    // 主表数据配置
+    padMainColumn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 子表数据配置
+    padDeatilColumn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 列表每条数据的按钮区域
+    listRowButton: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+  },
+  watch: {
+    // 配置值更改监听处理
+    filters:{
+      handler(val, oldVal) {
+        console.log(666,val)
+      },
+      deep: true,
+      immediate: true,
+    },
+    headerButton:{
+      handler(val, oldVal) {
+        console.log(777,val)
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mounted(){
+    this.initPage()
+  },
+  methods: {
+    // 页面初始化
+    initPage(){
+      this.initPadParams(1)
+      this.getPadList()
+      let _this = this
+      document.getElementById("padListCard").addEventListener('scroll', function() {
+        _this.handleScroll()
+      });
+    },
+    // 回到顶部
+    pageToTopHandle(){
+      document.getElementById("padListCard").scrollTop = 0
+    },
+    // 滚动加载
+    handleScroll(){
+      let windowHeight = document.getElementById("padListCard").clientHeight;
+      let scrollHeight = document.getElementById("padListCard").scrollHeight;
+      let scrollTop = document.getElementById("padListCard").scrollTop;
+      if (scrollTop + windowHeight >= scrollHeight - 30) {
+        let page = Number(JSON.stringify(this.padListPager.currentPage + 1))
+        if(Number(page) > Number(this.padListPager.totalPage))return
+        console.log('翻页')
+        this.initPadParams(page)
+        this.getPadList(page);
+      }
+    },
+    getPadList(page=1){
+      if(this.padListLoading)return
+      console.log('请求页数',page)
+      if(page != 1 && (Number(page) > Number(this.padListPager.totalPage)))return
+      if(page == 1){this.padListData = []}
+      this.padListLoading = true
+      console.log(21111,this.padListParams.skipCount)
+      getPageList(this.padListParams,this.listUrl,true).then(res => {
+        this.padListData = [
+          ...this.padListData,
+          ...res.items,
+        ];
+        this.padListPager.totalCount = res.totalCount
+        this.padListPager.totalPage = Math.ceil(res.totalCount / this.padListPager.pageSize)
+        this.padListLoading = false
+        this.padListPager.currentPage = page
+      }).catch(err => {
+        this.padListLoading = false
+        console.log(err)
+      })
+    },
+    // 查询按钮操作
+    searchHandle(){
+      this.getPadList()
+    },
+    clearSearchHandle(){
+
+    },
+    // 头部其他按钮点击事件
+    headerButtonClick(item,index){
+      this.$emit("headerButtonClick",item,index)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/styles/padMain.scss";
+</style>
\ No newline at end of file
diff --git a/fe/PC/src/views/padManage/isPadForTransferLibJob_new.vue b/fe/PC/src/views/padManage/isPadForTransferLibJob_new.vue
index 184e646aa..1b0344ce0 100644
--- a/fe/PC/src/views/padManage/isPadForTransferLibJob_new.vue
+++ b/fe/PC/src/views/padManage/isPadForTransferLibJob_new.vue
@@ -1,100 +1,29 @@
 <template>
-  <div class="isPadForTransferLibJobPage padListPage">
-    <!-- 搜索头部 -->
-    <div class="padListHeader">
-      <div class="leftSearchHeader">
-        <el-form :inline="true" :model="searchFormData" :size="'mini'">
-          <el-form-item 
-            v-for="(item,index) in searchForm"
-            :key="index"
-            :label="item.label"
-          >
-            <!-- input -->
-            <el-input
-              v-if="item.type == 'input'" 
-              v-model="searchFormData[item.prop]" 
-              :placeholder="item.label"
-              clearable
-            ></el-input>
-            <!-- select -->
-            <el-select 
-              v-if="item.type == 'select'" 
-              v-model="searchFormData[item.prop]" 
-              :placeholder="item.label"
-            >
-              <el-option 
-                v-for="(opItem,opIndex) in item.options"
-                :key="opIndex"
-                :label="opItem.label" 
-                :value="opItem.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="searchHandle">查询</el-button>
-            <el-button 
-              v-for="(btnItem,btnIndex) in headerButton"
-              :key="btnIndex"
-              :type="btnItem.type" 
-              @click="headerButtonClick(btnItem,btnIndex)"
-            >{{ btnItem.label }}</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-button circle icon="el-icon-upload2" type="primary" class="pageToTop" @click="pageToTopHandle"></el-button>
-    </div>
-    <!-- 列表 -->
-    <div class="padListCard" v-show="padListPager.totalCount" id="padListCard">
-      <div 
-        class="padListRow" 
-        v-for="(item,index) in padListData"
-        :key="index"
-      > 
-        <!-- 主表 -->
-        <div class="mainDataBox">
-          <curren-descriptions
-            :column="5"
-            :tabsDesTions="padMainColumn"
-            :propsData="item"
-            :labelStyle="{'margin-right':'5px'}"
-          ></curren-descriptions>
-        </div>
-        <!-- 子表 todo：封装时候确定是否为子表直接显示数据-->
-        <div class="detailDataBox">
-          <curren-descriptions
-            :column="4"
-            :tabsDesTions="padDeatilColumn"
-            :propsData="item.details[0]"
-            :labelStyle="{'margin-right':'5px'}"
-          ></curren-descriptions>
-        </div>
-        <!-- 按钮 -->
-        <div class="listRowButtonBox">
-          <el-button 
-            v-for="(btnItem,btnIndex) in listRowButton"
-            :key="btnIndex"
-            :type="btnItem.type" 
-            @click="headerButtonClick(btnItem,btnIndex)"
-            :size="'mini'"
-          >{{ btnItem.label }}</el-button>
-        </div>
-      </div>
-    </div>
-    <!-- 无数据 -->
-    <el-empty v-show="!padListPager.totalCount || padListPager.totalCount<=0" description="暂无数据"></el-empty>
-    <!-- 页脚 -->
-    <div class="padListPager" v-if="padListPager.totalCount">
-      <div v-loading="padListLoading" element-loading-text="拼命加载中">{{padListPager.currentPage}}/{{padListPager.totalPage}}</div>
-    </div>
+  <div class="padListPageOuter">
+    <padListPage
+      ref="padListPage_Ref"
+      :listUrl="'wms/store/transfer-lib-job'"
+      :searchFormData="searchFormData"
+      :searchForm="searchForm"
+      :headerButton="headerButton"
+      :padMainColumn="padMainColumn"
+      :padDeatilColumn="padDeatilColumn"
+      :listRowButton="listRowButton"
+      @headerButtonClick="headerButtonClick"
+      :filters="filters"
+    ></padListPage>
   </div>
 </template>
 
 <script>
-import { getPageList } from "@/api/wms-api";
-import currenDescriptions from "@/components/currenDescriptions"
+import padListPage from "./components/padListPage/index"
+import { padListPageMixins } from "@/mixins/padListPageMixins"
 export default {
   name: 'isPadForTransferLibJob',
-  components: { currenDescriptions },
+  mixins: [
+    padListPageMixins,
+  ],
+  components: { padListPage },
   data () {
     return {
       searchFormData:{
@@ -103,20 +32,21 @@ export default {
       searchForm:[
         {label:'任务单号',prop:'number',type:'input'},
       ],
+      isFilterSta:false,
       headerButton:[
         {
           type: 'warning',
           label: '查看待执行数据',
           name: "showCanHandle",
+          hide: this.isFilterSta,
         },
         {
           type: 'success',
           label: '查看所有数据',
           name: "showAllData",
+          hide: !this.isFilterSta,
         },
       ],
-      padListLoading:false,
-      padListData:[],
       padMainColumn:[
         {label:'任务单号',prop:'number'},
         {label:'申请单号',prop:'requestNumber'},
@@ -142,99 +72,33 @@ export default {
           name: "showAllData",
         },
       ],
-      padListPager:{
-        totalCount:null,//总条数
-        pageSize:10,//当前页显示条数
-        currentPage:0,//当前页
-        totalPage:null,//总页
-      },
-      searchFilters:[]
+      filters:null
     }
   },
   mounted(){
-    this.getPadList()
-    let _this = this
-    document.getElementById("padListCard").addEventListener('scroll', function() {
-      _this.handleScroll()
-    });
   },
   methods: {
-    pageToTopHandle(){
-      document.getElementById("padListCard").scrollTop = 0
-    },
-    handleScroll(){
-      let windowHeight = document.getElementById("padListCard").clientHeight;
-      let scrollHeight = document.getElementById("padListCard").scrollHeight;
-      let scrollTop = document.getElementById("padListCard").scrollTop;
-      if (scrollTop + windowHeight >= scrollHeight - 30) {
-        let page = Number(JSON.stringify(this.padListPager.currentPage + 1))
-        if(Number(page) > Number(this.padListPager.totalPage))return
-        console.log('翻页')
-        this.getPadList(page);
-      }
-    },
-    intSearchFilters(){
-      let _filters = []
-      this.searchForm.forEach(item => {
-        if(this.searchFormData[item.prop]){
-          _filters.push(
-            {
-              logic: 'And',
-              column: item.prop,
-              action: item.action || "==",
-              value: this.searchFormData[item.prop]
-            }
-          )
-        }
-      });
-      return _filters
-    },
-    getPadList(page=1){
-      if(this.padListLoading)return
-      console.log('请求页数',page)
-      if(page != 1 && (Number(page) > Number(this.padListPager.totalPage)))return
-      if(page == 1){this.padListData = []}
-      let params = {
-          sorting: null,
-          maxResultCount: this.padListPager.pageSize,
-          skipCount: this.padListPager.pageSize * (Number(page) - 1),
-          condition: {
-            filters: this.intSearchFilters()
-          }
-      }
-      this.padListLoading = true
-      getPageList(params,'wms/store/transfer-lib-job',true).then(res => {
-        this.padListData = [
-          ...this.padListData,
-          ...res.items,
-        ];
-        this.padListPager.totalCount = res.totalCount
-        this.padListPager.totalPage = Math.ceil(res.totalCount / this.padListPager.pageSize)
-        this.padListLoading = false
-        this.padListPager.currentPage = page
-      }).catch(err => {
-        this.padListLoading = false
-        console.log(err)
-      })
-    },
-    // 查询按钮操作
-    searchHandle(){
-      this.getPadList()
-    },
-    // 其他按钮点击事件
+    // 头部其他按钮点击事件
     headerButtonClick(item,index){
-      if(val.name == 'showCanHandle'){
-        this.PageListParams.condition.filters.push({
+      if(item.name == 'showCanHandle'){
+        this.isFilterSta = true
+        let _filters = [{
           logic:"And",
           column:"jobStatus",
           action:"In",
           value: JSON.stringify([1,2,4,30])
-        })
-        this.paging();
+        }]
+        console.log(999,this.padListParams)
+        this.padListParams.condition.filters = [
+          ...this.intSearchFilters(),
+          ..._filters
+        ]
+        this.$refs.padListPage_Ref.getPadList();
       }
-      else if(val.name == 'showAllData'){
-        this.PageListParams.condition.filters = this.PageListParams.condition.filters.filter(obj => obj.column != 'jobStatus');
-        this.paging();
+      else if(item.name == 'showAllData'){
+        this.isFilterSta = false
+        this.filters = null
+        this.$refs.padListPage_Ref.getPadList();
       }
     }
   }