|
|
@@ -0,0 +1,386 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="addressName"
|
|
|
+ placement="top"
|
|
|
+ :enterable="false"
|
|
|
+ :disabled="disabled"
|
|
|
+ >
|
|
|
+ <el-cascader
|
|
|
+ :disabled="casDisabled"
|
|
|
+ :clearable="clearable"
|
|
|
+ ref="areaSelect"
|
|
|
+ v-model="areaCodeList"
|
|
|
+ :props="belongRegoinProps"
|
|
|
+ :options="belongRegoinOptions"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="belongRegionChange"
|
|
|
+ @visible-change="visibleChange"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+// https://gitee.com/xiong_chencheng_1127/areaSelect/tree/master
|
|
|
+// import AreaCascader from "../../components/areaCascader.vue";
|
|
|
+// components: {
|
|
|
+// AreaCascader,
|
|
|
+// },
|
|
|
+// <Area-cascader
|
|
|
+// @selectedAreaList="selectedAreaList"
|
|
|
+// :isCurrentOrgDefaultArea="false"
|
|
|
+// :clearable="true"
|
|
|
+// ></Area-cascader>
|
|
|
+// 这里是我项目中自己封装的get请求 各位可自己封装
|
|
|
+// import { get } from "@/apis/apicommon";
|
|
|
+var Mock = require("mockjs");
|
|
|
+let dataList = Mock.mock({
|
|
|
+ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
|
|
|
+ "data|1-10": [
|
|
|
+ {
|
|
|
+ // 属性 id 是一个自增数，起始值为 1，每次增 1
|
|
|
+ "id|1-10000": 1,
|
|
|
+ "name|+1": "@city(true)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+export default {
|
|
|
+ name: "areaCascader",
|
|
|
+ components: {},
|
|
|
+ // 注意：isCurrentOrgDefaultArea与isPortDefaultArea不能同时为true
|
|
|
+ props: {
|
|
|
+ setLevel: {
|
|
|
+ type: Number,
|
|
|
+ default: 5,
|
|
|
+ },
|
|
|
+ // true开启默认回显当前账号所属区划地址，为false时关闭回显并且可选择任意区划
|
|
|
+ isCurrentOrgDefaultArea: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 回显指定区划地址的对象数据,必须为以下指定格式字段，切且注意该对象传入时间必须在该组件初始化之前
|
|
|
+ defaultAddressInfos: {
|
|
|
+ type: Object,
|
|
|
+ // default:{
|
|
|
+ // addressName:"",
|
|
|
+ // provinceCode:"",
|
|
|
+ // cityCode:"",
|
|
|
+ // countyCode:"",
|
|
|
+ // streetCode:"",
|
|
|
+ // communityCode:"",
|
|
|
+ // level:""
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // true开启默认回显指定区划地址，需必传对象defaultAddressInfos，且与isCurrentOrgDefaultArea不能同时为true
|
|
|
+ isPortDefaultArea: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 是否可清空已选，默认不可清空
|
|
|
+ clearable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ casDisabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ data() {
|
|
|
+ const self = this;
|
|
|
+ return {
|
|
|
+ disabled: true,
|
|
|
+ addressName: "",
|
|
|
+ defaultHosuse: {
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ area: "",
|
|
|
+ town: "",
|
|
|
+ vill: "",
|
|
|
+ },
|
|
|
+ CurrentOrg: {},
|
|
|
+ currentLastLevelCode: "",
|
|
|
+ CurrentLevel: Number,
|
|
|
+ areaCodeList: [],
|
|
|
+ currentOrgLevel: "",
|
|
|
+ belongRegoinOptions: [],
|
|
|
+ belongRegoinProps: {
|
|
|
+ checkStrictly: true,
|
|
|
+ lazy: true,
|
|
|
+ lazyLoad(node, resolve) {
|
|
|
+ setTimeout(() => {
|
|
|
+ self.getAreaForLazyLoad(node, resolve);
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log(data);
|
|
|
+ if (this.isCurrentOrgDefaultArea) {
|
|
|
+ // 通过当前账号所在区划回显
|
|
|
+ this.getCurrentOrg();
|
|
|
+ }
|
|
|
+ if (this.isPortDefaultArea) {
|
|
|
+ // 通过指定区划回显
|
|
|
+ this.getDefaultArea();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ visibleChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ if (val) {
|
|
|
+ this.disabled = true;
|
|
|
+ } else if (!val && this.addressName) {
|
|
|
+ this.disabled = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ belongRegionChange(val) {
|
|
|
+ let res = this.$refs.areaSelect.getCheckedNodes();
|
|
|
+ console.log(res);
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ this.addressName =
|
|
|
+ res[0].pathLabels[0] +
|
|
|
+ (res[0].pathLabels[1] || "") +
|
|
|
+ (res[0].pathLabels[2] || "") +
|
|
|
+ (res[0].pathLabels[3] || "") +
|
|
|
+ (res[0].pathLabels[4] || "");
|
|
|
+ let areaNameObject = {
|
|
|
+ provinceName: res[0].pathLabels[0],
|
|
|
+ cityName: res[0].pathLabels[1],
|
|
|
+ countyName: res[0].pathLabels[2],
|
|
|
+ streetName: res[0].pathLabels[3],
|
|
|
+ communityName: res[0].pathLabels[4],
|
|
|
+ };
|
|
|
+ let areaCodeObject = {
|
|
|
+ provinceCode: res[0].path[0],
|
|
|
+ cityCode: res[0].path[1],
|
|
|
+ countyCode: res[0].path[2],
|
|
|
+ streetCode: res[0].path[3],
|
|
|
+ communityCode: res[0].path[4],
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ areaNameObject,
|
|
|
+ areaCodeObject,
|
|
|
+ };
|
|
|
+ this.$emit("selectedAreaList", data);
|
|
|
+ } else {
|
|
|
+ this.addressName = "";
|
|
|
+ let areaNameObject = {
|
|
|
+ provinceName: "",
|
|
|
+ cityName: "",
|
|
|
+ countyName: "",
|
|
|
+ streetName: "",
|
|
|
+ communityName: "",
|
|
|
+ };
|
|
|
+ let areaCodeObject = {
|
|
|
+ provinceCode: "",
|
|
|
+ cityCode: "",
|
|
|
+ countyCode: "",
|
|
|
+ streetCode: "",
|
|
|
+ communityCode: "",
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ areaNameObject,
|
|
|
+ areaCodeObject,
|
|
|
+ };
|
|
|
+ this.$emit("selectedAreaList", data);
|
|
|
+ this.disabled = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getAreaForLazyLoad(node, resolve) {
|
|
|
+ const { level } = node;
|
|
|
+ let data = {};
|
|
|
+ if (level == 0) {
|
|
|
+ data = {
|
|
|
+ areaCode: "000000",
|
|
|
+ };
|
|
|
+ } else if (
|
|
|
+ level == 1 ||
|
|
|
+ level == 2 ||
|
|
|
+ level == 3 ||
|
|
|
+ level == 4 ||
|
|
|
+ level == 5
|
|
|
+ ) {
|
|
|
+ data = {
|
|
|
+ areaCode: node.value,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ } // 这里是接口
|
|
|
+ // get("/area/getNextAreaInfoByCode", data)
|
|
|
+ // .then((res) => {
|
|
|
+ // mock.js模拟接口
|
|
|
+ let res = Mock.mock({
|
|
|
+ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
|
|
|
+ "data|1-10": [
|
|
|
+ {
|
|
|
+ // 属性 id 是一个自增数，起始值为 1，每次增 1
|
|
|
+ "id|1-10000": "1",
|
|
|
+ "name|+1": "@city(true)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ console.log(data);
|
|
|
+ if (res.data) {
|
|
|
+ let isContain = data.areaCode.search(this.currentLastLevelCode);
|
|
|
+ let oData = [];
|
|
|
+ // let oData = this.formatAreaData(res.data, level);
|
|
|
+ if (this.isCurrentOrgDefaultArea || this.isPortDefaultArea) {
|
|
|
+ let arrList = this.formatAreaData(res.data, level);
|
|
|
+ arrList.map((item, index) => {
|
|
|
+ if (
|
|
|
+ (item.level <= this.CurrentLevel &&
|
|
|
+ this.isCurrentOrgDefaultArea) ||
|
|
|
+ (data.areaCode !== this.currentLastLevelCode &&
|
|
|
+ this.CurrentLevel >= level) ||
|
|
|
+ isContain != 0
|
|
|
+ ) {
|
|
|
+ oData.push(Object.assign({}, item, { disabled: true }));
|
|
|
+ } else {
|
|
|
+ oData.push(Object.assign({}, item, { disabled: false }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ oData = this.formatAreaData(res.data, level);
|
|
|
+ }
|
|
|
+ // this.belongRegoinOptions = oData
|
|
|
+ if (oData.length == 0) {
|
|
|
+ // // console.log('子节点数据为空', node)
|
|
|
+ // node.syncCheckState(node.value);
|
|
|
+ // const checkedNode = this.$refs.areaSelect.getCheckedNodes();
|
|
|
+ // // console.log('获得刚才选中的节点', checkedNode)
|
|
|
+ // node.syncCheckState(node.value)
|
|
|
+ // node.doCheck(true)
|
|
|
+ // this.$set(node, 'leaf', true)
|
|
|
+ // oData = undefined;
|
|
|
+ // resolve(oData);
|
|
|
+ // return;
|
|
|
+ }
|
|
|
+ resolve(oData);
|
|
|
+ }
|
|
|
+ // })
|
|
|
+ // .catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ // this.$message.error(err);
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ formatAreaData(data, level) {
|
|
|
+ return data.map((item) => {
|
|
|
+ item.names = item.name;
|
|
|
+ item.value = item.id;
|
|
|
+ item.label = item.name;
|
|
|
+ item.leaf = level >= this.setLevel - 1;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleAreaCode() {
|
|
|
+ let areaCodeList = [];
|
|
|
+ if (this.defaultHosuse.province) {
|
|
|
+ areaCodeList.push(this.defaultHosuse.province);
|
|
|
+ this.currentLastLevelCode = this.defaultHosuse.province;
|
|
|
+ }
|
|
|
+ if (this.defaultHosuse.city) {
|
|
|
+ areaCodeList.push(this.defaultHosuse.city);
|
|
|
+ this.currentLastLevelCode = this.defaultHosuse.city;
|
|
|
+ }
|
|
|
+ if (this.defaultHosuse.area) {
|
|
|
+ areaCodeList.push(this.defaultHosuse.area);
|
|
|
+ this.currentLastLevelCode = this.defaultHosuse.area;
|
|
|
+ }
|
|
|
+ if (this.defaultHosuse.town) {
|
|
|
+ areaCodeList.push(this.defaultHosuse.town);
|
|
|
+ this.currentLastLevelCode = this.defaultHosuse.town;
|
|
|
+ }
|
|
|
+ if (this.defaultHosuse.vill) {
|
|
|
+ areaCodeList.push(this.defaultHosuse.vill);
|
|
|
+ this.currentLastLevelCode = this.defaultHosuse.vill;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.areaCodeList = areaCodeList;
|
|
|
+ console.log(areaCodeList);
|
|
|
+ if (this.addressName == "") {
|
|
|
+ this.disabled = true;
|
|
|
+ } else {
|
|
|
+ this.disabled = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDefaultArea() {
|
|
|
+ console.log(this.defaultAddressInfos);
|
|
|
+ this.addressName = this.defaultAddressInfos.addressName;
|
|
|
+ this.defaultHosuse.province = this.defaultAddressInfos.provinceCode || "";
|
|
|
+ this.defaultHosuse.city = this.defaultAddressInfos.cityCode || "";
|
|
|
+ this.defaultHosuse.area = this.defaultAddressInfos.countyCode || "";
|
|
|
+ this.defaultHosuse.town = this.defaultAddressInfos.streetCode || "";
|
|
|
+ this.defaultHosuse.vill = this.defaultAddressInfos.communityCode || "";
|
|
|
+ this.CurrentLevel = this.defaultAddressInfos.level;
|
|
|
+ this.handleAreaCode();
|
|
|
+ },
|
|
|
+ getCurrentOrg() {
|
|
|
+ console.log(dataList);
|
|
|
+ // get("/organization/getCurrentOrg", {}).then((res) => {
|
|
|
+ let res = Mock.mock({
|
|
|
+ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
|
|
|
+ "data|1-10": [
|
|
|
+ {
|
|
|
+ // 属性 id 是一个自增数，起始值为 1，每次增 1
|
|
|
+ "id|1-10000": "1",
|
|
|
+ "name|+1": "@city(true)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ if (res) {
|
|
|
+ let data = res.data;
|
|
|
+ this.addressName =
|
|
|
+ (data.provinceName || "") +
|
|
|
+ (data.cityName || "") +
|
|
|
+ (data.countyName || "") +
|
|
|
+ (data.streetName || "") +
|
|
|
+ (data.communityName || "");
|
|
|
+ // this.currentOrgLevel = data.level;
|
|
|
+ // this.CurrentOrg = data;
|
|
|
+ // let {province='provinceCode',city='cityCode',area='countyCode',town='streetCode',vill='communityCode'} = data
|
|
|
+ // this.defaultHosuse = {province='provinceCode',city='cityCode',area='countyCode',town='streetCode',vill='communityCode'}
|
|
|
+ this.defaultHosuse.province = data.provinceCode;
|
|
|
+ this.defaultHosuse.city = data.cityCode;
|
|
|
+ this.defaultHosuse.area = data.countyCode;
|
|
|
+ this.defaultHosuse.town = data.streetCode;
|
|
|
+ this.defaultHosuse.vill = data.communityCode;
|
|
|
+ this.CurrentLevel = data.level;
|
|
|
+ this.handleAreaCode();
|
|
|
+
|
|
|
+ let areaNameObject = {
|
|
|
+ provinceName: data.provinceName,
|
|
|
+ cityName: data.cityName,
|
|
|
+ countyName: data.countyName,
|
|
|
+ streetName: data.streetName,
|
|
|
+ communityName: data.communityName,
|
|
|
+ };
|
|
|
+ let areaCodeObject = {
|
|
|
+ provinceCode: data.provinceCode,
|
|
|
+ cityCode: data.cityCode,
|
|
|
+ countyCode: data.countyCode,
|
|
|
+ streetCode: data.streetCode,
|
|
|
+ communityCode: data.communityCode,
|
|
|
+ };
|
|
|
+ let val = {
|
|
|
+ areaNameObject,
|
|
|
+ areaCodeObject,
|
|
|
+ };
|
|
|
+ this.$emit("selectedAreaList", val);
|
|
|
+ }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+</style>
|
