pengjunjie/JeecgBoot
1
0
Fork 1
mirror of https://github.com/jeecgboot/JeecgBoot.git synced 2026-02-05 01:55:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

JeecgBoot 2.4 微服务正式版本发布，基于SpringBoot的低代码平台

Browse Source
This commit is contained in:
zhangdaiscott
2020-11-28 17:20:10 +08:00
parent 33e1b04224
commit 6638ac0978
614 changed files with 206292 additions and 29220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
ant-design-vue-jeecg/src/views/examples/list/TableInnerEditList.vue Normal file
View File

@ -0,0 +1,270 @@
<template>
<a-card :bordered="false">
<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 placeholder=""/>
</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 v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="调用次数">
<a-input-number style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="更新日期">
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
</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>
<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">查询</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-col>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button type="primary" icon="plus" @click="() => $router.push({name: 'anime-add'})">新建</a-button>
<a-dropdown 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>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:showAlertInfo="true"
@onSelect="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 class="edit" @click="() => edit(record)">修改</a>
<a-divider type="vertical" />
<a class="delete" @click="() => del(record)">删除</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: '100px',
needTotal: true,
scopedSlots: { customRender: 'status' },
},
{
title: '更新时间',
dataIndex: 'updatedAt',
width: '150px',
sorter: true,
scopedSlots: { customRender: 'updatedAt' },
},
{
table: '操作',
dataIndex: 'action',
width: '120px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/mock/api/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()
},
// eslint-disable-next-line
del (row) {
this.$confirm({
title: '警告',
content: '真的要删除吗?',
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
console.log('OK');
// 在这里调用删除接口
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {
console.log('Cancel');
},
});
},
save (row) {
delete row.editable
this.$refs.table.updateEdit()
},
cancel (row) {
delete row.editable
this.$refs.table.updateEdit()
},
onChange (row) {
this.selectedRowKeys = row.selectedRowKeys
this.selectedRows = row.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="less" 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>