Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-R7-Res
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-R7-Res
提交
fe71c5b6
提交
fe71c5b6
编写于
12月 13, 2022
作者:
glod-money-money
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update:更新级联地址选择器
上级
a866b186
变更
4
显示空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
141 行增加
和
6 行删除
+141
-6
dropdown-icon.svg
src/assets/img/dropdown-icon.svg
+1
-0
select-right-icon.svg
src/assets/img/select-right-icon.svg
+1
-0
app-address-cascader.scss
...components/app-address-cascader/app-address-cascader.scss
+52
-0
app-address-cascader.vue
src/components/app-address-cascader/app-address-cascader.vue
+87
-6
未找到文件。
src/assets/img/dropdown-icon.svg
0 → 100644
浏览文件 @
fe71c5b6
<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
src/assets/img/select-right-icon.svg
0 → 100644
浏览文件 @
fe71c5b6
<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
src/components/app-address-cascader/app-address-cascader.scss
浏览文件 @
fe71c5b6
.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
src/components/app-address-cascader/app-address-cascader.vue
浏览文件 @
fe71c5b6
<
template
>
<div
class=
"appAddressCascader"
>
<el-cascader
style=
"width: 100%"
:disabled=
"disabled"
size=
"medium"
v-model=
"CurrentVal"
:options=
"items"
>
<div
class=
"app-address-cascader"
>
<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>
</div>
</template>
<
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'
;
@
Component
({})
export
default
class
AppAddressCascader
extends
Vue
{
/**
* 属性名称
*
* @type {*}
* @memberof AppCheckBox
*/
@
Prop
()
name
?:
any
;
/**
* 传入值
* @type {any}
...
...
@@ -89,6 +108,15 @@ export default class AppAddressCascader extends Vue {
*/
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 {
* @memberof AppAddressCascader
*/
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 {
*/
public
items
:
any
=
[];
public
selectNode
:
any
[]
=
[];
/**
* 获取树形代码表数据
*
...
...
@@ -126,7 +156,7 @@ export default class AppAddressCascader extends Vue {
if
(
Object
.
is
(
this
.
codelistType
,
"STATIC"
))
{
const
codelist
=
this
.
$store
.
getters
.
getCodeList
(
this
.
tag
);
if
(
codelist
)
{
this
.
items
=
[...
JSON
.
parse
(
JSON
.
stringify
(
codelist
.
items
))]
;
this
.
formatData
([...
JSON
.
parse
(
JSON
.
stringify
(
codelist
.
items
))])
;
}
else
{
console
.
warn
(
`
${
this
.
tag
}
--代码表配置异常`
);
}
...
...
@@ -138,7 +168,7 @@ export default class AppAddressCascader extends Vue {
let
_context
=
data
.
context
;
let
_param
=
data
.
param
;
this
.
codeListService
.
getItems
(
this
.
tag
,
_context
,
_param
).
then
((
res
:
any
)
=>
{
this
.
items
=
res
;
this
.
formatData
([...
JSON
.
parse
(
JSON
.
stringify
(
res
))])
;
}).
catch
((
error
:
any
)
=>
{
console
.
error
(
error
);
});
...
...
@@ -167,6 +197,57 @@ export default class AppAddressCascader extends Vue {
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
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录