Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
uuai
test_git
提交
0238ba15
T
test_git
项目概览
uuai
/
test_git
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
test_git
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0238ba15
编写于
4月 12, 2022
作者:
W
wuyb@phxg.cn
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
element
上级
6c6d93f0
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
604 addition
and
0 deletion
+604
-0
vite-demo/README.md
vite-demo/README.md
+127
-0
vite-demo/src/components/CommonList/listFilter.vue
vite-demo/src/components/CommonList/listFilter.vue
+382
-0
vite-demo/src/components/CommonList/table.vue
vite-demo/src/components/CommonList/table.vue
+95
-0
未找到文件。
vite-demo/README.md
浏览文件 @
0238ba15
...
...
@@ -5,3 +5,130 @@ This template should help get you started developing with Vue 3 in Vite. The tem
## Recommended IDE Setup
-
[
VSCode
](
https://code.visualstudio.com/
)
+
[
Volar
](
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
)
```
<ListFilter
:config="listFiltersConfig"
@onFormSubmit="query"
ref="listFilter"
>
<template #leftButtons>
<el-button
type="success"
size="small"
icon="el-icon-plus"
v-permission="['add']"
@click="add()"
>新增
</el-button>
<el-button
type="primary"
size="small"
icon="el-icon-upload"
v-permission="['upload']"
@click="importDoc()"
>导入
</el-button>
<el-button
type="warning"
size="small"
icon="el-icon-download"
v-permission="['export']"
@click="exportExcl"
>导出
</el-button>
</template>
</ListFilter>
listFiltersConfig: {
dataSource: [
{
inputType: "text",
feildName: "vehicleNo",
label: "车牌号码",
placeholder: "请输入车牌号码"
},
{
inputType: "select",
feildName: "leaseStatus",
label: "运营状态",
placeholder: "请选择运营状态",
options: [
{value: "0", name: "闲置"},
// { value: "4", name: "预备交车" },
{value: "1", name: "运营中"}
]
},
// lsd
{
inputType: "select",
feildName: "vehicleStatus",
label: "车辆发布",
placeholder: "请选择车辆发布状态",
options: [
{value: "0", name: "未发布"},
{value: "1", name: "正常"},
{value: "2", name: "故障",},
{value: "3", name: "报废",},
]
},
{
inputType: "select",
feildName: "vehicleAnnualTimes",
label: "车辆年审",
placeholder: "请选择车辆年审状态",
options: [
{value: "1", name: "已年审"},
{value: "2", name: "未年审"},
// { value: "3", name: "即将到期" }
]
},
// TODO options、feildName
{
inputType: "select",
feildName: "vehicleStatus",
label: "车辆状态",
placeholder: "请选择车辆状态",
options: [
{value: "0", name: "未发布"},
{value: "1", name: "正常"},
{value: "2", name: "故障"},
{value: "3", name: "报废"}
],
},
{
inputType: "dateRange",
feildName: "createdStartTime,createdEndTime",
label: "创建时间",
styleClass: "autoWidth"
},
{
inputType: "select",
feildName: "insuranceStatus",
label: "车辆投保",
placeholder: "请选择车辆投保状态",
options: [
{value: "0", name: "未投保"},
{value: "1", name: "已投保"},
],
},
],
buttons: [
{
inputType: "button",
buttonType: "primary",
buttonText: "查询",
funcType: "submit",
permission: ["list"]
},
{
inputType: "button",
buttonType: "info",
buttonText: "清空",
funcType: "clear",
permission: ["list"]
}
]
}
```
\ No newline at end of file
vite-demo/src/components/CommonList/listFilter.vue
0 → 100644
浏览文件 @
0238ba15
<
template
>
<section
class=
"listFilters todoUI"
>
<el-card
ref=
"card"
id=
"card"
>
<div
class=
"wrapper"
ref=
"wrapper"
>
<el-form
:model=
"ruleForm"
inline
ref=
"ruleForm"
:label-width=
"labelWidth"
class=
"demo-ruleForm"
>
<el-form-item
v-for=
"(item,index) in config.dataSource"
:key=
"`listFilter_$
{item.feildName}_${index}`"
:label="item.label"
:prop="`${item.feildName}`"
:class="[item.styleClass, item.inputType, { 'flexItem': item.inputType == 'numberRange' }]"
:label-width="item.labelEm ? item.labelEm+'em' : '6.25em'"
>
<el-input
clearable
v-if=
"item.inputType == 'text'"
v-model=
"ruleForm[`$
{item.feildName}`]"
@input="(val) => onInputChange(item.feildName, val)"
:placeholder="item.placeholder"
>
</el-input>
<el-input
clearable
v-if=
"item.inputType == 'numberRange'"
v-model=
"ruleForm[`$
{item.feildName1}`]"
@input="(val) => onInputChange(item.feildName1, val)"
:placeholder="item.placeholder1"
>
</el-input>
<span
v-if=
"item.inputType == 'numberRange'"
style=
"margin: 0 6px"
>
-
</span>
<el-input
clearable
v-if=
"item.inputType == 'numberRange'"
v-model=
"ruleForm[`$
{item.feildName2}`]"
@input="(val) => onInputChange(item.feildName2, val)"
:placeholder="item.placeholder2"
>
</el-input>
<el-select
clearable
v-if=
"item.inputType == 'select'"
v-model=
"ruleForm[`$
{item.feildName}`]"
:placeholder="item.placeholder"
@input="(val) => onInputChange(item.feildName, val)"
:filterable="!!item.filterable"
>
<el-option
v-for=
"option in item.options"
:key=
"option.value"
:label=
"option[item.labelKey] || option.name"
:value=
"option[item.valueKey] || option.value"
></el-option>
</el-select>
<el-date-picker
clearable
v-if=
"item.inputType == 'date'"
v-model=
"ruleForm[`$
{item.feildName}`]"
type="date"
:placeholder="item.placeholder"
@input="(val) => onInputChange(item.feildName, val)"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
<el-date-picker
clearable
v-if=
"item.inputType == 'dateRange'"
v-model=
"ruleForm[`$
{item.feildName}`]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@input="(val) => onInputChange(item.feildName, val, 'dateRange')"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="item.pickerOptions"
class="dateRange"
/>
</el-form-item>
</el-form>
</div>
<div
class=
"controller"
v-if=
"showToggle"
>
<el-button
type=
"text"
@
click=
"toggle"
>
<i
class=
"el-icon-caret-bottom"
style=
"color:#409EFF"
v-show=
"flag"
></i>
<i
class=
"el-icon-caret-top"
style=
"color:#409EFF"
v-show=
"!flag"
></i>
{{
flag
?
'
点击查看更多
'
:
'
收起
'
}}
</el-button>
</div>
</el-card>
<div
class=
"btnWrap"
>
<div>
<slot
name=
"leftButtons"
></slot>
</div>
<div>
<template
v-for=
"btn in config.buttons"
>
<template
v-if=
"btn.permission"
>
<el-button
size=
"small"
v-permission=
"[...btn.permission]"
:key=
"btn.buttonText"
:icon=
"getBtnIcon(btn)"
:type=
"btn.buttonType"
@
click=
"getBtnFunc(btn)"
>
{{
btn
.
buttonText
}}
</el-button>
</
template
>
<
template
v-else
>
<el-button
size=
"small"
:key=
"btn.buttonText"
:icon=
"getBtnIcon(btn)"
:type=
"btn.buttonType"
@
click=
"getBtnFunc(btn)"
>
{{
btn
.
buttonText
}}
</el-button>
</
template
>
</template>
</div>
</div>
</section>
</template>
<
script
>
export
default
{
name
:
"
CommonListFilters
"
,
props
:
{
config
:
Object
,
labelWidth
:
String
,
addFunc
:
Function
,
addTxt
:
String
},
created
()
{
this
.
initForm
();
},
mounted
()
{
this
.
config
.
dataSource
.
forEach
(
async
item
=>
{
if
(
item
.
inputType
==
"
select
"
&&
item
.
asyncFunc
)
{
item
.
options
=
await
item
.
asyncFunc
();
}
});
const
el
=
document
.
getElementById
(
'
card
'
)
if
(
el
.
getBoundingClientRect
().
height
>
120
)
{
this
.
$refs
.
wrapper
.
style
.
height
=
"
60px
"
;
this
.
showToggle
=
true
}
else
{
this
.
showToggle
=
false
}
},
data
()
{
return
{
ruleForm
:
{},
timeArr
:
[],
// 临时管理时间区间组件
flag
:
true
,
showToggle
:
true
};
},
methods
:
{
toggle
()
{
if
(
this
.
flag
)
{
this
.
$refs
.
wrapper
.
style
.
height
=
"
auto
"
;
}
else
{
this
.
$refs
.
wrapper
.
style
.
height
=
"
60px
"
;
}
this
.
flag
=
!
this
.
flag
;
},
refreshSelectOptions
()
{
this
.
config
.
dataSource
.
forEach
(
async
item
=>
{
if
(
item
.
inputType
==
"
select
"
&&
item
.
asyncFunc
)
{
item
.
options
=
await
item
.
asyncFunc
();
}
});
},
initForm
()
{
this
.
config
.
dataSource
.
forEach
(
item
=>
{
if
(
item
.
inputType
!=
"
dateRange
"
)
{
this
.
ruleForm
[
`
${
item
.
feildName
}
`
]
=
""
;
}
else
{
if
(
item
.
feildName
)
{
this
.
ruleForm
[
`
${
item
.
feildName
}
`
]
=
[];
let
arr
=
item
.
feildName
.
split
(
'
,
'
);
let
key1
=
arr
[
0
];
let
key2
=
arr
[
1
];
this
.
ruleForm
[
key1
]
=
''
;
this
.
ruleForm
[
key2
]
=
''
;
}
else
{
this
.
ruleForm
[
`
${
item
.
feildName
}
`
]
=
[];
this
.
ruleForm
.
startTime
=
''
;
this
.
ruleForm
.
endTime
=
''
;
}
}
});
// console.log(this.ruleForm);
},
onInputChange
(
feildName
,
val
,
type
)
{
if
(
type
!=
"
dateRange
"
)
{
this
.
ruleForm
[
`
${
feildName
}
`
]
=
val
;
}
else
{
if
(
feildName
)
{
let
arr
=
feildName
.
split
(
'
,
'
);
let
key1
=
arr
[
0
];
let
key2
=
arr
[
1
];
if
(
val
)
{
this
.
ruleForm
[
key1
]
=
val
[
0
]
+
'
00:00:00
'
;
this
.
ruleForm
[
key2
]
=
val
[
1
]
+
'
23:59:59
'
;
}
else
{
this
.
ruleForm
[
feildName
]
=
[];
this
.
ruleForm
[
key1
]
=
''
;
this
.
ruleForm
[
key2
]
=
''
;
}
}
else
{
if
(
val
)
{
this
.
ruleForm
.
startTime
=
val
[
0
]
+
'
00:00:00
'
;
this
.
ruleForm
.
endTime
=
val
[
1
]
+
'
23:59:59
'
;
}
else
{
this
.
ruleForm
.
startTime
=
""
;
this
.
ruleForm
.
endTime
=
""
;
}
}
}
this
.
$forceUpdate
();
},
submitForm
(
callBack
)
{
let
data
=
{};
for
(
let
key
in
this
.
ruleForm
)
{
if
(
this
.
ruleForm
[
key
]
!=
undefined
&&
this
.
ruleForm
[
key
]
!=
null
&&
this
.
ruleForm
[
key
]
!=
""
)
{
data
[
key
]
=
this
.
ruleForm
[
key
];
}
}
this
.
$emit
(
"
onFormSubmit
"
);
},
setQuery
(
field
,
val
)
{
console
.
log
(
field
,
val
)
if
(
val
!=
undefined
)
{
this
.
ruleForm
[
field
]
=
val
;
}
else
{
this
.
ruleForm
[
field
]
=
''
;
}
this
.
$forceUpdate
();
},
// 可从父组件调用此方法返回当前输入的查询条件
getQuery
()
{
let
data
=
{};
for
(
let
key
in
this
.
ruleForm
)
{
if
(
this
.
ruleForm
[
key
]
!=
undefined
&&
this
.
ruleForm
[
key
]
!=
null
&&
this
.
ruleForm
[
key
]
!=
""
)
{
data
[
key
]
=
this
.
ruleForm
[
key
];
}
}
return
data
;
},
resetForm
()
{
this
.
$nextTick
(()
=>
{
this
.
initForm
();
this
.
$refs
[
"
ruleForm
"
].
resetFields
();
let
data
=
{};
for
(
let
key
in
this
.
ruleForm
)
{
this
.
ruleForm
[
key
]
=
''
;
}
this
.
$forceUpdate
();
this
.
$emit
(
"
onFormSubmit
"
,
1
);
});
},
getBtnFunc
(
btn
)
{
if
(
btn
.
funcType
==
"
submit
"
)
{
this
.
submitForm
();
}
else
if
(
btn
.
funcType
==
"
clear
"
)
{
return
this
.
resetForm
();
}
else
{
if
(
btn
.
function
)
{
return
btn
.
function
();
}
else
{
return
function
()
{
};
}
}
},
getBtnIcon
(
btn
)
{
if
(
btn
.
funcType
==
"
submit
"
)
{
return
"
el-icon-search
"
;
}
else
if
(
btn
.
funcType
==
"
clear
"
)
{
return
"
el-icon-refresh-left
"
;
}
}
}
};
</
script
>
<
style
lang=
"scss"
>
.listFilters
{
margin-bottom
:
20px
;
.wrapper
{
overflow
:
hidden
;
}
.el-form--inline
.el-form-item__label
{
width
:
6em
;
}
.flexItem
{
label
{
float
:
left
;
}
.el-form-item__content
{
display
:
flex
;
width
:
auto
!
important
;
}
}
.el-form-item__content
{
width
:
180px
;
}
.dateRange
{
.el-form-item__content
{
width
:
auto
;
}
.el-range-editor.el-input__inner
{
width
:
300px
!
important
;
}
}
.el-input__inner
{
height
:
32px
;
}
.el-range-editor.el-input__inner
{
padding-top
:
0
;
padding-bottom
:
0
;
}
.btnWrap
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
margin-top
:
20px
;
padding
:
0
;
}
.controller
{
padding-right
:
30px
;
text-align
:
right
;
}
.el-input--suffix
.el-input__inner
{
padding-right
:
15px
;
}
.el-form-item__label
{
padding
:
0
;
margin-right
:
10px
;
}
.el-card__body
{
padding
:
20px
10px
;
}
}
</
style
>
vite-demo/src/components/CommonList/table.vue
0 → 100644
浏览文件 @
0238ba15
<
template
>
<div
class=
"todoUI"
>
<el-table
:data=
"dataSource"
border
style=
"width: 100%"
>
<el-table-column
type=
"index"
label=
"序号"
width=
"50"
align=
"center"
v-if=
"showIndex"
/>
<el-table-column
v-for=
"column in columns"
:key=
"column.feildName"
:property=
"column.feildName"
:label=
"column.label"
:width=
"column.width"
align=
"left"
header-align=
"center"
>
<template
slot-scope=
"scope"
>
<div
v-if=
"column.type == 'picture'"
style=
"width: 100px;margin: 0 auto;"
>
<el-image
v-if=
"scope.row[`$
{column.feildName}`]" :src="scope.row[`${column.feildName}`]" :preview-src-list="[scope.row[`${column.feildName}`]]">
</el-image>
</div>
<div
v-if=
"!column.type"
>
<span
:style=
"
{ 'color': column.color ? column.color(scope.row[`${column.feildName}`]) : '' }" v-if="!column.formatter">
{{
scope
.
row
[
`${column.feildName
}
`
]
}}
<
/span
>
<
span
:
style
=
"
{ 'color': column.color ? column.color(scope.row[`${column.feildName
}
`]) : ''
}
"
v
-
if
=
"
column.formatter
"
>
{{
column
.
formatter
(
scope
.
row
[
`${column.feildName
}
`
])
}}
<
/span
>
<
span
:
style
=
"
{ 'color': column.color ? column.color(scope.row[`${column.feildName
}
`]) : ''
}
"
v
-
if
=
"
column.rowFormatter
"
>
{{
column
.
rowFormatter
(
scope
.
row
)
}}
<
/span
>
<
/div
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
label
=
"
操作
"
align
=
"
center
"
width
=
"
180
"
fixed
=
'
right
'
v
-
if
=
"
actions && actions.length
"
>
<
template
slot
-
scope
=
"
scope
"
>
<
span
class
=
"
actionItemWrap
"
v
-
for
=
"
btn in actions
"
v
-
show
=
"
btn.show ? btn.show(scope.row) : true
"
:
key
=
"
btn.text
"
>
<
el
-
button
v
-
if
=
"
!btn.needConfirm
"
type
=
"
text
"
:
disabled
=
"
btn.disabledCondition ? btn.disabledCondition(scope.row) : false
"
:
style
=
"
{'color': btn.color ? btn.color : ''
}
"
@
click
=
"
action(scope.row, btn.handler)
"
>
{{
btn
.
text
}}
<
/el-button
>
<
el
-
popconfirm
title
=
"
确定要执行该操作吗?
"
@
confirm
=
"
action(scope.row, btn.handler)
"
v
-
else
>
<
el
-
button
slot
=
"
reference
"
type
=
"
text
"
>
{{
btn
.
text
}}
<
/el-button
>
<
/el-popconfirm
>
<
/span
>
<
/template
>
<
/el-table-column
>
<
/el-table
>
<
el
-
pagination
:
current
-
page
=
"
page
"
:
page
-
sizes
=
"
[10, 20, 50, 100]
"
:
page
-
size
=
"
pageSize
"
layout
=
"
total, sizes, prev, pager, next, jumper
"
:
total
=
"
total
"
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
/>
<
/div
>
<
/template
>
<
script
>
export
default
{
name
:
'
MyTable
'
,
props
:
{
columns
:
Array
,
actions
:
Array
,
fetchList
:
Function
,
query
:
Object
,
dataSourceStr
:
String
,
showIndex
:
{
type
:
Boolean
,
default
:
true
}
}
,
data
()
{
return
{
page
:
1
,
pageSize
:
20
,
total
:
0
,
dataSource
:
[]
}
}
,
watch
:
{
dataSourceStr
(
newVal
,
oldVal
)
{
let
rawData
=
JSON
.
parse
(
newVal
);
this
.
dataSource
=
rawData
.
result
;
this
.
total
=
Number
(
rawData
.
total
);
this
.
page
=
rawData
.
pageNum
;
}
,
}
,
methods
:
{
action
(
data
,
callback
)
{
callback
(
data
);
}
,
handleSizeChange
(
size
)
{
this
.
pageSize
=
size
;
this
.
$emit
(
'
onSizeChange
'
,
size
);
}
,
handleCurrentChange
(
page
)
{
this
.
page
=
page
;
this
.
$emit
(
'
onPageChange
'
,
page
);
}
}
}
<
/script
>
<
style
lang
=
"
scss
"
>
.
actionItemWrap
{
margin
:
0
2
px
;
}
<
/style>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录