2024-02-28 筛选页面实现

src/api/sift/queryUserSetting.js

@@ -0,0 +1,7 @@
+import {createAPI} from "../../utils/httpRequest";
+
+export const searchUserSettingList = (data) => createAPI(`/sift/list`,'get',data)
+export const searchUserSettingRecording = (data) => createAPI(`/sift/recording`,'get',data)
+export const searchUserSettingRecordList = (data) => createAPI(`/sift/recordList`,'get',data)
+export const saveOrUpdateBatch = (data) => createAPI(`/sift/saveOrUpdateBatch`,'post',data)
+export const saveQueryHeaderDetail = (data) => createAPI(`/sift/saveRecord`,'post',data)

src/store/index.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import common from './modules/common'
 import user from './modules/user'
+import sift from "./modules/sift";
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     common,
-    user
+    user,
+    sift
   },
   mutations: {
     // 重置vuex本地储存状态

src/store/modules/sift.js

@@ -0,0 +1,17 @@
+export default {
+  namespaced: true,
+  state: {
+    siftList:[],
+    searchFunction:(params)=>{
+      window.alert("没有查询方法")
+    },//直接查询
+  },
+  mutations: {
+    commitSiftList(state, siftList) {
+      state.siftList = siftList
+    },
+    commitSearchFunction(state, SearchFunction) {
+      state.searchFunction = SearchFunction
+    },
+  }
+}

src/views/main-content.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
       <!-- 主入口标签页 s -->
       <el-tabs
@@ -14,6 +15,7 @@
             <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
             <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
             <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
+            <el-dropdown-item @click.native="flag = true">筛选条件</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <el-tab-pane
@@ -40,14 +42,116 @@
         </keep-alive>
       </el-card>
     </main>
+    <el-dialog title="查询" append-to-body v-drag @close="closeSiftDialog" @open="openSiftDialog" :visible.sync="flag" width="65%">
+      <el-container>
+        <el-aside width="90%">
+          <el-autocomplete :hide-loading="false" v-if="!settingFlag" style="width: 100%;" @select="handleSelect" :fetch-suggestions="querySaveRecord" v-model="itemDesc">
+            <el-button @click="$store.state.sift.searchFunction([...siftList])" style="width: 80px" slot="append" icon="el-icon-search"></el-button>
+          </el-autocomplete>
+          <el-table ref="siftTable" :row-key="getRowKeys" @selection-change="handleSelectionChange" :data="siftList" height="40vh" border>
+            <el-table-column
+              type="selection"
+              width="40" align="center" v-if="settingFlag">
+            </el-table-column>
+            <el-table-column label="操作" align="left" header-align="center" width="70" v-if="settingFlag">
+              <template slot-scope="{row,$index}">
+                <el-link style="cursor:pointer;" @click="moveSetting($index,-1)" v-if="$index !== 0">上移</el-link>
+                <el-link style="cursor:pointer;" @click="moveSetting($index,1)" v-if="$index !== siftList.length-1">下移</el-link>
+              </template>
+            </el-table-column>
+<!--            <el-table-column label="属性" align="center" show-overflow-tooltip width="120" prop="fieldName"></el-table-column>-->
+            <el-table-column label="属性名称" align="center" show-overflow-tooltip width="120" prop="fieldCaption"></el-table-column>
+            <el-table-column label="条件" align="center">
+              <template slot-scope="{row,$index}">
+                <el-input v-model="row.formula" clearable :disabled="row.symbol === 'is_null' || row.symbol === 'is_not_null'">
+                  <el-select @change="(value)=>changeSymbol(value,row)" slot="prepend" clearable v-model="row.symbol" style="width: 100px;cursor:pointer;">
+                    <el-option value="eq" label="="></el-option>
+                    <el-option value="ne" label="!="></el-option>
+                    <el-option value="lt" label="<"></el-option>
+                    <el-option value="le" label="<="></el-option>
+                    <el-option value="gt" label=">"></el-option>
+                    <el-option value="ge" label=">="></el-option>
+                    <el-option value="like" label="包含"></el-option>
+                    <el-option value="in" label="在列表"></el-option>
+                    <el-option value="between" label="范围"></el-option>
+                    <el-option value="not_between" label="不在范围"></el-option>
+                    <el-option value="is_null" label="是空"></el-option>
+                    <el-option value="is_not_null" label="不是空"></el-option>
+                  </el-select>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" align="center" prop="sortBy" show-overflow-tooltip width="120">
+              <template slot-scope="{row,$index}">
+                <el-select v-model="row.sortBy" clearable style="width: 100%">
+                  <el-option value="asc" label="升序"></el-option>
+                  <el-option value="desc" label="降序"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column label="数据库字段" align="center" prop="originalField" show-overflow-tooltip width="120"></el-table-column>
+          </el-table>
+        </el-aside>
+        <el-container>
+          <el-main style="padding: 0px;">
+            <el-card class="box-card" style="height: 100%;margin-left: 3px">
+              <div style="text-align: center;">
+                <div class="box-div" style="margin-top: 70px">
+                  <button @click="openSaveQueryHeaderDialog" v-if="!settingFlag">条件保存</button>
+                </div>
+                <div class="box-div">
+                  <button @click="flushedSiftList">刷新</button>
+                </div>
+                <div class="box-div">
+                  <button @click="clearSetting">清除</button>
+                </div>
+                <div class="box-div">
+                  <button @click="queryUserSettingSave">{{ settingFlag?'保存':'配置' }}</button>
+                </div>
+                <div class="box-div" v-if="settingFlag">
+                  <button @click="settingFlag = false">取消</button>
+                </div>
+              </div>
+            </el-card>
+          </el-main>
+        </el-container>
+      </el-container>
+      <div style="height: 20px;width: 100%"></div>
+    </el-dialog>
+
+    <el-dialog title="记录名称" center :visible.sync="saveQueryHeader" @open="selectData = {itemDesc: undefined}" top="20vh" width="20%">
+      <el-input v-model="selectData.itemDesc"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveQueryHeaderDetail">保 存</el-button>
+        <el-button type="primary" @click="saveQueryHeader = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
   import { isURL } from '@/utils/validate'
+  import {
+    saveOrUpdateBatch, saveQueryHeaderDetail,
+    searchUserSettingList,
+    searchUserSettingRecording,
+    searchUserSettingRecordList
+  } from "../api/sift/queryUserSetting";
+  import {Decimal} from "decimal.js";
   export default {
     inject: ['refresh'],
     data () {
       return {
+        cloneSiftList:[],
+        flag:false,
+        settingFlag:false,
+        selectionSiftList:[],
+        recordList:[],
+        itemDesc:'',
+        selectData:{
+          itemDesc:undefined,
+        },
+        saveQueryHeader:false,
       }
     },
     computed: {
@@ -73,6 +177,11 @@
           return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
         }
         return { minHeight: height + 'px' }
+      },
+      siftList:{
+        get(){
+          return this.$store.state.sift.siftList.filter(e => e.visible === 'Y'|| this.settingFlag)
+        },
       }
     },
     methods: {
@@ -121,8 +230,274 @@
         this.$nextTick(() => {
           this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
         })
+      },
+      openSiftDialog(){
+        this.cloneSiftList = JSON.parse(JSON.stringify(this.$store.state.sift.siftList))
+      },
+      closeSiftDialog(){
+        if (this.settingFlag){
+          this.$confirm('存在未保存的数据，是否保存?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.queryUserSettingSave();
+            this.settingFlag = false;
+          }).catch(() => {
+            this.settingFlag = false;
+          });
+        }
+        this.$store.commit("sift/commitSiftList",this.cloneSiftList);
+        this.itemDesc = '';
+      },
+      searchSiftList(){
+        let params = {
+          menuId:this.$route.meta.menuId,
+          userId:this.$store.state.user.id
+        }
+        searchUserSettingList(params).then(({data})=>{
+          if (data && data.code === 0){
+            this.$store.commit("sift/commitSiftList",data.rows)
+            this.cloneSiftList = data.rows
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.warning(error)
+        })
+      },
+      queryUserSettingSave(){
+        if (this.settingFlag === false){
+          this.settingFlag = true
+          this.$store.commit("sift/commitSiftList",this.cloneSiftList)
+          this.$nextTick(()=>{
+            this.$refs.siftTable.clearSelection()
+            this.siftList.forEach(row=>{
+              this.$refs.siftTable.toggleRowSelection(row,row.visible === 'Y')
+            })
+          })
+          return
+        }
+        // 修改选择值切换
+        // this.showSetting();
+        // 发起新增或修改请求
+        saveOrUpdateBatch(this.showSetting()).then(({data})=>{
+          if (data && data.code === 0){
+            this.searchSiftList()
+            this.itemDesc = '';
+            this.settingFlag = false
+            this.$message.success(data.msg)
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      },
+      handleSelectionChange(val){
+        this.selectionSiftList = val
+      },
+      getRowKeys(row){
+        return row.fieldName
+      },
+      moveSetting(i,num){
+        let arr = [...this.siftList]
+        arr[i+num].showSeqNo = new Decimal(arr[i+num].showSeqNo).toNumber() - num
+        arr[i].showSeqNo = new Decimal(arr[i+num].showSeqNo).toNumber() + num
+        arr = arr.sort((a,b)=> a.showSeqNo-b.showSeqNo)
+        this.$store.commit("sift/commitSiftList",arr)
+        this.$nextTick(()=>{
+          this.siftList.forEach(row =>{
+            this.$refs.siftTable.toggleRowSelection(row,row.visible === 'Y')
+          })
+        })
+      },
+      showSetting(){
+        let arr = [...this.siftList]
+        arr.map(i=>{
+          i.visible = 'N'
+          return i
+        })
+        this.selectionSiftList.forEach(item=>{
+          for (let i = 0; i < arr.length; i++) {
+            let setting = arr[i]
+            if (item.fieldName === setting.fieldName){
+              setting.visible = 'Y'
+              break
+            }
+          }
+        })
+        return arr
+      },
+      clearSetting(){
+        let arr = JSON.parse(JSON.stringify(this.siftList));
+        for (let i = 0; i < this.siftList.length; i++) {
+          arr[i].symbol = null;
+          arr[i].formula = null;
+          arr[i].sortBy = null;
+        }
+        this.itemDesc = '';
+        this.$store.commit("sift/commitSiftList",arr)
+        this.$nextTick(()=>{
+          this.siftList.forEach(row =>{
+            this.$refs.siftTable.toggleRowSelection(row,row.visible === 'Y')
+          })
+        })
+      },
+      flushedSiftList(){
+        let params = {
+          menuId:this.$route.meta.menuId,
+          userId:this.$store.state.user.id
+        }
+        this.itemDesc = ''
+        searchUserSettingList(params).then(({data})=>{
+          if (data && data.code === 0){
+            this.$store.commit("sift/commitSiftList",data.rows)
+            this.$nextTick(()=>{
+              this.siftList.forEach(row =>{
+                this.$refs.siftTable.toggleRowSelection(row,row.visible === 'Y')
+              })
+            })
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      },
+      flushedSiftRecording(){
+        let params = {
+          menuId:this.$route.meta.menuId,
+          userId:this.$store.state.user.id
+        }
+        searchUserSettingRecordList(params).then(({data})=>{
+          if (data && data.code === 0){
+            this.recordList = data.rows
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      },
+      flushSift(){
+        if (this.$route.meta.menuId){
+          this.flushedSiftList()
+          this.flushedSiftRecording()
+        }
+      },
+      querySaveRecord(queryString, cb){
+        let results = this.recordList;
+        results = queryString?results.filter((item)=>{
+          return item.itemDesc.toUpperCase().match(queryString)
+        }):results;
+        results = results.map(item=>{
+          item.value = item.itemDesc
+          return item
+        })
+        cb(results)
+      },
+      handleSelect(item){
+        this.selectData = JSON.parse(JSON.stringify(item))
+        searchUserSettingRecording(item).then(({data})=>{
+          if (data && data.code === 0){
+            let rows = data.rows
+            let list = [...this.siftList]
+            rows.forEach((row)=>{
+              for (let i = 0; i < list.length; i++) {
+                let sift = list[i]
+                if (sift.menuId === row.menuId && sift.userId === row.userId && sift.fieldName === row.fieldName){
+                  sift.symbol = row.symbol
+                  sift.formula = row.formula
+                  sift.sortBy = row.sortBy
+                  break
+                }
+              }
+            })
+            this.$store.commit("sift/commitSiftList",list);
+            // 处理数据
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      },
+      openSaveQueryHeaderDialog(){
+        if (!this.itemDesc){
+          this.saveQueryHeader = true
+          return
+        }
+        this.saveQueryHeaderDetail();
+      },
+      saveQueryHeaderDetail(){
+        let param = {...this.selectData}
+        // 打开了新增弹框即新增查询记录 否则修改查询记录
+        if (this.saveQueryHeader){
+          param.menuId = this.$route.meta.menuId
+          param.userId = this.$store.state.user.id
+          param.dtsName = 'ADOQResult'
         }
+        param.querySavedDetailList = JSON.parse(JSON.stringify(this.siftList))
+        saveQueryHeaderDetail(param).then(({data})=>{
+          if (data && data.code === 0){
+            this.flushedSiftRecording();
+            this.saveQueryHeader = false
+            this.$message.success(data.msg)
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      },
+      changeSymbol(value,row){
+        if (value === 'is_null' || value === 'is_not_null'){
+          row.formula = '';
+        }
+      }
+    },
+    watch:{
+      // 监听路由变化调用筛选查询
+      $route:'flushSift'
+    },
+    mounted() {
+      this.flushSift()
     }
   }
 </script>
 
+<style scoped>
+ /deep/ .el-table .cell{
+  height: auto;
+}
+ .box-div{
+   width: 100%;
+   margin-bottom: 5px;
+   padding-bottom: 5px;
+   //border-bottom: 1px solid #eee;
+ }
+ .box-div button{
+   height: 32px;
+   width: 80px;
+   background: rgb(22,179,163);
+   border: none;
+   border-radius: 5px;
+   color: #fff;
+   cursor: pointer;
+ }
+ .box-div button:hover{
+   background: rgb(97, 217, 204);
+ }
+
+ /deep/ .el-input .el-input-group__prepend{
+   background-color: #fff;
+ }
+
+ /deep/ .el-autocomplete .el-input .el-input-group__append{
+   background-color: rgb(22,179,163);
+   color: #fff;
+   border: 1px solid rgb(22,179,163);
+ }
+</style>
+

src/views/modules/base/buInfo.vue

@@ -263,7 +263,13 @@
         }
       },
     },
+    activated() {
+      this.$store.commit("sift/commitSearchFunction",this.getBuDemo)
+    },
     methods: {
+      getBuDemo(params){
+        this.$message.success("这里是BU")
+      },
       // 获取基础数据列表S
       getBaseList (val, type) {
         this.tagNo = val

src/views/modules/base/factoryInformation.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="mod-config">
     <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
-      <el-button @click="getData()" type="primary" style="margin-left: 2px;margin-top: 0px">{{buttons.search}}</el-button>
+      <el-button @click="getData()" type="primary" style="margin-left: 2px;margin-top: 0px">{{ buttons.search }}
+      </el-button>
       <el-button @click="addModal()" type="primary" :disabled="authAdd"
-                 style="margin-left: 2px;margin-top: 0px">{{buttons.add}}</el-button>
+                 style="margin-left: 2px;margin-top: 0px">{{ buttons.add }}
+      </el-button>
       <download-excel
         :fields="fields()"
         :data="exportData"
@@ -33,7 +35,8 @@
         fixed="right"
         label="操作">
         <template slot-scope="scope">
-          <a type="text" size="small" v-if="scope.row.active=='Y'"  @click="accessSiteModel(scope.row)">{{buttons.role}}</a>
+          <a type="text" size="small" v-if="scope.row.active=='Y'"
+             @click="accessSiteModel(scope.row)">{{ buttons.role }}</a>
           <a type="text" size="small" v-if="!authEdit" @click="editSite(scope.row)">{{ buttons.update }}</a>
           <a type="text" size="small" @click="getCompanyInformation(scope.row)">{{ buttons.companyInformation }}</a>
           <!--          //v-if="jumpFlag"-->
@@ -56,7 +59,8 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog :title=labels.factoryInformation :close-on-click-modal="false" v-drag :visible.sync="siteFlag" width="630px" >
+    <el-dialog :title=labels.factoryInformation :close-on-click-modal="false" v-drag :visible.sync="siteFlag"
+               width="630px">
       <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
         <el-form-item :label="labels.site">
           <el-input v-model="siteData.siteID" :disabled="siteInputFlag" style="width: 130px"></el-input>
@@ -112,18 +116,21 @@
       </el-form>
       <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
         <el-form-item :label=labels.address>
-          <el-input v-model="siteData.address" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"  style="width: 562px"></el-input>
+          <el-input v-model="siteData.address" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"
+                    style="width: 562px"></el-input>
         </el-form-item>
       </el-form>
       <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: 0px;">
 
         <el-form-item :label=labels.addressE>
-          <el-input v-model="siteData.addressE" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"  style="width: 562px"></el-input>
+          <el-input v-model="siteData.addressE" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"
+                    style="width: 562px"></el-input>
         </el-form-item>
       </el-form>
       <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: 0px;">
         <el-form-item :label=labels.website>
-          <el-input v-model="siteData.website" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"  style="width: 562px"></el-input>
+          <el-input v-model="siteData.website" type="textarea" :autosize="{ minRows: 1, maxRows: 6}"
+                    style="width: 562px"></el-input>
         </el-form-item>
       </el-form>
       <el-footer style="height:40px;margin-top: 20px;text-align:center">
@@ -170,9 +177,7 @@
   saveAccessSiteForSite
 } from "@/api/base/site.js"
 import {
-
   searchFunctionButtonList,
-
 } from "@/api/sysLanguage.js"
 import {
   getTableDefaultListLanguage,
@@ -886,7 +891,8 @@
     },
 
     accessSiteModel(row) {
-          searchAccessSiteListBySite({site:row.siteID,
+      searchAccessSiteListBySite({
+        site: row.siteID,
       }).then(({data}) => {
         this.accessSiteList = data.accessSiteList
         this.userList = data.userList
@@ -952,16 +958,19 @@
         }
       })
     },
+    getSiteDataDemo(params){
+      this.$message.success("这里是Site")
+    }
   },
   created() {
     this.getMultiLanguageList()//刷新按钮
     this.getData();
-
     //获取按钮的权限
     this.getButtonAuthData();
-
-
     this.getTableUserColumn()
+  },
+  activated() {
+    this.$store.commit("sift/commitSearchFunction",this.getSiteDataDemo)
   }
 }
 </script>