Skip to content

Commit 3a91251

Browse files
sendyasendya
committed
feat: record edit
1 parent f9d8177 commit 3a91251

File tree

4 files changed

+393
-321
lines changed

4 files changed

+393
-321
lines changed

‎src/config/router.config.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,28 @@ export const asyncRouterMap = [
7878
children: [
7979
{
8080
path: '/list/query-list',
81-
name: 'QueryList',
81+
name: 'QueryListWrapper',
82+
alwaysShow: true, // 强制显示 MenuItem 而不是 SubMenu
8283
component: () => import('@/views/list/TableList'),
83-
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
84+
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] },
85+
redirect: {
86+
name: 'QueryList',
87+
params: { page: 1 }
88+
},
89+
children: [
90+
{
91+
path: '/list/query-list/:page([1-9]\\d*)?',
92+
name: 'QueryList',
93+
component: () => import('@/views/list/table/List'),
94+
meta: { title: '查询表格', hidden: true, keepAlive: true, permission: [ 'table' ] }
95+
},
96+
{
97+
path: '/list/query-list/edit/:id([1-9]\\d*)?',
98+
name: 'QueryListEdit',
99+
component: () => import('@/views/list/table/Edit'),
100+
meta: { title: '编辑', hidden: true, keepAlive: true, permission: [ 'table' ] }
101+
}
102+
]
84103
},
85104
{
86105
path: '/list/tree-list',

‎src/views/list/TableList.vue

Lines changed: 5 additions & 319 deletions
Original file line numberDiff line numberDiff line change
@@ -1,343 +1,29 @@
11
<template>
22
<a-card :bordered="false">
3-
<div class="table-page-search-wrapper">
4-
<a-form layout="inline">
5-
<a-row :gutter="48">
6-
<a-col :md="8" :sm="24">
7-
<a-form-item label="规则编号">
8-
<a-input v-model="queryParam.id" placeholder=""/>
9-
</a-form-item>
10-
</a-col>
11-
<a-col :md="8" :sm="24">
12-
<a-form-item label="使用状态">
13-
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
14-
<a-select-option value="0">全部</a-select-option>
15-
<a-select-option value="1">关闭</a-select-option>
16-
<a-select-option value="2">运行中</a-select-option>
17-
</a-select>
18-
</a-form-item>
19-
</a-col>
20-
<template v-if="advanced">
21-
<a-col :md="8" :sm="24">
22-
<a-form-item label="调用次数">
23-
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
24-
</a-form-item>
25-
</a-col>
26-
<a-col :md="8" :sm="24">
27-
<a-form-item label="更新日期">
28-
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
29-
</a-form-item>
30-
</a-col>
31-
<a-col :md="8" :sm="24">
32-
<a-form-item label="使用状态">
33-
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
34-
<a-select-option value="0">全部</a-select-option>
35-
<a-select-option value="1">关闭</a-select-option>
36-
<a-select-option value="2">运行中</a-select-option>
37-
</a-select>
38-
</a-form-item>
39-
</a-col>
40-
<a-col :md="8" :sm="24">
41-
<a-form-item label="使用状态">
42-
<a-select placeholder="请选择" default-value="0">
43-
<a-select-option value="0">全部</a-select-option>
44-
<a-select-option value="1">关闭</a-select-option>
45-
<a-select-option value="2">运行中</a-select-option>
46-
</a-select>
47-
</a-form-item>
48-
</a-col>
49-
</template>
50-
<a-col :md="!advanced && 8 || 24" :sm="24">
51-
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
52-
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
53-
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
54-
<a @click="toggleAdvanced" style="margin-left: 8px">
55-
{{ advanced ? '收起' : '展开' }}
56-
<a-icon :type="advanced ? 'up' : 'down'"/>
57-
</a>
58-
</span>
59-
</a-col>
60-
</a-row>
61-
</a-form>
62-
</div>
63-
64-
<div class="table-operator">
65-
<a-button type="primary" icon="plus" v-action:add>新建</a-button>
66-
<a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
67-
<a-menu slot="overlay">
68-
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
69-
<!-- lock | unlock -->
70-
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
71-
</a-menu>
72-
<a-button style="margin-left: 8px">
73-
批量操作 <a-icon type="down" />
74-
</a-button>
75-
</a-dropdown>
76-
</div>
77-
78-
<div>
79-
<a-button @click="tableOption(false)" v-if="optionAlertShow">关闭 alert</a-button>
80-
</div>
81-
<s-table
82-
ref="table"
83-
size="default"
84-
:columns="columns"
85-
:data="loadData"
86-
:alert="options.alert"
87-
:rowSelection="options.rowSelection"
88-
>
89-
<span slot="serial" slot-scope="text, record, index">
90-
{{ index + 1 }}
91-
</span>
92-
<span slot="action" slot-scope="text, record">
93-
<template v-if="$auth('table.update')">
94-
<a @click="handleEdit(record)">编辑</a>
95-
<a-divider type="vertical" />
96-
</template>
97-
<a-dropdown>
98-
<a class="ant-dropdown-link">
99-
更多 <a-icon type="down" />
100-
</a>
101-
<a-menu slot="overlay">
102-
<a-menu-item>
103-
<a href="javascript:;">详情</a>
104-
</a-menu-item>
105-
<a-menu-item v-if="$auth('table.disable')">
106-
<a href="javascript:;">禁用</a>
107-
</a-menu-item>
108-
<a-menu-item v-if="$auth('table.delete')">
109-
<a href="javascript:;">删除</a>
110-
</a-menu-item>
111-
</a-menu>
112-
</a-dropdown>
113-
</span>
114-
</s-table>
115-
116-
<a-modal
117-
title="操作"
118-
:width="800"
119-
v-model="visible"
120-
@ok="handleOk"
121-
>
122-
<a-form :autoFormCreate="(form)=>{this.form = form}">
123-
124-
<a-form-item
125-
:labelCol="labelCol"
126-
:wrapperCol="wrapperCol"
127-
label="规则编号"
128-
hasFeedback
129-
validateStatus="success"
130-
>
131-
<a-input placeholder="规则编号" v-model="mdl.no" id="no" />
132-
</a-form-item>
133-
134-
<a-form-item
135-
:labelCol="labelCol"
136-
:wrapperCol="wrapperCol"
137-
label="服务调用次数"
138-
hasFeedback
139-
validateStatus="success"
140-
>
141-
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
142-
</a-form-item>
143-
144-
<a-form-item
145-
:labelCol="labelCol"
146-
:wrapperCol="wrapperCol"
147-
label="状态"
148-
hasFeedback
149-
validateStatus="warning"
150-
>
151-
<a-select defaultValue="1" v-model="mdl.status">
152-
<a-select-option value="1">Option 1</a-select-option>
153-
<a-select-option value="2">Option 2</a-select-option>
154-
<a-select-option value="3">Option 3</a-select-option>
155-
</a-select>
156-
</a-form-item>
157-
158-
<a-form-item
159-
:labelCol="labelCol"
160-
:wrapperCol="wrapperCol"
161-
label="描述"
162-
hasFeedback
163-
help="请填写一段描述"
164-
>
165-
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
166-
</a-form-item>
167-
168-
<a-form-item
169-
:labelCol="labelCol"
170-
:wrapperCol="wrapperCol"
171-
label="更新时间"
172-
hasFeedback
173-
validateStatus="error"
174-
>
175-
<a-date-picker
176-
style="width: 100%"
177-
showTime
178-
format="YYYY-MM-DD HH:mm:ss"
179-
placeholder="Select Time"
180-
/>
181-
</a-form-item>
182-
183-
</a-form>
184-
</a-modal>
185-
3+
<router-view />
1864
</a-card>
1875
</template>
1886

1897
<script>
190-
import STable from '@/components/table/'
8+
1919
import ATextarea from 'ant-design-vue/es/input/TextArea'
19210
import AInput from 'ant-design-vue/es/input/Input'
193-
import moment from 'moment'
194-
195-
import { getRoleList, getServiceList } from '@/api/manage'
19611
19712
export default {
198-
name: 'TableList',
13+
name: 'TableListWrapper',
19914
components: {
20015
AInput,
201-
ATextarea,
202-
STable
16+
ATextarea
20317
},
20418
data () {
20519
return {
206-
visible: false,
207-
labelCol: {
208-
xs: { span: 24 },
209-
sm: { span: 5 }
210-
},
211-
wrapperCol: {
212-
xs: { span: 24 },
213-
sm: { span: 12 }
214-
},
215-
form: null,
216-
mdl: {},
217-
218-
// 高级搜索 展开/关闭
219-
advanced: false,
220-
// 查询参数
221-
queryParam: {},
222-
// 表头
223-
columns: [
224-
{
225-
title: '#',
226-
scopedSlots: { customRender: 'serial' }
227-
},
228-
{
229-
title: '规则编号',
230-
dataIndex: 'no'
231-
},
232-
{
233-
title: '描述',
234-
dataIndex: 'description'
235-
},
236-
{
237-
title: '服务调用次数',
238-
dataIndex: 'callNo',
239-
sorter: true,
240-
needTotal: true,
241-
customRender: (text) => text + ' 次'
242-
},
243-
{
244-
title: '状态',
245-
dataIndex: 'status',
246-
needTotal: true
247-
},
248-
{
249-
title: '更新时间',
250-
dataIndex: 'updatedAt',
251-
sorter: true
252-
},
253-
{
254-
table: '操作',
255-
dataIndex: 'action',
256-
width: '150px',
257-
scopedSlots: { customRender: 'action' }
258-
}
259-
],
260-
// 加载数据方法 必须为 Promise 对象
261-
loadData: parameter => {
262-
return getServiceList(Object.assign(parameter, this.queryParam))
263-
.then(res => {
264-
return res.result
265-
})
266-
},
267-
selectedRowKeys: [],
268-
selectedRows: [],
269-
270-
// custom table alert & rowSelection
271-
options: {
272-
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
273-
rowSelection: {
274-
selectedRowKeys: this.selectedRowKeys,
275-
onChange: this.onSelectChange
276-
}
277-
},
278-
optionAlertShow: true
27920
}
28021
},
28122
created () {
282-
this.tableOption(true)
283-
getRoleList({ t: new Date() })
23+
28424
},
28525
methods: {
28626
287-
tableOption (bool) {
288-
if (bool) {
289-
this.options = {
290-
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
291-
rowSelection: {
292-
selectedRowKeys: this.selectedRowKeys,
293-
onChange: this.onSelectChange
294-
}
295-
}
296-
} else {
297-
this.options = {
298-
alert: false,
299-
rowSelection: null
300-
}
301-
this.optionAlertShow = false
302-
}
303-
},
304-
305-
handleEdit (record) {
306-
this.mdl = Object.assign({}, record)
307-
console.log(this.mdl)
308-
this.visible = true
309-
},
310-
handleOk () {
311-
312-
},
313-
314-
onSelectChange (selectedRowKeys, selectedRows) {
315-
this.selectedRowKeys = selectedRowKeys
316-
this.selectedRows = selectedRows
317-
},
318-
toggleAdvanced () {
319-
this.advanced = !this.advanced
320-
},
321-
322-
resetSearchForm () {
323-
this.queryParam = {
324-
date: moment(new Date())
325-
}
326-
}
327-
},
328-
watch: {
329-
/*
330-
'selectedRows': function (selectedRows) {
331-
this.needTotalList = this.needTotalList.map(item => {
332-
return {
333-
...item,
334-
total: selectedRows.reduce( (sum, val) => {
335-
return sum + val[item.dataIndex]
336-
}, 0)
337-
}
338-
})
339-
}
340-
*/
34127
}
34228
}
34329
</script>

0 commit comments

Comments
 (0)