Skip to content

A
ant-design-pro-vue
Unverified Commit c4e48688 by Sendya
Options

chore: table a-swtich checked,record

parent de613635
Showing with 427 additions and 424 deletions
src/components/menu/index.js
import Menu from 'ant-design-vue/es/menu' import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon' import Icon from 'ant-design-vue/es/icon'
const { Item, SubMenu } = Menu const { Item, SubMenu } = Menu
export default { export default {
name: 'SMenu', name: 'SMenu',
props: { props: {
menu: { menu: {
type: Array, type: Array,
required: true required: true
}, },
theme: { theme: {
type: String, type: String,
required: false, required: false,
default: 'dark' default: 'dark'
}, },
mode: { mode: {
type: String, type: String,
required: false, required: false,
default: 'inline' default: 'inline'
}, },
collapsed: { collapsed: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
} }
}, },
data () { data () {
return { return {
openKeys: [], openKeys: [],
selectedKeys: [], selectedKeys: [],
cachedOpenKeys: [] cachedOpenKeys: []
} }
}, },
computed: { computed: {
rootSubmenuKeys: vm => { rootSubmenuKeys: vm => {
const keys = [] const keys = []
vm.menu.forEach(item => keys.push(item.path)) vm.menu.forEach(item => keys.push(item.path))
return keys return keys
} }
}, },
created () { created () {
this.updateMenu() this.updateMenu()
}, },
watch: { watch: {
collapsed (val) { collapsed (val) {
if (val) { if (val) {
this.cachedOpenKeys = this.openKeys.concat() this.cachedOpenKeys = this.openKeys.concat()
this.openKeys = [] this.openKeys = []
} else { } else {
this.openKeys = this.cachedOpenKeys this.openKeys = this.cachedOpenKeys
} }
}, },
$route: function () { $route: function () {
this.updateMenu() this.updateMenu()
} }
}, },
methods: { methods: {
renderIcon: function (h, icon) { renderIcon: function (h, icon) {
if (icon === 'none' || icon === undefined) { if (icon === 'none' || icon === undefined) {
return null return null
} }
const props = {} const props = {}
typeof (icon) === 'object' ? props.component = icon : props.type = icon typeof (icon) === 'object' ? props.component = icon : props.type = icon
return h(Icon, { props: { ...props } }) return h(Icon, { props: { ...props } })
}, },
renderMenuItem: function (h, menu, pIndex, index) { renderMenuItem: function (h, menu, pIndex, index) {
const target = menu.meta.target || null const target = menu.meta.target || null
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [ return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [ h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
this.renderIcon(h, menu.meta.icon), this.renderIcon(h, menu.meta.icon),
h('span', [menu.meta.title]) h('span', [menu.meta.title])
]) ])
]) ])
}, },
renderSubMenu: function (h, menu, pIndex, index) { renderSubMenu: function (h, menu, pIndex, index) {
const this2_ = this const this2_ = this
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])] const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
const itemArr = [] const itemArr = []
const pIndex_ = pIndex + '_' + index const pIndex_ = pIndex + '_' + index
console.log('menu', menu) if (!menu.hideChildrenInMenu) {
if (!menu.hideChildrenInMenu) { menu.children.forEach(function (item, i) {
menu.children.forEach(function (item, i) { itemArr.push(this2_.renderItem(h, item, pIndex_, i))
itemArr.push(this2_.renderItem(h, item, pIndex_, i)) })
}) }
} return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr)) },
}, renderItem: function (h, menu, pIndex, index) {
renderItem: function (h, menu, pIndex, index) { if (!menu.hidden) {
if (!menu.hidden) { return menu.children && !menu.hideChildrenInMenu
return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(h, menu, pIndex, index)
? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
: this.renderMenuItem(h, menu, pIndex, index) }
} },
}, renderMenu: function (h, menuTree) {
renderMenu: function (h, menuTree) { const this2_ = this
const this2_ = this const menuArr = []
const menuArr = [] menuTree.forEach(function (menu, i) {
menuTree.forEach(function (menu, i) { if (!menu.hidden) {
if (!menu.hidden) { menuArr.push(this2_.renderItem(h, menu, '0', i))
menuArr.push(this2_.renderItem(h, menu, '0', i)) }
} })
}) return menuArr
return menuArr },
}, onOpenChange (openKeys) {
onOpenChange (openKeys) { const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)) if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
if (!this.rootSubmenuKeys.includes(latestOpenKey)) { this.openKeys = openKeys
this.openKeys = openKeys } else {
} else { this.openKeys = latestOpenKey ? [latestOpenKey] : []
this.openKeys = latestOpenKey ? [latestOpenKey] : [] }
} },
}, updateMenu () {
updateMenu () { const routes = this.$route.matched.concat()
const routes = this.$route.matched.concat()
if (routes.length >= 4 && this.$route.meta.hidden) {
if (routes.length >= 4 && this.$route.meta.hidden) { routes.pop()
routes.pop() this.selectedKeys = [routes[2].path]
this.selectedKeys = [routes[2].path] } else {
} else { this.selectedKeys = [routes.pop().path]
this.selectedKeys = [routes.pop().path] }
}
const openKeys = []
const openKeys = [] if (this.mode === 'inline') {
if (this.mode === 'inline') { routes.forEach(item => {
routes.forEach(item => { openKeys.push(item.path)
openKeys.push(item.path) })
}) }
}
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) }
} },
}, render (h) {
render (h) { return h(
return h( Menu,
Menu, {
{ props: {
props: { theme: this.$props.theme,
theme: this.$props.theme, mode: this.$props.mode,
mode: this.$props.mode, openKeys: this.openKeys,
openKeys: this.openKeys, selectedKeys: this.selectedKeys
selectedKeys: this.selectedKeys },
}, on: {
on: { openChange: this.onOpenChange,
openChange: this.onOpenChange, select: obj => {
select: obj => { this.selectedKeys = obj.selectedKeys
this.selectedKeys = obj.selectedKeys this.$emit('select', obj)
this.$emit('select', obj) }
} }
} },
}, this.renderMenu(h, this.menu)
this.renderMenu(h, this.menu) )
) }
} }
}
src/views/list/TableInnerEditList.vue
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="规则编号"> <a-form-item label="规则编号">
<a-input placeholder=""/> <a-input placeholder=""/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select placeholder="请选择" default-value="0"> <a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<template v-if="advanced"> <template v-if="advanced">
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="调用次数"> <a-form-item label="调用次数">
<a-input-number style="width: 100%"/> <a-input-number style="width: 100%"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="更新日期"> <a-form-item label="更新日期">
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/> <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select placeholder="请选择" default-value="0"> <a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<a-form-item label="使用状态"> <a-form-item label="使用状态">
<a-select placeholder="请选择" default-value="0"> <a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option> <a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option> <a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option> <a-select-option value="2">运行中</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</template> </template>
<a-col :md="!advanced && 8 || 24" :sm="24"> <a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} "> <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary">查询</a-button> <a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px">重置</a-button> <a-button style="margin-left: 8px">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px"> <a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }} {{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/> <a-icon :type="advanced ? 'up' : 'down'"/>
</a> </a>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<div class="table-operator"> <div class="table-operator">
<a-button type="primary" icon="plus">新建</a-button> <a-button type="primary" icon="plus">新建</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0"> <a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item> <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock --> <!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item> <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu> </a-menu>
<a-button style="margin-left: 8px"> <a-button style="margin-left: 8px">
批量操作 <a-icon type="down" /> 批量操作 <a-icon type="down" />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</div> </div>
<s-table <s-table
ref="table" ref="table"
size="default" size="default"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:alert="{ show: true, clear: true }" :alert="{ show: true, clear: true }"
:rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }" :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
> >
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index"> <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
<div :key="index"> <div :key="index">
<a-input <a-input
v-if="record.editable" v-if="record.editable"
style="margin: -5px 0" style="margin: -5px 0"
:value="text" :value="text"
@change="e => handleChange(e.target.value, record.key, col, record)" @change="e => handleChange(e.target.value, record.key, col, record)"
/> />
<template v-else>{{ text }}</template> <template v-else>{{ text }}</template>
</div> </div>
</template> </template>
<template slot="action" slot-scope="text, record, index"> <template slot="action" slot-scope="text, record, index">
<div class="editable-row-operations"> <a-switch checkedChildren="开" unCheckedChildren="关" @change="(checked) => switchChange(checked, record)"></a-switch>
<span v-if="record.editable"> <div class="editable-row-operations">
<a @click="() => save(record)">保存</a> <span v-if="record.editable">
<a-divider type="vertical" /> <a @click="() => save(record)">保存</a>
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)"> <a-divider type="vertical" />
<a>取消</a> <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
</a-popconfirm> <a>取消</a>
</span> </a-popconfirm>
<span v-else> </span>
<a class="edit" @click="() => edit(record)">修改</a> <span v-else>
<a-divider type="vertical" /> <a class="edit" @click="() => edit(record)">修改</a>
<a class="delete" @click="() => del(record)">删除</a> <a-divider type="vertical" />
</span> <a class="delete" @click="() => del(record)">删除</a>
</div> </span>
</template> </div>
</s-table> </template>
</s-table>
</a-card>
</template> </a-card>
</template>
<script>
import STable from '@/components/table/' <script>
import STable from '@/components/table/'
export default {
name: 'TableList', export default {
components: { name: 'TableList',
STable components: {
}, STable
data () { },
return { data () {
// 高级搜索 展开/关闭 return {
advanced: false, // 高级搜索 展开/关闭
// 查询参数 advanced: false,
queryParam: {}, // 查询参数
// 表头 queryParam: {},
columns: [ // 表头
{ columns: [
title: '规则编号', {
dataIndex: 'no', title: '规则编号',
width: 90 dataIndex: 'no',
}, width: 90
{ },
title: '描述', {
dataIndex: 'description', title: '描述',
scopedSlots: { customRender: 'description' } dataIndex: 'description',
}, scopedSlots: { customRender: 'description' }
{ },
title: '服务调用次数', {
dataIndex: 'callNo', title: '服务调用次数',
width: '150px', dataIndex: 'callNo',
sorter: true, width: '150px',
needTotal: true, sorter: true,
scopedSlots: { customRender: 'callNo' } needTotal: true,
// customRender: (text) => text + ' 次' scopedSlots: { customRender: 'callNo' }
}, // customRender: (text) => text + ' 次'
{ },
title: '状态', {
dataIndex: 'status', title: '状态',
width: '100px', dataIndex: 'status',
needTotal: true, width: '100px',
scopedSlots: { customRender: 'status' } needTotal: true,
}, scopedSlots: { customRender: 'status' }
{ },
title: '更新时间', {
dataIndex: 'updatedAt', title: '更新时间',
width: '200px', dataIndex: 'updatedAt',
sorter: true, width: '200px',
scopedSlots: { customRender: 'updatedAt' } sorter: true,
}, scopedSlots: { customRender: 'updatedAt' }
{ },
table: '操作', {
dataIndex: 'action', table: '操作',
width: '120px', dataIndex: 'action',
scopedSlots: { customRender: 'action' } width: '120px',
} scopedSlots: { customRender: 'action' }
], }
// 加载数据方法 必须为 Promise 对象 ],
loadData: parameter => { // 加载数据方法 必须为 Promise 对象
return this.$http.get('/service', { loadData: parameter => {
params: Object.assign(parameter, this.queryParam) return this.$http.get('/service', {
}).then(res => { params: Object.assign(parameter, this.queryParam)
return res.result }).then(res => {
}) return res.result
}, })
},
selectedRowKeys: [],
selectedRows: [] selectedRowKeys: [],
} selectedRows: []
}, }
methods: { },
methods: {
handleChange (value, key, column, record) {
console.log(value, key, column) handleChange (value, key, column, record) {
record[column.dataIndex] = value console.log(value, key, column)
}, record[column.dataIndex] = value
edit (row) { },
row.editable = true edit (row) {
// row = Object.assign({}, row) row.editable = true
}, // row = Object.assign({}, row)
// eslint-disable-next-line },
del (row) { // eslint-disable-next-line
this.$confirm({ del (row) {
title: '警告', this.$confirm({
content: `真的要删除 ${row.no} 吗?`, title: '警告',
okText: '删除', content: `真的要删除 ${row.no} 吗?`,
okType: 'danger', okText: '删除',
cancelText: '取消', okType: 'danger',
onOk () { cancelText: '取消',
console.log('OK') onOk () {
// 在这里调用删除接口 console.log('OK')
return new Promise((resolve, reject) => { // 在这里调用删除接口
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000) return new Promise((resolve, reject) => {
}).catch(() => console.log('Oops errors!')) setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
}, }).catch(() => console.log('Oops errors!'))
onCancel () { },
console.log('Cancel') onCancel () {
} console.log('Cancel')
}) }
}, })
save (row) { },
row.editable = false save (row) {
}, row.editable = false
cancel (row) { },
row.editable = false cancel (row) {
}, row.editable = false
},
onSelectChange (selectedRowKeys, selectedRows) { switchChange (checked, record) {
this.selectedRowKeys = selectedRowKeys console.log('checked', checked, record)
this.selectedRows = selectedRows },
},
toggleAdvanced () { onSelectChange (selectedRowKeys, selectedRows) {
this.advanced = !this.advanced this.selectedRowKeys = selectedRowKeys
} this.selectedRows = selectedRows
}, },
watch: { toggleAdvanced () {
/* this.advanced = !this.advanced
'selectedRows': function (selectedRows) { }
this.needTotalList = this.needTotalList.map(item => { },
return { watch: {
...item, /*
total: selectedRows.reduce( (sum, val) => { 'selectedRows': function (selectedRows) {
return sum + val[item.dataIndex] this.needTotalList = this.needTotalList.map(item => {
}, 0) return {
} ...item,
}) total: selectedRows.reduce( (sum, val) => {
} return sum + val[item.dataIndex]
*/ }, 0)
} }
} })
</script> }
*/
<style lang="less" scoped> }
.search { }
margin-bottom: 54px; </script>
}
<style lang="less" scoped>
.fold { .search {
width: calc(100% - 216px); margin-bottom: 54px;
display: inline-block }
}
.fold {
.operator { width: calc(100% - 216px);
margin-bottom: 18px; display: inline-block
} }
@media screen and (max-width: 900px) { .operator {
.fold { margin-bottom: 18px;
width: 100%; }
}
} @media screen and (max-width: 900px) {
</style> .fold {
width: 100%;
}
}
</style>
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