Skip to content

V
vue-office-area
Commit 7877b9a1 by 无尘
Options

feat: 增加好办后台地区(省市县)选择

parent 305ce58b
Showing with 690 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
# 好办后台地区(省市县)选择
>>> HEAD
> A Vue.js area select Plugin
## Install
```shell
npm install @gic-test/vue-office-area -S
```
## how to use
```
// main.js
import vueOfficeArea from '@gic-test/vue-office-area'
Vue.use(vueOfficeArea)
// 使用页面
<vue-office-area :projectName="projectName" :postUrl="postUrl" :areaOptions="areaOptions" @selected="selected"></vue-office-area>
data() {
return {
// 可传参数
projectName: '', // 当前项目名
postUrl: '', // 自定义请求的 url,如: '/api-admin/dict-district-list'
// 省市县参数
areaOptions: {
provinceName: '',
provinceId: '',
cityName: '',
cityId: '',
countryName: '',
countyId: ''
},
}
}
methods: {
selected(val) {
console.log(val+"/////")
}
},
```
dist/vue-office-area.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-office-area</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-office-area.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-office-area",
"description": "vue-office-area Plugin",
"version": "1.0.2",
"license": "MIT",
"private": false,
"main": "dist/vue-office-area.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",
"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-office-area :projectName="projectName" :postUrl="postUrl" :areaOptions="areaOptions" @selected="selected"></vue-office-area>
</div>
</template>
<script>
import vueOfficeArea from './lib/vue-office-area'
export default {
name: 'app',
data () {
return {
projectName: '', // 当前项目名
postUrl: '', // url
areaOptions: {
provinceName: '',
provinceId: '',
cityName: '',
cityId: '',
countryName: '',
countyId: ''
},
}
},
components: {
vueOfficeArea
},
methods: {
selected(val) {
// 模拟检查数据
console.log(val)
}
}
}
</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 vueOfficeArea from './vue-office-area.vue' // 导入组件
const OfficeArea = {
install(Vue, options) {
Vue.component(vueOfficeArea.name, vueOfficeArea) // vueOfficeArea.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(OfficeArea);
}
export default OfficeArea
// export {
// vueOfficeArea
// }
src/lib/vue-office-area.vue 0 → 100644
<template>
<div class="area-box">
<div class="area-wrapper">
<div class="area-container" >
<div class="area-wrap">
<el-select class="w-160" no-data-text=" " v-model="ruleForm.provience" placeholder="请选择省份" @focus="getPro" @change="selectPro">
<el-option
v-for="item in optionsPro"
:key="item.provinceId"
:label="item.provinceName"
:value="item.provinceId">
</el-option>
</el-select>
<el-select class="w-160" no-data-text=" " v-model="ruleForm.city" placeholder="请选择城市" @focus="getCity" @change="selectCity">
<el-option
v-for="item in optionsCity"
:key="item.cityId"
:label="item.cityName"
:value="item.cityId">
</el-option>
</el-select>
<el-select class="w-160" no-data-text=" " v-model="ruleForm.country" placeholder="请选择区县" @focus="getCountry" @change="selectCountry">
<el-option
v-for="item in optionsRegion"
:key="item.countyId"
:label="item.countyName"
:value="item.countyId">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</template>
<script>
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-area-ab',
props: {
areaOptions: {
type: Object
},
projectName: {
type: String,
default: ''
},
postUrl: {
type: String,
}
},
data () {
return {
repProjectName: 'gic-web', // 项目名
// 省市区
ruleForm: {
provience: '',
provinceName: '',
city: '',
cityName: '',
countryName: '',
country: '',
areaId: ''// 选择的区 id
},
// 省
optionsPro: [
],
// 市
optionsCity: [
],
// 区/县
optionsRegion: [
],
provinceId: '',
cityId: '',
countyId: '',
// 区域
typeId: 1, // 1:省 2:市 3:区(县)
getProId: '', // 选择的省 id
getCityId: '',// 选择的城市 id
// 登录信息
loginInnfo: {
loginName: 'damogic',
password: 1
},
// 获取 location origin
baseUrl: '',
requstUrl: '',
}
},
beforeMount() {
const 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: {
handleChange(value) {
console.log(value);
//选择完毕后将值传递给父组件
this.$emit('selected', value)
},
// 点击省
getPro: function() {
const that = this
if (that.optionsPro.length) {
return;
}
that.typeId = 1
that.getArea(0)
},
// 点击市
getCity: function(e) {
const that = this
that.typeId = 2
if (!that.getProId) {
that.$message.error({
duration: 1000,
message: '请先选择省'
})
return;
}
that.getArea(that.getProId)
},
// 点击县区
getCountry: function() {
const that = this
that.typeId = 3
if (that.getCityId == '') {
// showMsg.showmsg('请先选择省市','warning')
that.$message.error({
duration: 1000,
message: '请先选择省市'
})
return;
}
that.getArea(that.getCityId)
},
// 选择省
selectPro: function(e) {
const that = this
that.getProId = e;
that.getCityId = ''
that.ruleForm.city = ''
that.ruleForm.country = ''
that.optionsPro.forEach(function(item,index){
if (e == item.provinceId) {
that.ruleForm.provinceName = item.provinceName
}
})
that.$emit('selected', that.ruleForm)
},
// 选择市
selectCity: function(e) {
const that = this
that.getCityId = e;
that.ruleForm.country = ''
that.optionsCity.forEach(function(item,index){
if (e == item.cityId) {
that.ruleForm.cityName = item.cityName
}
})
that.$emit('selected', that.ruleForm)
},
// 选择县区
selectCountry: function(e) {
const that = this
that.areaId = e
that.ruleForm.areaId = e
that.optionsRegion.forEach(function(item,index){
if (e == item.countyId) {
that.ruleForm.countryName = item.countyName
}
})
that.$emit('selected', that.ruleForm)
},
// 获取区域
getArea: function(areaId) {
const that = this
console.log(areaId)
var para = {
requestProject: that.repProjectName
};
if (areaId == 0) {
para.type = that.typeId;
}
if (areaId != 0) {
para.type = that.typeId;
para.id = areaId;
}
that.optionsCity = [];
that.optionsRegion = [];
that.axios.post(that.baseUrl+requstUrl,qs.stringify(para)).then((res) => {
console.log(res,res.data,res.data.errorCode)
var resList = '';
resList = res.data;
if (resList.errorCode == 0) {
// 如果是省
if (that.typeId == 1) {
that.optionsPro = [];
for (var i in resList.result) {
// if (i == '710000'|| i == '810000' || i =='820000') {return;}
that.optionsPro.push(resList.result[i])
}
console.log("省:",that.optionsPro)
}
// 如果是市
if (that.typeId == 2) {
for (var i in resList.result) {
delete resList.result[i].provinceId
that.optionsCity.push(resList.result[i])
}
}
// 如果是区
if (that.typeId == 3) {
for (var i in resList.result) {
delete resList.result[i].provinceId;
delete resList.result[i].cityId;
that.optionsRegion.push(resList.result[i])
}
}
return false;
}
that.$message.error({
duration: 1000,
message: res.data.errorMessage
})
}).catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: res.data.errorMessage
})
});
},
toLogin() {
const that = this;
that.axios.post(that.baseUrl+'/api-auth/doLogin',qs.stringify(that.loginInnfo)).then((res) => {
console.log(res)
var resLogin = res.data
if (resLogin.errorCode == 0) {
that.getArea();
}
}).catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: error.errorMessage
})
});
},
setNewData(optionData) {
const that = this;
that.ruleForm.provience = optionData.provinceName;
that.ruleForm.city = optionData.cityName;
that.ruleForm.country = optionData.countryName;
that.ruleForm.provinceName = optionData.provinceName;
that.ruleForm.cityName = optionData.cityName;
that.ruleForm.countryName = optionData.countryName;
that.ruleForm.areaId = optionData.countyId;
that.getProId = optionData.provinceId;
that.getCityId = optionData.cityId;
console.log("that.ruleForm:",that.ruleForm)
},
},
watch: {
areaOptions: function(newData,oldData){
const that = this;
that.setNewData(newData)
},
projectName: function(newData,oldData){
const that = this;
that.repProjectName = newData || 'gic-web';
},
postUrl: function(newData,oldData){
const that = this;
that.requstUrl = newData;
},
},
/* 接收数据 */
mounted(){
console.log("传递的参数对象:",this.areaOptions)
const that = this;
// 项目名
that.repProjectName = that.projectName || 'gic-web';
that.requstUrl = that.postUrl
that.setNewData(that.areaOptions)
},
}
</script>
<style>
.gray-wrapper {
position: relative;
}
.area-wrapper {
position: relative;
bottom: 0px;
height: 40px;
}
.w-160 {
width: 160px;
}
.w-160+.w-160 {
margin-left: 3px;
}
</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-office-area.js',
library: 'vue-office-area',
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