ccl_plm-vue/src/views/main-content.vue

<template>
  <div>
    <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
      <!-- 主入口标签页 s -->
      <el-tabs
        v-if="$route.meta.isTab"
        v-model="mainTabsActiveName"
        :closable="true"
        @tab-click="selectedTabHandle"
        @tab-remove="removeTabHandle">
        <el-dropdown class="site-tabs__tools" :show-timeout="0">
          <i class="el-icon-arrow-down el-icon--right"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
            <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
          v-for="item in mainTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name">
          <el-card :body-style="siteContentViewHeight">
            <iframe
              v-if="item.type === 'iframe'"
              :src="item.iframeUrl"
              width="100%" height="100%" frameborder="0" scrolling="yes">
            </iframe>
            <keep-alive v-else>
              <router-view v-if="item.name === mainTabsActiveName" />
            </keep-alive>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      <!-- 主入口标签页 e -->
      <el-card v-else :body-style="siteContentViewHeight">
        <keep-alive>
          <router-view />
        </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="querySavedVo.itemDesc">
            <el-button @click="searchQuerySavedVo" 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>
                  <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="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="orderSeq" width="120">
              <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-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 class="box-div" v-if="!settingFlag">
                  <el-checkbox v-model="querySavedVo.caseSensitiveFlag" true-label="Y" false-label="N">不区分大小写</el-checkbox>
                </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:[],
        selectData:{
          itemDesc:undefined,
        },
        querySavedVo:{
          menuId:this.$route.meta.menuId,
          userId:this.$store.state.user.id,
          itemNo:undefined,
          itemDesc:undefined,
          caseSensitiveFlag:'N'
        },
        saveQueryHeader:false,
      }
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 50 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          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: {
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.mainTabs.filter(item => item.name === tab.name)
        if (tab.length >= 1) {
          this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            var tab = this.mainTabs[this.mainTabs.length - 1]
            this.$router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        }
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        console.log(this.$route.meta.menuId)
        this.removeTabHandle(this.mainTabsActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.mainTabs = []
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tab = this.$route
        this.removeTabHandle(tab.name)
        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.querySavedVo={
          menuId:this.$route.meta.menuId,
            userId:this.$store.state.user.id,
            itemNo:undefined,
            itemDesc:undefined,
            caseSensitiveFlag:'N'
        };
      },
      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.querySavedVo={
              menuId:this.$route.meta.menuId,
                userId:this.$store.state.user.id,
                itemNo:undefined,
                itemDesc:undefined,
                caseSensitiveFlag:'N'
            }
            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.querySavedVo = {
          menuId:this.$route.meta.menuId,
            userId:this.$store.state.user.id,
            itemNo:undefined,
            itemDesc:undefined,
            caseSensitiveFlag:'N'
        };
        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.querySavedVo={
          menuId:this.$route.meta.menuId,
            userId:this.$store.state.user.id,
            itemNo:undefined,
            itemDesc:undefined,
            caseSensitiveFlag:'N'
        }
        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.querySavedVo.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)
        })
      },
      searchQuerySavedVo(){
        let params = {...this.querySavedVo}
        params.querySavedDetailList = this.siftList
        this.$store.state.sift.searchFunction(params)
      }
    },
    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);
 }

 .el-input-number /deep/ .el-input__inner{
   text-align: right;
   padding-right: 5px !important;
 }

 /deep/ .el-input-number--medium{
   line-height: 20px;
 }
</style>