Commit 8a85f1ed by Sendya

fix: inner edit table delete func

parent 94fe1237
<template> <template>
<a-locale-provider :locale="locale"> <a-locale-provider :locale="locale">
<div id="app"> <div id="app">
<router-view/> <router-view/>
</div> </div>
</a-locale-provider> </a-locale-provider>
</template> </template>
<script> <script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN' import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device' import enquireScreen from '@/utils/device'
export default { export default {
data () { data () {
return { return {
locale: zhCN, locale: zhCN,
} }
}, },
created () { created () {
let that = this let that = this
enquireScreen(deviceType => { enquireScreen(deviceType => {
console.log('deviceType', deviceType) // tablet
// tablet if (deviceType === 0) {
if (deviceType === 0) { that.$store.commit('TOGGLE_DEVICE', 'tablet')
that.$store.commit('TOGGLE_DEVICE', 'tablet') that.$store.commit('CLOSE_SIDEBAR', false)
that.$store.commit('CLOSE_SIDEBAR', false) }
} // mobile
// mobile else if (deviceType === 1) {
else if (deviceType === 1) { that.$store.commit('TOGGLE_DEVICE', 'mobile')
that.$store.commit('TOGGLE_DEVICE', 'mobile') that.$store.commit('CLOSE_SIDEBAR', false)
that.$store.commit('CLOSE_SIDEBAR', false) }
} else {
else { that.$store.commit('TOGGLE_DEVICE', 'desktop')
that.$store.commit('TOGGLE_DEVICE', 'desktop') that.$store.commit('TOGGLE_SIDEBAR', true)
that.$store.commit('TOGGLE_SIDEBAR', true) }
}
})
}) }
} }
} </script>
</script> <style>
<style> #app {
#app { height: 100%;
height: 100%; }
}
</style> </style>
\ No newline at end of file
<template> <template>
<div :style="{ padding: '0 0 32px 32px' }"> <div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart <v-chart
height="254" height="254"
:data="data" :data="data"
:scale="scale" :scale="scale"
:forceFit="true" :forceFit="true"
:padding="['auto', 'auto', '40', '50']"> :padding="['auto', 'auto', '40', '50']">
<v-tooltip /> <v-tooltip />
<v-axis /> <v-axis />
<v-bar position="x*y"/> <v-bar position="x*y"/>
</v-chart> </v-chart>
</div> </div>
</template> </template>
<script> <script>
const tooltip = [ const tooltip = [
'x*y', 'x*y',
(x, y) => ({ (x, y) => ({
name: x, name: x,
value: y value: y
}) })
] ]
const scale = [{ const scale = [{
dataKey: 'x', dataKey: 'x',
title: '日期(天)', title: '日期(天)',
alias: '日期(天)', alias: '日期(天)',
min: 2 min: 2
}, { }, {
dataKey: 'y', dataKey: 'y',
title: '流量(Gb)', title: '流量(Gb)',
alias: '流量(Gb)', alias: '流量(Gb)',
min: 1 min: 1
}] }]
export default { export default {
name: "Bar", name: "Bar",
props: ['title'], props: {
data () { title: {
return { type: String,
data: [], default: ''
scale, }
tooltip },
} data () {
}, return {
created () { data: [],
this.getMonthBar() scale,
}, tooltip
methods: { }
getMonthBar() { },
this.$http.get('/analysis/month-bar') created () {
.then(res => { this.getMonthBar()
this.data = res.result },
}) methods: {
} getMonthBar() {
} this.$http.get('/analysis/month-bar')
} .then(res => {
this.data = res.result
})
}
}
}
</script> </script>
\ No newline at end of file
<template> <template>
<a-layout class="layout"> <a-layout class="layout">
<a-drawer v-if="device === 'mobile'" <a-drawer
wrapClassName="drawer-sider" v-if="device === 'mobile'"
placement="left" wrapClassName="drawer-sider"
@close="() => this.collapsed = false" placement="left"
:closable="false" @close="() => this.collapsed = false"
:visible="collapsed" :closable="false"
> :visible="collapsed"
>
<sider-menu <sider-menu
mode="inline" mode="inline"
:menus="menus" :menus="menus"
...@@ -43,8 +44,8 @@ ...@@ -43,8 +44,8 @@
import SiderMenu from '@/components/menu/SiderMenu' import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from './LayoutHeader' import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter' import LayoutFooter from './LayoutFooter'
import { asyncRouterMap } from '@/router/index' import {asyncRouterMap} from '@/router/index'
import { mapState } from 'vuex' import {mapState} from 'vuex'
export default { export default {
name: "LayoutView", name: "LayoutView",
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
LayoutHeader, LayoutHeader,
LayoutFooter LayoutFooter
}, },
data () { data() {
return { return {
// light, dark // light, dark
menuTheme: 'light', menuTheme: 'light',
...@@ -63,10 +64,8 @@ ...@@ -63,10 +64,8 @@
menus: [] menus: []
} }
}, },
created () { created() {
this.menus = asyncRouterMap this.menus = asyncRouterMap
console.log( this.collapsed )
}, },
computed: { computed: {
...mapState({ ...mapState({
...@@ -76,7 +75,7 @@ ...@@ -76,7 +75,7 @@
}) })
}, },
methods: { methods: {
toggle () { toggle() {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
}, },
} }
...@@ -238,6 +237,7 @@ ...@@ -238,6 +237,7 @@
.table-alert { .table-alert {
margin-bottom: 16px; margin-bottom: 16px;
} }
.content { .content {
.search { .search {
......
<template>
<a-layout-sider
:class="['sider', isMobile ? null : 'shadow', theme ]"
width="256px"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
<div class="logo">
<router-link :to="{name:'dashboard'}">
<img src="~@/assets/logo.svg" alt="logo">
<h1>Ant Design Pro</h1>
</router-link>
</div>
<s-menu
:collapsed="collapsed"
:menu="menus"
:theme="theme"
@select="onSelect"
:mode="mode"
style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
</template>
<script>
import ALayoutSider from "ant-design-vue/es/layout/Sider"
import SMenu from './index'
export default {
name: "SiderMenu",
components: { ALayoutSider, SMenu },
props: {
mode: {
type: String,
required: false,
default: 'inline'
},
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
default: false
},
collapsed: {
type: Boolean,
required: false,
default: false
},
menus: {
type: Array,
required: true
}
},
created () {
},
computed: {
isMobile () {
return this.$store.state.app.device !== 'desktop'
}
},
methods: {
onSelect (obj) {
this.$emit('menuSelect', obj)
}
}
}
</script>
\ No newline at end of file
<template>
<a-menu
theme="dark"
mode="inline"
:defaultSelectedKeys="['1']">
<template v-for="menu in menus">
<s-submenu :menu="menu" :key="menu.id"></s-submenu>
</template>
</a-menu>
</template>
<script>
import SubMenu from './SubMenu'
import { asyncRouterMap } from '../../router/index'
export default {
name: "NavMenu",
components: {
"s-submenu": SubMenu
},
data() {
return {
menus: []
}
},
created() {
this.menus = asyncRouterMap
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-menu-item :key="menu.id" v-if="!menu.children && $router.matcher.match({ name: menu.permission }).matched.length">
<router-link :to="{ name: menu.name, params: { pageNo: '1' } }">
<a-icon v-if="menu.meta.icon" :type="menu.meta.icon"></a-icon>
<span>{{ menu.meta.title }}</span>
</router-link>
</a-menu-item>
<a-sub-menu :key="menu.id" v-else>
<span slot="title"><a-icon :type="menu.meta.icon" v-if="menu.meta.icon" /><span>{{ menu.meta.title }}</span></span>
<template v-for="submenu in menu.children">
<s-submenu :key="submenu.id" :menu="submenu"></s-submenu>
</template>
</a-sub-menu>
</template>
<script>
import SubMenu from './SubMenu'
export default {
name: "SubMenu",
components: {
"s-submenu": SubMenu
},
props: {
menu: {},
collapsed: {
type: Boolean,
default: false
}
}
}
</script>
\ No newline at end of file
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
size="default" size="default"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:showAlertInfo="true"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
> >
<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">
...@@ -107,9 +108,9 @@ ...@@ -107,9 +108,9 @@
</a-popconfirm> </a-popconfirm>
</span> </span>
<span v-else> <span v-else>
<a @click="() => edit(record, index)">修改</a> <a class="edit" @click="() => edit(record)">修改</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a @click="() => delete(record, index)">删除</a> <a class="delete" @click="() => del(record)">删除</a>
</span> </span>
</div> </div>
</template> </template>
...@@ -194,9 +195,29 @@ ...@@ -194,9 +195,29 @@
}, },
edit (row) { edit (row) {
row.editable = true row.editable = true
row = Object.assign({}, row) // row = Object.assign({}, row)
this.$refs.table.updateEdit() 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) { save (row) {
delete row.editable delete row.editable
this.$refs.table.updateEdit() this.$refs.table.updateEdit()
......
...@@ -19,13 +19,17 @@ ...@@ -19,13 +19,17 @@
<div class="title">退货商品</div> <div class="title">退货商品</div>
<s-table <s-table
style="margin-bottom: 24px" :columns="goodsColumns" :data="loadGoodsData"> style="margin-bottom: 24px"
:columns="goodsColumns"
:data="loadGoodsData">
</s-table> </s-table>
<div class="title">退货进度</div> <div class="title">退货进度</div>
<s-table <s-table
style="margin-bottom: 24px" :columns="scheduleColumns" :data="loadScheduleData"> style="margin-bottom: 24px"
:columns="scheduleColumns"
:data="loadScheduleData">
<template <template
slot="status" slot="status"
...@@ -91,7 +95,7 @@ ...@@ -91,7 +95,7 @@
} }
], ],
// 加载数据方法 必须为 Promise 对象 // 加载数据方法 必须为 Promise 对象
loadGoodsData: parameter => { loadGoodsData: () => {
return new Promise((resolve => { return new Promise((resolve => {
resolve({ resolve({
data: [ data: [
...@@ -166,7 +170,7 @@ ...@@ -166,7 +170,7 @@
key: 'cost' key: 'cost'
} }
], ],
loadScheduleData: parameter => { loadScheduleData: () => {
return new Promise((resolve => { return new Promise((resolve => {
resolve({ resolve({
data: [ data: [
......
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