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> |
<template> |
||||
<div class="AreaPicker"> |
<div class="AreaPicker"> |
||||
<el-select v-model="form.province" |
<el-select |
||||
|
v-model="form.province" |
||||
@change="changeProvince(form.province)" |
@change="changeProvince(form.province)" |
||||
filterable |
filterable |
||||
placeholder="请选择省份" |
placeholder="请选择省份" |
||||
:loading="loading == 'province'"> |
:loading="loading == 'province'" |
||||
|
> |
||||
<el-option |
<el-option |
||||
v-for="item in province_list" |
v-for="item in province_list" |
||||
:key="item.sid" |
:key="item.sid" |
||||
:label="item.name" |
:label="item.name" |
||||
:value="item.sid" |
:value="item.sid" |
||||
> |
> |
||||
</el-option> |
</el-option> |
||||
</el-select> |
</el-select> |
||||
<el-select v-model="form.city" |
<el-select |
||||
@change='changeCity(form.city)' |
v-model="form.city" |
||||
|
@change="changeCity(form.city)" |
||||
filterable |
filterable |
||||
placeholder="请选择市" |
placeholder="请选择市" |
||||
:loading="loading == 'city'" |
:loading="loading == 'city'" |
||||
style="margin-left: 8px;"> |
style="margin-left: 8px" |
||||
|
> |
||||
<el-option |
<el-option |
||||
v-for="item in city_list" |
v-for="item in city_list" |
||||
:key="item.sid" |
:key="item.sid" |
||||
:label="item.name" |
:label="item.name" |
||||
:value="item.sid"> |
:value="item.sid" |
||||
|
> |
||||
</el-option> |
</el-option> |
||||
</el-select> |
</el-select> |
||||
<el-select v-model="form.county" |
<el-select |
||||
@change='changeCounty(form.county)' |
v-model="form.county" |
||||
|
@change="changeCounty(form.county)" |
||||
filterable |
filterable |
||||
:loading="loading == 'county'" |
:loading="loading == 'county'" |
||||
placeholder="请选择县/区" |
placeholder="请选择县/区" |
||||
style="margin-left: 8px;"> |
style="margin-left: 8px" |
||||
|
> |
||||
<el-option |
<el-option |
||||
v-for="item in county_list" |
v-for="item in county_list" |
||||
:key="item.sid" |
:key="item.sid" |
||||
:label="item.name" |
:label="item.name" |
||||
:value="item.sid"> |
:value="item.sid" |
||||
|
> |
||||
</el-option> |
</el-option> |
||||
</el-select> |
</el-select> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { |
import { getProvince, getCity, getCounty } from "@/api/Common/areaPicker.js"; |
||||
getProvince, |
export default { |
||||
getCity, |
props: { |
||||
getCounty |
province: { |
||||
} from '@/api/Common/areaPicker.js' |
type: String, |
||||
export default { |
default: "", |
||||
props:{ |
|
||||
province:{ |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
city:{ |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
county:{ |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
}, |
||||
data() { |
city: { |
||||
return { |
type: String, |
||||
province_list: [], |
default: "", |
||||
city_list: [], |
|
||||
county_list: [], |
|
||||
form:{ |
|
||||
province: this.province, |
|
||||
city: this.city, |
|
||||
county: this.county |
|
||||
}, |
|
||||
loading: false |
|
||||
} |
|
||||
}, |
}, |
||||
watch:{ |
county: { |
||||
province:function(newVal,oldVal){ |
type: String, |
||||
this.form.province = newVal |
default: "", |
||||
}, |
}, |
||||
city:function(newVal,oldVal){ |
}, |
||||
this.form.city = newVal |
data() { |
||||
|
return { |
||||
|
province_list: [], |
||||
|
city_list: [], |
||||
|
county_list: [], |
||||
|
form: { |
||||
|
province: this.province, |
||||
|
city: this.city, |
||||
|
county: this.county, |
||||
}, |
}, |
||||
county:function(newVal,oldVal){ |
loading: false, |
||||
this.form.county = newVal |
}; |
||||
} |
}, |
||||
|
watch: { |
||||
|
province: function (newVal, oldVal) { |
||||
|
this.form.province = newVal; |
||||
}, |
}, |
||||
async mounted() { |
city: function (newVal, oldVal) { |
||||
let provincelist = await getProvince() |
this.form.city = newVal; |
||||
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: { |
county: function (newVal, oldVal) { |
||||
changeProvince(val){ |
this.form.county = newVal; |
||||
console.log(val) |
}, |
||||
getCity({ sid: val }).then(res => { |
}, |
||||
this.city_list = res.data |
async mounted() { |
||||
this.loading = false |
let provincelist = await getProvince(); |
||||
}) |
this.province_list = provincelist.data; |
||||
let obj = {}; |
if (this.province) { |
||||
obj = this.province_list.find((item)=>{ |
let citylist = await getCity({ sid: this.province }); |
||||
return item.sid === val;//筛选出匹配数据 |
this.city_list = citylist.data; |
||||
}); |
|
||||
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) |
|
||||
} |
|
||||
} |
} |
||||
} |
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> |
</script> |
||||
|
|
||||
|
|
||||
<style> |
<style> |
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue