ssc
4 years ago
parent
50a870b23b
commit
5e2d602336
5 changed files with 277 additions and 46 deletions
|
After Width: | Height: | Size: 451 B |
@ -0,0 +1,124 @@ |
||||
<template> |
||||
<div class="grid" |
||||
:class="['animated fadeIn']"> |
||||
<!-- search --> |
||||
<el-row> |
||||
<el-form inline |
||||
label-suffix=":" |
||||
label-position="left"> |
||||
<el-form-item label="流程名称"> |
||||
<el-input placeholder="请输入流程名称" |
||||
v-model="form.name" |
||||
size="mini" |
||||
clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="流程标识"> |
||||
<el-input placeholder="请输入流程标识" |
||||
v-model="form.key" |
||||
size="mini" |
||||
clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" |
||||
size="mini" |
||||
icon="el-icon-search" |
||||
@click="$emit('search', form)">搜索</el-button> |
||||
<el-button size="mini" |
||||
icon="el-icon-delete" |
||||
@click="$emit('reset')">清空</el-button> |
||||
<el-button size="mini" |
||||
circle |
||||
icon="el-icon-s-data" |
||||
@click="$emit('mode', 'list')"></el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-row> |
||||
<el-row :gutter="20" |
||||
v-if="data.length > 0"> |
||||
<el-col :xs="24" |
||||
:sm="12" |
||||
:md="6" |
||||
:lg="6" |
||||
:xl="6" |
||||
v-for="(item, index) in data" |
||||
:key="index" |
||||
class="grid-col"> |
||||
<el-card shadow="hover" |
||||
:body-style="{padding: '10px 20px'}" |
||||
@click.native="$emit('route', item)"> |
||||
<div class="grid-item"> |
||||
<img :src="item.icon || require('../../../assets/img/icon-default.png')" |
||||
class="icon"> |
||||
<div class="info"> |
||||
<div class="name txt-cut">{{item.name}}：v{{item.version}}</div> |
||||
<div class="key txt-cut">{{item.key}}</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row v-else> |
||||
<avue-empty style="margin-top: 20%;" |
||||
desc="没有可发起的流程"></avue-empty> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
data: Array, |
||||
form: Object |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.txt-cut { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 1; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
.grid { |
||||
padding: 0 15px; |
||||
height: calc(100vh - 165px); |
||||
overflow: hidden scroll; |
||||
&-col { |
||||
margin-bottom: 16px; |
||||
} |
||||
.el-card { |
||||
border-radius: 14px; |
||||
&:hover { |
||||
border-color: #388ef8; |
||||
} |
||||
} |
||||
|
||||
&-item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
.icon { |
||||
width: 48px; |
||||
height: 48px; |
||||
border-radius: 50%; |
||||
margin-right: 8px; |
||||
} |
||||
.info { |
||||
margin-left: 10px; |
||||
flex: 1; |
||||
.name { |
||||
color: #388ef8; |
||||
font-size: 15px; |
||||
margin-bottom: 4px; |
||||
} |
||||
.key { |
||||
font-size: 13px; |
||||
color: #999; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue