|
|
|
@ -1,53 +1,157 @@ |
|
|
|
<template> |
|
|
|
<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-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> |
|
|
|
<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="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> |
|
|
|
|
