Skip to content

V
vue-gic-store
Commit eb3327a5 by 无尘
Options

add store plugin

parent a67051cb
Showing with 655 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
.gitignore 0 → 100644
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
\ No newline at end of file
README.md
# vue 插件—-门店选择
<<<<<<< HEAD
> A Vue.js Store select Plugin
## Install
```shell
npm install @gic-test/vue-gic-store -S
```
## how to use
```
// main.js
import vueGicStore from '@gic-test/vue-gic-store'
Vue.use(vueGicStore)
// 使用页面
<div @click="showStore">点击弹窗</div>
<vue-gic-store :projectName="projectName" :selectId="selectId" :showStoreDialog="showStoreDialog" @selectStore="selectStore"></vue-gic-store>
data() {
return {
// 可传参数
projectName: '', // 当前项目名
showStoreDialog: false,
selectId: '',// 已选的门店
}
}
methods: {
// 显示门店弹窗
showStore() {
var that = this
that.showStoreDialog = true;
},
// 子组件触发方法
selectStore(val) {
// 模拟检查数据
console.log(val)
var that = this
that.showStoreDialog = false;
}
},
```
dist/vue-gic-store.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-store</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-store.js"></script>
</body>
</html>
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-store",
"description": "vue-gic-store Plugin",
"version": "1.0.38",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-store.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",
"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",
"less-loader": "^4.1.0",
"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">
<div @click="showStore">点击弹窗</div>
<vue-gic-store :projectName="projectName" :showStoreDialog="showStoreDialog" @selectStore="selectStore"></vue-gic-store>
</div>
</template>
<script>
import vueGicStore from './lib/vue-gic-store'
export default {
name: 'app',
data () {
return {
projectName: '', // 当前项目名
showCardDialog: false,
}
},
components: {
vueGicStore
},
methods: {
// 显示卡券弹窗
showStore() {
var that = this
that.showStoreDialog = true;
},
// 子组件触发方法
selectStore(val) {
// 模拟检查数据
console.log(val)
var that = this
that.showStoreDialog = 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 vueGicStore from './vue-gic-store.vue' // 导入组件
const GicStore = {
install(Vue, options) {
Vue.component(vueGicStore.name, vueGicStore) // vueGicStore.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(GicStore);
}
export default GicStore
// export {
// vueGicStore
// }
src/lib/vue-gic-store.vue 0 → 100644
<template>
<!-- 选择门店 -->
<div class="choose-wrap">
<el-dialog
title="选择门店"
:visible.sync="dialogStore"
:before-close="handleStoreClose"
width="600px"
top="0">
<div class="choose-content-wrap">
<div class="search">
<el-input class="input-search" placeholder="请输门店名称/code" prefix-icon="el-icon-search" v-model="searchStoreValue" @keyup.native="(value) => toSearchInput(value)" clearable @clear="clearInput"></el-input>
</div>
<div class="choose-shop-list">
<el-table
ref="multipleTable"
:data="tableStoreData"
tooltip-effect="dark"
style="width: 100%"
@row-click="handleChangeSelectStore">
<el-table-column label="" width="55">
<template slot-scope="scope">
<el-radio class="radio-style" v-model="radioStore" :label="scope.row.storeId">
&nbsp;
</el-radio>
</template>
</el-table-column>
<el-table-column
label="门店名称">
<template slot-scope="scope">
<h2 class="text-normal" style="color: #606266;font-size: 14px;margin: 0;">{{ scope.row.storeName }}</h2>
<p class="text-normal" style="color: #909399;font-size: 14px;margin: 0;">{{ scope.row.proName }}/{{ scope.row.cityName }}/{{ scope.row.countyName }}</p>
</template>
</el-table-column>
<el-table-column
label="门店代码"
width="200">
<template slot-scope="scope">{{ scope.row.storeCode }}</template>
</el-table-column>
</el-table>
<div class="pagination" v-if="tableStoreData.length>0">
<el-pagination
@size-change="storeSizeChange"
@current-change="storeCurrentChange"
:current-page="storeCurrentPage"
small
:page-size="storePageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogStorecancel">取 消</el-button>
<el-button type="primary" @click="dialogStoreConfirm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-gic-store',
props: ['showStoreDialog','projectName','selectId'],
data () {
return {
repProjectName: 'gic-web', // 项目名
searchText: '',
/*门店列表*/
tableStoreData: [
],
showShopDetail: '', // 用于显示选中的门店
currentRow: null,
radioStore: null,
dialogStore: false,
storeCurrentPage: 1,
storePageSize: 5,
total: 1,
// 获取 location origin
baseUrl: '',
}
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
},
methods:{
handleChangeSelectStore(val) { // 当前格发生变化时触发
var that = this
console.log("table: ",val);
that.radioStore = val.storeId;
that.currentRow = val;
},
// 页码变化
storeSizeChange(val){ // 选择分页符
console.log(`每页 ${val} 条`);
},
// 当前页变化
storeCurrentChange(val) {
console.log(`当前页: ${val}`);
var that = this
that.storeCurrentPage = val;
that.getStoreList();
},
// 设置接收参数
setNewData(storeFlag) {
var that = this;
that.dialogStore = storeFlag;
console.log("弹框是否显示: ",storeFlag)
},
// 搜索输入
toSearchInput: function(value) {
var that = this;
console.log("搜索值: ",that.searchStoreValue,value)
// 搜索重置当前页 为 1
that.storeCurrentPage = 1;
that.getStoreList();
},
// 清空输入
clearInput: function(e) {
var that = this;
console.log(e,that.searchStoreValue);
// 搜索重置当前页 为 1
that.storeCurrentPage = 1;
that.getStoreList();
},
// 确认
dialogStoreConfirm() {
var that = this;
if (!that.currentRow||!Object.keys(that.currentRow).length||!Object.values(that.currentRow).length) {
that.$message.error({
duration: 1000,
message: "请选择门店"
})
return;
}
that.$emit('selectStore',that.currentRow)
that.currentRow = {};
that.radioStore = null;
},
handleStoreClose() {
var that = this;
that.dialogStorecancel();
},
// 取消
dialogStorecancel() {
var that = this;
// that.$confirm('确认关闭?', '', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: ''
// }).then(() => {
console.log("点击确认")
that.dialogStore = false;
that.currentRow = {};
that.radioStore = null;
that.$emit('selectStore',that.currentRow)
// }).catch(() => {
// console.log("取消 取消关闭")
// });
},
// 获取门店列表
getStoreList() {
var that = this
var para = {
currentPage: that.storeCurrentPage,
pageSize: that.storePageSize,
searchName: that.searchStoreValue || '',
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-admin/store-list-paging',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
that.tableStoreData = resData.result.list
that.total = resData.result.page.totalCount
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
}
},
watch: {
showStoreDialog: function(newData,oldData){
var that = this;
console.log("新数据:",newData,oldData)
that.setNewData(newData)
},
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
selectId: function(newData,oldData){
var that = this;
that.radioStore = newData;
}
},
/* 接收数据 */
mounted(){
console.log("传递的参数对象:",this.showStoreDialog)
var that = this;
// 项目名
that.repProjectName = that.projectName || 'gic-web';
that.radioStore = that.selectId;
// 获取门店列表
that.getStoreList();
that.setNewData(that.showStoreDialog)
},
}
</script>
<style lang="scss" scoped>
.choose-wrap{
.search{
width: 260px;
margin-bottom: 24px;
}
.text-normal {
margin: 0;
color: #606266;
font-size: 14px;
font-weight: normal;
}
.choose-list{
max-height: 404px;
border-top: 1px solid #ebeef5;
.list-img{
width: 80px;
height: 80px;
img{
width: 100%;
height: 100%;
}
}
}
.pagination{
text-align: right;
margin-top: 20px;
line-height: 1
}
/deep/ .el-dialog{
height: 677px;
top: 50%;
transform: translate(0,-50%);
}
/deep/ .el-dialog__header{
line-height: 24px;
}
/deep/ .el-input {
height: 40px;
line-height: 40px;
.el-input__inner {
height: 40px;
line-height: 40px;
}
}
}
.choose-shop-list /deep/ .el-table__row{
cursor: pointer;
}
.choose-shop-list /deep/ .el-table .has-gutter{
line-height: 1
}
.choose-wrap /deep/ .el-dialog__body{
padding: 10px 20px;
}
</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-store.js',
library: 'vue-gic-store',
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