Skip to content

V
vue-gic-confirm-people
Commit d0825158 by zhangmeng
Options

plugin init

parents
Showing with 537 additions and 0 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
.npminstall.done 0 → 100644
Tue Sep 04 2018 17:42:16 GMT+0800 (GMT+08:00)
\ No newline at end of file
README.md 0 → 100644
#
<<<<<<< HEAD
> A Vue.js confirm-people select Plugin
## Install
```shell
npm install @gic-test/vue-gic-confirm-people -S
```
## how to use
```
// main.js
import vueGicConfirmPeople from '@gic-test/vue-gic-confirm-people'
Vue.use(vueGicConfirmPeople)
// 使用页面
<vue-gic-confirm-people @get-data="getData" :list="list"></vue-gic-confirm-people>
data() {
return {
// 可传参数
list:[], //对象数组
idType:'', //获取的属性，如果需要拿memberId 传'memberId'，默认为'openid',
onlyWxMember:1, // 获取数据类型 仅为微信会员传1 不限制传0
}
}
methods: {
//获取指定会员 字符串数组
getData(val) {
console.log(val)
},
},
```
dist/vue-gic-confirm-people.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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-card</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-card.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-confirm-people",
"description": "vue-gic-confirm-people Plugin",
"version": "1.0.2",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-confirm-people.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"qs": "^6.5.2",
"vue": "^2.5.16"
},
"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",
"less-loader": "^4.1.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"_from": "@gic-test/vue-gic-confirm-people@1.0.2",
"_resolved": "http://www.gicdev.com:7001/@gic-test/vue-gic-confirm-people/download/@gic-test/vue-gic-confirm-people-1.0.2.tgz"
}
\ No newline at end of file
src/App.vue 0 → 100644
<template>
<div id="app">
<div @click="showCard">点击弹窗</div>
<vue-gic-card :projectName="projectName" :showCardDialog="showCardDialog" :cardLimit="cardLimit" :cardType="cardType" @selectCard="selectCard"></vue-gic-card>
</div>
</template>
<script>
import vueGicCard from './lib/vue-gic-card'
export default {
name: 'app',
data () {
return {
projectName: '', //当前项目名
showCardDialog: false,
cardLimit: 1, //卡券限制类型 1-限制领取1张的卡券 2- 限制领取 1~100的卡券 3-限制领取>=100 的卡券
cardType: null, //卡券类型集合（0：抵金券，1：折扣券，2：兑换券）null-为全部类型 逗号分隔
}
},
components: {
vueGicCard
},
methods: {
// 显示卡券弹窗
showCard() {
var that = this
that.showCardDialog = true;
},
// 子组件触发方法
selectCard(val) {
// 模拟检查数据
console.log(val)
var that = this
that.showCardDialog = false;
}
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
src/lib/api.js 0 → 100644
import axios from 'axios';
import qs from 'qs';
axios.defaults.timeout = 10000;
let base = "http://192.168.1.164:8282/gic/";
const timeout = 10000;
let token = ''//sessionStorage.getItem('user');
/*
*
* 统一 get 请求方法
* @url: 请求的 url
* @params: 请求带的参数
* @header: 带 token
*
*/
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`,
data: {},
params: params,
headers: {'content-type': 'application/x-www-form-urlencoded'},// "token": token
});
}
src/lib/index.js 0 → 100644
import vueGicConfirmPeople from './vue-gic-confirm-people.vue' // 导入组件
const gicConfirmPeople = {
install(Vue, options) {
Vue.component(vueGicConfirmPeople.name, vueGicConfirmPeople) // vueGicConfirmPeople.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(gicConfirmPeople);
}
export default gicConfirmPeople
src/lib/vue-gic-confirm-people.vue 0 → 100644
<template>
<section class="confirm-people">
<div class="confirm-people_l">
<header>
<el-input size="small"" style="width:370px;" placeholder="请输入昵称卡号" prefix-icon="el-icon-search" v-model="keyWord" clearable @change="loadList"></el-input>
</header>
<el-table v-loading="loading" tooltipEffect="light" ref="multipleTable" :data="leftList" tooltip-effect="dark" style="width: 100%" height="400px" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="会员信息" min-width="120" :show-overflow-tooltip="true">
<template slot-scope="scope">
<img style="vertical-align: middle;" :src="scope.row.photoUrl || avatar" width="40px" height="40px" alt="" srcset="">
<span class="avatar">
<p>{{ scope.row.name }}</p>
<p style="color:#909399;">{{ scope.row.cardNo }}</p>
</span>
</template>
</el-table-column>
<el-table-column prop="gradeName" label="会员等级" width="100"></el-table-column>
</el-table>
</div>
<div class="confirm-people_c">
<el-button type="primary" icon="el-icon-arrow-right" circle @click="toRight"></el-button>
<el-button icon="el-icon-arrow-left" circle @click="removeAll"></el-button>
</div>
<div class="confirm-people_r">
<header>
<el-input size="small" style="width:370px;" placeholder="请输入昵称卡号" clearable prefix-icon="el-icon-search" v-model="keyWordRight" @change="filterRight"></el-input>
</header>
<el-table tooltipEffect="light" ref="multipleTable" :data="rightList" tooltip-effect="dark" style="width: 100%" height="400px" @selection-change="handleSelectionChangeRight">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="会员信息" min-width="120" :show-overflow-tooltip="true">
<template slot-scope="scope">
<img style="vertical-align: middle;" :src="scope.row.photoUrl || avatar" width="40px" height="40px" alt="" srcset="">
<span class="avatar">
<p>{{ scope.row.name }}</p>
<p style="color:#909399;">{{ scope.row.cardNo }}</p>
</span>
</template>
</el-table-column>
<el-table-column prop="gradeName" label="会员等级" width="100"></el-table-column>
<el-table-column prop="gradeName" label="操作" width="50">
<template slot-scope="scope">
<el-button type="text" @click="remove(scope.$index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</section>
</template>
<script>
import qs from 'qs'
/**
* 清除重复
*/
function uniqueByType(arr, type) {
var res = [];
var json = {};
for (var i = 0; i < arr.length; i++) {
if (!json[arr[i][type]]) {
res.push(arr[i]);
json[arr[i][type]] = 1;
}
}
return res;
}
let allList = [];
export default {
name:'vue-gic-confirm-people',
props:{
idType:{
type:String,
default:'openId'
},
list:{
type:Array,
default() {
return []
}
},
onlyWxMember:{
type:Number,
default:1
},
},
data() {
return {
loading:false,
keyWord:'',
keyWordRight:'',
leftList:[],
rightList:[],
leftSelected:[],
rightSelected:[],
avatar:require('./head_default.jpg')
}
},
watch: {
rightList(val) {
// console.log(val)
this.$emit('get-data',val.map(v => v[this.idType]).join(','));
},
list(val) {
allList = this.rightList = val.slice();
}
},
methods:{
handleSelectionChange(val) {
// console.log(val)
this.leftSelected = val;
},
handleSelectionChangeRight(val){
this.rightSelected = val;
},
toRight(){
// console.log(this.leftSelected)
this.leftSelected.map( v => {
const index = this.rightList.indexOf(v);
if (index < 0) {
this.rightList.push(v);
}
})
console.log(this.rightList.map(v => v.memberId));
allList = this.rightList = uniqueByType(this.rightList,'memberId')
},
loadList() {
this.loading = true;
this.leftSelected = []
let params = {
searchParams:this.keyWord,
onlyWxMember:this.onlyWxMember,
requestProject:'gic-web'
}
this.axios.post('/api-marketing/member-search-engine',qs.stringify(params),
{})
.then(res => {
if (res.data.errorCode === 0 && res.data.result) {
this.leftList = res.data.result;
}
this.loading = false;
})
},
removeAll() {
let currentList = this.rightList.slice();
this.rightSelected.map(v => {
const index = currentList.indexOf(v);
if (index > -1) {
currentList.splice(index,1)
}
})
allList = this.rightList = currentList;
},
remove(index) {
this.rightList.splice(index,1);
allList.splice(index,1);
},
//TODO
filterRight() {
if (!this.keyWordRight) {
this.rightList = Object.assign([],allList);
} else {
const list = Object.assign([],this.rightList);
const filterList = list.filter(v => {
let flag = false;
if(v.cardNo) flag = v.cardNo.indexOf(this.keyWordRight) > -1;
if(v.memberName) flag = v.memberName.indexOf(this.keyWordRight) > -1;
return flag;
});
this.rightList = filterList;
}
}
}
}
</script>
<style lang="scss" scoped>
.confirm-people{
width: 1000px;
&_l,&_r{
display: inline-block;
width: 400px;
border: 1px solid #DCDFE6;
vertical-align: middle;
header{
height: 66px;
line-height: 66px;
padding: 0 15px;
}
}
&_c {
display: inline-block;
vertical-align: middle;
margin: 0 10px;
button{
display: block;
margin: 10px auto;
}
}
/deep/ .avatar{
display: inline-block;vertical-align: middle;
}
// /deep/ .el-table__body-wrapper::-webkit-scrollbar-button {
// background-color:#000;
// }
}
</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-confirm-people.js',
library: 'vue-gic-confirm-people',
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