Skip to content

E
enterprise-platform
Commit 2167cf59 authored by 赵啸非's avatar 赵啸非
Browse files
Options

添加区域选择组件

parent 4687c5f7
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 87 deletions
enterprise-manager-ui/admin/src/assets/utils/globalComponents.js
View file @ 2167cf59
......@@ -15,6 +15,7 @@ import FileUpload from '@/components/FileUpload';
import Editor from '@/components/Editor';
import Map from '@/components/Map';
import MapDetail from '@/components/MapDetail';
import AreaSelect from '@/components/AreaSelect';
const Prototype = function() {};
......@@ -35,6 +36,7 @@ Prototype.install = (Vue, options) => {
Vue.component('Editor', Editor) // 富文本
Vue.component('Map', Map) // 地图
Vue.component('MapDetail', MapDetail) // 地图
Vue.component('AreaSelect', AreaSelect) // 区域选择
}
export default Prototype;
enterprise-manager-ui/admin/src/components/AreaSelect.vue 0 → 100644
View file @ 2167cf59
<template>
<div id="addressHorizontalSelect">
<el-row :gutter="10">
<el-col
:span="span">
<el-select
size="small"
v-model="provinceCode"
@focus="getProvinces"
@change="changeProvince"
placeholder="省"
filterable>
<el-option
v-for="item in provinceList"
:key="item.iid"
:label="item.name"
:value="item.iid">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity">
<el-select
size="small"
v-model="cityCode"
@focus="getCities"
@change="changeCity"
placeholder="市"
filterable>
<el-option
v-for="item in cityList"
:key="item.iid"
:label="item.name"
:value="item.iid">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea">
<el-select
size="small"
v-model="areaCode"
@focus="getAreas"
@change="changeArea"
placeholder="区/县"
filterable>
<el-option
v-for="item in areaList"
:key="item.iid"
:label="item.name"
:value="item.iid">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea&& !hideStreet">
<el-select
size="small"
v-model="streetCode"
@focus="getStreet"
@change="changeStreet"
placeholder="街道"
filterable>
<el-option
v-for="item in streetList"
:key="item.iid"
:label="item.name"
:value="item.iid">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea&& !hideStreet&& !hideStreet">
<el-select
size="small"
v-model="communityCode"
@focus="getCommunity"
@change="changeCommunity"
placeholder="社区"
filterable>
<el-option
v-for="item in communityList"
:key="item.iid"
:label="item.name"
:value="item.iid">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'addressHorizontalSelect',
components: {},
props: {
value: {
type: [String, Number, Array],
},
hideCity: { // 隐藏市
type: Boolean,
default: false
},
hideArea: { // 隐藏区/县
type: Boolean,
default: false
},
hideStreet: { // 隐藏街道
type: Boolean,
default: false
},
hideCommunity: { // 隐藏社区
type: Boolean,
default: false
},
addressCode: null // 地址编码
},
model: {
prop: 'value',
event: 'addressSelect'
},
data() {
return {
provinceList: [], // 省份列表
cityList: [], // 城市列表
areaList: [], // 区/县列表
streetList: [], // 街道列表
communityList: [], // 社区列表
provinceCode: '', // 省份编码
cityCode: '', // 城市编码
areaCode: '', // 区/县编码
streetCode: '', // 街道编码
communityCode: '', // 社区编码
cityFlag: false, // 避免重复请求的标志
provinceFlag: false,
areaFlag: false,
streetFlag: false,
communityFlag: false,
}
},
computed: {
span() {
if (this.hideCity) {
return 24
}
if (this.hideArea) {
return 12
}
if (this.hideStreet) {
return 8
}
if (this.hideCommunity) {
return 6
}
return 4
}
},
created() {
this.getProvinces()
},
methods: {
fetchData(array, code) {
var split = code.split("&");
let parms = {pid: split[0], size: -1}
this.$post("/base/area/list", parms).then((res) => {
if (res.code == 1) {
array.splice(0, array.length);
res.data.data.map(i => {
let obj = {}
obj.name = i.name
obj.iid = i.iid + "&" + i.areaCode
array.push(obj)
return obj;
})
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
// 根据国家编码获取省份列表
getProvinces() {
if (this.provinceFlag) {
return
}
this.fetchData(this.provinceList, "0&510000000000")
this.provinceFlag = true
},
// 省份修改，拉取对应城市列表
changeProvince(val) {
this.fetchData(this.cityList, this.provinceCode)
this.cityFlag = true
this.cityCode = ''
this.areaCode = ''
this.streetCode = ''
this.communityCode = ''
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
},
// 根据省份编码获取城市列表
getCities() {
if (this.cityFlag) {
return
}
if (this.provinceCode) {
this.fetchData(this.cityList, this.provinceCode)
this.cityFlag = true
}
},
// 城市修改，拉取对应区域列表
changeCity(val) {
this.fetchData(this.areaList, this.cityCode)
this.areaFlag = true
this.areaCode = ''
this.streetCode = ''
this.communityCode = ''
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
},
// 根据城市编码获取区域列表
getAreas() {
if (this.areaFlag) {
return
}
if (this.cityCode) {
this.fetchData(this.areaList, this.cityCode)
}
},
// 区域修改
changeArea(val) {
this.fetchData(this.streetList, this.areaCode)
this.areaFlag = true
this.streetCode = ''
this.communityCode = ''
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
},
// 根据区域编码获取街道列表
getStreet() {
if (this.streetFlag) {
return
}
if (this.areaCode) {
this.fetchData(this.streetList, this.areaCode)
this.streetFlag = true
}
},
// 街道修改，拉取对应社区列表
changeStreet(val) {
this.fetchData(this.communityList, this.streetCode)
this.streetFlag = true
this.communityCode = ''
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
},
// 根据区域编码获取街道列表
getCommunity() {
if (this.communityFlag) {
return
}
if (this.streetCode) {
this.fetchData(this.communityList, this.streetCode)
this.communityFlag = true
}
},
// 社区修改，拉取社区列表
changeCommunity(val) {
console.log("changeCommunity",val)
this.fetchData(this.communityList, this.streetCode)
this.communityFlag = true
var split = val.split("&");
this.$emit("input", split[1]);
this.$emit('addressSelect', split[1])
},
// 重置省市区/县编码
reset() {
this.provinceCode = '',
this.cityCode = '',
this.areaCode = '',
this.streetCode = '',
this.communityCode = ''
},
// 地址编码转换成省市区街道社区列表
addressCodeToList(addressCode) {
if (!addressCode) return false
let parms = {areaCode:addressCode}
this.$post("/base/area/list", parms).then((res) => {
if (res.code == 1) {
if(res.data.data.length>0){
let area = res.data.data[0];
let pid = area.pid + "&" + area.areaCode
if(area.areaLevel=='1'){
//省
this.provinceCode = area.iid + "&" + area.areaCode
this.fetchData(this.provinceList, pid)
return
}else if(area.areaLevel=='2'){
//市
this.cityCode = area.iid + "&" + area.areaCode
this.fetchData(this.cityList, pid)
}else if(area.areaLevel=='3'){
//区县
this.areaCode = area.iid + "&" + area.areaCode
this.fetchData(this.areaList, pid)
}else if(area.areaLevel=='4'){
//街道
let pid = area.pid + "&" + area.areaCode
this.fetchData(this.streetList,pid)
this.streetCode = area.iid + "&" + area.areaCode
}else if(area.areaLevel=='5'){
//社区
this.fetchData(this.communityList, pid)
this.communityCode = area.iid + "&" + area.areaCode
}
this.$post("/base/area/list", {iid:area.pid}).then((res) => {
this.addressCodeToList(res.data.data[0].areaCode)
})
}
}
}).catch((error) => {
this.$message.error(error.message);
});
}
},
watch: {
value: {
deep: true,
immediate: true,
handler(newVal) {
if (newVal) {
this.addressCodeToList(newVal)
} else {
this.$nextTick(() => {
this.reset()
})
}
}
}
}
}
</script>
<style lang="less" scoped>
</style>
enterprise-manager-ui/admin/src/views/company/drawershow.vue
View file @ 2167cf59
......@@ -5,20 +5,33 @@
:visible.sync="open"
:direction="direction"
:destroy-on-close="true"
size="70%">
size="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field label="公司名称" prop="companyName" v-model="form.companyName" placeholder="请输入公司名称"/>
<Field label="公司名称" prop="companyName" v-model="form.companyName" placeholder="请输入公司名称"/>
<Field label="公司编码" prop="companyCode" v-model="form.companyCode" placeholder="请输入公司编码"/>
<Field label="注册号" prop="registrationNumber" v-model="form.registrationNumber" placeholder="请输入注册号"/>
<Field label="法定代表人" prop="legalRepresentative" v-model="form.legalRepresentative" placeholder="请输入法定代表人"/>
<Field label="注册资本" prop="registeredCapital" v-model="form.registeredCapital" placeholder="请输入注册资本"/>
<Field label="公司类型" prop="companyType" v-model="form.companyType" placeholder="请输入公司类型"/>
<Field label="经营范围" prop="businessScope" v-model="form.businessScope" placeholder="请输入经营范围"/>
<Field label="经营地址" prop="businessAdress" v-model="form.businessAdress" placeholder="请输入经营地址"/>
<!-- <Field :span="24" label="经营地址" prop="businessAdress" v-model="form.businessAdress" placeholder="请输入经营地址">
<p>当前选中的行政区划编码为： {{regionCodeList}}</p>
<el-cascader v-model="regionCodeList" :props="areaprops"></el-cascader>
</Field>-->
<Field :span="24" label="经营地址" prop="businessAdress" v-model="form.businessAdress" placeholder="请输入经营地址">
<area-select v-model="form.areaCode" @addressSelect="addressSelect"></area-select>
</Field>
<Field label="所在地" prop="location" v-model="form.location" placeholder="请输入所在地"/>
<Field label="所属区域编码" prop="areaCode" v-model="form.areaCode" placeholder="请输入所属区域编码"/>
<Field label="所属区域名称" prop="areaName" v-model="form.areaName" placeholder="请输入所属区域名称"/>
<Field label="联系电话" prop="contactPhone" v-model="form.contactPhone" placeholder="请输入联系电话"/>
<Field label="电子邮件地址" prop="email" v-model="form.email" placeholder="请输入电子邮件地址"/>
<Field label="公司网站" prop="website" v-model="form.website" placeholder="请输入公司网站"/>
......@@ -116,7 +129,36 @@
this.changePath("company")
},
data() {
let that = this
return {
regionCodeList: [],
areaprops: {
// 单选
checkStrictly: true,
// 懒加载
lazy: true,
lazyLoad(node, resolve) {
var param = {
pid:node.level===0?0:node.data.id,
size:-1
};
that.$post("/base/area/list", param)
.then(res => {
console.log(res)
let nodes = res.data.data.map(item => {
return {
value: item.areaCode,
label: item.name,
id:item.iid,
leaf: item.haveSonArea === "False"
}
})
resolve(nodes)
})
}
},
// 子表选中数据
checkedCompanyLabels: [],
// 公司标注表格数据
......@@ -177,6 +219,13 @@
},
methods: {
addressSelect(val){
console.log("addressSelect",val)
},
/** 公司标注序号 */
rowCompanyLabelsIndex({ row, rowIndex }) {
row.index = rowIndex + 1;
......
enterprise-manager-ui/admin/src/views/company/list.vue
View file @ 2167cf59
......@@ -3,7 +3,6 @@
<LayoutTable :data="tableData" :config="tableConfig">
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template>
......@@ -21,24 +20,7 @@
created() {
},
methods: {
renderTable(tableData) {
return (
<el-table stripe data={tableData} class="total-table">
{this.columnSet.map((item) => this.renderTableColumn(item))}
</el-table>
);
},
renderTableColumn(options) {
return (
<el-table-column
prop={options.prop}
label={options.label}
width={options.width}
formatter={options.formatter}
>
</el-table-column>
);
},
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
......@@ -55,81 +37,29 @@
},
data() {
return {
/** 子表列元素 */
columnSet:[
{label: "标签Id", prop: "labelId", formatter: this.formatter},
{label: "公司名称", prop: "labelName"},
{label: "公司Id", prop: "companyId", formatter: this.formatter},
{label: "公司名称", prop: "companyName"},
{label: "备注", prop: "remark"},
],
config: {
search: [
{
name: "companyName",
type: "text",
label: "公司名称",
fuzzy: true,
},
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "公司名称", prop: "companyName"},
{label: "公司编码", prop: "companyCode"},
{label: "注册号", prop: "registrationNumber"},
{label: "法定代表人", prop: "legalRepresentative"},
{label: "注册资本", prop: "registeredCapital"},
{label: "公司类型", prop: "companyType"},
{label: "经营范围", prop: "businessScope"},
{label: "经营地址", prop: "businessAdress"},
{label: "所在地", prop: "location"},
{label: "所属区域编码", prop: "areaCode"},
{label: "所属区域名称", prop: "areaName"},
{label: "联系电话", prop: "contactPhone"},
{label: "电子邮件地址", prop: "email"},
{label: "公司网站", prop: "website"},
{label: "税务登记号", prop: "taxRegistrationNumber"},
{label: "社会信用代码", prop: "socialCreditCode"},
{label: "商标信息", prop: "trademarkInfo"},
{label: "网站历史备案信息", prop: "websiteRegistrationInfo"},
{label: "员工总数", prop: "totalEmployees",formatter: this.formatter},
{label: "软件著作权数量", prop: "softNum",formatter: this.formatter},
{label: "经营地址", prop: "businessAdress"},
{label: "专利数量", prop: "patentNum",formatter: this.formatter},
{label: "描述", prop: "companyIntroduction"},
{label: "历史发展", prop: "hisDevelop"},
{label: "更新时间", prop: "createTime", formatter: this.formatterDate},
{label: "创建用户", prop: "createUserId", formatter: this.formatter},
{label: "公司标注",
width: 120,
prop: "subColumns",
formatter: (row) => {
let widthsize = this.columnSet.reduce((pre, cur) => {
return pre + Number(cur.width);
}, 50);
return (
<el-popover placement="right" width={widthsize} trigger="click">
{this.renderTable(row.companyLabelsList)}
<el-button type="text" slot="reference">详细</el-button>
</el-popover>
);
},
},
{
label: "操作",
width: 240,
......@@ -144,4 +74,4 @@
};
}
};
</script>
\ No newline at end of file
</script>
enterprise-manager-ui/admin/src/views/login/login.vue
View file @ 2167cf59
......@@ -80,6 +80,7 @@ export default {
loginSuccess({ data }) {
this.$store.commit("setUserData", data);
console.log("userData", this.$store.state.userData);
console.log("redirect",this.redirect)
this.$router.replace({
path: this.redirect
});
......
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