【modify】使用ESLint格式化代码
This commit is contained in:
zer0Black
+29
-29
@@ -100,41 +100,41 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
// @ is an alias to /src
|
||||
|
||||
import Trend from '@/components/Trend'
|
||||
import AvatarList from '@/components/AvatarList'
|
||||
import CountDown from '@/components/CountDown/CountDown'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
import Trend from '@/components/Trend'
|
||||
import AvatarList from '@/components/AvatarList'
|
||||
import CountDown from '@/components/CountDown/CountDown'
|
||||
import Ellipsis from '@/components/Ellipsis'
|
||||
|
||||
const AvatarListItem = AvatarList.AvatarItem
|
||||
const AvatarListItem = AvatarList.AvatarItem
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
Ellipsis,
|
||||
CountDown,
|
||||
Trend,
|
||||
AvatarList,
|
||||
AvatarListItem
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
Ellipsis,
|
||||
CountDown,
|
||||
Trend,
|
||||
AvatarList,
|
||||
AvatarListItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
targetTime: new Date().getTime() + 3900000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEndHandle () {
|
||||
this.$message.success('CountDown callback!!!')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
targetTime: new Date().getTime() + 3900000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEndHandle () {
|
||||
this.$message.success('CountDown callback!!!')
|
||||
},
|
||||
onEndHandle2 () {
|
||||
this.$notification.open({
|
||||
message: 'Notification Title',
|
||||
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
}
|
||||
onEndHandle2 () {
|
||||
this.$notification.open({
|
||||
message: 'Notification Title',
|
||||
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -85,100 +85,99 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from "@/components/layouts/RouteView"
|
||||
import { AppPage, ArticlePage, ProjectPage } from './page'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage';
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from '@/components/layouts/RouteView'
|
||||
import { AppPage, ArticlePage, ProjectPage } from './page'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
AppPage,
|
||||
ArticlePage,
|
||||
ProjectPage
|
||||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
AppPage,
|
||||
ArticlePage,
|
||||
ProjectPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
|
||||
|
||||
tagInputVisible: false,
|
||||
tagInputValue: '',
|
||||
|
||||
teams: [],
|
||||
teamSpinning: true,
|
||||
|
||||
tabListNoTitle: [{
|
||||
key: 'article',
|
||||
tab: '文章(8)'
|
||||
}, {
|
||||
key: 'app',
|
||||
tab: '应用(8)'
|
||||
}, {
|
||||
key: 'project',
|
||||
tab: '项目(8)'
|
||||
}
|
||||
],
|
||||
noTitleKey: 'app'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTeams()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['nickname', 'avatar']),
|
||||
getAvatar () {
|
||||
return getFileAccessHttpUrl(this.avatar())
|
||||
},
|
||||
getTeams () {
|
||||
this.$http.get('/mock/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
this.teamSpinning = false
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
|
||||
|
||||
handleTabChange (key, type) {
|
||||
this[type] = key
|
||||
},
|
||||
|
||||
handleTagClose (removeTag) {
|
||||
const tags = this.tags.filter(tag => tag != removeTag)
|
||||
this.tags = tags
|
||||
},
|
||||
|
||||
showTagInput () {
|
||||
this.tagInputVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tagInput.focus()
|
||||
})
|
||||
},
|
||||
|
||||
handleInputChange (e) {
|
||||
this.tagInputValue = e.target.value
|
||||
},
|
||||
|
||||
handleTagInputConfirm () {
|
||||
const inputValue = this.tagInputValue
|
||||
let tags = this.tags
|
||||
if (inputValue && tags.indexOf(inputValue) === -1) {
|
||||
tags = [...tags, inputValue]
|
||||
}
|
||||
|
||||
Object.assign(this, {
|
||||
tags,
|
||||
tagInputVisible: false,
|
||||
tagInputValue: '',
|
||||
|
||||
teams: [],
|
||||
teamSpinning: true,
|
||||
|
||||
tabListNoTitle: [{
|
||||
key: 'article',
|
||||
tab: '文章(8)',
|
||||
}, {
|
||||
key: 'app',
|
||||
tab: '应用(8)',
|
||||
}, {
|
||||
key: 'project',
|
||||
tab: '项目(8)',
|
||||
}
|
||||
],
|
||||
noTitleKey: 'app',
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTeams()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(["nickname", "avatar"]),
|
||||
getAvatar(){
|
||||
return getFileAccessHttpUrl(this.avatar());
|
||||
},
|
||||
getTeams() {
|
||||
this.$http.get('/mock/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
this.teamSpinning = false
|
||||
})
|
||||
},
|
||||
|
||||
handleTabChange (key, type) {
|
||||
this[type] = key
|
||||
},
|
||||
|
||||
handleTagClose (removeTag) {
|
||||
const tags = this.tags.filter(tag => tag != removeTag)
|
||||
this.tags = tags
|
||||
},
|
||||
|
||||
showTagInput () {
|
||||
this.tagInputVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tagInput.focus()
|
||||
})
|
||||
},
|
||||
|
||||
handleInputChange (e) {
|
||||
this.tagInputValue = e.target.value
|
||||
},
|
||||
|
||||
handleTagInputConfirm () {
|
||||
const inputValue = this.tagInputValue
|
||||
let tags = this.tags
|
||||
if (inputValue && tags.indexOf(inputValue) === -1) {
|
||||
tags = [...tags, inputValue]
|
||||
}
|
||||
|
||||
Object.assign(this, {
|
||||
tags,
|
||||
tagInputVisible: false,
|
||||
tagInputValue: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
tagInputValue: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -283,4 +282,4 @@
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -58,25 +58,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 11; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
activeUser: 17,
|
||||
newUser: 1700
|
||||
})
|
||||
}
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 11; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
activeUser: 17,
|
||||
newUser: 1700
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dataSource,
|
||||
}
|
||||
export default {
|
||||
name: 'Article',
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -110,4 +110,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -7,18 +7,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AList from 'ant-design-vue/es/list'
|
||||
import AListItem from 'ant-design-vue/es/list/Item'
|
||||
import AList from 'ant-design-vue/es/list'
|
||||
import AListItem from 'ant-design-vue/es/list/Item'
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
components: {
|
||||
AList,
|
||||
AListItem
|
||||
}
|
||||
export default {
|
||||
name: 'Article',
|
||||
components: {
|
||||
AList,
|
||||
AListItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Project"
|
||||
}
|
||||
export default {
|
||||
name: 'Project'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,4 +2,4 @@ import AppPage from './App'
|
||||
import ArticlePage from './Article'
|
||||
import ProjectPage from './Project'
|
||||
|
||||
export { AppPage, ArticlePage, ProjectPage }
|
||||
export { AppPage, ArticlePage, ProjectPage }
|
||||
|
||||
@@ -28,59 +28,57 @@
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
id: null,
|
||||
confirmLoading: false,
|
||||
|
||||
options: {
|
||||
img: '/avatar2.jpg',
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
previews: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
edit(id) {
|
||||
this.visible = true;
|
||||
this.id = id;
|
||||
/* 获取原始头像 */
|
||||
export default {
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
id: null,
|
||||
confirmLoading: false,
|
||||
|
||||
options: {
|
||||
img: '/avatar2.jpg',
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
close() {
|
||||
this.id = null;
|
||||
this.visible = false;
|
||||
},
|
||||
cancelHandel() {
|
||||
this.close();
|
||||
},
|
||||
okHandel() {
|
||||
const vm = this
|
||||
|
||||
vm.confirmLoading = true
|
||||
setTimeout(() => {
|
||||
vm.confirmLoading = false
|
||||
vm.close()
|
||||
vm.$message.success('上传头像成功');
|
||||
}, 2000)
|
||||
|
||||
},
|
||||
|
||||
realTime(data) {
|
||||
this.previews = data
|
||||
}
|
||||
previews: {}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
edit (id) {
|
||||
this.visible = true
|
||||
this.id = id
|
||||
/* 获取原始头像 */
|
||||
},
|
||||
close () {
|
||||
this.id = null
|
||||
this.visible = false
|
||||
},
|
||||
cancelHandel () {
|
||||
this.close()
|
||||
},
|
||||
okHandel () {
|
||||
const vm = this
|
||||
|
||||
vm.confirmLoading = true
|
||||
setTimeout(() => {
|
||||
vm.confirmLoading = false
|
||||
vm.close()
|
||||
vm.$message.success('上传头像成功')
|
||||
}, 2000)
|
||||
},
|
||||
|
||||
realTime (data) {
|
||||
this.previews = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -100,4 +98,4 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -70,37 +70,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvatarModal from './AvatarModal'
|
||||
import AvatarModal from './AvatarModal'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AvatarModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// cropper
|
||||
preview: {},
|
||||
option: {
|
||||
img: '/avatar2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 180,
|
||||
autoCropHeight: 180,
|
||||
fixedBox: true,
|
||||
// 开启宽度和高度比例
|
||||
fixed: true,
|
||||
fixedNumber: [1, 1]
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
AvatarModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// cropper
|
||||
preview: {},
|
||||
option: {
|
||||
img: '/avatar2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 180,
|
||||
autoCropHeight: 180,
|
||||
fixedBox: true,
|
||||
// 开启宽度和高度比例
|
||||
fixed: true,
|
||||
fixedNumber: [1, 1]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -158,4 +158,4 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -8,18 +8,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,75 +1,75 @@
|
||||
<script>
|
||||
import { colorList } from '@/components/tools/setting'
|
||||
import ASwitch from 'ant-design-vue/es/switch'
|
||||
import AList from "ant-design-vue/es/list"
|
||||
import AListItem from "ant-design-vue/es/list/Item"
|
||||
import { mixin } from '@/utils/mixin.js'
|
||||
import { colorList } from '@/components/tools/setting'
|
||||
import ASwitch from 'ant-design-vue/es/switch'
|
||||
import AList from 'ant-design-vue/es/list'
|
||||
import AListItem from 'ant-design-vue/es/list/Item'
|
||||
import { mixin } from '@/utils/mixin.js'
|
||||
|
||||
const Meta = AListItem.Meta
|
||||
const Meta = AListItem.Meta
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AListItem,
|
||||
AList,
|
||||
ASwitch,
|
||||
Meta
|
||||
},
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
themeFilter(theme) {
|
||||
const themeMap = {
|
||||
'dark': '暗色',
|
||||
'light': '白色'
|
||||
}
|
||||
return themeMap[theme]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
colorFilter(color) {
|
||||
const c = colorList.filter(o => o.color === color)[0]
|
||||
return c && c.key
|
||||
},
|
||||
|
||||
onChange (checked) {
|
||||
if (checked) {
|
||||
this.$store.dispatch('ToggleTheme', 'dark')
|
||||
} else {
|
||||
this.$store.dispatch('ToggleTheme', 'light')
|
||||
}
|
||||
}
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<AList itemLayout="horizontal">
|
||||
<AListItem>
|
||||
<Meta>
|
||||
<a slot="title">风格配色</a>
|
||||
<span slot="description">
|
||||
整体风格配色设置
|
||||
</span>
|
||||
</Meta>
|
||||
<div slot="actions">
|
||||
<ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
|
||||
</div>
|
||||
</AListItem>
|
||||
<AListItem>
|
||||
<Meta>
|
||||
<a slot="title">主题色</a>
|
||||
<span slot="description">
|
||||
页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
|
||||
</span>
|
||||
</Meta>
|
||||
</AListItem>
|
||||
</AList>
|
||||
)
|
||||
export default {
|
||||
components: {
|
||||
AListItem,
|
||||
AList,
|
||||
ASwitch,
|
||||
Meta
|
||||
},
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
themeFilter (theme) {
|
||||
const themeMap = {
|
||||
dark: '暗色',
|
||||
light: '白色'
|
||||
}
|
||||
return themeMap[theme]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
colorFilter (color) {
|
||||
const c = colorList.filter(o => o.color === color)[0]
|
||||
return c && c.key
|
||||
},
|
||||
|
||||
onChange (checked) {
|
||||
if (checked) {
|
||||
this.$store.dispatch('ToggleTheme', 'dark')
|
||||
} else {
|
||||
this.$store.dispatch('ToggleTheme', 'light')
|
||||
}
|
||||
}
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<AList itemLayout="horizontal">
|
||||
<AListItem>
|
||||
<Meta>
|
||||
<a slot="title">风格配色</a>
|
||||
<span slot="description">
|
||||
整体风格配色设置
|
||||
</span>
|
||||
</Meta>
|
||||
<div slot="actions">
|
||||
<ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
|
||||
</div>
|
||||
</AListItem>
|
||||
<AListItem>
|
||||
<Meta>
|
||||
<a slot="title">主题色</a>
|
||||
<span slot="description">
|
||||
页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
|
||||
</span>
|
||||
</Meta>
|
||||
</AListItem>
|
||||
</AList>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -45,118 +45,118 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from "@/components/layouts/RouteView"
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import security from './Security'
|
||||
import baseSetting from './BaseSetting'
|
||||
import custom from './Custom'
|
||||
import notification from './Notification'
|
||||
import binding from './Binding'
|
||||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
security,
|
||||
baseSetting,
|
||||
custom,
|
||||
notification,
|
||||
binding
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
// horizontal inline
|
||||
mode: 'inline',
|
||||
mainInfoHeight:"100%",
|
||||
openKeys: [],
|
||||
defaultSelectedKeys: [],
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from '@/components/layouts/RouteView'
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import security from './Security'
|
||||
import baseSetting from './BaseSetting'
|
||||
import custom from './Custom'
|
||||
import notification from './Notification'
|
||||
import binding from './Binding'
|
||||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
security,
|
||||
baseSetting,
|
||||
custom,
|
||||
notification,
|
||||
binding
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
// horizontal inline
|
||||
mode: 'inline',
|
||||
mainInfoHeight: '100%',
|
||||
openKeys: [],
|
||||
defaultSelectedKeys: [],
|
||||
|
||||
// cropper
|
||||
preview: {},
|
||||
option: {
|
||||
img: '/avatar2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 180,
|
||||
autoCropHeight: 180,
|
||||
fixedBox: true,
|
||||
// 开启宽度和高度比例
|
||||
fixed: true,
|
||||
fixedNumber: [1, 1]
|
||||
},
|
||||
// cropper
|
||||
preview: {},
|
||||
option: {
|
||||
img: '/avatar2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 180,
|
||||
autoCropHeight: 180,
|
||||
fixedBox: true,
|
||||
// 开启宽度和高度比例
|
||||
fixed: true,
|
||||
fixedNumber: [1, 1]
|
||||
},
|
||||
|
||||
pageTitle: '',
|
||||
title:"基本设置",
|
||||
security:false,
|
||||
baseSetting:true,
|
||||
custom:false,
|
||||
notification:false,
|
||||
binding:false
|
||||
}
|
||||
pageTitle: '',
|
||||
title: '基本设置',
|
||||
security: false,
|
||||
baseSetting: true,
|
||||
custom: false,
|
||||
notification: false,
|
||||
binding: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.updateMenu()
|
||||
},
|
||||
mounted () {
|
||||
this.mainInfoHeight = (window.innerHeight - 285) + 'px'
|
||||
},
|
||||
methods: {
|
||||
onOpenChange (openKeys) {
|
||||
this.openKeys = openKeys
|
||||
},
|
||||
created () {
|
||||
this.updateMenu()
|
||||
updateMenu () {
|
||||
const routes = this.$route.matched.concat()
|
||||
this.defaultSelectedKeys = [routes.pop().path]
|
||||
},
|
||||
mounted(){
|
||||
this.mainInfoHeight = (window.innerHeight-285)+"px";
|
||||
// update-begin--Author:wangshuai Date:20200729 for：聚合路由错误 issues#1441--------------------
|
||||
settingsClick () {
|
||||
this.security = false
|
||||
this.custom = false
|
||||
this.notification = false
|
||||
this.binding = false
|
||||
this.baseSetting = true
|
||||
this.title = '基本设置'
|
||||
},
|
||||
methods: {
|
||||
onOpenChange (openKeys) {
|
||||
this.openKeys = openKeys
|
||||
},
|
||||
updateMenu () {
|
||||
let routes = this.$route.matched.concat()
|
||||
this.defaultSelectedKeys = [ routes.pop().path ]
|
||||
},
|
||||
//update-begin--Author:wangshuai Date:20200729 for：聚合路由错误 issues#1441--------------------
|
||||
settingsClick(){
|
||||
this.security=false
|
||||
this.custom=false
|
||||
this.notification=false
|
||||
this.binding=false
|
||||
this.baseSetting=true
|
||||
this.title="基本设置"
|
||||
},
|
||||
securityClick(){
|
||||
this.baseSetting=false
|
||||
this.custom=false;
|
||||
this.notification=false
|
||||
this.binding=false
|
||||
this.security=true
|
||||
this.title="安全设置"
|
||||
},
|
||||
notificationClick(){
|
||||
this.security=false
|
||||
this.custom=false
|
||||
this.baseSetting=false
|
||||
this.binding=false
|
||||
this.notification=true
|
||||
this.title="新消息通知"
|
||||
},
|
||||
bindingClick(){
|
||||
this.security=false
|
||||
this.baseSetting=false
|
||||
this.notification=false;
|
||||
this.custom=false;
|
||||
this.binding=true
|
||||
this.title="账号绑定"
|
||||
},
|
||||
customClick(){
|
||||
this.security=false
|
||||
this.baseSetting=false
|
||||
this.notification=false;
|
||||
this.binding=false
|
||||
this.custom=true;
|
||||
this.title="个性化"
|
||||
}
|
||||
//update-end--Author:wangshuai Date:20200729 for：聚合路由错误 issues#1441--------------------
|
||||
securityClick () {
|
||||
this.baseSetting = false
|
||||
this.custom = false
|
||||
this.notification = false
|
||||
this.binding = false
|
||||
this.security = true
|
||||
this.title = '安全设置'
|
||||
},
|
||||
notificationClick () {
|
||||
this.security = false
|
||||
this.custom = false
|
||||
this.baseSetting = false
|
||||
this.binding = false
|
||||
this.notification = true
|
||||
this.title = '新消息通知'
|
||||
},
|
||||
bindingClick () {
|
||||
this.security = false
|
||||
this.baseSetting = false
|
||||
this.notification = false
|
||||
this.custom = false
|
||||
this.binding = true
|
||||
this.title = '账号绑定'
|
||||
},
|
||||
customClick () {
|
||||
this.security = false
|
||||
this.baseSetting = false
|
||||
this.notification = false
|
||||
this.binding = false
|
||||
this.custom = true
|
||||
this.title = '个性化'
|
||||
}
|
||||
// update-end--Author:wangshuai Date:20200729 for：聚合路由错误 issues#1441--------------------
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -204,4 +204,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -8,18 +8,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -21,21 +21,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{ title: '账户密码' , description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
|
||||
{ title: '密保手机' , description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success'); } } },
|
||||
{ title: '密保问题' , description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error'); } } },
|
||||
{ title: '备用邮箱' , description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning'); } } },
|
||||
{ title: 'MFA 设备' , description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message'); } } },
|
||||
]
|
||||
}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{ title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message') } } },
|
||||
{ title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } },
|
||||
{ title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
|
||||
{ title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
|
||||
{ title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -15,27 +15,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IndexChart from './IndexChart'
|
||||
import IndexTask from "./IndexTask"
|
||||
import IndexBdc from './IndexBdc'
|
||||
|
||||
export default {
|
||||
name: "Analysis",
|
||||
components: {
|
||||
IndexChart,
|
||||
IndexTask,
|
||||
IndexBdc
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indexStyle:1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
import IndexChart from './IndexChart'
|
||||
import IndexTask from './IndexTask'
|
||||
import IndexBdc from './IndexBdc'
|
||||
|
||||
export default {
|
||||
name: 'Analysis',
|
||||
components: {
|
||||
IndexChart,
|
||||
IndexTask,
|
||||
IndexBdc
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
indexStyle: 1
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -166,7 +166,6 @@
|
||||
|
||||
</a-tabs>
|
||||
|
||||
|
||||
</a-card>
|
||||
</a-row>
|
||||
|
||||
@@ -175,275 +174,275 @@
|
||||
|
||||
<script>
|
||||
|
||||
import ACol from "ant-design-vue/es/grid/Col"
|
||||
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import IndexBar from '@/components/chart/IndexBar'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import IndexBar from '@/components/chart/IndexBar'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
|
||||
const jhjgData = [
|
||||
{ type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
|
||||
{ type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
|
||||
{ type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
|
||||
]
|
||||
const jhjgData = [
|
||||
{ type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月': 1300, '8月': 900, '9月': 1000, '10月': 1200, '11月': 600, '12月': 900 },
|
||||
{ type: '税务', '1月': 1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月': 900, '8月': 1100, '9月': 1300, '10月': 2000, '11月': 900, '12月': 1100 },
|
||||
{ type: '不动产', '1月': 2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月': 600, '8月': 1000, '9月': 600, '10月': 1000, '11月': 1500, '12月': 1200 }
|
||||
]
|
||||
|
||||
const jhjgFields=[
|
||||
'1月','2月','3月','4月','5月','6月',
|
||||
'7月','8月','9月','10月','11月','12月'
|
||||
]
|
||||
const jhjgFields = [
|
||||
'1月', '2月', '3月', '4月', '5月', '6月',
|
||||
'7月', '8月', '9月', '10月', '11月', '12月'
|
||||
]
|
||||
|
||||
const xljgData = [
|
||||
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
|
||||
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
|
||||
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
|
||||
const xljgData = [
|
||||
{ type: '一月', 房管: 1.12, 税务: 1.55, 不动产: 1.2 },
|
||||
{ type: '二月', 房管: 1.65, 税务: 1.32, 不动产: 1.42 },
|
||||
{ type: '三月', 房管: 1.85, 税务: 1.1, 不动产: 1.5 },
|
||||
|
||||
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
|
||||
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
|
||||
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
|
||||
{ type: '四月', 房管: 1.33, 税务: 1.63, 不动产: 1.4 },
|
||||
{ type: '五月', 房管: 1.63, 税务: 1.8, 不动产: 1.7 },
|
||||
{ type: '六月', 房管: 1.85, 税务: 1.98, 不动产: 1.8 },
|
||||
|
||||
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
|
||||
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
|
||||
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
|
||||
{ type: '七月', 房管: 1.98, 税务: 1.5, 不动产: 1.76 },
|
||||
{ type: '八月', 房管: 1.48, 税务: 1.2, 不动产: 1.3 },
|
||||
{ type: '九月', 房管: 1.41, 税务: 1.9, 不动产: 1.6 },
|
||||
|
||||
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
|
||||
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
|
||||
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
|
||||
]
|
||||
const xljgFields=["房管","税务","不动产"]
|
||||
{ type: '十月', 房管: 1.1, 税务: 1.1, 不动产: 1.4 },
|
||||
{ type: '十一月', 房管: 1.85, 税务: 1.6, 不动产: 1.5 },
|
||||
{ type: '十二月', 房管: 1.5, 税务: 1.4, 不动产: 1.3 }
|
||||
]
|
||||
const xljgFields = ['房管', '税务', '不动产']
|
||||
|
||||
const dataCol1 = [{
|
||||
title: '业务号',
|
||||
align:"center",
|
||||
dataIndex: 'reBizCode'
|
||||
},{
|
||||
title: '业务类型',
|
||||
align:"center",
|
||||
dataIndex: 'type'
|
||||
},{
|
||||
title: '受理人',
|
||||
align:"center",
|
||||
dataIndex: 'acceptBy'
|
||||
},{
|
||||
title: '受理时间',
|
||||
align:"center",
|
||||
dataIndex: 'acceptDate'
|
||||
},{
|
||||
title: '当前节点',
|
||||
align:"center",
|
||||
dataIndex: 'curNode'
|
||||
},{
|
||||
title: '办理时长',
|
||||
align:"center",
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}];
|
||||
const dataSource1=[
|
||||
{reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
|
||||
{reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
|
||||
{reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
|
||||
{reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
|
||||
{reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
|
||||
{reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||
{reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
|
||||
{reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
|
||||
{reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
|
||||
{reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
|
||||
{reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
|
||||
]
|
||||
const dataCol1 = [{
|
||||
title: '业务号',
|
||||
align: 'center',
|
||||
dataIndex: 'reBizCode'
|
||||
}, {
|
||||
title: '业务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'type'
|
||||
}, {
|
||||
title: '受理人',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptBy'
|
||||
}, {
|
||||
title: '受理时间',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptDate'
|
||||
}, {
|
||||
title: '当前节点',
|
||||
align: 'center',
|
||||
dataIndex: 'curNode'
|
||||
}, {
|
||||
title: '办理时长',
|
||||
align: 'center',
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}]
|
||||
const dataSource1 = [
|
||||
{ reBizCode: '1', type: '转移登记', acceptBy: '张三', acceptDate: '2019-01-22', curNode: '任务分派', flowRate: 60 },
|
||||
{ reBizCode: '2', type: '抵押登记', acceptBy: '李四', acceptDate: '2019-01-23', curNode: '领导审核', flowRate: 30 },
|
||||
{ reBizCode: '3', type: '转移登记', acceptBy: '王武', acceptDate: '2019-01-25', curNode: '任务处理', flowRate: 20 },
|
||||
{ reBizCode: '4', type: '转移登记', acceptBy: '赵楼', acceptDate: '2019-11-22', curNode: '部门审核', flowRate: 80 },
|
||||
{ reBizCode: '5', type: '转移登记', acceptBy: '钱就', acceptDate: '2019-12-12', curNode: '任务分派', flowRate: 90 },
|
||||
{ reBizCode: '6', type: '转移登记', acceptBy: '孙吧', acceptDate: '2019-03-06', curNode: '任务处理', flowRate: 10 },
|
||||
{ reBizCode: '7', type: '抵押登记', acceptBy: '周大', acceptDate: '2019-04-13', curNode: '任务分派', flowRate: 100 },
|
||||
{ reBizCode: '8', type: '抵押登记', acceptBy: '吴二', acceptDate: '2019-05-09', curNode: '任务上报', flowRate: 50 },
|
||||
{ reBizCode: '9', type: '抵押登记', acceptBy: '郑爽', acceptDate: '2019-07-12', curNode: '任务处理', flowRate: 63 },
|
||||
{ reBizCode: '20', type: '抵押登记', acceptBy: '林有', acceptDate: '2019-12-12', curNode: '任务打回', flowRate: 59 },
|
||||
{ reBizCode: '11', type: '转移登记', acceptBy: '码云', acceptDate: '2019-09-10', curNode: '任务签收', flowRate: 87 }
|
||||
]
|
||||
|
||||
const dataCol2 = [{
|
||||
title: '业务号',
|
||||
align:"center",
|
||||
dataIndex: 'reBizCode'
|
||||
},{
|
||||
title: '受理人',
|
||||
align:"center",
|
||||
dataIndex: 'acceptBy'
|
||||
},{
|
||||
title: '发起时间',
|
||||
align:"center",
|
||||
dataIndex: 'acceptDate'
|
||||
},{
|
||||
title: '当前节点',
|
||||
align:"center",
|
||||
dataIndex: 'curNode'
|
||||
},{
|
||||
title: '超时时间',
|
||||
align:"center",
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}];
|
||||
const dataSource2=[
|
||||
{reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
|
||||
{reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
|
||||
{reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
|
||||
{reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
|
||||
{reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
|
||||
{reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||||
{reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
|
||||
{reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
|
||||
{reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
|
||||
{reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
|
||||
{reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
|
||||
]
|
||||
const dataCol2 = [{
|
||||
title: '业务号',
|
||||
align: 'center',
|
||||
dataIndex: 'reBizCode'
|
||||
}, {
|
||||
title: '受理人',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptBy'
|
||||
}, {
|
||||
title: '发起时间',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptDate'
|
||||
}, {
|
||||
title: '当前节点',
|
||||
align: 'center',
|
||||
dataIndex: 'curNode'
|
||||
}, {
|
||||
title: '超时时间',
|
||||
align: 'center',
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}]
|
||||
const dataSource2 = [
|
||||
{ reBizCode: 'A001', type: '转移登记', acceptBy: '张四', acceptDate: '2019-01-22', curNode: '任务分派', flowRate: 12 },
|
||||
{ reBizCode: 'A002', type: '抵押登记', acceptBy: '李吧', acceptDate: '2019-01-23', curNode: '任务签收', flowRate: 3 },
|
||||
{ reBizCode: 'A003', type: '转移登记', acceptBy: '王三', acceptDate: '2019-01-25', curNode: '任务处理', flowRate: 24 },
|
||||
{ reBizCode: 'A004', type: '转移登记', acceptBy: '赵二', acceptDate: '2019-11-22', curNode: '部门审核', flowRate: 10 },
|
||||
{ reBizCode: 'A005', type: '转移登记', acceptBy: '钱大', acceptDate: '2019-12-12', curNode: '任务签收', flowRate: 8 },
|
||||
{ reBizCode: 'A006', type: '转移登记', acceptBy: '孙就', acceptDate: '2019-03-06', curNode: '任务处理', flowRate: 10 },
|
||||
{ reBizCode: 'A007', type: '抵押登记', acceptBy: '周晕', acceptDate: '2019-04-13', curNode: '部门审核', flowRate: 24 },
|
||||
{ reBizCode: 'A008', type: '抵押登记', acceptBy: '吴有', acceptDate: '2019-05-09', curNode: '部门审核', flowRate: 30 },
|
||||
{ reBizCode: 'A009', type: '抵押登记', acceptBy: '郑武', acceptDate: '2019-07-12', curNode: '任务分派', flowRate: 1 },
|
||||
{ reBizCode: 'A0010', type: '抵押登记', acceptBy: '林爽', acceptDate: '2019-12-12', curNode: '部门审核', flowRate: 16 },
|
||||
{ reBizCode: 'A0011', type: '转移登记', acceptBy: '码楼', acceptDate: '2019-09-10', curNode: '部门审核', flowRate: 7 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: "IndexBdc",
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
DashChartDemo,
|
||||
BarMultid,
|
||||
IndexBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
cardCount:{
|
||||
sll:100,
|
||||
bjl:87,
|
||||
isll:15,
|
||||
ibjl:9
|
||||
export default {
|
||||
name: 'IndexBdc',
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
DashChartDemo,
|
||||
BarMultid,
|
||||
IndexBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
cardCount: {
|
||||
sll: 100,
|
||||
bjl: 87,
|
||||
isll: 15,
|
||||
ibjl: 9
|
||||
},
|
||||
|
||||
todaySll: 60,
|
||||
todayBjl: 54,
|
||||
todayISll: 13,
|
||||
todayIBjl: 7,
|
||||
|
||||
chartData: {
|
||||
sll: [],
|
||||
bjl: [],
|
||||
isll: [],
|
||||
ibjl: []
|
||||
},
|
||||
jhjgFields,
|
||||
jhjgData,
|
||||
|
||||
xljgData,
|
||||
xljgFields,
|
||||
|
||||
diskInfo: [
|
||||
{ name: 'C盘', restPPT: 7 },
|
||||
{ name: 'D盘', restPPT: 5 }
|
||||
],
|
||||
|
||||
registerTypeList: [{
|
||||
text: '业务受理'
|
||||
}, {
|
||||
text: '业务管理'
|
||||
}, {
|
||||
text: '文件管理'
|
||||
}, {
|
||||
text: '信息查询'
|
||||
}],
|
||||
|
||||
dataSource1: [],
|
||||
dataSource2: [],
|
||||
columns: dataCol1,
|
||||
columns2: dataCol2,
|
||||
ipagination1: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
|
||||
todaySll:60,
|
||||
todayBjl:54,
|
||||
todayISll:13,
|
||||
todayIBjl:7,
|
||||
|
||||
chartData:{
|
||||
sll:[],
|
||||
bjl:[],
|
||||
isll:[],
|
||||
ibjl:[]
|
||||
},
|
||||
ipagination2: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
jhjgFields,
|
||||
jhjgData,
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
indexRegisterType: '转移登记',
|
||||
indexBottomTab: '1'
|
||||
|
||||
xljgData,
|
||||
xljgFields,
|
||||
|
||||
diskInfo:[
|
||||
{name:"C盘",restPPT:7},
|
||||
{name:"D盘",restPPT:5}
|
||||
],
|
||||
|
||||
registerTypeList:[{
|
||||
text:"业务受理"
|
||||
},{
|
||||
text:"业务管理"
|
||||
},{
|
||||
text:"文件管理"
|
||||
},{
|
||||
text:"信息查询"
|
||||
}],
|
||||
|
||||
dataSource1:[],
|
||||
dataSource2:[],
|
||||
columns:dataCol1,
|
||||
columns2:dataCol2,
|
||||
ipagination1:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0,
|
||||
|
||||
},
|
||||
ipagination2:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0,
|
||||
},
|
||||
indexRegisterType:"转移登记",
|
||||
indexBottomTab:"1"
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goPage(){
|
||||
this.$message.success("根据业务自行处理跳转页面!")
|
||||
},
|
||||
changeRegisterType(e){
|
||||
this.indexRegisterType = e.target.value
|
||||
if(this.indexBottomTab=="1"){
|
||||
this.loadDataSource1()
|
||||
}else{
|
||||
this.loadDataSource2()
|
||||
}
|
||||
},
|
||||
tableChange1(pagination){
|
||||
this.ipagination1.current = pagination.current
|
||||
this.ipagination1.pageSize = pagination.pageSize
|
||||
this.queryTimeoutInfo()
|
||||
},
|
||||
tableChange2(pagination){
|
||||
this.ipagination2.current = pagination.current
|
||||
this.ipagination2.pageSize = pagination.pageSize
|
||||
this.queryNodeTimeoutInfo()
|
||||
},
|
||||
getFlowRateNumber(value){
|
||||
return Number(value)
|
||||
},
|
||||
getPercentFormat(value){
|
||||
if(value==100){
|
||||
return "超时"
|
||||
}else{
|
||||
return value+"%"
|
||||
}
|
||||
},
|
||||
getPercentColor(value){
|
||||
let p = Number(value)
|
||||
if(p>=90 && p<100){
|
||||
return 'rgb(244, 240, 89)'
|
||||
}else if(p>=100){
|
||||
return 'red'
|
||||
}else{
|
||||
return 'rgb(16, 142, 233)'
|
||||
}
|
||||
},
|
||||
|
||||
loadDataSource1(){
|
||||
this.dataSource1 = dataSource1.filter(item=>{
|
||||
if(!this.indexRegisterType){
|
||||
return true
|
||||
}
|
||||
return item.type==this.indexRegisterType
|
||||
})
|
||||
},
|
||||
loadDataSource2(){
|
||||
this.dataSource2 = dataSource2.filter(item=>{
|
||||
if(!this.indexRegisterType){
|
||||
return true
|
||||
}
|
||||
return item.type==this.indexRegisterType
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadDataSource1()
|
||||
this.loadDataSource2()
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPage () {
|
||||
this.$message.success('根据业务自行处理跳转页面!')
|
||||
},
|
||||
changeRegisterType (e) {
|
||||
this.indexRegisterType = e.target.value
|
||||
if (this.indexBottomTab == '1') {
|
||||
this.loadDataSource1()
|
||||
} else {
|
||||
this.loadDataSource2()
|
||||
}
|
||||
},
|
||||
tableChange1 (pagination) {
|
||||
this.ipagination1.current = pagination.current
|
||||
this.ipagination1.pageSize = pagination.pageSize
|
||||
this.queryTimeoutInfo()
|
||||
},
|
||||
tableChange2 (pagination) {
|
||||
this.ipagination2.current = pagination.current
|
||||
this.ipagination2.pageSize = pagination.pageSize
|
||||
this.queryNodeTimeoutInfo()
|
||||
},
|
||||
getFlowRateNumber (value) {
|
||||
return Number(value)
|
||||
},
|
||||
getPercentFormat (value) {
|
||||
if (value == 100) {
|
||||
return '超时'
|
||||
} else {
|
||||
return value + '%'
|
||||
}
|
||||
},
|
||||
getPercentColor (value) {
|
||||
const p = Number(value)
|
||||
if (p >= 90 && p < 100) {
|
||||
return 'rgb(244, 240, 89)'
|
||||
} else if (p >= 100) {
|
||||
return 'red'
|
||||
} else {
|
||||
return 'rgb(16, 142, 233)'
|
||||
}
|
||||
},
|
||||
|
||||
loadDataSource1 () {
|
||||
this.dataSource1 = dataSource1.filter(item => {
|
||||
if (!this.indexRegisterType) {
|
||||
return true
|
||||
}
|
||||
return item.type == this.indexRegisterType
|
||||
})
|
||||
},
|
||||
loadDataSource2 () {
|
||||
this.dataSource2 = dataSource2.filter(item => {
|
||||
if (!this.indexRegisterType) {
|
||||
return true
|
||||
}
|
||||
return item.type == this.indexRegisterType
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadDataSource1()
|
||||
this.loadDataSource2()
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -515,5 +514,4 @@
|
||||
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -136,85 +136,85 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import ACol from "ant-design-vue/es/grid/Col"
|
||||
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
||||
|
||||
import Trend from '@/components/Trend'
|
||||
import { getLoginfo,getVisitInfo } from '@/api/api'
|
||||
import Trend from '@/components/Trend'
|
||||
import { getLoginfo, getVisitInfo } from '@/api/api'
|
||||
|
||||
const rankList = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
rankList.push({
|
||||
name: '白鹭岛 ' + (i+1) + ' 号店',
|
||||
total: 1234.56 - i * 100
|
||||
})
|
||||
}
|
||||
const barData = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
barData.push({
|
||||
x: `${i + 1}月`,
|
||||
y: Math.floor(Math.random() * 1000) + 200
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: "IndexChart",
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
MiniProgress,
|
||||
RankList,
|
||||
Bar,
|
||||
Trend,
|
||||
LineChartMultid,
|
||||
HeadInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
center: null,
|
||||
rankList,
|
||||
barData,
|
||||
loginfo:{},
|
||||
visitFields:['ip','visit'],
|
||||
visitInfo:[],
|
||||
indicator: <a-icon type="loading" style="font-size: 24px" spin />
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
this.initLogInfo();
|
||||
},
|
||||
methods: {
|
||||
initLogInfo () {
|
||||
getLoginfo(null).then((res)=>{
|
||||
if(res.success){
|
||||
Object.keys(res.result).forEach(key=>{
|
||||
res.result[key] =res.result[key]+""
|
||||
})
|
||||
this.loginfo = res.result;
|
||||
}
|
||||
})
|
||||
getVisitInfo().then(res=>{
|
||||
if(res.success){
|
||||
this.visitInfo = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
const rankList = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
rankList.push({
|
||||
name: '白鹭岛 ' + (i + 1) + ' 号店',
|
||||
total: 1234.56 - i * 100
|
||||
})
|
||||
}
|
||||
const barData = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
barData.push({
|
||||
x: `${i + 1}月`,
|
||||
y: Math.floor(Math.random() * 1000) + 200
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: 'IndexChart',
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
MiniProgress,
|
||||
RankList,
|
||||
Bar,
|
||||
Trend,
|
||||
LineChartMultid,
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
center: null,
|
||||
rankList,
|
||||
barData,
|
||||
loginfo: {},
|
||||
visitFields: ['ip', 'visit'],
|
||||
visitInfo: [],
|
||||
indicator: <a-icon type="loading" style="font-size: 24px" spin />
|
||||
}
|
||||
},
|
||||
created () {
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
this.initLogInfo()
|
||||
},
|
||||
methods: {
|
||||
initLogInfo () {
|
||||
getLoginfo(null).then((res) => {
|
||||
if (res.success) {
|
||||
Object.keys(res.result).forEach(key => {
|
||||
res.result[key] = res.result[key] + ''
|
||||
})
|
||||
this.loginfo = res.result
|
||||
}
|
||||
})
|
||||
getVisitInfo().then(res => {
|
||||
if (res.success) {
|
||||
this.visitInfo = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -265,4 +265,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -139,168 +139,165 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import noDataPng from '@/assets/nodata.png'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import noDataPng from '@/assets/nodata.png'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
|
||||
const tempSs1=[{
|
||||
id:"001",
|
||||
orderNo:"电[1]1267102",
|
||||
orderTitle:"药品出问题了",
|
||||
restDay:1
|
||||
},{
|
||||
id:"002",
|
||||
orderNo:"电[4]5967102",
|
||||
orderTitle:"吃了xxx医院的药，病情越来越严重",
|
||||
restDay:0
|
||||
},{
|
||||
id:"003",
|
||||
orderNo:"电[3]5988987",
|
||||
orderTitle:"今天去超市买鸡蛋，鸡蛋都是坏的",
|
||||
restDay:7
|
||||
},{
|
||||
id:"004",
|
||||
orderNo:"电[2]5213491",
|
||||
orderTitle:"xx宝实体店高价售卖xx",
|
||||
restDay:5
|
||||
},{
|
||||
id:"005",
|
||||
orderNo:"电[1]1603491",
|
||||
orderTitle:"以红利相诱，答应退保后扣一年费用",
|
||||
restDay:0
|
||||
}]
|
||||
const tempSs1 = [{
|
||||
id: '001',
|
||||
orderNo: '电[1]1267102',
|
||||
orderTitle: '药品出问题了',
|
||||
restDay: 1
|
||||
}, {
|
||||
id: '002',
|
||||
orderNo: '电[4]5967102',
|
||||
orderTitle: '吃了xxx医院的药，病情越来越严重',
|
||||
restDay: 0
|
||||
}, {
|
||||
id: '003',
|
||||
orderNo: '电[3]5988987',
|
||||
orderTitle: '今天去超市买鸡蛋，鸡蛋都是坏的',
|
||||
restDay: 7
|
||||
}, {
|
||||
id: '004',
|
||||
orderNo: '电[2]5213491',
|
||||
orderTitle: 'xx宝实体店高价售卖xx',
|
||||
restDay: 5
|
||||
}, {
|
||||
id: '005',
|
||||
orderNo: '电[1]1603491',
|
||||
orderTitle: '以红利相诱，答应退保后扣一年费用',
|
||||
restDay: 0
|
||||
}]
|
||||
|
||||
const tempSs2=[{
|
||||
id:"001",
|
||||
orderTitle:"我要投诉这个大超市",
|
||||
orderNo:"电[1]10299456",
|
||||
restDay:6
|
||||
},{
|
||||
id:"002",
|
||||
orderTitle:"xxx医院乱开药方,售卖假药",
|
||||
orderNo:"电[2]20235691",
|
||||
restDay:0
|
||||
},{
|
||||
id:"003",
|
||||
orderTitle:"我想问问这家店是干啥的",
|
||||
orderNo:"电[3]495867322",
|
||||
restDay:7
|
||||
},{
|
||||
id:"004",
|
||||
orderTitle:"我要举报朝阳区奥森公园酒店",
|
||||
orderNo:"电[2]1193849",
|
||||
restDay:3
|
||||
},{
|
||||
id:"005",
|
||||
orderTitle:"我今天吃饭吃到一个石头子",
|
||||
orderNo:"电[4]56782344",
|
||||
restDay:9
|
||||
}]
|
||||
const tempSs2 = [{
|
||||
id: '001',
|
||||
orderTitle: '我要投诉这个大超市',
|
||||
orderNo: '电[1]10299456',
|
||||
restDay: 6
|
||||
}, {
|
||||
id: '002',
|
||||
orderTitle: 'xxx医院乱开药方,售卖假药',
|
||||
orderNo: '电[2]20235691',
|
||||
restDay: 0
|
||||
}, {
|
||||
id: '003',
|
||||
orderTitle: '我想问问这家店是干啥的',
|
||||
orderNo: '电[3]495867322',
|
||||
restDay: 7
|
||||
}, {
|
||||
id: '004',
|
||||
orderTitle: '我要举报朝阳区奥森公园酒店',
|
||||
orderNo: '电[2]1193849',
|
||||
restDay: 3
|
||||
}, {
|
||||
id: '005',
|
||||
orderTitle: '我今天吃饭吃到一个石头子',
|
||||
orderNo: '电[4]56782344',
|
||||
restDay: 9
|
||||
}]
|
||||
|
||||
//4-7天
|
||||
const tip_green = "rgba(0, 255, 0, 1)"
|
||||
//1-3天
|
||||
const tip_yellow = "rgba(255, 255, 0, 1)"
|
||||
//超期
|
||||
const tip_red = "rgba(255, 0, 0, 1)"
|
||||
// 4-7天
|
||||
const tip_green = 'rgba(0, 255, 0, 1)'
|
||||
// 1-3天
|
||||
const tip_yellow = 'rgba(255, 255, 0, 1)'
|
||||
// 超期
|
||||
const tip_red = 'rgba(255, 0, 0, 1)'
|
||||
|
||||
export default {
|
||||
name: "IndexTask",
|
||||
components:{ JEllipsis },
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
textMaxLength:8,
|
||||
dataSource1:[],
|
||||
dataSource2:[],
|
||||
dataSource3:[],
|
||||
dataSource4:[],
|
||||
columns: [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
width:50,
|
||||
fixed:'left',
|
||||
align:"center",
|
||||
scopedSlots: {customRender: "dayWarnning"}
|
||||
},
|
||||
{
|
||||
title:'剩余天数',
|
||||
align:"center",
|
||||
dataIndex: 'restDay',
|
||||
width:80
|
||||
},
|
||||
{
|
||||
title:'工单标题',
|
||||
align:"center",
|
||||
dataIndex: 'orderTitle',
|
||||
scopedSlots: {customRender: "ellipsisText"}
|
||||
},
|
||||
{
|
||||
title:'工单编号',
|
||||
align:"center",
|
||||
dataIndex: 'orderNo',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.mock();
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
getTipColor(rd){
|
||||
let num = rd.restDay
|
||||
if(num<=0){
|
||||
return tip_red
|
||||
}else if(num>=1 && num<4){
|
||||
return tip_yellow
|
||||
}else if(num>=4){
|
||||
return tip_green
|
||||
export default {
|
||||
name: 'IndexTask',
|
||||
components: { JEllipsis },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
textMaxLength: 8,
|
||||
dataSource1: [],
|
||||
dataSource2: [],
|
||||
dataSource3: [],
|
||||
dataSource4: [],
|
||||
columns: [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'dayWarnning' }
|
||||
},
|
||||
{
|
||||
title: '剩余天数',
|
||||
align: 'center',
|
||||
dataIndex: 'restDay',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
align: 'center',
|
||||
dataIndex: 'orderTitle',
|
||||
scopedSlots: { customRender: 'ellipsisText' }
|
||||
},
|
||||
{
|
||||
title: '工单编号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderNo'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
},
|
||||
goPage(){
|
||||
this.$message.success("请根据具体业务跳转页面")
|
||||
//this.$router.push({ path: '/comp/mytask' })
|
||||
},
|
||||
mock(){
|
||||
this.dataSource1=tempSs1
|
||||
this.dataSource2=tempSs2
|
||||
this.dataSource3=tempSs1
|
||||
this.dataSource4=[]
|
||||
this.ifNullDataSource(this.dataSource4,'.tytable4')
|
||||
},
|
||||
|
||||
ifNullDataSource(ds,tb){
|
||||
this.$nextTick(()=>{
|
||||
if(!ds || ds.length==0){
|
||||
var tmp = document.createElement('img');
|
||||
tmp.src=noDataPng
|
||||
tmp.width=300
|
||||
let tbclass=`${tb} .ant-table-placeholder`
|
||||
document.querySelector(tbclass).innerHTML=""
|
||||
document.querySelector(tbclass).appendChild(tmp)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleData(){
|
||||
this.$message.success("办理完成")
|
||||
}
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.mock()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getTipColor (rd) {
|
||||
const num = rd.restDay
|
||||
if (num <= 0) {
|
||||
return tip_red
|
||||
} else if (num >= 1 && num < 4) {
|
||||
return tip_yellow
|
||||
} else if (num >= 4) {
|
||||
return tip_green
|
||||
}
|
||||
},
|
||||
goPage () {
|
||||
this.$message.success('请根据具体业务跳转页面')
|
||||
// this.$router.push({ path: '/comp/mytask' })
|
||||
},
|
||||
mock () {
|
||||
this.dataSource1 = tempSs1
|
||||
this.dataSource2 = tempSs2
|
||||
this.dataSource3 = tempSs1
|
||||
this.dataSource4 = []
|
||||
this.ifNullDataSource(this.dataSource4, '.tytable4')
|
||||
},
|
||||
|
||||
ifNullDataSource (ds, tb) {
|
||||
this.$nextTick(() => {
|
||||
if (!ds || ds.length == 0) {
|
||||
var tmp = document.createElement('img')
|
||||
tmp.src = noDataPng
|
||||
tmp.width = 300
|
||||
const tbclass = `${tb} .ant-table-placeholder`
|
||||
document.querySelector(tbclass).innerHTML = ''
|
||||
document.querySelector(tbclass).appendChild(tmp)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleData () {
|
||||
this.$message.success('办理完成')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -323,7 +320,6 @@
|
||||
.index-container-ty .ant-card-actions li {margin:2px 0;}
|
||||
.index-container-ty .ant-card-actions > li > span{width: 100%}*/
|
||||
|
||||
|
||||
.index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
|
||||
|
||||
.index-md-title{
|
||||
@@ -347,7 +343,6 @@
|
||||
border-bottom:1px solid #90aeff;*/
|
||||
}
|
||||
|
||||
|
||||
.index-container-ty .ant-table-thead > tr > th,
|
||||
.index-container-ty .ant-table-tbody > tr > td{
|
||||
border-bottom: 1px solid #90aeff;
|
||||
@@ -369,4 +364,4 @@
|
||||
.index-container-ty .ant-table-placeholder {
|
||||
padding: 0
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Monitor"
|
||||
}
|
||||
export default {
|
||||
name: 'Monitor'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -110,139 +110,138 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { timeFix } from "@/utils/util"
|
||||
import {mapGetters} from "vuex"
|
||||
import { timeFix } from '@/utils/util'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import { getRoleList, getServiceList, getFileAccessHttpUrl } from "@/api/manage"
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import { getRoleList, getServiceList, getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
const DataSet = require('@antv/data-set')
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
export default {
|
||||
name: "Workplace",
|
||||
components: {
|
||||
PageLayout,
|
||||
HeadInfo,
|
||||
Radar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeFix: timeFix(),
|
||||
avatar: '',
|
||||
user: {},
|
||||
export default {
|
||||
name: 'Workplace',
|
||||
components: {
|
||||
PageLayout,
|
||||
HeadInfo,
|
||||
Radar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timeFix: timeFix(),
|
||||
avatar: '',
|
||||
user: {},
|
||||
|
||||
projects: [],
|
||||
loading: true,
|
||||
radarLoading: true,
|
||||
activities: [],
|
||||
teams: [],
|
||||
projects: [],
|
||||
loading: true,
|
||||
radarLoading: true,
|
||||
activities: [],
|
||||
teams: [],
|
||||
|
||||
// data
|
||||
axis1Opts: {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
// data
|
||||
axis1Opts: {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
}
|
||||
},
|
||||
axis2Opts: {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
},
|
||||
axis2Opts: {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
},
|
||||
scale: [{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 80
|
||||
}],
|
||||
axisData: [
|
||||
{ item: '引用', a: 70, b: 30, c: 40 },
|
||||
{ item: '口碑', a: 60, b: 70, c: 40 },
|
||||
{ item: '产量', a: 50, b: 60, c: 40 },
|
||||
{ item: '贡献', a: 40, b: 50, c: 40 },
|
||||
{ item: '热度', a: 60, b: 70, c: 40 },
|
||||
{ item: '引用', a: 70, b: 50, c: 40 }
|
||||
],
|
||||
radarData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo() {
|
||||
return this.$store.getters.userInfo
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.user = this.userInfo
|
||||
this.avatar = getFileAccessHttpUrl(this.userInfo.avatar)
|
||||
console.log('this.avatar :'+ this.avatar)
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('workplace -> call getRoleList()', res)
|
||||
})
|
||||
|
||||
getServiceList().then(res => {
|
||||
console.log('workplace -> call getServiceList()', res)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.getProjects()
|
||||
this.getActivity()
|
||||
this.getTeams()
|
||||
this.initRadar()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(["nickname", "welcome"]),
|
||||
getProjects() {
|
||||
this.$http.get('/mock/api/list/search/projects')
|
||||
.then(res => {
|
||||
this.projects = res.result && res.result.data
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
getActivity() {
|
||||
this.$http.get('/mock/api/workplace/activity')
|
||||
.then(res => {
|
||||
this.activities = res.result
|
||||
})
|
||||
},
|
||||
getTeams() {
|
||||
this.$http.get('/mock/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
})
|
||||
},
|
||||
initRadar() {
|
||||
this.radarLoading = true
|
||||
scale: [{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 80
|
||||
}],
|
||||
axisData: [
|
||||
{ item: '引用', a: 70, b: 30, c: 40 },
|
||||
{ item: '口碑', a: 60, b: 70, c: 40 },
|
||||
{ item: '产量', a: 50, b: 60, c: 40 },
|
||||
{ item: '贡献', a: 40, b: 50, c: 40 },
|
||||
{ item: '热度', a: 60, b: 70, c: 40 },
|
||||
{ item: '引用', a: 70, b: 50, c: 40 }
|
||||
],
|
||||
radarData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo () {
|
||||
return this.$store.getters.userInfo
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.user = this.userInfo
|
||||
this.avatar = getFileAccessHttpUrl(this.userInfo.avatar)
|
||||
console.log('this.avatar :' + this.avatar)
|
||||
|
||||
this.$http.get('/mock/api/workplace/radar')
|
||||
.then(res => {
|
||||
getRoleList().then(res => {
|
||||
console.log('workplace -> call getRoleList()', res)
|
||||
})
|
||||
|
||||
const dv = new DataSet.View().source(res.result)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['个人', '团队', '部门'],
|
||||
key: 'user',
|
||||
value: 'score'
|
||||
})
|
||||
getServiceList().then(res => {
|
||||
console.log('workplace -> call getServiceList()', res)
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.getProjects()
|
||||
this.getActivity()
|
||||
this.getTeams()
|
||||
this.initRadar()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['nickname', 'welcome']),
|
||||
getProjects () {
|
||||
this.$http.get('/mock/api/list/search/projects')
|
||||
.then(res => {
|
||||
this.projects = res.result && res.result.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
getActivity () {
|
||||
this.$http.get('/mock/api/workplace/activity')
|
||||
.then(res => {
|
||||
this.activities = res.result
|
||||
})
|
||||
},
|
||||
getTeams () {
|
||||
this.$http.get('/mock/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
})
|
||||
},
|
||||
initRadar () {
|
||||
this.radarLoading = true
|
||||
|
||||
this.radarData = dv.rows
|
||||
this.radarLoading = false
|
||||
this.$http.get('/mock/api/workplace/radar')
|
||||
.then(res => {
|
||||
const dv = new DataSet.View().source(res.result)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['个人', '团队', '部门'],
|
||||
key: 'user',
|
||||
value: 'score'
|
||||
})
|
||||
}
|
||||
|
||||
this.radarData = dv.rows
|
||||
this.radarLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -357,4 +356,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -188,257 +188,257 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
|
||||
export default {
|
||||
name: 'ImagCropper',
|
||||
components: {
|
||||
VueCropper
|
||||
export default {
|
||||
name: 'ImagCropper',
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
model: false,
|
||||
modelSrc: '',
|
||||
crap: false,
|
||||
previews: {},
|
||||
lists: [
|
||||
{ img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_1.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_2.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_3.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Landscape_4.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Portrait_1.jpg' },
|
||||
{ img: 'http://cdn.xyxiao.cn/Portrait_2.jpg' }
|
||||
],
|
||||
option: {
|
||||
img: '',
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: 'png',
|
||||
canMove: true,
|
||||
fixedBox: false,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: false,
|
||||
cropData: {},
|
||||
enlarge: 1,
|
||||
mode: 'contain',
|
||||
maxImgSize: 3000,
|
||||
limitMinSize: [100, 120]
|
||||
},
|
||||
example2: {
|
||||
img: 'http://cdn.xyxiao.cn/Landscape_2.jpg',
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: 'jpeg',
|
||||
canScale: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
fixed: true,
|
||||
// 真实的输出宽高
|
||||
infoTrue: true,
|
||||
fixedNumber: [4, 3]
|
||||
},
|
||||
example3: {
|
||||
img: 'http://cdn.xyxiao.cn/Landscape_1.jpg',
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
downImg: '#',
|
||||
previewStyle1: {},
|
||||
previewStyle2: {},
|
||||
previewStyle3: {},
|
||||
previewStyle4: {},
|
||||
code0: '',
|
||||
code1: '',
|
||||
code2: '',
|
||||
code3: '',
|
||||
preview3: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeImg () {
|
||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
model: false,
|
||||
modelSrc: "",
|
||||
crap: false,
|
||||
previews: {},
|
||||
lists: [
|
||||
{img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_1.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_2.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_3.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Landscape_4.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Portrait_1.jpg"},
|
||||
{img: "http://cdn.xyxiao.cn/Portrait_2.jpg"}
|
||||
],
|
||||
option: {
|
||||
img: "",
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: "png",
|
||||
canMove: true,
|
||||
fixedBox: false,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: false,
|
||||
cropData: {},
|
||||
enlarge: 1,
|
||||
mode: 'contain',
|
||||
maxImgSize: 3000,
|
||||
limitMinSize: [100, 120]
|
||||
},
|
||||
example2: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: "jpeg",
|
||||
canScale: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
fixed: true,
|
||||
// 真实的输出宽高
|
||||
infoTrue: true,
|
||||
fixedNumber: [4, 3]
|
||||
},
|
||||
example3: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
downImg: "#",
|
||||
previewStyle1: {},
|
||||
previewStyle2: {},
|
||||
previewStyle3: {},
|
||||
previewStyle4: {},
|
||||
code0: '',
|
||||
code1: '',
|
||||
code2: '',
|
||||
code3: '',
|
||||
preview3: '',
|
||||
};
|
||||
startCrop () {
|
||||
// start
|
||||
this.crap = true
|
||||
this.$refs.cropper.startCrop()
|
||||
},
|
||||
methods: {
|
||||
changeImg() {
|
||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
|
||||
},
|
||||
startCrop() {
|
||||
// start
|
||||
this.crap = true;
|
||||
this.$refs.cropper.startCrop();
|
||||
},
|
||||
stopCrop() {
|
||||
// stop
|
||||
this.crap = false;
|
||||
this.$refs.cropper.stopCrop();
|
||||
},
|
||||
clearCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.clearCrop();
|
||||
},
|
||||
refreshCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.refresh();
|
||||
},
|
||||
changeScale(num) {
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
finish(type) {
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
var img = window.URL.createObjectURL(data);
|
||||
this.model = true;
|
||||
this.modelSrc = img;
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime(data) {
|
||||
var previews = data;
|
||||
var h = 0.5;
|
||||
var w = 0.2;
|
||||
|
||||
this.previewStyle1 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: h
|
||||
};
|
||||
|
||||
this.previewStyle2 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: w
|
||||
};
|
||||
|
||||
this.previewStyle3 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.w)
|
||||
};
|
||||
|
||||
this.previewStyle4 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.h)
|
||||
};
|
||||
|
||||
this.previews = data;
|
||||
},
|
||||
|
||||
finish2(type) {
|
||||
this.$refs.cropper2.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
finish3(type) {
|
||||
this.$refs.cropper3.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
down(type) {
|
||||
// 输出
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
this.downImg = window.URL.createObjectURL(data);
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.downImg = data;
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
uploadImg(e, num) {
|
||||
//上传图片
|
||||
// this.option.img
|
||||
var file = e.target.files[0];
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
|
||||
return false;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
let data;
|
||||
if (typeof e.target.result === "object") {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data = e.target.result;
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data;
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data;
|
||||
}
|
||||
this.$refs.uploadImg.value = ''
|
||||
};
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file);
|
||||
},
|
||||
imgLoad(msg) {
|
||||
console.log(msg);
|
||||
},
|
||||
|
||||
cropMoving(data) {
|
||||
this.option.cropData = data;
|
||||
stopCrop () {
|
||||
// stop
|
||||
this.crap = false
|
||||
this.$refs.cropper.stopCrop()
|
||||
},
|
||||
clearCrop () {
|
||||
// clear
|
||||
this.$refs.cropper.clearCrop()
|
||||
},
|
||||
refreshCrop () {
|
||||
// clear
|
||||
this.$refs.cropper.refresh()
|
||||
},
|
||||
changeScale (num) {
|
||||
num = num || 1
|
||||
this.$refs.cropper.changeScale(num)
|
||||
},
|
||||
rotateLeft () {
|
||||
this.$refs.cropper.rotateLeft()
|
||||
},
|
||||
rotateRight () {
|
||||
this.$refs.cropper.rotateRight()
|
||||
},
|
||||
finish (type) {
|
||||
if (type === 'blob') {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
var img = window.URL.createObjectURL(data)
|
||||
this.model = true
|
||||
this.modelSrc = img
|
||||
})
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
// 实时预览函数
|
||||
realTime (data) {
|
||||
var previews = data
|
||||
var h = 0.5
|
||||
var w = 0.2
|
||||
|
||||
this.previewStyle1 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: h
|
||||
}
|
||||
|
||||
this.previewStyle2 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: w
|
||||
}
|
||||
|
||||
this.previewStyle3 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: (100 / previews.w)
|
||||
}
|
||||
|
||||
this.previewStyle4 = {
|
||||
width: previews.w + 'px',
|
||||
height: previews.h + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: (100 / previews.h)
|
||||
}
|
||||
|
||||
this.previews = data
|
||||
},
|
||||
mounted() {
|
||||
this.changeImg();
|
||||
var list = [].slice.call(document.querySelectorAll("pre code"));
|
||||
list.forEach((val, index) => {
|
||||
hljs.highlightBlock(val);
|
||||
});
|
||||
|
||||
finish2 (type) {
|
||||
this.$refs.cropper2.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
},
|
||||
finish3 (type) {
|
||||
this.$refs.cropper3.getCropData(data => {
|
||||
this.model = true
|
||||
this.modelSrc = data
|
||||
})
|
||||
},
|
||||
down (type) {
|
||||
// 输出
|
||||
if (type === 'blob') {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
this.downImg = window.URL.createObjectURL(data)
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data])
|
||||
window.navigator.msSaveBlob(blobObject, 'demo.png')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click()
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.downImg = data
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data])
|
||||
window.navigator.msSaveBlob(blobObject, 'demo.png')
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
uploadImg (e, num) {
|
||||
// 上传图片
|
||||
// this.option.img
|
||||
var file = e.target.files[0]
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
|
||||
return false
|
||||
}
|
||||
var reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
let data
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]))
|
||||
} else {
|
||||
data = e.target.result
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data
|
||||
}
|
||||
this.$refs.uploadImg.value = ''
|
||||
}
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file)
|
||||
},
|
||||
imgLoad (msg) {
|
||||
console.log(msg)
|
||||
},
|
||||
|
||||
cropMoving (data) {
|
||||
this.option.cropData = data
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
mounted () {
|
||||
this.changeImg()
|
||||
var list = [].slice.call(document.querySelectorAll('pre code'))
|
||||
list.forEach((val, index) => {
|
||||
hljs.highlightBlock(val)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -610,4 +610,4 @@
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -56,49 +56,49 @@
|
||||
|
||||
<script>
|
||||
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
|
||||
export default {
|
||||
name: 'ImagPreview',
|
||||
components: {
|
||||
ARow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片预览页面',
|
||||
spinning:false,
|
||||
//数据集
|
||||
dataSource: [{
|
||||
key:0,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://static.jero.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://static.jero.com/temp/国炬软件logo_1606575029126.png"
|
||||
}
|
||||
]
|
||||
},{
|
||||
key:1,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://static.jero.com/upload/test/1_1588149743473.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
url: {
|
||||
}
|
||||
export default {
|
||||
name: 'ImagPreview',
|
||||
components: {
|
||||
ARow
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '图片预览页面',
|
||||
spinning: false,
|
||||
// 数据集
|
||||
dataSource: [{
|
||||
key: 0,
|
||||
fileDetails: [
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/temp/国炬软件logo_1606575029126.png'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
key: 1,
|
||||
fileDetails: [
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://static.jero.com/upload/test/1_1588149743473.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
url: {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operator {
|
||||
@@ -112,4 +112,4 @@
|
||||
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: #1890FF !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -25,51 +25,51 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import draggable from 'vuedraggable'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
|
||||
export default {
|
||||
name: 'ImgDragSort',
|
||||
components:{
|
||||
ACol,
|
||||
ARow,
|
||||
draggable
|
||||
export default {
|
||||
name: 'ImgDragSort',
|
||||
components: {
|
||||
ACol,
|
||||
ARow,
|
||||
draggable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '图片拖拽排序',
|
||||
spinning: false,
|
||||
// 数据集
|
||||
dataSource: [
|
||||
{ id: '000', sort: 0, filePath: 'https://static.jero.com/upload/test/1_1588149743473.jpg' },
|
||||
{ id: '111', sort: 1, filePath: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg' },
|
||||
{ id: '222', sort: 2, filePath: 'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg' },
|
||||
{ id: '333', sort: 3, filePath: 'https://static.jero.com/temp/国炬软件logo_1606575029126.png' },
|
||||
{ id: '444', sort: 4, filePath: 'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg' }
|
||||
],
|
||||
oldDateSource: [],
|
||||
newDateSource: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.oldDateSource = this.dataSource
|
||||
},
|
||||
methods: {
|
||||
end: function (evt) {
|
||||
console.log('拖动前的位置' + evt.oldIndex)
|
||||
console.log('拖动后的位置' + evt.newIndex)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片拖拽排序',
|
||||
spinning: false,
|
||||
//数据集
|
||||
dataSource: [
|
||||
{id:'000',sort: 0,filePath: 'https://static.jero.com/upload/test/1_1588149743473.jpg'},
|
||||
{id:'111',sort: 1,filePath: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'},
|
||||
{id:'222',sort: 2,filePath: 'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'},
|
||||
{id:'333',sort: 3,filePath: 'https://static.jero.com/temp/国炬软件logo_1606575029126.png'},
|
||||
{id:'444',sort: 4,filePath: 'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'}
|
||||
],
|
||||
oldDateSource:[],
|
||||
newDateSource:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.oldDateSource = this.dataSource;
|
||||
},
|
||||
methods:{
|
||||
end: function (evt) {
|
||||
console.log("拖动前的位置"+evt.oldIndex);
|
||||
console.log("拖动后的位置"+evt.newIndex);
|
||||
},
|
||||
sureChange(){
|
||||
for(var i=0;i<this.dataSource.length;i++){
|
||||
this.dataSource[i].sort = i;
|
||||
}
|
||||
this.newDateSource = this.dataSource;
|
||||
sureChange () {
|
||||
for (var i = 0; i < this.dataSource.length; i++) {
|
||||
this.dataSource[i].sort = i
|
||||
}
|
||||
this.newDateSource = this.dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -33,115 +33,120 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'ImgTurnPage',
|
||||
components:{
|
||||
draggable
|
||||
export default {
|
||||
name: 'ImgTurnPage',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '图片翻页',
|
||||
// 数据集
|
||||
treeData: [{
|
||||
title: '第一页',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-0-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/1_1588149743473.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
}]
|
||||
}, {
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl: 'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
|
||||
}]
|
||||
}, {
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl: 'https://static.jero.com/upload/test/1374962_1587621329085.jpg'
|
||||
}]
|
||||
}],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
sort: 0,
|
||||
imgUrl: '',
|
||||
navName: '',
|
||||
imgList: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getImgList()
|
||||
},
|
||||
methods: {
|
||||
getImgList () {
|
||||
var count = 0
|
||||
for (var i = 0; i < this.treeData.length; i++) {
|
||||
for (var j = 0; j < this.treeData[i].children.length; j++) {
|
||||
this.imgList.push({
|
||||
key: this.treeData[i].children[j].key,
|
||||
pkey: this.treeData[i].key,
|
||||
sort: count++,
|
||||
imgUrl: this.treeData[i].children[j].imgUrl,
|
||||
navName: this.treeData[i].title + '/' + this.treeData[i].children[j].title
|
||||
})
|
||||
}
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片翻页',
|
||||
//数据集
|
||||
treeData: [{
|
||||
title: '第一页',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-0-0',
|
||||
imgUrl:'https://static.jero.com/upload/test/1_1588149743473.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl:'https://static.jero.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl:'https://static.jero.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl:'https://static.jero.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl:'https://static.jero.com/upload/test/1374962_1587621329085.jpg'
|
||||
}]
|
||||
}],
|
||||
selectedKeys:[],
|
||||
expandedKeys:[],
|
||||
sort:0,
|
||||
imgUrl:'',
|
||||
navName:'',
|
||||
imgList:[],
|
||||
onSelect (selectedKeys, info) {
|
||||
for (var i = 0; i < this.imgList.length; i++) {
|
||||
if (this.imgList[i].key === selectedKeys[0]) {
|
||||
this.sort = this.imgList[i].sort
|
||||
this.setValue(this.imgList[i])
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getImgList();
|
||||
},
|
||||
methods: {
|
||||
getImgList(){
|
||||
var count = 0;
|
||||
for(var i=0;i<this.treeData.length;i++){
|
||||
for(var j=0;j<this.treeData[i].children.length;j++){
|
||||
this.imgList.push({key:this.treeData[i].children[j].key,pkey:this.treeData[i].key,sort:count++,
|
||||
imgUrl:this.treeData[i].children[j].imgUrl,navName:this.treeData[i].title+"/"+this.treeData[i].children[j].title})
|
||||
}
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
onSelect (selectedKeys, info) {
|
||||
for(var i=0;i<this.imgList.length;i++){
|
||||
if(this.imgList[i].key === selectedKeys[0]){
|
||||
this.sort = this.imgList[i].sort;
|
||||
this.setValue(this.imgList[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = [];
|
||||
if(expandedKeys !== null && expandedKeys !== ''){
|
||||
this.expandedKeys[0] = expandedKeys[1];
|
||||
}
|
||||
},
|
||||
prev(){
|
||||
if(this.sort === 0){
|
||||
this.sort = this.imgList.length-1;
|
||||
}else{
|
||||
this.sort = this.sort - 1;
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
next(){
|
||||
if(this.sort === this.imgList.length-1){
|
||||
this.sort = 0;
|
||||
}else{
|
||||
this.sort = this.sort + 1;
|
||||
}
|
||||
this.setValue(this.imgList[this.sort]);
|
||||
},
|
||||
// 设置受控节点值
|
||||
setValue(value){
|
||||
this.selectedKeys = [];
|
||||
this.imgUrl = value.imgUrl;
|
||||
this.selectedKeys[0] = value.key;
|
||||
this.expandedKeys[0] = value.pkey;
|
||||
this.navName = value.navName;
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = []
|
||||
if (expandedKeys !== null && expandedKeys !== '') {
|
||||
this.expandedKeys[0] = expandedKeys[1]
|
||||
}
|
||||
},
|
||||
prev () {
|
||||
if (this.sort === 0) {
|
||||
this.sort = this.imgList.length - 1
|
||||
} else {
|
||||
this.sort = this.sort - 1
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
next () {
|
||||
if (this.sort === this.imgList.length - 1) {
|
||||
this.sort = 0
|
||||
} else {
|
||||
this.sort = this.sort + 1
|
||||
}
|
||||
this.setValue(this.imgList[this.sort])
|
||||
},
|
||||
// 设置受控节点值
|
||||
setValue (value) {
|
||||
this.selectedKeys = []
|
||||
this.imgUrl = value.imgUrl
|
||||
this.selectedKeys[0] = value.key
|
||||
this.expandedKeys[0] = value.pkey
|
||||
this.navName = value.navName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -35,58 +35,57 @@
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import { axios } from '@/utils/request'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import Vue from 'vue'
|
||||
export default {
|
||||
name: 'FlowTest',
|
||||
data(){
|
||||
return {
|
||||
url:"",
|
||||
paramJson:"",
|
||||
resultJson:{},
|
||||
requestMethod:"POST"
|
||||
import { axios } from '@/utils/request'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import Vue from 'vue'
|
||||
export default {
|
||||
name: 'FlowTest',
|
||||
data () {
|
||||
return {
|
||||
url: '',
|
||||
paramJson: '',
|
||||
resultJson: {},
|
||||
requestMethod: 'POST'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch (value) {
|
||||
const that = this
|
||||
if (!value) {
|
||||
that.$message.error('请填写路径')
|
||||
return false
|
||||
}
|
||||
this.resultJson = {}
|
||||
axios({
|
||||
url: value,
|
||||
method: this.requestMethod,
|
||||
data: this.paramJson
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.resultJson = res
|
||||
}).catch((err) => {
|
||||
that.$message.error('请求异常：' + err)
|
||||
})
|
||||
},
|
||||
changeVal (e) {
|
||||
try {
|
||||
let json = e.target.value
|
||||
if (json.indexOf(',}') > 0) {
|
||||
json = json.replace(',}', '}')
|
||||
}
|
||||
this.paramJson = JSON.parse(json)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.$message.error('非法的JSON字符串')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch (value) {
|
||||
let that = this
|
||||
if(!value){
|
||||
that.$message.error("请填写路径")
|
||||
return false
|
||||
}
|
||||
this.resultJson = {};
|
||||
axios({
|
||||
url: value,
|
||||
method: this.requestMethod,
|
||||
data: this.paramJson
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.resultJson = res
|
||||
}).catch((err) => {
|
||||
that.$message.error("请求异常："+err)
|
||||
})
|
||||
},
|
||||
changeVal(e){
|
||||
try {
|
||||
let json = e.target.value;
|
||||
if(json.indexOf(",}")>0){
|
||||
json = json.replace(",}","}");
|
||||
}
|
||||
this.paramJson = JSON.parse(json);
|
||||
}catch (e) {
|
||||
console.log(e);
|
||||
this.$message.error("非法的JSON字符串")
|
||||
}
|
||||
},
|
||||
handleChange(value) {
|
||||
this.requestMethod = value;
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
|
||||
}
|
||||
handleChange (value) {
|
||||
this.requestMethod = value
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,20 +19,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JVxeDemo1 from '@views/demo/JVxeDemo/JVxeDemo1'
|
||||
import JVxeDemo2 from '@views/demo/JVxeDemo/JVxeDemo2'
|
||||
import JVxeDemo3 from '@views/demo/JVxeDemo/JVxeDemo3'
|
||||
import JVxeDemo1 from '@views/demo/JVxeDemo/JVxeDemo1'
|
||||
import JVxeDemo2 from '@views/demo/JVxeDemo/JVxeDemo2'
|
||||
import JVxeDemo3 from '@views/demo/JVxeDemo/JVxeDemo3'
|
||||
|
||||
export default {
|
||||
name: 'JVXETableDemo',
|
||||
components: {JVxeDemo2, JVxeDemo1, JVxeDemo3},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
export default {
|
||||
name: 'JVXETableDemo',
|
||||
components: { JVxeDemo2, JVxeDemo1, JVxeDemo3 },
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -36,269 +36,267 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import moment from 'moment'
|
||||
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo1',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '不可编辑',
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal,
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
defaultValue: 'normal-new',
|
||||
},
|
||||
{
|
||||
title: '单行文本',
|
||||
key: 'input',
|
||||
type: JVXETypes.input,
|
||||
width: '180px',
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
export default {
|
||||
name: 'JVxeDemo1',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '不可编辑',
|
||||
key: 'normal',
|
||||
type: JVXETypes.normal,
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
defaultValue: 'normal-new'
|
||||
},
|
||||
{
|
||||
title: '单行文本',
|
||||
key: 'input',
|
||||
type: JVXETypes.input,
|
||||
width: '180px',
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler ({ cellValue, row, column }, callback, target) {
|
||||
// cellValue 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
if (cellValue === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler({cellValue, row, column}, callback, target) {
|
||||
// cellValue 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
if (cellValue === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '多行文本',
|
||||
key: 'textarea',
|
||||
type: JVXETypes.textarea,
|
||||
width: '200px',
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'number',
|
||||
type: JVXETypes.inputNumber,
|
||||
width: '80px',
|
||||
defaultValue: 32,
|
||||
// 【统计列】sum = 求和、average = 平均值
|
||||
statistics: ['sum', 'average'],
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
// 下拉选项
|
||||
options: [
|
||||
{title: 'String', value: 'string'},
|
||||
{title: 'Integer', value: 'int'},
|
||||
{title: 'Double', value: 'double'},
|
||||
{title: 'Boolean', value: 'boolean'}
|
||||
],
|
||||
allowInput: true,
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_字典',
|
||||
key: 'select_dict',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
{
|
||||
title: '下拉框_多选',
|
||||
key: 'select_multiple',
|
||||
type: JVXETypes.selectMultiple,
|
||||
width: '205px',
|
||||
options: [
|
||||
{title: 'String', value: 'string'},
|
||||
{title: 'Integer', value: 'int'},
|
||||
{title: 'Double', value: 'double'},
|
||||
{title: 'Boolean', value: 'boolean'}
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '多选',
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '多行文本',
|
||||
key: 'textarea',
|
||||
type: JVXETypes.textarea,
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'number',
|
||||
type: JVXETypes.inputNumber,
|
||||
width: '80px',
|
||||
defaultValue: 32,
|
||||
// 【统计列】sum = 求和、average = 平均值
|
||||
statistics: ['sum', 'average']
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
// 下拉选项
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
allowInput: true,
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_字典',
|
||||
key: 'select_dict',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '下拉框_多选',
|
||||
key: 'select_multiple',
|
||||
type: JVXETypes.selectMultiple,
|
||||
width: '205px',
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '多选'
|
||||
},
|
||||
|
||||
{
|
||||
title: '下拉框_搜索',
|
||||
key: 'select_search',
|
||||
type: JVXETypes.selectSearch,
|
||||
width: '180px',
|
||||
options: [
|
||||
{title: 'String', value: 'string'},
|
||||
{title: 'Integer', value: 'int'},
|
||||
{title: 'Double', value: 'double'},
|
||||
{title: 'Boolean', value: 'boolean'}
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '日期时间',
|
||||
key: 'datetime',
|
||||
type: JVXETypes.datetime,
|
||||
width: '200px',
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
{
|
||||
title: '复选框',
|
||||
key: 'checkbox',
|
||||
type: JVXETypes.checkbox,
|
||||
width: '100px',
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: JVXETypes.slot,
|
||||
fixed: 'right',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
slotName: 'action',
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
{
|
||||
title: '下拉框_搜索',
|
||||
key: 'select_search',
|
||||
type: JVXETypes.selectSearch,
|
||||
width: '180px',
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '日期时间',
|
||||
key: 'datetime',
|
||||
type: JVXETypes.datetime,
|
||||
width: '200px',
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '复选框',
|
||||
key: 'checkbox',
|
||||
type: JVXETypes.checkbox,
|
||||
width: '100px',
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: JVXETypes.slot,
|
||||
fixed: 'right',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
slotName: 'action'
|
||||
}
|
||||
],
|
||||
dataSource: []
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.randomPage(0, 20, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleCK (props) {
|
||||
this.$message.success('请在控制台查看输出')
|
||||
// 参数介绍：
|
||||
// props.value 当前单元格的值
|
||||
// props.row 当前行的数据
|
||||
// props.rowId 当前行ID
|
||||
// props.rowIndex 当前行下标
|
||||
// props.column 当前列的配置
|
||||
// props.columnIndex 当前列下标
|
||||
// props.$table vxe实例，可以调用vxe内置方法
|
||||
// props.target JVXE实例，可以调用JVXE内置方法
|
||||
// props.caseId JVXE实例唯一ID
|
||||
// props.scrolling 是否正在滚动
|
||||
// props.triggerChange 触发change事件，用于更改slot的值
|
||||
console.log('查看: ', { props })
|
||||
},
|
||||
|
||||
handleDL (props) {
|
||||
// 调用删除方法
|
||||
props.target.removeRows(props.row)
|
||||
},
|
||||
|
||||
handleValueChange (event) {
|
||||
console.log('handleValueChange.event: ', event)
|
||||
},
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck () {
|
||||
this.$refs.vTable.validateTable().then(errMap => {
|
||||
if (errMap) {
|
||||
console.log('表单验证未通过：', { errMap })
|
||||
this.$message.error('验证未通过，请在控制台查看详细')
|
||||
} else {
|
||||
this.$message.success('验证通过')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', { values })
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet () {
|
||||
this.randomPage(1, 1000, true)
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage (current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
},
|
||||
const randomDatetime = () => {
|
||||
const time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
created() {
|
||||
this.randomPage(0, 20, true)
|
||||
},
|
||||
methods: {
|
||||
const limit = (current - 1) * pageSize
|
||||
|
||||
handleCK(props) {
|
||||
this.$message.success('请在控制台查看输出')
|
||||
// 参数介绍：
|
||||
// props.value 当前单元格的值
|
||||
// props.row 当前行的数据
|
||||
// props.rowId 当前行ID
|
||||
// props.rowIndex 当前行下标
|
||||
// props.column 当前列的配置
|
||||
// props.columnIndex 当前列下标
|
||||
// props.$table vxe实例，可以调用vxe内置方法
|
||||
// props.target JVXE实例，可以调用JVXE内置方法
|
||||
// props.caseId JVXE实例唯一ID
|
||||
// props.scrolling 是否正在滚动
|
||||
// props.triggerChange 触发change事件，用于更改slot的值
|
||||
console.log('查看: ', {props})
|
||||
},
|
||||
const options = ['string', 'int', 'double', 'boolean']
|
||||
|
||||
handleDL(props) {
|
||||
// 调用删除方法
|
||||
props.target.removeRows(props.row)
|
||||
},
|
||||
|
||||
handleValueChange(event) {
|
||||
console.log('handleValueChange.event: ', event)
|
||||
},
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck() {
|
||||
this.$refs.vTable.validateTable().then(errMap => {
|
||||
if (errMap) {
|
||||
console.log('表单验证未通过：', {errMap})
|
||||
this.$message.error('验证未通过，请在控制台查看详细')
|
||||
} else {
|
||||
this.$message.success('验证通过')
|
||||
}
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
normal: `normal-${(limit + i) + 1}`,
|
||||
input: `text-${(limit + i) + 1}`,
|
||||
textarea: `textarea-${(limit + i) + 1}`,
|
||||
number: randomNumber(0, 233),
|
||||
select: options[randomNumber(0, 3)],
|
||||
select_dict: randomNumber(1, 2).toString(),
|
||||
select_multiple: (() => {
|
||||
const length = randomNumber(1, 4)
|
||||
const arr = []
|
||||
for (let j = 0; j < length; j++) {
|
||||
pushIfNotExist(arr, options[randomNumber(0, 3)])
|
||||
}
|
||||
return arr
|
||||
})(),
|
||||
select_search: options[randomNumber(0, 3)],
|
||||
datetime: randomDatetime(),
|
||||
checkbox: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet() {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', {values})
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet() {
|
||||
this.randomPage(1, 1000, true)
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage(current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let limit = (current - 1) * pageSize
|
||||
|
||||
let options = ['string', 'int', 'double', 'boolean']
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
normal: `normal-${(limit + i) + 1}`,
|
||||
input: `text-${(limit + i) + 1}`,
|
||||
textarea: `textarea-${(limit + i) + 1}`,
|
||||
number: randomNumber(0, 233),
|
||||
select: options[randomNumber(0, 3)],
|
||||
select_dict: randomNumber(1, 2).toString(),
|
||||
select_multiple: (() => {
|
||||
let length = randomNumber(1, 4)
|
||||
let arr = []
|
||||
for (let j = 0; j < length; j++) {
|
||||
pushIfNotExist(arr, options[randomNumber(0, 3)])
|
||||
}
|
||||
return arr
|
||||
})(),
|
||||
select_search: options[randomNumber(0, 3)],
|
||||
datetime: randomDatetime(),
|
||||
checkbox: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -22,163 +22,161 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import moment from 'moment'
|
||||
import { randomNumber, randomUUID } from '@/utils/util'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo2',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '下拉框_字典表搜索',
|
||||
key: 'select_dict_search',
|
||||
type: JVXETypes.selectDictSearch,
|
||||
width: '200px',
|
||||
// 【字典表配置信息】：数据库表名,显示字段名,存储字段名
|
||||
dict: 'sys_user,realname,username',
|
||||
},
|
||||
{
|
||||
title: 'JPopup',
|
||||
key: 'popup',
|
||||
type: JVXETypes.popup,
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name,sex,age',
|
||||
orgFields: 'name,sex,age',
|
||||
destFields: 'popup,popup_sex,popup_age'
|
||||
},
|
||||
{
|
||||
title: 'JP-性别',
|
||||
key: 'popup_sex',
|
||||
type: JVXETypes.select,
|
||||
dictCode: 'sex',
|
||||
disabled: true,
|
||||
width: '100px',
|
||||
},
|
||||
{
|
||||
title: 'JP-年龄',
|
||||
key: 'popup_age',
|
||||
type: JVXETypes.normal,
|
||||
width: '80px',
|
||||
},
|
||||
{
|
||||
title: '进度条',
|
||||
key: 'progress',
|
||||
type: JVXETypes.progress,
|
||||
minWidth: '120px'
|
||||
},
|
||||
{
|
||||
title: '单选',
|
||||
key: 'radio',
|
||||
type: JVXETypes.radio,
|
||||
width: '130px',
|
||||
options: [
|
||||
{text: '男', value: '1'},
|
||||
{text: '女', value: '2'},
|
||||
],
|
||||
// 允许清除选择（再点一次取消选择）
|
||||
allowClear: true
|
||||
},
|
||||
{
|
||||
title: '上传',
|
||||
key: 'upload',
|
||||
type: JVXETypes.upload,
|
||||
width: '180px',
|
||||
btnText: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG['domianURL'] + '/sys/common/upload'
|
||||
},
|
||||
{
|
||||
title: '图片上传',
|
||||
key: 'image',
|
||||
type: JVXETypes.image,
|
||||
width: '180px',
|
||||
token: true,
|
||||
},
|
||||
{
|
||||
title: '文件上传',
|
||||
key: 'file',
|
||||
type: JVXETypes.file,
|
||||
width: '180px',
|
||||
token: true,
|
||||
},
|
||||
],
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
total: 1000,
|
||||
export default {
|
||||
name: 'JVxeDemo2',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '下拉框_字典表搜索',
|
||||
key: 'select_dict_search',
|
||||
type: JVXETypes.selectDictSearch,
|
||||
width: '200px',
|
||||
// 【字典表配置信息】：数据库表名,显示字段名,存储字段名
|
||||
dict: 'sys_user,realname,username'
|
||||
},
|
||||
{
|
||||
title: 'JPopup',
|
||||
key: 'popup',
|
||||
type: JVXETypes.popup,
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name,sex,age',
|
||||
orgFields: 'name,sex,age',
|
||||
destFields: 'popup,popup_sex,popup_age'
|
||||
},
|
||||
{
|
||||
title: 'JP-性别',
|
||||
key: 'popup_sex',
|
||||
type: JVXETypes.select,
|
||||
dictCode: 'sex',
|
||||
disabled: true,
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
title: 'JP-年龄',
|
||||
key: 'popup_age',
|
||||
type: JVXETypes.normal,
|
||||
width: '80px'
|
||||
},
|
||||
{
|
||||
title: '进度条',
|
||||
key: 'progress',
|
||||
type: JVXETypes.progress,
|
||||
minWidth: '120px'
|
||||
},
|
||||
{
|
||||
title: '单选',
|
||||
key: 'radio',
|
||||
type: JVXETypes.radio,
|
||||
width: '130px',
|
||||
options: [
|
||||
{ text: '男', value: '1' },
|
||||
{ text: '女', value: '2' }
|
||||
],
|
||||
// 允许清除选择（再点一次取消选择）
|
||||
allowClear: true
|
||||
},
|
||||
{
|
||||
title: '上传',
|
||||
key: 'upload',
|
||||
type: JVXETypes.upload,
|
||||
width: '180px',
|
||||
btnText: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG.domianURL + '/sys/common/upload'
|
||||
},
|
||||
{
|
||||
title: '图片上传',
|
||||
key: 'image',
|
||||
type: JVXETypes.image,
|
||||
width: '180px',
|
||||
token: true
|
||||
},
|
||||
{
|
||||
title: '文件上传',
|
||||
key: 'file',
|
||||
type: JVXETypes.file,
|
||||
width: '180px',
|
||||
token: true
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
total: 1000
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.randomPage(this.pagination.current, this.pagination.pageSize, true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.randomPage(event.current, event.pageSize, true)
|
||||
},
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', { values })
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage (current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
},
|
||||
const randomDatetime = () => {
|
||||
const time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
created() {
|
||||
this.randomPage(this.pagination.current, this.pagination.pageSize, true)
|
||||
},
|
||||
methods: {
|
||||
const limit = (current - 1) * pageSize
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.randomPage(event.current, event.pageSize, true)
|
||||
},
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
const radio = randomNumber(0, 2)
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
select_dict_search: ['', 'admin', '', 'jero', ''][randomNumber(0, 4)],
|
||||
progress: randomNumber(0, 100),
|
||||
radio: radio ? radio.toString() : null
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet() {
|
||||
const values = this.$refs.vTable.getTableData()
|
||||
console.log('获取值:', {values})
|
||||
this.$message.success('获取值成功，请看控制台输出')
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomPage(current, pageSize, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = randomNumber(1000, 9999999999999)
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let limit = (current - 1) * pageSize
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
let radio = randomNumber(0, 2)
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
select_dict_search: ['', 'admin', '', 'jero', ''][randomNumber(0, 4)],
|
||||
progress: randomNumber(0, 100),
|
||||
radio: radio ? radio.toString() : null
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < pageSize) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, pageSize - diff)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -17,13 +17,13 @@ import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo3',
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
// 联动配置
|
||||
linkageConfig: [
|
||||
{requestData: this.requestData, key: 's1'},
|
||||
{ requestData: this.requestData, key: 's1' },
|
||||
// 可配置多个联动
|
||||
{requestData: this.loadData, key: 'level1',},
|
||||
{ requestData: this.loadData, key: 'level1' }
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
type: JVXETypes.select,
|
||||
dictCode: 'sex',
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's2',
|
||||
linkageKey: 's2'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 's3',
|
||||
linkageKey: 's3'
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '一级',
|
||||
@@ -67,7 +67,7 @@ export default {
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level2',
|
||||
linkageKey: 'level2'
|
||||
},
|
||||
{
|
||||
title: '二级',
|
||||
@@ -76,80 +76,80 @@ export default {
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level3',
|
||||
linkageKey: 'level3'
|
||||
},
|
||||
{
|
||||
title: '三级',
|
||||
key: 'level3',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
placeholder: '请选择${title}'
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7'},
|
||||
{sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14'},
|
||||
{ sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7' },
|
||||
{ sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14' }
|
||||
],
|
||||
// 模拟数据
|
||||
mockData: [
|
||||
{text: '北京市', value: '110000', parent: ''},
|
||||
{text: '天津市', value: '120000', parent: ''},
|
||||
{text: '河北省', value: '130000', parent: ''},
|
||||
{text: '上海市', value: '310000', parent: ''},
|
||||
{ text: '北京市', value: '110000', parent: '' },
|
||||
{ text: '天津市', value: '120000', parent: '' },
|
||||
{ text: '河北省', value: '130000', parent: '' },
|
||||
{ text: '上海市', value: '310000', parent: '' },
|
||||
|
||||
{text: '北京市', value: '110100', parent: '110000'},
|
||||
{text: '天津市市', value: '120100', parent: '120000'},
|
||||
{text: '石家庄市', value: '130100', parent: '130000'},
|
||||
{text: '唐山市', value: '130200', parent: '130000'},
|
||||
{text: '秦皇岛市', value: '130300', parent: '130000'},
|
||||
{text: '上海市', value: '310100', parent: '310000'},
|
||||
{ text: '北京市', value: '110100', parent: '110000' },
|
||||
{ text: '天津市市', value: '120100', parent: '120000' },
|
||||
{ text: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ text: '唐山市', value: '130200', parent: '130000' },
|
||||
{ text: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ text: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{text: '东城区', value: '110101', parent: '110100'},
|
||||
{text: '西城区', value: '110102', parent: '110100'},
|
||||
{text: '朝阳区', value: '110105', parent: '110100'},
|
||||
{text: '和平区', value: '120101', parent: '120100'},
|
||||
{text: '河东区', value: '120102', parent: '120100'},
|
||||
{text: '河西区', value: '120103', parent: '120100'},
|
||||
{text: '黄浦区', value: '310101', parent: '310100'},
|
||||
{text: '徐汇区', value: '310104', parent: '310100'},
|
||||
{text: '长宁区', value: '310105', parent: '310100'},
|
||||
{text: '长安区', value: '130102', parent: '130100'},
|
||||
{text: '桥西区', value: '130104', parent: '130100'},
|
||||
{text: '新华区', value: '130105', parent: '130100'},
|
||||
{text: '路南区', value: '130202', parent: '130200'},
|
||||
{text: '路北区', value: '130203', parent: '130200'},
|
||||
{text: '古冶区', value: '130204', parent: '130200'},
|
||||
{text: '海港区', value: '130302', parent: '130300'},
|
||||
{text: '山海关区', value: '130303', parent: '130300'},
|
||||
{text: '北戴河区', value: '130304', parent: '130300'},
|
||||
{ text: '东城区', value: '110101', parent: '110100' },
|
||||
{ text: '西城区', value: '110102', parent: '110100' },
|
||||
{ text: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ text: '和平区', value: '120101', parent: '120100' },
|
||||
{ text: '河东区', value: '120102', parent: '120100' },
|
||||
{ text: '河西区', value: '120103', parent: '120100' },
|
||||
{ text: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ text: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ text: '长宁区', value: '310105', parent: '310100' },
|
||||
{ text: '长安区', value: '130102', parent: '130100' },
|
||||
{ text: '桥西区', value: '130104', parent: '130100' },
|
||||
{ text: '新华区', value: '130105', parent: '130100' },
|
||||
{ text: '路南区', value: '130202', parent: '130200' },
|
||||
{ text: '路北区', value: '130203', parent: '130200' },
|
||||
{ text: '古冶区', value: '130204', parent: '130200' },
|
||||
{ text: '海港区', value: '130302', parent: '130300' },
|
||||
{ text: '山海关区', value: '130303', parent: '130300' },
|
||||
{ text: '北戴河区', value: '130304', parent: '130300' }
|
||||
],
|
||||
mockData1: [
|
||||
{id: '1', name: '图书馆', parentId: '0'},
|
||||
{id: '2', name: '电影院', parentId: '0'},
|
||||
{ id: '1', name: '图书馆', parentId: '0' },
|
||||
{ id: '2', name: '电影院', parentId: '0' },
|
||||
|
||||
{id: '3', name: '一楼', parentId: '1'},
|
||||
{id: '4', name: '二楼', parentId: '1'},
|
||||
{id: '5', name: '中影星美', parentId: '2'},
|
||||
{id: '6', name: '万达国际', parentId: '2'},
|
||||
{ id: '3', name: '一楼', parentId: '1' },
|
||||
{ id: '4', name: '二楼', parentId: '1' },
|
||||
{ id: '5', name: '中影星美', parentId: '2' },
|
||||
{ id: '6', name: '万达国际', parentId: '2' },
|
||||
|
||||
{id: '7', name: '技术图书', parentId: '3'},
|
||||
{id: '8', name: '财务图书', parentId: '3'},
|
||||
{id: '9', name: '儿童图书', parentId: '4'},
|
||||
{id: '10', name: '励志图书', parentId: '4'},
|
||||
{id: '11', name: '1号厅', parentId: '5'},
|
||||
{id: '12', name: '2号厅', parentId: '5'},
|
||||
{id: '13', name: 'I-MAX厅', parentId: '6'},
|
||||
{id: '14', name: '3D厅', parentId: '6'},
|
||||
],
|
||||
{ id: '7', name: '技术图书', parentId: '3' },
|
||||
{ id: '8', name: '财务图书', parentId: '3' },
|
||||
{ id: '9', name: '儿童图书', parentId: '4' },
|
||||
{ id: '10', name: '励志图书', parentId: '4' },
|
||||
{ id: '11', name: '1号厅', parentId: '5' },
|
||||
{ id: '12', name: '2号厅', parentId: '5' },
|
||||
{ id: '13', name: 'I-MAX厅', parentId: '6' },
|
||||
{ id: '14', name: '3D厅', parentId: '6' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 模拟从后台查询数据
|
||||
*/
|
||||
requestData(parent) {
|
||||
requestData (parent) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let data = this.mockData.filter(i => i.parent === parent)
|
||||
const data = this.mockData.filter(i => i.parent === parent)
|
||||
setTimeout(() => {
|
||||
resolve(data)
|
||||
}, 500)
|
||||
@@ -157,26 +157,26 @@ export default {
|
||||
},
|
||||
|
||||
// 模拟加载数据，模拟数据格式不同的情况下如何组装数据
|
||||
async loadData(parent) {
|
||||
async loadData (parent) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let parentId = parent === '' ? '0' : parent
|
||||
const parentId = parent === '' ? '0' : parent
|
||||
let data = this.mockData1.filter(i => i.parentId === parentId)
|
||||
data = data.map(item => {
|
||||
return {
|
||||
// 必须包含以下两个字段
|
||||
value: item.id,
|
||||
text: item.name,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
resolve(data)
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -31,204 +31,203 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, putAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction, postAction, putAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 即时保存示例
|
||||
export default {
|
||||
name: 'JSBCDemo',
|
||||
data() {
|
||||
return {
|
||||
// 工具栏的按钮配置
|
||||
toolbarConfig: {
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'save', 'remove', 'clearSelection']
|
||||
},
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
// 模拟保存单行数据（即时保存）
|
||||
saveRow: '/mock/vxe/immediateSaveRow',
|
||||
// 模拟保存整个表格的数据
|
||||
saveAll: '/mock/vxe/immediateSaveAll',
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
// 即时保存示例
|
||||
export default {
|
||||
name: 'JSBCDemo',
|
||||
data () {
|
||||
return {
|
||||
// 工具栏的按钮配置
|
||||
toolbarConfig: {
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'save', 'remove', 'clearSelection']
|
||||
},
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
// 模拟保存单行数据（即时保存）
|
||||
saveRow: '/mock/vxe/immediateSaveRow',
|
||||
// 模拟保存整个表格的数据
|
||||
saveAll: '/mock/vxe/immediateSaveAll'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 【整体保存】点击保存按钮时触发的事件
|
||||
handleTableSave({$table, target}) {
|
||||
// 校验整个表格
|
||||
$table.validate().then((errMap) => {
|
||||
// 加载数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 【整体保存】点击保存按钮时触发的事件
|
||||
handleTableSave ({ $table, target }) {
|
||||
// 校验整个表格
|
||||
$table.validate().then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 获取所有数据
|
||||
const tableData = target.getTableData()
|
||||
console.log('当前保存的数据是：', tableData)
|
||||
// 获取新增的数据
|
||||
const newData = target.getNewData()
|
||||
console.log('-- 新增的数据：', newData)
|
||||
// 获取删除的数据
|
||||
const deleteData = target.getDeleteData()
|
||||
console.log('-- 删除的数据：', deleteData)
|
||||
|
||||
// 【模拟保存】
|
||||
this.loading = true
|
||||
postAction(this.url.saveAll, tableData).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`保存成功！`)
|
||||
} else {
|
||||
this.$message.warn(`保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 触发单元格删除事件
|
||||
handleTableRemove (event) {
|
||||
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
|
||||
console.log('待删除的数据: ', event.deleteRows)
|
||||
// 也可以只传ID，因为可以根据ID删除
|
||||
const deleteIds = event.deleteRows.map(row => row.id)
|
||||
console.log('待删除的数据ids: ', deleteIds)
|
||||
|
||||
// 模拟请求后台删除
|
||||
this.loading = true
|
||||
window.setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('删除成功')
|
||||
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
|
||||
event.confirmRemove()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed (event) {
|
||||
const { $table, row, column } = event
|
||||
|
||||
const field = column.property
|
||||
const cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 获取所有数据
|
||||
let tableData = target.getTableData()
|
||||
console.log('当前保存的数据是：', tableData)
|
||||
// 获取新增的数据
|
||||
let newData = target.getNewData()
|
||||
console.log('-- 新增的数据：', newData)
|
||||
// 获取删除的数据
|
||||
let deleteData = target.getDeleteData()
|
||||
console.log('-- 删除的数据：', deleteData)
|
||||
|
||||
// 【模拟保存】
|
||||
this.loading = true
|
||||
postAction(this.url.saveAll, tableData).then(res => {
|
||||
const hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
console.log('即时保存数据：', row)
|
||||
putAction(this.url.saveRow, row).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`保存成功！`)
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
} else {
|
||||
this.$message.warn(`保存失败：` + res.message)
|
||||
this.$message.warn(`"${column.title}"保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
hideLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 触发单元格删除事件
|
||||
handleTableRemove(event) {
|
||||
|
||||
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
|
||||
console.log('待删除的数据: ', event.deleteRows)
|
||||
// 也可以只传ID，因为可以根据ID删除
|
||||
let deleteIds = event.deleteRows.map(row => row.id)
|
||||
console.log('待删除的数据ids: ', deleteIds)
|
||||
|
||||
// 模拟请求后台删除
|
||||
this.loading = true
|
||||
window.setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('删除成功')
|
||||
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
|
||||
event.confirmRemove()
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed(event) {
|
||||
let {$table, row, column} = event
|
||||
|
||||
let field = column.property
|
||||
let cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】
|
||||
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
console.log('即时保存数据：', row)
|
||||
putAction(this.url.saveRow, row).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
} else {
|
||||
this.$message.warn(`"${column.title}"保存失败：` + res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
// 当选择的行变化时触发的事件
|
||||
handleSelectRowChange(event) {
|
||||
this.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 当分页参数变化时触发的事件
|
||||
handlePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
// 当选择的行变化时触发的事件
|
||||
handleSelectRowChange (event) {
|
||||
this.selectedRows = event.selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -118,161 +118,161 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 弹出子表示例
|
||||
export default {
|
||||
name: 'PopupSubTable',
|
||||
data() {
|
||||
return {
|
||||
// 弹出子表示例
|
||||
export default {
|
||||
name: 'PopupSubTable',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'call', title: '呼叫', width: '80px' },
|
||||
{ key: 'len', title: '长', width: '80px' },
|
||||
{ key: 'ton', title: '吨', width: '120px' },
|
||||
{ key: 'payer', title: '付款方', width: '120px' },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
minWidth: '180px',
|
||||
// 是否点击显示详细信息
|
||||
// 只有当前单元格不能编辑的时候才能生效
|
||||
// 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
|
||||
showDetails: true
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px' }
|
||||
],
|
||||
// 子表的信息
|
||||
subTable: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
|
||||
{key: 'call', title: '呼叫', width: '80px'},
|
||||
{key: 'len', title: '长', width: '80px'},
|
||||
{key: 'ton', title: '吨', width: '120px'},
|
||||
{key: 'payer', title: '付款方', width: '120px'},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
minWidth: '180px',
|
||||
// 是否点击显示详细信息
|
||||
// 只有当前单元格不能编辑的时候才能生效
|
||||
// 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
|
||||
showDetails: true
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px'},
|
||||
],
|
||||
// 子表的信息
|
||||
subTable: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
// 主表form表单字段
|
||||
mainForm: {
|
||||
id: '',
|
||||
num: '',
|
||||
ship_name: '',
|
||||
call: '',
|
||||
len: '',
|
||||
ton: '',
|
||||
payer: '',
|
||||
count: '',
|
||||
company: '',
|
||||
trend: '',
|
||||
},
|
||||
// form表单 col
|
||||
labelCol: {span: 4},
|
||||
wrapperCol: {span: 20},
|
||||
rules: {
|
||||
num: [
|
||||
{required: true, message: '必须输入序号'},
|
||||
],
|
||||
},
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', minWidth: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
},
|
||||
// 主表form表单字段
|
||||
mainForm: {
|
||||
id: '',
|
||||
num: '',
|
||||
ship_name: '',
|
||||
call: '',
|
||||
len: '',
|
||||
ton: '',
|
||||
payer: '',
|
||||
count: '',
|
||||
company: '',
|
||||
trend: ''
|
||||
},
|
||||
// form表单 col
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 20 },
|
||||
rules: {
|
||||
num: [
|
||||
{ required: true, message: '必须输入序号' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
log: console.log,
|
||||
|
||||
// 加载数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = { pageNo: 1, pageSize: 30 }
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
log: console.log,
|
||||
|
||||
// 加载数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {pageNo: 1, pageSize: 30}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
// 查询子表数据
|
||||
loadSubData (row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.subTable.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.subTable.currentRowId = row.id
|
||||
const formData = { pageNo: 1, pageSize: 30, parentId: row.id }
|
||||
this.subTable.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
this.subTable.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
this.subTable.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData(row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.subTable.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.subTable.currentRowId = row.id
|
||||
let formData = {pageNo: 1, pageSize: 30, parentId: row.id}
|
||||
this.subTable.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.subTable.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.subTable.loading = false
|
||||
})
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 详细信息里点了确认按钮
|
||||
handleDetailsConfirm({row, $table, callback}) {
|
||||
console.log('保存的数据：', row)
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 校验子表，如果需要的话，可以操作下面这个对象：
|
||||
// this.$refs.subFormTable
|
||||
|
||||
callback(true)
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('保存成功')
|
||||
}, 1000)
|
||||
} else {
|
||||
callback(false)
|
||||
this.$message.warn('校验失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 详细信息里点了确认按钮
|
||||
handleDetailsConfirm ({ row, $table, callback }) {
|
||||
console.log('保存的数据：', row)
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 校验子表，如果需要的话，可以操作下面这个对象：
|
||||
// this.$refs.subFormTable
|
||||
|
||||
callback(true)
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$message.success('保存成功')
|
||||
}, 1000)
|
||||
} else {
|
||||
callback(false)
|
||||
this.$message.warn('校验失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -35,85 +35,85 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 无痕刷新示例
|
||||
export default {
|
||||
name: 'SocketReload',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
// 是否启用日历刷新效果
|
||||
reloadEffect: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据
|
||||
loadData() {
|
||||
let formData = {pageNo: 1, pageSize: 200}
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
// 无痕刷新示例
|
||||
export default {
|
||||
name: 'SocketReload',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{ key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{ key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input },
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed(event) {
|
||||
let {$table, row, column} = event
|
||||
|
||||
let field = column.property
|
||||
let cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】（此处需要替换成真实的请求）
|
||||
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
// 发送更新消息
|
||||
this.$refs.table.socketSendUpdateRow(row)
|
||||
}, 555)
|
||||
}
|
||||
})
|
||||
// 是否启用日历刷新效果
|
||||
reloadEffect: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据
|
||||
loadData () {
|
||||
const formData = { pageNo: 1, pageSize: 200 }
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
},
|
||||
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 单元格编辑完成之后触发的事件
|
||||
handleEditClosed (event) {
|
||||
const { $table, row, column } = event
|
||||
|
||||
const field = column.property
|
||||
const cellValue = row[field]
|
||||
// 判断单元格值是否被修改
|
||||
if ($table.isUpdateByRow(row, field)) {
|
||||
// 校验当前行
|
||||
$table.validate(row).then((errMap) => {
|
||||
// 校验通过
|
||||
if (!errMap) {
|
||||
// 【模拟保存】（此处需要替换成真实的请求）
|
||||
const hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
this.$message.success(`"${column.title}"保存成功！`)
|
||||
// 局部更新单元格为已保存状态
|
||||
$table.reloadRow(row, null, field)
|
||||
// 发送更新消息
|
||||
this.$refs.table.socketSendUpdateRow(row)
|
||||
}, 555)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -52,237 +52,236 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
|
||||
export default {
|
||||
name: 'ErpTemplate',
|
||||
data() {
|
||||
return {
|
||||
toolbarConfig: {
|
||||
// prefix 前缀；suffix 后缀
|
||||
slot: ['prefix', 'suffix'],
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'remove', 'clearSelection']
|
||||
},
|
||||
export default {
|
||||
name: 'ErpTemplate',
|
||||
data () {
|
||||
return {
|
||||
toolbarConfig: {
|
||||
// prefix 前缀；suffix 后缀
|
||||
slot: ['prefix', 'suffix'],
|
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
||||
btn: ['add', 'remove', 'clearSelection']
|
||||
},
|
||||
|
||||
expandConfig: {
|
||||
// 是否只能同时展开一行
|
||||
accordion: true
|
||||
},
|
||||
expandConfig: {
|
||||
// 是否只能同时展开一行
|
||||
accordion: true
|
||||
},
|
||||
|
||||
// 子表 tabs
|
||||
subTabs: {
|
||||
show: false,
|
||||
// 是否展开
|
||||
expand: true,
|
||||
// 是否自动展开
|
||||
autoExpand: true,
|
||||
},
|
||||
// 子表 tabs
|
||||
subTabs: {
|
||||
show: false,
|
||||
// 是否展开
|
||||
expand: true,
|
||||
// 是否自动展开
|
||||
autoExpand: true
|
||||
},
|
||||
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
showTotal: (total, range) => {
|
||||
// 此处为 jsx 语法
|
||||
let text = <span>{range[0] + '-' + range[1] + ' 共 ' + total + ' 条'}</span>
|
||||
// 判断子表是否显示，如果显示就渲染展开收起按钮
|
||||
if (this.subTabs.show) {
|
||||
let expand = (<span>
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
showTotal: (total, range) => {
|
||||
// 此处为 jsx 语法
|
||||
const text = <span>{range[0] + '-' + range[1] + ' 共 ' + total + ' 条'}</span>
|
||||
// 判断子表是否显示，如果显示就渲染展开收起按钮
|
||||
if (this.subTabs.show) {
|
||||
const expand = (<span>
|
||||
<a-button type="link" onClick={this.handleToggleTabs}>
|
||||
<a-icon type={this.subTabs.expand ? 'up' : 'down'}/>
|
||||
<span>{this.subTabs.expand ? '收起' : '展开'}</span>
|
||||
</a-button>
|
||||
<a-checkbox vModel={this.subTabs.autoExpand}>自动展开</a-checkbox>
|
||||
</span>)
|
||||
// 返回多个dom用数组
|
||||
return [expand, text]
|
||||
} else {
|
||||
// 直接返回单个dom
|
||||
return text
|
||||
}
|
||||
},
|
||||
// 返回多个dom用数组
|
||||
return [expand, text]
|
||||
} else {
|
||||
// 直接返回单个dom
|
||||
return text
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
currentSubRow: null,
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '990px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
currentRowId: null,
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 10, pageSizeOptions: ['5', '10', '20', '30'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
currentSubRow: null,
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableHeight () {
|
||||
const { show, expand } = this.subTabs
|
||||
return show ? (expand ? 350 : 482) : 482
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData (row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.table2.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.table2.currentRowId = row.id
|
||||
this.loadTable2Data()
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableHeight() {
|
||||
let {show, expand} = this.subTabs
|
||||
return show ? (expand ? 350 : 482) : 482
|
||||
},
|
||||
// 查询子表数据
|
||||
loadTable2Data () {
|
||||
const table2 = this.table2
|
||||
const formData = {
|
||||
parentId: table2.currentRowId,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
table2.selectedRows = []
|
||||
table2.dataSource = res.result.records
|
||||
table2.pagination.total = res.result.total
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
table2.loading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.table1.selectedRows = event.selectedRows
|
||||
this.subTabs.show = true
|
||||
if (this.subTabs.autoExpand) {
|
||||
this.subTabs.expand = true
|
||||
}
|
||||
this.loadSubData(event.selectedRows[0])
|
||||
},
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 查询子表数据
|
||||
loadSubData(row) {
|
||||
if (row) {
|
||||
// 这里一定要做限制，限制不能重复查询，否者会出现死循环
|
||||
if (this.table2.currentRowId === row.id) {
|
||||
return true
|
||||
}
|
||||
this.table2.currentRowId = row.id
|
||||
this.loadTable2Data()
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 查询子表数据
|
||||
loadTable2Data() {
|
||||
let table2 = this.table2
|
||||
let formData = {
|
||||
parentId: table2.currentRowId,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 将查询的数据赋值给 dataSource
|
||||
table2.selectedRows = []
|
||||
table2.dataSource = res.result.records
|
||||
table2.pagination.total = res.result.total
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.table1.selectedRows = event.selectedRows
|
||||
this.subTabs.show = true
|
||||
if (this.subTabs.autoExpand) {
|
||||
this.subTabs.expand = true
|
||||
}
|
||||
this.loadSubData(event.selectedRows[0])
|
||||
},
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 展开或收起子表tabs
|
||||
handleToggleTabs() {
|
||||
this.subTabs.expand = !this.subTabs.expand
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 展开或收起子表tabs
|
||||
handleToggleTabs () {
|
||||
this.subTabs.expand = !this.subTabs.expand
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -305,4 +304,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -24,19 +24,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Template1 from './Template1'
|
||||
import Template2 from './Template2'
|
||||
import Template3 from './Template3'
|
||||
import Template4 from './Template4'
|
||||
import Template5 from './Template5'
|
||||
import ErpTemplate from './ErpTemplate'
|
||||
import Template1 from './Template1'
|
||||
import Template2 from './Template2'
|
||||
import Template3 from './Template3'
|
||||
import Template4 from './Template4'
|
||||
import Template5 from './Template5'
|
||||
import ErpTemplate from './ErpTemplate'
|
||||
|
||||
export default {
|
||||
name: 'LayoutDemo',
|
||||
components: {Template5, Template4, Template3, Template2, Template1, ErpTemplate}
|
||||
}
|
||||
export default {
|
||||
name: 'LayoutDemo',
|
||||
components: { Template5, Template4, Template3, Template2, Template1, ErpTemplate }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -60,271 +60,271 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】上面父、左下子、右下孙
|
||||
export default {
|
||||
name: 'Template1',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
// 【多种布局模板】上面父、左下子、右下孙
|
||||
export default {
|
||||
name: 'Template1',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
formatter ({ cellValue, row, column }) {
|
||||
let foo = ''
|
||||
if (row.company === '佧伒侾佯有限公司') {
|
||||
foo += '-233'
|
||||
}
|
||||
return cellValue + foo
|
||||
}
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input,
|
||||
formatter({cellValue, row, column}) {
|
||||
let foo = ''
|
||||
if (row.company === '佧伒侾佯有限公司') {
|
||||
foo += '-233'
|
||||
}
|
||||
return cellValue + foo
|
||||
},
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table3: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input},
|
||||
{key: 'power', title: '马力', width: '120px', type: JVXETypes.input},
|
||||
{key: 'nature', title: '性质', width: '120px', type: JVXETypes.input},
|
||||
{key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.inputNumber },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.inputNumber },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 孙级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table3: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'power', title: '马力', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'nature', title: '性质', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'departure_time', title: '发船时间', width: '180px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' (row) {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow'](row) {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table2 【子表】选择的数据发生了变化
|
||||
['table2.lastRow']() {
|
||||
this.loadTable3Data()
|
||||
},
|
||||
// 监听table2 【子表】选择的数据发生了变化
|
||||
'table2.lastRow' () {
|
||||
this.loadTable3Data()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table2, event)
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 加载table3【孙表】的数据，根据子表的id进行查询
|
||||
loadTable3Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table2.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table3.pagination.total = 0
|
||||
this.table3.dataSource = []
|
||||
this.table3.selectedRows = []
|
||||
return
|
||||
} else if (this.table2.lastRow == null) {
|
||||
this.table2.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table2.lastRow.id,
|
||||
pageNo: this.table3.pagination.current,
|
||||
pageSize: this.table3.pagination.pageSize
|
||||
}
|
||||
this.table3.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table3.pagination.total = res.result.total
|
||||
this.table3.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
}).finally(() => {
|
||||
this.table3.loading = false
|
||||
})
|
||||
},
|
||||
// 当table3【孙表】分页参数变化时触发的事件
|
||||
handleTable3PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table3.pagination.current = event.current
|
||||
this.table3.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable3Data()
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table2, event)
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// 加载table3【孙表】的数据，根据子表的id进行查询
|
||||
loadTable3Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table2.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table3.pagination.total = 0
|
||||
this.table3.dataSource = []
|
||||
this.table3.selectedRows = []
|
||||
return
|
||||
} else if (this.table2.lastRow == null) {
|
||||
this.table2.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table2.lastRow.id,
|
||||
pageNo: this.table3.pagination.current,
|
||||
pageSize: this.table3.pagination.pageSize
|
||||
}
|
||||
this.table3.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table3.pagination.total = res.result.total
|
||||
this.table3.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table3.loading = false
|
||||
})
|
||||
},
|
||||
// 当table3【孙表】分页参数变化时触发的事件
|
||||
handleTable3PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table3.pagination.current = event.current
|
||||
this.table3.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable3Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -53,208 +53,207 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】 左边选择后，记录选到右侧，右侧是父、子
|
||||
export default {
|
||||
name: 'Template2',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
// 【多种布局模板】 左边选择后，记录选到右侧，右侧是父、子
|
||||
export default {
|
||||
name: 'Template2',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow']() {
|
||||
this.loadTable2Data()
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
}
|
||||
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange (event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
|
||||
// 加载table2【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// table2【子表】当选择的行变化时触发的事件
|
||||
handleTable2SelectRowChange(event) {
|
||||
this.table2.selectedRows = event.selectedRows
|
||||
},
|
||||
|
||||
// 当table1【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
// 当table2【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -52,194 +52,194 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧上边是主表、下边是子表，右侧是选中数据
|
||||
export default {
|
||||
name: 'Template3',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 主表的配置信息
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
// 【多种布局模板】左侧上边是主表、下边是子表，右侧是选中数据
|
||||
export default {
|
||||
name: 'Template3',
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
// 主表的配置信息
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{key: 'company', title: '公司', width: '180px', type: JVXETypes.input},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{ key: 'company', title: '公司', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 子表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
'table1.lastRow' (row) {
|
||||
this.loadTable2Data()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1（主表）的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// 加载table2（子表）的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 【主表】选择的数据发生了变化
|
||||
['table1.lastRow'](row) {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// table1【主表】当分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
// 分页后重置选择
|
||||
this.table1.selectedRows = []
|
||||
this.loadTable2Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1（主表）的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// 加载table2（子表）的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
// table2【子表】当分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table1【主表】当分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
// 分页后重置选择
|
||||
this.table1.selectedRows = []
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
// table2【子表】当分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table1【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -71,277 +71,271 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
export default {
|
||||
name: 'Template4',
|
||||
data() {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
export default {
|
||||
name: 'Template4',
|
||||
data () {
|
||||
return {
|
||||
table1: {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 200,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['10', '20', '30', '100', '200'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
table3: {
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
},
|
||||
table4: {
|
||||
loading: false,
|
||||
pagination: {current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0},
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{key: 'dd_num', title: '调度序号', width: '120px'},
|
||||
{key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input},
|
||||
{key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input},
|
||||
{key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
},
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 子级表的配置信息 （配置和主表的完全一致，就不写冗余的注释了）
|
||||
table2: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
table3: {
|
||||
// 最后选中的行
|
||||
lastRow: null,
|
||||
// 选择的行
|
||||
selectedRows: []
|
||||
},
|
||||
table4: {
|
||||
loading: false,
|
||||
pagination: { current: 1, pageSize: 200, pageSizeOptions: ['100', '200'], total: 0 },
|
||||
selectedRows: [],
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{ key: 'dd_num', title: '调度序号', width: '120px' },
|
||||
{ key: 'tug', title: '拖轮', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_start_time', title: '作业开始时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'work_stop_time', title: '作业结束时间', width: '180px', type: JVXETypes.input },
|
||||
{ key: 'type', title: '船舶分类', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'port_area', title: '所属港区', width: '120px', type: JVXETypes.input }
|
||||
]
|
||||
},
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 左上【主表】选择的数据发生了变化
|
||||
'table1.lastRow' () {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听table1 左上【主表】选择的数据发生了变化
|
||||
['table1.lastRow']() {
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 监听table3 右上【主表】选择的数据发生了变化
|
||||
['table3.lastRow']() {
|
||||
this.loadTable4Data()
|
||||
},
|
||||
// 监听table3 右上【主表】选择的数据发生了变化
|
||||
'table3.lastRow' () {
|
||||
this.loadTable4Data()
|
||||
}
|
||||
|
||||
},
|
||||
created () {
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1左上【主表】的数据
|
||||
loadTable1Data () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
created() {
|
||||
|
||||
// 当table1左上【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载table1左上【主表】的数据
|
||||
loadTable1Data() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.table1.pagination.current,
|
||||
pageSize: this.table1.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.table1.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.table1.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.table1.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.table1.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.table1.loading = false
|
||||
})
|
||||
},
|
||||
// table1左上【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
|
||||
// 当table1左上【主表】分页参数变化时触发的事件
|
||||
handleTable1PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table1.pagination.current = event.current
|
||||
this.table1.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable1Data()
|
||||
},
|
||||
|
||||
|
||||
// table1左上【主表】当选择的行变化时触发的事件
|
||||
handleTable1SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table1, event)
|
||||
},
|
||||
|
||||
|
||||
// 加载table2左下【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data() {
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
// 加载table2左下【子表】的数据，根据主表的id进行查询
|
||||
loadTable2Data () {
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table1.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table2.pagination.total = 0
|
||||
this.table2.dataSource = []
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
return
|
||||
} else if (this.table1.lastRow == null) {
|
||||
this.table1.lastRow = selectedRows[selectedRows.length - 1]
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table1.lastRow.id,
|
||||
pageNo: this.table2.pagination.current,
|
||||
pageSize: this.table2.pagination.pageSize
|
||||
}
|
||||
this.table2.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table2.pagination.total = res.result.total
|
||||
this.table2.dataSource = res.result.records
|
||||
this.table2.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
}).finally(() => {
|
||||
this.table2.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table2左下【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
// 当table2左下【子表】分页参数变化时触发的事件
|
||||
handleTable2PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table2.pagination.current = event.current
|
||||
this.table2.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable2Data()
|
||||
},
|
||||
|
||||
// table3右上【主表】当选择的行变化时触发的事件
|
||||
handleTable3SelectRowChange (event) {
|
||||
this.handleTableSelectRowChange(this.table3, event)
|
||||
},
|
||||
|
||||
// table3右上【主表】当选择的行变化时触发的事件
|
||||
handleTable3SelectRowChange(event) {
|
||||
this.handleTableSelectRowChange(this.table3, event)
|
||||
},
|
||||
|
||||
|
||||
// 加载table4右下【子表】的数据，根据主表的id进行查询
|
||||
loadTable4Data() {
|
||||
let parentIds = []
|
||||
// 如果主表没有选择，则不查询
|
||||
let selectedRows = this.table3.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table4.pagination.total = 0
|
||||
this.table4.dataSource = []
|
||||
// 加载table4右下【子表】的数据，根据主表的id进行查询
|
||||
loadTable4Data () {
|
||||
const parentIds = []
|
||||
// 如果主表没有选择，则不查询
|
||||
const selectedRows = this.table3.selectedRows
|
||||
if (!selectedRows || selectedRows.length === 0) {
|
||||
this.table4.pagination.total = 0
|
||||
this.table4.dataSource = []
|
||||
this.table4.selectedRows = []
|
||||
return
|
||||
} else if (this.table3.lastRow == null) {
|
||||
this.table3.lastRow = selectedRows[selectedRows.length - 1]
|
||||
}
|
||||
const formData = {
|
||||
parentId: this.table3.lastRow.id,
|
||||
pageNo: this.table4.pagination.current,
|
||||
pageSize: this.table4.pagination.pageSize
|
||||
}
|
||||
this.table4.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table4.pagination.total = res.result.total
|
||||
this.table4.dataSource = res.result.records
|
||||
this.table4.selectedRows = []
|
||||
return
|
||||
} else if (this.table3.lastRow == null) {
|
||||
this.table3.lastRow = selectedRows[selectedRows.length - 1]
|
||||
} else {
|
||||
this.$error({ title: '子表查询失败', content: res.message })
|
||||
}
|
||||
let formData = {
|
||||
parentId: this.table3.lastRow.id,
|
||||
pageNo: this.table4.pagination.current,
|
||||
pageSize: this.table4.pagination.pageSize
|
||||
}
|
||||
this.table4.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.table4.pagination.total = res.result.total
|
||||
this.table4.dataSource = res.result.records
|
||||
this.table4.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '子表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.table4.loading = false
|
||||
})
|
||||
},
|
||||
}).finally(() => {
|
||||
this.table4.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 当table4右下【子表】分页参数变化时触发的事件
|
||||
handleTable4PageChange (event) {
|
||||
// 重新赋值
|
||||
this.table4.pagination.current = event.current
|
||||
this.table4.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable4Data()
|
||||
},
|
||||
|
||||
// 当table4右下【子表】分页参数变化时触发的事件
|
||||
handleTable4PageChange(event) {
|
||||
// 重新赋值
|
||||
this.table4.pagination.current = event.current
|
||||
this.table4.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadTable4Data()
|
||||
},
|
||||
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange(table, event) {
|
||||
let {row, action, selectedRows, $table} = event
|
||||
// 获取最后一个选中的
|
||||
let lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
/** 公共方法：处理表格选中变化事件 */
|
||||
handleTableSelectRowChange (table, event) {
|
||||
const { row, action, selectedRows, $table } = event
|
||||
// 获取最后一个选中的
|
||||
const lastSelected = selectedRows[selectedRows.length - 1]
|
||||
if (action === 'selected') {
|
||||
table.lastRow = row
|
||||
} else if (action === 'selected-all') {
|
||||
// 取消全选
|
||||
if (selectedRows.length === 0) {
|
||||
table.lastRow = null
|
||||
} else if (!table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
},
|
||||
|
||||
} else if (action === 'unselected' && row === table.lastRow) {
|
||||
table.lastRow = lastSelected
|
||||
}
|
||||
$table.setCurrentRow(table.lastRow)
|
||||
table.selectedRows = selectedRows
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -32,186 +32,185 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
|
||||
// 【多种布局模板】左侧为树，右侧为行编辑
|
||||
export default {
|
||||
name: 'Template5',
|
||||
data() {
|
||||
return {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 50,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['50'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0,
|
||||
// 【多种布局模板】左侧为树，右侧为行编辑
|
||||
export default {
|
||||
name: 'Template5',
|
||||
data () {
|
||||
return {
|
||||
// 是否正在加载
|
||||
loading: false,
|
||||
// 分页器参数
|
||||
pagination: {
|
||||
// 当前页码
|
||||
current: 1,
|
||||
// 每页的条数
|
||||
pageSize: 50,
|
||||
// 可切换的条数
|
||||
pageSizeOptions: ['50'],
|
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
|
||||
total: 0
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{ key: 'num', title: '序号', width: '80px' },
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
// 选择的行
|
||||
selectedRows: [],
|
||||
// 数据源，控制表格的数据
|
||||
dataSource: [],
|
||||
// 列配置，控制表格显示的列
|
||||
columns: [
|
||||
{key: 'num', title: '序号', width: '80px'},
|
||||
{
|
||||
// 字段key，跟后台数据的字段名匹配
|
||||
key: 'ship_name',
|
||||
// 列的标题
|
||||
title: '船名',
|
||||
// 列的宽度
|
||||
width: '180px',
|
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||||
{key: 'count', title: '数', width: '40px'},
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||||
],
|
||||
// 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
|
||||
treeData: [
|
||||
// 第1级数据
|
||||
{
|
||||
title: '1-10页',
|
||||
key: '1-10',
|
||||
// 第2级数据
|
||||
children: [
|
||||
{title: '第 1 页', key: 1, slots: {icon: 'myIcon'}},
|
||||
{title: '第 2 页', key: 2, slots: {icon: 'myIcon'}},
|
||||
{
|
||||
title: '第 3 页',
|
||||
key: 3,
|
||||
slots: {icon: 'myIcon'},
|
||||
// 第3级数据
|
||||
children: [
|
||||
{title: '第 333 页', key: 333, slots: {icon: 'myIcon'}},
|
||||
{title: '第 444 页', key: 444, slots: {icon: 'myIcon'}},
|
||||
{title: '第 555 页', key: 555, slots: {icon: 'myIcon'}},
|
||||
// 第4第5级以此类推，加上 children 属性即可
|
||||
],
|
||||
},
|
||||
{title: '第 4 页', key: 4, slots: {icon: 'myIcon'}},
|
||||
{title: '第 5 页', key: 5, slots: {icon: 'myIcon'}},
|
||||
{title: '第 6 页', key: 6, slots: {icon: 'myIcon'}},
|
||||
{title: '第 7 页', key: 7, slots: {icon: 'myIcon'}},
|
||||
{title: '第 8 页', key: 8, slots: {icon: 'myIcon'}},
|
||||
{title: '第 9 页', key: 9, slots: {icon: 'myIcon'}},
|
||||
{title: '第 10 页', key: 10, slots: {icon: 'myIcon'}},
|
||||
],
|
||||
slots: {icon: 'myIcon'},
|
||||
},
|
||||
{
|
||||
title: '11-20页',
|
||||
key: '11-20',
|
||||
children: [
|
||||
{title: '第 11 页', key: 11, slots: {icon: 'myIcon'}},
|
||||
{title: '第 12 页', key: 12, slots: {icon: 'myIcon'}},
|
||||
{title: '第 13 页', key: 13, slots: {icon: 'myIcon'}},
|
||||
{title: '第 14 页', key: 14, slots: {icon: 'myIcon'}},
|
||||
{title: '第 15 页', key: 15, slots: {icon: 'myIcon'}},
|
||||
{title: '第 16 页', key: 16, slots: {icon: 'myIcon'}},
|
||||
{title: '第 17 页', key: 17, slots: {icon: 'myIcon'}},
|
||||
{title: '第 18 页', key: 18, slots: {icon: 'myIcon'}},
|
||||
{title: '第 19 页', key: 19, slots: {icon: 'myIcon'}},
|
||||
{title: '第 20 页', key: 20, slots: {icon: 'myIcon'}},
|
||||
],
|
||||
slots: {icon: 'myIcon'},
|
||||
},
|
||||
],
|
||||
// 树展开的列，默认 1-10
|
||||
treeExpandedKeys: ['1-10'],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData',
|
||||
{ key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'len', title: '长', width: '80px', type: JVXETypes.input },
|
||||
{ key: 'ton', title: '吨', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input },
|
||||
{ key: 'count', title: '数', width: '40px' },
|
||||
{
|
||||
key: 'company',
|
||||
title: '公司',
|
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
|
||||
// 如果要做占满表格的列可以这么写
|
||||
minWidth: '180px',
|
||||
type: JVXETypes.input
|
||||
},
|
||||
{ key: 'trend', title: '动向', width: '120px', type: JVXETypes.input }
|
||||
],
|
||||
// 树的数据，这里模拟分页固定数据，实际情况应该是后台查出来的数据
|
||||
treeData: [
|
||||
// 第1级数据
|
||||
{
|
||||
title: '1-10页',
|
||||
key: '1-10',
|
||||
// 第2级数据
|
||||
children: [
|
||||
{ title: '第 1 页', key: 1, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 2 页', key: 2, slots: { icon: 'myIcon' } },
|
||||
{
|
||||
title: '第 3 页',
|
||||
key: 3,
|
||||
slots: { icon: 'myIcon' },
|
||||
// 第3级数据
|
||||
children: [
|
||||
{ title: '第 333 页', key: 333, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 444 页', key: 444, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 555 页', key: 555, slots: { icon: 'myIcon' } }
|
||||
// 第4第5级以此类推，加上 children 属性即可
|
||||
]
|
||||
},
|
||||
{ title: '第 4 页', key: 4, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 5 页', key: 5, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 6 页', key: 6, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 7 页', key: 7, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 8 页', key: 8, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 9 页', key: 9, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 10 页', key: 10, slots: { icon: 'myIcon' } }
|
||||
],
|
||||
slots: { icon: 'myIcon' }
|
||||
},
|
||||
{
|
||||
title: '11-20页',
|
||||
key: '11-20',
|
||||
children: [
|
||||
{ title: '第 11 页', key: 11, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 12 页', key: 12, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 13 页', key: 13, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 14 页', key: 14, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 15 页', key: 15, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 16 页', key: 16, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 17 页', key: 17, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 18 页', key: 18, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 19 页', key: 19, slots: { icon: 'myIcon' } },
|
||||
{ title: '第 20 页', key: 20, slots: { icon: 'myIcon' } }
|
||||
],
|
||||
slots: { icon: 'myIcon' }
|
||||
}
|
||||
],
|
||||
// 树展开的列，默认 1-10
|
||||
treeExpandedKeys: ['1-10'],
|
||||
// 查询url地址
|
||||
url: {
|
||||
getData: '/mock/vxe/getData'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载行编辑的数据
|
||||
loadData () {
|
||||
// 封装查询条件
|
||||
const formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({ title: '主表查询失败', content: res.message })
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleTablePageChange (event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
this.loadData()
|
||||
// 判断树展开的key
|
||||
if (event.current <= 10) {
|
||||
this.treeExpandedKeys = ['1-10']
|
||||
} else {
|
||||
this.treeExpandedKeys = ['11-20']
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 加载行编辑的数据
|
||||
loadData() {
|
||||
// 封装查询条件
|
||||
let formData = {
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
// 调用查询数据接口
|
||||
this.loading = true
|
||||
getAction(this.url.getData, formData).then(res => {
|
||||
if (res.success) {
|
||||
// 后台查询回来的 total，数据总数量
|
||||
this.pagination.total = res.result.total
|
||||
// 将查询的数据赋值给 dataSource
|
||||
this.dataSource = res.result.records
|
||||
// 重置选择
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.$error({title: '主表查询失败', content: res.message})
|
||||
}
|
||||
}).finally(() => {
|
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleTablePageChange(event) {
|
||||
// 重新赋值
|
||||
this.pagination.current = event.current
|
||||
this.pagination.pageSize = event.pageSize
|
||||
// 查询数据
|
||||
// 树被选择触发的事件
|
||||
handleTreeSelect (selectedKeys) {
|
||||
const key = selectedKeys[0]
|
||||
if (typeof key === 'string') {
|
||||
// 控制树展开为当前选择的列
|
||||
this.treeExpandedKeys = selectedKeys
|
||||
} else {
|
||||
this.pagination.current = key
|
||||
this.loadData()
|
||||
// 判断树展开的key
|
||||
if (event.current <= 10) {
|
||||
this.treeExpandedKeys = ['1-10']
|
||||
} else {
|
||||
this.treeExpandedKeys = ['11-20']
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeSelect(selectedKeys) {
|
||||
let key = selectedKeys[0]
|
||||
if (typeof key === 'string') {
|
||||
// 控制树展开为当前选择的列
|
||||
this.treeExpandedKeys = selectedKeys
|
||||
} else {
|
||||
this.pagination.current = key
|
||||
this.loadData()
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeExpand(expandedKeys) {
|
||||
this.treeExpandedKeys = expandedKeys
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 树被选择触发的事件
|
||||
handleTreeExpand (expandedKeys) {
|
||||
this.treeExpandedKeys = expandedKeys
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@@ -221,4 +220,4 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -160,212 +160,213 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroDemoModal from './modules/JeroDemoModal'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery.vue';
|
||||
import JInput from '@/components/jero/JInput.vue';
|
||||
import JeroDemoTabsModal from './modules/JeroDemoTabsModal'
|
||||
import {initDictOptions, filterDictText,filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import Vue from 'vue'
|
||||
import { filterObj } from '@/utils/util';
|
||||
import JeroDemoModal from './modules/JeroDemoModal'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery.vue'
|
||||
import JInput from '@/components/jero/JInput.vue'
|
||||
import JeroDemoTabsModal from './modules/JeroDemoTabsModal'
|
||||
import { initDictOptions, filterDictText, filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import Vue from 'vue'
|
||||
import { filterObj } from '@/utils/util'
|
||||
|
||||
//高级查询modal需要参数
|
||||
const superQueryFieldList=[
|
||||
{
|
||||
type: "string",
|
||||
value: "name",
|
||||
text: "用户名"
|
||||
}, {
|
||||
type: "int",
|
||||
value: "age",
|
||||
text: "年龄"
|
||||
}, {
|
||||
type: "date",
|
||||
value: "birthday",
|
||||
text: "生日"
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: "JeroDemoList",
|
||||
mixins:[JeroListMixin],
|
||||
components: {
|
||||
JeroDemoModal,
|
||||
JSuperQuery,
|
||||
JeroDemoTabsModal,
|
||||
JInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '单表示例列表',
|
||||
//字典数组缓存
|
||||
sexDictOptions: [],
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeroDemo/importExcel`,
|
||||
//表头
|
||||
columns:[],
|
||||
//列设置
|
||||
settingColumns:[],
|
||||
//列定义
|
||||
defColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
align: "center",
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '关键词',
|
||||
align: "center",
|
||||
dataIndex: 'keyWord'
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
align: "center",
|
||||
dataIndex: 'punchTime'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex',
|
||||
customRender: (text) => {
|
||||
//字典值替换通用方法
|
||||
return filterDictTextByCache('sex', text);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
align: "center",
|
||||
dataIndex: 'age'
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
align: "center",
|
||||
dataIndex: 'birthday'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
align: "center",
|
||||
dataIndex: 'email'
|
||||
},
|
||||
{
|
||||
title: '个人简介',
|
||||
align: "center",
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'action'},
|
||||
// 高级查询modal需要参数
|
||||
const superQueryFieldList = [
|
||||
{
|
||||
type: 'string',
|
||||
value: 'name',
|
||||
text: '用户名'
|
||||
}, {
|
||||
type: 'int',
|
||||
value: 'age',
|
||||
text: '年龄'
|
||||
}, {
|
||||
type: 'date',
|
||||
value: 'birthday',
|
||||
text: '生日'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'JeroDemoList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroDemoModal,
|
||||
JSuperQuery,
|
||||
JeroDemoTabsModal,
|
||||
JInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '单表示例列表',
|
||||
// 字典数组缓存
|
||||
sexDictOptions: [],
|
||||
importExcelUrl: `${window._CONFIG.domianURL}/test/jeroDemo/importExcel`,
|
||||
// 表头
|
||||
columns: [],
|
||||
// 列设置
|
||||
settingColumns: [],
|
||||
// 列定义
|
||||
defColumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/test/jeroDemo/list",
|
||||
delete: "/test/jeroDemo/delete",
|
||||
deleteBatch: "/test/jeroDemo/deleteBatch",
|
||||
exportXlsUrl: "/test/jeroDemo/exportXls"
|
||||
},
|
||||
fieldList:superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams(){
|
||||
//高级查询器
|
||||
let sqp = {}
|
||||
if(this.superQueryParams){
|
||||
sqp['superQueryParams']=encodeURI(this.superQueryParams)
|
||||
sqp['superQueryMatchType'] = this.superQueryMatchType
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
|
||||
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
delete param.birthdayRange; //范围参数不传递后台
|
||||
return filterObj(param);
|
||||
},
|
||||
initDictConfig() {
|
||||
console.log("--我才是真的方法!--")
|
||||
//初始化字典 - 性别
|
||||
initDictOptions('sex').then((res) => {
|
||||
if (res.success) {
|
||||
this.sexDictOptions = res.result;
|
||||
{
|
||||
title: '姓名',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '关键词',
|
||||
align: 'center',
|
||||
dataIndex: 'keyWord'
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
align: 'center',
|
||||
dataIndex: 'punchTime'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: (text) => {
|
||||
// 字典值替换通用方法
|
||||
return filterDictTextByCache('sex', text)
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
align: 'center',
|
||||
dataIndex: 'age'
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
align: 'center',
|
||||
dataIndex: 'birthday'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
align: 'center',
|
||||
dataIndex: 'email'
|
||||
},
|
||||
{
|
||||
title: '个人简介',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/test/jeroDemo/list',
|
||||
delete: '/test/jeroDemo/delete',
|
||||
deleteBatch: '/test/jeroDemo/deleteBatch',
|
||||
exportXlsUrl: '/test/jeroDemo/exportXls'
|
||||
},
|
||||
onetomany: function () {
|
||||
this.$refs.jeroDemoTabsModal.add();
|
||||
this.$refs.jeroDemoTabsModal.title = "编辑";
|
||||
},
|
||||
//跳转单据页面
|
||||
jump() {
|
||||
this.$router.push({path: '/jero/helloworld'})
|
||||
},
|
||||
onBirthdayChange: function (value, dateString) {
|
||||
console.log(dateString[0],dateString[1]);
|
||||
this.queryParam.birthday_begin=dateString[0];
|
||||
this.queryParam.birthday_end=dateString[1];
|
||||
},
|
||||
//列设置更改事件
|
||||
onColSettingsChange (checkedValues) {
|
||||
var key = this.$route.name+":colsettings";
|
||||
Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
|
||||
this.settingColumns = checkedValues;
|
||||
fieldList: superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams () {
|
||||
// 高级查询器
|
||||
const sqp = {}
|
||||
if (this.superQueryParams) {
|
||||
sqp.superQueryParams = encodeURI(this.superQueryParams)
|
||||
sqp.superQueryMatchType = this.superQueryMatchType
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
||||
|
||||
param.field = this.getQueryField()
|
||||
param.pageNo = this.ipagination.current
|
||||
param.pageSize = this.ipagination.pageSize
|
||||
delete param.birthdayRange // 范围参数不传递后台
|
||||
return filterObj(param)
|
||||
},
|
||||
initDictConfig () {
|
||||
console.log('--我才是真的方法!--')
|
||||
// 初始化字典 - 性别
|
||||
initDictOptions('sex').then((res) => {
|
||||
if (res.success) {
|
||||
this.sexDictOptions = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
onetomany: function () {
|
||||
this.$refs.jeroDemoTabsModal.add()
|
||||
this.$refs.jeroDemoTabsModal.title = '编辑'
|
||||
},
|
||||
// 跳转单据页面
|
||||
jump () {
|
||||
this.$router.push({ path: '/jero/helloworld' })
|
||||
},
|
||||
onBirthdayChange: function (value, dateString) {
|
||||
console.log(dateString[0], dateString[1])
|
||||
this.queryParam.birthday_begin = dateString[0]
|
||||
this.queryParam.birthday_end = dateString[1]
|
||||
},
|
||||
// 列设置更改事件
|
||||
onColSettingsChange (checkedValues) {
|
||||
var key = this.$route.name + ':colsettings'
|
||||
Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
|
||||
this.settingColumns = checkedValues
|
||||
const cols = this.defColumns.filter(item => {
|
||||
if (item.key == 'rowIndex' || item.dataIndex == 'action') {
|
||||
return true
|
||||
}
|
||||
if (this.settingColumns.includes(item.dataIndex)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
this.columns = cols
|
||||
},
|
||||
initColumns () {
|
||||
// 权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
|
||||
// this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
|
||||
|
||||
var key = this.$route.name + ':colsettings'
|
||||
const colSettings = Vue.ls.get(key)
|
||||
if (colSettings == null || colSettings == undefined) {
|
||||
const allSettingColumns = []
|
||||
this.defColumns.forEach(function (item, i, array) {
|
||||
allSettingColumns.push(item.dataIndex)
|
||||
})
|
||||
this.settingColumns = allSettingColumns
|
||||
this.columns = this.defColumns
|
||||
} else {
|
||||
this.settingColumns = colSettings
|
||||
const cols = this.defColumns.filter(item => {
|
||||
if(item.key =='rowIndex'|| item.dataIndex=='action'){
|
||||
if (item.key == 'rowIndex' || item.dataIndex == 'action') {
|
||||
return true
|
||||
}
|
||||
if (this.settingColumns.includes(item.dataIndex)) {
|
||||
if (colSettings.includes(item.dataIndex)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
this.columns = cols;
|
||||
},
|
||||
initColumns(){
|
||||
//权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
|
||||
//this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
|
||||
|
||||
var key = this.$route.name+":colsettings";
|
||||
let colSettings= Vue.ls.get(key);
|
||||
if(colSettings==null||colSettings==undefined){
|
||||
let allSettingColumns = [];
|
||||
this.defColumns.forEach(function (item,i,array ) {
|
||||
allSettingColumns.push(item.dataIndex);
|
||||
})
|
||||
this.settingColumns = allSettingColumns;
|
||||
this.columns = this.defColumns;
|
||||
}else{
|
||||
this.settingColumns = colSettings;
|
||||
const cols = this.defColumns.filter(item => {
|
||||
if(item.key =='rowIndex'|| item.dataIndex=='action'){
|
||||
return true;
|
||||
}
|
||||
if (colSettings.includes(item.dataIndex)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
this.columns = cols;
|
||||
}
|
||||
this.columns = cols
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initColumns();
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initColumns()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -21,20 +21,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DefaultTable from './modules/JEditableTable/DefaultTable'
|
||||
import ReadOnlyTable from './modules/JEditableTable/ReadOnlyTable'
|
||||
import ThreeLinkage from './modules/JEditableTable/ThreeLinkage'
|
||||
import DefaultTable from './modules/JEditableTable/DefaultTable'
|
||||
import ReadOnlyTable from './modules/JEditableTable/ReadOnlyTable'
|
||||
import ThreeLinkage from './modules/JEditableTable/ThreeLinkage'
|
||||
|
||||
export default {
|
||||
name: 'JeroEditableTableExample',
|
||||
components: { DefaultTable, ReadOnlyTable, ThreeLinkage },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
export default {
|
||||
name: 'JeroEditableTableExample',
|
||||
components: { DefaultTable, ReadOnlyTable, ThreeLinkage },
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -92,84 +92,84 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderMainModal from './modules/JeroOrderMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JeroOrderMainModal from './modules/JeroOrderMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderMainList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeroOrderMain/importExcel`,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
width:60,
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align:"center",
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align:"center",
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text, record, index) => {
|
||||
let re = "";
|
||||
if (text === '1') {
|
||||
re = "国内订单";
|
||||
} else if (text === '2') {
|
||||
re = "国际订单";
|
||||
}
|
||||
return re;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align:"center",
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align:"center",
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align:"center",
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
export default {
|
||||
name: 'JeroOrderMainList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
importExcelUrl: `${window._CONFIG.domianURL}/test/jeroOrderMain/importExcel`,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
],
|
||||
|
||||
url: {
|
||||
list: "/test/jeroOrderMain/list",
|
||||
delete: "/test/jeroOrderMain/delete",
|
||||
deleteBatch: "/test/jeroOrderMain/deleteBatch",
|
||||
exportXlsUrl: "/test/jeroOrderMain/exportXls",
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text, record, index) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/deleteBatch',
|
||||
exportXlsUrl: '/test/jeroOrderMain/exportXls'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/** Button按钮间距 */
|
||||
@@ -189,4 +189,4 @@
|
||||
.ant-modal-cust-warp{height: 100%}
|
||||
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
|
||||
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -100,86 +100,86 @@
|
||||
|
||||
<script>
|
||||
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JeroOrderModalForJEditableTable from './modules/JeroOrderModalForJEditableTable'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JeroOrderModalForJEditableTable from './modules/JeroOrderModalForJEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderMainListForJEditableTable',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderModalForJEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
// 请求参数
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/deleteBatch'
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function(t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
export default {
|
||||
name: 'JeroOrderMainListForJEditableTable',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderModalForJEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
// 请求参数
|
||||
url: {
|
||||
list: '/test/jeroOrderMain/list',
|
||||
delete: '/test/jeroOrderMain/delete',
|
||||
deleteBatch: '/test/jeroOrderMain/deleteBatch'
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
initDictConfig() {
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
initDictConfig () {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@@ -214,4 +214,4 @@
|
||||
overflow-y: hidden
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -84,229 +84,228 @@
|
||||
|
||||
<script>
|
||||
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
|
||||
export default {
|
||||
name: 'jeroOrderModalForJvexTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable() {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
export default {
|
||||
name: 'jeroOrderModalForJvexTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
|
||||
add() {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
//editableTables[0].add()
|
||||
//editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
edit(record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
let params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
this.table1.dataSource=[];
|
||||
this.table2.dataSource=[];
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData(url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk() {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs(key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields() {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form,this.model, tables)
|
||||
}).then(allValues => {
|
||||
let formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData(allValues) {
|
||||
let orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit(formData) {
|
||||
let url = this.url.add, method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
// editableTables[0].add()
|
||||
// editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
this.table1.dataSource = []
|
||||
this.table2.dataSource = []
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add; let method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -41,82 +41,83 @@
|
||||
|
||||
<script>
|
||||
|
||||
import { getAction } from '@/api/manage'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
import Vue from 'vue'
|
||||
import PdfPreviewModal from './modules/PdfPreviewModal'
|
||||
const mockdata=[{
|
||||
"id": "1",
|
||||
"key": "1",
|
||||
"title": "实例.pdf",
|
||||
"fileCode": "shili",
|
||||
"fileName": "实例",
|
||||
"filePdfPath": "实例"
|
||||
}]
|
||||
import { getAction } from '@/api/manage'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import Vue from 'vue'
|
||||
import PdfPreviewModal from './modules/PdfPreviewModal'
|
||||
const mockdata = [{
|
||||
id: '1',
|
||||
key: '1',
|
||||
title: '实例.pdf',
|
||||
fileCode: 'shili',
|
||||
fileName: '实例',
|
||||
filePdfPath: '实例'
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: "JeroPdfView",
|
||||
components:{
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData:[{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata }],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData:mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning:false,
|
||||
url: {
|
||||
pdfList: "/mock/api/pdfList",
|
||||
},
|
||||
export default {
|
||||
name: 'JeroPdfView',
|
||||
components: {
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData: [{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata
|
||||
}],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData: mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning: false,
|
||||
url: {
|
||||
pdfList: '/mock/api/pdfList'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData (){
|
||||
this.spinning = false;
|
||||
getAction(this.url.pdfList).then((res)=>{
|
||||
if(res.length>0){
|
||||
this.allData = res;
|
||||
this.dataSource = res;
|
||||
this.treeData[0].children = res;
|
||||
}
|
||||
this.spinning = false;
|
||||
})
|
||||
},
|
||||
pdfPreview:function(title){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
this.$refs.pdfmodal.previewFiles(title,token);
|
||||
},
|
||||
// 选择文件类型
|
||||
onSelect (selectedKeys, info) {
|
||||
this.dataSource = [];
|
||||
if(selectedKeys[0] === undefined || selectedKeys[0] === '0-0'){
|
||||
this.dataSource = this.allData;
|
||||
}else{
|
||||
this.dataSource.push(info.node._props.dataRef);
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
this.spinning = false
|
||||
getAction(this.url.pdfList).then((res) => {
|
||||
if (res.length > 0) {
|
||||
this.allData = res
|
||||
this.dataSource = res
|
||||
this.treeData[0].children = res
|
||||
}
|
||||
console.log("SELECT-->dataSource",this.dataSource );
|
||||
},
|
||||
// model回调
|
||||
modalFormOk () {
|
||||
this.loadData();
|
||||
},
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
pdfPreview: function (title) {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
this.$refs.pdfmodal.previewFiles(title, token)
|
||||
},
|
||||
// 选择文件类型
|
||||
onSelect (selectedKeys, info) {
|
||||
this.dataSource = []
|
||||
if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
|
||||
this.dataSource = this.allData
|
||||
} else {
|
||||
this.dataSource.push(info.node._props.dataRef)
|
||||
}
|
||||
console.log('SELECT-->dataSource', this.dataSource)
|
||||
},
|
||||
// model回调
|
||||
modalFormOk () {
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:10px}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -20,61 +20,61 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTreeTable from '@/components/jero/JTreeTable'
|
||||
import JTreeTable from '@/components/jero/JTreeTable'
|
||||
|
||||
export default {
|
||||
name: 'JeroTreeTable',
|
||||
components: { JTreeTable },
|
||||
data() {
|
||||
export default {
|
||||
name: 'JeroTreeTable',
|
||||
components: { JTreeTable },
|
||||
data () {
|
||||
return {
|
||||
url: '/mock/api/asynTreeList',
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderNum'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
selectedRowKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableProps () {
|
||||
const _this = this
|
||||
return {
|
||||
url: '/mock/api/asynTreeList',
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderNum'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
selectedRowKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableProps() {
|
||||
let _this = this
|
||||
return {
|
||||
// 列表项是否可选择
|
||||
// https://vue.ant.design/components/table-cn/#rowSelection
|
||||
rowSelection: {
|
||||
selectedRowKeys: _this.selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
// 列表项是否可选择
|
||||
// https://vue.ant.design/components/table-cn/#rowSelection
|
||||
rowSelection: {
|
||||
selectedRowKeys: _this.selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit(record) {
|
||||
this.$info({
|
||||
width: 600,
|
||||
title: '编辑',
|
||||
content: '编辑ID：' + record.id+"；名称："+record.name,
|
||||
okText: '确定',
|
||||
maskClosable: true
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.$info({
|
||||
width: 600,
|
||||
title: '编辑',
|
||||
content: '编辑ID：' + record.id + '；名称：' + record.name,
|
||||
okText: '确定',
|
||||
maskClosable: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -53,83 +53,83 @@
|
||||
<!--</page-layout>-->
|
||||
</template>
|
||||
<script>
|
||||
import ACol from "ant-design-vue/es/grid/Col";
|
||||
import ARow from "ant-design-vue/es/grid/Row";
|
||||
import ATextarea from 'ant-design-vue/es/input/TextArea'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ATextarea from 'ant-design-vue/es/input/TextArea'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ATextarea,
|
||||
ARow,
|
||||
ACol,
|
||||
},
|
||||
name: 'Printgzsld',
|
||||
props:{
|
||||
reBizCode:{
|
||||
type: String,
|
||||
default: ''
|
||||
export default {
|
||||
components: {
|
||||
ATextarea,
|
||||
ARow,
|
||||
ACol
|
||||
},
|
||||
name: 'Printgzsld',
|
||||
props: {
|
||||
reBizCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [{
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
columns: [{
|
||||
}
|
||||
],
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 2 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
printer:'张三',
|
||||
printTime:'2019-02-01 12:00:00',
|
||||
printContent:'打印内容就是,做一个打印测试',
|
||||
printReason:'做一个打印测试',
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
},
|
||||
{
|
||||
uid:'-2',
|
||||
name:'pic1.png',
|
||||
status:'done',
|
||||
url:'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
|
||||
}
|
||||
],
|
||||
url:{
|
||||
loadApplicant:"/sps/register/loadApplicants",
|
||||
loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
|
||||
}
|
||||
],
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 2 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 }
|
||||
},
|
||||
printer: '张三',
|
||||
printTime: '2019-02-01 12:00:00',
|
||||
printContent: '打印内容就是,做一个打印测试',
|
||||
printReason: '做一个打印测试',
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'pic1.png',
|
||||
status: 'done',
|
||||
url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDate();
|
||||
},
|
||||
methods: {
|
||||
loadData(){
|
||||
|
||||
},
|
||||
getDate(){
|
||||
// 当前时间
|
||||
},
|
||||
handleCancel () {
|
||||
this.previewVisible = false
|
||||
},
|
||||
handlePreview (file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange ({ fileList }) {
|
||||
this.fileList = fileList
|
||||
],
|
||||
url: {
|
||||
loadApplicant: '/sps/register/loadApplicants',
|
||||
loadRegisterFiles: '/sps/register/getRegisterFilesConfig'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
|
||||
},
|
||||
getDate () {
|
||||
// 当前时间
|
||||
},
|
||||
handleCancel () {
|
||||
this.previewVisible = false
|
||||
},
|
||||
handlePreview (file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange ({ fileList }) {
|
||||
this.fileList = fileList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
|
||||
@@ -172,4 +172,4 @@
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -13,259 +13,257 @@
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "RowspanTable",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '存放位置设置表管理页面',
|
||||
levelNum:{},
|
||||
gridNum:0,
|
||||
boxNum:0,
|
||||
cabinetNo:"",
|
||||
// 表头
|
||||
columns: [ {
|
||||
title: '分组一',
|
||||
align: "center",
|
||||
dataIndex: 'cabinetNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
if(index===0){
|
||||
obj.attrs.rowSpan = this.dataSource.length;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
export default {
|
||||
name: 'RowspanTable',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '存放位置设置表管理页面',
|
||||
levelNum: {},
|
||||
gridNum: 0,
|
||||
boxNum: 0,
|
||||
cabinetNo: '',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '分组一',
|
||||
align: 'center',
|
||||
dataIndex: 'cabinetNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
if (index === 0) {
|
||||
obj.attrs.rowSpan = this.dataSource.length
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
return obj
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组二',
|
||||
align: 'center',
|
||||
dataIndex: 'levelNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
// 当前列跨行的条数
|
||||
var a = parseInt(this.levelNum)
|
||||
var b = parseInt(this.gridNum) * parseInt(this.boxNum)
|
||||
console.log(a)
|
||||
for (var c = 0; c <= a; c++) {
|
||||
if (index === (c * b)) {
|
||||
console.log(1)
|
||||
console.log(c * b)
|
||||
obj.attrs.rowSpan = b
|
||||
break
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '分组二',
|
||||
align: "center",
|
||||
dataIndex: 'levelNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
//当前列跨行的条数
|
||||
var a = parseInt(this.levelNum);
|
||||
var b = parseInt(this.gridNum)*parseInt(this.boxNum);
|
||||
console.log(a);
|
||||
for(var c=0;c<=a;c++){
|
||||
if(index === (c*b)){
|
||||
console.log(1);
|
||||
console.log(c*b);
|
||||
obj.attrs.rowSpan = b;
|
||||
break;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
return obj
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组三',
|
||||
align: 'center',
|
||||
dataIndex: 'gridNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {}
|
||||
}
|
||||
var a = parseInt(this.levelNum) * parseInt(this.gridNum)
|
||||
var b = parseInt(this.boxNum)
|
||||
for (var c = 0; c <= a; c++) {
|
||||
if (index === (c * b)) {
|
||||
obj.attrs.rowSpan = b
|
||||
break
|
||||
} else {
|
||||
obj.attrs.rowSpan = 0
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分组三',
|
||||
align: "center",
|
||||
dataIndex: 'gridNo',
|
||||
customRender: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
attrs: {},
|
||||
};
|
||||
var a = parseInt(this.levelNum)*parseInt(this.gridNum);
|
||||
var b = parseInt(this.boxNum);
|
||||
for(var c=0;c<=a;c++){
|
||||
if(index === (c*b)){
|
||||
obj.attrs.rowSpan = b;
|
||||
break;
|
||||
}else{
|
||||
obj.attrs.rowSpan = 0;
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
}, {
|
||||
title: '字段一',
|
||||
align: "center",
|
||||
dataIndex: 'boxNo'
|
||||
}, {
|
||||
title: '字段二',
|
||||
align: 'center',
|
||||
dataIndex: 'storedNum'
|
||||
}, {
|
||||
title: '字段三',
|
||||
align: "center",
|
||||
dataIndex: 'maxNum'
|
||||
},],
|
||||
//数据集
|
||||
dataSource: [{
|
||||
"id": "cb1dfd12cbeca3f8ba121439ee7e2411",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "1",
|
||||
"boxNo": "1",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "f903d50d02904b14175dccf2a7948777",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "1",
|
||||
"boxNo": "2",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "4f04c0ca4202535d678871b07e706cf6",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "2",
|
||||
"boxNo": "1",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "d0c91dabedfc03efad0126e50ea72e80",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "1",
|
||||
"gridNo": "2",
|
||||
"boxNo": "2",
|
||||
"storedNum": 2,
|
||||
"maxNum": 2,
|
||||
"unitNum": 2,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "1",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-08"
|
||||
}, {
|
||||
"id": "1e8bfcbe4352afbab8878f9fd368e007",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "1",
|
||||
"boxNo": "1",
|
||||
"storedNum": 1,
|
||||
"maxNum": 2,
|
||||
"unitNum": 1,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-08"
|
||||
}, {
|
||||
"id": "d76087d8d3ebc7a59d43458588f26941",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "1",
|
||||
"boxNo": "2",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "7bf7754f12e1bf95edcd501cc6b85e62",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "2",
|
||||
"boxNo": "1",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}, {
|
||||
"id": "9cd08d733657d5b286bec870f12f6ecf",
|
||||
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
||||
"cabinetNo": "1",
|
||||
"levelNo": "2",
|
||||
"gridNo": "2",
|
||||
"boxNo": "2",
|
||||
"storedNum": 0,
|
||||
"maxNum": 2,
|
||||
"unitNum": 0,
|
||||
"assignStatus": "1",
|
||||
"storageStatus": "0",
|
||||
"remark": null,
|
||||
"createBy": "admin",
|
||||
"createTime": "2019-04-02",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2019-04-02"
|
||||
}],
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
url: {
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData(){
|
||||
this.levelNum=4;
|
||||
this.gridNum = 2;
|
||||
this.boxNum = 2;
|
||||
|
||||
}
|
||||
return obj
|
||||
}
|
||||
}, {
|
||||
title: '字段一',
|
||||
align: 'center',
|
||||
dataIndex: 'boxNo'
|
||||
}, {
|
||||
title: '字段二',
|
||||
align: 'center',
|
||||
dataIndex: 'storedNum'
|
||||
}, {
|
||||
title: '字段三',
|
||||
align: 'center',
|
||||
dataIndex: 'maxNum'
|
||||
}],
|
||||
// 数据集
|
||||
dataSource: [{
|
||||
id: 'cb1dfd12cbeca3f8ba121439ee7e2411',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '1',
|
||||
boxNo: '1',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: 'f903d50d02904b14175dccf2a7948777',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '1',
|
||||
boxNo: '2',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '4f04c0ca4202535d678871b07e706cf6',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '2',
|
||||
boxNo: '1',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: 'd0c91dabedfc03efad0126e50ea72e80',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '1',
|
||||
gridNo: '2',
|
||||
boxNo: '2',
|
||||
storedNum: 2,
|
||||
maxNum: 2,
|
||||
unitNum: 2,
|
||||
assignStatus: '1',
|
||||
storageStatus: '1',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-08'
|
||||
}, {
|
||||
id: '1e8bfcbe4352afbab8878f9fd368e007',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '1',
|
||||
boxNo: '1',
|
||||
storedNum: 1,
|
||||
maxNum: 2,
|
||||
unitNum: 1,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-08'
|
||||
}, {
|
||||
id: 'd76087d8d3ebc7a59d43458588f26941',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '1',
|
||||
boxNo: '2',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '7bf7754f12e1bf95edcd501cc6b85e62',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '2',
|
||||
boxNo: '1',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}, {
|
||||
id: '9cd08d733657d5b286bec870f12f6ecf',
|
||||
attributeId: 'e62831f314e1390edbd884e9d9e6aca6',
|
||||
cabinetNo: '1',
|
||||
levelNo: '2',
|
||||
gridNo: '2',
|
||||
boxNo: '2',
|
||||
storedNum: 0,
|
||||
maxNum: 2,
|
||||
unitNum: 0,
|
||||
assignStatus: '1',
|
||||
storageStatus: '0',
|
||||
remark: null,
|
||||
createBy: 'admin',
|
||||
createTime: '2019-04-02',
|
||||
updateBy: 'admin',
|
||||
updateTime: '2019-04-02'
|
||||
}],
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
url: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
loadData () {
|
||||
this.levelNum = 4
|
||||
this.gridNum = 2
|
||||
this.boxNum = 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator{
|
||||
@@ -282,4 +280,3 @@
|
||||
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
|
||||
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form-model ref="form" :model="formData" layout="inline">
|
||||
|
||||
|
||||
<!-- 字典下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
@@ -45,7 +44,6 @@
|
||||
<a-col :span="12">选中值：{{ formData.user2}}</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- 字典搜索 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
@@ -395,7 +393,6 @@
|
||||
<a-col :span="12">输入的值(v-model)：{{ formData.areaLinkage1 }}</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- 省市县级联 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
@@ -450,196 +447,205 @@
|
||||
|
||||
<script>
|
||||
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jerobiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jerobiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jerobiz/JSelectMultiUser'
|
||||
import JSelectRole from '@/components/jerobiz/JSelectRole'
|
||||
import JCheckbox from '@/components/jero/JCheckbox'
|
||||
import JCodeEditor from '@/components/jero/JCodeEditor'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditor from '@/components/jero/JEditor'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import JSlider from '@/components/jero/JSlider'
|
||||
import JSelectMultiple from '@/components/jero/JSelectMultiple'
|
||||
import JTreeDict from "../../components/jero/JTreeDict.vue";
|
||||
import JCron from "@/components/jero/JCron.vue";
|
||||
import JEasyCron from "@/components/jero/JEasyCron";
|
||||
import JTreeSelect from '@/components/jero/JTreeSelect'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery'
|
||||
import JUpload from '@/components/jero/JUpload'
|
||||
import JImageUpload from '@/components/jero/JImageUpload'
|
||||
import JCategorySelect from '@comp/jero/JCategorySelect'
|
||||
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
|
||||
import JInput from '@comp/jero/JInput'
|
||||
import JAreaLinkage from '@comp/jero/JAreaLinkage'
|
||||
import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
|
||||
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
|
||||
import JSwitch from '@/components/jero/JSwitch.vue'
|
||||
import JImportModal from '@/components/jero/JImportModal.vue'
|
||||
import JTime from '@/components/jero/JTime.vue'
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jerobiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jerobiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jerobiz/JSelectMultiUser'
|
||||
import JSelectRole from '@/components/jerobiz/JSelectRole'
|
||||
import JCheckbox from '@/components/jero/JCheckbox'
|
||||
import JCodeEditor from '@/components/jero/JCodeEditor'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditor from '@/components/jero/JEditor'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
import JSlider from '@/components/jero/JSlider'
|
||||
import JSelectMultiple from '@/components/jero/JSelectMultiple'
|
||||
import JTreeDict from '../../components/jero/JTreeDict.vue'
|
||||
import JCron from '@/components/jero/JCron.vue'
|
||||
import JEasyCron from '@/components/jero/JEasyCron'
|
||||
import JTreeSelect from '@/components/jero/JTreeSelect'
|
||||
import JSuperQuery from '@/components/jero/JSuperQuery'
|
||||
import JUpload from '@/components/jero/JUpload'
|
||||
import JImageUpload from '@/components/jero/JImageUpload'
|
||||
import JCategorySelect from '@comp/jero/JCategorySelect'
|
||||
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
|
||||
import JInput from '@comp/jero/JInput'
|
||||
import JAreaLinkage from '@comp/jero/JAreaLinkage'
|
||||
import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
|
||||
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
|
||||
import JSwitch from '@/components/jero/JSwitch.vue'
|
||||
import JImportModal from '@/components/jero/JImportModal.vue'
|
||||
import JTime from '@/components/jero/JTime.vue'
|
||||
|
||||
export default {
|
||||
name: 'SelectDemo',
|
||||
inject:['closeCurrent'],
|
||||
components: {
|
||||
JMarkdownEditor,
|
||||
JAreaLinkage,
|
||||
JInput,
|
||||
JCategorySelect,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JTreeDict,
|
||||
JDictSelectTag,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JSelectRole,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate, JEditor, JEllipsis, JSlider, JSelectMultiple,
|
||||
JCron, JEasyCron,JTreeSelect, JSuperQuery, JMultiSelectTag,
|
||||
JSearchSelectTag,
|
||||
JSwitch,
|
||||
JImportModal,
|
||||
JTime
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sw:false,
|
||||
selectList: [],
|
||||
selectedDepUsers: '',
|
||||
formData: {
|
||||
areaLinkage1: '110105',
|
||||
areaLinkage2: '140221',
|
||||
sex: 1,
|
||||
orgCodes: 'A02A01,A02A02',
|
||||
departId: '57197590443c44f083d42ae24ef26a2c,a7d7e77e06c84325a40932163adcdaa6',
|
||||
userIds: 'admin',
|
||||
multiUser: 'admin,jero',
|
||||
jCheckbox: 'spring,jeroboot',
|
||||
jCodeEditor: `function sayHi(word) {\n alert(word)\n}\nsayHi('hello, world!')`,
|
||||
jDate: '2019-5-10 15:33:06',
|
||||
jEditor: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>',
|
||||
jEllipsis: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。',
|
||||
jSlider: false,
|
||||
jSelectMultiple: 'Integer,Boolean',
|
||||
imgList:[],
|
||||
fileList:[],
|
||||
content: '',
|
||||
cronExpression: '* * * * * ? *',
|
||||
},
|
||||
jCheckboxOptions: [
|
||||
{label: 'jero', value: 'jero'},
|
||||
{label: 'jero-Boot', value: 'jeroboot'},
|
||||
{label: 'Spring', value: 'spring', disabled: true},
|
||||
{label: 'MyBaits', value: 'mybatis'}
|
||||
],
|
||||
jSelectMultipleOptions: [
|
||||
{text: '字符串', value: 'String'},
|
||||
{text: '整数型', value: 'Integer'},
|
||||
{text: '浮点型', value: 'Double'},
|
||||
{text: '布尔型', value: 'Boolean'}
|
||||
],
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
fullscreen: true,
|
||||
switchFullscreen: true,
|
||||
},
|
||||
cron: '',
|
||||
superQuery: {
|
||||
fieldList: [
|
||||
{ type: 'input', value: 'name', text: '姓名', },
|
||||
{ type: 'select', value: 'sex', text: '性别', dictCode: 'sex' },
|
||||
{ type: 'number', value: 'age', text: '年龄', },
|
||||
{
|
||||
type: 'select', value: 'hobby', text: '爱好',
|
||||
options: [
|
||||
{ label: '音乐', value: '1' },
|
||||
{ label: '游戏', value: '2' },
|
||||
{ label: '电影', value: '3' },
|
||||
{ label: '读书', value: '4' },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
jInput: {
|
||||
type: 'like',
|
||||
options: [
|
||||
{ value: 'like', label: '模糊（like）' },
|
||||
{ value: 'ne', label: '不等于（ne）' },
|
||||
{ value: 'ge', label: '大于等于（ge）' },
|
||||
{ value: 'le', label: '小于等于（le)' },
|
||||
],
|
||||
},
|
||||
searchOptions:[{
|
||||
text:"选项一",
|
||||
value:"1"
|
||||
},{
|
||||
text:"选项二",
|
||||
value:"2"
|
||||
},{
|
||||
text:"选项三",
|
||||
value:"3"
|
||||
}],
|
||||
|
||||
// 选择用户查询条件配置
|
||||
selectUserQueryConfig: [
|
||||
{key: 'phone', label: '电话'},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function() {
|
||||
|
||||
var names = []
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDepartIdValue() {
|
||||
return this.formData.departId
|
||||
export default {
|
||||
name: 'SelectDemo',
|
||||
inject: ['closeCurrent'],
|
||||
components: {
|
||||
JMarkdownEditor,
|
||||
JAreaLinkage,
|
||||
JInput,
|
||||
JCategorySelect,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JTreeDict,
|
||||
JDictSelectTag,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JSelectRole,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate,
|
||||
JEditor,
|
||||
JEllipsis,
|
||||
JSlider,
|
||||
JSelectMultiple,
|
||||
JCron,
|
||||
JEasyCron,
|
||||
JTreeSelect,
|
||||
JSuperQuery,
|
||||
JMultiSelectTag,
|
||||
JSearchSelectTag,
|
||||
JSwitch,
|
||||
JImportModal,
|
||||
JTime
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sw: false,
|
||||
selectList: [],
|
||||
selectedDepUsers: '',
|
||||
formData: {
|
||||
areaLinkage1: '110105',
|
||||
areaLinkage2: '140221',
|
||||
sex: 1,
|
||||
orgCodes: 'A02A01,A02A02',
|
||||
departId: '57197590443c44f083d42ae24ef26a2c,a7d7e77e06c84325a40932163adcdaa6',
|
||||
userIds: 'admin',
|
||||
multiUser: 'admin,jero',
|
||||
jCheckbox: 'spring,jeroboot',
|
||||
jCodeEditor: `function sayHi(word) {\n alert(word)\n}\nsayHi('hello, world!')`,
|
||||
jDate: '2019-5-10 15:33:06',
|
||||
jEditor: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>',
|
||||
jEllipsis: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。',
|
||||
jSlider: false,
|
||||
jSelectMultiple: 'Integer,Boolean',
|
||||
imgList: [],
|
||||
fileList: [],
|
||||
content: '',
|
||||
cronExpression: '* * * * * ? *'
|
||||
},
|
||||
getOrgCodesValue() {
|
||||
return this.formData.orgCodes
|
||||
jCheckboxOptions: [
|
||||
{ label: 'jero', value: 'jero' },
|
||||
{ label: 'jero-Boot', value: 'jeroboot' },
|
||||
{ label: 'Spring', value: 'spring', disabled: true },
|
||||
{ label: 'MyBaits', value: 'mybatis' }
|
||||
],
|
||||
jSelectMultipleOptions: [
|
||||
{ text: '字符串', value: 'String' },
|
||||
{ text: '整数型', value: 'Integer' },
|
||||
{ text: '浮点型', value: 'Double' },
|
||||
{ text: '布尔型', value: 'Boolean' }
|
||||
],
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
fullscreen: true,
|
||||
switchFullscreen: true
|
||||
},
|
||||
changeMe() {
|
||||
|
||||
cron: '',
|
||||
superQuery: {
|
||||
fieldList: [
|
||||
{ type: 'input', value: 'name', text: '姓名' },
|
||||
{ type: 'select', value: 'sex', text: '性别', dictCode: 'sex' },
|
||||
{ type: 'number', value: 'age', text: '年龄' },
|
||||
{
|
||||
type: 'select',
|
||||
value: 'hobby',
|
||||
text: '爱好',
|
||||
options: [
|
||||
{ label: '音乐', value: '1' },
|
||||
{ label: '游戏', value: '2' },
|
||||
{ label: '电影', value: '3' },
|
||||
{ label: '读书', value: '4' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
selectOK: function(data) {
|
||||
this.selectList = data
|
||||
jInput: {
|
||||
type: 'like',
|
||||
options: [
|
||||
{ value: 'like', label: '模糊（like）' },
|
||||
{ value: 'ne', label: '不等于（ne）' },
|
||||
{ value: 'ge', label: '大于等于（ge）' },
|
||||
{ value: 'le', label: '小于等于（le)' }
|
||||
]
|
||||
},
|
||||
handleSelect: function() {
|
||||
this.$refs.selectDemoModal.add()
|
||||
},
|
||||
selectReset() {
|
||||
this.selectList = []
|
||||
},
|
||||
//通过组织机构筛选选择用户
|
||||
onSearchDepUser() {
|
||||
this.$refs.JSearchUserByDep.showModal()
|
||||
this.selectedDepUsers = ''
|
||||
this.$refs.JSearchUserByDep.title = '根据部门查询用户'
|
||||
},
|
||||
onSearchDepUserCallBack(selectedDepUsers) {
|
||||
this.selectedDepUsers = selectedDepUsers
|
||||
},
|
||||
handleJSliderSuccess(value) {
|
||||
this.formData.jSlider = value
|
||||
},
|
||||
|
||||
handleCloseCurrentPage() {
|
||||
// 注意：以下代码必须存在
|
||||
// inject:['closeCurrent'],
|
||||
this.closeCurrent()
|
||||
},
|
||||
searchOptions: [{
|
||||
text: '选项一',
|
||||
value: '1'
|
||||
}, {
|
||||
text: '选项二',
|
||||
value: '2'
|
||||
}, {
|
||||
text: '选项三',
|
||||
value: '3'
|
||||
}],
|
||||
|
||||
// 选择用户查询条件配置
|
||||
selectUserQueryConfig: [
|
||||
{ key: 'phone', label: '电话' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function () {
|
||||
var names = []
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDepartIdValue () {
|
||||
return this.formData.departId
|
||||
},
|
||||
getOrgCodesValue () {
|
||||
return this.formData.orgCodes
|
||||
},
|
||||
changeMe () {
|
||||
|
||||
},
|
||||
selectOK: function (data) {
|
||||
this.selectList = data
|
||||
},
|
||||
handleSelect: function () {
|
||||
this.$refs.selectDemoModal.add()
|
||||
},
|
||||
selectReset () {
|
||||
this.selectList = []
|
||||
},
|
||||
// 通过组织机构筛选选择用户
|
||||
onSearchDepUser () {
|
||||
this.$refs.JSearchUserByDep.showModal()
|
||||
this.selectedDepUsers = ''
|
||||
this.$refs.JSearchUserByDep.title = '根据部门查询用户'
|
||||
},
|
||||
onSearchDepUserCallBack (selectedDepUsers) {
|
||||
this.selectedDepUsers = selectedDepUsers
|
||||
},
|
||||
handleJSliderSuccess (value) {
|
||||
this.formData.jSlider = value
|
||||
},
|
||||
|
||||
handleCloseCurrentPage () {
|
||||
// 注意：以下代码必须存在
|
||||
// inject:['closeCurrent'],
|
||||
this.closeCurrent()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
@@ -672,4 +678,4 @@
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -7,26 +7,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components:{
|
||||
SplitPanelModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '分屏',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
splitPane(){
|
||||
this.$refs.splitPanelModal.show();
|
||||
}
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components: {
|
||||
SplitPanelModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '分屏'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
splitPane () {
|
||||
this.$refs.splitPanelModal.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -97,140 +97,140 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import JeroOrderDMainModal from '@views/demo/tablist/form/JeroOrderDMainModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import { getAction } from '@/api/manage'
|
||||
import JeroOrderDMainModal from '@views/demo/tablist/form/JeroOrderDMainModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "TableDemo",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 子表表头
|
||||
innerColumns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text == 1) {
|
||||
return "男";
|
||||
} else if (text == 2) {
|
||||
return "女";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
export default {
|
||||
name: 'TableDemo',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 子表表头
|
||||
innerColumns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text == 1) {
|
||||
return '男'
|
||||
} else if (text == 2) {
|
||||
return '女'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: "center",
|
||||
dataIndex: 'idcard',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: "center",
|
||||
},
|
||||
|
||||
],
|
||||
innerData: [],
|
||||
expandedRowKeys: [],
|
||||
id: ' ',
|
||||
description: '列表展开子表Demo',
|
||||
// 列表表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: "center",
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: "center",
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = "";
|
||||
if (text === '1') {
|
||||
re = "国内订单";
|
||||
} else if (text === '2') {
|
||||
re = "国际订单";
|
||||
}
|
||||
return re;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: "center",
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: "center",
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: "center",
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}],
|
||||
// 分页参数
|
||||
type: "radio",
|
||||
url: {
|
||||
list: "/test/order/orderList",
|
||||
delete: "/test/order/delete",
|
||||
deleteBatch: "/test/order/deleteBatch",
|
||||
customerListByMainId: "/test/order/listOrderCustomerByMainId",
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: 'center',
|
||||
dataIndex: 'idcard'
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentId(){
|
||||
return this.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExpand(expanded, record){
|
||||
this.expandedRowKeys=[];
|
||||
this.innerData=[];
|
||||
if(expanded===true){
|
||||
this.loading = true;
|
||||
this.expandedRowKeys.push(record.id);
|
||||
getAction(this.url.customerListByMainId, {mainId: record.id}).then((res) => {
|
||||
if (res.success) {
|
||||
this.loading = false;
|
||||
this.innerData = res.result.records;
|
||||
}
|
||||
});
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: 'center'
|
||||
}
|
||||
|
||||
],
|
||||
innerData: [],
|
||||
expandedRowKeys: [],
|
||||
id: ' ',
|
||||
description: '列表展开子表Demo',
|
||||
// 列表表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
return re
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}],
|
||||
// 分页参数
|
||||
type: 'radio',
|
||||
url: {
|
||||
list: '/test/order/orderList',
|
||||
delete: '/test/order/delete',
|
||||
deleteBatch: '/test/order/deleteBatch',
|
||||
customerListByMainId: '/test/order/listOrderCustomerByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentId () {
|
||||
return this.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExpand (expanded, record) {
|
||||
this.expandedRowKeys = []
|
||||
this.innerData = []
|
||||
if (expanded === true) {
|
||||
this.loading = true
|
||||
this.expandedRowKeys.push(record.id)
|
||||
getAction(this.url.customerListByMainId, { mainId: record.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.loading = false
|
||||
this.innerData = res.result.records
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
@@ -263,4 +263,4 @@
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -13,152 +13,151 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableTotal',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
width: '180px',
|
||||
align: 'center',
|
||||
dataIndex: 'rowIndex',
|
||||
customRender: function (text, r, index) {
|
||||
return (text !== '合计') ? (parseInt(index) + 1) : text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '贡献点',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
dataIndex: 'level',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
},
|
||||
],
|
||||
/* 分页参数 */
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
export default {
|
||||
name: 'TableTotal',
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
width: '180px',
|
||||
align: 'center',
|
||||
dataIndex: 'rowIndex',
|
||||
customRender: function (text, r, index) {
|
||||
return (text !== '合计') ? (parseInt(index) + 1) : text
|
||||
}
|
||||
},
|
||||
dataSource: [
|
||||
{ id:"1",name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
|
||||
{ name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
|
||||
{ name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
|
||||
{ name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
|
||||
{ name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
|
||||
{ name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
],
|
||||
newArr:[],
|
||||
newDataSource:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.tableAddTotalRow(this.columns, this.dataSource)
|
||||
/*新增分页合计方法*/
|
||||
this.newDataSource=this.dataSource
|
||||
this.dataHandling(this.ipagination.pageSize-1)
|
||||
},
|
||||
watch:{
|
||||
'ipagination.pageSize':function(val) {
|
||||
this.dataHandling(val-1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 表格增加合计行 */
|
||||
tableAddTotalRow(columns, dataSource) {
|
||||
let numKey = 'rowIndex'
|
||||
let totalRow = { [numKey]: '合计' }
|
||||
columns.forEach(column => {
|
||||
let { key, dataIndex } = column
|
||||
if (![key, dataIndex].includes(numKey)) {
|
||||
|
||||
let total = 0
|
||||
dataSource.forEach(data => {
|
||||
total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
|
||||
console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
|
||||
})
|
||||
|
||||
if (Number.isNaN(total)) {
|
||||
total = '-'
|
||||
}
|
||||
totalRow[dataIndex] = total
|
||||
}
|
||||
})
|
||||
|
||||
dataSource.push(totalRow)
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '贡献点',
|
||||
dataIndex: 'point'
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
dataIndex: 'level'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime'
|
||||
}
|
||||
],
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
this.ipagination = pagination;
|
||||
},
|
||||
/*如果分页走这个方法*/
|
||||
dataHandling(num) {
|
||||
this.newArr=[];
|
||||
let arrLength = this.newDataSource.length; // 数组长度;
|
||||
let index = 0;
|
||||
for (let i = 0; i < arrLength; i++) {
|
||||
if (i % num === 0 && i !== 0) {
|
||||
this.newArr.push(this.newDataSource.slice(index, i));
|
||||
index = i;
|
||||
}
|
||||
if ((i + 1) === arrLength) {
|
||||
this.newArr.push(this.newDataSource.slice(index, (i + 1)));
|
||||
dataSource: [
|
||||
{ id: '1', name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
|
||||
{ name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
|
||||
{ name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
|
||||
{ name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
|
||||
{ name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
|
||||
{ name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
|
||||
{ name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' }
|
||||
],
|
||||
newArr: [],
|
||||
newDataSource: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.tableAddTotalRow(this.columns, this.dataSource)
|
||||
/* 新增分页合计方法 */
|
||||
this.newDataSource = this.dataSource
|
||||
this.dataHandling(this.ipagination.pageSize - 1)
|
||||
},
|
||||
watch: {
|
||||
'ipagination.pageSize': function (val) {
|
||||
this.dataHandling(val - 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 表格增加合计行 */
|
||||
tableAddTotalRow (columns, dataSource) {
|
||||
const numKey = 'rowIndex'
|
||||
const totalRow = { [numKey]: '合计' }
|
||||
columns.forEach(column => {
|
||||
const { key, dataIndex } = column
|
||||
if (![key, dataIndex].includes(numKey)) {
|
||||
let total = 0
|
||||
dataSource.forEach(data => {
|
||||
total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
|
||||
console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
|
||||
})
|
||||
|
||||
if (Number.isNaN(total)) {
|
||||
total = '-'
|
||||
}
|
||||
totalRow[dataIndex] = total
|
||||
}
|
||||
var arrs=this.newArr;
|
||||
for (let i =0;i<arrs.length;i++){
|
||||
let arr = arrs[i];
|
||||
let newArr= { };
|
||||
newArr.name="-";
|
||||
newArr.updateTime="-";
|
||||
newArr.rowIndex="合计"
|
||||
var level=0;
|
||||
var point=0;
|
||||
for (let j=0;j<arr.length;j++){
|
||||
level+=arr[j].level;
|
||||
point+=arr[j].point;
|
||||
}
|
||||
newArr.level=level;
|
||||
newArr.point=point;
|
||||
arrs[i].push(newArr);
|
||||
})
|
||||
|
||||
dataSource.push(totalRow)
|
||||
},
|
||||
handleTableChange (pagination, filters, sorter) {
|
||||
this.ipagination = pagination
|
||||
},
|
||||
/* 如果分页走这个方法 */
|
||||
dataHandling (num) {
|
||||
this.newArr = []
|
||||
const arrLength = this.newDataSource.length // 数组长度;
|
||||
let index = 0
|
||||
for (let i = 0; i < arrLength; i++) {
|
||||
if (i % num === 0 && i !== 0) {
|
||||
this.newArr.push(this.newDataSource.slice(index, i))
|
||||
index = i
|
||||
}
|
||||
var newDataSource=[];
|
||||
for (let i =0;i<arrs.length;i++){
|
||||
let arr = arrs[i];
|
||||
for(var j in arr){
|
||||
newDataSource.push(arr[j]);
|
||||
}
|
||||
if ((i + 1) === arrLength) {
|
||||
this.newArr.push(this.newDataSource.slice(index, (i + 1)))
|
||||
}
|
||||
console.log(this.dataSource)
|
||||
this.dataSource = Object.values(newDataSource);
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
var arrs = this.newArr
|
||||
for (let i = 0; i < arrs.length; i++) {
|
||||
const arr = arrs[i]
|
||||
const newArr = { }
|
||||
newArr.name = '-'
|
||||
newArr.updateTime = '-'
|
||||
newArr.rowIndex = '合计'
|
||||
var level = 0
|
||||
var point = 0
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
level += arr[j].level
|
||||
point += arr[j].point
|
||||
}
|
||||
newArr.level = level
|
||||
newArr.point = point
|
||||
arrs[i].push(newArr)
|
||||
}
|
||||
var newDataSource = []
|
||||
for (let i = 0; i < arrs.length; i++) {
|
||||
const arr = arrs[i]
|
||||
for (var j in arr) {
|
||||
newDataSource.push(arr[j])
|
||||
}
|
||||
}
|
||||
console.log(this.dataSource)
|
||||
this.dataSource = Object.values(newDataSource)
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
label="客户"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
<a-input
|
||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
|
||||
v-decorator="[
|
||||
'customer',
|
||||
@@ -109,30 +109,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseForm',
|
||||
data () {
|
||||
return {
|
||||
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
|
||||
value: 1,
|
||||
export default {
|
||||
name: 'BaseForm',
|
||||
data () {
|
||||
return {
|
||||
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
|
||||
value: 1,
|
||||
|
||||
// form
|
||||
form: this.$form.createForm(this),
|
||||
// form
|
||||
form: this.$form.createForm(this)
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
}
|
||||
// handler
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -62,145 +62,145 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RepositoryForm from './RepositoryForm'
|
||||
import TaskForm from './TaskForm'
|
||||
import FooterToolBar from '@/components/tools/FooterToolBar'
|
||||
import RepositoryForm from './RepositoryForm'
|
||||
import TaskForm from './TaskForm'
|
||||
import FooterToolBar from '@/components/tools/FooterToolBar'
|
||||
|
||||
export default {
|
||||
name: "AdvancedForm",
|
||||
components: {
|
||||
FooterToolBar,
|
||||
RepositoryForm,
|
||||
TaskForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '高级表单常见于一次性输入和提交大批量数据的场景。',
|
||||
loading: false,
|
||||
export default {
|
||||
name: 'AdvancedForm',
|
||||
components: {
|
||||
FooterToolBar,
|
||||
RepositoryForm,
|
||||
TaskForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '高级表单常见于一次性输入和提交大批量数据的场景。',
|
||||
loading: false,
|
||||
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'workId' }
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: { customRender: 'department' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
newMember () {
|
||||
this.data.push({
|
||||
key: '-1',
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
remove (key) {
|
||||
const newData = this.data.filter(item => item.key !== key)
|
||||
this.data = newData
|
||||
},
|
||||
saveRow (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
toggle (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
getRowByKey (key, newData) {
|
||||
const data = this.data
|
||||
return (newData || data).filter(item => item.key === key)[0]
|
||||
},
|
||||
cancel (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
},
|
||||
handleChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'workId' }
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: { customRender: 'department' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
},
|
||||
|
||||
// 最终全页面提交
|
||||
validate () {
|
||||
this.$refs.repository.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.task.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
newMember () {
|
||||
this.data.push({
|
||||
key: '-1',
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
remove (key) {
|
||||
const newData = this.data.filter(item => item.key !== key)
|
||||
this.data = newData
|
||||
},
|
||||
saveRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
toggle (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
getRowByKey (key, newData) {
|
||||
const data = this.data
|
||||
return (newData || data).filter(item => item.key === key)[0]
|
||||
},
|
||||
cancel (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
},
|
||||
handleChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
|
||||
// 最终全页面提交
|
||||
validate () {
|
||||
this.$refs.repository.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$refs.task.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -78,42 +78,42 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RepositoryForm",
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
validate (rule, value, callback) {
|
||||
const regex = /^user-(.*)$/
|
||||
if (!regex.test(value)) {
|
||||
callback('需要以 user- 开头')
|
||||
export default {
|
||||
name: 'RepositoryForm',
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
callback()
|
||||
})
|
||||
},
|
||||
validate (rule, value, callback) {
|
||||
const regex = /^user-(.*)$/
|
||||
if (!regex.test(value)) {
|
||||
callback('需要以 user- 开头')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -73,35 +73,35 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TaskForm",
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification['error']({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: 'TaskForm',
|
||||
props: {
|
||||
showSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.$notification.error({
|
||||
message: 'Received values of form:',
|
||||
description: values
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -45,16 +45,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step1",
|
||||
methods: {
|
||||
nextStep () {
|
||||
this.$emit('nextStep')
|
||||
}
|
||||
export default {
|
||||
name: 'Step1',
|
||||
methods: {
|
||||
nextStep () {
|
||||
this.$emit('nextStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -47,26 +47,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step2",
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
export default {
|
||||
name: 'Step2',
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
const that = this
|
||||
that.loading = true
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep')
|
||||
}, 1500)
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
let that = this
|
||||
that.loading = true
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep')
|
||||
}, 1500)
|
||||
},
|
||||
prevStep () {
|
||||
this.$emit('prevStep')
|
||||
}
|
||||
prevStep () {
|
||||
this.$emit('prevStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -79,4 +79,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -30,27 +30,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '../../../result/Result'
|
||||
import Result from '../../../result/Result'
|
||||
|
||||
export default {
|
||||
name: "Step3",
|
||||
components: {
|
||||
Result
|
||||
export default {
|
||||
name: 'Step3',
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$emit('finish')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$emit('finish')
|
||||
},
|
||||
toOrderList () {
|
||||
this.$router.push('/list/query-list')
|
||||
}
|
||||
toOrderList () {
|
||||
this.$router.push('/list/query-list')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.information {
|
||||
@@ -66,4 +66,4 @@
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -14,44 +14,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './Step1'
|
||||
import Step2 from './Step2'
|
||||
import Step3 from './Step3'
|
||||
import Step1 from './Step1'
|
||||
import Step2 from './Step2'
|
||||
import Step3 from './Step3'
|
||||
|
||||
export default {
|
||||
name: "StepForm",
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
Step3
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
|
||||
currentTab: 0,
|
||||
export default {
|
||||
name: 'StepForm',
|
||||
components: {
|
||||
Step1,
|
||||
Step2,
|
||||
Step3
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
|
||||
currentTab: 0,
|
||||
|
||||
// form
|
||||
form: null,
|
||||
// form
|
||||
form: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep () {
|
||||
if (this.currentTab < 2) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep () {
|
||||
if (this.currentTab < 2) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
prevStep () {
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish () {
|
||||
this.currentTab = 0
|
||||
prevStep () {
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish () {
|
||||
this.currentTab = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -59,4 +59,4 @@
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -31,31 +31,30 @@
|
||||
|
||||
<script>
|
||||
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
|
||||
})
|
||||
}
|
||||
const dataSource = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "CardList",
|
||||
data () {
|
||||
return {
|
||||
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
|
||||
linkList: [
|
||||
{ icon: 'rocket', href: '#', title: '快速开始' },
|
||||
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
|
||||
{ icon: 'file-text', href: '#', title: '产品文档' }
|
||||
],
|
||||
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
|
||||
dataSource
|
||||
}
|
||||
export default {
|
||||
name: 'CardList',
|
||||
data () {
|
||||
return {
|
||||
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
|
||||
linkList: [
|
||||
{ icon: 'rocket', href: '#', title: '快速开始' },
|
||||
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
|
||||
{ icon: 'file-text', href: '#', title: '产品文档' }
|
||||
],
|
||||
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -106,4 +105,4 @@
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -26,13 +26,13 @@ import JTable from '@/components/jero/JTable'
|
||||
export default {
|
||||
name: 'Jtable',
|
||||
components: {
|
||||
JTable,
|
||||
JTable
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
isShowPage: true, // 是否显示分页
|
||||
isCheck: false, // 是否多选
|
||||
isShowDropdown: true, //是否开启下拉功能
|
||||
isShowDropdown: true, // 是否开启下拉功能
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 100,
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
@@ -65,7 +65,7 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
@@ -87,7 +87,7 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
@@ -109,8 +109,8 @@ export default {
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号',
|
||||
},
|
||||
address5: '西湖区湖底公园1号'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
@@ -124,8 +124,8 @@ export default {
|
||||
// 1为左侧冻结
|
||||
// 2为右侧冻结
|
||||
// 3为不冻结或解冻
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
// fixed: 'right'
|
||||
|
||||
},
|
||||
@@ -135,9 +135,9 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '年龄',
|
||||
fixedValue: 3,
|
||||
fixedValue: 3
|
||||
},
|
||||
sorter: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
dataIndex: 'address',
|
||||
@@ -145,9 +145,9 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址',
|
||||
fixedValue: 3,
|
||||
fixedValue: 3
|
||||
},
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sorter: (a, b) => a.address.length - b.address.length
|
||||
},
|
||||
{
|
||||
// title: '住址1',
|
||||
@@ -156,8 +156,8 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址1',
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址2',
|
||||
@@ -166,8 +166,8 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址2',
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址3',
|
||||
@@ -176,8 +176,8 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址3',
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址4',
|
||||
@@ -186,8 +186,8 @@ export default {
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址4',
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址5',
|
||||
@@ -196,8 +196,8 @@ export default {
|
||||
width: 500,
|
||||
slots: {
|
||||
title: '住址5',
|
||||
fixedValue: 3,
|
||||
},
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -206,16 +206,16 @@ export default {
|
||||
width: 500,
|
||||
slots: {
|
||||
// title: '操作',
|
||||
fixedValue: 2,
|
||||
fixedValue: 2
|
||||
},
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted () {},
|
||||
watch: {},
|
||||
methods: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -134,128 +134,128 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
import STable from '@/components/table'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '可操作权限',
|
||||
dataIndex: 'actions',
|
||||
scopedSlots: { customRender: 'actions' },
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 向后端拉取可以用的操作列表
|
||||
permissionList: null,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/permission', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
let result = res.result
|
||||
result.data.map(permission => {
|
||||
permission.actionList = JSON.parse(permission.actionData)
|
||||
return permission
|
||||
})
|
||||
return result
|
||||
})
|
||||
{
|
||||
title: '可操作权限',
|
||||
dataIndex: 'actions',
|
||||
scopedSlots: { customRender: 'actions' }
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: '正常',
|
||||
2: '禁用'
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissionList()
|
||||
},
|
||||
methods: {
|
||||
loadPermissionList () {
|
||||
// permissionList
|
||||
new Promise((resolve => {
|
||||
const data = [
|
||||
{ label: '新增', value: 'add', defaultChecked: false },
|
||||
{ label: '查询', value: 'get', defaultChecked: false },
|
||||
{ label: '修改', value: 'update', defaultChecked: false },
|
||||
{ label: '列表', value: 'query', defaultChecked: false },
|
||||
{ label: '删除', value: 'delete', defaultChecked: false },
|
||||
{ label: '导入', value: 'import', defaultChecked: false },
|
||||
{ label: '导出', value: 'export', defaultChecked: false }
|
||||
]
|
||||
setTimeout(resolve(data), 1500)
|
||||
})).then(res => {
|
||||
this.permissionList = res
|
||||
],
|
||||
// 向后端拉取可以用的操作列表
|
||||
permissionList: null,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/permission', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
const result = res.result
|
||||
result.data.map(permission => {
|
||||
permission.actionList = JSON.parse(permission.actionData)
|
||||
return permission
|
||||
})
|
||||
return result
|
||||
})
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter (status) {
|
||||
const statusMap = {
|
||||
1: '正常',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissionList()
|
||||
},
|
||||
methods: {
|
||||
loadPermissionList () {
|
||||
// permissionList
|
||||
new Promise(resolve => {
|
||||
const data = [
|
||||
{ label: '新增', value: 'add', defaultChecked: false },
|
||||
{ label: '查询', value: 'get', defaultChecked: false },
|
||||
{ label: '修改', value: 'update', defaultChecked: false },
|
||||
{ label: '列表', value: 'query', defaultChecked: false },
|
||||
{ label: '删除', value: 'delete', defaultChecked: false },
|
||||
{ label: '导入', value: 'import', defaultChecked: false },
|
||||
{ label: '导出', value: 'export', defaultChecked: false }
|
||||
]
|
||||
setTimeout(resolve(data), 1500)
|
||||
}).then(res => {
|
||||
this.permissionList = res
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
@@ -267,6 +267,6 @@
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -79,158 +79,157 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTable from '@/components/jero/JTable'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
import { getAction } from '@api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
import JTable from '@/components/jero/JTable'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
import { getAction } from '@api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
JTable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
mdl: {},
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
slots: {
|
||||
title: '唯一识别码',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
slots: {
|
||||
title: '角色名称',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
slots: {
|
||||
title: '状态',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
title: '创建时间',
|
||||
fixedValue: 3
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
JTable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
mdl: {},
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
slots: {
|
||||
title: '唯一识别码',
|
||||
fixedValue: 3
|
||||
}
|
||||
],
|
||||
dataSource:[],
|
||||
url: {
|
||||
list: "/mock/api/role",
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData(arg) {
|
||||
if(!this.url.list){
|
||||
this.$message.error("请设置url.list属性!")
|
||||
return
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.$refs.jTable.ispagination.current = 1;
|
||||
}
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
var params = this.getQueryParams();//查询条件
|
||||
this.loading = true;
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
|
||||
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.dataSource = res.result.data||res.result;
|
||||
if(res.result.total) {
|
||||
this.$refs.jTable.ispagination.total = res.result.total;
|
||||
}else{
|
||||
this.$refs.jTable.ispagination.total = 0;
|
||||
}
|
||||
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
|
||||
if(res.status===510){
|
||||
this.$message.warning(res.message)
|
||||
{
|
||||
dataIndex: 'name',
|
||||
slots: {
|
||||
title: '角色名称',
|
||||
fixedValue: 3
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
|
||||
// return this.$http.get('/mock/api/role', {
|
||||
// params: Object.assign(parameter, this.queryParam)
|
||||
// }).then(res => {
|
||||
// return res.result
|
||||
// })
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.$refs.jTable.refresh()
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
getQueryParams() {
|
||||
//获取查询条件
|
||||
let sqp = {}
|
||||
if(this.superQueryParams){
|
||||
sqp['superQueryParams']=encodeURI(this.superQueryParams)
|
||||
sqp['superQueryMatchType'] = this.superQueryMatchType
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
slots: {
|
||||
title: '状态',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
title: '创建时间',
|
||||
fixedValue: 3
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.$refs.jTable.ispagination.current;
|
||||
param.pageSize = this.$refs.jTable.ispagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
getQueryField() {
|
||||
var str = "id,";
|
||||
this.columns.forEach(function (value) {
|
||||
str += "," + value.dataIndex;
|
||||
});
|
||||
return str;
|
||||
},
|
||||
searchQuery() {
|
||||
this.loadData(1);
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {}
|
||||
this.loadData(1);
|
||||
},
|
||||
],
|
||||
dataSource: [],
|
||||
url: {
|
||||
list: '/mock/api/role'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData (arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error('请设置url.list属性!')
|
||||
return
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.$refs.jTable.ispagination.current = 1
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
var params = this.getQueryParams()// 查询条件
|
||||
this.loading = true
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
// update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.dataSource = res.result.data || res.result
|
||||
if (res.result.total) {
|
||||
this.$refs.jTable.ispagination.total = res.result.total
|
||||
} else {
|
||||
this.$refs.jTable.ispagination.total = 0
|
||||
}
|
||||
// update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
|
||||
if (res.status === 510) {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
// return this.$http.get('/mock/api/role', {
|
||||
// params: Object.assign(parameter, this.queryParam)
|
||||
// }).then(res => {
|
||||
// return res.result
|
||||
// })
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.$refs.jTable.refresh()
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
getQueryParams () {
|
||||
// 获取查询条件
|
||||
const sqp = {}
|
||||
if (this.superQueryParams) {
|
||||
sqp.superQueryParams = encodeURI(this.superQueryParams)
|
||||
sqp.superQueryMatchType = this.superQueryMatchType
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
||||
param.field = this.getQueryField()
|
||||
param.pageNo = this.$refs.jTable.ispagination.current
|
||||
param.pageSize = this.$refs.jTable.ispagination.pageSize
|
||||
return filterObj(param)
|
||||
},
|
||||
getQueryField () {
|
||||
var str = 'id,'
|
||||
this.columns.forEach(function (value) {
|
||||
str += ',' + value.dataIndex
|
||||
})
|
||||
return str
|
||||
},
|
||||
searchQuery () {
|
||||
this.loadData(1)
|
||||
},
|
||||
searchReset () {
|
||||
this.queryParam = {}
|
||||
this.loadData(1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -71,72 +71,72 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
|
||||
const data = []
|
||||
data.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
owner: '付晓晓',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 90
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Angular',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
owner: '曲丽丽',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 54
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
||||
description: '生命就像一盒巧克力，结果往往出人意料',
|
||||
owner: '林东东',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 66
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design Pro',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
owner: '周星星',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 30
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Bootstrap',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
owner: '吴加好',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
status: 'exception',
|
||||
value: 100
|
||||
}
|
||||
})
|
||||
const data = []
|
||||
data.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
owner: '付晓晓',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 90
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Angular',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
owner: '曲丽丽',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 54
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
||||
description: '生命就像一盒巧克力，结果往往出人意料',
|
||||
owner: '林东东',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 66
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design Pro',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
owner: '周星星',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 30
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Bootstrap',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
owner: '吴加好',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
status: 'exception',
|
||||
value: 100
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "StandardList",
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
export default {
|
||||
name: 'StandardList',
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -161,4 +161,4 @@
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -123,134 +123,134 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
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
|
||||
})
|
||||
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: [],
|
||||
visibleCreateModal:false
|
||||
}
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
visibleCreateModal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleChange (value, key, column) {
|
||||
console.log(value, key, column)
|
||||
},
|
||||
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
|
||||
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
|
||||
},
|
||||
//添加逻辑
|
||||
handleModalVisible(isVisible) {
|
||||
this.visibleCreateModal = isVisible;
|
||||
},
|
||||
handleCreateModalCancel() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
handleCreateModalOk() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
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')
|
||||
}
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
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
|
||||
},
|
||||
// 添加逻辑
|
||||
handleModalVisible (isVisible) {
|
||||
this.visibleCreateModal = isVisible
|
||||
},
|
||||
handleCreateModalCancel () {
|
||||
this.visibleCreateModal = false
|
||||
},
|
||||
handleCreateModalOk () {
|
||||
this.visibleCreateModal = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
@@ -262,8 +262,8 @@
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -285,4 +285,4 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -188,139 +188,139 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
import ATextarea from "ant-design-vue/es/input/TextArea"
|
||||
import AInput from "ant-design-vue/es/input/Input"
|
||||
import moment from "moment"
|
||||
import axios from 'axios';
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
import STable from '@/components/table'
|
||||
import ATextarea from 'ant-design-vue/es/input/TextArea'
|
||||
import AInput from 'ant-design-vue/es/input/Input'
|
||||
import moment from 'moment'
|
||||
import axios from 'axios'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
AInput,
|
||||
ATextarea,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibleCreateModal:false,
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
AInput,
|
||||
ATextarea,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibleCreateModal: false,
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 }
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: true,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no'
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description'
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: true,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
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
|
||||
})
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
customRender: (text) => text + ' 次'
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList({ t: new Date()})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
|
||||
//添加逻辑
|
||||
handleModalVisible(isVisible) {
|
||||
this.visibleCreateModal = isVisible;
|
||||
},
|
||||
handleCreateModalOk() {
|
||||
this.createForm.validateFields((err, fieldsValue) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
const description = this.createForm.getFieldValue('description');
|
||||
axios.post('/saveRule', {
|
||||
desc: description,
|
||||
}).then((res) => {
|
||||
this.createForm.resetFields();
|
||||
this.visibleCreateModal = false;
|
||||
this.loadRuleData();
|
||||
});
|
||||
});
|
||||
},
|
||||
handleCreateModalCancel() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
|
||||
console.log(this.$refs.table)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
{
|
||||
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: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList({ t: new Date() })
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
|
||||
// 添加逻辑
|
||||
handleModalVisible (isVisible) {
|
||||
this.visibleCreateModal = isVisible
|
||||
},
|
||||
handleCreateModalOk () {
|
||||
this.createForm.validateFields((err, fieldsValue) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
const description = this.createForm.getFieldValue('description')
|
||||
axios.post('/saveRule', {
|
||||
desc: description
|
||||
}).then((res) => {
|
||||
this.createForm.resetFields()
|
||||
this.visibleCreateModal = false
|
||||
this.loadRuleData()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleCreateModalCancel () {
|
||||
this.visibleCreateModal = false
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
|
||||
console.log(this.$refs.table)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
@@ -332,6 +332,6 @@
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -149,105 +149,105 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
import STable from '@/components/table'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getRoleList(parameter)
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getServiceList().then(res => {
|
||||
console.log('getServiceList.call()', res)
|
||||
})
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('getRoleList.call()', res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getRoleList(parameter)
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getServiceList().then(res => {
|
||||
console.log('getServiceList.call()', res)
|
||||
})
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('getRoleList.call()', res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
this.visible = true
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
@@ -259,6 +259,6 @@
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -78,126 +78,125 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import pick from 'lodash.pick'
|
||||
import { getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
mdl: {},
|
||||
|
||||
form: this.$form.createForm(this),
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
export default {
|
||||
name: 'RoleModal',
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
this.visible = true
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
mdl: {},
|
||||
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
permission.selected = permissionsAction[permission.id]
|
||||
form: this.$form.createForm(this),
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
},
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
this.visible = true
|
||||
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
permission.selected = permissionsAction[permission.id]
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const _this = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
// 验证表单没错误
|
||||
if (!err) {
|
||||
console.log('form values', values)
|
||||
|
||||
_this.confirmLoading = true
|
||||
// 模拟后端请求 2000 毫秒延迟
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => resolve(), 2000)
|
||||
}).then(() => {
|
||||
// Do something
|
||||
_this.$message.success('保存成功')
|
||||
_this.$emit('ok')
|
||||
}).catch(() => {
|
||||
// Do something
|
||||
}).finally(() => {
|
||||
_this.confirmLoading = false
|
||||
_this.close()
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const _this = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
// 验证表单没错误
|
||||
if (!err) {
|
||||
console.log('form values', values)
|
||||
|
||||
_this.confirmLoading = true
|
||||
// 模拟后端请求 2000 毫秒延迟
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => resolve(), 2000)
|
||||
}).then(() => {
|
||||
// Do something
|
||||
_this.$message.success('保存成功')
|
||||
_this.$emit('ok')
|
||||
}).catch(() => {
|
||||
// Do something
|
||||
}).finally(() => {
|
||||
_this.confirmLoading = false
|
||||
_this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
let result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
const result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,62 +5,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchLayout",
|
||||
data () {
|
||||
return {
|
||||
tabs: {
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
title: '文章'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '项目'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: '应用'
|
||||
},
|
||||
],
|
||||
active: () => {
|
||||
switch (this.$route.path) {
|
||||
case '/list/search/article':
|
||||
return '1'
|
||||
case '/list/search/project':
|
||||
return '2'
|
||||
case '/list/search/application':
|
||||
return '3'
|
||||
default:
|
||||
return '1'
|
||||
}
|
||||
export default {
|
||||
name: 'SearchLayout',
|
||||
data () {
|
||||
return {
|
||||
tabs: {
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
title: '文章'
|
||||
},
|
||||
callback: (key) => {
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.$router.push('/list/search/article')
|
||||
break
|
||||
case '2':
|
||||
this.$router.push('/list/search/project')
|
||||
break
|
||||
case '3':
|
||||
this.$router.push('/list/search/application')
|
||||
break
|
||||
default:
|
||||
this.$router.push('/workplace')
|
||||
}
|
||||
{
|
||||
key: '2',
|
||||
title: '项目'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: '应用'
|
||||
}
|
||||
],
|
||||
active: () => {
|
||||
switch (this.$route.path) {
|
||||
case '/list/search/article':
|
||||
return '1'
|
||||
case '/list/search/project':
|
||||
return '2'
|
||||
case '/list/search/application':
|
||||
return '3'
|
||||
default:
|
||||
return '1'
|
||||
}
|
||||
},
|
||||
search: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
callback: (key) => {
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.$router.push('/list/search/article')
|
||||
break
|
||||
case '2':
|
||||
this.$router.push('/list/search/project')
|
||||
break
|
||||
case '3':
|
||||
this.$router.push('/list/search/application')
|
||||
break
|
||||
default:
|
||||
this.$router.push('/workplace')
|
||||
}
|
||||
}
|
||||
},
|
||||
search: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -75,4 +75,4 @@
|
||||
.search-content{
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
<a-button @click="handleTableSet" type="primary">设置值</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable"
|
||||
:loading="loading"
|
||||
@@ -34,266 +33,264 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import moment from 'moment'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'DefaultTable',
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '字段名称',
|
||||
key: 'dbFieldName',
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler(type, value, row, column, callback, target) {
|
||||
// type 触发校验的类型（input、change、blur）
|
||||
// value 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
|
||||
if (type === 'blur') {
|
||||
if (value === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
} else {
|
||||
callback(true) // 不填写或者填写 null 代表不进行任何操作
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文件域',
|
||||
key: 'upload',
|
||||
type: FormTypes.upload,
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
placeholder: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG['domianURL'] + '/sys/common/upload',
|
||||
data: {
|
||||
biz: 'temp',
|
||||
// 更多扩展参数
|
||||
export default {
|
||||
name: 'DefaultTable',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '字段名称',
|
||||
key: 'dbFieldName',
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [
|
||||
{
|
||||
required: true, // 必填
|
||||
message: '请输入${title}' // 显示的文本
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字段类型',
|
||||
key: 'dbFieldType',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
allowInput: true,
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '性别（字典）',
|
||||
key: 'sex_dict',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '多选测试',
|
||||
key: 'multipleSelect',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
props: { 'mode': 'multiple' }, // 支持多选
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '这里可以多选',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '字段长度',
|
||||
key: 'dbLength',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: 32,
|
||||
placeholder: '${title}',
|
||||
// 是否是统计列，只有 inputNumber 才能设置统计列
|
||||
statistics: true,
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
// width: '22%',
|
||||
width: '320px',
|
||||
type: FormTypes.datetime,
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'money',
|
||||
width: '320px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: '100.32',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '可以为空',
|
||||
key: 'isNull',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
type: FormTypes.popup,
|
||||
key: 'popup',
|
||||
title: 'JPopup',
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name',
|
||||
orgFields: 'name',
|
||||
destFields: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slotName: 'action',
|
||||
}
|
||||
{
|
||||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
|
||||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||||
},
|
||||
{
|
||||
unique: true,
|
||||
message: '${title}不能重复'
|
||||
},
|
||||
{
|
||||
handler (type, value, row, column, callback, target) {
|
||||
// type 触发校验的类型（input、change、blur）
|
||||
// value 当前校验的值
|
||||
// callback(flag, message) 方法必须执行且只能执行一次
|
||||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||||
// message = 提示的类型，默认使用配置的 message
|
||||
// target 行编辑的实例对象
|
||||
|
||||
],
|
||||
dataSource: [],
|
||||
selectedRowIds: []
|
||||
if (type === 'blur') {
|
||||
if (value === 'abc') {
|
||||
callback(false, '${title}不能是abc') // false = 未通过校验
|
||||
} else {
|
||||
callback(true) // true = 通过验证
|
||||
}
|
||||
} else {
|
||||
callback(true) // 不填写或者填写 null 代表不进行任何操作
|
||||
}
|
||||
},
|
||||
message: '${title}默认提示'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文件域',
|
||||
key: 'upload',
|
||||
type: FormTypes.upload,
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
placeholder: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG.domianURL + '/sys/common/upload',
|
||||
data: {
|
||||
biz: 'temp'
|
||||
// 更多扩展参数
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字段类型',
|
||||
key: 'dbFieldType',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
allowInput: true,
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '性别（字典）',
|
||||
key: 'sex_dict',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
options: [],
|
||||
dictCode: 'sex',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '多选测试',
|
||||
key: 'multipleSelect',
|
||||
// width: '18%',
|
||||
width: '300px',
|
||||
type: FormTypes.select,
|
||||
props: { mode: 'multiple' }, // 支持多选
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||||
placeholder: '这里可以多选',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '字段长度',
|
||||
key: 'dbLength',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: 32,
|
||||
placeholder: '${title}',
|
||||
// 是否是统计列，只有 inputNumber 才能设置统计列
|
||||
statistics: true,
|
||||
validateRules: [{ required: true, message: '请输入${title}' }]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
// width: '22%',
|
||||
width: '320px',
|
||||
type: FormTypes.datetime,
|
||||
defaultValue: '2019-4-30 14:52:22',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '数字',
|
||||
key: 'money',
|
||||
width: '320px',
|
||||
type: FormTypes.inputNumber,
|
||||
defaultValue: '100.32',
|
||||
placeholder: '请选择${title}',
|
||||
validateRules: [{ required: true, message: '请选择${title}' }]
|
||||
},
|
||||
{
|
||||
title: '可以为空',
|
||||
key: 'isNull',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
type: FormTypes.popup,
|
||||
key: 'popup',
|
||||
title: 'JPopup',
|
||||
width: '180px',
|
||||
popupCode: 'demo',
|
||||
field: 'name',
|
||||
orgFields: 'name',
|
||||
destFields: 'name'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slotName: 'action'
|
||||
}
|
||||
|
||||
],
|
||||
dataSource: [],
|
||||
selectedRowIds: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.randomData(23, false)
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck () {
|
||||
this.$refs.editableTable.getValues((error) => {
|
||||
if (error === 0) {
|
||||
this.$message.success('验证通过')
|
||||
} else {
|
||||
this.$message.error('验证未通过')
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet () {
|
||||
this.$refs.editableTable.getValues((error, values) => {
|
||||
console.log('values:', values)
|
||||
}, false)
|
||||
console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
|
||||
|
||||
this.$message.info('获取值成功，请看控制台输出')
|
||||
},
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet () {
|
||||
this.randomData(1000, true)
|
||||
},
|
||||
|
||||
handleSelectRowChange (selectedRowIds) {
|
||||
this.selectedRowIds = selectedRowIds
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomData (size, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.randomData(23, false)
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 表单验证 */
|
||||
handleTableCheck() {
|
||||
this.$refs.editableTable.getValues((error) => {
|
||||
if (error === 0) {
|
||||
this.$message.success('验证通过')
|
||||
} else {
|
||||
this.$message.error('验证未通过')
|
||||
}
|
||||
const randomDatetime = () => {
|
||||
const time = parseInt(randomNumber(1000, 9999999999999))
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
const begin = Date.now()
|
||||
const values = []
|
||||
for (let i = 0; i < size; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
dbFieldName: `name_${i + 1}`,
|
||||
// dbFieldTxt: randomString(10),
|
||||
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
|
||||
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
|
||||
dbLength: randomNumber(0, 233),
|
||||
datetime: randomDatetime(),
|
||||
isNull: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
},
|
||||
/** 获取值，忽略表单验证 */
|
||||
handleTableGet() {
|
||||
this.$refs.editableTable.getValues((error, values) => {
|
||||
console.log('values:', values)
|
||||
}, false)
|
||||
console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
|
||||
|
||||
this.$message.info('获取值成功，请看控制台输出')
|
||||
|
||||
},
|
||||
/** 模拟加载1000条数据 */
|
||||
handleTableSet() {
|
||||
this.randomData(1000, true)
|
||||
},
|
||||
|
||||
handleSelectRowChange(selectedRowIds) {
|
||||
this.selectedRowIds = selectedRowIds
|
||||
},
|
||||
|
||||
/* 随机生成数据 */
|
||||
randomData(size, loading = false) {
|
||||
if (loading) {
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
let randomDatetime = () => {
|
||||
let time = parseInt(randomNumber(1000, 9999999999999))
|
||||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
let begin = Date.now()
|
||||
let values = []
|
||||
for (let i = 0; i < size; i++) {
|
||||
values.push({
|
||||
id: randomUUID(),
|
||||
dbFieldName: `name_${i + 1}`,
|
||||
// dbFieldTxt: randomString(10),
|
||||
multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
|
||||
dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
|
||||
dbLength: randomNumber(0, 233),
|
||||
datetime: randomDatetime(),
|
||||
isNull: ['Y', 'N'][randomNumber(0, 1)]
|
||||
})
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
let end = Date.now()
|
||||
let diff = end - begin
|
||||
|
||||
if (loading && diff < size) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, size - diff)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
handleDelete(props) {
|
||||
let { rowId, target } = props
|
||||
target.removeRows(rowId)
|
||||
}
|
||||
|
||||
this.dataSource = values
|
||||
const end = Date.now()
|
||||
const diff = end - begin
|
||||
|
||||
if (loading && diff < size) {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, size - diff)
|
||||
}
|
||||
},
|
||||
|
||||
handleDelete (props) {
|
||||
const { rowId, target } = props
|
||||
target.removeRows(rowId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -84,229 +84,228 @@
|
||||
|
||||
<script>
|
||||
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderModalForJvexTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable() {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
export default {
|
||||
name: 'JeroOrderModalForJvexTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
|
||||
add() {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
//editableTables[0].add()
|
||||
//editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
edit(record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
let params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
this.table1.dataSource=[];
|
||||
this.table2.dataSource=[];
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData(url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk() {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs(key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields() {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form,this.model, tables)
|
||||
}).then(allValues => {
|
||||
let formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: JVXETypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData(allValues) {
|
||||
let orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit(formData) {
|
||||
let url = this.url.add, method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: JVXETypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: JVXETypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
// editableTables[0].add()
|
||||
// editableTables[1].add()
|
||||
})
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
this.table1.dataSource = []
|
||||
this.table2.dataSource = []
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].tableData
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add; let method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -10,61 +10,61 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ReadOnlyTable',
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: '输入框',
|
||||
key: 'input',
|
||||
type: FormTypes.input,
|
||||
placeholder: '清输入'
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: FormTypes.select,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '多选框',
|
||||
key: 'checkbox',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: [true, false]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
type: FormTypes.datetime
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{ input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
|
||||
{ input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
|
||||
{ input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
|
||||
{ input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
|
||||
{ input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
export default {
|
||||
name: 'ReadOnlyTable',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: '输入框',
|
||||
key: 'input',
|
||||
type: FormTypes.input,
|
||||
placeholder: '清输入'
|
||||
},
|
||||
{
|
||||
title: '下拉框',
|
||||
key: 'select',
|
||||
type: FormTypes.select,
|
||||
options: [
|
||||
{ title: 'String', value: 'string' },
|
||||
{ title: 'Integer', value: 'int' },
|
||||
{ title: 'Double', value: 'double' },
|
||||
{ title: 'Boolean', value: 'boolean' }
|
||||
],
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
title: '多选框',
|
||||
key: 'checkbox',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: [true, false]
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'datetime',
|
||||
type: FormTypes.datetime
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{ input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
|
||||
{ input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
|
||||
{ input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
|
||||
{ input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
|
||||
{ input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -11,119 +11,117 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'ThreeLinkage',
|
||||
components: { JEditableTable },
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
key: 's1',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
key: 's2',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
key: 's3',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
|
||||
mockData: [
|
||||
{ label: '北京市', value: '110000', parent: null },
|
||||
{ label: '天津市', value: '120000', parent: null },
|
||||
{ label: '河北省', value: '130000', parent: null },
|
||||
{ label: '上海市', value: '310000', parent: null },
|
||||
|
||||
{ label: '北京市', value: '110100', parent: '110000' },
|
||||
{ label: '天津市市', value: '120100', parent: '120000' },
|
||||
{ label: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ label: '唐山市', value: '130200', parent: '130000' },
|
||||
{ label: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ label: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{ label: '东城区', value: '110101', parent: '110100' },
|
||||
{ label: '西城区', value: '110102', parent: '110100' },
|
||||
{ label: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ label: '和平区', value: '120101', parent: '120000' },
|
||||
{ label: '河东区', value: '120102', parent: '120000' },
|
||||
{ label: '河西区', value: '120103', parent: '120000' },
|
||||
{ label: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ label: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ label: '长宁区', value: '310105', parent: '310100' },
|
||||
{ label: '长安区', value: '130102', parent: '130100' },
|
||||
{ label: '桥西区', value: '130104', parent: '130100' },
|
||||
{ label: '新华区', value: '130105', parent: '130100' },
|
||||
{ label: '路南区', value: '130202', parent: '130200' },
|
||||
{ label: '路北区', value: '130203', parent: '130200' },
|
||||
{ label: '古冶区', value: '130204', parent: '130200' },
|
||||
{ label: '海港区', value: '130302', parent: '130300' },
|
||||
{ label: '山海关区', value: '130303', parent: '130300' },
|
||||
{ label: '北戴河区', value: '130304', parent: '130300' },
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化数据
|
||||
this.columns[0].options = this.request(null)
|
||||
},
|
||||
methods: {
|
||||
|
||||
request(parentId) {
|
||||
return this.mockData.filter(i => i.parent === parentId)
|
||||
},
|
||||
|
||||
/** 当选项被改变时，联动其他组件 */
|
||||
handleValueChange(event) {
|
||||
const { type, row, column, value, target } = event
|
||||
|
||||
if (type === FormTypes.select) {
|
||||
|
||||
// 第一列
|
||||
if (column.key === 's1') {
|
||||
// 设置第二列的 options
|
||||
this.columns[1].options = this.request(value)
|
||||
// 清空后两列的数据
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s2: '', s3: '' }
|
||||
}])
|
||||
this.columns[2].options = []
|
||||
} else
|
||||
// 第二列
|
||||
if (column.key === 's2') {
|
||||
this.columns[2].options = this.request(value)
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s3: '' }
|
||||
}])
|
||||
}
|
||||
export default {
|
||||
name: 'ThreeLinkage',
|
||||
components: { JEditableTable },
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '省/直辖市/自治区',
|
||||
key: 's1',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
key: 's2',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '县/区',
|
||||
key: 's3',
|
||||
type: FormTypes.select,
|
||||
width: '240px',
|
||||
options: [],
|
||||
placeholder: '请选择${title}'
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
|
||||
}
|
||||
mockData: [
|
||||
{ label: '北京市', value: '110000', parent: null },
|
||||
{ label: '天津市', value: '120000', parent: null },
|
||||
{ label: '河北省', value: '130000', parent: null },
|
||||
{ label: '上海市', value: '310000', parent: null },
|
||||
|
||||
{ label: '北京市', value: '110100', parent: '110000' },
|
||||
{ label: '天津市市', value: '120100', parent: '120000' },
|
||||
{ label: '石家庄市', value: '130100', parent: '130000' },
|
||||
{ label: '唐山市', value: '130200', parent: '130000' },
|
||||
{ label: '秦皇岛市', value: '130300', parent: '130000' },
|
||||
{ label: '上海市', value: '310100', parent: '310000' },
|
||||
|
||||
{ label: '东城区', value: '110101', parent: '110100' },
|
||||
{ label: '西城区', value: '110102', parent: '110100' },
|
||||
{ label: '朝阳区', value: '110105', parent: '110100' },
|
||||
{ label: '和平区', value: '120101', parent: '120000' },
|
||||
{ label: '河东区', value: '120102', parent: '120000' },
|
||||
{ label: '河西区', value: '120103', parent: '120000' },
|
||||
{ label: '黄浦区', value: '310101', parent: '310100' },
|
||||
{ label: '徐汇区', value: '310104', parent: '310100' },
|
||||
{ label: '长宁区', value: '310105', parent: '310100' },
|
||||
{ label: '长安区', value: '130102', parent: '130100' },
|
||||
{ label: '桥西区', value: '130104', parent: '130100' },
|
||||
{ label: '新华区', value: '130105', parent: '130100' },
|
||||
{ label: '路南区', value: '130202', parent: '130200' },
|
||||
{ label: '路北区', value: '130203', parent: '130200' },
|
||||
{ label: '古冶区', value: '130204', parent: '130200' },
|
||||
{ label: '海港区', value: '130302', parent: '130300' },
|
||||
{ label: '山海关区', value: '130303', parent: '130300' },
|
||||
{ label: '北戴河区', value: '130304', parent: '130300' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化数据
|
||||
this.columns[0].options = this.request(null)
|
||||
},
|
||||
methods: {
|
||||
|
||||
request (parentId) {
|
||||
return this.mockData.filter(i => i.parent === parentId)
|
||||
},
|
||||
|
||||
/** 当选项被改变时，联动其他组件 */
|
||||
handleValueChange (event) {
|
||||
const { type, row, column, value, target } = event
|
||||
|
||||
if (type === FormTypes.select) {
|
||||
// 第一列
|
||||
if (column.key === 's1') {
|
||||
// 设置第二列的 options
|
||||
this.columns[1].options = this.request(value)
|
||||
// 清空后两列的数据
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s2: '', s3: '' }
|
||||
}])
|
||||
this.columns[2].options = []
|
||||
} else
|
||||
// 第二列
|
||||
if (column.key === 's2') {
|
||||
this.columns[2].options = this.request(value)
|
||||
target.setValues([{
|
||||
rowKey: row.id,
|
||||
values: { s3: '' }
|
||||
}])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -48,99 +48,96 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import { httpAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroDemoModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
layout: {
|
||||
labelCol: { span: 3 },
|
||||
wrapperCol: { span: 14 },
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名!' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: false, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: "/test/jeroDemo/add",
|
||||
edit: "/test/jeroDemo/edit",
|
||||
},
|
||||
export default {
|
||||
name: 'JeroDemoModal',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
layout: {
|
||||
labelCol: { span: 3 },
|
||||
wrapperCol: { span: 14 }
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名!' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: false, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroDemo/add',
|
||||
edit: '/test/jeroDemo/edit'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
created () {
|
||||
edit (record) {
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
},
|
||||
close () {
|
||||
this.$refs.form.resetFields();
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.model.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
|
||||
httpAction(httpurl,this.model,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
|
||||
|
||||
|
||||
close () {
|
||||
this.$refs.form.resetFields()
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
|
||||
httpAction(httpurl, this.model, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -103,183 +103,182 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: "JeroDemoTabsModal",
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: {customRender: 'name'}
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: {customRender: 'workId'}
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: {customRender: 'department'}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: {customRender: 'operation'}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
],
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: "/test/jeroDemo/add",
|
||||
edit: "/test/jeroDemo/edit",
|
||||
export default {
|
||||
name: 'JeroDemoTabsModal',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
// table
|
||||
columns: [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'workId',
|
||||
key: 'workId',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'workId' }
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
width: '40%',
|
||||
scopedSlots: { customRender: 'department' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
name: '小明',
|
||||
workId: '001',
|
||||
editable: false,
|
||||
department: '行政部'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '李莉',
|
||||
workId: '002',
|
||||
editable: false,
|
||||
department: 'IT部'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '王小帅',
|
||||
workId: '003',
|
||||
editable: false,
|
||||
department: '财务部'
|
||||
}
|
||||
],
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: '/test/jeroDemo/add',
|
||||
edit: '/test/jeroDemo/edit'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'name', 'keyWord', 'sex', 'age', 'email', 'content'))
|
||||
// 时间格式化
|
||||
this.form.setFieldsValue({ punchTime: this.model.punchTime ? moment(this.model.punchTime, 'YYYY-MM-DD HH:mm:ss') : null })
|
||||
this.form.setFieldsValue({ birthday: this.model.birthday ? moment(this.model.birthday) : null })
|
||||
})
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 时间格式化
|
||||
formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null
|
||||
formData.birthday = formData.birthday ? formData.birthday.format() : null
|
||||
|
||||
console.log(formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
newRow () {
|
||||
// 通过时间戳生成 UUID
|
||||
const uuid = Math.round(new Date().getTime()).toString()
|
||||
console.log('uuid: ' + uuid)
|
||||
this.data.push({
|
||||
key: uuid,
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
removeRow (key) {
|
||||
const newData = this.data.filter(item => item.key !== key)
|
||||
this.data = newData
|
||||
},
|
||||
saveRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
handlerRowChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
created() {
|
||||
editRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'name', 'keyWord', 'sex', 'age', 'email', 'content'))
|
||||
//时间格式化
|
||||
this.form.setFieldsValue({punchTime: this.model.punchTime ? moment(this.model.punchTime, 'YYYY-MM-DD HH:mm:ss') : null})
|
||||
this.form.setFieldsValue({birthday: this.model.birthday ? moment(this.model.birthday) : null})
|
||||
});
|
||||
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
//时间格式化
|
||||
formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
|
||||
formData.birthday = formData.birthday ? formData.birthday.format() : null;
|
||||
|
||||
console.log(formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
newRow () {
|
||||
// 通过时间戳生成 UUID
|
||||
let uuid = Math.round(new Date().getTime()).toString();
|
||||
console.log('uuid: '+ uuid)
|
||||
this.data.push({
|
||||
key: uuid,
|
||||
name: '',
|
||||
workId: '',
|
||||
department: '',
|
||||
editable: true,
|
||||
isNew: true
|
||||
})
|
||||
},
|
||||
removeRow (key) {
|
||||
const newData = this.data.filter(item => item.key !== key)
|
||||
this.data = newData
|
||||
},
|
||||
saveRow (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
target.isNew = false
|
||||
},
|
||||
handlerRowChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
const target = newData.filter(item => key === item.key)[0]
|
||||
if (target) {
|
||||
target[column] = value
|
||||
this.data = newData
|
||||
}
|
||||
},
|
||||
editRow (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = !target.editable
|
||||
},
|
||||
cancelEditRow (key) {
|
||||
let target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
},
|
||||
cancelEditRow (key) {
|
||||
const target = this.data.filter(item => item.key === key)[0]
|
||||
target.editable = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-modal-body {
|
||||
padding: 8px!important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -138,141 +138,140 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction,getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
orderCode: [
|
||||
{ required: true, message: '订单号不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: "/test/jeroOrderMain/add",
|
||||
edit: "/test/jeroOrderMain/edit",
|
||||
orderCustomerList: "/test/jeroOrderMain/queryOrderCustomerListByMainId",
|
||||
orderTicketList: "/test/jeroOrderMain/queryOrderTicketListByMainId",
|
||||
},
|
||||
export default {
|
||||
name: 'JeroOrderMainModal',
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
orderCode: [
|
||||
{ required: true, message: '订单号不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.orderMainModel = Object.assign({
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
}, record);
|
||||
//--------------------------------------------------------
|
||||
//初始化明细表数据
|
||||
console.log(this.orderMainModel.id)
|
||||
if(this.orderMainModel.id){
|
||||
let params = {id:this.orderMainModel.id}
|
||||
//初始化订单机票列表
|
||||
getAction(this.url.orderCustomerList,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.orderMainModel.jeroOrderCustomerList = res.result;
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
//初始化订单客户列表
|
||||
getAction(this.url.orderTicketList,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.orderMainModel.jeroOrderTicketList = res.result;
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if(!this.orderMainModel.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
|
||||
httpAction(httpurl,this.orderMainModel,method).then((res)=>{
|
||||
if(res.success){
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
}else{
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
|
||||
edit (record) {
|
||||
this.orderMainModel = Object.assign({
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
}, record)
|
||||
// --------------------------------------------------------
|
||||
// 初始化明细表数据
|
||||
console.log(this.orderMainModel.id)
|
||||
if (this.orderMainModel.id) {
|
||||
const params = { id: this.orderMainModel.id }
|
||||
// 初始化订单机票列表
|
||||
getAction(this.url.orderCustomerList, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.orderMainModel.jeroOrderCustomerList = res.result
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
addRowCustom () {
|
||||
this.orderMainModel.jeroOrderCustomerList.push({});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowCustom (index) {
|
||||
console.log(index)
|
||||
let all = this.orderMainModel
|
||||
all['jeroOrderCustomerList'].splice(index,1);
|
||||
this.orderMainModel.jeroOrderCustomerList.splice(index,1);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
addRowTicket () {
|
||||
this.orderMainModel.jeroOrderTicketList.push({});
|
||||
console.log(this.orderMainModel.jeroOrderTicketList)
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowTicket (index) {
|
||||
console.log(index)
|
||||
let all = this.orderMainModel
|
||||
all['jeroOrderTicketList'].splice(index,1);
|
||||
this.orderMainModel.jeroOrderTicketList.splice(index,1);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 初始化订单客户列表
|
||||
getAction(this.url.orderTicketList, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.orderMainModel.jeroOrderTicketList = res.result
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.orderMainModel.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
|
||||
httpAction(httpurl, this.orderMainModel, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
addRowCustom () {
|
||||
this.orderMainModel.jeroOrderCustomerList.push({})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
delRowCustom (index) {
|
||||
console.log(index)
|
||||
const all = this.orderMainModel
|
||||
all.jeroOrderCustomerList.splice(index, 1)
|
||||
this.orderMainModel.jeroOrderCustomerList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
addRowTicket () {
|
||||
this.orderMainModel.jeroOrderTicketList.push({})
|
||||
console.log(this.orderMainModel.jeroOrderTicketList)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
delRowTicket (index) {
|
||||
console.log(index)
|
||||
const all = this.orderMainModel
|
||||
all.jeroOrderTicketList.splice(index, 1)
|
||||
this.orderMainModel.jeroOrderTicketList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -82,230 +82,229 @@
|
||||
|
||||
<script>
|
||||
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import JEditableTable from '@/components/jero/JEditableTable'
|
||||
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
|
||||
export default {
|
||||
name: 'JeroOrderModalForJEditableTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: FormTypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable() {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
export default {
|
||||
name: 'JeroOrderModalForJEditableTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
|
||||
add() {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].add()
|
||||
editableTables[1].add()
|
||||
})
|
||||
|
||||
this.edit({})
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 - 6 }
|
||||
},
|
||||
edit(record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
let params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].initialize()
|
||||
editableTables[1].initialize()
|
||||
})
|
||||
this.$emit('close')
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData(url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk() {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs(key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields() {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form,this.model, tables)
|
||||
}).then(allValues => {
|
||||
let formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_NO_PASSED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
activeKey: '1',
|
||||
// 客户信息
|
||||
table1: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
key: 'name',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex',
|
||||
width: '18%',
|
||||
type: FormTypes.select,
|
||||
options: [ // 下拉选项
|
||||
{ title: '男', value: '1' },
|
||||
{ title: '女', value: '2' }
|
||||
],
|
||||
defaultValue: '',
|
||||
placeholder: '请选择${title}'
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
key: 'idcard',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'telphone',
|
||||
width: '24%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{
|
||||
pattern: '^1(3|4|5|7|8)\\d{9}$',
|
||||
message: '${title}格式不正确'
|
||||
}]
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData(allValues) {
|
||||
let orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].values,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].values
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit(formData) {
|
||||
let url = this.url.add, method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
// 机票信息
|
||||
table2: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '航班号',
|
||||
key: 'ticketCode',
|
||||
width: '40%',
|
||||
type: FormTypes.input,
|
||||
defaultValue: '',
|
||||
placeholder: '请输入${title}',
|
||||
validateRules: [{ required: true, message: '${title}不能为空' }]
|
||||
},
|
||||
{
|
||||
title: '航班时间',
|
||||
key: 'tickectDate',
|
||||
width: '30%',
|
||||
type: FormTypes.date,
|
||||
placeholder: '请选择${title}',
|
||||
defaultValue: ''
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: '/test/jeroOrderMain/add',
|
||||
edit: '/test/jeroOrderMain/edit',
|
||||
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取所有的editableTable实例
|
||||
getAllTable () {
|
||||
return Promise.all([
|
||||
getRefPromise(this, 'editableTable1'),
|
||||
getRefPromise(this, 'editableTable2')
|
||||
])
|
||||
},
|
||||
|
||||
add () {
|
||||
// 默认新增一条数据
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].add()
|
||||
editableTables[1].add()
|
||||
})
|
||||
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.activeKey = '1'
|
||||
this.model = Object.assign({}, record)
|
||||
// 加载子表数据
|
||||
if (this.model.id) {
|
||||
const params = { id: this.model.id }
|
||||
this.requestTableData(this.url.orderCustomerList, params, this.table1)
|
||||
this.requestTableData(this.url.orderTicketList, params, this.table2)
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.getAllTable().then(editableTables => {
|
||||
editableTables[0].initialize()
|
||||
editableTables[1].initialize()
|
||||
})
|
||||
this.$emit('close')
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
/** 查询某个tab的数据 */
|
||||
requestTableData (url, params, tab) {
|
||||
tab.loading = true
|
||||
getAction(url, params).then(res => {
|
||||
tab.dataSource = res.result || []
|
||||
}).finally(() => {
|
||||
tab.loading = false
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.validateFields()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
/** ATab 选项卡切换事件 */
|
||||
handleChangeTabs (key) {
|
||||
getRefPromise(this, `editableTable${key}`).then(editableTable => {
|
||||
editableTable.resetScrollTop()
|
||||
})
|
||||
},
|
||||
|
||||
/** 触发表单验证 */
|
||||
validateFields () {
|
||||
this.getAllTable().then(tables => {
|
||||
/** 一次性验证主表和所有的次表 */
|
||||
return validateFormModelAndTables(this.$refs.form, this.model, tables)
|
||||
}).then(allValues => {
|
||||
const formData = this.classifyIntoFormData(allValues)
|
||||
// 发起请求
|
||||
return this.requestAddOrEdit(formData)
|
||||
}).catch(e => {
|
||||
if (e.error === VALIDATE_NO_PASSED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
|
||||
} else {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData (allValues) {
|
||||
const orderMain = Object.assign(this.model, allValues.formValue)
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeroOrderCustomerList: allValues.tablesValue[0].values,
|
||||
jeroOrderTicketList: allValues.tablesValue[1].values
|
||||
}
|
||||
},
|
||||
/** 发起新增或修改的请求 */
|
||||
requestAddOrEdit (formData) {
|
||||
let url = this.url.add; let method = 'post'
|
||||
if (this.model.id) {
|
||||
url = this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.confirmLoading = true
|
||||
httpAction(url, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -12,45 +12,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
|
||||
export default {
|
||||
name: "PdfPreviewModal",
|
||||
data () {
|
||||
return {
|
||||
url: window._CONFIG['pdfDomainURL'],
|
||||
id:"pdfPreviewIframe",
|
||||
headers:{}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted(){
|
||||
window.addEventListener('message', this.handleScanFileMessage);
|
||||
},
|
||||
methods: {
|
||||
handleScanFileMessage (event) {
|
||||
// 根据上面制定的结构来解析iframe内部发回来的数据
|
||||
const data = event.data;
|
||||
console.log(data);
|
||||
},
|
||||
|
||||
previewFiles (title,token) {
|
||||
var iframe = document.getElementById("pdfPreviewIframe");
|
||||
var json = {"title":title,"token":token};
|
||||
iframe.contentWindow.postMessage(json, "*");
|
||||
},
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
|
||||
export default {
|
||||
name: 'PdfPreviewModal',
|
||||
data () {
|
||||
return {
|
||||
url: window._CONFIG.pdfDomainURL,
|
||||
id: 'pdfPreviewIframe',
|
||||
headers: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('message', this.handleScanFileMessage)
|
||||
},
|
||||
methods: {
|
||||
handleScanFileMessage (event) {
|
||||
// 根据上面制定的结构来解析iframe内部发回来的数据
|
||||
const data = event.data
|
||||
console.log(data)
|
||||
},
|
||||
|
||||
previewFiles (title, token) {
|
||||
var iframe = document.getElementById('pdfPreviewIframe')
|
||||
var json = { title: title, token: token }
|
||||
iframe.contentWindow.postMessage(json, '*')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,22 +6,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: 'SplitPanelAModal',
|
||||
components: {
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,22 +6,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: 'SplitPanelAModal',
|
||||
components: {
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -22,42 +22,42 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import splitPane from 'vue-splitpane'
|
||||
import SplitPanelA from './SplitPanelA'
|
||||
import SplitPanelB from './SplitPanelB'
|
||||
export default {
|
||||
name: "SplitPanelModal",
|
||||
components:{
|
||||
splitPane,
|
||||
SplitPanelA,
|
||||
SplitPanelB
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
bodyStyle:{
|
||||
padding: "0",
|
||||
height:(window.innerHeight-150)+"px"
|
||||
},
|
||||
modalWidth:800,
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.modalWidth = window.innerWidth-0;
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true;
|
||||
import splitPane from 'vue-splitpane'
|
||||
import SplitPanelA from './SplitPanelA'
|
||||
import SplitPanelB from './SplitPanelB'
|
||||
export default {
|
||||
name: 'SplitPanelModal',
|
||||
components: {
|
||||
splitPane,
|
||||
SplitPanelA,
|
||||
SplitPanelB
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
bodyStyle: {
|
||||
padding: '0',
|
||||
height: (window.innerHeight - 150) + 'px'
|
||||
},
|
||||
handleOk(){
|
||||
modalWidth: 800
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.modalWidth = window.innerWidth - 0
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -51,45 +51,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import { httpAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "SuperQueryModal",
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
queryParamsModel: [{},{}],
|
||||
confirmLoading: false
|
||||
}
|
||||
export default {
|
||||
name: 'SuperQueryModal',
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
queryParamsModel: [{}, {}],
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
},
|
||||
created () {
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true;
|
||||
},
|
||||
close () {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk () {
|
||||
console.log(this.queryParamsModel)
|
||||
// 子组件中触发父组件方法ee并传值cc12345
|
||||
this.$emit('handleSuperQuery', this.queryParamsModel)
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleAdd () {
|
||||
this.queryParamsModel.push({});
|
||||
},
|
||||
handleDel (index) {
|
||||
console.log(index)
|
||||
this.queryParamsModel.splice(index,1);
|
||||
}
|
||||
handleOk () {
|
||||
console.log(this.queryParamsModel)
|
||||
// 子组件中触发父组件方法ee并传值cc12345
|
||||
this.$emit('handleSuperQuery', this.queryParamsModel)
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleAdd () {
|
||||
this.queryParamsModel.push({})
|
||||
},
|
||||
handleDel (index) {
|
||||
console.log(index)
|
||||
this.queryParamsModel.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -250,384 +250,384 @@
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
name:'VueCron',
|
||||
props:['data','i18n'],
|
||||
data(){
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading:false,
|
||||
size:'large',
|
||||
weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
|
||||
result: {
|
||||
second:{
|
||||
cronEvery:'',
|
||||
incrementStart:3,
|
||||
incrementIncrement:5,
|
||||
rangeStart:1,
|
||||
rangeEnd:0,
|
||||
specificSpecific:[],
|
||||
},
|
||||
minute:{
|
||||
cronEvery:'',
|
||||
incrementStart:3,
|
||||
incrementIncrement:5,
|
||||
rangeStart:1,
|
||||
rangeEnd:'0',
|
||||
specificSpecific:[],
|
||||
},
|
||||
hour:{
|
||||
cronEvery:'',
|
||||
incrementStart:3,
|
||||
incrementIncrement:5,
|
||||
rangeStart:'0',
|
||||
rangeEnd:'0',
|
||||
specificSpecific:[],
|
||||
},
|
||||
day:{
|
||||
cronEvery:'',
|
||||
incrementStart:1,
|
||||
incrementIncrement:'1',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
cronLastSpecificDomDay:1,
|
||||
cronDaysBeforeEomMinus:'',
|
||||
cronDaysNearestWeekday:'',
|
||||
},
|
||||
week:{
|
||||
cronEvery:'',
|
||||
incrementStart:1,
|
||||
incrementIncrement:'1',
|
||||
specificSpecific:[],
|
||||
cronNthDayDay:1,
|
||||
cronNthDayNth:'1',
|
||||
},
|
||||
month:{
|
||||
cronEvery:'',
|
||||
incrementStart:3,
|
||||
incrementIncrement:5,
|
||||
rangeStart:1,
|
||||
rangeEnd:1,
|
||||
specificSpecific:[],
|
||||
},
|
||||
year:{
|
||||
cronEvery:'',
|
||||
incrementStart:2017,
|
||||
incrementIncrement:1,
|
||||
rangeStart:2019,
|
||||
rangeEnd: 2019,
|
||||
specificSpecific:[],
|
||||
},
|
||||
label:''
|
||||
},
|
||||
output:{
|
||||
second:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
},
|
||||
minute:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
},
|
||||
hour:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
},
|
||||
day:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
cronLastSpecificDomDay:'',
|
||||
cronDaysBeforeEomMinus:'',
|
||||
cronDaysNearestWeekday:'',
|
||||
},
|
||||
week:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
specificSpecific:[],
|
||||
cronNthDayDay:'',
|
||||
cronNthDayNth:'',
|
||||
},
|
||||
month:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
},
|
||||
year:{
|
||||
cronEvery:'',
|
||||
incrementStart:'',
|
||||
incrementIncrement:'',
|
||||
rangeStart:'',
|
||||
rangeEnd:'',
|
||||
specificSpecific:[],
|
||||
}
|
||||
}
|
||||
}
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
name: 'VueCron',
|
||||
props: ['data', 'i18n'],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
size: 'large',
|
||||
weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val),
|
||||
result: {
|
||||
second: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: []
|
||||
},
|
||||
computed: {
|
||||
modalWidth(){
|
||||
return 608;
|
||||
},
|
||||
text(){
|
||||
return Language['cn']
|
||||
},
|
||||
secondsText() {
|
||||
let seconds = '';
|
||||
let cronEvery=this.result.second.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
seconds = '*';
|
||||
break;
|
||||
case '2':
|
||||
seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement;
|
||||
break;
|
||||
case '3':
|
||||
this.result.second.specificSpecific.map(val=> {seconds += val+','});
|
||||
seconds = seconds.slice(0, -1);
|
||||
break;
|
||||
case '4':
|
||||
seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd;
|
||||
break;
|
||||
}
|
||||
return seconds;
|
||||
},
|
||||
minutesText() {
|
||||
let minutes = '';
|
||||
let cronEvery=this.result.minute.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
minutes = '*';
|
||||
break;
|
||||
case '2':
|
||||
minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement;
|
||||
break;
|
||||
case '3':
|
||||
this.result.minute.specificSpecific.map(val=> {
|
||||
minutes += val+','
|
||||
});
|
||||
minutes = minutes.slice(0, -1);
|
||||
break;
|
||||
case '4':
|
||||
minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd;
|
||||
break;
|
||||
}
|
||||
return minutes;
|
||||
},
|
||||
hoursText() {
|
||||
let hours = '';
|
||||
let cronEvery=this.result.hour.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
hours = '*';
|
||||
break;
|
||||
case '2':
|
||||
hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement;
|
||||
break;
|
||||
case '3':
|
||||
this.result.hour.specificSpecific.map(val=> {
|
||||
hours += val+','
|
||||
});
|
||||
hours = hours.slice(0, -1);
|
||||
break;
|
||||
case '4':
|
||||
hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd;
|
||||
break;
|
||||
}
|
||||
return hours;
|
||||
},
|
||||
daysText() {
|
||||
let days='';
|
||||
let cronEvery=this.result.day.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
break;
|
||||
case '2':
|
||||
case '4':
|
||||
case '11':
|
||||
days = '?';
|
||||
break;
|
||||
case '3':
|
||||
days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement;
|
||||
break;
|
||||
case '5':
|
||||
this.result.day.specificSpecific.map(val=> {
|
||||
days += val+','
|
||||
});
|
||||
days = days.slice(0, -1);
|
||||
break;
|
||||
case '6':
|
||||
days = "L";
|
||||
break;
|
||||
case '7':
|
||||
days = "LW";
|
||||
break;
|
||||
case '8':
|
||||
days = this.result.day.cronLastSpecificDomDay + 'L';
|
||||
break;
|
||||
case '9':
|
||||
days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
|
||||
break;
|
||||
case '10':
|
||||
days = this.result.day.cronDaysNearestWeekday+"W";
|
||||
break
|
||||
}
|
||||
return days;
|
||||
},
|
||||
weeksText() {
|
||||
let weeks = '';
|
||||
let cronEvery=this.result.day.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
case '3':
|
||||
case '5':
|
||||
weeks = '?';
|
||||
break;
|
||||
case '2':
|
||||
weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement;
|
||||
break;
|
||||
case '4':
|
||||
this.result.week.specificSpecific.map(val=> {
|
||||
weeks += val+','
|
||||
});
|
||||
weeks = weeks.slice(0, -1);
|
||||
break;
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
case '10':
|
||||
weeks = "?";
|
||||
break;
|
||||
case '11':
|
||||
weeks = this.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth;
|
||||
break;
|
||||
}
|
||||
return weeks;
|
||||
},
|
||||
monthsText() {
|
||||
let months = '';
|
||||
let cronEvery=this.result.month.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
months = '*';
|
||||
break;
|
||||
case '2':
|
||||
months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement;
|
||||
break;
|
||||
case '3':
|
||||
this.result.month.specificSpecific.map(val=> {
|
||||
months += val+','
|
||||
});
|
||||
months = months.slice(0, -1);
|
||||
break;
|
||||
case '4':
|
||||
months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd;
|
||||
break;
|
||||
}
|
||||
return months;
|
||||
},
|
||||
yearsText() {
|
||||
let years = '';
|
||||
let cronEvery=this.result.year.cronEvery;
|
||||
switch (cronEvery.toString()){
|
||||
case '1':
|
||||
years = '*';
|
||||
break;
|
||||
case '2':
|
||||
years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement;
|
||||
break;
|
||||
case '3':
|
||||
this.result.year.specificSpecific.map(val=> {
|
||||
years += val+','
|
||||
});
|
||||
years = years.slice(0, -1);
|
||||
break;
|
||||
case '4':
|
||||
years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd;
|
||||
break;
|
||||
}
|
||||
return years;
|
||||
},
|
||||
cron(){
|
||||
return {
|
||||
value: this.result,
|
||||
label:`${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'*'} ${this.yearsText||'*'}`
|
||||
}
|
||||
},
|
||||
minute: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: '0',
|
||||
specificSpecific: []
|
||||
},
|
||||
watch:{
|
||||
data(){
|
||||
//this.rest(this.data);
|
||||
}
|
||||
hour: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: '0',
|
||||
rangeEnd: '0',
|
||||
specificSpecific: []
|
||||
},
|
||||
methods: {
|
||||
show(){
|
||||
//this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year'));
|
||||
//this.rest(this.data.value);
|
||||
Object.assign(this.data.value,this.result);
|
||||
console.log('data初始化',this.data);
|
||||
//this.result = this.data.value;
|
||||
this.visible=true;
|
||||
},
|
||||
getValue(){
|
||||
return this.cron;
|
||||
},
|
||||
change(){
|
||||
console.log('返回前',this.cron);
|
||||
this.$emit('change',this.cron);
|
||||
this.close();
|
||||
this.visible = false;
|
||||
},
|
||||
close(){
|
||||
this.visible = false;
|
||||
//this.$emit('close')
|
||||
},
|
||||
rest(data){
|
||||
for(let i in data){
|
||||
console.log(data[i]);
|
||||
if(data[i] instanceof Object){
|
||||
this.rest(data[i])
|
||||
}else {
|
||||
switch(typeof data[i]) {
|
||||
case 'object':
|
||||
data[i] = [];
|
||||
break;
|
||||
case 'string':
|
||||
data[i] = '';
|
||||
break;
|
||||
case 'number':
|
||||
data[i] = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
callback (key) {
|
||||
//console.log(key)
|
||||
}
|
||||
day: {
|
||||
cronEvery: '',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: '1',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: [],
|
||||
cronLastSpecificDomDay: 1,
|
||||
cronDaysBeforeEomMinus: '',
|
||||
cronDaysNearestWeekday: ''
|
||||
},
|
||||
week: {
|
||||
cronEvery: '',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: '1',
|
||||
specificSpecific: [],
|
||||
cronNthDayDay: 1,
|
||||
cronNthDayNth: '1'
|
||||
},
|
||||
month: {
|
||||
cronEvery: '',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 1,
|
||||
specificSpecific: []
|
||||
},
|
||||
year: {
|
||||
cronEvery: '',
|
||||
incrementStart: 2017,
|
||||
incrementIncrement: 1,
|
||||
rangeStart: 2019,
|
||||
rangeEnd: 2019,
|
||||
specificSpecific: []
|
||||
},
|
||||
label: ''
|
||||
},
|
||||
output: {
|
||||
second: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
minute: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
hour: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
day: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: [],
|
||||
cronLastSpecificDomDay: '',
|
||||
cronDaysBeforeEomMinus: '',
|
||||
cronDaysNearestWeekday: ''
|
||||
},
|
||||
week: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
specificSpecific: [],
|
||||
cronNthDayDay: '',
|
||||
cronNthDayNth: ''
|
||||
},
|
||||
month: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
},
|
||||
year: {
|
||||
cronEvery: '',
|
||||
incrementStart: '',
|
||||
incrementIncrement: '',
|
||||
rangeStart: '',
|
||||
rangeEnd: '',
|
||||
specificSpecific: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
modalWidth () {
|
||||
return 608
|
||||
},
|
||||
text () {
|
||||
return Language.cn
|
||||
},
|
||||
secondsText () {
|
||||
let seconds = ''
|
||||
const cronEvery = this.result.second.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
seconds = '*'
|
||||
break
|
||||
case '2':
|
||||
seconds = this.result.second.incrementStart + '/' + this.result.second.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.second.specificSpecific.map(val => { seconds += val + ',' })
|
||||
seconds = seconds.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
seconds = this.result.second.rangeStart + '-' + this.result.second.rangeEnd
|
||||
break
|
||||
}
|
||||
return seconds
|
||||
},
|
||||
minutesText () {
|
||||
let minutes = ''
|
||||
const cronEvery = this.result.minute.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
minutes = '*'
|
||||
break
|
||||
case '2':
|
||||
minutes = this.result.minute.incrementStart + '/' + this.result.minute.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.minute.specificSpecific.map(val => {
|
||||
minutes += val + ','
|
||||
})
|
||||
minutes = minutes.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
minutes = this.result.minute.rangeStart + '-' + this.result.minute.rangeEnd
|
||||
break
|
||||
}
|
||||
return minutes
|
||||
},
|
||||
hoursText () {
|
||||
let hours = ''
|
||||
const cronEvery = this.result.hour.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
hours = '*'
|
||||
break
|
||||
case '2':
|
||||
hours = this.result.hour.incrementStart + '/' + this.result.hour.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.hour.specificSpecific.map(val => {
|
||||
hours += val + ','
|
||||
})
|
||||
hours = hours.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
hours = this.result.hour.rangeStart + '-' + this.result.hour.rangeEnd
|
||||
break
|
||||
}
|
||||
return hours
|
||||
},
|
||||
daysText () {
|
||||
let days = ''
|
||||
const cronEvery = this.result.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
break
|
||||
case '2':
|
||||
case '4':
|
||||
case '11':
|
||||
days = '?'
|
||||
break
|
||||
case '3':
|
||||
days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement
|
||||
break
|
||||
case '5':
|
||||
this.result.day.specificSpecific.map(val => {
|
||||
days += val + ','
|
||||
})
|
||||
days = days.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
days = 'L'
|
||||
break
|
||||
case '7':
|
||||
days = 'LW'
|
||||
break
|
||||
case '8':
|
||||
days = this.result.day.cronLastSpecificDomDay + 'L'
|
||||
break
|
||||
case '9':
|
||||
days = 'L-' + this.result.day.cronDaysBeforeEomMinus
|
||||
break
|
||||
case '10':
|
||||
days = this.result.day.cronDaysNearestWeekday + 'W'
|
||||
break
|
||||
}
|
||||
return days
|
||||
},
|
||||
weeksText () {
|
||||
let weeks = ''
|
||||
const cronEvery = this.result.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
case '3':
|
||||
case '5':
|
||||
weeks = '?'
|
||||
break
|
||||
case '2':
|
||||
weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement
|
||||
break
|
||||
case '4':
|
||||
this.result.week.specificSpecific.map(val => {
|
||||
weeks += val + ','
|
||||
})
|
||||
weeks = weeks.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
case '10':
|
||||
weeks = '?'
|
||||
break
|
||||
case '11':
|
||||
weeks = this.result.week.cronNthDayDay + '#' + this.result.week.cronNthDayNth
|
||||
break
|
||||
}
|
||||
return weeks
|
||||
},
|
||||
monthsText () {
|
||||
let months = ''
|
||||
const cronEvery = this.result.month.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
months = '*'
|
||||
break
|
||||
case '2':
|
||||
months = this.result.month.incrementStart + '/' + this.result.month.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.month.specificSpecific.map(val => {
|
||||
months += val + ','
|
||||
})
|
||||
months = months.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
months = this.result.month.rangeStart + '-' + this.result.month.rangeEnd
|
||||
break
|
||||
}
|
||||
return months
|
||||
},
|
||||
yearsText () {
|
||||
let years = ''
|
||||
const cronEvery = this.result.year.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
years = '*'
|
||||
break
|
||||
case '2':
|
||||
years = this.result.year.incrementStart + '/' + this.result.year.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
this.result.year.specificSpecific.map(val => {
|
||||
years += val + ','
|
||||
})
|
||||
years = years.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
years = this.result.year.rangeStart + '-' + this.result.year.rangeEnd
|
||||
break
|
||||
}
|
||||
return years
|
||||
},
|
||||
cron () {
|
||||
return {
|
||||
value: this.result,
|
||||
label: `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '*'} ${this.yearsText || '*'}`
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
// this.rest(this.data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
// this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year'));
|
||||
// this.rest(this.data.value);
|
||||
Object.assign(this.data.value, this.result)
|
||||
console.log('data初始化', this.data)
|
||||
// this.result = this.data.value;
|
||||
this.visible = true
|
||||
},
|
||||
getValue () {
|
||||
return this.cron
|
||||
},
|
||||
change () {
|
||||
console.log('返回前', this.cron)
|
||||
this.$emit('change', this.cron)
|
||||
this.close()
|
||||
this.visible = false
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
// this.$emit('close')
|
||||
},
|
||||
rest (data) {
|
||||
for (const i in data) {
|
||||
console.log(data[i])
|
||||
if (data[i] instanceof Object) {
|
||||
this.rest(data[i])
|
||||
} else {
|
||||
switch (typeof data[i]) {
|
||||
case 'object':
|
||||
data[i] = []
|
||||
break
|
||||
case 'string':
|
||||
data[i] = ''
|
||||
break
|
||||
case 'number':
|
||||
data[i] = null
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
callback (key) {
|
||||
// console.log(key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
@@ -133,171 +133,171 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
const DetailListItem = DetailList.Item
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
name: "Advanced",
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '操作日志一'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '操作日志二'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '操作日志三'
|
||||
}
|
||||
],
|
||||
activeTabKey: '1',
|
||||
|
||||
operationColumns: [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '执行结果',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark'
|
||||
}
|
||||
],
|
||||
operation1: [
|
||||
{
|
||||
key: 'op1',
|
||||
type: '订购关系生效',
|
||||
name: '曲丽丽',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
},
|
||||
{
|
||||
key: 'op5',
|
||||
type: '创建订单',
|
||||
name: '汗牙牙',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
operation2: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
}
|
||||
],
|
||||
operation3: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'agree': '成功',
|
||||
'reject': '驳回'
|
||||
export default {
|
||||
name: 'Advanced',
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '操作日志一'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '操作日志二'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '操作日志三'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter(type) {
|
||||
const statusTypeMap = {
|
||||
'agree': 'success',
|
||||
'reject': 'error'
|
||||
],
|
||||
activeTabKey: '1',
|
||||
|
||||
operationColumns: [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '执行结果',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
],
|
||||
operation1: [
|
||||
{
|
||||
key: 'op1',
|
||||
type: '订购关系生效',
|
||||
name: '曲丽丽',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
},
|
||||
{
|
||||
key: 'op5',
|
||||
type: '创建订单',
|
||||
name: '汗牙牙',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
operation2: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
}
|
||||
],
|
||||
operation3: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter (status) {
|
||||
const statusMap = {
|
||||
agree: '成功',
|
||||
reject: '驳回'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter (type) {
|
||||
const statusTypeMap = {
|
||||
agree: 'success',
|
||||
reject: 'error'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -339,4 +339,4 @@
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -43,206 +43,206 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import JTable from '@/components/jero/JTable'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
import ABadge from "ant-design-vue/es/badge/Badge"
|
||||
const DetailListItem = DetailList.Item
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import JTable from '@/components/jero/JTable'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
import ABadge from 'ant-design-vue/es/badge/Badge'
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PageLayout,
|
||||
ABadge,
|
||||
DetailList,
|
||||
DetailListItem,
|
||||
JTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
goodsColumns: [
|
||||
{
|
||||
title: '商品编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '商品条码',
|
||||
dataIndex: 'barcode',
|
||||
key: 'barcode'
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '数量（件）',
|
||||
dataIndex: 'num',
|
||||
key: 'num',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadGoodsData: () => {
|
||||
return new Promise((resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
id: '1234561',
|
||||
name: '矿泉水 550ml',
|
||||
barcode: '12421432143214321',
|
||||
price: '2.00',
|
||||
num: '1',
|
||||
amount: '2.00'
|
||||
},
|
||||
{
|
||||
id: '1234562',
|
||||
name: '凉茶 300ml',
|
||||
barcode: '12421432143214322',
|
||||
price: '3.00',
|
||||
num: '2',
|
||||
amount: '6.00'
|
||||
},
|
||||
{
|
||||
id: '1234563',
|
||||
name: '好吃的薯片',
|
||||
barcode: '12421432143214323',
|
||||
price: '7.00',
|
||||
num: '4',
|
||||
amount: '28.00'
|
||||
},
|
||||
{
|
||||
id: '1234564',
|
||||
name: '特别好吃的蛋卷',
|
||||
barcode: '12421432143214324',
|
||||
price: '8.50',
|
||||
num: '3',
|
||||
amount: '25.50'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
})).then(res => {
|
||||
return res
|
||||
})
|
||||
export default {
|
||||
components: {
|
||||
PageLayout,
|
||||
ABadge,
|
||||
DetailList,
|
||||
DetailListItem,
|
||||
JTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
goodsColumns: [
|
||||
{
|
||||
title: '商品编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id'
|
||||
},
|
||||
|
||||
scheduleColumns: [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: '当前进度',
|
||||
dataIndex: 'rate',
|
||||
key: 'rate'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作员ID',
|
||||
dataIndex: 'operator',
|
||||
key: 'operator'
|
||||
},
|
||||
{
|
||||
title: '耗时',
|
||||
dataIndex: 'cost',
|
||||
key: 'cost'
|
||||
}
|
||||
],
|
||||
loadScheduleData: () => {
|
||||
return new Promise((resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
time: '2017-10-01 14:10',
|
||||
rate: '联系客户',
|
||||
status: 'processing',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
time: '2017-10-01 14:05',
|
||||
rate: '取货员出发',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
time: '2017-10-01 13:05',
|
||||
rate: '取货员接单',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
time: '2017-10-01 13:00',
|
||||
rate: '申请审批通过',
|
||||
status: 'success',
|
||||
operator: '系统',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
time: '2017-10-01 12:00',
|
||||
rate: '发起退货申请',
|
||||
status: 'success',
|
||||
operator: '用户',
|
||||
cost: '5mins'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
})).then(res => {
|
||||
return res
|
||||
})
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'processing': '进行中',
|
||||
'success': '完成',
|
||||
'failed': '失败'
|
||||
{
|
||||
title: '商品条码',
|
||||
dataIndex: 'barcode',
|
||||
key: 'barcode'
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '数量（件）',
|
||||
dataIndex: 'num',
|
||||
key: 'num',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
align: 'right'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
return this.$route.meta.title
|
||||
}
|
||||
},
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadGoodsData: () => {
|
||||
return new Promise(resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
id: '1234561',
|
||||
name: '矿泉水 550ml',
|
||||
barcode: '12421432143214321',
|
||||
price: '2.00',
|
||||
num: '1',
|
||||
amount: '2.00'
|
||||
},
|
||||
{
|
||||
id: '1234562',
|
||||
name: '凉茶 300ml',
|
||||
barcode: '12421432143214322',
|
||||
price: '3.00',
|
||||
num: '2',
|
||||
amount: '6.00'
|
||||
},
|
||||
{
|
||||
id: '1234563',
|
||||
name: '好吃的薯片',
|
||||
barcode: '12421432143214323',
|
||||
price: '7.00',
|
||||
num: '4',
|
||||
amount: '28.00'
|
||||
},
|
||||
{
|
||||
id: '1234564',
|
||||
name: '特别好吃的蛋卷',
|
||||
barcode: '12421432143214324',
|
||||
price: '8.50',
|
||||
num: '3',
|
||||
amount: '25.50'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
}).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
scheduleColumns: [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: '当前进度',
|
||||
dataIndex: 'rate',
|
||||
key: 'rate'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '操作员ID',
|
||||
dataIndex: 'operator',
|
||||
key: 'operator'
|
||||
},
|
||||
{
|
||||
title: '耗时',
|
||||
dataIndex: 'cost',
|
||||
key: 'cost'
|
||||
}
|
||||
],
|
||||
loadScheduleData: () => {
|
||||
return new Promise(resolve => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
time: '2017-10-01 14:10',
|
||||
rate: '联系客户',
|
||||
status: 'processing',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
time: '2017-10-01 14:05',
|
||||
rate: '取货员出发',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
time: '2017-10-01 13:05',
|
||||
rate: '取货员接单',
|
||||
status: 'success',
|
||||
operator: '取货员 ID1234',
|
||||
cost: '5mins'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
time: '2017-10-01 13:00',
|
||||
rate: '申请审批通过',
|
||||
status: 'success',
|
||||
operator: '系统',
|
||||
cost: '1h'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
time: '2017-10-01 12:00',
|
||||
rate: '发起退货申请',
|
||||
status: 'success',
|
||||
operator: '用户',
|
||||
cost: '5mins'
|
||||
}
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
totalPage: 1,
|
||||
totalCount: 10
|
||||
})
|
||||
}).then(res => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter (status) {
|
||||
const statusMap = {
|
||||
processing: '进行中',
|
||||
success: '完成',
|
||||
failed: '失败'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
return this.$route.meta.title
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -252,4 +252,4 @@
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -186,443 +186,437 @@
|
||||
|
||||
</a-tabs>
|
||||
|
||||
|
||||
</a-card>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import ACol from "ant-design-vue/es/grid/Col"
|
||||
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import Trend from '@/components/Trend'
|
||||
import { getAction } from '@/api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
import moment from 'dayjs'
|
||||
import ChartCard from '@/components/ChartCard'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import Trend from '@/components/Trend'
|
||||
import { getAction } from '@/api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
import moment from 'dayjs'
|
||||
|
||||
const rankList = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
rankList.push({
|
||||
name: '白鹭岛 ' + (i+1) + ' 号店',
|
||||
total: 1234.56 - i * 100
|
||||
})
|
||||
}
|
||||
const rankList = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
rankList.push({
|
||||
name: '白鹭岛 ' + (i + 1) + ' 号店',
|
||||
total: 1234.56 - i * 100
|
||||
})
|
||||
}
|
||||
|
||||
const dataCol1 = [{
|
||||
title: '业务号',
|
||||
align:"center",
|
||||
dataIndex: 'reBizCode'
|
||||
},{
|
||||
title: '权利类型',
|
||||
align:"center",
|
||||
dataIndex: 'droitType'
|
||||
},{
|
||||
title: '登记类型',
|
||||
align:"center",
|
||||
dataIndex: 'registeType'
|
||||
},{
|
||||
title: '座落',
|
||||
align:"center",
|
||||
dataIndex: 'beLocated'
|
||||
},{
|
||||
title: '权利人',
|
||||
align:"center",
|
||||
dataIndex: 'qlr'
|
||||
},{
|
||||
title: '义务人',
|
||||
align:"center",
|
||||
dataIndex: 'ywr'
|
||||
},{
|
||||
title: '受理人',
|
||||
align:"center",
|
||||
dataIndex: 'acceptBy'
|
||||
},{
|
||||
title: '受理时间',
|
||||
align:"center",
|
||||
dataIndex: 'acceptDate'
|
||||
},{
|
||||
title: '当前节点',
|
||||
align:"center",
|
||||
dataIndex: 'curNode'
|
||||
},{
|
||||
title: '办理进度',
|
||||
align:"center",
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}];
|
||||
const dataCol1 = [{
|
||||
title: '业务号',
|
||||
align: 'center',
|
||||
dataIndex: 'reBizCode'
|
||||
}, {
|
||||
title: '权利类型',
|
||||
align: 'center',
|
||||
dataIndex: 'droitType'
|
||||
}, {
|
||||
title: '登记类型',
|
||||
align: 'center',
|
||||
dataIndex: 'registeType'
|
||||
}, {
|
||||
title: '座落',
|
||||
align: 'center',
|
||||
dataIndex: 'beLocated'
|
||||
}, {
|
||||
title: '权利人',
|
||||
align: 'center',
|
||||
dataIndex: 'qlr'
|
||||
}, {
|
||||
title: '义务人',
|
||||
align: 'center',
|
||||
dataIndex: 'ywr'
|
||||
}, {
|
||||
title: '受理人',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptBy'
|
||||
}, {
|
||||
title: '受理时间',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptDate'
|
||||
}, {
|
||||
title: '当前节点',
|
||||
align: 'center',
|
||||
dataIndex: 'curNode'
|
||||
}, {
|
||||
title: '办理进度',
|
||||
align: 'center',
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}]
|
||||
|
||||
const dataCol2 = [{
|
||||
title: '业务号',
|
||||
align:"center",
|
||||
dataIndex: 'reBizCode'
|
||||
},{
|
||||
title: '权利类型',
|
||||
align:"center",
|
||||
dataIndex: 'droitType'
|
||||
},{
|
||||
title: '登记类型',
|
||||
align:"center",
|
||||
dataIndex: 'registeType'
|
||||
},{
|
||||
title: '座落',
|
||||
align:"center",
|
||||
dataIndex: 'beLocated'
|
||||
},{
|
||||
title: '权利人',
|
||||
align:"center",
|
||||
dataIndex: 'qlr'
|
||||
},{
|
||||
title: '义务人',
|
||||
align:"center",
|
||||
dataIndex: 'ywr'
|
||||
},{
|
||||
title: '受理人',
|
||||
align:"center",
|
||||
dataIndex: 'acceptBy'
|
||||
},{
|
||||
title: '发起时间',
|
||||
align:"center",
|
||||
dataIndex: 'acceptDate'
|
||||
},{
|
||||
title: '当前节点',
|
||||
align:"center",
|
||||
dataIndex: 'curNode'
|
||||
},{
|
||||
title: '超时时间',
|
||||
align:"center",
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}];
|
||||
const dataCol2 = [{
|
||||
title: '业务号',
|
||||
align: 'center',
|
||||
dataIndex: 'reBizCode'
|
||||
}, {
|
||||
title: '权利类型',
|
||||
align: 'center',
|
||||
dataIndex: 'droitType'
|
||||
}, {
|
||||
title: '登记类型',
|
||||
align: 'center',
|
||||
dataIndex: 'registeType'
|
||||
}, {
|
||||
title: '座落',
|
||||
align: 'center',
|
||||
dataIndex: 'beLocated'
|
||||
}, {
|
||||
title: '权利人',
|
||||
align: 'center',
|
||||
dataIndex: 'qlr'
|
||||
}, {
|
||||
title: '义务人',
|
||||
align: 'center',
|
||||
dataIndex: 'ywr'
|
||||
}, {
|
||||
title: '受理人',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptBy'
|
||||
}, {
|
||||
title: '发起时间',
|
||||
align: 'center',
|
||||
dataIndex: 'acceptDate'
|
||||
}, {
|
||||
title: '当前节点',
|
||||
align: 'center',
|
||||
dataIndex: 'curNode'
|
||||
}, {
|
||||
title: '超时时间',
|
||||
align: 'center',
|
||||
dataIndex: 'flowRate',
|
||||
scopedSlots: { customRender: 'flowRate' }
|
||||
}]
|
||||
|
||||
const jhjgData = [
|
||||
{ type: '房管', '一月': 900, '二月': 1120, '三月': 1380, '四月': 1480, '五月': 1450, '六月': 1100, '七月':1300, '八月':900,'九月':1000 ,'十月':1200 ,'十一月':600 ,'十二月':900 },
|
||||
{ type: '税务', '一月':1200, '二月': 1500, '三月': 1980, '四月': 2000, '五月': 1000, '六月': 600, '七月':900, '八月':1100,'九月':1300 ,'十月':2000 ,'十一月':900 ,'十二月':1100 },
|
||||
{ type: '不动产', '一月':2000, '二月': 1430, '三月': 1300, '四月': 1400, '五月': 900, '六月': 500, '七月':600, '八月':1000,'九月':600 ,'十月':1000 ,'十一月':1500 ,'十二月':1200 }
|
||||
]
|
||||
const jhjgFields=[
|
||||
'一月','二月','三月','四月','五月','六月',
|
||||
'七月','八月','九月','十月','十一月','十二月'
|
||||
]
|
||||
const jhjgData = [
|
||||
{ type: '房管', 一月: 900, 二月: 1120, 三月: 1380, 四月: 1480, 五月: 1450, 六月: 1100, 七月: 1300, 八月: 900, 九月: 1000, 十月: 1200, 十一月: 600, 十二月: 900 },
|
||||
{ type: '税务', 一月: 1200, 二月: 1500, 三月: 1980, 四月: 2000, 五月: 1000, 六月: 600, 七月: 900, 八月: 1100, 九月: 1300, 十月: 2000, 十一月: 900, 十二月: 1100 },
|
||||
{ type: '不动产', 一月: 2000, 二月: 1430, 三月: 1300, 四月: 1400, 五月: 900, 六月: 500, 七月: 600, 八月: 1000, 九月: 600, 十月: 1000, 十一月: 1500, 十二月: 1200 }
|
||||
]
|
||||
const jhjgFields = [
|
||||
'一月', '二月', '三月', '四月', '五月', '六月',
|
||||
'七月', '八月', '九月', '十月', '十一月', '十二月'
|
||||
]
|
||||
|
||||
const xljgData = [
|
||||
{ type: '一月', 房管: 1.12, 税务: 1.55, 不动产: 1.2 },
|
||||
{ type: '二月', 房管: 1.65, 税务: 1.32, 不动产: 1.42 },
|
||||
{ type: '三月', 房管: 1.85, 税务: 1.1, 不动产: 1.5 },
|
||||
|
||||
const xljgData = [
|
||||
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
|
||||
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
|
||||
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
|
||||
{ type: '四月', 房管: 1.33, 税务: 1.63, 不动产: 1.4 },
|
||||
{ type: '五月', 房管: 1.63, 税务: 1.8, 不动产: 1.7 },
|
||||
{ type: '六月', 房管: 1.85, 税务: 1.98, 不动产: 1.8 },
|
||||
|
||||
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
|
||||
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
|
||||
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
|
||||
{ type: '七月', 房管: 1.98, 税务: 1.5, 不动产: 1.76 },
|
||||
{ type: '八月', 房管: 1.48, 税务: 1.2, 不动产: 1.3 },
|
||||
{ type: '九月', 房管: 1.41, 税务: 1.9, 不动产: 1.6 },
|
||||
|
||||
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
|
||||
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
|
||||
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
|
||||
|
||||
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
|
||||
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
|
||||
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
|
||||
]
|
||||
const xljgFields=["房管","税务","不动产"]
|
||||
export default {
|
||||
name: "Analysis",
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
MiniProgress,
|
||||
RankList,
|
||||
Bar,
|
||||
Trend,
|
||||
LineChartMultid,
|
||||
AreaChartTy,
|
||||
DashChartDemo,
|
||||
BarMultid
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
xljgData,
|
||||
xljgFields,
|
||||
jhjgData,
|
||||
jhjgFields,
|
||||
loading: true,
|
||||
rankList,
|
||||
zsll:0,
|
||||
zbjl:0,
|
||||
todaySll:0,
|
||||
todayBjl:0,
|
||||
todayISll:0,
|
||||
todayIBjl:0,
|
||||
registerTypeList:[{
|
||||
text:"业务受理"
|
||||
},{
|
||||
text:"业务管理"
|
||||
},{
|
||||
text:"文件管理"
|
||||
},{
|
||||
text:"信息查询"
|
||||
}],
|
||||
// 分页参数
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
{ type: '十月', 房管: 1.1, 税务: 1.1, 不动产: 1.4 },
|
||||
{ type: '十一月', 房管: 1.85, 税务: 1.6, 不动产: 1.5 },
|
||||
{ type: '十二月', 房管: 1.5, 税务: 1.4, 不动产: 1.3 }
|
||||
]
|
||||
const xljgFields = ['房管', '税务', '不动产']
|
||||
export default {
|
||||
name: 'Analysis',
|
||||
components: {
|
||||
ATooltip,
|
||||
ACol,
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
MiniBar,
|
||||
MiniProgress,
|
||||
RankList,
|
||||
Bar,
|
||||
Trend,
|
||||
LineChartMultid,
|
||||
AreaChartTy,
|
||||
DashChartDemo,
|
||||
BarMultid
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
xljgData,
|
||||
xljgFields,
|
||||
jhjgData,
|
||||
jhjgFields,
|
||||
loading: true,
|
||||
rankList,
|
||||
zsll: 0,
|
||||
zbjl: 0,
|
||||
todaySll: 0,
|
||||
todayBjl: 0,
|
||||
todayISll: 0,
|
||||
todayIBjl: 0,
|
||||
registerTypeList: [{
|
||||
text: '业务受理'
|
||||
}, {
|
||||
text: '业务管理'
|
||||
}, {
|
||||
text: '文件管理'
|
||||
}, {
|
||||
text: '信息查询'
|
||||
}],
|
||||
// 分页参数
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
//数据集
|
||||
dataSource:[],
|
||||
dataSource1:[],
|
||||
dataSource2:[],
|
||||
url:{
|
||||
analysis:"/sps/register/analysis",
|
||||
list:"sps/register/virtualList",
|
||||
countSll:"sps/register/sllTenDaysCount",
|
||||
countBjl:"sps/register/bjlTenDaysCount",
|
||||
countISll:'sps/register/ISllTenDaysCount',
|
||||
countIBjl:'sps/register/IBjlTenDaysCount',
|
||||
queryDiskInfo:'sys/actuator/redis/queryDiskInfo'
|
||||
},
|
||||
chartData:{
|
||||
sll:[],
|
||||
bjl:[],
|
||||
isll:[],
|
||||
ibjl:[]
|
||||
},
|
||||
cardCount:{
|
||||
sll:0,
|
||||
bjl:0,
|
||||
isll:0,
|
||||
ibjl:0
|
||||
},
|
||||
columns:dataCol1,
|
||||
columns2:dataCol2,
|
||||
diskInfo:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goPage(index){
|
||||
if(index==0){
|
||||
this.$router.push({
|
||||
path: '/isps/registerStepForm',
|
||||
name: 'isps-registerStepForm',
|
||||
});
|
||||
}else if(index==1){
|
||||
this.$router.push({
|
||||
path: '/isps/registerList',
|
||||
name: 'isps-registerList',
|
||||
});
|
||||
|
||||
}else if(index==2){
|
||||
this.$router.push({
|
||||
path: '/isps/fileManage',
|
||||
name: 'isps-fileManage',
|
||||
});
|
||||
}else if(index==3){
|
||||
this.$router.push({
|
||||
path: '/isps/infoSearch',
|
||||
name: 'isps-infoSearch',
|
||||
});
|
||||
}
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
loadList (arg){
|
||||
if(arg===1){
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
var params = this.getQueryParams();//查询条件
|
||||
getAction(this.url.list,params).then((res)=>{
|
||||
console.log("dsdsd",res.result)
|
||||
this.dataSource1 = res.result.data1;
|
||||
this.dataSource2 = res.result.data2;
|
||||
this.ipagination.total = 5;
|
||||
});
|
||||
// 数据集
|
||||
dataSource: [],
|
||||
dataSource1: [],
|
||||
dataSource2: [],
|
||||
url: {
|
||||
analysis: '/sps/register/analysis',
|
||||
list: 'sps/register/virtualList',
|
||||
countSll: 'sps/register/sllTenDaysCount',
|
||||
countBjl: 'sps/register/bjlTenDaysCount',
|
||||
countISll: 'sps/register/ISllTenDaysCount',
|
||||
countIBjl: 'sps/register/IBjlTenDaysCount',
|
||||
queryDiskInfo: 'sys/actuator/redis/queryDiskInfo'
|
||||
},
|
||||
getQueryParams(){
|
||||
var param = {flowStatus:"-3"};
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
chartData: {
|
||||
sll: [],
|
||||
bjl: [],
|
||||
isll: [],
|
||||
ibjl: []
|
||||
},
|
||||
formatRespectiveHoldCert(value){
|
||||
return (value=="1"||eval(value))?"是":"否"
|
||||
cardCount: {
|
||||
sll: 0,
|
||||
bjl: 0,
|
||||
isll: 0,
|
||||
ibjl: 0
|
||||
},
|
||||
formatCertFormat(value){
|
||||
if(value=="1"){
|
||||
return "单一版"
|
||||
}else if(value=="2"){
|
||||
return "集成版"
|
||||
}else{
|
||||
return value;
|
||||
}
|
||||
},
|
||||
getFlowRateNumber(value){
|
||||
return Number(value)
|
||||
},
|
||||
getFlowPercent(record){
|
||||
if(record.flowStatus=="3"){
|
||||
return 100
|
||||
}else if(record.flowStatus=="0"){
|
||||
return 0
|
||||
}else{
|
||||
return record.flowRate
|
||||
}
|
||||
},
|
||||
getFlowStatus(status){
|
||||
if(status=="4"){
|
||||
return "exception";
|
||||
}else if(status=="0"){
|
||||
return "normal";
|
||||
}else if(status=="3"){
|
||||
return "success";
|
||||
}else{
|
||||
return "active";
|
||||
}
|
||||
|
||||
},
|
||||
queryCount(){
|
||||
getAction(this.url.analysis).then((res)=>{
|
||||
if(res.success){
|
||||
this.cardCount = res.result
|
||||
}
|
||||
console.log(res);
|
||||
});
|
||||
},
|
||||
|
||||
loadDiskInfo(){
|
||||
getAction(this.url.queryDiskInfo).then((res)=>{
|
||||
if(res.success){
|
||||
console.log(res.result)
|
||||
let one=0,two="";
|
||||
for(let a in res.result){
|
||||
let tempNum = Number(res.result[a].max)
|
||||
if(tempNum>one){
|
||||
one = tempNum
|
||||
two = res.result[a].name
|
||||
}
|
||||
}
|
||||
let ontItem = res.result.filter((item)=>{return item.name == two})[0]
|
||||
ontItem.restPPT = ontItem.restPPT/10
|
||||
this.diskInfo.push(ontItem);
|
||||
|
||||
if(res.result.length>1){
|
||||
let one2=0,two2="";
|
||||
for(let a in res.result){
|
||||
if(res.result[a].name == two){
|
||||
continue;
|
||||
}
|
||||
let tempNum = Number(res.result[a].max)
|
||||
if(tempNum>one2){
|
||||
one2 = tempNum
|
||||
two2 = res.result[a].name
|
||||
}
|
||||
}
|
||||
let one2Item = res.result.filter((item)=>{return item.name == two2})[0]
|
||||
one2Item.restPPT = one2Item.restPPT/10
|
||||
this.diskInfo.push(one2Item);
|
||||
}
|
||||
|
||||
}else{
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
loadChartData(){
|
||||
getAction(this.url.countSll).then((res)=>{
|
||||
if(res.success){
|
||||
let map = res.result;
|
||||
for(var key in map){
|
||||
let dataStr = key;
|
||||
let value = map[key];
|
||||
let today = moment(new Date()).format('YYYY-MM-DD');
|
||||
if(dataStr == today){
|
||||
this.todaySll = map[today];
|
||||
}
|
||||
this.chartData.sll.push({
|
||||
x: dataStr,
|
||||
y: value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}),
|
||||
getAction(this.url.countBjl).then((res)=>{
|
||||
if(res.success){
|
||||
let map = res.result;
|
||||
for(var key in map){
|
||||
let dataStr = key;
|
||||
let value = map[key];
|
||||
let today = moment(new Date()).format('YYYY-MM-DD');
|
||||
if(dataStr == today){
|
||||
this.todayBjl = map[today];
|
||||
}
|
||||
this.chartData.bjl.push({
|
||||
x: dataStr,
|
||||
y: value
|
||||
});
|
||||
}
|
||||
}
|
||||
}),
|
||||
getAction(this.url.countISll).then((res)=>{
|
||||
if(res.success){
|
||||
let map = res.result;
|
||||
for(var key in map){
|
||||
let dataStr = key;
|
||||
let value = map[key];
|
||||
let today = moment(new Date()).format('YYYY-MM-DD');
|
||||
if(dataStr == today){
|
||||
this.todayISll = map[today];
|
||||
}
|
||||
this.chartData.isll.push({
|
||||
x: key,
|
||||
y: value
|
||||
});
|
||||
}
|
||||
}
|
||||
}),
|
||||
getAction(this.url.countIBjl).then((res)=>{
|
||||
if(res.success){
|
||||
let map = res.result;
|
||||
for(var key in map){
|
||||
let dataStr = key;
|
||||
let value = map[key];
|
||||
let today = moment(new Date()).format('YYYY-MM-DD');
|
||||
if(dataStr == today){
|
||||
this.todayIBjl = map[today];
|
||||
}
|
||||
this.chartData.ibjl.push({
|
||||
x: key,
|
||||
y: value
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadDiskInfo()
|
||||
this.queryCount();
|
||||
this.loadChartData();
|
||||
this.loadList(1);
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
columns: dataCol1,
|
||||
columns2: dataCol2,
|
||||
diskInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPage (index) {
|
||||
if (index == 0) {
|
||||
this.$router.push({
|
||||
path: '/isps/registerStepForm',
|
||||
name: 'isps-registerStepForm'
|
||||
})
|
||||
} else if (index == 1) {
|
||||
this.$router.push({
|
||||
path: '/isps/registerList',
|
||||
name: 'isps-registerList'
|
||||
})
|
||||
} else if (index == 2) {
|
||||
this.$router.push({
|
||||
path: '/isps/fileManage',
|
||||
name: 'isps-fileManage'
|
||||
})
|
||||
} else if (index == 3) {
|
||||
this.$router.push({
|
||||
path: '/isps/infoSearch',
|
||||
name: 'isps-infoSearch'
|
||||
})
|
||||
}
|
||||
},
|
||||
loadList (arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
var params = this.getQueryParams()// 查询条件
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
console.log('dsdsd', res.result)
|
||||
this.dataSource1 = res.result.data1
|
||||
this.dataSource2 = res.result.data2
|
||||
this.ipagination.total = 5
|
||||
})
|
||||
},
|
||||
getQueryParams () {
|
||||
var param = { flowStatus: '-3' }
|
||||
param.pageNo = this.ipagination.current
|
||||
param.pageSize = this.ipagination.pageSize
|
||||
return filterObj(param)
|
||||
},
|
||||
formatRespectiveHoldCert (value) {
|
||||
return (value == '1' || eval(value)) ? '是' : '否'
|
||||
},
|
||||
formatCertFormat (value) {
|
||||
if (value == '1') {
|
||||
return '单一版'
|
||||
} else if (value == '2') {
|
||||
return '集成版'
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
getFlowRateNumber (value) {
|
||||
return Number(value)
|
||||
},
|
||||
getFlowPercent (record) {
|
||||
if (record.flowStatus == '3') {
|
||||
return 100
|
||||
} else if (record.flowStatus == '0') {
|
||||
return 0
|
||||
} else {
|
||||
return record.flowRate
|
||||
}
|
||||
},
|
||||
getFlowStatus (status) {
|
||||
if (status == '4') {
|
||||
return 'exception'
|
||||
} else if (status == '0') {
|
||||
return 'normal'
|
||||
} else if (status == '3') {
|
||||
return 'success'
|
||||
} else {
|
||||
return 'active'
|
||||
}
|
||||
},
|
||||
queryCount () {
|
||||
getAction(this.url.analysis).then((res) => {
|
||||
if (res.success) {
|
||||
this.cardCount = res.result
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
|
||||
loadDiskInfo () {
|
||||
getAction(this.url.queryDiskInfo).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res.result)
|
||||
let one = 0; let two = ''
|
||||
for (const a in res.result) {
|
||||
const tempNum = Number(res.result[a].max)
|
||||
if (tempNum > one) {
|
||||
one = tempNum
|
||||
two = res.result[a].name
|
||||
}
|
||||
}
|
||||
const ontItem = res.result.filter((item) => { return item.name == two })[0]
|
||||
ontItem.restPPT = ontItem.restPPT / 10
|
||||
this.diskInfo.push(ontItem)
|
||||
|
||||
if (res.result.length > 1) {
|
||||
let one2 = 0; let two2 = ''
|
||||
for (const a in res.result) {
|
||||
if (res.result[a].name == two) {
|
||||
continue
|
||||
}
|
||||
const tempNum = Number(res.result[a].max)
|
||||
if (tempNum > one2) {
|
||||
one2 = tempNum
|
||||
two2 = res.result[a].name
|
||||
}
|
||||
}
|
||||
const one2Item = res.result.filter((item) => { return item.name == two2 })[0]
|
||||
one2Item.restPPT = one2Item.restPPT / 10
|
||||
this.diskInfo.push(one2Item)
|
||||
}
|
||||
} else {
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
loadChartData () {
|
||||
getAction(this.url.countSll).then((res) => {
|
||||
if (res.success) {
|
||||
const map = res.result
|
||||
for (var key in map) {
|
||||
const dataStr = key
|
||||
const value = map[key]
|
||||
const today = moment(new Date()).format('YYYY-MM-DD')
|
||||
if (dataStr == today) {
|
||||
this.todaySll = map[today]
|
||||
}
|
||||
this.chartData.sll.push({
|
||||
x: dataStr,
|
||||
y: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}),
|
||||
getAction(this.url.countBjl).then((res) => {
|
||||
if (res.success) {
|
||||
const map = res.result
|
||||
for (var key in map) {
|
||||
const dataStr = key
|
||||
const value = map[key]
|
||||
const today = moment(new Date()).format('YYYY-MM-DD')
|
||||
if (dataStr == today) {
|
||||
this.todayBjl = map[today]
|
||||
}
|
||||
this.chartData.bjl.push({
|
||||
x: dataStr,
|
||||
y: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}),
|
||||
getAction(this.url.countISll).then((res) => {
|
||||
if (res.success) {
|
||||
const map = res.result
|
||||
for (var key in map) {
|
||||
const dataStr = key
|
||||
const value = map[key]
|
||||
const today = moment(new Date()).format('YYYY-MM-DD')
|
||||
if (dataStr == today) {
|
||||
this.todayISll = map[today]
|
||||
}
|
||||
this.chartData.isll.push({
|
||||
x: key,
|
||||
y: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}),
|
||||
getAction(this.url.countIBjl).then((res) => {
|
||||
if (res.success) {
|
||||
const map = res.result
|
||||
for (var key in map) {
|
||||
const dataStr = key
|
||||
const value = map[key]
|
||||
const today = moment(new Date()).format('YYYY-MM-DD')
|
||||
if (dataStr == today) {
|
||||
this.todayIBjl = map[today]
|
||||
}
|
||||
this.chartData.ibjl.push({
|
||||
x: key,
|
||||
y: value
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadDiskInfo()
|
||||
this.queryCount()
|
||||
this.loadChartData()
|
||||
this.loadList(1)
|
||||
setTimeout(() => {
|
||||
this.loading = !this.loading
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -694,5 +688,4 @@
|
||||
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -33,282 +33,279 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAction
|
||||
} from '@/api/manage'
|
||||
// 引入echarts
|
||||
import * as echarts from 'echarts'
|
||||
import {
|
||||
getAction
|
||||
} from '@/api/manage'
|
||||
// 引入echarts
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'ArchivesStatisticst',
|
||||
components: {
|
||||
export default {
|
||||
name: 'ArchivesStatisticst',
|
||||
components: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
barType: 'year',
|
||||
pieType: 'year',
|
||||
// 数据集
|
||||
countSource: [],
|
||||
barValue: [],
|
||||
pieValue: [],
|
||||
// 统计图类型
|
||||
tabStatus: 'bar',
|
||||
url: {
|
||||
getYearCountInfo: '/mock/api/report/getYearCountInfo',
|
||||
getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
|
||||
getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
|
||||
getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
const url = this.url.getYearCountInfo
|
||||
this.loadDate(url, 'year', {})
|
||||
},
|
||||
methods: {
|
||||
loadDate (url, type, param) {
|
||||
getAction(url, param, 'get').then((res) => {
|
||||
// console.log(res)
|
||||
if (res.success) {
|
||||
this.countSource = []
|
||||
if (type === 'year') {
|
||||
this.getYearCountSource(res.result)
|
||||
}
|
||||
if (type === 'month') {
|
||||
this.getMonthCountSource(res.result)
|
||||
}
|
||||
if (type === 'category') {
|
||||
this.getCategoryCountSource(res.result)
|
||||
}
|
||||
if (type === 'cabinet') {
|
||||
this.getCabinetCountSource(res.result)
|
||||
}
|
||||
} else {
|
||||
var that = this
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
barType: 'year',
|
||||
pieType: 'year',
|
||||
// 数据集
|
||||
countSource: [],
|
||||
barValue: [],
|
||||
pieValue: [],
|
||||
// 统计图类型
|
||||
tabStatus: "bar",
|
||||
url: {
|
||||
getYearCountInfo: "/mock/api/report/getYearCountInfo",
|
||||
getMonthCountInfo: "/mock/api/report/getMonthCountInfo",
|
||||
getCntrNoCountInfo: "/mock/api/report/getCntrNoCountInfo",
|
||||
getCabinetCountInfo: "/mock/api/report/getCabinetCountInfo",
|
||||
},
|
||||
// 按年统计
|
||||
getYearCountSource (data) {
|
||||
const yearList = []
|
||||
const yearCountList = []
|
||||
data.forEach((item) => {
|
||||
yearList.push(item.year)
|
||||
yearCountList.push(item.yearcount)
|
||||
})
|
||||
const pieList = []
|
||||
data.forEach((item) => {
|
||||
const a = {
|
||||
value: item.yearcount,
|
||||
name: item.year
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
// 判断类型
|
||||
if (this.tabStatus === 'bar') {
|
||||
this.barChart(yearList, yearCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// 按月统计
|
||||
getMonthCountSource (data) {
|
||||
const monthList = []
|
||||
const monthCountList = []
|
||||
data.forEach((item) => {
|
||||
monthList.push(item.month)
|
||||
monthCountList.push(item.monthcount)
|
||||
})
|
||||
const pieList = []
|
||||
data.forEach((item) => {
|
||||
const a = {
|
||||
value: item.monthcount,
|
||||
name: item.month
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
// 判断类型
|
||||
if (this.tabStatus === 'bar') {
|
||||
this.barChart(monthList, monthCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let url = this.url.getYearCountInfo;
|
||||
this.loadDate(url, 'year', {});
|
||||
// 按类别统计
|
||||
getCategoryCountSource (data) {
|
||||
const cateList = []
|
||||
const cateCountList = []
|
||||
data.forEach((item) => {
|
||||
cateList.push(item.classifyname)
|
||||
cateCountList.push(item.cntrnocount)
|
||||
})
|
||||
const pieList = []
|
||||
data.forEach((item) => {
|
||||
const a = {
|
||||
value: item.cntrnocount,
|
||||
name: item.classifyname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
// 判断类型
|
||||
if (this.tabStatus === 'bar') {
|
||||
this.barChart(cateList, cateCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadDate(url, type, param) {
|
||||
getAction(url, param, 'get').then((res) => {
|
||||
// console.log(res)
|
||||
if (res.success) {
|
||||
this.countSource = [];
|
||||
if (type === 'year') {
|
||||
this.getYearCountSource(res.result);
|
||||
}
|
||||
if (type === 'month') {
|
||||
this.getMonthCountSource(res.result);
|
||||
}
|
||||
if (type === 'category') {
|
||||
this.getCategoryCountSource(res.result);
|
||||
}
|
||||
if (type === 'cabinet') {
|
||||
this.getCabinetCountSource(res.result);
|
||||
}
|
||||
} else {
|
||||
var that = this;
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
})
|
||||
},
|
||||
//按年统计
|
||||
getYearCountSource(data) {
|
||||
let yearList = []
|
||||
let yearCountList = []
|
||||
data.forEach((item) => {
|
||||
yearList.push(item.year)
|
||||
yearCountList.push(item.yearcount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.yearcount,
|
||||
'name': item.year
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(yearList, yearCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
//按月统计
|
||||
getMonthCountSource(data) {
|
||||
let monthList = []
|
||||
let monthCountList = []
|
||||
data.forEach((item) => {
|
||||
monthList.push(item.month)
|
||||
monthCountList.push(item.monthcount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.monthcount,
|
||||
'name': item.month
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(monthList, monthCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
// 按柜号统计
|
||||
getCabinetCountSource (data) {
|
||||
const cabinetList = []
|
||||
const cabinetCountList = []
|
||||
data.forEach((item) => {
|
||||
cabinetList.push(item.cabinetname)
|
||||
cabinetCountList.push(item.cabinetcocunt)
|
||||
})
|
||||
const pieList = []
|
||||
data.forEach((item) => {
|
||||
const a = {
|
||||
value: item.cabinetcocunt,
|
||||
name: item.cabinetname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
// 判断类型
|
||||
if (this.tabStatus === 'bar') {
|
||||
this.barChart(cabinetList, cabinetCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
},
|
||||
// 柱状图方法
|
||||
barChart (list, countList) {
|
||||
// console.log(list,countList)
|
||||
var myChart = echarts.init(this.$refs.echartBar)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: '档案统计'
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['y']
|
||||
},
|
||||
xAxis: {
|
||||
data: list
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: 'y',
|
||||
type: 'bar',
|
||||
data: countList
|
||||
}]
|
||||
}
|
||||
|
||||
},
|
||||
//按类别统计
|
||||
getCategoryCountSource(data) {
|
||||
let cateList = []
|
||||
let cateCountList = []
|
||||
data.forEach((item) => {
|
||||
cateList.push(item.classifyname)
|
||||
cateCountList.push(item.cntrnocount)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.cntrnocount,
|
||||
'name': item.classifyname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(cateList, cateCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
|
||||
},
|
||||
//按柜号统计
|
||||
getCabinetCountSource(data) {
|
||||
let cabinetList = []
|
||||
let cabinetCountList = []
|
||||
data.forEach((item) => {
|
||||
cabinetList.push(item.cabinetname)
|
||||
cabinetCountList.push(item.cabinetcocunt)
|
||||
})
|
||||
let pieList = []
|
||||
data.forEach((item) => {
|
||||
let a = {
|
||||
'value': item.cabinetcocunt,
|
||||
'name': item.cabinetname
|
||||
}
|
||||
pieList.push(a)
|
||||
})
|
||||
//判断类型
|
||||
if (this.tabStatus === "bar") {
|
||||
this.barChart(cabinetList, cabinetCountList)
|
||||
} else {
|
||||
this.TieChart(pieList)
|
||||
}
|
||||
|
||||
},
|
||||
//柱状图方法
|
||||
barChart(list, countList) {
|
||||
// console.log(list,countList)
|
||||
var myChart = echarts.init(this.$refs.echartBar)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: "档案统计",
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ["y"],
|
||||
},
|
||||
xAxis: {
|
||||
data: list,
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: "y",
|
||||
type: "bar",
|
||||
data: countList,
|
||||
}, ],
|
||||
}
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
//饼状图方法
|
||||
TieChart(pieList) {
|
||||
var myChart = echarts.init(this.$refs.echartPie)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: '档案统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: [{
|
||||
name: pieList.name,
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: pieList,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
// 饼状图方法
|
||||
TieChart (pieList) {
|
||||
var myChart = echarts.init(this.$refs.echartPie)
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: '档案统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [{
|
||||
name: pieList.name,
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: pieList,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
// 选择统计图类别
|
||||
callback(key) {
|
||||
if (key === "1") {
|
||||
this.tabStatus = "bar";
|
||||
this.queryDatebar();
|
||||
} else {
|
||||
this.tabStatus = "pie";
|
||||
this.queryDatepie();
|
||||
}
|
||||
},
|
||||
// 选择统计类别
|
||||
statisticst(e) {
|
||||
if (this.tabStatus === "pie") {
|
||||
this.pieType = e.target.value;
|
||||
this.queryDatepie();
|
||||
} else {
|
||||
this.barType = e.target.value;
|
||||
this.queryDatebar();
|
||||
}
|
||||
},
|
||||
// 按月份查询
|
||||
queryDatebar() {
|
||||
if (this.barValue.length > 0) {
|
||||
this.getUrl(this.barType, {
|
||||
startTime: this.barValue[0]._d,
|
||||
endTime: this.barValue[1]._d
|
||||
});
|
||||
} else {
|
||||
this.getUrl(this.barType, {});
|
||||
}
|
||||
},
|
||||
queryDatepie() {
|
||||
if (this.pieValue.length > 0) {
|
||||
this.getUrl(this.pieType, {
|
||||
startTime: this.pieValue[0]._d,
|
||||
endTime: this.pieValue[1]._d
|
||||
});
|
||||
} else {
|
||||
this.getUrl(this.pieType, {});
|
||||
}
|
||||
},
|
||||
// 选择请求url
|
||||
getUrl(type, param) {
|
||||
let url = "";
|
||||
if (type === 'year') {
|
||||
url = this.url.getYearCountInfo;
|
||||
}
|
||||
if (type === 'month') {
|
||||
url = this.url.getMonthCountInfo;
|
||||
}
|
||||
if (type === 'category') {
|
||||
url = this.url.getCntrNoCountInfo;
|
||||
}
|
||||
if (type === 'cabinet') {
|
||||
url = this.url.getCabinetCountInfo;
|
||||
}
|
||||
this.loadDate(url, type, param);
|
||||
},
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
},
|
||||
// 选择统计图类别
|
||||
callback (key) {
|
||||
if (key === '1') {
|
||||
this.tabStatus = 'bar'
|
||||
this.queryDatebar()
|
||||
} else {
|
||||
this.tabStatus = 'pie'
|
||||
this.queryDatepie()
|
||||
}
|
||||
},
|
||||
// 选择统计类别
|
||||
statisticst (e) {
|
||||
if (this.tabStatus === 'pie') {
|
||||
this.pieType = e.target.value
|
||||
this.queryDatepie()
|
||||
} else {
|
||||
this.barType = e.target.value
|
||||
this.queryDatebar()
|
||||
}
|
||||
},
|
||||
// 按月份查询
|
||||
queryDatebar () {
|
||||
if (this.barValue.length > 0) {
|
||||
this.getUrl(this.barType, {
|
||||
startTime: this.barValue[0]._d,
|
||||
endTime: this.barValue[1]._d
|
||||
})
|
||||
} else {
|
||||
this.getUrl(this.barType, {})
|
||||
}
|
||||
},
|
||||
queryDatepie () {
|
||||
if (this.pieValue.length > 0) {
|
||||
this.getUrl(this.pieType, {
|
||||
startTime: this.pieValue[0]._d,
|
||||
endTime: this.pieValue[1]._d
|
||||
})
|
||||
} else {
|
||||
this.getUrl(this.pieType, {})
|
||||
}
|
||||
},
|
||||
// 选择请求url
|
||||
getUrl (type, param) {
|
||||
let url = ''
|
||||
if (type === 'year') {
|
||||
url = this.url.getYearCountInfo
|
||||
}
|
||||
if (type === 'month') {
|
||||
url = this.url.getMonthCountInfo
|
||||
}
|
||||
if (type === 'category') {
|
||||
url = this.url.getCntrNoCountInfo
|
||||
}
|
||||
if (type === 'cabinet') {
|
||||
url = this.url.getCabinetCountInfo
|
||||
}
|
||||
this.loadDate(url, type, param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -72,68 +72,80 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import Liquid from '@/components/chart/Liquid'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import Pie from '@/components/chart/Pie'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import TransferBar from '@/components/chart/TransferBar'
|
||||
import Trend from '@/components/chart/Trend'
|
||||
import BarAndLine from '@/components/chart/BarAndLine'
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import BarMultid from '@/components/chart/BarMultid'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||||
import Liquid from '@/components/chart/Liquid'
|
||||
import MiniBar from '@/components/chart/MiniBar'
|
||||
import MiniArea from '@/components/chart/MiniArea'
|
||||
import MiniProgress from '@/components/chart/MiniProgress'
|
||||
import Pie from '@/components/chart/Pie'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import RankList from '@/components/chart/RankList'
|
||||
import TransferBar from '@/components/chart/TransferBar'
|
||||
import Trend from '@/components/chart/Trend'
|
||||
import BarAndLine from '@/components/chart/BarAndLine'
|
||||
|
||||
export default {
|
||||
name: 'ViserChartDemo',
|
||||
components: {
|
||||
Bar, MiniBar, BarMultid, AreaChartTy, LineChartMultid,
|
||||
Pie, Radar, DashChartDemo, MiniProgress, RankList,
|
||||
TransferBar, Trend, Liquid, MiniArea, BarAndLine
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 420,
|
||||
rankList: [],
|
||||
barData: [],
|
||||
areaData: []
|
||||
export default {
|
||||
name: 'ViserChartDemo',
|
||||
components: {
|
||||
Bar,
|
||||
MiniBar,
|
||||
BarMultid,
|
||||
AreaChartTy,
|
||||
LineChartMultid,
|
||||
Pie,
|
||||
Radar,
|
||||
DashChartDemo,
|
||||
MiniProgress,
|
||||
RankList,
|
||||
TransferBar,
|
||||
Trend,
|
||||
Liquid,
|
||||
MiniArea,
|
||||
BarAndLine
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
height: 420,
|
||||
rankList: [],
|
||||
barData: [],
|
||||
areaData: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
setTimeout(() => {
|
||||
this.loadBarData()
|
||||
this.loadAreaData()
|
||||
this.loadRankListData()
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
loadData (x, y, max, min, before = '', after = '月') {
|
||||
const data = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
data.push({
|
||||
[x]: `${before}${i + 1}${after}`,
|
||||
[y]: Math.floor(Math.random() * max) + min
|
||||
})
|
||||
}
|
||||
return data
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.loadBarData()
|
||||
this.loadAreaData()
|
||||
this.loadRankListData()
|
||||
}, 100)
|
||||
// 加载柱状图数据
|
||||
loadBarData () {
|
||||
this.barData = this.loadData('x', 'y', 1000, 200)
|
||||
},
|
||||
methods: {
|
||||
loadData(x, y, max, min, before = '', after = '月') {
|
||||
let data = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
data.push({
|
||||
[x]: `${before}${i + 1}${after}`,
|
||||
[y]: Math.floor(Math.random() * max) + min
|
||||
})
|
||||
}
|
||||
return data
|
||||
},
|
||||
// 加载柱状图数据
|
||||
loadBarData() {
|
||||
this.barData = this.loadData('x', 'y', 1000, 200)
|
||||
},
|
||||
// 加载AreaChartTy的数据
|
||||
loadAreaData() {
|
||||
this.areaData = this.loadData('x', 'y', 500, 100)
|
||||
},
|
||||
loadRankListData() {
|
||||
this.rankList = this.loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店')
|
||||
}
|
||||
// 加载AreaChartTy的数据
|
||||
loadAreaData () {
|
||||
this.areaData = this.loadData('x', 'y', 500, 100)
|
||||
},
|
||||
loadRankListData () {
|
||||
this.rankList = this.loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -65,102 +65,104 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderDMainList from './JeroOrderDMainList'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderDMainList from './JeroOrderDMainList'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainList,
|
||||
JeroOrderCustomerModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单客户信息',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text == 1) {
|
||||
return "男";
|
||||
} else if (text == 2) {
|
||||
return "女";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
export default {
|
||||
name: 'JeroOrderDMainModal',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainList,
|
||||
JeroOrderCustomerModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单客户信息',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text == 1) {
|
||||
return '男'
|
||||
} else if (text == 2) {
|
||||
return '女'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: "center",
|
||||
dataIndex: 'idcard',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
},
|
||||
],
|
||||
url: {
|
||||
list: "/test/order/listOrderCustomerByMainId",
|
||||
delete: "/test/order/deleteCustomer",
|
||||
deleteBatch: "/test/order/deleteBatchCustomer",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
var params = this.getQueryParams();
|
||||
getAction(this.url.list, {orderId: params.mainId, pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
|
||||
},
|
||||
getOrderMain(orderId) {
|
||||
this.queryParam.mainId = orderId;
|
||||
this.loadData(1);
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId);
|
||||
this.$refs.modalForm.title = "添加客户信息";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: 'center',
|
||||
dataIndex: 'idcard'
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/test/order/listOrderCustomerByMainId',
|
||||
delete: '/test/order/deleteCustomer',
|
||||
deleteBatch: '/test/order/deleteBatchCustomer'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData (arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
// update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
var params = this.getQueryParams()
|
||||
getAction(this.url.list, {
|
||||
orderId: params.mainId,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.dataSource = null
|
||||
}
|
||||
})
|
||||
// update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
},
|
||||
getOrderMain (orderId) {
|
||||
this.queryParam.mainId = orderId
|
||||
this.loadData(1)
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId)
|
||||
this.$refs.modalForm.title = '添加客户信息'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
@@ -99,156 +98,156 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderDMainModal from './form/JeroOrderDMainModal'
|
||||
import JeroOrderCustomerList from './JeroOrderCustomerList'
|
||||
import JeroOrderTicketList from './JeroOrderTicketList'
|
||||
import {deleteAction} from '@/api/manage'
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import JeroOrderDMainModal from './form/JeroOrderDMainModal'
|
||||
import JeroOrderCustomerList from './JeroOrderCustomerList'
|
||||
import JeroOrderTicketList from './JeroOrderTicketList'
|
||||
import { deleteAction } from '@/api/manage'
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
JeroOrderCustomerModal,
|
||||
JeroOrderDMainModal,
|
||||
JeroOrderCustomerList,
|
||||
JeroOrderTicketList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
/* 分页参数 */
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
export default {
|
||||
name: 'JeroOrderDMainList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
JeroOrderCustomerModal,
|
||||
JeroOrderDMainModal,
|
||||
JeroOrderCustomerList,
|
||||
JeroOrderTicketList
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: 'center',
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = ''
|
||||
if (text === '1') {
|
||||
re = '国内订单'
|
||||
} else if (text === '2') {
|
||||
re = '国际订单'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: "center",
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: "center",
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = "";
|
||||
if (text === '1') {
|
||||
re = "国内订单";
|
||||
} else if (text === '2') {
|
||||
re = "国际订单";
|
||||
}
|
||||
return re;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: "center",
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: "center",
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: "center",
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}],
|
||||
// 分页参数
|
||||
type: "radio",
|
||||
url: {
|
||||
list: "/test/order/orderList",
|
||||
delete: "/test/order/delete",
|
||||
deleteBatch: "/test/order/deleteBatch",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickThenCheck(record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
this.onSelectChange(record.id.split(","), [record]);
|
||||
}
|
||||
}
|
||||
};
|
||||
return re
|
||||
}
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
this.$refs.JeroOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
|
||||
this.$refs.JeroOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
|
||||
{
|
||||
title: '订单日期',
|
||||
align: 'center',
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.selectionRows = [];
|
||||
{
|
||||
title: '订单金额',
|
||||
align: 'center',
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
|
||||
handleDelete: function (id) {
|
||||
var that = this;
|
||||
deleteAction(that.url.delete, {id: id}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
{
|
||||
title: '订单备注',
|
||||
align: 'center',
|
||||
dataIndex: 'content'
|
||||
},
|
||||
searchQuery:function(){
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.selectionRows = [];
|
||||
this.loadData();
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}],
|
||||
// 分页参数
|
||||
type: 'radio',
|
||||
url: {
|
||||
list: '/test/order/orderList',
|
||||
delete: '/test/order/delete',
|
||||
deleteBatch: '/test/order/deleteBatch'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickThenCheck (record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
this.onSelectChange(record.id.split(','), [record])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onSelectChange (selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectionRows = selectionRows
|
||||
this.$refs.JeroOrderCustomerList.getOrderMain(this.selectedRowKeys[0])
|
||||
this.$refs.JeroOrderTicketList.getOrderMain(this.selectedRowKeys[0])
|
||||
},
|
||||
onClearSelected () {
|
||||
this.selectedRowKeys = []
|
||||
this.selectionRows = []
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null
|
||||
this.$refs.JeroOrderCustomerList.loadData()
|
||||
this.$refs.JeroOrderTicketList.loadData()
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = []
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = []
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = []
|
||||
this.$refs.JeroOrderTicketList.selectionRows = []
|
||||
},
|
||||
|
||||
handleDelete: function (id) {
|
||||
var that = this
|
||||
deleteAction(that.url.delete, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.loadData()
|
||||
this.$refs.JeroOrderCustomerList.loadData()
|
||||
this.$refs.JeroOrderTicketList.loadData()
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
searchQuery: function () {
|
||||
this.selectedRowKeys = []
|
||||
this.selectionRows = []
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null
|
||||
this.$refs.JeroOrderCustomerList.loadData()
|
||||
this.$refs.JeroOrderTicketList.loadData()
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = []
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = []
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = []
|
||||
this.$refs.JeroOrderTicketList.selectionRows = []
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
@@ -281,4 +280,4 @@
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -68,87 +68,90 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderTicketList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '机票信息',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '航班号',
|
||||
align: "center",
|
||||
dataIndex: 'ticketCode'
|
||||
}, {
|
||||
title: '航班时间',
|
||||
align: "center",
|
||||
dataIndex: 'tickectDate'
|
||||
}, {
|
||||
title: '订单号码',
|
||||
align: "center",
|
||||
dataIndex: 'orderId',
|
||||
}, {
|
||||
title: '创建人',
|
||||
align: "center",
|
||||
dataIndex: 'createBy'
|
||||
}, {
|
||||
title: '创建时间',
|
||||
align: "center",
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: "center",
|
||||
width: 130,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}],
|
||||
url: {
|
||||
list: "/test/order/listOrderTicketByMainId",
|
||||
delete: "/test/order/deleteTicket",
|
||||
deleteBatch: "/test/order/deleteBatchTicket",
|
||||
}
|
||||
export default {
|
||||
name: 'JeroOrderTicketList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '机票信息',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '航班号',
|
||||
align: 'center',
|
||||
dataIndex: 'ticketCode'
|
||||
}, {
|
||||
title: '航班时间',
|
||||
align: 'center',
|
||||
dataIndex: 'tickectDate'
|
||||
}, {
|
||||
title: '订单号码',
|
||||
align: 'center',
|
||||
dataIndex: 'orderId'
|
||||
}, {
|
||||
title: '创建人',
|
||||
align: 'center',
|
||||
dataIndex: 'createBy'
|
||||
}, {
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}],
|
||||
url: {
|
||||
list: '/test/order/listOrderTicketByMainId',
|
||||
delete: '/test/order/deleteTicket',
|
||||
deleteBatch: '/test/order/deleteBatchTicket'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData (arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
var params = this.getQueryParams()
|
||||
// update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
getAction(this.url.list, {
|
||||
orderId: params.mainId,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.dataSource = null
|
||||
}
|
||||
var params = this.getQueryParams();
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
getAction(this.url.list, {orderId: params.mainId ,pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
},
|
||||
getOrderMain(orderId) {
|
||||
this.queryParam.mainId = orderId;
|
||||
this.loadData(1);
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId);
|
||||
this.$refs.modalForm.title = "添加机票信息";
|
||||
},
|
||||
})
|
||||
// update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
},
|
||||
getOrderMain (orderId) {
|
||||
this.queryParam.mainId = orderId
|
||||
this.loadData(1)
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId)
|
||||
this.$refs.modalForm.title = '添加机票信息'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -68,163 +68,163 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import Vue from 'vue'
|
||||
import {ACCESS_TOKEN} from "@/store/mutation-types"
|
||||
import JImageUpload from '../../../../components/jero/JImageUpload'
|
||||
import { httpAction } from '@/api/manage'
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import JImageUpload from '../../../../components/jero/JImageUpload'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderCustomerModal",
|
||||
components: { JImageUpload },
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
fileList: [],
|
||||
disableSubmit: false,
|
||||
selectedRowKeys: [],
|
||||
orderId: "",
|
||||
hiding: false,
|
||||
headers: {},
|
||||
picUrl: "",
|
||||
picArray:[],
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
addStatus: false,
|
||||
editStatus: false,
|
||||
confirmLoading: false,
|
||||
url: {
|
||||
add: "/test/order/addCustomer",
|
||||
edit: "/test/order/editCustomer",
|
||||
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
|
||||
getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
},
|
||||
validatorRules: {
|
||||
name :[{required: true, message: '请输入客户姓名!'}],
|
||||
telphone: [{validator: this.validateMobile}],
|
||||
idcard: [{validator: this.validateIdCard}]
|
||||
},
|
||||
export default {
|
||||
name: 'JeroOrderCustomerModal',
|
||||
components: { JImageUpload },
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
fileList: [],
|
||||
disableSubmit: false,
|
||||
selectedRowKeys: [],
|
||||
orderId: '',
|
||||
hiding: false,
|
||||
headers: {},
|
||||
picUrl: '',
|
||||
picArray: [],
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
addStatus: false,
|
||||
editStatus: false,
|
||||
confirmLoading: false,
|
||||
url: {
|
||||
add: '/test/order/addCustomer',
|
||||
edit: '/test/order/editCustomer',
|
||||
fileUpload: window._CONFIG.domianURL + '/sys/common/upload',
|
||||
getOrderCustomerList: '/test/order/listOrderCustomerByMainId'
|
||||
},
|
||||
validatorRules: {
|
||||
name: [{ required: true, message: '请输入客户姓名!' }],
|
||||
telphone: [{ validator: this.validateMobile }],
|
||||
idcard: [{ validator: this.validateIdCard }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uploadAction: function () {
|
||||
return this.url.fileUpload
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN)
|
||||
this.headers = { 'X-Access-Token': token }
|
||||
},
|
||||
methods: {
|
||||
add (orderId) {
|
||||
this.hiding = true
|
||||
if (orderId) {
|
||||
this.edit({ orderId }, '')
|
||||
} else {
|
||||
this.$message.warning('请选择一个客户信息')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uploadAction: function () {
|
||||
return this.url.fileUpload;
|
||||
detail (record) {
|
||||
this.edit(record, 'd')
|
||||
},
|
||||
edit (record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false
|
||||
this.disableSubmit = false
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false
|
||||
this.disableSubmit = true
|
||||
} else {
|
||||
this.hiding = true
|
||||
this.disableSubmit = false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token": token}
|
||||
},
|
||||
methods: {
|
||||
add(orderId) {
|
||||
this.hiding = true;
|
||||
if (orderId) {
|
||||
this.edit({orderId}, '');
|
||||
} else {
|
||||
this.$message.warning("请选择一个客户信息");
|
||||
}
|
||||
},
|
||||
detail(record) {
|
||||
this.edit(record, 'd');
|
||||
},
|
||||
edit(record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = false;
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = true;
|
||||
} else {
|
||||
this.hiding = true;
|
||||
this.disableSubmit = false;
|
||||
}
|
||||
|
||||
this.model = Object.assign({}, record);
|
||||
if (record.id) {
|
||||
this.hiding = false;
|
||||
this.addStatus = false;
|
||||
this.editStatus = true;
|
||||
setTimeout(() => {
|
||||
this.fileList = record.idcardPic
|
||||
}, 5)
|
||||
} else {
|
||||
this.addStatus = false;
|
||||
this.editStatus = true;
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.picUrl = "";
|
||||
this.fileList=[];
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign({}, this.model);
|
||||
if(this.fileList != '') {
|
||||
formData.idcardPic = this.fileList;
|
||||
}else{
|
||||
formData.idcardPic = '';
|
||||
}
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}else{
|
||||
return false;
|
||||
this.model = Object.assign({}, record)
|
||||
if (record.id) {
|
||||
this.hiding = false
|
||||
this.addStatus = false
|
||||
this.editStatus = true
|
||||
setTimeout(() => {
|
||||
this.fileList = record.idcardPic
|
||||
}, 5)
|
||||
} else {
|
||||
this.addStatus = false
|
||||
this.editStatus = true
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
this.picUrl = ''
|
||||
this.fileList = []
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
validateMobile(rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback();
|
||||
const formData = Object.assign({}, this.model)
|
||||
if (this.fileList != '') {
|
||||
formData.idcardPic = this.fileList
|
||||
} else {
|
||||
formData.idcardPic = ''
|
||||
}
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
} else {
|
||||
callback("您的手机号码格式不正确!");
|
||||
return false
|
||||
}
|
||||
},
|
||||
validateIdCard(rule, value, callback) {
|
||||
if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您的身份证号码格式不正确!");
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
validateMobile (rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback('您的手机号码格式不正确!')
|
||||
}
|
||||
},
|
||||
validateIdCard (rule, value, callback) {
|
||||
if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback('您的身份证号码格式不正确!')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -242,4 +242,4 @@
|
||||
.upload-list-inline > > > .ant-upload-animate-leave {
|
||||
animation-name: uploadAnimateInlineOut;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -52,103 +52,103 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
import { httpAction } from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
orderCode: [
|
||||
{ required: true, message: '请输入订单号!' }
|
||||
]
|
||||
},
|
||||
url: {
|
||||
add: "/test/order/add",
|
||||
edit: "/test/order/edit",
|
||||
orderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
orderTicketList: "/test/order/listOrderTicketByMainId",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.edit({});
|
||||
export default {
|
||||
name: 'JeroOrderDMainModal',
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeroOrderCustomerList: [{}],
|
||||
jeroOrderTicketList: [{}]
|
||||
},
|
||||
edit(record) {
|
||||
this.orderMainModel = Object.assign({}, record);
|
||||
console.log(this.orderMainModel)
|
||||
//初始化明细表数据
|
||||
this.visible = true;
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.$refs.form.resetFields();
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
orderCode: [
|
||||
{ required: true, message: '请输入订单号!' }
|
||||
]
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.orderMainModel.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
|
||||
httpAction(httpurl, this.orderMainModel, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
url: {
|
||||
add: '/test/order/add',
|
||||
edit: '/test/order/edit',
|
||||
orderCustomerList: '/test/order/listOrderCustomerByMainId',
|
||||
orderTicketList: '/test/order/listOrderTicketByMainId'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({})
|
||||
},
|
||||
edit (record) {
|
||||
this.orderMainModel = Object.assign({}, record)
|
||||
console.log(this.orderMainModel)
|
||||
// 初始化明细表数据
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.orderMainModel.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
|
||||
httpAction(httpurl, this.orderMainModel, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -170,4 +170,4 @@
|
||||
.ant-tabs-content .ant-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -59,116 +59,116 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import moment from 'moment'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import { httpAction } from '@/api/manage'
|
||||
import moment from 'moment'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
name: 'JeroOrderTicketModal',
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
moment,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
disableSubmit: false,
|
||||
orderId: '',
|
||||
hiding: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
ticketCode:[{required : true, message: '请输入航班号!'}],
|
||||
tickectDate:[{required : true, message: '请输入航班时间!'}]
|
||||
},
|
||||
url: {
|
||||
add: '/test/order/addTicket',
|
||||
edit: '/test/order/editTicket'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add(orderId) {
|
||||
if (orderId) {
|
||||
this.edit({orderId}, '')
|
||||
} else {
|
||||
this.$message.warning('请选择一条航班数据')
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
name: 'JeroOrderTicketModal',
|
||||
data () {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
detail(record) {
|
||||
this.edit(record, 'd')
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
edit(record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = false;
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = true;
|
||||
} else {
|
||||
this.hiding = true;
|
||||
this.disableSubmit = false;
|
||||
}
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
moment,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
disableSubmit: false,
|
||||
orderId: '',
|
||||
hiding: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
ticketCode: [{ required: true, message: '请输入航班号!' }],
|
||||
tickectDate: [{ required: true, message: '请输入航班时间!' }]
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
this.model.mainId = this.model.orderId;
|
||||
httpAction(httpurl, this.model, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
url: {
|
||||
add: '/test/order/addTicket',
|
||||
edit: '/test/order/editTicket'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add (orderId) {
|
||||
if (orderId) {
|
||||
this.edit({ orderId }, '')
|
||||
} else {
|
||||
this.$message.warning('请选择一条航班数据')
|
||||
}
|
||||
},
|
||||
detail (record) {
|
||||
this.edit(record, 'd')
|
||||
},
|
||||
edit (record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false
|
||||
this.disableSubmit = false
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false
|
||||
this.disableSubmit = true
|
||||
} else {
|
||||
this.hiding = true
|
||||
this.disableSubmit = false
|
||||
}
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
handleOk () {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
that.confirmLoading = true
|
||||
let httpurl = ''
|
||||
let method = ''
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add
|
||||
method = 'post'
|
||||
} else {
|
||||
httpurl += this.url.edit
|
||||
method = 'put'
|
||||
}
|
||||
this.model.mainId = this.model.orderId
|
||||
httpAction(httpurl, this.model, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
that.close()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -14,27 +14,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import types from './type'
|
||||
import types from './type'
|
||||
|
||||
export default {
|
||||
name: "Exception",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: '404'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: types
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToHome () {
|
||||
this.$router.push({ name: 'dashboard' })
|
||||
}
|
||||
export default {
|
||||
name: 'Exception',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: '404'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
config: types
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToHome () {
|
||||
this.$router.push({ name: 'dashboard' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -85,4 +85,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -16,4 +16,4 @@ const types = {
|
||||
}
|
||||
}
|
||||
|
||||
export default types
|
||||
export default types
|
||||
|
||||
@@ -111,93 +111,93 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SysMessageModal from './modules/SysMessageModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import JEllipsis from "@/components/jero/JEllipsis";
|
||||
import SysMessageModal from './modules/SysMessageModal'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
import JEllipsis from '@/components/jero/JEllipsis'
|
||||
|
||||
export default {
|
||||
name: "SysMessageList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JEllipsis,
|
||||
SysMessageModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '消息管理页面',
|
||||
// 新增修改按钮是否显示
|
||||
show: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '消息标题',
|
||||
align: "center",
|
||||
dataIndex: 'esTitle'
|
||||
},
|
||||
{
|
||||
title: '发送内容',
|
||||
align: "center",
|
||||
dataIndex: 'esContent',
|
||||
scopedSlots: {customRender: 'esContent'},
|
||||
},
|
||||
{
|
||||
title: '接收人',
|
||||
align: "center",
|
||||
dataIndex: 'esReceiver'
|
||||
},
|
||||
{
|
||||
title: '发送次数',
|
||||
align: "center",
|
||||
dataIndex: 'esSendNum'
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
align: 'center',
|
||||
dataIndex: 'esSendStatus_dictText'
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
align: "center",
|
||||
dataIndex: 'esSendTime'
|
||||
},
|
||||
{
|
||||
title: '发送方式',
|
||||
align: 'center',
|
||||
dataIndex: 'esType_dictText'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
export default {
|
||||
name: 'SysMessageList',
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JEllipsis,
|
||||
SysMessageModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '消息管理页面',
|
||||
// 新增修改按钮是否显示
|
||||
show: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/message/sysMessage/page",
|
||||
delete: "/sys/message/sysMessage/delete",
|
||||
deleteBatch: "/sys/message/sysMessage/deleteBatch",
|
||||
exportXlsUrl: "sys/message/sysMessage/exportXls",
|
||||
importExcelUrl: "sys/message/sysMessage/importExcel",
|
||||
},
|
||||
{
|
||||
title: '消息标题',
|
||||
align: 'center',
|
||||
dataIndex: 'esTitle'
|
||||
},
|
||||
{
|
||||
title: '发送内容',
|
||||
align: 'center',
|
||||
dataIndex: 'esContent',
|
||||
scopedSlots: { customRender: 'esContent' }
|
||||
},
|
||||
{
|
||||
title: '接收人',
|
||||
align: 'center',
|
||||
dataIndex: 'esReceiver'
|
||||
},
|
||||
{
|
||||
title: '发送次数',
|
||||
align: 'center',
|
||||
dataIndex: 'esSendNum'
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
align: 'center',
|
||||
dataIndex: 'esSendStatus_dictText'
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
align: 'center',
|
||||
dataIndex: 'esSendTime'
|
||||
},
|
||||
{
|
||||
title: '发送方式',
|
||||
align: 'center',
|
||||
dataIndex: 'esType_dictText'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: '/sys/message/sysMessage/page',
|
||||
delete: '/sys/message/sysMessage/delete',
|
||||
deleteBatch: '/sys/message/sysMessage/deleteBatch',
|
||||
exportXlsUrl: 'sys/message/sysMessage/exportXls',
|
||||
importExcelUrl: 'sys/message/sysMessage/importExcel'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/** Button按钮间距 */
|
||||
@@ -235,4 +235,4 @@
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user