明细添加前端模拟筛选功能暂存

Code/Fe/src/components/commonTabel-drawer/index.vue

@@ -75,12 +75,14 @@
               v-if="showDetailColumnsSet"
               class="rowDropNotHideItem"
               @click="columnsSettingHandle()"
+              size="mini"
             >字段设置</el-button>
-            <!-- <el-button 
+            <el-button 
               type="primary"
               v-if="showDetailFilters"
               @click="detailFiltersHandle()"
-            >筛选</el-button> -->
+              size="mini"
+            >筛选</el-button>
           </div>
           <!-- 字段设置弹窗 -->
           <rowDrop 
@@ -91,6 +93,23 @@
             :source="'detail_api'"
             :innerMaxHeight="'calc(90vh - 400px)'"
           ></rowDrop>
+          <!-- 全面搜索（普通+高级整合） -->
+          <searchOverall
+            ref="searchOverallRef"
+            class="detailFiltersPopPage"
+            :showSearchOverall="detailFiltersVisible"
+            @getShowSearchOverall="getShowSearchOverall"
+            :showMoreSearch="true"
+            :tableColumns="tableColumns"
+            @overallSearchFormClick="detailFiltersSearch"
+            :filterActionOptions="filterActionOptions"
+            :httpOverallSearchData="detailSearchDataFE"
+            :disabledAction="true"
+            :disabledLogic="true"
+          >
+            <!-- 插槽预留 -->
+            <slot name="searchPrimarySlot"></slot>
+          </searchOverall>
           <!-- currenTableDetails 组件 明细中带分页功能 -->
           <umyTable
             v-if="scope.value == 'mx'"
@@ -101,7 +120,7 @@
             :tableColumns="tableColumns"
             :selectionTable="selectionTable"
             :requiredRules="false"
-            :setUTableHeight="showDetailColumnsSet ? 305 : 260"
+            :setUTableHeight="showDetailColumnsSet ? 300 : 260"
             @sortChange="sortChange"
             @handleSelectionChange="handleSelectionChange"
             @inlineDialog="inlineDialog"
@@ -193,6 +212,7 @@
   </el-drawer>
 </template>
 <script>
+import searchOverall from "@/components/searchOverall"
 import { getListByItemcode,byItem,byProduct,byComponent,bySupplierCode,byLocation,byLocationCode,
   relationByLocationCode,byComponentCJ,purRecNoteCustomInfo,EnumPurchaseReceiptInspect 
 } from "@/api/wms-api"
@@ -211,6 +231,7 @@ export default {
     currenDescriptions,
     currenTabs,
     currenTable,
+    searchOverall,
     rowDrop
   },
   props: {
@@ -224,6 +245,11 @@ export default {
       type: Boolean,
       default: true
     },
+    // 明细-筛选-当前接口中的筛选数据（用于同步全面筛选的数据）
+    detailSearchDataFE:{
+      type: Object,
+      default: null
+    },
     title: {
       type: Array,
       default: () => {
@@ -330,36 +356,24 @@ export default {
         return this.dropdownTabsData
       } else {
         // 正常普通 详情，明细，汇总
-        if (Object.keys(this.propsData).length != 0) {
+        // if (Object.keys(this.propsData).length != 0) {
+          if (Object.keys(this.propsData)) {
           this.initDropdownTabsData = [{
-              label: "详情",
+            label: "详情",
-              name: 'xq'
+            name: 'xq'
-            },
+          }]
-            {
+          // 明细可以为空数组，前端分页使用
+          if(this.propsData.details){
+            this.initDropdownTabsData.push({
               label: "明细",
               name: 'mx'
-            },
+            })
-            {
+          }
+          if(this.propsData.summaryDetails && this.propsData.summaryDetails.length > 0){
+            this.initDropdownTabsData.push({
               label: "汇总",
               name: 'hz'
-            }]
+            })
-          if (this.propsData.details == undefined || !this.propsData.details.length) {
-            this.initDropdownTabsData = [{
-              label: "详情",
-              name: 'xq'
-            }]
-            return this.initDropdownTabsData
-          }
-          if (this.propsData.summaryDetails == undefined || !this.propsData.summaryDetails.length ) {
-            this.initDropdownTabsData = [{
-              label: "详情",
-              name: 'xq'
-            },
-            {
-              label: "明细",
-              name: 'mx'
-            }]
-            return this.initDropdownTabsData
           }
         }
         return this.initDropdownTabsData
@@ -402,7 +416,15 @@ export default {
           label: "汇总",
           name: 'hz'
         }
-      ]
+      ],
+      detailFiltersVisible:false,//筛选显示
+      filterActionOptions:[{
+        value: '==',
+        label: '等于'
+      }, {
+        value: '!=',
+        label: '不等于'
+      }],
     }
   },
   methods: {
@@ -416,9 +438,17 @@ export default {
     },
     // 明细-筛选
     detailFiltersHandle(){
-
+      this.detailFiltersVisible = !this.detailFiltersVisible
+    },
+    // 明细-全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值
+    getShowSearchOverall(val){
+      this.detailFiltersVisible = val || false
+    },
+    // 明细-全面筛选所有按钮操作集
+    detailFiltersSearch(options){
+      this.$emit('detailFiltersSearch', options)
     },
-    // 关闭字段设置
+    // 明细-关闭字段设置
     closeRowDrop() {
       this.rowDropVisible = false
     },

Code/Fe/src/components/commonTabel-drawer/style/index.scss

@@ -124,4 +124,14 @@
 .currenTabel-drawer-mx-header{
   text-align: right;
   padding: 0 10px 10px 0;
+}
+
+.detailFiltersPopPage{
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 240px;
+  .fullPageCover{
+    height: calc(100vh - 300px) !important;
+  }
 }

Code/Fe/src/components/searchOverall/index.vue

@@ -70,7 +70,7 @@
                   <el-select
                     v-model="item.action"
                     placeholder="请选择条件"
-                    :disabled="item.column == '' || item.hide ? true : false"
+                    :disabled="disabledAction || item.column == '' || item.hide ? true : false"
                   >
                   <!-- moreListOptions.action -->
                     <el-option
@@ -137,7 +137,7 @@
                   <el-select
                     v-model="item.logic"
                     placeholder="请选择关系"
-                    :disabled="item.column == '' || item.hide ? true : false"
+                    :disabled="disabledLogic || item.column == '' || item.hide ? true : false"
                   >
                     <el-option
                       v-for="item in moreListOptions.logic"
@@ -233,6 +233,16 @@ export default {
     }
   },
   props: {
+    // 禁用选择条件
+    disabledAction:{
+      type: Boolean,
+      default: false
+    },
+    // 禁用选择关系
+    disabledLogic:{
+      type: Boolean,
+      default: false
+    },
     // 是否显示全面筛选组件
     showSearchOverall:{
       type: Boolean,
@@ -268,7 +278,12 @@ export default {
     httpOverallSearchData:{
       type: Object,
       default: null
-    }
+    },
+    // 自定义配置条件
+    filterActionOptions:{
+      type: Array,
+      default: null
+    },
   },
   data() {
     return {
@@ -419,6 +434,11 @@ export default {
     },
     // 根据数据内容约束条件选项
     formatMoreListOptions(val) {
+      // 自定义配置条件filterActionOptions
+      if(this.filterActionOptions){
+        this.moreListOptions.action = this.filterActionOptions
+        return this.moreListOptions.action
+      }
       if (val) {
         for(var i =0; i< this.tableColumns.length; i++) {
           if (val == this.tableColumns[i].prop) {

Code/Fe/src/mixins/TableMixins.js

@@ -35,7 +35,7 @@ export const tableMixins = {
       //每页最大显示数
       MaxResultCountDetails: 20,
       // 明细数据临时存储
-      tableDataDetails:[],
+      tableDataDetails:null,
       //默认tag
       firstTabs:'xq',
       // api的表头数据
@@ -46,6 +46,8 @@ export const tableMixins = {
       URLOption_base:allUrlOption[this.$route.name].baseURL,
       //主表-明细
       URLOption_detail:allUrlOption[this.$route.name].detailURL,
+      // 主表-明细-筛选数据同步回显
+      detailSearchDataFE:null,
       // 主表-操作列
       operationButtonsTable:[{label:'查看详情',name:'info'}]
     }
@@ -110,14 +112,9 @@ export const tableMixins = {
       let _url = this.URLOption_detail ? this.URLOption_detail : this.URLOption_base
       getDetailed(val.id, _url).then(res => {
           if (res.details) {
-            // 前端分页处理
             this.tableDataDetails = JSON.parse(JSON.stringify(res))
-            let linshiTableDataDetails = JSON.parse(JSON.stringify(this.tableDataDetails))
+            // 前端分页处理
-            this.totalCountDetails = res.details.length
+            this.propsData = this.detailListPageFromFE(res)
-            // 删除除当前页面最大数以外数据
-            linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
-            // this.oldSkipCountDetails = 1
-            this.propsData = linshiTableDataDetails
           } else {
             this.propsData = res
           }
@@ -126,6 +123,14 @@ export const tableMixins = {
         this.Loading.DrawerLoading = false
       })
     },
+    // 前端分页处理
+    detailListPageFromFE(data){
+      let linshiTableDataDetails = JSON.parse(JSON.stringify(data))
+      this.totalCountDetails = data.details.length
+      // 删除除当前页面最大数以外数据
+      linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
+      return linshiTableDataDetails
+    },
     // 明细 分页 接收分页组件emit改变每页最大页数
     alterResultCountDetails(val) {
       this.Loading.DrawerLoading = true
@@ -276,6 +281,43 @@ export const tableMixins = {
       if(callback)callback()
       // this.getSupplierByCodesHandle_table()
     },
+    // 筛选前端查询
+    detailFiltersSearch(options){
+      let _item = options.item;
+      // 重置
+      if(_item.name == 'reset' || _item.name == 'moreList-reset'){
+        this.propsData = this.detailListPageFromFE(this.tableDataDetails)
+        //关闭高级筛选
+        if(options.vm_moreList){options.vm_moreList.changeMoreListShow(false)}
+        // 同步当前列表数据请求接口的筛选条件
+        this.detailSearchDataFE = {}
+        this.detailSearchDataFE.moreList = {filters:JSON.parse(JSON.stringify([]))}
+      }
+      // 查询
+      if( _item.name == 'search' || _item.name == 'moreList-search'){
+        let _searchObj = {}
+        let searchData = options.data_moreList.filters;
+        console.log(299,searchData)
+        searchData.forEach(item=>{
+          _searchObj[item.column] = item.value
+        })
+        const productFilter = (data, params) => data.filter(function(item){
+          return Object.keys(params).every(function(key){ 
+              return item[key]!=undefined && item[key]==params[key] //可以相应修改条件
+          })
+        })
+        let _allData = JSON.parse(JSON.stringify(this.tableDataDetails))
+        let _filterList = productFilter(_allData.details,_searchObj)
+        _allData.details = _filterList
+        this.propsData = this.detailListPageFromFE(_allData)
+        //关闭高级筛选
+        if(options.vm_moreList){options.vm_moreList.changeMoreListShow(false)}
+        // 同步当前列表数据请求接口的筛选条件
+        this.detailSearchDataFE = {}
+        this.detailSearchDataFE.moreList = {filters:JSON.parse(JSON.stringify(searchData))}
+      }
+      // return res
+    },
     // 点击抽屉，获取明细后全局通用操作
     inlineDialogCallback(){
       this.Loading.DrawerLoading = false

Code/Fe/src/views/interfaceBoard/TestSchool.vue

@@ -35,6 +35,8 @@
       :drawer="displayDialog.detailsDialog"
       :dropdownData="dropdownData"
       :propsData="propsData"
+      @detailFiltersSearch="detailFiltersSearch"
+      :detailSearchDataFE="detailSearchDataFE"
       @drawerShut="(val) => (displayDialog.detailsDialog = val)"
       @drawerbutton="drawerbutton"
       @handleCommand="drawerHandle"
@@ -62,6 +64,7 @@
       @close="FormClose"
       @goBack="goBack"
     ></newAndEdiDialog>
+    <!-- 明细查询页面 -->
     <filterForDetailPage
       v-if="filterForDetailShow"
       :listColumns="apiColumns_DetailsTable"