fengdong777
2 years ago
11 changed files with 623 additions and 200 deletions
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<!--标题按钮部分开始--> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>{{ viewTitle }}</div> |
|||
<!--start 按钮部分开始 :icon="item.icon"--> |
|||
<div> |
|||
<el-button v-for="item in btnList" :key="item.btnKey" :type="item.type" :size="item.size" :disabled="btndisabled" @click="btnHandle(item.btnKey)"> |
|||
<svg-icon v-if="item.icon" :iconClass="item.icon"/>{{ item.btnLabel }} |
|||
</el-button> |
|||
</div> |
|||
<!--end 按钮部分结束--> |
|||
</div> |
|||
<!--标题按钮部分结束--> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ButtonBar', |
|||
props: { |
|||
viewTitle: String, |
|||
btndisabled: { type: Boolean, default: false } |
|||
}, |
|||
data() { |
|||
return { |
|||
currentPath: this.$route.path, |
|||
userSid: this.$store.getters.userInfo ? this.$store.getters.userInfo.userSid : '', |
|||
btnList: [ |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'plus', |
|||
btnKey: 'toAdd', |
|||
btnLabel: '新增' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'edit', |
|||
btnKey: 'toEdit', |
|||
btnLabel: '编辑' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'submit', |
|||
btnKey: 'doSubmit', |
|||
btnLabel: '提交' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
size: 'small', |
|||
icon: 'del', |
|||
btnKey: 'doDel', |
|||
btnLabel: '删除' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'Import', |
|||
btnKey: 'doImport', |
|||
btnLabel: '导入' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'export', |
|||
btnKey: 'build', |
|||
btnLabel: '导出' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
created: function() { |
|||
this.initPermission() |
|||
}, |
|||
methods: { |
|||
initPermission() { |
|||
console.log('*******************当前路径 ' + this.currentPath) |
|||
console.log('*******************当前用户 ' + this.userSid) |
|||
const params = { |
|||
currentPath: this.currentPath, |
|||
userSid: this.userSid |
|||
} |
|||
// req |
|||
// .buttonPermission(params) |
|||
// .then(resp => { |
|||
// if (resp.success) { |
|||
// this.btnList = resp.data |
|||
// } |
|||
// }) |
|||
// .catch(e => { |
|||
// console.log('请求权限按钮组出错：' + e) |
|||
// }) |
|||
}, |
|||
btnHandle(btnKey) { |
|||
this.$emit('btnhandle', btnKey) |
|||
}, |
|||
setButtonList(value) { |
|||
this.btnList = value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.16em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
margin-right: 3px; |
|||
} |
|||
</style> |
|||
@ -1,151 +1,154 @@ |
|||
<template> |
|||
<div class="AreaPicker"> |
|||
<el-select v-model="form.province" |
|||
<el-select |
|||
v-model="form.province" |
|||
@change="changeProvince(form.province)" |
|||
filterable |
|||
placeholder="请选择省份" |
|||
:loading="loading == 'province'"> |
|||
:loading="loading == 'province'" |
|||
> |
|||
<el-option |
|||
v-for="item in province_list" |
|||
:key="item.sid" |
|||
:label="item.name" |
|||
:value="item.sid" |
|||
> |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="form.city" |
|||
@change='changeCity(form.city)' |
|||
<el-select |
|||
v-model="form.city" |
|||
@change="changeCity(form.city)" |
|||
filterable |
|||
placeholder="请选择市" |
|||
:loading="loading == 'city'" |
|||
style="margin-left: 8px;"> |
|||
style="margin-left: 8px" |
|||
> |
|||
<el-option |
|||
v-for="item in city_list" |
|||
:key="item.sid" |
|||
:label="item.name" |
|||
:value="item.sid"> |
|||
:value="item.sid" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="form.county" |
|||
@change='changeCounty(form.county)' |
|||
<el-select |
|||
v-model="form.county" |
|||
@change="changeCounty(form.county)" |
|||
filterable |
|||
:loading="loading == 'county'" |
|||
placeholder="请选择县/区" |
|||
style="margin-left: 8px;"> |
|||
style="margin-left: 8px" |
|||
> |
|||
<el-option |
|||
v-for="item in county_list" |
|||
:key="item.sid" |
|||
:label="item.name" |
|||
:value="item.sid"> |
|||
:value="item.sid" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getProvince, |
|||
getCity, |
|||
getCounty |
|||
} from '@/api/Common/areaPicker.js' |
|||
export default { |
|||
props:{ |
|||
province:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
city:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
county:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
import { getProvince, getCity, getCounty } from "@/api/Common/areaPicker.js"; |
|||
export default { |
|||
props: { |
|||
province: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
data() { |
|||
return { |
|||
province_list: [], |
|||
city_list: [], |
|||
county_list: [], |
|||
form:{ |
|||
province: this.province, |
|||
city: this.city, |
|||
county: this.county |
|||
}, |
|||
loading: false |
|||
} |
|||
city: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
watch:{ |
|||
province:function(newVal,oldVal){ |
|||
this.form.province = newVal |
|||
}, |
|||
city:function(newVal,oldVal){ |
|||
this.form.city = newVal |
|||
county: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
province_list: [], |
|||
city_list: [], |
|||
county_list: [], |
|||
form: { |
|||
province: this.province, |
|||
city: this.city, |
|||
county: this.county, |
|||
}, |
|||
county:function(newVal,oldVal){ |
|||
this.form.county = newVal |
|||
} |
|||
loading: false, |
|||
}; |
|||
}, |
|||
watch: { |
|||
province: function (newVal, oldVal) { |
|||
this.form.province = newVal; |
|||
}, |
|||
async mounted() { |
|||
let provincelist = await getProvince() |
|||
this.province_list = provincelist.data |
|||
if(this.province){ |
|||
let citylist = await getCity({ sid: this.province }) |
|||
this.city_list = citylist.data |
|||
} |
|||
if(this.city){ |
|||
let countylist = await getCounty({ sid: this.city }) |
|||
this.county_list = countylist.data |
|||
} |
|||
this.loading = false |
|||
city: function (newVal, oldVal) { |
|||
this.form.city = newVal; |
|||
}, |
|||
methods: { |
|||
changeProvince(val){ |
|||
console.log(val) |
|||
getCity({ sid: val }).then(res => { |
|||
this.city_list = res.data |
|||
this.loading = false |
|||
}) |
|||
let obj = {}; |
|||
obj = this.province_list.find((item)=>{ |
|||
return item.sid === val;//筛选出匹配数据 |
|||
}); |
|||
console.log(obj) |
|||
this.form.city = '' |
|||
this.form.county = '' |
|||
this.city_list = [] |
|||
this.county_list = [] |
|||
this.loading = 'city' |
|||
this.$emit('areaPicker', obj.sidPath) |
|||
}, |
|||
changeCity(val){ |
|||
let obj = {}; |
|||
obj = this.city_list.find((item)=>{ |
|||
return item.sid === val;//筛选出匹配数据 |
|||
}); |
|||
console.log(obj) |
|||
this.form.county = '' |
|||
this.county_list = [] |
|||
this.loading = 'county' |
|||
this.$emit('areaPicker', obj.sidPath) |
|||
getCounty({ sid: val }).then(res => { |
|||
this.county_list = res.data |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
changeCounty(val){ |
|||
let obj = {}; |
|||
obj = this.county_list.find((item)=>{ |
|||
return item.sid === val;//筛选出匹配数据 |
|||
}); |
|||
this.$emit('areaPicker', obj.sidPath) |
|||
} |
|||
county: function (newVal, oldVal) { |
|||
this.form.county = newVal; |
|||
}, |
|||
}, |
|||
async mounted() { |
|||
let provincelist = await getProvince(); |
|||
this.province_list = provincelist.data; |
|||
if (this.province) { |
|||
let citylist = await getCity({ sid: this.province }); |
|||
this.city_list = citylist.data; |
|||
} |
|||
} |
|||
if (this.city) { |
|||
let countylist = await getCounty({ sid: this.city }); |
|||
this.county_list = countylist.data; |
|||
} |
|||
this.loading = false; |
|||
}, |
|||
methods: { |
|||
changeProvince(val) { |
|||
console.log(val); |
|||
getCity({ sid: val }).then((res) => { |
|||
this.city_list = res.data; |
|||
this.loading = false; |
|||
}); |
|||
let obj = {}; |
|||
obj = this.province_list.find((item) => { |
|||
return item.sid === val; //筛选出匹配数据 |
|||
}); |
|||
console.log(obj); |
|||
this.form.city = ""; |
|||
this.form.county = ""; |
|||
this.city_list = []; |
|||
this.county_list = []; |
|||
this.loading = "city"; |
|||
this.$emit("areaPicker", obj.sidPath); |
|||
}, |
|||
changeCity(val) { |
|||
let obj = {}; |
|||
obj = this.city_list.find((item) => { |
|||
return item.sid === val; //筛选出匹配数据 |
|||
}); |
|||
console.log(obj); |
|||
this.form.county = ""; |
|||
this.county_list = []; |
|||
this.loading = "county"; |
|||
this.$emit("areaPicker", obj.sidPath); |
|||
getCounty({ sid: val }).then((res) => { |
|||
this.county_list = res.data; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
changeCounty(val) { |
|||
let obj = {}; |
|||
obj = this.county_list.find((item) => { |
|||
return item.sid === val; //筛选出匹配数据 |
|||
}); |
|||
this.$emit("areaPicker", obj.sidPath); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
|
|||
Loading…
Reference in new issue