Skip to content

V
vue-gic-member-group
Commit c535e7df by 无尘
Options

add: 增加会员分组选择插件

parent d86fcd85
Showing with 525 additions and 2 deletions
.babelrc 0 → 100644
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
package-lock.json
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
# *src
README.md
会员分组插件 # vue-gic-member-group
\ No newline at end of file
> A Vue.js vue-gic-member-group Plugin
## Install
```shell
npm install @gic-test/vue-gic-member-group -S
```
## how to use
```
// main.js
import vueGicMemberGroup from 'vue-gic-member-group'
Vue.use(vueGicMemberGroup)
// 使用页面
<vue-gic-member-group :selectedArr="selectedArr" @selectGroup="selectGroup"></vue-gic-member-group>
data() {
return {
// 可传参数
selectedArr: []
}
}
methods: {
/**
* 选择分组后子组件触发的事件
*/
selectGroup(data) {
const that = this
}
},
```
dist/vue-gic-member-group.js 0 → 100644
!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}])});
//# sourceMappingURL=vue-gic-member-group.js.map
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vue-gic-member-group</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-member-group.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-member-group",
"description": "vue-gic-member-group Plugin",
"version": "1.0.12",
"license": "MIT",
"private": false,
"author": "fairyly",
"main": "dist/vue-gic-member-group.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^2.4.9",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
<template>
<div id="app">
<vue-gic-member-group :selectedArr="selectedArr" @selectGroup="selectGroup"></vue-gic-member-group>
</div>
</template>
<script>
import vueGicMemberGroup from './lib/vue-gic-member-group'
export default {
name: 'app',
data () {
return {
selectedArr: [ {
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,
}],
}
},
components: {
vueGicMemberGroup
},
methods: {
/**
* 选择分组后子组件触发的事件
*/
selectGroup(data) {
const that = this
}
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
src/lib/index.js 0 → 100644
import vueGicMemberGroup from './vue-gic-member-group.vue' // 导入组件
const GicMemberGroup = {
install(Vue, options) {
Vue.component(vueGicMemberGroup.name, vueGicMemberGroup) // vueImagesToast.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(GicMemberGroup);
}
export default GicMemberGroup
// export {
// vueImagesToasts
// }
src/lib/vue-gic-member-group.vue 0 → 100644
<!--
会员分组组件
<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>
</template>
<script>
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,
}
],
totalPeople: 575775, //覆盖人数
// 已选的对象
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)
},
},
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)
}
})
})
}
},
},
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)
}
})
})
}
}
}
</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>
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js 0 → 100644
var path = require('path')
var webpack = require('webpack')
module.exports = {
// entry: './src/main.js',
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-gic-member-group.js',
library: 'vue-gic-member-group',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
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