Skip to content

A
ant-design-pro-vue
Unverified Commit 5430878c by Sendya
Options

feat: record edit

parent ba0e51a8
Showing with 393 additions and 321 deletions
src/config/router.config.js
...@@ -78,9 +78,28 @@ export const asyncRouterMap = [ ...@@ -78,9 +78,28 @@ export const asyncRouterMap = [
children: [ children: [
{ {
path: '/list/query-list', path: '/list/query-list',
name: 'QueryList', name: 'QueryListWrapper',
alwaysShow: true, // 强制显示 MenuItem 而不是 SubMenu
component: () => import('@/views/list/TableList'), component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] } meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] },
redirect: {
name: 'QueryList',
params: { page: 1 }
},
children: [
{
path: '/list/query-list/:page([1-9]\\d*)?',
name: 'QueryList',
component: () => import('@/views/list/table/List'),
meta: { title: '查询表格', hidden: true, keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/query-list/edit/:id([1-9]\\d*)?',
name: 'QueryListEdit',
component: () => import('@/views/list/table/Edit'),
meta: { title: '编辑', hidden: true, keepAlive: true, permission: [ 'table' ] }
}
]
}, },
{ {
path: '/list/tree-list', path: '/list/tree-list',
......
src/views/list/table/Edit.vue 0 → 100644
<template>
<div>
<a-form :form="form" @submit="handleSubmit">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="规则编号"
hasFeedback
validateStatus="success"
>
<a-input
placeholder="规则编号"
v-decorator="[
'no',
{rules: [{ required: true, message: '请输入规则编号' }]}
]"
></a-input>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="服务调用次数"
hasFeedback
validateStatus="success"
>
<a-input-number :min="1" style="width: 100%" v-decorator="['callNo', {rules: [{ required: true }]}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
hasFeedback
validateStatus="warning"
>
<a-select defaultValue="1" v-decorator="['status', {rules: [{ required: true, message: '请选择状态' }]}]">
<a-select-option value="1">Option 1</a-select-option>
<a-select-option value="2">Option 2</a-select-option>
<a-select-option value="3">Option 3</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
help="请填写一段描述"
>
<a-textarea :rows="5" placeholder="..." v-decorator="['description', {rules: [{ required: true }]}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="更新时间"
hasFeedback
validateStatus="error"
>
<a-date-picker
style="width: 100%"
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Select Time"
/>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: 'TableEdit',
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 }
},
form: null,
id: 0
}
},
beforeCreate () {
this.form = this.$form.createForm(this)
},
created () {
if (this.$route.params.id) {
this.id = this.$route.params.id
}
},
methods: {
handleSubmit () {
const { form: { validateFields } } = this
validateFields((err, values) => {
if (!err) {
// eslint-disable-next-line no-console
console.log('Received values of form: ', values)
}
})
},
loadEditInfo () {
const { from } = this
// ajax
console.log(`将加载 ${this.id} 信息到表单`)
new Promise((resolve) => {
setTimeout(resolve, 1500)
}).then(() => {
from.setFieldsValue({ no: '1', callNo: '999' })
})
}
},
watch: {
id (val, oldVal) {
console.log('val', val, 'oldVal', oldVal)
this.loadEditInfo()
}
}
}
</script>
src/views/list/table/List.vue 0 → 100644
<template>
<div>
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item label="规则编号">
<a-input v-model="queryParam.id" placeholder=""/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<template v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="调用次数">
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="更新日期">
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<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="使用状态">
<a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
</template>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button type="primary" icon="plus" @click="$router.push({ name: 'QueryListEdit' })">新建</a-button>
<a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">
批量操作 <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<div>
<a-button @click="tableOption(false)" v-if="optionAlertShow">关闭 alert</a-button>
</div>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:alert="options.alert"
:rowSelection="options.rowSelection"
>
<span slot="serial" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action" slot-scope="text, record">
<template>
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
</template>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">详情</a>
</a-menu-item>
<a-menu-item v-if="$auth('table.disable')">
<a href="javascript:;">禁用</a>
</a-menu-item>
<a-menu-item v-if="$auth('table.delete')">
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
</div>
</template>
<script>
import moment from 'moment'
import STable from '@/components/table/'
import { getRoleList, getServiceList } from '@/api/manage'
export default {
name: 'TableList',
components: {
STable
},
data () {
return {
mdl: {},
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '#',
scopedSlots: { customRender: 'serial' }
},
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
},
{
table: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return getServiceList(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: [],
// custom table alert & rowSelection
options: {
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
},
optionAlertShow: true
}
},
created () {
this.tableOption(true)
getRoleList({ t: new Date() })
},
methods: {
tableOption (bool) {
if (bool) {
this.options = {
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
}
} else {
this.options = {
alert: false,
rowSelection: null
}
this.optionAlertShow = false
}
},
handleEdit (record) {
// Object.assign({}, record)
this.$router.push({ name: 'QueryListEdit', params: { id: record.no } })
},
handleOk () {
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
resetSearchForm () {
this.queryParam = {
date: moment(new Date())
}
}
}
}
</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