Skip to content

V
vue-gic-member-group
Commit ceb01898 by xiaohai
Options

新增穿梭窗插件

parent c535e7df
Showing with 476 additions and 208 deletions
README.md
......@@ -18,12 +18,20 @@ Vue.use(vueGicMemberGroup)
// 使用页面
<vue-gic-member-group :selectedArr="selectedArr" @selectGroup="selectGroup"></vue-gic-member-group>
<vue-gic-member-group
:defaltSelected="defaltSelected"
:height='height'
:projectName="projectName"
@handleDataTransferred="handleDataTransferred"
@handleDataLeft="handleDataLeft">
</vue-gic-member-group>
data() {
return {
// 可传参数
selectedArr: []
defaltSelected: [], // 默认穿梭窗已选入数据
height： 200, // 穿梭窗高度， 默认是543
projectName： 'memberTag' // 默认是memberTag
}
}
......@@ -31,8 +39,21 @@ methods: {
/**
* 选择分组后子组件触发的事件
*/
selectGroup(data) {
/**
* selectedData 穿梭窗已选入数据
* selectionToTransfer 本次选择的数据
*/
handleDataTransferred(data) {
const that = this
},
/**
* selectedData 剔除后剩下的数据
* selectionToRemove 剔除的数据
*/
handleDataLeft(selectedData, selectionToRemove) {
}
},
```
......
dist/vue-gic-member-group.js
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-gic-member-group",[],t):"object"==typeof exports?exports["vue-gic-member-group"]=t():e["vue-gic-member-group"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";t.a={name:"vue-gic-member-group",props:{tagLibName:{type:String},selectedArr:Array},data:function(){return{tagTableData:[{id:1,descipe:"标签列表数据",name:"123",isRealTime:1,recentUpdateDate:"2018-09-30 14:30:28",updateRate:"-",state:1,peopleCover:"456566",createTime:"2018-09-30 14:30:28",expiredTime:"2018-09-30 14:30:28",popVisible:!1}],totalPeople:575775,multipleSelection:[]}},filters:{formatTimeYMD:function(e){return"--"!=e?e.split(" ")[0]:"--"},formatTimeHMS:function(e){return"--"!=e?e.split(" ")[1]:"--"},formatNum:function(e){return(e+"").replace(/\d{1,3}(?=(\d{3})+$)/g,"$&,")}},methods:{handleSelectionChange:function(e){var t=this;t.multipleSelection=e,console.log(e),t.$emit("selectGroup",e)}},watch:{selectedArr:function(e){this.imgSrc=e,that.multipleSelection=e,console.log(e),e.length&&that.tagTableData.forEach(function(e){that.selectedArr.forEach(function(t){t.id==e.id&&that.$refs.multipleTable.toggleRowSelection(e)})})}},mounted:function(){var e=this;e.multipleSelection=e.selectedArr,console.log(e.selectedArr),e.selectedArr.length&&e.tagTableData.forEach(function(t){e.selectedArr.forEach(function(n){n.id==t.id&&e.$refs.multipleTable.toggleRowSelection(t)})})}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),o={install:function(e,t){e.component(r.a.name,r.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(o),t.default=o},function(e,t,n){"use strict";function r(e){n(3)}var o=n(0),a=n(9),i=n(8),s=r,l=i(o.a,a.a,!1,s,"data-v-710ca970",null);t.a=l.exports},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(6)("6764c2f6",r,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".member-group-wrap[data-v-710ca970]{padding-top:20px;background:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.member-group-wrap .member-group__people__num[data-v-710ca970]{padding:20px 0}",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var a=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([a]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(r[a]=!0)}for(o=0;o<e.length;o++){var i=e[o];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=c[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(a(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var i=[],o=0;o<n.parts.length;o++)i.push(a(n.parts[o]));c[n.id]={id:n.id,refs:1,parts:i}}}}function o(){var e=document.createElement("style");return e.type="text/css",f.appendChild(e),e}function a(e){var t,n,r=document.querySelector("style["+g+'~="'+e.id+'"]');if(r){if(m)return v;r.parentNode.removeChild(r)}if(b){var a=d++;r=p||(p=o()),t=i.bind(null,r,a,!1),n=i.bind(null,r,a,!0)}else r=o(),t=s.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function i(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=_(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function s(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),h.ssrId&&e.setAttribute(g,t.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=n(7),c={},f=l&&(document.head||document.getElementsByTagName("head")[0]),p=null,d=0,m=!1,v=function(){},h=null,g="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,o){m=n,h=o||{};var a=u(e,t);return r(a),function(t){for(var n=[],o=0;o<a.length;o++){var i=a[o],s=c[i.id];s.refs--,n.push(s)}t?(a=u(e,t),r(a)):a=[];for(var o=0;o<n.length;o++){var s=n[o];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete c[s.id]}}}};var _=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var a=t[o],i=a[0],s=a[1],l=a[2],u=a[3],c={id:e+":"+o,css:s,media:l,sourceMap:u};r[i]?r[i].parts.push(c):n.push(r[i]={id:i,parts:[c]})}return n}},function(e,t){e.exports=function(e,t,n,r,o,a){var i,s=e=e||{},l=typeof e.default;"object"!==l&&"function"!==l||(i=e,s=e.default);var u="function"==typeof s?s.options:s;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),n&&(u.functional=!0),o&&(u._scopeId=o);var c;if(a?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=c):r&&(c=r),c){var f=u.functional,p=f?u.render:u.beforeCreate;f?(u._injectStyles=c,u.render=function(e,t){return c.call(t),p(e,t)}):u.beforeCreate=p?[].concat(p,c):[c]}return{esModule:i,exports:s,options:u}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"member-group-wrap"},[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:e.tagTableData,"tooltip-effect":"dark",height:"357px"},on:{"selection-change":e.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection"}}),e._v(" "),n("el-table-column",{attrs:{label:"分组名称",width:"150px","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[n("el-popover",{attrs:{placement:"top-start",width:"200",trigger:"hover"}},[n("span",[e._v(e._s(t.row.descipe))]),e._v(" "),n("a",{staticClass:"pointer",attrs:{slot:"reference",href:"/memberGroupDetail?id="+t.row.id},slot:"reference"},[e._v(e._s(t.row.name))])])]}}])}),e._v(" "),n("el-table-column",{attrs:{label:"是否实时"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(1==t.row.isRealTime?"实时":"非实时")+"\n ")]}}])}),e._v(" "),n("el-table-column",{attrs:{label:"最近更新时间","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(e._f("formatTimeYMD")(t.row.recentUpdateDate))+"\n "),n("p",[e._v(e._s(e._f("formatTimeHMS")(t.row.recentUpdateDate)))])]}}])}),e._v(" "),n("el-table-column",{attrs:{label:"更新频率","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(t.row.updateRate)+"\n ")]}}])}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"状态"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(1==t.row.state?"有效":"失效")+"\n ")]}}])}),e._v(" "),n("el-table-column",{attrs:{prop:"recentUpdateDate",label:"到期时间","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(e._f("formatTimeYMD")(t.row.recentUpdateDate))+"\n "),n("p",[e._v(e._s(e._f("formatTimeHMS")(t.row.recentUpdateDate)))])]}}])}),e._v(" "),n("el-table-column",{attrs:{label:"操作"},scopedSlots:e._u([{key:"default",fn:function(t){return[n("a",{staticClass:"edit-btn el-button--text",attrs:{href:"/member-tag/#/memberGroupDetail"+t.row.id}},[e._v("详情")])]}}])})],1),e._v(" "),n("div",{staticClass:"member-group__people__num"},[e._v("共覆盖人数: "+e._s(e._f("formatNum")(e.totalPeople))+" ")])],1)},o=[],a={render:r,staticRenderFns:o};t.a=a}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-gic-member-group",[],t):"object"==typeof exports?exports["vue-gic-member-group"]=t():e["vue-gic-member-group"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,r){"use strict";t.a={name:"vue-gic-member-group",props:{defaltSelected:{type:Array,default:function(){return[]}},height:{type:Number,default:543},projectName:{type:String,default:"memberTag"}},data:function(){return{tableData:[],pageSize:20,weekArr:["一","二","三","四","五","六","日"],currentPage:1,dataSearch:"",baseUrl:"",dataSearchSelected:"",selectedData:[],selectionToTransfer:[],selectionToRemove:[],countOfCoverTotal:0,totalPage:1}},directives:{loadmore:{bind:function(e,t){e.querySelector(".el-table__body-wrapper").addEventListener("scroll",function(){var e=1,r=this.scrollHeight-this.scrollTop===this.clientHeight&&this.scrollTop>e;this.scrollTop>e&&(e=this.scrollTop),this.scrollTop<e&&(e=this.scrollTop),r&&t.value()})}}},methods:{loadmore:function(){this.currentPage<this.totalPage&&(this.currentPage+=1,this.getGroupList())},getGroupList:function(){var e=this;e.axios.get(e.baseUrl+"/gic-member-tag-web/member-tag-group/findList.json?requestProject="+e.projectName+"&pageSize="+e.pageSize+"&pageNum="+e.currentPage+"&groupName="+e.dataSearch).then(function(t){if(1==t.data.errorCode)return e.tableData=e.tableData.concat(t.data.result.result),void(e.totalPage=t.data.result.totalPage);e.$message.error({duration:1e3,message:t.data.message})}).catch(function(t){e.$message.error({duration:1e3,message:t.message})})},searchEnterFun:function(){this.getGroupList()},clearSearch:function(e){this[e]="","dataSearch"==e&&this.getGroupList()},handleSelectionChange:function(e){this.selectionToTransfer=e},selectToTransfer:function(){this.selectedData=this.uniqueByGroupId(this.selectedData.concat(this.selectionToTransfer)),this.getMemberCountByGroups(),this.$emit("handleDataTransferred",this.selectedData,this.selectionToTransfer),this.$refs.originTable.clearSelection()},uniqueByGroupId:function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"memberTagGroupId",r=[e[0]],n=1;n<e.length;n++)if(void 0===t)-1==r.indexOf(e[n])&&r.push(e[n]);else{e:for(var o=!1,a=0;a<r.length;a++)if(e[n][t]==r[a][t]){o=!0;break e}o||r.push(e[n])}return r},handleSelectedSelectionChange:function(e){this.selectionToRemove=e},selectToRemove:function(){var e=this.selectedData,t=this.selectionToRemove,r=new Set(e),n=new Set(t);this.selectedData=e.concat(t).filter(function(e){return!r.has(e)||!n.has(e)}),this.getMemberCountByGroups(),this.$emit("handleDataLeft",this.selectedData,this.selectionToRemove),this.$refs.selectedTable.clearSelection()},getMemberCountByGroups:function(){var e=this,t=e.selectedData;if(t.length<1)return!1;var r=[];t.forEach(function(e){r.push(e.memberTagGroupId)});var n=r.join(",");e.axios.get(e.baseUrl+"/gic-member-tag-web/member-tag-member/findMemberListByGroupIds.json?requestProject="+e.projectName+"&memberTagGroupIds="+n+"&pageName=memberSign").then(function(t){1==t.data.errorCode&&(e.countOfCoverTotal=t.data.result.page.totalCount)})}},filters:{formatTimeYMD:function(e){return e&&"- -"!=e?e.split(" ")[0]:"--"},formatTimeHMS:function(e){return e&&"- -"!=e?e.split(" ")[1]:"--"},formatNum:function(e){return(e+"").replace(/\d{1,3}(?=(\d{3})+$)/g,"$&,")},formatUpdateFrequency:function(e,t){var r=this;switch(e){case 1:return"每天一次";case 2:return t?"每周"+r.weekArr[t-1]:"每周一次";case 3:return t?"每月"+r.weekArr[t-1]+"号":"每月一次";default:return"--"}}},beforeMount:function(){var e=this,t=window.location.origin;"-1"!=t.indexOf("localhost")?e.baseUrl="http://gicdev.demogic.com":e.baseUrl=t},mounted:function(){this.getGroupList(),this.defaltSelected.length>0&&(this.selectedData=this.uniqueByGroupId(this.selectedData.concat(this.defaltSelected))),this.getMemberCountByGroups()}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(2),o={install:function(e,t){e.component(n.a.name,n.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(o),t.default=o},function(e,t,r){"use strict";function n(e){r(3)}var o=r(0),a=r(9),s=r(8),i=n,l=s(o.a,a.a,!1,i,null,null);t.a=l.exports},function(e,t,r){var n=r(4);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);r(6)("b299d5e2",n,!0,{})},function(e,t,r){t=e.exports=r(5)(!1),t.push([e.i,".group-set-transfer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;background:#fff;padding:30px;box-sizing:border-box}.group-set-transfer .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.group-set-transfer .w_100{width:100%}.group-set-transfer .m-b-26{margin-block-start:26px}.group-set-transfer .input-div{padding:20px 14px}.group-set-transfer>.table-container{height:100%;border:1px solid #dcdfe6;border-radius:4px}.group-set-transfer>.table-container .cover-count{height:42px;line-height:42px;text-align:center;border:none;color:#7e8c8d;font-size:14px}.group-set-transfer>.table-container .cover-count .count{color:#606266;margin:0 5px}.group-set-transfer .btn-box{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;text-align:center}.group-set-transfer .btn-box .icon-container .transfer-icon{display:inline-block;width:43px;height:43px;line-height:44px;border-radius:100%;text-align:center;border:1px solid #dcdfe6;color:#dcdfe6;font-size:20px;cursor:pointer}.group-set-transfer .btn-box .icon-container .transfer-icon:hover{border:none;background:#409eff;color:#fff}.group-set-transfer .selected-list{width:356px;height:100%}",""])},function(e,t){function r(e,t){var r=e[1]||"",o=e[3];if(!o)return r;if(t&&"function"==typeof btoa){var a=n(o);return[r].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([a]).join("\n")}return[r].join("\n")}function n(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=r(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(n[a]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&n[s[0]]||(r&&!s[2]?s[2]=r:r&&(s[2]="("+s[2]+") and ("+r+")"),t.push(s))}},t}},function(e,t,r){function n(e){for(var t=0;t<e.length;t++){var r=e[t],n=u[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(a(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{for(var s=[],o=0;o<r.parts.length;o++)s.push(a(r.parts[o]));u[r.id]={id:r.id,refs:1,parts:s}}}}function o(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function a(e){var t,r,n=document.querySelector("style["+v+'~="'+e.id+'"]');if(n){if(h)return m;n.parentNode.removeChild(n)}if(b){var a=p++;n=f||(f=o()),t=s.bind(null,n,a,!1),r=s.bind(null,n,a,!0)}else n=o(),t=i.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}function s(e,t,r,n){var o=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=_(t,o);else{var a=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(a,s[t]):e.appendChild(a)}}function i(e,t){var r=t.css,n=t.media,o=t.sourceMap;if(n&&e.setAttribute("media",n),g.ssrId&&e.setAttribute(v,t.id),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=r(7),u={},d=l&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,h=!1,m=function(){},g=null,v="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,r,o){h=r,g=o||{};var a=c(e,t);return n(a),function(t){for(var r=[],o=0;o<a.length;o++){var s=a[o],i=u[s.id];i.refs--,r.push(i)}t?(a=c(e,t),n(a)):a=[];for(var o=0;o<r.length;o++){var i=r[o];if(0===i.refs){for(var l=0;l<i.parts.length;l++)i.parts[l]();delete u[i.id]}}}};var _=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var r=[],n={},o=0;o<t.length;o++){var a=t[o],s=a[0],i=a[1],l=a[2],c=a[3],u={id:e+":"+o,css:i,media:l,sourceMap:c};n[s]?n[s].parts.push(u):r.push(n[s]={id:s,parts:[u]})}return r}},function(e,t){e.exports=function(e,t,r,n,o,a){var s,i=e=e||{},l=typeof e.default;"object"!==l&&"function"!==l||(s=e,i=e.default);var c="function"==typeof i?i.options:i;t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),r&&(c.functional=!0),o&&(c._scopeId=o);var u;if(a?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=u):n&&(u=n),u){var d=c.functional,f=d?c.render:c.beforeCreate;d?(c._injectStyles=u,c.render=function(e,t){return u.call(t),f(e,t)}):c.beforeCreate=f?[].concat(f,u):[u]}return{esModule:s,exports:i,options:c}}},function(e,t,r){"use strict";var n=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"group-set-transfer"},[r("div",{staticClass:"flex-1 table-container"},[r("div",{staticClass:"input-div"},[r("el-input",{staticClass:"w_100",attrs:{placeholder:"请输入关键字搜索人群","prefix-icon":"el-icon-search",clearable:""},on:{clear:function(t){e.clearSearch("dataSearch")}},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.searchEnterFun(t):null}},model:{value:e.dataSearch,callback:function(t){e.dataSearch=t},expression:"dataSearch"}})],1),e._v(" "),r("el-table",{directives:[{name:"loadmore",rawName:"v-loadmore",value:e.loadmore,expression:"loadmore"}],ref:"originTable",attrs:{data:e.tableData,"tooltip-effect":"dark",height:e.height-72},on:{"selection-change":e.handleSelectionChange}},[r("el-table-column",{attrs:{type:"selection",width:"55"}}),e._v(" "),r("el-table-column",{attrs:{label:"分组名称","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[r("el-popover",{attrs:{placement:"top-start",width:"200",trigger:"hover"}},[r("span",[e._v(e._s(t.row.describle))]),e._v(" "),r("a",{staticClass:"pointer",attrs:{slot:"reference",href:"/memberGroupDetail?memberTagGroupId="+t.row.memberTagGroupId},slot:"reference"},[e._v(e._s(t.row.groupName))])])]}}])}),e._v(" "),r("el-table-column",{attrs:{label:"是否实时",width:"120px"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(1==t.row.isRealTime?"实时":"非实时")+"\n ")]}}])}),e._v(" "),r("el-table-column",{attrs:{label:"最近更新时间",width:"200px","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(e._f("formatTimeYMD")(t.row.latestUpdateTime))+"\n "),r("p",[e._v(e._s(e._f("formatTimeHMS")(t.row.latestUpdateTime)))])]}}])}),e._v(" "),r("el-table-column",{attrs:{label:"更新频率",width:"150px","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(e._f("formatUpdateFrequency")(t.row.updateType,t.row.updateDay))+"\n ")]}}])}),e._v(" "),r("el-table-column",{attrs:{prop:"state",label:"状态",width:"100px"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(1==t.row.effectiveStatus?"有效":"失效")+"\n ")]}}])}),e._v(" "),r("el-table-column",{attrs:{prop:"recentUpdateDate",label:"到期时间",width:"200px","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(e._f("formatTimeYMD")(t.row.effectiveDate))+"\n "),r("p",[e._v(e._s(e._f("formatTimeHMS")(t.row.effectiveDate)))])]}}])}),e._v(" "),r("el-table-column",{attrs:{label:"操作"},scopedSlots:e._u([{key:"default",fn:function(t){return[r("router-link",{staticClass:"edit-btn el-button--text p-r-20",attrs:{to:{path:"/memberGroupDetail",query:{memberTagGroupId:t.row.memberTagGroupId}}}},[e._v("详情")])]}}])})],1)],1),e._v(" "),r("div",{staticClass:"btn-box",style:"height:"+e.height+"px"},[r("div",{staticClass:"icon-container"},[r("span",{staticClass:"transfer-icon el-icon-arrow-right m-b-26",on:{click:e.selectToTransfer}}),e._v(" "),r("span",{staticClass:"transfer-icon el-icon-arrow-left",on:{click:e.selectToRemove}})])]),e._v(" "),r("div",{staticClass:"selected-list table-container"},[r("div",{staticClass:"input-div"},[r("el-input",{staticClass:"w_100",attrs:{placeholder:"请输入关键字搜索人群","prefix-icon":"el-icon-search",clearable:""},on:{clear:function(t){e.clearSearch("dataSearchSelected")}},model:{value:e.dataSearchSelected,callback:function(t){e.dataSearchSelected=t},expression:"dataSearchSelected"}})],1),e._v(" "),r("el-table",{ref:"selectedTable",attrs:{data:e.selectedData.filter(function(t){return!e.dataSearchSelected||t.groupName.toLowerCase().includes(e.dataSearchSelected.toLowerCase())}),"tooltip-effect":"dark",height:e.height-114},on:{"selection-change":e.handleSelectedSelectionChange}},[r("el-table-column",{attrs:{type:"selection",width:"55"}}),e._v(" "),r("el-table-column",{attrs:{label:"分组名称","show-overflow-tooltip":""},scopedSlots:e._u([{key:"default",fn:function(t){return[r("el-popover",{attrs:{placement:"top-start",trigger:"hover"}},[r("span",[e._v(e._s(t.row.describle))]),e._v(" "),r("a",{staticClass:"pointer",attrs:{slot:"reference",href:"/memberGroupDetail?memberTagGroupId="+t.row.memberTagGroupId},slot:"reference"},[e._v(e._s(t.row.groupName))])])]}}])}),e._v(" "),r("el-table-column",{attrs:{label:"是否实时",width:"116px"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v("\n "+e._s(1==t.row.isRealTime?"实时":"非实时")+"\n ")]}}])})],1),e._v(" "),r("p",{staticClass:"cover-count"},[e._v("已选中"),r("span",{staticClass:"count"},[e._v(e._s(e.countOfCoverTotal))]),e._v("人")])],1)])},o=[],a={render:n,staticRenderFns:o};t.a=a}])});
//# sourceMappingURL=vue-gic-member-group.js.map
\ No newline at end of file
dist/vue-gic-member-group.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
{
"name": "@gic-test/vue-gic-member-group",
"description": "vue-gic-member-group Plugin",
"version": "1.0.12",
"version": "1.0.13",
"license": "MIT",
"private": false,
"author": "fairyly",
......
src/lib/vue-gic-member-group.vue
<!--
会员分组组件
<vue-gic-member-group :selectedArr="selectedArr" @selectGroup="selectGroup"></vue-gic-member-group>
methods: {
/**
* 选择分组后子组件触发的事件
*/
selectGroup(data) {
const that = this
}
}
-->
<template>
<div class="member-group-wrap">
<el-table
ref="multipleTable"
:data="tagTableData"
tooltip-effect="dark"
style="width: 100%"
height="357px"
@selection-change="handleSelectionChange">
<el-table-column
type="selection">
</el-table-column>
<el-table-column
label="分组名称"
width="150px"
show-overflow-tooltip>
<template slot-scope="scope">
<el-popover
placement="top-start"
width="200"
trigger="hover">
<span>{{ scope.row.descipe }}</span>
<a slot="reference" class="pointer" :href="'/memberGroupDetail?id='+scope.row.id">{{ scope.row.name }}</a>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="是否实时"
>
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
label="最近更新时间"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.recentUpdateDate | formatTimeYMD }}
<p>{{ scope.row.recentUpdateDate | formatTimeHMS }}</p>
</template>
</el-table-column>
<el-table-column
label="更新频率"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.updateRate }}
</template>
</el-table-column>
<el-table-column
prop="state"
label="状态"
>
<template slot-scope="scope">
{{scope.row.state == 1? '有效':'失效'}}
</template>
</el-table-column>
<!-- <el-table-column
prop="peopleCover"
label="覆盖人数"
width="150px"
show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.peopleCover | formatNum }} 人
</template>
</el-table-column> -->
<!-- <el-table-column
prop="createTime"
label="创建时间"
width="150px"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.createTime | formatTimeYMD }}
<p>{{ scope.row.createTime | formatTimeHMS }}</p>
</template>
</el-table-column> -->
<el-table-column
prop="recentUpdateDate"
label="到期时间"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.recentUpdateDate | formatTimeYMD }}
<p>{{ scope.row.recentUpdateDate | formatTimeHMS }}</p>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<a :href="'/member-tag/#/memberGroupDetail'+scope.row.id" class="edit-btn el-button--text">详情</a>
</template>
</el-table-column>
</el-table>
<div class="member-group__people__num">共覆盖人数: {{ totalPeople | formatNum }} </div>
</div>
<div class="group-set-transfer">
<div class="flex-1 table-container">
<div class="input-div">
<el-input
class="w_100"
placeholder="请输入关键字搜索人群"
prefix-icon="el-icon-search"
v-model="dataSearch"
@keyup.enter.native="searchEnterFun"
clearable
@clear="clearSearch('dataSearch')">
</el-input>
</div>
<el-table
v-loadmore="loadmore"
ref="originTable"
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:height="height - 72">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="分组名称"
show-overflow-tooltip>
<template slot-scope="scope">
<el-popover
placement="top-start"
width="200"
trigger="hover">
<span>{{ scope.row.describle }}</span>
<a slot="reference" class="pointer" :href="'/memberGroupDetail?memberTagGroupId='+scope.row.memberTagGroupId">{{ scope.row.groupName }}</a>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="是否实时"
width="120px">
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
label="最近更新时间"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.latestUpdateTime | formatTimeYMD }}
<p>{{ scope.row.latestUpdateTime | formatTimeHMS }}</p>
</template>
</el-table-column>
<el-table-column
label="更新频率"
width="150px"
show-overflow-tooltip>
<template slot-scope="scope">
<!-- {{ scope.row.updateType == 1 ? '每天一次' : scope.row.updateType == 2 ? (scope.row.updateDay ? '每周'+ weekArr[scope.row.updateDay - 1] : '每周一次') : (scope.row.updateDay ? '每月' + scope.row.updateDay + '号' : '每月一次')}} -->
{{scope.row.updateType, scope.row.updateDay | formatUpdateFrequency}}
</template>
</el-table-column>
<el-table-column
prop="state"
label="状态"
width="100px">
<template slot-scope="scope">
{{scope.row.effectiveStatus == 1? '有效':'失效'}}
</template>
</el-table-column>
<el-table-column
prop="recentUpdateDate"
label="到期时间"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.effectiveDate | formatTimeYMD }}
<p>{{ scope.row.effectiveDate | formatTimeHMS }}</p>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<router-link :to="{path:'/memberGroupDetail',query:{memberTagGroupId:scope.row.memberTagGroupId}}" class="edit-btn el-button--text p-r-20">详情</router-link>
</template>
</el-table-column>
</el-table>
</div>
<div class="btn-box" :style="'height:'+height+'px'">
<div class="icon-container">
<span class="transfer-icon el-icon-arrow-right m-b-26" @click="selectToTransfer"></span>
<span class="transfer-icon el-icon-arrow-left" @click="selectToRemove"></span>
</div>
</div>
<div class="selected-list table-container">
<div class="input-div">
<el-input
class="w_100"
placeholder="请输入关键字搜索人群"
prefix-icon="el-icon-search"
v-model="dataSearchSelected"
clearable
@clear="clearSearch('dataSearchSelected')">
</el-input>
</div>
<el-table
ref="selectedTable"
:data="selectedData.filter(data => !dataSearchSelected || data.groupName.toLowerCase().includes(dataSearchSelected.toLowerCase()))"
tooltip-effect="dark"
@selection-change="handleSelectedSelectionChange"
:height="height - 114">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="分组名称"
show-overflow-tooltip>
<template slot-scope="scope">
<el-popover
placement="top-start"
trigger="hover">
<span>{{ scope.row.describle }}</span>
<a slot="reference" class="pointer" :href="'/memberGroupDetail?memberTagGroupId='+scope.row.memberTagGroupId">{{ scope.row.groupName }}</a>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="是否实时"
width="116px">
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
</el-table>
<p class="cover-count">已选中<span class="count">{{countOfCoverTotal}}</span>人</p>
</div>
</div>
</template>
<script>
export default {
name: "vue-gic-member-group",
props: {
defaltSelected: {
type: Array,
default() {
return [];
}
},
height: {
type: Number,
default: 543
},
projectName: {
type: String,
default: 'memberTag'
}
},
data() {
return {
tableData: [],
pageSize: 20,
weekArr: ['一', '二', '三', '四', '五', '六', '日'],
currentPage: 1,
dataSearch: "",
baseUrl: "",
dataSearchSelected: "",
selectedData: [], // 穿梭窗已选入数据
selectionToTransfer: [], // 穿梭窗选入数据
selectionToRemove: [], // 已选的将要删除的选入数据
countOfCoverTotal: 0,
totalPage: 1
};
},
directives: {
loadmore: {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper');
SELECTWRAP_DOM.addEventListener('scroll', function() {
/*
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
let sign = 1; // 定义默认的向上滚于乡下滚的边界
const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) &&
this.scrollTop > sign)// 注意: && this.scrollTop
if(this.scrollTop > sign) {
sign = this.scrollTop;
// console.log('向下')
}
if(this.scrollTop < sign) {
sign = this.scrollTop;
// console.log('向上')
}
if(CONDITION) {
binding.value();
}
});
}
}
},
methods: {
loadmore() {
// console.log('loadmore');
if (this.currentPage < this.totalPage) {
this.currentPage += 1;
this.getGroupList();
}
},
export default {
name: "vue-gic-member-group",
props: {
tagLibName: {
type: String
},
selectedArr: Array
},
data() {
return {
// 标签列表数据
tagTableData: [
{
id: 1,
descipe: '标签列表数据',
name: '123',
isRealTime: 1,
recentUpdateDate: '2018-09-30 14:30:28',
updateRate: '-',
state: 1,
peopleCover: '456566',
createTime: '2018-09-30 14:30:28',
expiredTime: '2018-09-30 14:30:28',
popVisible: false,
}
],
/**
* 获取分组列表数据
*/
getGroupList() {
const that = this;
that.axios.get(`${that.baseUrl}/gic-member-tag-web/member-tag-group/findList.json?requestProject=${that.projectName}&pageSize=${that.pageSize}&pageNum=${that.currentPage}&groupName=${that.dataSearch}`)
.then(res => {
if (res.data.errorCode == 1) {
that.tableData = that.tableData.concat(res.data.result.result);
that.totalPage = res.data.result.totalPage;
return;
}
that.$message.error({
duration: 1000,
message: res.data.message
});
})
.catch(error => {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
totalPeople: 575775, //覆盖人数
searchEnterFun() {
this.getGroupList();
},
// 已选的对象
multipleSelection: [],
}
},
filters: {
formatTimeYMD(data) {
// console.log(data,data != '--' ? data.split(' ')[0] : '--')
return data != '--' ? data.split(' ')[0] : '--';
},
formatTimeHMS(data) {
return data != '--' ? data.split(' ')[1] : '--';
},
formatNum(data){
const reg=/\d{1,3}(?=(\d{3})+$)/g;
return (data + '').replace(reg, '$&,');
}
},
methods: {
/**
* 选择分组后
*/
handleSelectionChange(val) {
const that = this
that.multipleSelection = val;
console.log(val)
that.$emit('selectGroup',val)
},
/**
* 清除搜索框
*/
clearSearch(prop) {
this[prop] = '';
if (prop == 'dataSearch') {
this.getGroupList();
}
},
},
watch:{
selectedArr:function(newVal) {
this.imgSrc = newVal
that.multipleSelection = newVal;
console.log(newVal)
if (!!newVal.length) {
that.tagTableData.forEach(function(el){
that.selectedArr.forEach(function(ele){
if (ele.id == el.id) {
that.$refs.multipleTable.toggleRowSelection(el)
}
/**
* 处理穿梭窗选入数据
*/
handleSelectionChange(val) {
this.selectionToTransfer = val;
},
})
})
}
},
},
mounted() {
const that = this
that.multipleSelection = that.selectedArr;
console.log(that.selectedArr)
if (!!that.selectedArr.length) {
that.tagTableData.forEach(function(el){
that.selectedArr.forEach(function(ele){
if (ele.id == el.id) {
that.$refs.multipleTable.toggleRowSelection(el)
}
selectToTransfer() {
this.selectedData = this.uniqueByGroupId(this.selectedData.concat(this.selectionToTransfer)); // 数组拼接并去重
this.getMemberCountByGroups();
this.$emit('handleDataTransferred', this.selectedData, this.selectionToTransfer);
this.$refs.originTable.clearSelection();
},
/**
* 根据分组ID去重
*/
uniqueByGroupId(arr, key = 'memberTagGroupId') {
// var arr = this;
var n = [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (key === undefined) {
if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
} else {
inner: {
var has = false;
for (var j = 0; j < n.length; j++) {
if (arr[i][key] == n[j][key]) {
has = true;
break inner;
}
}
}
if (!has) {
n.push(arr[i]);
}
}
}
return n;
},
})
})
}
/**
* 处理已选的将要删除的选入数据
*/
handleSelectedSelectionChange(val) {
this.selectionToRemove = val;
},
selectToRemove() {
let seleced = this.selectedData;
let setection = this.selectionToRemove;
let aSet = new Set(seleced);
let bSet = new Set(setection);
this.selectedData = seleced.concat(setection).filter(v => !aSet.has(v) || !bSet.has(v)); // 两数组非交集部分即为剔除后剩下的数据
this.getMemberCountByGroups();
this.$emit('handleDataLeft', this.selectedData, this.selectionToRemove);
this.$refs.selectedTable.clearSelection();
},
}
}
/**
* 获取已选分组去重后的分组数据
*/
getMemberCountByGroups() {
const that = this;
let selectedData = that.selectedData;
if (selectedData.length < 1) {
return false;
}
let idsArr = [];
selectedData.forEach(group => {
idsArr.push(group.memberTagGroupId);
});
let ids = idsArr.join(',');
that.axios.get(`${that.baseUrl}/gic-member-tag-web/member-tag-member/findMemberListByGroupIds.json?requestProject=${that.projectName}&memberTagGroupIds=${ids}&pageName=memberSign`)
.then(res => {
// console.log(res, "count");
if (res.data.errorCode == 1) {
that.countOfCoverTotal = res.data.result.page.totalCount;
}
});
}
},
filters: {
formatTimeYMD(data) {
return data && data != '- -' ? data.split(' ')[0] : '--';
},
formatTimeHMS(data) {
return data && data != '- -' ? data.split(' ')[1] : '--';
},
formatNum(data){
const reg=/\d{1,3}(?=(\d{3})+$)/g;
return (data + '').replace(reg, '$&,');
},
formatUpdateFrequency(type, day) {
const that = this;
switch(type) {
case 1:
return '每天一次';
break;
case 2:
return day ? `每周${that.weekArr[day - 1]}` : '每周一次';
break;
case 3:
return day ? `每月${that.weekArr[day - 1]}号` : '每月一次';
break;
default:
return '--';
}
}
},
beforeMount() {
var that = this;
var host = window.location.origin;
if (host.indexOf("localhost") != "-1") {
that.baseUrl = "http://gicdev.demogic.com";
} else {
that.baseUrl = host;
}
},
mounted() {
this.getGroupList();
if (this.defaltSelected.length > 0) {
this.selectedData = this.uniqueByGroupId(this.selectedData.concat(this.defaltSelected)); // 数组拼接并去重
}
this.getMemberCountByGroups();
}
};
</script>
<style lang="scss" scoped>
.member-group-wrap {
padding-top: 20px;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.member-group__people__num {
padding: 20px 0;
<style lang="scss">
.group-set-transfer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
background: #fff;
padding: 30px;
box-sizing: border-box;
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.w_100 {
width: 100%;
}
.m-b-26 {
margin-block-start: 26px;
}
.input-div {
padding: 20px 14px;
}
>.table-container {
height: 100%;
border: 1px solid #DCDFE6;
border-radius: 4px;
.cover-count {
height: 42px;
line-height: 42px;
text-align: center;
border: none;
color: #7e8c8d;
font-size: 14px;
.count {
color: #606266;
margin: 0 5px;
}
}
}
.btn-box {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 80px;
text-align: center;
.icon-container {
.transfer-icon {
display: inline-block;
width: 43px;
height: 43px;
line-height: 44px;
border-radius: 100%;
text-align: center;
border: 1px solid #DCDFE6;
color: #DCDFE6;
font-size: 20px;
cursor: pointer;
&:hover {
border: none;
background: #409EFF;
color: #fff;
}
}
}
}
.selected-list {
width: 356px;
height: 100%;
}
}
}
</style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment