Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
11cb5d98 by joe
Options

电子保单过滤菜单

1 parent 0879e304
Inline Side-by-side
Showing 4 changed files with 119 additions and 18 deletions
......@@ -266,7 +266,7 @@ module.exports = {
verifyCodeGet: "Get SMS verification code",
agree: "Agree with ",
protocol: "Ping An Hong Kong’s Online Account Service Agreement",
register: "Click to reister",
register: "Click to register",
newPassword: "Password",
newPasswordPlaceholder: "Please enter password",
newPasswordSure: "Confirm password",
......
......@@ -43,7 +43,12 @@ export default {
showDownloadError: false,
filterVisible: false,
checkList: [],
filterKey: ""
filterKey: "",
// 候选值
bizNoCandidates: null,
letterTypeCandiates: null,
printTimeCandidates: null,
isReadCandiates: null
}
},
computed: {
......@@ -61,21 +66,53 @@ export default {
sid: true
}).then(res => {
// if (window.global.mockData) {
// res.push({ "recordId": "10", "bizNo": "P000000000000318", "letterType": "2", "printTime": "2020-05-03 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" })
// res.push({ "recordId": "10", "bizNo": "P000000000000319", "letterType": "2", "printTime": "2020-05-04 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" })
// res.push({ "recordId": "10", "bizNo": "P000000000000320", "letterType": "2", "printTime": "2020-05-05 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000321", "letterType": "2", "printTime": "2020-05-06 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000322", "letterType": "2", "printTime": "2020-05-07 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000323", "letterType": "2", "printTime": "2020-05-08 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000318", "letterType": "5", "printTime": "2020-05-03 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" })
// res.push({ "recordId": "10", "bizNo": "P000000000000319", "letterType": "5", "printTime": "2020-05-04 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" })
// res.push({ "recordId": "10", "bizNo": "P000000000000320", "letterType": "5", "printTime": "2020-05-05 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000321", "letterType": "5", "printTime": "2020-05-06 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000322", "letterType": "5", "printTime": "2020-05-07 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// res.push({ "recordId": "10", "bizNo": "P000000000000323", "letterType": "5", "printTime": "2020-05-08 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" })
// }
console.log(res);
// this.isReadCandiates = [{ "v": "N", "n": this.i18n.eCorrespondenceEnquiry.UnRead }, { "v": "Y", "n": this.i18n.eCorrespondenceEnquiry.Read }];
this.letterTypeCandiates = [{ "v": "5", "n": this.i18n.eCorrespondenceEnquiry.letterName }];
// 缓存，用于判断重复
let bizNoCache = [];
let printTimeCache = [];
let isReadCache = [];
let letterTypeCache = [];
let newBizNoCandidates = [], newPrintTimeCandidates = [], newIsReadCandiates = [];
for (let index = 0; index < res.length; index++) {
let letter = res[index];
if (letter.letterType == "5") {
let bizNo = letter.bizNo;
let printTime = letter.printTime.split(" ")[0];
let isRead = letter.isRead;
if (bizNoCache.indexOf(bizNo) < 0) {
bizNoCache.push(bizNo);
newBizNoCandidates.push({ "v": bizNo, "n": bizNo });
}
if (printTimeCache.indexOf(printTime) < 0) {
printTimeCache.push(printTime);
newPrintTimeCandidates.push({ "v": printTime, "n": printTime });
}
if (isReadCache.indexOf(isRead) < 0) {
isReadCache.push(isRead);
let n = isRead == "Y" ? this.i18n.eCorrespondenceEnquiry.Read : this.i18n.eCorrespondenceEnquiry.UnRead;
newIsReadCandiates.push({ v: isRead, n: n });
}
this.originalList.push(letter);
this.contentList.push(letter);
}
}
this.bizNoCandidates = newBizNoCandidates;
this.printTimeCandidates = newPrintTimeCandidates;
this.isReadCandiates = newIsReadCandiates;
});
},
onShowTipsOverHandler(event, item, index) {
......@@ -86,6 +123,37 @@ export default {
let child = event.currentTarget.childNodes[0];
child.style.display = "none";
},
// 过滤bizNo
handleFiltBizNo(common) {
this.doFilt('bizNo', common);
},
// 头部过滤类型
handleFiltLetterType(common) {
this.doFilt('letterType', common);
},
// 头部过滤日期
handleFiltPrintTime(common) {
this.doFilt('printTime', common);
},
// 头部过滤是否已读
handleFiltIsRead(common) {
this.doFilt('isRead', common);
},
doFilt(key, value) {
let newList = [];
for (let index in this.originalList) {
let letter = this.originalList[index];
let v = letter[key];
if (key == "printTime") {
v = v.split(" ")[0];
}
// 这里的letterType 暂时只有5
if (key == 'letterType' || value == v) {
newList.push(letter);
}
}
this.contentList = newList;
},
// 过滤筛选
onFilterHandler(key) {
if (this.originalList.length <= 0) return;
......
......@@ -237,4 +237,8 @@
background-size: 100% 100%;
margin-left: 7px;
cursor: pointer;
}
.el-dropdown{
font-size: 18px;
}
\ No newline at end of file
......
......@@ -6,20 +6,49 @@
<div class="table-contaner">
<div class="table-header orange new">
<div class="normal-header">
<div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}}
<div @click="onFilterHandler('bizNo')" class="down-arrow"></div>
<div class="td w1">
{{$t('eCorrespondenceEnquiry.PolicyNumber')}}
<!-- <div @click="onFilterHandler('bizNo')" class="down-arrow"></div> -->
<el-dropdown @command="handleFiltBizNo" v-if="handleFiltLetterType">
<div class="down-arrow"></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in bizNoCandidates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-else class="down-arrow"></div>
</div>
<div class="td w2">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}}
<div @click="onFilterHandler('letterType')" class="down-arrow"></div>
<!-- <div @click="onFilterHandler('letterType')" class="down-arrow"></div> -->
<el-dropdown @command="handleFiltLetterType" v-if="handleFiltLetterType">
<div class="down-arrow"></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in letterTypeCandiates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-else class="down-arrow"></div>
</div>
<div class="td w3">{{$t('eCorrespondenceEnquiry.SentOutDate')}}
<div @click="onFilterHandler('printTime')" class="down-arrow"></div>
<!-- <div @click="onFilterHandler('printTime')" class="down-arrow"></div> -->
<el-dropdown @command="handleFiltPrintTime" v-if="printTimeCandidates">
<div class="down-arrow"></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in printTimeCandidates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-else class="down-arrow"></div>
</div>
<div class="td w4">{{$t('eCorrespondenceEnquiry.DownloadLink')}}
</div>
<div @click="onFilterHandler('isRead')" class="td w5">{{$t('eCorrespondenceEnquiry.Status')}}
<div class="down-arrow"></div>
<div class="td w5">{{$t('eCorrespondenceEnquiry.Status')}}
<!-- <div class="down-arrow"></div> -->
<el-dropdown @command="handleFiltIsRead" v-if="handleFiltIsRead">
<div class="down-arrow"></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in isReadCandiates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-else class="down-arrow"></div>
</div>
</div>
</div>
......@@ -33,12 +62,12 @@
<div class="td w2">{{$t("eCorrespondenceEnquiry.letterName")}}</div>
<div class="td w3">{{item.printTime.split(" ")[0]}}</div>
<div class="td w4 pointer" @click="downloadPolicy(item)">
<div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" >
<div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)">
<div class="download-tips">
<div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
</div>
<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
<div class="desc">{{$t("eCorrespondenceEnquiry.DownloadDoc")}}</div>
<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
<div class="desc">{{$t("eCorrespondenceEnquiry.DownloadDoc")}}</div>
</div>
</div>
<div class="td w5">{{item.isRead == "N" ? $t('eCorrespondenceEnquiry.UnRead') : $t('eCorrespondenceEnquiry.Read')}}</div>
......