<template>
|
<div class="standardList">
|
<av-page-header title="标准列表">
|
<div slot="breadcrumb">
|
<a-breadcrumb>
|
<a-breadcrumb-item>
|
<a >首页</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>
|
<a >列表页</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>标准列表</a-breadcrumb-item>
|
</a-breadcrumb>
|
</div>
|
</av-page-header>
|
|
<a-card :bordered="false">
|
<a-row>
|
<a-col :sm="8" :xs="24">
|
<info title="我的待办" value="8个任务" bordered />
|
</a-col>
|
<a-col :sm="8" :xs="24">
|
<info title="本周任务平均处理时间" value="32分钟" bordered />
|
</a-col>
|
<a-col :sm="8" :xs="24">
|
<info title="本周完成任务数" value="24个任务" />
|
</a-col>
|
</a-row>
|
</a-card>
|
|
<a-card class="listCard" :bordered="false" title="标准列表" style="margin-top: 24px" :bodyStyle="{ padding: '0 32px 40px 32px' }">
|
<template slot="extra">
|
<div class="extraContent">
|
<a-radio-group defaultValue="all">
|
<a-radio-button value="all">全部</a-radio-button>
|
<a-radio-button value="progress">进行中</a-radio-button>
|
<a-radio-button value="waiting">等待中</a-radio-button>
|
</a-radio-group>
|
<a-input-search class="extraContentSearch" placeholder="请输入" @search="handleSearch" />
|
</div>
|
</template>
|
<a-button type="dashed" style="width:100%;margin-bottom:8px" icon="plus" @click="newModal">
|
添加
|
</a-button>
|
<a-list size="large" rowKey="id" :loading="loading" :pagination="paginationProps" :dataSource="list">
|
<a-list-item slot="renderItem" slot-scope="item, index">
|
<template slot="actions">
|
<a @click="(e)=>handleEditClick(e,item)">
|
编辑
|
</a>
|
<a-dropdown>
|
<template slot="overlay">
|
<a-menu @click="({key})=>handleEditAndDelete(key,item)">
|
<a-menu-item key="edit">编辑</a-menu-item>
|
<a-menu-item key="delete">删除</a-menu-item>
|
</a-menu>
|
</template>
|
<a>
|
更多 <a-icon type="down" />
|
</a>
|
</a-dropdown>
|
</template>
|
<a-list-item-meta :description="item.subDescription">
|
<a slot="title" :href="item.href">{{item.title}}</a>
|
<a-avatar slot="avatar" :src="item.logo" shape="square" size="large" />
|
</a-list-item-meta>
|
<div class="listContent">
|
<div class="listContentItem">
|
<span>Owner</span>
|
<p>{{item.owner}}</p>
|
</div>
|
<div class="listContentItem">
|
<span>开始时间</span>
|
<p>{{moment(item.createdAt).format('YYYY-MM-DD HH:mm')}}</p>
|
</div>
|
<div class="listContentItem">
|
<a-progress :percent="item.percent" :status="item.status" :strokeWidth="6" style="width: 180px" />
|
</div>
|
</div>
|
</a-list-item>
|
</a-list>
|
</a-card>
|
<base-list-modal
|
:visible.sync="baselistmodal"
|
:record="newRecoard"
|
@close="handleListModalClose"
|
></base-list-modal>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
import Info from './components/Info.vue';
|
import BaseListModal from './components/BaseListModal.vue';
|
|
import moment from 'moment';
|
import axios from 'axios';
|
|
@Component({
|
components: {
|
Info,
|
BaseListModal,
|
},
|
})
|
export default class PrimaryList extends Vue {
|
|
private loading: boolean = false;
|
|
private moment: any = moment;
|
|
private baselistmodal: boolean = false;
|
|
private newRecoard: any = {};
|
|
private paginationProps: any = {
|
showSizeChanger: true,
|
showQuickJumper: true,
|
pageSize: 5,
|
total: 50,
|
};
|
|
private list: any[] = [];
|
|
private showModal() {
|
this.baselistmodal = true;
|
}
|
|
private mounted() {
|
axios.get('/api/fake_list', {
|
params: {
|
count: 5,
|
},
|
}).then((res: any) => {
|
this.list = res.data;
|
});
|
}
|
|
private handleEditClick(e: any, item: any): void {
|
e.preventDefault();
|
this.showEditModal(item);
|
}
|
|
private handleEditAndDelete(key: any, item: any): void {
|
this.showEditModal(item);
|
}
|
|
private newModal(): void {
|
this.baselistmodal = true;
|
this.newRecoard = {};
|
}
|
|
private showEditModal(item: any): void {
|
this.baselistmodal = true;
|
this.newRecoard = item;
|
}
|
|
private handleSearch(value: any) {
|
|
}
|
|
private handleListModalClose(isok: any) {
|
}
|
}
|
</script>
|
|
<style lang="less">
|
|
@import '../../assets/theme/styles/index.less';
|
|
.standardList {
|
:global {
|
.ant-card-head {
|
border-bottom: none;
|
}
|
.ant-card-head-title {
|
line-height: 32px;
|
padding: 24px 0;
|
}
|
.ant-card-extra {
|
padding: 24px 0;
|
}
|
.ant-list-pagination {
|
text-align: right;
|
margin-top: 24px;
|
}
|
.ant-avatar-lg {
|
width: 48px;
|
height: 48px;
|
line-height: 48px;
|
}
|
}
|
|
.headerInfo {
|
position: relative;
|
text-align: center;
|
& > span {
|
color: @text-color-secondary;
|
display: inline-block;
|
font-size: @font-size-base;
|
line-height: 22px;
|
margin-bottom: 4px;
|
}
|
& > p {
|
color: @heading-color;
|
font-size: 24px;
|
line-height: 32px;
|
margin: 0;
|
}
|
& > em {
|
background-color: @border-color-split;
|
position: absolute;
|
height: 56px;
|
width: 1px;
|
top: 0;
|
right: 0;
|
}
|
}
|
|
.listContent {
|
font-size: 0;
|
.listContentItem {
|
color: @text-color-secondary;
|
display: inline-block;
|
vertical-align: middle;
|
font-size: @font-size-base;
|
margin-left: 40px;
|
> span {
|
line-height: 20px;
|
}
|
> p {
|
margin-top: 4px;
|
margin-bottom: 0;
|
line-height: 22px;
|
}
|
}
|
}
|
.extraContentSearch {
|
margin-left: 16px;
|
width: 272px;
|
}
|
}
|
|
@media screen and (max-width: @screen-xs) {
|
.standardList {
|
:global {
|
.ant-list-item-content {
|
display: block;
|
flex: none;
|
width: 100%;
|
}
|
.ant-list-item-action {
|
margin-left: 0;
|
}
|
}
|
.listContent {
|
margin-left: 0;
|
& > div {
|
margin-left: 0;
|
}
|
}
|
.listCard {
|
:global {
|
.ant-card-head-title {
|
overflow: visible;
|
}
|
}
|
}
|
}
|
}
|
|
@media screen and (max-width: @screen-sm) {
|
.standardList {
|
.extraContentSearch {
|
margin-left: 0;
|
width: 100%;
|
}
|
.headerInfo {
|
margin-bottom: 16px;
|
& > em {
|
display: none;
|
}
|
}
|
}
|
}
|
|
@media screen and (max-width: @screen-md) {
|
.standardList {
|
.listContent {
|
& > div {
|
display: block;
|
}
|
& > div:last-child {
|
top: 0;
|
width: 100%;
|
}
|
}
|
}
|
.listCard {
|
:global {
|
.ant-radio-group {
|
display: block;
|
margin-bottom: 8px;
|
}
|
}
|
}
|
}
|
|
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
|
.standardList {
|
.listContent {
|
& > div {
|
display: block;
|
}
|
& > div:last-child {
|
top: 0;
|
width: 100%;
|
}
|
}
|
}
|
}
|
|
@media screen and (max-width: @screen-xl) {
|
.standardList {
|
.listContent {
|
& > div {
|
margin-left: 24px;
|
}
|
& > div:last-child {
|
top: 0;
|
}
|
}
|
}
|
}
|
|
@media screen and (max-width: 1400px) {
|
.standardList {
|
.listContent {
|
text-align: right;
|
& > div:last-child {
|
top: 0;
|
}
|
}
|
}
|
}
|
|
.standardListForm {
|
:global {
|
.ant-form-item {
|
margin-bottom: 12px;
|
&:last-child {
|
padding-top: 4px;
|
margin-bottom: 32px;
|
}
|
}
|
}
|
}
|
|
.formResult {
|
width: 100%;
|
[class^='title'] {
|
margin-bottom: 8px;
|
}
|
}
|
|
</style>
|
