提交 fe71c5b6 编写于 作者: glod-money-money's avatar glod-money-money

update:更新级联地址选择器

上级 a866b186
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="6.5" height="4.013750076293945" viewBox="0 0 6.5 4.013750076293945"><g style="mix-blend-mode:passthrough" transform="matrix(0,1,-1,0,6.5,-6.5)"><path d="M7.26375,0L6.5,0.76375L8.980830000000001,3.25L6.5,5.73625L7.26375,6.5L10.51375,3.25L7.26375,0Z" fill-rule="evenodd" fill="#747480" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="4.013750076293945" height="6.5" viewBox="0 0 4.013750076293945 6.5"><g style="mix-blend-mode:passthrough"><path d="M0.76375,0L0,0.76375L2.48083,3.25L0,5.73625L0.76375,6.5L4.01375,3.25L0.76375,0Z" fill-rule="evenodd" fill="#747480" fill-opacity="1"/></g></svg>
\ No newline at end of file
.app-address-cascader {
>.el-cascader {
width: 100%;
}
}
.app-address-cascader__popper-class {
.el-cascader-node {
padding-left: 10px;
padding-right: 15px;
margin-top: 4px;
height: 18px;
.el-cascader-node__label {
height: inherit;
font-size: 12px;
font-weight: 400;
color: var(--app-color-gray-100);
line-height: 18px;
height: 18px;
padding: 0;
>div{
height: inherit;
}
.cascader-node-label{
height: inherit;
line-height: inherit;
}
.node__icon {
width: 13px;
height: 13px;
margin: 2.5px 4.5px;
vertical-align: text-bottom;
}
}
.selected-node{
background-color: var(--app-color-gray-250);
}
}
.el-cascader-node__label+.el-cascader-node__postfix.el-icon-arrow-right {
// 选项去掉右侧小图标
display: none;
}
.el-icon-check {
// 去掉选中小对勾
display: none;
}
}
\ No newline at end of file
<template> <template>
<div class="appAddressCascader"> <div class="app-address-cascader">
<el-cascader style="width: 100%" :disabled="disabled" size="medium" v-model="CurrentVal" :options="items"> <el-cascader popper-class="app-address-cascader__popper-class" :disabled="disabled" size="medium"
v-model="CurrentVal" :options="items" separator=" - " @expand-change="selectChange" @change="nodeChange"
@visible-change="onChange">
<template slot-scope="{ node, data }">
<div :class="{ 'selected-node': isSelect(data.value) }">
<span v-if="!node.isLeaf" class="node__icon">
<img src="@/assets/img/dropdown-icon.svg" v-if="isSelect(data.value)">
<img src="@/assets/img/select-right-icon.svg" v-else>
</span>
<span class="cascader-node-label">{{ data.label }}</span>
</div>
</template>
</el-cascader> </el-cascader>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'; import { Component, Vue, Prop} from 'vue-property-decorator';
import CodeListService from '@/codelist/codelist-service'; import CodeListService from '@/codelist/codelist-service';
@Component({}) @Component({})
export default class AppAddressCascader extends Vue { export default class AppAddressCascader extends Vue {
/**
* 属性名称
*
* @type {*}
* @memberof AppCheckBox
*/
@Prop() name?: any;
/** /**
* 传入值 * 传入值
* @type {any} * @type {any}
...@@ -89,6 +108,15 @@ export default class AppAddressCascader extends Vue { ...@@ -89,6 +108,15 @@ export default class AppAddressCascader extends Vue {
*/ */
public codeListService: CodeListService = new CodeListService(); public codeListService: CodeListService = new CodeListService();
//判断是否被选中
isSelect(value: any) {
if (this.selectNode.indexOf(value) < 0) {
return false;
} else {
return true;
}
}
/** /**
* 当前值 * 当前值
* *
...@@ -104,7 +132,7 @@ export default class AppAddressCascader extends Vue { ...@@ -104,7 +132,7 @@ export default class AppAddressCascader extends Vue {
* @memberof AppAddressCascader * @memberof AppAddressCascader
*/ */
set CurrentVal(val: any) { set CurrentVal(val: any) {
this.$emit("change", val); this.$emit("change", {name:this.name,value:val});
} }
...@@ -116,6 +144,8 @@ export default class AppAddressCascader extends Vue { ...@@ -116,6 +144,8 @@ export default class AppAddressCascader extends Vue {
*/ */
public items: any = []; public items: any = [];
public selectNode: any[] = [];
/** /**
* 获取树形代码表数据 * 获取树形代码表数据
* *
...@@ -126,7 +156,7 @@ export default class AppAddressCascader extends Vue { ...@@ -126,7 +156,7 @@ export default class AppAddressCascader extends Vue {
if (Object.is(this.codelistType, "STATIC")) { if (Object.is(this.codelistType, "STATIC")) {
const codelist = this.$store.getters.getCodeList(this.tag); const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) { if (codelist) {
this.items = [...JSON.parse(JSON.stringify(codelist.items))]; this.formatData([...JSON.parse(JSON.stringify(codelist.items))]);
} else { } else {
console.warn(`${this.tag}--代码表配置异常`); console.warn(`${this.tag}--代码表配置异常`);
} }
...@@ -138,7 +168,7 @@ export default class AppAddressCascader extends Vue { ...@@ -138,7 +168,7 @@ export default class AppAddressCascader extends Vue {
let _context = data.context; let _context = data.context;
let _param = data.param; let _param = data.param;
this.codeListService.getItems(this.tag, _context, _param).then((res: any) => { this.codeListService.getItems(this.tag, _context, _param).then((res: any) => {
this.items = res; this.formatData([...JSON.parse(JSON.stringify(res))]);
}).catch((error: any) => { }).catch((error: any) => {
console.error(error); console.error(error);
}); });
...@@ -167,6 +197,57 @@ export default class AppAddressCascader extends Vue { ...@@ -167,6 +197,57 @@ export default class AppAddressCascader extends Vue {
Object.assign(arg.param, _param); Object.assign(arg.param, _param);
} }
} }
//展开面板
public onChange(value: boolean) {
if (value) {
this.load()
}
}
//格式化代码表
public formatData(data: any[]) {
if (data.length == 0) {
this.items = []
} else {
this.items = this.handleChildren(undefined, data);
console.log(this.items);
}
}
//处理父子层级
public handleChildren(pValue: any, data: any) {
let tempData: any[] = [];
data.forEach((item: any, index: number) => {
if (Object.is(pValue, item.pvalue)) {
tempData.push(...data.splice(index, 1));
}
})
tempData.forEach((item: any) => {
const children = this.handleChildren(item.value, data);
if (children.length == 0) {
return
}
if (item.children) {
item.children.push(...children);
} else {
item.children = children;
}
})
return tempData;
}
//选中树节点改变
public selectChange(data: any) {
this.selectNode = data;
}
//选中叶子值改变
public nodeChange(data:any){
this.selectNode = data;
}
/** /**
* 生命周期 * 生命周期
* *
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册