From 149f84d189814d62e7125c9972d3850fbdb7779d Mon Sep 17 00:00:00 2001 From: xuyiming Date: Mon, 18 May 2020 14:28:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86table-filter=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/imgs/bg_block.png | Bin 0 -> 2787 bytes src/assets/imgs/bg_block_hov.png | Bin 0 -> 3040 bytes src/assets/imgs/bg_mblock.png | Bin 0 -> 1863 bytes src/assets/imgs/ic_newdata.png | Bin 0 -> 1059 bytes src/assets/imgs/ic_olddata.png | Bin 0 -> 1059 bytes src/assets/imgs/ic_updata_cloud.png | Bin 0 -> 2196 bytes src/components/table-filter.vue | 218 ++++++++++++++++++++++++++++ src/components/table-um.vue | 178 ++--------------------- src/pages/fwglList.vue | 6 +- src/pages/yyglList.vue | 6 +- 10 files changed, 234 insertions(+), 174 deletions(-) create mode 100644 src/assets/imgs/bg_block.png create mode 100644 src/assets/imgs/bg_block_hov.png create mode 100644 src/assets/imgs/bg_mblock.png create mode 100644 src/assets/imgs/ic_newdata.png create mode 100644 src/assets/imgs/ic_olddata.png create mode 100644 src/assets/imgs/ic_updata_cloud.png create mode 100644 src/components/table-filter.vue diff --git a/src/assets/imgs/bg_block.png b/src/assets/imgs/bg_block.png new file mode 100644 index 0000000000000000000000000000000000000000..558b93e95bacd2055426dd9a8b73a4d31a5f5563 GIT binary patch literal 2787 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 F{|DyVPyYY_ literal 0 HcmV?d00001 diff --git a/src/assets/imgs/ic_olddata.png b/src/assets/imgs/ic_olddata.png new file mode 100644 index 0000000000000000000000000000000000000000..cfd5c72e2350189ddda4c0ef41ba61a88890df66 GIT binary patch literal 1059 zcmaJ=O-K|`93NMR@Cy$jee)Pg4BVZabw8ZJ&DNcDcfk=^m)wY`*_pTNpfhirdAg%W zWEN!+1Rf%Sv|ABGNry@(5a6vL56;V(Yf}|$pVG2sh&N3Qzjgo z>QBp4BQmGZ-KRj8%@Y9)VhPyVsBZCgm@ew_WbGU?G$=ywNSNM9DkBbnC^8`kc!F-3 z^#?$R^RU4VKgYELpO@`qyqyf&;bw!p-^=@ap!CrsnyKXYl+as>MRs9&7-NHHm_ni8 zDRg*{nP*sz;~1}x@%h{Y;kG7qEZJ_|YAGuS(2`Bnz$(&#qbOz3I1bY!)14ADV^>zU zN^K$yV{FM_SdZ5!sSFgw|3fux7j5Ab+{^c$!d80HfJ_QnXxx;^#pPO@PzE10p@fl{ zMrgF$#erdjku{7A5RE!r<3QVxsw=2qoh))hkx%LtmUI~=g)mK2JgTbjv0#uBdVB&G z3`AHq7KwQMY{Vb%vqC7ua(-W#D{le3p Hi&y>t=sQu3 literal 0 HcmV?d00001 diff --git a/src/assets/imgs/ic_updata_cloud.png b/src/assets/imgs/ic_updata_cloud.png new file mode 100644 index 0000000000000000000000000000000000000000..10a1f57138fc7a15bac41f4ece1992297d497eff GIT binary patch literal 2196 zcmaJ@dpuO@8XiL~Q!;Lawv5r9gP1#J1~H7w$Vi%lI>HzW6EkbfEE!5|MkN)BLqcrj zveTikNo0~Aa*1uHO?ASdwp7x^mX1wlX{UYuIL`Y0*81M>`@PTeKJWWIf2@ z7Oo}5}vry(rO}y^Z!$Y z!mrs<$Pf5a@Bbv0audV=!4HsvaS}d!aS>)KrNj(Z3BZFu2^R!oR;TD21wx=S3KU~p zU00??$Cw8QMB!k()Z#OS!(p&RQivzw18kNf7G}W<1mO&#jXQ}+qr1>;ZCpqsH#j6y z=uA5@)rLu=(P`vWEDPkv2>}tbiVgo0>$)a(#STI-T$u$(1P6g|cL^xOd~TZ|SX&Ey zO};PK@U^ut*TfQFF@%-N{jbYjJ%Syy5`MKVy!mQ=KmrOs?$F z(+klt`fhq%joWj2F8%#o6hevZnciZh;TuLxNzbxWDIHf^7&m*TgxZ#pi#Vz8J;Zuu z>Uq*Zrxl^^i+bQWsN#K9)hmURoQ1RimGmzwUEcJucusLoTzE)OBW-N#Wgkf{nt77H zG~1Ui?HBFqSPp5)x@s*$K9y^a@6J+Y$d5W()6_ELmT$~P)Lz^%2r5AT+dwr~c@Ogg z4I77(-)1$0C_Qd7O3$Xg&z8+3huYCpP?Krsfvw0Ixja!YRA-Yx=OjvD)k1n>n`iIGF=wT`;2x_p%j1VmsZX_SBc?Bxwi*s!r9=$t^>4i| z8JWuBYM1IRpys$UK&bi1bV;VL#XtYR0CG&iZn%MtzVR&IABmIqZd@8DZu!;g!KiXh zirPNEG>y;;2eO&>R2s9dnRVMtr3`QvCrc{JQqhs~ClBZjELtwubu%A*!w9~=sY^W6 zf6VjJecf4wNzmnNYH_ZL)39rr|4WM-O>>l{|^;4Gq}KsW8fC&A7cyq^C!I1px3I+&SNx%!d>Cp*GGz}YJ7zy zG^4KD6Bi7PC%f}VqAY4tXWKpKsp3bCH+d2+{1Nd z+9=w1U1(6s@Qpt7X#Ka}L@HRv%&({U-b?W^&Bg`bu!p&TK~FO?PjpWLuJo~*v`qljZx`E<+q=rm+*(nLjL z1C~m9PF3&!et^h%QF<#$v^~+t?P1Sf|7mLE{nqed{(Ro%q{pQh9*enK25xGlj#Oo+ zokAzcYKdh`aZ1~KWi*IpfG^hdSdbV=@6XM3EAv6yx2L-v-Vk3BDs z*Ui^H#J!aBy!iyR6xSG$)h9NO zokQ-bkNH6d>?<+(h-|qN<`ID!mD#&@)lv@kkQ9?kAB;0v@G-xSVt=V{_4CQj!yVIx za&=nR)1sydzn=m-&OY2w?c?s5`u=ob-b>vNi5gab{YRIB<*1wc_)Pcowk7M{*4UY` z-sO3tVD`KJr=O*U)S0rHy~QCX-xX>BokNu O6WDG(tZJ9gl>Y$x@P{D) literal 0 HcmV?d00001 diff --git a/src/components/table-filter.vue b/src/components/table-filter.vue new file mode 100644 index 0000000..40ce3b5 --- /dev/null +++ b/src/components/table-filter.vue @@ -0,0 +1,218 @@ + + + + + diff --git a/src/components/table-um.vue b/src/components/table-um.vue index 1aa76d4..e927b44 100644 --- a/src/components/table-um.vue +++ b/src/components/table-um.vue @@ -37,46 +37,11 @@ class="ces_toolbar_inp" > -
    -
  • -
    - -
    -
      -
    • - -
      • - -
      - {{ filterToggle[item.prop] ? "收起" : "展开" }} - -
      -
    -
    • -
+ -1 - ); - }, filterAction() { this.showFliterList = !this.showFliterList; - this.getFilterLength(); - }, - getFilterLength() { - if (this.showFliterList) { - this.$nextTick(() => { - let width = - this.$refs.filterContainer.getBoundingClientRect().width - - 20 * 2 - // 两侧padding - 100 - // 左侧标题 - 20 - // 距左侧标题的边距 - 110; // 折叠按钮的宽度 - - this.filterLength = Math.floor(width / 110); - // console.log("每行最多可容纳" + this.filterLength + "个filter"); - }); - } - }, - filterToggleAction(prop) { - this.$set(this.filterToggle, prop, !this.filterToggle[prop]); - }, - initFilterData() { - if (this.filterList && this.filterList.length) { - this.filterData = {}; - this.filterToggle = {}; - this.filterList.forEach((item) => { - this.$set(this.filterData, item.prop, []); - this.$set(this.filterToggle, item.prop, false); - }); - } - }, - selectFilter(prop, filter) { - if (this.isCurrentFilter(prop, filter)) { - this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1); - } else { - this.filterData[prop].push(filter); - } - console.log(this.filterData); }, + filterChange(filter) { + console.log(filter); + } }, }; @@ -796,75 +707,6 @@ em { text-overflow: ellipsis; white-space: nowrap; } -.ces_filter_container { - background-color: #f7f8f9; - padding: 14px 19px; - border: 1px solid #e3e5ef; - border-radius: 6px; - margin: 0 0 10px; -} -.ces_filter_container > li { - display: flex; - justify-content: flex-start; - align-items: flex-start; - padding-top: 12px; -} -.ces_filter_name { - width: 100px; - height: 30px; - flex-shrink: 0; - text-align: right; - font-size: 14px; - line-height: 30px; - font-weight: bold; - color: #1a2236; -} -.ces_filter_data { - width: calc(100% - 120px); - padding-right: 110px; - box-sizing: border-box; - margin-left: 20px; - flex-grow: 1; - display: inline-flex; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - padding-bottom: 11px; - position: relative; -} -.ces_filter_container > li:not(:last-child) > .ces_filter_data { - border-bottom: 1px solid #e9ecf3; -} -.ces_filter_data > li { - flex-shrink: 0; - padding-right: 20px; -} -.ces_filter_data > .toggle_bar { - height: 30px; - position: absolute; - top: 0; - right: 0; - font-size: 14px; - line-height: 30px; - color: #0f2683; - cursor: pointer; -} -.ces_filter_data > li > a { - display: block; - height: 30px; - width: 90px; - box-sizing: border-box; - border-radius: 12px; - text-align: center; - cursor: pointer; - font-size: 14px; - line-height: 30px; - color: #58617a; -} -.ces_filter_data > li > a.current { - background-color: #515fe7; - color: #f4f7fc; -} .ces_page_item { display: flex; justify-content: flex-end; diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue index cd6962d..4c21276 100644 --- a/src/pages/fwglList.vue +++ b/src/pages/fwglList.vue @@ -6,7 +6,7 @@ {{ pathName }} -
+
diff --git a/src/pages/yyglList.vue b/src/pages/yyglList.vue index 863d78b..d5da93e 100644 --- a/src/pages/yyglList.vue +++ b/src/pages/yyglList.vue @@ -6,7 +6,7 @@ {{ pathName }}
-
+
@@ -44,14 +44,14 @@ export default { .list_container { padding: 0 20px; } -.table_container { +.main_container { height: calc(100% - 75px); padding: 15px 20px; border-radius: 10px; overflow: hidden; background-color: #fff; } -.table_container .ces-table-page { +.main_container .ces-table-page { margin-top: 42px; } -- 2.26.0