电子保单过滤菜单
Showing
4 changed files
with
116 additions
and
15 deletions
| ... | @@ -266,7 +266,7 @@ module.exports = { | ... | @@ -266,7 +266,7 @@ module.exports = { |
| 266 | verifyCodeGet: "Get SMS verification code", | 266 | verifyCodeGet: "Get SMS verification code", |
| 267 | agree: "Agree with ", | 267 | agree: "Agree with ", |
| 268 | protocol: "Ping An Hong Kong’s Online Account Service Agreement", | 268 | protocol: "Ping An Hong Kong’s Online Account Service Agreement", |
| 269 | register: "Click to reister", | 269 | register: "Click to register", |
| 270 | newPassword: "Password", | 270 | newPassword: "Password", |
| 271 | newPasswordPlaceholder: "Please enter password", | 271 | newPasswordPlaceholder: "Please enter password", |
| 272 | newPasswordSure: "Confirm password", | 272 | newPasswordSure: "Confirm password", | ... | ... |
| ... | @@ -43,7 +43,12 @@ export default { | ... | @@ -43,7 +43,12 @@ export default { |
| 43 | showDownloadError: false, | 43 | showDownloadError: false, |
| 44 | filterVisible: false, | 44 | filterVisible: false, |
| 45 | checkList: [], | 45 | checkList: [], |
| 46 | filterKey: "" | 46 | filterKey: "", |
| 47 | // 候选值 | ||
| 48 | bizNoCandidates: null, | ||
| 49 | letterTypeCandiates: null, | ||
| 50 | printTimeCandidates: null, | ||
| 51 | isReadCandiates: null | ||
| 47 | } | 52 | } |
| 48 | }, | 53 | }, |
| 49 | computed: { | 54 | computed: { |
| ... | @@ -61,21 +66,53 @@ export default { | ... | @@ -61,21 +66,53 @@ export default { |
| 61 | sid: true | 66 | sid: true |
| 62 | }).then(res => { | 67 | }).then(res => { |
| 63 | // if (window.global.mockData) { | 68 | // if (window.global.mockData) { |
| 64 | // res.push({ "recordId": "10", "bizNo": "P000000000000318", "letterType": "2", "printTime": "2020-05-03 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" }) | 69 | // res.push({ "recordId": "10", "bizNo": "P000000000000318", "letterType": "5", "printTime": "2020-05-03 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" }) |
| 65 | // res.push({ "recordId": "10", "bizNo": "P000000000000319", "letterType": "2", "printTime": "2020-05-04 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" }) | 70 | // res.push({ "recordId": "10", "bizNo": "P000000000000319", "letterType": "5", "printTime": "2020-05-04 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "N" }) |
| 66 | // res.push({ "recordId": "10", "bizNo": "P000000000000320", "letterType": "2", "printTime": "2020-05-05 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) | 71 | // res.push({ "recordId": "10", "bizNo": "P000000000000320", "letterType": "5", "printTime": "2020-05-05 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) |
| 67 | // res.push({ "recordId": "10", "bizNo": "P000000000000321", "letterType": "2", "printTime": "2020-05-06 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) | 72 | // res.push({ "recordId": "10", "bizNo": "P000000000000321", "letterType": "5", "printTime": "2020-05-06 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) |
| 68 | // res.push({ "recordId": "10", "bizNo": "P000000000000322", "letterType": "2", "printTime": "2020-05-07 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) | 73 | // res.push({ "recordId": "10", "bizNo": "P000000000000322", "letterType": "5", "printTime": "2020-05-07 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) |
| 69 | // res.push({ "recordId": "10", "bizNo": "P000000000000323", "letterType": "2", "printTime": "2020-05-08 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) | 74 | // res.push({ "recordId": "10", "bizNo": "P000000000000323", "letterType": "5", "printTime": "2020-05-08 16:02:21", "key": "c4ace2829737459cb6c95f523e0f5223", "isRead": "Y" }) |
| 70 | // } | 75 | // } |
| 71 | console.log(res); | 76 | // this.isReadCandiates = [{ "v": "N", "n": this.i18n.eCorrespondenceEnquiry.UnRead }, { "v": "Y", "n": this.i18n.eCorrespondenceEnquiry.Read }]; |
| 77 | this.letterTypeCandiates = [{ "v": "5", "n": this.i18n.eCorrespondenceEnquiry.letterName }]; | ||
| 78 | |||
| 79 | // 缓存,用于判断重复 | ||
| 80 | let bizNoCache = []; | ||
| 81 | let printTimeCache = []; | ||
| 82 | let isReadCache = []; | ||
| 83 | let letterTypeCache = []; | ||
| 84 | |||
| 85 | let newBizNoCandidates = [], newPrintTimeCandidates = [], newIsReadCandiates = []; | ||
| 86 | |||
| 72 | for (let index = 0; index < res.length; index++) { | 87 | for (let index = 0; index < res.length; index++) { |
| 73 | let letter = res[index]; | 88 | let letter = res[index]; |
| 74 | if (letter.letterType == "5") { | 89 | if (letter.letterType == "5") { |
| 90 | let bizNo = letter.bizNo; | ||
| 91 | let printTime = letter.printTime.split(" ")[0]; | ||
| 92 | let isRead = letter.isRead; | ||
| 93 | |||
| 94 | if (bizNoCache.indexOf(bizNo) < 0) { | ||
| 95 | bizNoCache.push(bizNo); | ||
| 96 | newBizNoCandidates.push({ "v": bizNo, "n": bizNo }); | ||
| 97 | } | ||
| 98 | if (printTimeCache.indexOf(printTime) < 0) { | ||
| 99 | printTimeCache.push(printTime); | ||
| 100 | newPrintTimeCandidates.push({ "v": printTime, "n": printTime }); | ||
| 101 | } | ||
| 102 | |||
| 103 | if (isReadCache.indexOf(isRead) < 0) { | ||
| 104 | isReadCache.push(isRead); | ||
| 105 | let n = isRead == "Y" ? this.i18n.eCorrespondenceEnquiry.Read : this.i18n.eCorrespondenceEnquiry.UnRead; | ||
| 106 | newIsReadCandiates.push({ v: isRead, n: n }); | ||
| 107 | } | ||
| 108 | |||
| 75 | this.originalList.push(letter); | 109 | this.originalList.push(letter); |
| 76 | this.contentList.push(letter); | 110 | this.contentList.push(letter); |
| 77 | } | 111 | } |
| 78 | } | 112 | } |
| 113 | this.bizNoCandidates = newBizNoCandidates; | ||
| 114 | this.printTimeCandidates = newPrintTimeCandidates; | ||
| 115 | this.isReadCandiates = newIsReadCandiates; | ||
| 79 | }); | 116 | }); |
| 80 | }, | 117 | }, |
| 81 | onShowTipsOverHandler(event, item, index) { | 118 | onShowTipsOverHandler(event, item, index) { |
| ... | @@ -86,6 +123,37 @@ export default { | ... | @@ -86,6 +123,37 @@ export default { |
| 86 | let child = event.currentTarget.childNodes[0]; | 123 | let child = event.currentTarget.childNodes[0]; |
| 87 | child.style.display = "none"; | 124 | child.style.display = "none"; |
| 88 | }, | 125 | }, |
| 126 | // 过滤bizNo | ||
| 127 | handleFiltBizNo(common) { | ||
| 128 | this.doFilt('bizNo', common); | ||
| 129 | }, | ||
| 130 | // 头部过滤类型 | ||
| 131 | handleFiltLetterType(common) { | ||
| 132 | this.doFilt('letterType', common); | ||
| 133 | }, | ||
| 134 | // 头部过滤日期 | ||
| 135 | handleFiltPrintTime(common) { | ||
| 136 | this.doFilt('printTime', common); | ||
| 137 | }, | ||
| 138 | // 头部过滤是否已读 | ||
| 139 | handleFiltIsRead(common) { | ||
| 140 | this.doFilt('isRead', common); | ||
| 141 | }, | ||
| 142 | doFilt(key, value) { | ||
| 143 | let newList = []; | ||
| 144 | for (let index in this.originalList) { | ||
| 145 | let letter = this.originalList[index]; | ||
| 146 | let v = letter[key]; | ||
| 147 | if (key == "printTime") { | ||
| 148 | v = v.split(" ")[0]; | ||
| 149 | } | ||
| 150 | // 这里的letterType 暂时只有5 | ||
| 151 | if (key == 'letterType' || value == v) { | ||
| 152 | newList.push(letter); | ||
| 153 | } | ||
| 154 | } | ||
| 155 | this.contentList = newList; | ||
| 156 | }, | ||
| 89 | // 过滤筛选 | 157 | // 过滤筛选 |
| 90 | onFilterHandler(key) { | 158 | onFilterHandler(key) { |
| 91 | if (this.originalList.length <= 0) return; | 159 | if (this.originalList.length <= 0) return; | ... | ... |
| ... | @@ -6,20 +6,49 @@ | ... | @@ -6,20 +6,49 @@ |
| 6 | <div class="table-contaner"> | 6 | <div class="table-contaner"> |
| 7 | <div class="table-header orange new"> | 7 | <div class="table-header orange new"> |
| 8 | <div class="normal-header"> | 8 | <div class="normal-header"> |
| 9 | <div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}} | 9 | <div class="td w1"> |
| 10 | <div @click="onFilterHandler('bizNo')" class="down-arrow"></div> | 10 | {{$t('eCorrespondenceEnquiry.PolicyNumber')}} |
| 11 | <!-- <div @click="onFilterHandler('bizNo')" class="down-arrow"></div> --> | ||
| 12 | <el-dropdown @command="handleFiltBizNo" v-if="handleFiltLetterType"> | ||
| 13 | <div class="down-arrow"></div> | ||
| 14 | <el-dropdown-menu slot="dropdown"> | ||
| 15 | <el-dropdown-item v-for="(item,index) in bizNoCandidates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item> | ||
| 16 | </el-dropdown-menu> | ||
| 17 | </el-dropdown> | ||
| 18 | <div v-else class="down-arrow"></div> | ||
| 11 | </div> | 19 | </div> |
| 12 | <div class="td w2">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}} | 20 | <div class="td w2">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}} |
| 13 | <div @click="onFilterHandler('letterType')" class="down-arrow"></div> | 21 | <!-- <div @click="onFilterHandler('letterType')" class="down-arrow"></div> --> |
| 22 | <el-dropdown @command="handleFiltLetterType" v-if="handleFiltLetterType"> | ||
| 23 | <div class="down-arrow"></div> | ||
| 24 | <el-dropdown-menu slot="dropdown"> | ||
| 25 | <el-dropdown-item v-for="(item,index) in letterTypeCandiates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item> | ||
| 26 | </el-dropdown-menu> | ||
| 27 | </el-dropdown> | ||
| 28 | <div v-else class="down-arrow"></div> | ||
| 14 | </div> | 29 | </div> |
| 15 | <div class="td w3">{{$t('eCorrespondenceEnquiry.SentOutDate')}} | 30 | <div class="td w3">{{$t('eCorrespondenceEnquiry.SentOutDate')}} |
| 16 | <div @click="onFilterHandler('printTime')" class="down-arrow"></div> | 31 | <!-- <div @click="onFilterHandler('printTime')" class="down-arrow"></div> --> |
| 32 | <el-dropdown @command="handleFiltPrintTime" v-if="printTimeCandidates"> | ||
| 33 | <div class="down-arrow"></div> | ||
| 34 | <el-dropdown-menu slot="dropdown"> | ||
| 35 | <el-dropdown-item v-for="(item,index) in printTimeCandidates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item> | ||
| 36 | </el-dropdown-menu> | ||
| 37 | </el-dropdown> | ||
| 38 | <div v-else class="down-arrow"></div> | ||
| 17 | </div> | 39 | </div> |
| 18 | <div class="td w4">{{$t('eCorrespondenceEnquiry.DownloadLink')}} | 40 | <div class="td w4">{{$t('eCorrespondenceEnquiry.DownloadLink')}} |
| 19 | 41 | ||
| 20 | </div> | 42 | </div> |
| 21 | <div @click="onFilterHandler('isRead')" class="td w5">{{$t('eCorrespondenceEnquiry.Status')}} | 43 | <div class="td w5">{{$t('eCorrespondenceEnquiry.Status')}} |
| 44 | <!-- <div class="down-arrow"></div> --> | ||
| 45 | <el-dropdown @command="handleFiltIsRead" v-if="handleFiltIsRead"> | ||
| 22 | <div class="down-arrow"></div> | 46 | <div class="down-arrow"></div> |
| 47 | <el-dropdown-menu slot="dropdown"> | ||
| 48 | <el-dropdown-item v-for="(item,index) in isReadCandiates" :key="index" :command="item.v">{{item.n}}</el-dropdown-item> | ||
| 49 | </el-dropdown-menu> | ||
| 50 | </el-dropdown> | ||
| 51 | <div v-else class="down-arrow"></div> | ||
| 23 | </div> | 52 | </div> |
| 24 | </div> | 53 | </div> |
| 25 | </div> | 54 | </div> |
| ... | @@ -33,7 +62,7 @@ | ... | @@ -33,7 +62,7 @@ |
| 33 | <div class="td w2">{{$t("eCorrespondenceEnquiry.letterName")}}</div> | 62 | <div class="td w2">{{$t("eCorrespondenceEnquiry.letterName")}}</div> |
| 34 | <div class="td w3">{{item.printTime.split(" ")[0]}}</div> | 63 | <div class="td w3">{{item.printTime.split(" ")[0]}}</div> |
| 35 | <div class="td w4 pointer" @click="downloadPolicy(item)"> | 64 | <div class="td w4 pointer" @click="downloadPolicy(item)"> |
| 36 | <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" > | 65 | <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)"> |
| 37 | <div class="download-tips"> | 66 | <div class="download-tips"> |
| 38 | <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div> | 67 | <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div> |
| 39 | </div> | 68 | </div> | ... | ... |
-
Please register or sign in to post a comment