Skip to content

A
ant-design-pro-vue
Commit 182bd1c3 by Sendya
Options

fix: innerEditList zhCN lang

parent 5077398a
Showing with 396 additions and 386 deletions
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>
</template>
<script>
import PageLayout from './PageLayout'
import RouteView from './RouteView'
export default {
name: "PageContent",
components: {
RouteView,
PageLayout
},
data () {
return {
title: '',
description: '',
linkList: [],
extraImage: ''
}
},
mounted () {
this.getPageHeaderInfo()
},
updated () {
this.getPageHeaderInfo()
},
computed: {
getTitle () {
return this.$route.meta.title
}
},
methods: {
getPageHeaderInfo () {
// eslint-disable-next-line
this.title = this.$route.meta.title
// 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
const content = this.$refs.content.$children[0]
if (content) {
this.description = content.description
this.linkList = content.linkList
this.extraImage = content.extraImage
}
}
}
}
</script>
<style lang="scss" scoped>
.extra-img{
margin-top: -60px;
text-align: center;
width: 195px;
img{
width: 100%;
}
}
<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>
</template>
<script>
import PageLayout from './PageLayout'
import RouteView from './RouteView'
export default {
name: "PageContent",
components: {
RouteView,
PageLayout
},
data () {
return {
title: '',
description: '',
linkList: [],
extraImage: ''
}
},
mounted () {
this.getPageHeaderInfo()
},
updated () {
this.getPageHeaderInfo()
},
computed: {
getTitle () {
return this.$route.meta.title
}
},
methods: {
getPageHeaderInfo () {
// eslint-disable-next-line
this.title = this.$route.meta.title
// 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
const content = this.$refs.content && this.$refs.content.$children[0]
if (content) {
this.description = content.description
this.linkList = content.linkList
this.extraImage = content.extraImage
}
}
}
}
</script>
<style lang="scss" scoped>
.extra-img{
margin-top: -60px;
text-align: center;
width: 195px;
img{
width: 100%;
}
}
</style>
\ No newline at end of file
src/views/exception/ExceptionPage.vue
<template>
<div class="exception">
<div class="img">
<img :src="config[type].img"/>
</div>
<div class="content">
<h1>{{ config[type].title }}</h1>
<div class="desc">{{ config[type].desc }}</div>
<div class="action">
<a-button type="primary" @click="handleToHome">返回首页</a-button>
</div>
</div>
</div>
</template>
<script>
import types from './type'
export default {
name: "Exception",
props: {
type: {
type: Number,
default: 404
}
},
data() {
return {
config: types
}
},
methods: {
handleToHome () {
this.$router.push({ name: 'dashboard' })
}
}
}
</script>
<style lang="scss" scoped>
.exception {
min-height: 500px;
height: 80%;
align-items: center;
text-align: center;
margin-top: 150px;
.img {
display: inline-block;
padding-right: 52px;
zoom: 1;
img {
height: 360px;
max-width: 430px;
}
}
.content {
display: inline-block;
flex: auto;
h1 {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
}
.desc {
color: rgba(0, 0, 0, .45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
}
}
}
<template>
<div class="exception">
<div class="img">
<img :src="config[type].img"/>
</div>
<div class="content">
<h1>{{ config[type].title }}</h1>
<div class="desc">{{ config[type].desc }}</div>
<div class="action">
<a-button type="primary" @click="handleToHome">返回首页</a-button>
</div>
</div>
</div>
</template>
<script>
import types from './type'
export default {
name: "Exception",
props: {
type: {
type: String,
default: '404'
}
},
data() {
return {
config: types
}
},
methods: {
handleToHome () {
this.$router.push({ name: 'dashboard' })
}
}
}
</script>
<style lang="scss" scoped>
.exception {
min-height: 500px;
height: 80%;
align-items: center;
text-align: center;
margin-top: 150px;
.img {
display: inline-block;
padding-right: 52px;
zoom: 1;
img {
height: 360px;
max-width: 430px;
}
}
.content {
display: inline-block;
flex: auto;
h1 {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
}
.desc {
color: rgba(0, 0, 0, .45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
}
}
}
</style>
\ No newline at end of file
src/views/list/TableInnerEditList.vue
<template>
<a-card :bordered="false">
<div :class="advanced ? 'search' : null">
<a-form layout="horizontal">
<div :class="advanced ? null : 'fold'">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item
label="规则编号"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="使用状态"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-select placeholder="请选择">
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="调用次数"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input-number style="width: 100%" placeholder="请输入"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="48" v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item
label="更新日期"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}">
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="使用状态"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}">
<a-select placeholder="请选择">
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="描述"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
</a-row>
</div>
<span style="float: right; margin-top: 3px;">
<a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-form>
</div>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
>
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
<div :key="index">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="action" slot-scope="text, record, index">
<div class='editable-row-operations'>
<span v-if="record.editable">
<a @click="() => save(record)" style="margin-right: 12px">Save</a>
<a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record)">
<a>Cancel</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="() => edit(record, index)">Edit</a>
</span>
</div>
</template>
</s-table>
</a-card>
</template>
<script>
import STable from '@/components/table/'
export default {
name: "TableList",
components: {
STable
},
data () {
return {
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description',
scopedSlots: { customRender: 'description' },
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
scopedSlots: { customRender: 'callNo' },
// customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true,
scopedSlots: { customRender: 'status' },
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true,
scopedSlots: { customRender: 'updatedAt' },
},
{
table: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
methods: {
handleChange (value, key, column) {
console.log(value, key, column)
},
edit (row) {
row.editable = true
row = Object.assign({}, row)
this.$refs.table.updateEdit()
},
save (row) {
delete row.editable
this.$refs.table.updateEdit()
},
cancel (row) {
delete row.editable
this.$refs.table.updateEdit()
},
onChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
},
watch: {
/*
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce( (sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
*/
}
}
</script>
<style lang="scss" scoped>
.search {
margin-bottom: 54px;
}
.fold {
width: calc(100% - 216px);
display: inline-block
}
.operator {
margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
.fold {
width: 100%;
}
}
<template>
<a-card :bordered="false">
<div :class="advanced ? 'search' : null">
<a-form layout="horizontal">
<div :class="advanced ? null : 'fold'">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item
label="规则编号"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="使用状态"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-select placeholder="请选择">
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="调用次数"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input-number style="width: 100%" placeholder="请输入"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="48" v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item
label="更新日期"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}">
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="使用状态"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}">
<a-select placeholder="请选择">
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="描述"
:labelCol="{span: 5}"
:wrapperCol="{span: 18, offset: 1}"
>
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
</a-row>
</div>
<span style="float: right; margin-top: 3px;">
<a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-form>
</div>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
>
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
<div :key="index">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="action" slot-scope="text, record, index">
<div class='editable-row-operations'>
<span v-if="record.editable">
<a @click="() => save(record)">保存</a>
<a-divider type="vertical" />
<a-popconfirm title='真的放弃编辑吗?' @confirm="() => cancel(record)">
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="() => edit(record, index)">修改</a>
<a-divider type="vertical" />
<a @click="() => delete(record, index)">删除</a>
</span>
</div>
</template>
</s-table>
</a-card>
</template>
<script>
import STable from '@/components/table/'
export default {
name: "TableList",
components: {
STable
},
data () {
return {
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '规则编号',
dataIndex: 'no',
width: 90
},
{
title: '描述',
dataIndex: 'description',
scopedSlots: { customRender: 'description' },
},
{
title: '服务调用次数',
dataIndex: 'callNo',
width: '150px',
sorter: true,
needTotal: true,
scopedSlots: { customRender: 'callNo' },
// customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
width: '120px',
needTotal: true,
scopedSlots: { customRender: 'status' },
},
{
title: '更新时间',
dataIndex: 'updatedAt',
width: '180px',
sorter: true,
scopedSlots: { customRender: 'updatedAt' },
},
{
table: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
methods: {
handleChange (value, key, column) {
console.log(value, key, column)
},
edit (row) {
row.editable = true
row = Object.assign({}, row)
this.$refs.table.updateEdit()
},
save (row) {
delete row.editable
this.$refs.table.updateEdit()
},
cancel (row) {
delete row.editable
this.$refs.table.updateEdit()
},
onChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
},
watch: {
/*
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce( (sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
*/
}
}
</script>
<style lang="scss" scoped>
.search {
margin-bottom: 54px;
}
.fold {
width: calc(100% - 216px);
display: inline-block
}
.operator {
margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
.fold {
width: 100%;
}
}
</style>
\ No newline at end of file
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