Skip to content

A
ant-design-pro-vue
Commit c89883dc by Sendya
Options

fix: fix eslint && cleanup.

parent d90042be
Showing with 536 additions and 483 deletions
src/App.vue
<template>
<a-locale-provider :locale="locale">
<div id="app">
<router-view/>
</div>
<div id="app">
<router-view/>
</div>
</a-locale-provider>
</template>
<script>
......
src/components/ChartCard.vue
<template>
<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
<div class="chart-card-header">
<div class="meta">
<span class="chart-card-title">{{ title }}</span>
<span class="chart-card-action">
<slot name="action"></slot>
</span>
</div>
<div class="total"><span>{{ total }}</span></div>
</div>
<div class="chart-card-content">
<div class="content-fix">
<slot></slot>
</div>
</div>
<div class="chart-card-footer">
<slot name="footer"></slot>
</div>
</a-card>
<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
<div class="chart-card-header">
<div class="meta">
<span class="chart-card-title">{{ title }}</span>
<span class="chart-card-action">
<slot name="action"></slot>
</span>
</div>
<div class="total"><span>{{ total }}</span></div>
</div>
<div class="chart-card-content">
<div class="content-fix">
<slot></slot>
</div>
</div>
<div class="chart-card-footer">
<slot name="footer"></slot>
</div>
</a-card>
</template>
<script>
export default {
name: "ChartCard",
props: ['title', 'total', 'loading']
props: {
title: {
type: String,
default: ''
},
total: {
type: String,
default: ''
},
loading: {
type: String,
default: ''
}
}
}
</script>
......
src/components/chart/Bar.vue
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="data"
:forceFit="true"
:padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="data"
:forceFit="true"
:padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
</template>
<script>
......@@ -40,7 +40,12 @@
export default {
name: "Bar",
props: ['title'],
props: {
title: {
type: String,
default: ''
}
},
data () {
return {
data,
......
src/components/chart/MiniArea.vue
<template>
<div class="antv-mini-chart">
<div class="chart-content" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
<v-tooltip />
<v-smooth-area position="x*y" />
</v-chart>
</div>
<div class="antv-mini-chart">
<div class="chart-content" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
<v-tooltip />
<v-smooth-area position="x*y" />
</v-chart>
</div>
</div>
</template>
<script>
......
src/components/chart/Radar.vue
<template>
<v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
<v-tooltip />
<v-tooltip></v-tooltip>
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
<v-legend dataKey="user" marker="circle" :offset="30" />
......@@ -47,7 +47,12 @@
export default {
name: 'Radar',
props: ['data'],
props: {
data: {
type: Array,
default: null,
}
},
data () {
return {
axis1Opts,
......
src/components/chart/RankList.vue
<template>
<div class="rank">
<h4 class="title">{{ title }}</h4>
<ul class="list">
<li :key="index" v-for="(item, index) in list">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span >{{ item.name }}</span>
<span >{{ item.total }}</span>
</li>
</ul>
</div>
<div class="rank">
<h4 class="title">{{ title }}</h4>
<ul class="list">
<li :key="index" v-for="(item, index) in list">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span >{{ item.name }}</span>
<span >{{ item.total }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "RankList",
props: ['title', 'list']
// ['title', 'list']
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: null
}
}
}
</script>
......
src/components/chart/TransferBar.vue
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="data"
:scale="scale"
:forceFit="true"
:padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="data"
:scale="scale"
:forceFit="true"
:padding="['auto', 'auto', '40', '50']">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
</template>
<script>
......
src/components/layout/LayoutFooter.vue
<template>
<div class="footer">
<div class="links">
<a href="#">Pro 首页</a>
<a href="#"><a-icon type="github"/></a>
<a href="#">Ant Design</a>
</div>
<div class="copyright">
Copyright <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>
</div>
<div class="footer">
<div class="links">
<a href="#">Pro 首页</a>
<a href="#"><a-icon type="github"/></a>
<a href="#">Ant Design</a>
</div>
<div class="copyright">
Copyright <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>
</div>
</div>
</template>
<script>
......
src/components/layout/LayoutHeader.vue
<template>
<a-layout-header style="padding: 0px;">
<div class="header">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"/>
<div class="user-wrapper">
<span class="action">
<a-icon type="question-circle-o"></a-icon>
</span>
<header-notice class="action"/>
<a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span>
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<a-menu-item key="0">
<a-icon type="user"/>
<span>个人中心</span>
</a-menu-item>
<a-menu-item key="1">
<router-link :to="{ name: 'settings' }">
<a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item>
<a-menu-item key="2" disabled>
<a-icon type="setting"/>
<span>测试</span>
</a-menu-item>
<a-menu-divider/>
<a-menu-item key="3">
<a href="javascript:;" @click="handleLogout">
<a-icon type="logout"/>
<span>退出登录</span>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</a-layout-header>
<a-layout-header style="padding: 0px;">
<div class="header">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"/>
<div class="user-wrapper">
<span class="action">
<a-icon type="question-circle-o"></a-icon>
</span>
<header-notice class="action"/>
<a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span>
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<a-menu-item key="0">
<a-icon type="user"/>
<span>个人中心</span>
</a-menu-item>
<a-menu-item key="1">
<router-link :to="{ name: 'settings' }">
<a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item>
<a-menu-item key="2" disabled>
<a-icon type="setting"/>
<span>测试</span>
</a-menu-item>
<a-menu-divider/>
<a-menu-item key="3">
<a href="javascript:;" @click="handleLogout">
<a-icon type="logout"/>
<span>退出登录</span>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</a-layout-header>
</template>
<script>
......
src/components/layout/PageHeader.vue
......@@ -47,18 +47,22 @@
props: {
title: {
type: String,
default: '',
required: false
},
breadcrumb: {
type: Array,
default: null,
required: false
},
logo: {
type: String,
default: '',
required: false
},
avatar: {
type: String,
default: '',
required: false
}
},
......
src/components/layout/PageLayout.vue
<template>
<div :style="!$route.meta.hideHeader ? 'margin: -24px -24px 0px;' : null">
<!-- pageHeader , route meta hideHeader:true on hide -->
<page-header v-if="!$route.meta.hideHeader" :title="title" :logo="logo" :avatar="avatar">
<slot slot="action" name="action"></slot>
<slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && desc">
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" :href="link.href">
<a-icon :type="link.icon" /><span>{{ link.title }}</span>
</a>
</template>
</div>
</div>
<slot slot="extra" name="extra"></slot>
</page-header>
<div class="content">
<slot></slot>
<div :style="!$route.meta.hideHeader ? 'margin: -24px -24px 0px;' : null">
<!-- pageHeader , route meta hideHeader:true on hide -->
<page-header v-if="!$route.meta.hideHeader" :title="title" :logo="logo" :avatar="avatar">
<slot slot="action" name="action"></slot>
<slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && desc">
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" :href="link.href">
<a-icon :type="link.icon" /><span>{{ link.title }}</span>
</a>
</template>
</div>
</div>
<slot slot="extra" name="extra"></slot>
</page-header>
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
......@@ -30,7 +30,33 @@
components: {
PageHeader
},
props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
// ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
props: {
desc: {
type: String,
default: null
},
logo: {
type: String,
default: null
},
title: {
type: String,
default: null
},
avatar: {
type: String,
default: null
},
linkList: {
type: String,
default: null
},
extraImage: {
type: String,
default: null
}
},
}
</script>
......
src/components/layout/PageView.vue
<template>
<page-layout :desc="description" :title="getTitle" :link-list="linkList">
<div slot="extra" class="extra-img">
<img :src="extraImage"/>
</div>
<!-- keep-alive -->
<route-view ref="content"></route-view>
</page-layout>
<page-layout :desc="description" :title="getTitle" :link-list="linkList">
<div slot="extra" class="extra-img">
<img :src="extraImage"/>
</div>
<!-- keep-alive -->
<route-view ref="content"></route-view>
</page-layout>
</template>
<script>
......
src/components/layout/RouteView.vue
<template>
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</template>
<script>
......
src/components/menu/NavMenu.vue
<template>
<a-menu
theme="dark"
mode="inline"
:defaultSelectedKeys="['1']">
<a-menu
theme="dark"
mode="inline"
:defaultSelectedKeys="['1']">
<template v-for="menu in menus">
<s-submenu :menu="menu" :key="menu.id"></s-submenu>
</template>
<template v-for="menu in menus">
<s-submenu :menu="menu" :key="menu.id"></s-submenu>
</template>
</a-menu>
</a-menu>
</template>
<script>
......
src/components/menu/SiderMenu.vue
<template>
<a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible"
v-model="collapsed" :trigger="null">
<a-layout-sider
:class="['sider', isMobile ? null : 'shadow', theme ]"
width="256px"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
<div class="logo">
<router-link :to="{name:'dashboard'}">
<img src="~@/assets/logo.svg" alt="logo">
......
src/components/menu/SubMenu.vue
<template>
<a-menu-item :key="menu.id" v-if="!menu.children && $router.matcher.match({ name: menu.permission }).matched.length">
<router-link :to="{ name: menu.name, params: { pageNo: '1' } }">
<a-icon v-if="menu.meta.icon" :type="menu.meta.icon"></a-icon>
<span>{{ menu.meta.title }}</span>
</router-link>
</a-menu-item>
<a-sub-menu :key="menu.id" v-else>
<span slot="title"><a-icon :type="menu.meta.icon" v-if="menu.meta.icon" /><span>{{ menu.meta.title }}</span></span>
<template v-for="submenu in menu.children">
<s-submenu :key="submenu.id" :menu="submenu"></s-submenu>
</template>
</a-sub-menu>
<a-menu-item :key="menu.id" v-if="!menu.children && $router.matcher.match({ name: menu.permission }).matched.length">
<router-link :to="{ name: menu.name, params: { pageNo: '1' } }">
<a-icon v-if="menu.meta.icon" :type="menu.meta.icon"></a-icon>
<span>{{ menu.meta.title }}</span>
</router-link>
</a-menu-item>
<a-sub-menu :key="menu.id" v-else>
<span slot="title"><a-icon :type="menu.meta.icon" v-if="menu.meta.icon" /><span>{{ menu.meta.title }}</span></span>
<template v-for="submenu in menu.children">
<s-submenu :key="submenu.id" :menu="submenu"></s-submenu>
</template>
</a-sub-menu>
</template>
<script>
......
src/components/table/StandardTable.vue
<template>
<div class="standard-table">
<div class="alert">
<a-alert type="info" :show-icon="true">
<div slot="message">
已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
{{ item.title }} 总计&nbsp;
<a :key="index" style="font-weight: 600">
{{ item.customRender ? item.customRender(item.total) : item.total }}
</a>&nbsp;&nbsp;
</template>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
</a-alert>
<div class="standard-table">
<div class="alert">
<a-alert type="info" :show-icon="true">
<div slot="message">
已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
{{ item.title }} 总计&nbsp;
<a :key="index" style="font-weight: 600">
{{ item.customRender ? item.customRender(item.total) : item.total }}
</a>&nbsp;&nbsp;
</template>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
:size="size"
:bordered="bordered"
:loading="loading"
:columns="columns"
:dataSource="current"
:rowKey="rowKey"
:pagination="pagination"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: updateSelect }"
>
</a-table>
</a-alert>
</div>
<a-table
:size="size"
:bordered="bordered"
:loading="loading"
:columns="columns"
:dataSource="current"
:rowKey="rowKey"
:pagination="pagination"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: updateSelect }"
>
</a-table>
</div>
</template>
<script>
......
src/components/tools/Breadcrumb.vue
<template>
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link v-if="item.name != name" :to="{ path: item.path }">
{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link v-if="item.name != name" :to="{ path: item.path }">
{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script>
......
src/components/tools/HeadInfo.vue
......@@ -9,7 +9,20 @@
<script>
export default {
name: "HeadInfo",
props: ['title', 'content', 'bordered']
props: {
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
bordered: {
type: Boolean,
default: false
}
}
}
</script>
......
src/views/404.vue
<template>
<div>
404 page
</div>
<div>
404 page
</div>
</template>
<script>
......
src/views/Home.vue
......@@ -10,7 +10,7 @@
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
name: 'Home',
components: {
HelloWorld
}
......
src/views/Login.vue
......@@ -15,8 +15,10 @@
<div class="main">
<a-form ref="formLogin" :autoFormCreate="(form)=>{this.form = form}" id="formLogin">
<a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@change="handleTabClick">
<a-tabs
:activeKey="customActiveKey"
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@change="handleTabClick">
<a-tab-pane key="tab1" tab="账号密码登陆">
<a-form-item
......@@ -56,13 +58,13 @@
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="8">
<span class="ivu-input-prefix">
<a-button
class="getCaptcha"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn&&'获取验证码'||(state.time+' s')"></a-button>
</span>
<span class="ivu-input-prefix">
<a-button
class="getCaptcha"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn&&'获取验证码'||(state.time+' s')"></a-button>
</span>
</a-col>
</a-row>
......@@ -84,7 +86,7 @@
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
v-bind:disabled="loginBtn">确定
:disabled="loginBtn">确定
</a-button>
</a-form-item>
......
src/views/account/center/Index.vue
......@@ -15,70 +15,11 @@
},
data () {
return {
defaultSelectedKeys: [],
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
},
pageTitle: ''
}
},
created () {
this.updateMenu()
},
methods: {
onOpenChange (openKeys) {
},
updateMenu () {
let routes = this.$route.matched.concat()
this.defaultSelectedKeys = [ routes.pop().path ]
}
},
}
</script>
<style lang="scss" scoped>
.account-settings-info-main {
width: 100%;
display: flex;
height: 100%;
overflow: auto;
.account-settings-info-left {
border-right: 1px solid #e8e8e8;
width: 224px;
}
.account-settings-info-right {
flex: 1 1;
padding: 8px 40px;
.account-settings-info-title {
color: rgba(0,0,0,.85);
font-size: 20px;
font-weight: 500;
line-height: 28px;
margin-bottom: 12px;
}
.account-settings-info-view {
padding-top: 12px;
}
}
}
</style>
\ No newline at end of file
</script>
\ No newline at end of file
src/views/account/settings/BaseSetting.vue
<template>
<div class="account-settings-info-view">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</a-col>
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
</a-col>
<img :src="option.img"/>
</div>
</a-col>
</a-row>
</div>
</a-row>
</div>
</template>
<script>
......
src/views/account/settings/Index.vue
......@@ -57,6 +57,7 @@
},
data () {
return {
openKeys: [],
defaultSelectedKeys: [],
// cropper
......@@ -85,7 +86,7 @@
},
methods: {
onOpenChange (openKeys) {
this.openKeys = openKeys
},
updateMenu () {
let routes = this.$route.matched.concat()
......
src/views/dashboard/Monitor.vue
<template>
<div>
Monitor
</div>
<div>
Monitor
</div>
</template>
<script>
......
src/views/dashboard/Workplace.vue
......@@ -22,12 +22,12 @@
<a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card
class="project-list"
:loading="loading"
style="margin-bottom: 24px;"
:bordered="false"
title="进行中的项目"
:body-style="{ padding: 0 }">
class="project-list"
:loading="loading"
style="margin-bottom: 24px;"
:bordered="false"
title="进行中的项目"
:body-style="{ padding: 0 }">
<a slot="extra">全部项目</a>
<div>
<a-card-grid :key="i" v-for="(item, i) in projects">
......@@ -68,12 +68,12 @@ title="进行中的项目"
</a-card>
</a-col>
<a-col
style="padding: 0 12px"
:xl="8"
:lg="24"
:md="24"
:sm="24"
:xs="24">
style="padding: 0 12px"
:xl="8"
:lg="24"
:md="24"
:sm="24"
:xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a>操作一</a>
......@@ -97,7 +97,7 @@ style="padding: 0 12px"
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{item.name}}</span>
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
......
src/views/exception/ExceptionPage.vue
......@@ -4,8 +4,8 @@
<img :src="config[type].img"/>
</div>
<div class="content">
<h1>{{config[type].title}}</h1>
<div class="desc">{{config[type].desc}}</div>
<h1>{{ config[type].title }}</h1>
<div class="desc">{{ config[type].desc }}</div>
<div class="action">
<a-button type="primary" @click="handleToHome">返回首页</a-button>
</div>
......@@ -18,7 +18,12 @@
export default {
name: "Exception",
props: ['type'],
props: {
type: {
type: Number,
default: 404
}
},
data() {
return {
config: types
......
src/views/form/advancedForm/AdvancedForm.vue
<template>
<div>
<a-card class="card" title="仓库管理" :bordered="false">
<repository-form ref="repository" :showSubmit="false" />
</a-card>
<a-card class="card" title="任务管理" :bordered="false">
<task-form ref="task" :showSubmit="false" />
</a-card>
<div>
<a-card class="card" title="仓库管理" :bordered="false">
<repository-form ref="repository" :showSubmit="false" />
</a-card>
<a-card class="card" title="任务管理" :bordered="false">
<task-form ref="task" :showSubmit="false" />
</a-card>
<!-- table -->
<a-card>
<form :autoFormCreate="(form) => this.form = form">
<a-table
:columns="columns"
:dataSource="data"
:pagination="false"
>
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
<a-input
:key="col"
v-if="record.editable"
style="margin: -5px 0"
:value="text"
:placeholder="columns[i].title"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{text}}</template>
</template>
<template slot="operation" slot-scope="text, record, index">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record.key)">添加</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical" />
<a @click="cancle(record.key)">取消</a>
</span>
</template>
<!-- table -->
<a-card>
<form :autoFormCreate="(form) => this.form = form">
<a-table
:columns="columns"
:dataSource="data"
:pagination="false"
>
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
<a-input
:key="col"
v-if="record.editable"
style="margin: -5px 0"
:value="text"
:placeholder="columns[i].title"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</template>
<template slot="operation" slot-scope="text, record, index">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record.key)">添加</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="toggle(record.key)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
<a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical" />
<a @click="cancle(record.key)">取消</a>
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
</form>
</a-card>
<span v-else>
<a @click="toggle(record.key)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
</form>
</a-card>
<!-- fixed footer toolbar -->
<footer-tool-bar>
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
</footer-tool-bar>
</div>
<!-- fixed footer toolbar -->
<footer-tool-bar>
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
</footer-tool-bar>
</div>
</template>
<script>
......
src/views/form/advancedForm/RepositoryForm.vue
......@@ -77,7 +77,12 @@
<script>
export default {
name: "RepositoryForm",
props: ['showSubmit'],
props: {
showSubmit: {
type: Boolean,
default: false
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
......
src/views/form/advancedForm/TaskForm.vue
......@@ -76,7 +76,12 @@
<script>
export default {
name: "TaskForm",
props: ['showSubmit'],
props: {
showSubmit: {
type: Boolean,
default: false
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
......
src/views/list/CardList.vue
......@@ -14,9 +14,9 @@
<template v-else>
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{item.title}}</div>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
<div class="meta-content" slot="description">{{item.content}}</div>
<div class="meta-content" slot="description">{{ item.content }}</div>
</a-card-meta>
<ul class="ant-card-actions" slot="actions">
<li><a>操作一</a></li>
......
src/views/list/StandardList.vue
<template>
<div>
<a-card :bordered="false">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="我的待办" content="8个任务" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周完成任务数" content="24个"/>
</a-col>
</a-row>
</a-card>
<div>
<a-card :bordered="false">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="我的待办" content="8个任务" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周完成任务数" content="24个"/>
</a-col>
</a-row>
</a-card>
<a-card
style="margin-top: 24px"
:bordered="false"
title="标准列表">
<a-card
style="margin-top: 24px"
:bordered="false"
title="标准列表">
<div slot="extra">
<a-radio-group>
<a-radio-button>全部</a-radio-button>
<a-radio-button>进行中</a-radio-button>
<a-radio-button>等待中</a-radio-button>
</a-radio-group>
<a-input-search style="margin-left: 16px; width: 272px;" />
</div>
<div slot="extra">
<a-radio-group>
<a-radio-button>全部</a-radio-button>
<a-radio-button>进行中</a-radio-button>
<a-radio-button>等待中</a-radio-button>
</a-radio-group>
<a-input-search style="margin-left: 16px; width: 272px;" />
</div>
<div class="operate">
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
</div>
<div class="operate">
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
</div>
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
<a-list-item :key="index" v-for="(item, index) in data">
<a-list-item-meta :description="item.description">
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
<a slot="title">{{ item.title }}</a>
</a-list-item-meta>
<div slot="actions">
<a>编辑</a>
</div>
<div slot="actions">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item><a>编辑</a></a-menu-item>
<a-menu-item><a>删除</a></a-menu-item>
</a-menu>
<a>更多<a-icon type="down"/></a>
</a-dropdown>
</div>
<div class="list-content">
<div class="list-content-item">
<span>Owner</span>
<p>{{ item.owner }}</p>
</div>
<div class="list-content-item">
<span>开始时间</span>
<p>{{ item.startAt }}</p>
</div>
<div class="list-content-item">
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
</div>
</div>
</a-list-item>
</a-list>
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
<a-list-item :key="index" v-for="(item, index) in data">
<a-list-item-meta :description="item.description">
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
<a slot="title">{{ item.title }}</a>
</a-list-item-meta>
<div slot="actions">
<a>编辑</a>
</div>
<div slot="actions">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item><a>编辑</a></a-menu-item>
<a-menu-item><a>删除</a></a-menu-item>
</a-menu>
<a>更多<a-icon type="down"/></a>
</a-dropdown>
</div>
<div class="list-content">
<div class="list-content-item">
<span>Owner</span>
<p>{{ item.owner }}</p>
</div>
<div class="list-content-item">
<span>开始时间</span>
<p>{{ item.startAt }}</p>
</div>
<div class="list-content-item">
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
</div>
</div>
</a-list-item>
</a-list>
</a-card>
</div>
</a-card>
</div>
</template>
<script>
......
src/views/list/TableInnerEditList.vue
......@@ -94,7 +94,7 @@
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{text}}</template>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="action" slot-scope="text, record, index">
......
src/views/result/Result.vue
......@@ -17,7 +17,21 @@
<script>
export default {
name: "Result",
props: ['isSuccess', 'title', 'description']
// 'isSuccess', 'title', 'description'
props: {
isSuccess: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
}
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment