2024-05-09

src/views/common/filterSearch.vue

@@ -0,0 +1,499 @@
+<script>
+import {
+  removeQueryHeaderDetail,
+  saveOrUpdateBatch, saveQueryHeaderDetail,
+  searchUserSettingList,
+  searchUserSettingRecording,
+  searchUserSettingRecordList, updateQueryHeaderDetail
+} from "../../api/sift/queryUserSetting";
+
+const saveHeader = {
+  menuId:null,
+  userId:null,
+  itemNo:null,
+  itemDesc:null,
+  caseSensitiveFlag:null,
+}
+export default {
+  name: "filterSearch",
+  props:{
+    visible:{
+      type:Boolean,
+      default:false
+    },
+    title:{
+      type:String,
+      default:'筛选条件'
+    }
+  },
+  data(){
+    return{
+      loadingTableList:false,
+      showSettingTableList:[],
+      tableList:[],// 参数
+      copyTableList:[],// 临时参数
+      selectList:[],// 历史
+      selectValue:null,// 历史
+      showSetting:false,// 是否显示设置
+      caseInsensitive:'N',//是否区分大小写
+      control:0,//控制弹框
+      selectVisible:false,//历史选择弹框
+      saveHeader:{
+        ...saveHeader
+      },
+      rules:{
+        itemDesc: [
+          { required: true, message: '请输入描述', trigger: ['blur','change'] }
+        ],
+      }
+    }
+  },
+  methods:{
+    getTableList(){
+      let params = {
+        menuId:this.$route.meta.menuId,
+        userId:this.$store.state.user.id
+      }
+      this.tableList = []
+      this.copyTableList = []
+      this.loadingTableList = true
+      searchUserSettingList(params).then(({data})=>{
+        this.loadingTableList = false
+        if (data && data.code === 0){
+          this.tableList = data.rows
+          this.copyTableList = JSON.parse(JSON.stringify(this.tableList.filter(e => e.visible === 'Y')))
+          this.changeSelectTable(this.selectValue)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      }).catch((error)=>{
+        this.loadingTableList = false
+        this.$message.error(error)
+      })
+    },
+    getSelectList(){
+      let params = {
+        menuId:this.$route.meta.menuId,
+        userId:this.$store.state.user.id
+      }
+      this.selectList = []
+      searchUserSettingRecordList(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.selectList = data.rows
+          console.log(this.selectList)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      }).catch((error)=>{
+        this.$message.error(error)
+      })
+    },
+    closeFilterTable(){
+      this.$emit("update:visible",false)
+    },
+    handleSetting(){
+      if (this.showSetting){
+        saveOrUpdateBatch(this.tableList).then(({data})=>{
+          if (data && data.code === 0){
+            this.getTableList()
+            this.showSetting = false
+            this.$message.success(data.msg)
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      }else {
+        this.showSetting = true;
+      }
+    },
+    selectRow(selection,row){
+      if (row.visible === 'Y'){
+        row.visible = 'N'
+      }else {
+        row.visible = 'Y'
+      }
+    },
+    clearTableList(){
+      if (this.showSetting){
+        this.tableList = this.tableList.map(row=>{
+          row.sortBy = '';
+          row.symbol = '';
+          row.formula = '';
+          return row;
+        })
+      }else {
+        this.selectValue = null;
+        this.caseInsensitive = 'N';
+        this.copyTableList = this.copyTableList.map(row=>{
+          row.sortBy = '';
+          row.symbol = '';
+          row.formula = '';
+          return row;
+        })
+      }
+    },
+    cancelSetting(){
+      this.tableList = JSON.parse(JSON.stringify(this.showSettingTableList))
+      this.showSetting = false;
+    },
+    searchTable(){
+      let params = {
+        menuId:this.$route.meta.menuId,
+        userId:this.$store.state.user.id,
+        caseSensitiveFlag:this.caseInsensitive,
+        querySavedDetailList:this.copyTableList,
+      }
+      this.$emit("search",params);
+    },
+    changeSelectTable(val){
+      if (val && this.control !== val){
+        let params = {
+          menuId:this.$route.meta.menuId,
+          userId:this.$store.state.user.id,
+          itemNo:val
+        }
+        this.selectList.forEach(item=>{
+          if (item.itemNo === val){
+            this.caseInsensitive = item.caseSensitiveFlag
+          }
+        })
+        searchUserSettingRecording(params).then(({data})=>{
+          if (data && data.code === 0){
+            let rows = data.rows
+            rows.forEach((row)=>{
+              if (this.showSetting){
+                for (let i = 0; i < this.tableList.length; i++) {
+                  let sift = this.tableList[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
+                  }
+                }
+              }else {
+                for (let i = 0; i < this.copyTableList.length; i++) {
+                  let sift = this.copyTableList[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
+                  }
+                }
+              }
+
+            })
+          }else {
+            this.$message.warning(data.msg)
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      }else {
+        this.caseInsensitive = 'N'
+        this.copyTableList = this.tableList.filter(e => e.visible === 'Y')
+      }
+    },
+    moveSetting(index,direction){
+      let arr = [...this.tableList]
+      let temp = arr[index+direction]
+      console.log(temp)
+      arr[index+direction] = arr[index]
+      arr[index] = temp
+      this.tableList = arr
+    },
+    clickRemoveRecord(itemNo){
+      let params = {
+        menuId:this.$route.meta.menuId,
+        userId:this.$store.state.user.id,
+        itemNo:itemNo
+      }
+      this.control = itemNo;
+      this.$nextTick(()=>{
+        this.$refs.record.visible = true;
+        this.selectValue = '';
+      })
+      removeQueryHeaderDetail(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.getSelectList()
+          this.$message.success(data.msg)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      }).catch(error=>{
+        this.$message.error(error)
+      })
+    },
+    visibleRecordChange(val){
+      if (val === false){
+        this.control = 0;
+      }
+    },
+    updateHeaderRecord(){
+      let desc = "";
+      this.selectList.forEach(item=>{
+        if (item.itemNo === this.selectValue){
+          desc = item.itemDesc;
+          return
+        }
+      })
+      const list = this.copyTableList.map((item)=>{
+        item.itemNo = this.selectValue;
+        item.itemDesc = desc;
+        return item;
+      })
+      let params = {
+        menuId:this.$route.meta.menuId,
+        userId:this.$store.state.user.id,
+        itemNo:this.selectValue,
+        caseSensitiveFlag:this.caseInsensitive,
+        dtsName:'ADOQResult',
+        querySavedDetailList:list,
+      }
+      updateQueryHeaderDetail(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.$message.success(data.msg)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      }).catch((error)=>{
+        this.$message.error(error)
+      })
+    },
+    saveHeaderRecord(){
+      this.$refs.saveForm.validate((valid,obj) => {
+        if (valid){
+          let params = {
+            ...this.saveHeader,
+            menuId:this.$route.meta.menuId,
+            userId:this.$store.state.user.id,
+            itemNo:this.selectValue,
+            caseSensitiveFlag:this.caseInsensitive,
+            dtsName:'ADOQResult',
+            querySavedDetailList:this.copyTableList,
+          }
+          saveQueryHeaderDetail(params).then(({data})=>{
+            if (data && data.code === 0){
+              this.getSelectList();
+              this.selectVisible = false
+              this.$message.success(data.msg)
+            }else {
+              this.$message.warning(data.msg)
+            }
+          }).catch((error)=>{
+            this.$message.error(error)
+          })
+        }else {
+          Object.keys(obj).forEach(key=>{
+            this.$message.warning(obj[key][0].message)
+          })
+        }
+      })
+    },
+    handleSave(){
+      if (!this.selectValue){
+        this.selectVisible = true;
+      }else if (this.selectValue === 1){
+        this.$message.warning('无法修改上一次查询')
+      }else {
+        this.updateHeaderRecord();
+      }
+    },
+    closeSaveHeader(){
+      this.saveHeader = {
+        ...saveHeader
+      }
+      this.$refs.saveForm.resetFields();
+    },
+    openFilterTable(){
+      if (this.$route.meta && this.$route.meta.menuId){
+        this.getTableList()
+        this.getSelectList()
+      }
+    },
+    beforeCloseFilterTable(done){
+      if (!this.showSetting){
+        done()
+      }else {
+        this.$confirm('当前有设置未保存，是否确认关闭？').then(() => {
+          this.cancelSetting();
+          done()
+        }).catch(() => {
+
+        })
+      }
+    }
+  },
+  watch:{
+    showSetting(newVal,oldVal){
+      if (newVal === true){
+        this.showSettingTableList = JSON.parse(JSON.stringify(this.tableList))
+      }else {
+        this.showSettingTableList = []
+      }
+    },
+    tableList(newVal,oldVal){
+      this.$nextTick(()=>{
+        this.tableList.forEach(row=>{
+          this.$refs.settingTable.toggleRowSelection(row,row.visible === 'Y')
+        })
+      })
+    }
+  },
+  created() {
+
+  }
+
+}
+</script>
+
+<template>
+  <div>
+    <el-dialog :title="title" v-drag :visible.sync="visible" width="750px" :before-close="beforeCloseFilterTable" @open="openFilterTable" @close="closeFilterTable" append-to-body>
+      <div>
+        <el-select ref="record" v-model="selectValue" @visible-change="visibleRecordChange" style="width: 30%" @change="changeSelectTable" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in selectList"
+            :key="item.itemNo"
+            :label="item.itemDesc"
+            :value="item.itemNo">
+            <span style="float: left">{{ item.itemDesc }}</span>
+            <span style="float:right;" v-if="item.itemNo > 1">
+            <el-button @click="clickRemoveRecord(item.itemNo)" style="padding: 2px" plain circle size="mini" icon="el-icon-close"></el-button>
+          </span>
+          </el-option>
+        </el-select>
+        <div style="float: right;margin-right: 15%;width: 200px" >
+        <span style="float:right;">
+          <el-button type="primary" plain @click="handleSave">保存</el-button>
+        </span>
+        </div>
+      </div>
+      <div style="display: flex;gap: 5px">
+        <div style="width: 85%;height: 400px" v-loading="loadingTableList" element-loading-text="加载中">
+          <el-table :data="tableList" @select="selectRow" ref="settingTable" border height="100%" v-show="showSetting">
+            <el-table-column
+              type="selection"
+              width="40" align="center">
+            </el-table-column>
+            <el-table-column label="操作" align="left" header-align="center" width="65" >
+              <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 !== tableList.length-1">下移</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column label="属性名称" align="left" header-align="center" show-overflow-tooltip width="120" prop="fieldCaption"></el-table-column>
+            <el-table-column label="条件" align="center" width="240">
+              <template slot-scope="{row,$index}">
+                <el-input v-model="row.formula" clearable>
+                  <el-select slot="prepend" clearable v-model="row.symbol" style="width: 100px;cursor:pointer;">
+                    <el-option value="eq" label="等于"></el-option>
+                    <el-option value="gt" label="大于"></el-option>
+                    <el-option value="ge" label="大于等于"></el-option>
+                    <el-option value="lt" label="小于"></el-option>
+                    <el-option value="le" label="小于等于"></el-option>
+                    <el-option value="between" label="之间"></el-option>
+                    <el-option value="in" label="或者"></el-option>
+                    <el-option value="ne" label="不等于"></el-option>
+                    <el-option value="like" label="LIKE"></el-option>
+                  </el-select>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" align="center" prop="sortBy" show-overflow-tooltip width="80">
+              <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="orderSeq" width="60">
+              <template slot-scope="{row,$index}">
+                <el-input-number v-model="row.orderSeq" clearable style="width: 100%;" :controls="false"></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column label="数据库字段" align="center" prop="originalField" show-overflow-tooltip width="120"></el-table-column>
+          </el-table>
+
+          <el-table :data="copyTableList" border height="100%" v-show="!showSetting">
+            <el-table-column label="属性名称" align="left" header-align="center" show-overflow-tooltip width="120" prop="fieldCaption"></el-table-column>
+            <el-table-column label="条件" align="center" header-align="center" width="240">
+              <template slot-scope="{row,$index}">
+                <el-input v-model="row.formula" clearable>
+                  <el-select slot="prepend" clearable v-model="row.symbol" style="width: 80px;cursor:pointer;">
+                    <el-option value="eq" label="等于"></el-option>
+                    <el-option value="gt" label="大于"></el-option>
+                    <el-option value="ge" label="大于等于"></el-option>
+                    <el-option value="lt" label="小于"></el-option>
+                    <el-option value="le" label="小于等于"></el-option>
+                    <el-option value="between" label="之间"></el-option>
+                    <el-option value="in" label="或者"></el-option>
+                    <el-option value="ne" label="不等于"></el-option>
+                    <el-option value="like" label="LIKE"></el-option>
+                  </el-select>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" align="center" prop="sortBy" show-overflow-tooltip width="80">
+              <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="orderSeq" width="60">
+              <template slot-scope="{row,$index}">
+                <el-input-number v-model="row.orderSeq" clearable style="width: 100%;" :controls="false"></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column label="数据库字段" align="left" header-align="center" prop="originalField" show-overflow-tooltip width="120"></el-table-column>
+          </el-table>
+        </div>
+        <div style="width: 15%;">
+          <div style="margin-bottom: 10px" v-if="!showSetting">
+            <el-button type="primary" plain style="width: 80px;padding: 10px 25px" @click="searchTable">查询</el-button>
+          </div>
+          <div style="margin: 10px 0;" :style="{marginTop: !showSetting ? '10px' : '0'}">
+            <el-button type="primary" style="width: 80px;padding: 10px 25px" @click="getTableList">刷新</el-button>
+          </div>
+          <div style="margin: 10px 0;" >
+            <el-button type="primary" style="width: 80px;padding: 10px 25px" @click="clearTableList">清除</el-button>
+          </div>
+          <div style="margin: 10px 0;">
+            <el-button type="primary" style="width: 80px;padding: 10px 25px;" @click="handleSetting">{{ !showSetting?"设置":"保存" }}</el-button>
+          </div>
+          <div style="margin: 10px 0;" v-if="showSetting">
+            <el-button type="primary" style="width: 80px;padding: 10px 25px" @click="cancelSetting">取消</el-button>
+          </div>
+          <div v-if="!showSetting">
+            <el-checkbox v-model="caseInsensitive" :true-label="'Y'" :false-label="'N'">不区分大小写</el-checkbox>
+          </div>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </el-dialog>
+
+    <el-dialog title="条件名称" v-drag @close="closeSaveHeader" :visible.sync="selectVisible" width="300px" append-to-body>
+      <el-form label-position="top" ref="saveForm" :rules="rules" :model="saveHeader">
+        <el-form-item label="描述" prop="itemDesc" :show-message="false">
+          <el-input v-model="saveHeader.itemDesc"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveHeaderRecord">确定</el-button>
+        <el-button @click="selectVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+/deep/ .el-table .cell{
+  height: auto;
+}
+</style>