mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-08 17:12:28 +08:00
JEECG-BOOT 2.0.2版本发布
This commit is contained in:
zhangdaihao
15
ant-design-vue-jeecg/src/views/404.vue
Normal file
15
ant-design-vue-jeecg/src/views/404.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
404 page
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "404"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
163
ant-design-vue-jeecg/src/views/Home.vue
Normal file
163
ant-design-vue-jeecg/src/views/Home.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="banner">
|
||||
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
|
||||
<h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2># Trend 组件 </h2>
|
||||
|
||||
<a-divider> 正常 </a-divider>
|
||||
|
||||
<a-card>
|
||||
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<span slot="term">工资</span>
|
||||
5%
|
||||
</trend>
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<span slot="term">工作量</span>
|
||||
50%
|
||||
</trend>
|
||||
<trend flag="down">
|
||||
<span slot="term">身体状态</span>
|
||||
50%
|
||||
</trend>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-divider> 颜色反转 </a-divider>
|
||||
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
|
||||
<trend flag="up" :reverse-color="true" style="margin-right: 16px;">
|
||||
<span slot="term">工资</span>
|
||||
5%
|
||||
</trend>
|
||||
<trend flag="down" :reverse-color="true" style="margin-right: 16px;">
|
||||
<span slot="term">工作量</span>
|
||||
50%
|
||||
</trend>
|
||||
|
||||
</a-card>
|
||||
|
||||
<h2># AvatarList 组件 </h2>
|
||||
|
||||
<a-divider> AvatarList </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<avatar-list :max-length="3">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
|
||||
</avatar-list>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
|
||||
<avatar-list size="mini">
|
||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
||||
</avatar-list>
|
||||
</a-card>
|
||||
|
||||
<h2># CountDown 组件 </h2>
|
||||
|
||||
<a-divider> CountDown </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 3000000"
|
||||
:on-end="onEndHandle">
|
||||
</count-down>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
|
||||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 10000"
|
||||
:on-end="onEndHandle2">
|
||||
</count-down>
|
||||
</a-card>
|
||||
|
||||
<h2># Ellipsis 组件 </h2>
|
||||
|
||||
<a-divider> Ellipsis </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<ellipsis :length="100" tooltip>
|
||||
There were injuries alleged in three cases in 2015, and a
|
||||
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
|
||||
</ellipsis>
|
||||
</a-card>
|
||||
|
||||
<h2># NumberInfo 组件 </h2>
|
||||
|
||||
<a-divider> NumberInfo </a-divider>
|
||||
<a-card>
|
||||
<number-info
|
||||
:sub-title="() => { return 'Visits this week' }"
|
||||
:total="12321"
|
||||
status="up"
|
||||
:sub-total="17.1"></number-info>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ 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 NumberInfo from '@/components/NumberInfo'
|
||||
|
||||
const AvatarListItem = AvatarList.AvatarItem
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
NumberInfo,
|
||||
Ellipsis,
|
||||
CountDown,
|
||||
Trend,
|
||||
AvatarList,
|
||||
AvatarListItem
|
||||
},
|
||||
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.',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.home > .banner {
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
</style>
|
||||
285
ant-design-vue-jeecg/src/views/account/center/Index.vue
Normal file
285
ant-design-vue-jeecg/src/views/account/center/Index.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="24" :lg="7">
|
||||
<a-card :bordered="false">
|
||||
<div class="account-center-avatarHolder">
|
||||
<div class="avatar">
|
||||
<img :src="getAvatar()"/>
|
||||
</div>
|
||||
<div class="username">{{ nickname() }}</div>
|
||||
<div class="bio">海纳百川，有容乃大</div>
|
||||
</div>
|
||||
<div class="account-center-detail">
|
||||
<p>
|
||||
<i class="title"></i>交互专家
|
||||
</p>
|
||||
<p>
|
||||
<i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
|
||||
</p>
|
||||
<p>
|
||||
<i class="address"></i><span>浙江省</span><span>杭州市</span>
|
||||
</p>
|
||||
</div>
|
||||
<a-divider />
|
||||
|
||||
<div class="account-center-tags">
|
||||
<div class="tagsTitle">标签</div>
|
||||
<div>
|
||||
<template v-for="(tag, index) in tags">
|
||||
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
||||
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
|
||||
{{ `${tag.slice(0, 20)}...` }}
|
||||
</a-tag>
|
||||
</a-tooltip>
|
||||
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
|
||||
</template>
|
||||
<a-input
|
||||
v-if="tagInputVisible"
|
||||
ref="tagInput"
|
||||
type="text"
|
||||
size="small"
|
||||
:style="{ width: '78px' }"
|
||||
:value="tagInputValue"
|
||||
@change="handleInputChange"
|
||||
@blur="handleTagInputConfirm"
|
||||
@keyup.enter="handleTagInputConfirm"
|
||||
/>
|
||||
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
|
||||
<a-icon type="plus" /> New Tag
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider :dashed="true" />
|
||||
|
||||
<div class="account-center-team">
|
||||
<div class="teamTitle">团队</div>
|
||||
<a-spin :spinning="teamSpinning">
|
||||
<div class="members">
|
||||
<a-row>
|
||||
<a-col :span="12" v-for="(item, index) in teams" :key="index">
|
||||
<a>
|
||||
<a-avatar size="small" :src="item.avatar" />
|
||||
<span class="member">{{ item.name }}</span>
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="17">
|
||||
<a-card
|
||||
style="width:100%"
|
||||
:bordered="false"
|
||||
:tabList="tabListNoTitle"
|
||||
:activeTabKey="noTitleKey"
|
||||
@tabChange="key => handleTabChange(key, 'noTitleKey')"
|
||||
>
|
||||
<article-page v-if="noTitleKey === 'article'"></article-page>
|
||||
<app-page v-else-if="noTitleKey === 'app'"></app-page>
|
||||
<project-page v-else-if="noTitleKey === 'project'"></project-page>
|
||||
</a-card>
|
||||
</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'
|
||||
|
||||
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 window._CONFIG['imgDomainURL']+"/"+this.avatar();
|
||||
},
|
||||
getTeams() {
|
||||
this.$http.get('/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: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-header-wrapper-grid-content-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
transition: .3s;
|
||||
|
||||
.account-center-avatarHolder {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
& > .avatar {
|
||||
margin: 0 auto;
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-center-detail {
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 26px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
|
||||
}
|
||||
|
||||
.title {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.group {
|
||||
background-position: 0 -22px;
|
||||
}
|
||||
.address {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-center-tags {
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-center-team {
|
||||
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
.member {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
line-height: 24px;
|
||||
max-width: 100px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagsTitle, .teamTitle {
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,.85);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
113
ant-design-vue-jeecg/src/views/account/center/page/App.vue
Normal file
113
ant-design-vue-jeecg/src/views/account/center/page/App.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="app-list">
|
||||
<a-list
|
||||
:grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
|
||||
:dataSource="dataSource">
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
<a-card :hoverable="true">
|
||||
<a-card-meta>
|
||||
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
||||
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
|
||||
<div class="meta-cardInfo" slot="description">
|
||||
<div>
|
||||
<p>活跃用户</p>
|
||||
<p>
|
||||
<span>{{ item.activeUser }}<span>万</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>新增用户</p>
|
||||
<p>{{ item.newUser | NumberFormat }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-card-meta>
|
||||
<template class="ant-card-actions" slot="actions">
|
||||
<a>
|
||||
<a-icon type="download"/>
|
||||
</a>
|
||||
<a>
|
||||
<a-icon type="edit"/>
|
||||
</a>
|
||||
<a>
|
||||
<a-icon type="share-alt"/>
|
||||
</a>
|
||||
<a>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" href="javascript:;">
|
||||
<a-icon type="ellipsis"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">1st menu item</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">2nd menu item</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">3rd menu item</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
</div>
|
||||
</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
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dataSource,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.app-list {
|
||||
|
||||
.meta-cardInfo {
|
||||
zoom: 1;
|
||||
margin-top: 16px;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
p {
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<a-list>
|
||||
<a-list-item>
|
||||
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AList from 'ant-design-vue/es/list'
|
||||
import AListItem from 'ant-design-vue/es/list/Item'
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
components: {
|
||||
AList,
|
||||
AListItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<a-list>
|
||||
<a-list-item>
|
||||
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Project"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
import AppPage from './App'
|
||||
import ArticlePage from './Article'
|
||||
import ProjectPage from './Project'
|
||||
|
||||
export { AppPage, ArticlePage, ProjectPage }
|
||||
103
ant-design-vue-jeecg/src/views/account/settings/AvatarModal.vue
Normal file
103
ant-design-vue-jeecg/src/views/account/settings/AvatarModal.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800">
|
||||
<a-row>
|
||||
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="options.img"
|
||||
:info="true"
|
||||
:autoCrop="options.autoCrop"
|
||||
:autoCropWidth="options.autoCropWidth"
|
||||
:autoCropHeight="options.autoCropHeight"
|
||||
:fixedBox="options.fixedBox"
|
||||
@realTime="realTime"
|
||||
>
|
||||
</vue-cropper>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<div class="avatar-upload-preview">
|
||||
<img :src="previews.url" :style="previews.img"/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<template slot="footer">
|
||||
<a-button key="back" @click="cancelHandel">取消</a-button>
|
||||
<a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
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;
|
||||
/* 获取原始头像 */
|
||||
|
||||
},
|
||||
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="scss" scoped>
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
ant-design-vue-jeecg/src/views/account/settings/BaseSetting.vue
Normal file
161
ant-design-vue-jeecg/src/views/account/settings/BaseSetting.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="account-settings-info-view">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="24" :lg="16">
|
||||
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="昵称"
|
||||
>
|
||||
<a-input placeholder="给自己起个名字" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="Bio"
|
||||
>
|
||||
<a-textarea rows="4" placeholder="You are not alone."/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="电子邮件"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="exp@admin.com"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="加密方式"
|
||||
:required="false"
|
||||
>
|
||||
<a-select defaultValue="aes-256-cfb">
|
||||
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
|
||||
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
|
||||
<a-select-option value="chacha20">chacha20</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="连接密码"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="h3gSbecd"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="登陆密码"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="密码"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary">提交</a-button>
|
||||
<a-button style="margin-left: 8px">保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
|
||||
<div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
|
||||
<a-icon type="cloud-upload-o" class="upload-icon"/>
|
||||
<div class="mask">
|
||||
<a-icon type="plus" />
|
||||
</div>
|
||||
<img :src="option.img"/>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
|
||||
<avatar-modal ref="modal">
|
||||
|
||||
</avatar-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.avatar-upload-wrapper {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-upload-preview {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
|
||||
.upload-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 1.4rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(222, 221, 221, 0.7);
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,0.4);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.4s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1rem;
|
||||
margin-top: -1rem;
|
||||
color: #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
img, .mask {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
ant-design-vue-jeecg/src/views/account/settings/Binding.vue
Normal file
25
ant-design-vue-jeecg/src/views/account/settings/Binding.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<a-list
|
||||
itemLayout="horizontal"
|
||||
:dataSource="data"
|
||||
>
|
||||
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
75
ant-design-vue-jeecg/src/views/account/settings/Custom.vue
Normal file
75
ant-design-vue-jeecg/src/views/account/settings/Custom.vue
Normal file
@ -0,0 +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'
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
154
ant-design-vue-jeecg/src/views/account/settings/Index.vue
Normal file
154
ant-design-vue-jeecg/src/views/account/settings/Index.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
|
||||
<div class="account-settings-info-main" :class="device" :style=" 'min-height:'+ mainInfoHeight ">
|
||||
<div class="account-settings-info-left">
|
||||
<a-menu
|
||||
:mode="device == 'mobile' ? 'horizontal' : 'inline'"
|
||||
:style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
|
||||
:defaultSelectedKeys="defaultSelectedKeys"
|
||||
type="inner"
|
||||
@openChange="onOpenChange"
|
||||
>
|
||||
<a-menu-item key="/account/settings/base">
|
||||
<router-link :to="{ name: 'account-settings-base' }">
|
||||
基本设置
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/account/settings/security">
|
||||
<router-link :to="{ name: 'account-settings-security' }">
|
||||
安全设置
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/account/settings/custom">
|
||||
<router-link :to="{ name: 'account-settings-custom' }">
|
||||
个性化
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/account/settings/binding">
|
||||
<router-link :to="{ name: 'account-settings-binding' }">
|
||||
账户绑定
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/account/settings/notification">
|
||||
<router-link :to="{ name: 'account-settings-notification' }">
|
||||
新消息通知
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="account-settings-info-right">
|
||||
<div class="account-settings-info-title">
|
||||
<span>{{ $route.meta.title }}</span>
|
||||
</div>
|
||||
<route-view></route-view>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from "@/components/layouts/RouteView"
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout
|
||||
},
|
||||
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]
|
||||
},
|
||||
|
||||
pageTitle: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.updateMenu()
|
||||
},
|
||||
mounted(){
|
||||
this.mainInfoHeight = (window.innerHeight-285)+"px";
|
||||
},
|
||||
methods: {
|
||||
onOpenChange (openKeys) {
|
||||
this.openKeys = openKeys
|
||||
},
|
||||
updateMenu () {
|
||||
let routes = this.$route.matched.concat()
|
||||
this.defaultSelectedKeys = [ routes.pop().path ]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-settings-info-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&.mobile {
|
||||
display: block;
|
||||
|
||||
.account-settings-info-left {
|
||||
border-right: unset;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.account-settings-info-right {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-settings-info-left {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
width: 224px;
|
||||
}
|
||||
|
||||
.account-settings-info-right {
|
||||
flex: 1 1;
|
||||
padding: 8px 40px;
|
||||
|
||||
.account-settings-info-title {
|
||||
color: rgba(0,0,0,.85);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.account-settings-info-view {
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<a-list
|
||||
itemLayout="horizontal"
|
||||
:dataSource="data"
|
||||
>
|
||||
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
ant-design-vue-jeecg/src/views/account/settings/Security.vue
Normal file
41
ant-design-vue-jeecg/src/views/account/settings/Security.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<a-list
|
||||
itemLayout="horizontal"
|
||||
:dataSource="data"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||
<a-list-item-meta>
|
||||
<a slot="title">{{ item.title }}</a>
|
||||
<span slot="description">
|
||||
<span class="security-list-description">{{ item.description }}</span>
|
||||
<span v-if="item.value"> : </span>
|
||||
<span class="security-list-value">{{ item.value }}</span>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
<template v-if="item.actions">
|
||||
<a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
|
||||
</template>
|
||||
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</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'); } } },
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
269
ant-design-vue-jeecg/src/views/dashboard/Analysis.vue
Normal file
269
ant-design-vue-jeecg/src/views/dashboard/Analysis.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<a-row :gutter="24">
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="总销售额" total="￥126,560">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<span slot="term">周同比</span>
|
||||
12%
|
||||
</trend>
|
||||
<trend flag="down">
|
||||
<span slot="term">日同比</span>
|
||||
11%
|
||||
</trend>
|
||||
</div>
|
||||
<template slot="footer">日均销售额<span>￥ 234.56</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-area />
|
||||
</div>
|
||||
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-bar :height="40" />
|
||||
</div>
|
||||
<template slot="footer">转化率 <span>60%</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="运营活动效果" total="78%">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<trend flag="down" style="margin-right: 16px;">
|
||||
<span slot="term">同周比</span>
|
||||
12%
|
||||
</trend>
|
||||
<trend flag="up">
|
||||
<span slot="term">日环比</span>
|
||||
80%
|
||||
</trend>
|
||||
</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
|
||||
<div class="salesCard">
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||
<div class="extra-item">
|
||||
<a>今日</a>
|
||||
<a>本周</a>
|
||||
<a>本月</a>
|
||||
<a>本年</a>
|
||||
</div>
|
||||
<a-range-picker :style="{width: '256px'}" />
|
||||
</div>
|
||||
<a-tab-pane loading="true" tab="销售额" key="1">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar title="销售额排行" :dataSource="barData"/>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<rank-list title="门店销售排行榜" :list="rankList"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="访问量" key="2">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar title="销售额趋势" :dataSource="barData"/>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<rank-list title="门店销售排行榜" :list="rankList"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-spin class='circle-cust'>
|
||||
<a-icon slot="indicator" type="environment" style="font-size: 24px" />
|
||||
</a-spin>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-spin class='circle-cust'>
|
||||
<a-icon slot="indicator" type="team" style="font-size: 24px" />
|
||||
</a-spin>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-spin class='circle-cust'>
|
||||
<a-icon slot="indicator" type="rise" style="font-size: 24px" />
|
||||
</a-spin>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</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 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'
|
||||
|
||||
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: "Analysis",
|
||||
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){
|
||||
console.log("aaaaaa",res.result)
|
||||
this.visitInfo = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.circle-cust{
|
||||
position: relative;
|
||||
top: 28px;
|
||||
left: -100%;
|
||||
}
|
||||
.extra-wrapper {
|
||||
line-height: 55px;
|
||||
padding-right: 24px;
|
||||
|
||||
.extra-item {
|
||||
display: inline-block;
|
||||
margin-right: 24px;
|
||||
|
||||
a {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页访问量统计 */
|
||||
.head-info {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding: 0 32px 0 0;
|
||||
min-width: 125px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
font-size: .95rem;
|
||||
line-height: 42px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p {
|
||||
line-height: 42px;
|
||||
margin: 0;
|
||||
a {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
ant-design-vue-jeecg/src/views/dashboard/Monitor.vue
Normal file
15
ant-design-vue-jeecg/src/views/dashboard/Monitor.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
Monitor
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Monitor"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
360
ant-design-vue-jeecg/src/views/dashboard/Workplace.vue
Normal file
360
ant-design-vue-jeecg/src/views/dashboard/Workplace.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<page-layout :avatar="avatar">
|
||||
<div slot="headerContent">
|
||||
<div class="title">{{ timeFix }}，{{ nickname() }}<span class="welcome-text">，{{ welcome() }}</span></div>
|
||||
<div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>
|
||||
</div>
|
||||
<div slot="extra">
|
||||
<a-row class="more-info">
|
||||
<a-col :span="8">
|
||||
<head-info title="项目数" content="56" :center="false" :bordered="false"/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<head-info title="团队排名" content="8/24" :center="false" :bordered="false"/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<head-info title="项目访问" content="2,223" :center="false" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
class="project-list"
|
||||
:loading="loading"
|
||||
style="margin-bottom: 24px;"
|
||||
:bordered="false"
|
||||
title="进行中的项目"
|
||||
:body-style="{ padding: 0 }">
|
||||
<a slot="extra">全部项目</a>
|
||||
<div>
|
||||
<a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects">
|
||||
<a-card :bordered="false" :body-style="{ padding: 0 }">
|
||||
<a-card-meta>
|
||||
<div slot="title" class="card-title">
|
||||
<a-avatar size="small" :src="item.cover"/>
|
||||
<a>{{ item.title }}</a>
|
||||
</div>
|
||||
<div slot="description" class="card-description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
</a-card-meta>
|
||||
<div class="project-item">
|
||||
<a href="/#/">科学搬砖组</a>
|
||||
<span class="datetime">9小时前</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-card-grid>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card :loading="loading" title="动态" :bordered="false">
|
||||
<a-list>
|
||||
<a-list-item :key="index" v-for="(item, index) in activities">
|
||||
<a-list-item-meta>
|
||||
<a-avatar slot="avatar" :src="item.user.avatar" />
|
||||
<div slot="title">
|
||||
<span>{{ item.user.nickname }}</span>
|
||||
在 <a href="#">{{ item.project.name }}</a>
|
||||
<span>{{ item.project.action }}</span>
|
||||
<a href="#">{{ item.project.event }}</a>
|
||||
</div>
|
||||
<div slot="description">{{ item.time }}</div>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
style="padding: 0 12px"
|
||||
:xl="8"
|
||||
:lg="24"
|
||||
:md="24"
|
||||
:sm="24"
|
||||
:xs="24">
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
<a>操作三</a>
|
||||
<a>操作四</a>
|
||||
<a>操作五</a>
|
||||
<a>操作六</a>
|
||||
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false" :body-style="{ padding: 0 }">
|
||||
<div style="min-height: 400px;">
|
||||
<!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" -->
|
||||
<radar :data="radarData" />
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :loading="loading" title="团队" :bordered="false">
|
||||
<div class="members">
|
||||
<a-row>
|
||||
<a-col :span="12" v-for="(item, index) in teams" :key="index">
|
||||
<a>
|
||||
<a-avatar size="small" :src="item.avatar" />
|
||||
<span class="member">{{ item.name }}</span>
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 } from "@/api/manage"
|
||||
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
export default {
|
||||
name: "Workplace",
|
||||
components: {
|
||||
PageLayout,
|
||||
HeadInfo,
|
||||
Radar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeFix: timeFix(),
|
||||
avatar: '',
|
||||
user: {},
|
||||
|
||||
projects: [],
|
||||
loading: true,
|
||||
radarLoading: true,
|
||||
activities: [],
|
||||
teams: [],
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
},
|
||||
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 = window._CONFIG['imgDomainURL'] +"/"+ 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('/api/list/search/projects')
|
||||
.then(res => {
|
||||
this.projects = res.result && res.result.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
getActivity() {
|
||||
this.$http.get('/api/workplace/activity')
|
||||
.then(res => {
|
||||
this.activities = res.result
|
||||
})
|
||||
},
|
||||
getTeams() {
|
||||
this.$http.get('/api/workplace/teams')
|
||||
.then(res => {
|
||||
this.teams = res.result
|
||||
})
|
||||
},
|
||||
initRadar() {
|
||||
this.radarLoading = true
|
||||
|
||||
this.$http.get('/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="scss" scoped>
|
||||
.project-list {
|
||||
|
||||
.card-title {
|
||||
font-size: 0;
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-left: 12px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: inline-block;
|
||||
flex: 1 1 0;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
flex: 0 0 auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.item-group {
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 13px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
.member {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
line-height: 24px;
|
||||
max-width: 100px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
|
||||
.project-list {
|
||||
|
||||
.project-card-grid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.more-info {
|
||||
border: 0;
|
||||
padding-top: 16px;
|
||||
margin: 16px 0 16px;
|
||||
}
|
||||
|
||||
.headerContent .title .welcome-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
17
ant-design-vue-jeecg/src/views/exception/403.vue
Normal file
17
ant-design-vue-jeecg/src/views/exception/403.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<exception-page type="403" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
17
ant-design-vue-jeecg/src/views/exception/404.vue
Normal file
17
ant-design-vue-jeecg/src/views/exception/404.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<exception-page type="404" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
17
ant-design-vue-jeecg/src/views/exception/500.vue
Normal file
17
ant-design-vue-jeecg/src/views/exception/500.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<exception-page type="500" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
88
ant-design-vue-jeecg/src/views/exception/ExceptionPage.vue
Normal file
88
ant-design-vue-jeecg/src/views/exception/ExceptionPage.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="exception">
|
||||
<div class="img">
|
||||
<img :src="config[type].img"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>{{ config[type].title }}</h1>
|
||||
<div class="desc">{{ config[type].desc }}</div>
|
||||
<div class="action">
|
||||
<a-button type="primary" @click="handleToHome">返回首页</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exception {
|
||||
min-height: 500px;
|
||||
height: 80%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: 150px;
|
||||
.img {
|
||||
display: inline-block;
|
||||
padding-right: 52px;
|
||||
zoom: 1;
|
||||
img {
|
||||
height: 360px;
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
h1 {
|
||||
color: #434e59;
|
||||
font-size: 72px;
|
||||
font-weight: 600;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.desc {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.exception {
|
||||
margin-top: 30px;
|
||||
.img {
|
||||
padding-right: unset;
|
||||
|
||||
img {
|
||||
height: 40%;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
ant-design-vue-jeecg/src/views/exception/type.js
Normal file
19
ant-design-vue-jeecg/src/views/exception/type.js
Normal file
@ -0,0 +1,19 @@
|
||||
const types = {
|
||||
403: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
|
||||
title: '403',
|
||||
desc: '抱歉，你无权访问该页面'
|
||||
},
|
||||
404: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
|
||||
title: '404',
|
||||
desc: '抱歉，你访问的页面不存在或仍在开发中'
|
||||
},
|
||||
500: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
|
||||
title: '500',
|
||||
desc: '抱歉，服务器出错了'
|
||||
}
|
||||
}
|
||||
|
||||
export default types
|
||||
138
ant-design-vue-jeecg/src/views/form/BasicForm.vue
Normal file
138
ant-design-vue-jeecg/src/views/form/BasicForm.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
||||
<a-form @submit="handleSubmit" :form="form">
|
||||
<a-form-item
|
||||
label="标题"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{rules: [{ required: true, message: '请输入标题' }]}
|
||||
]"
|
||||
name="name"
|
||||
placeholder="给目标起个名字" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="起止日期"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-range-picker
|
||||
name="buildTime"
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'buildTime',
|
||||
{rules: [{ required: true, message: '请选择起止日期' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标描述"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入你阶段性工作目标"
|
||||
v-decorator="[
|
||||
'description',
|
||||
{rules: [{ required: true, message: '请输入目标描述' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="衡量标准"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-textarea
|
||||
rows="4"
|
||||
placeholder="请输入衡量标准"
|
||||
v-decorator="[
|
||||
'type',
|
||||
{rules: [{ required: true, message: '请输入衡量标准' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="客户"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
||||
<a-input
|
||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
|
||||
v-decorator="[
|
||||
'customer',
|
||||
{rules: [{ required: true, message: '请描述你服务的客户' }]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="邀评人"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="权重"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
>
|
||||
<a-input-number :min="0" :max="100" />
|
||||
<span> %</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="目标公开"
|
||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
||||
:required="false"
|
||||
help="客户、邀评人默认被分享"
|
||||
>
|
||||
<a-radio-group v-model="value">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form-item>
|
||||
<a-select mode="multiple" v-if="value === 2">
|
||||
<a-select-option value="4">同事一</a-select-option>
|
||||
<a-select-option value="5">同事二</a-select-option>
|
||||
<a-select-option value="6">同事三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapperCol="{ span: 24 }"
|
||||
style="text-align: center"
|
||||
>
|
||||
<a-button htmlType="submit" type="primary">提交</a-button>
|
||||
<a-button style="margin-left: 8px">保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseForm',
|
||||
data () {
|
||||
return {
|
||||
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
|
||||
value: 1,
|
||||
|
||||
// form
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card class="card" title="仓库管理" :bordered="false">
|
||||
<repository-form ref="repository" :showSubmit="false" />
|
||||
</a-card>
|
||||
<a-card class="card" title="任务管理" :bordered="false">
|
||||
<task-form ref="task" :showSubmit="false" />
|
||||
</a-card>
|
||||
|
||||
<!-- table -->
|
||||
<a-card>
|
||||
<form :autoFormCreate="(form) => this.form = form">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="data"
|
||||
:pagination="false"
|
||||
>
|
||||
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
|
||||
<a-input
|
||||
:key="col"
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
:placeholder="columns[i].title"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record, index">
|
||||
<template v-if="record.editable">
|
||||
<span v-if="record.isNew">
|
||||
<a @click="saveRow(record.key)">添加</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="saveRow(record.key)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="cancel(record.key)">取消</a>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
<a @click="toggle(record.key)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
|
||||
</form>
|
||||
</a-card>
|
||||
|
||||
<!-- fixed footer toolbar -->
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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,
|
||||
|
||||
// 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
|
||||
}
|
||||
},
|
||||
|
||||
// 最终全页面提交
|
||||
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="scss" scoped>
|
||||
.card{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item label="仓库名">
|
||||
<a-input
|
||||
placeholder="请输入仓库名称"
|
||||
v-decorator="[
|
||||
'repository.name',
|
||||
{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库域名">
|
||||
<a-input
|
||||
addonBefore="http://"
|
||||
addonAfter=".com"
|
||||
placeholder="请输入"
|
||||
v-decorator="[
|
||||
'repository.domain',
|
||||
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库管理员">
|
||||
<a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
|
||||
<a-select-option value="王同学">王同学</a-select-option>
|
||||
<a-select-option value="李同学">李同学</a-select-option>
|
||||
<a-select-option value="黄同学">黄同学</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="审批人">
|
||||
<a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
|
||||
<a-select-option value="王晓丽">王晓丽</a-select-option>
|
||||
<a-select-option value="李军">李军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="生效日期">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'repository.effectiveDate',
|
||||
{rules: [{ required: true, message: '请选择生效日期'}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="仓库类型">
|
||||
<a-select
|
||||
placeholder="请选择仓库类型"
|
||||
v-decorator="[
|
||||
'repository.type',
|
||||
{rules: [{ required: true, message: '请选择仓库类型'}]}
|
||||
]" >
|
||||
<a-select-option value="公开">公开</a-select-option>
|
||||
<a-select-option value="私密">私密</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</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- 开头')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
107
ant-design-vue-jeecg/src/views/form/advancedForm/TaskForm.vue
Normal file
107
ant-design-vue-jeecg/src/views/form/advancedForm/TaskForm.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<a-form @submit="handleSubmit" :form="form" class="form">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="任务名">
|
||||
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="任务描述">
|
||||
<a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="执行人">
|
||||
<a-select
|
||||
placeholder="请选择执行人"
|
||||
v-decorator="[
|
||||
'task.executor',
|
||||
{rules: [{ required: true, message: '请选择执行人'}]}
|
||||
]" >
|
||||
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
|
||||
<a-select-option value="李大刀">李大刀</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24">
|
||||
<a-form-item
|
||||
label="责任人">
|
||||
<a-select
|
||||
placeholder="请选择责任人"
|
||||
v-decorator="[
|
||||
'task.manager',
|
||||
{rules: [{ required: true, message: '请选择责任人'}]}
|
||||
]" >
|
||||
<a-select-option value="王伟">王伟</a-select-option>
|
||||
<a-select-option value="李红军">李红军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
|
||||
<a-form-item
|
||||
label="提醒时间">
|
||||
<a-time-picker
|
||||
style="width: 100%"
|
||||
v-decorator="[
|
||||
'task.time',
|
||||
{rules: [{ required: true, message: '请选择提醒时间'}]}
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
|
||||
<a-form-item
|
||||
label="任务类型">
|
||||
<a-select
|
||||
placeholder="请选择任务类型"
|
||||
v-decorator="[ 'task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
|
||||
<a-select-option value="定时执行">定时执行</a-select-option>
|
||||
<a-select-option value="周期执行">周期执行</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item v-if="showSubmit">
|
||||
<a-button htmlType="submit" >Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</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
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
60
ant-design-vue-jeecg/src/views/form/stepForm/Step1.vue
Normal file
60
ant-design-vue-jeecg/src/views/form/stepForm/Step1.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-select value="1" placeholder="ant-design@alipay.com">
|
||||
<a-select-option value="1">ant-design@alipay.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
|
||||
<a-select defaultValue="alipay" style="width: 100px">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wexinpay">微信</a-select-option>
|
||||
</a-select>
|
||||
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input value="Alex" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
>
|
||||
<a-input prefix="￥" value="5000" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step1",
|
||||
methods: {
|
||||
nextStep () {
|
||||
this.$emit('nextStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
82
ant-design-vue-jeecg/src/views/form/stepForm/Step2.vue
Normal file
82
ant-design-vue-jeecg/src/views/form/stepForm/Step2.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-alert
|
||||
:closable="true"
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
style="margin-bottom: 24px;"
|
||||
/>
|
||||
<a-form-item
|
||||
label="付款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
ant-design@alipay.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款账户"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
test@example.com
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="收款人姓名"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
Alex
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="转账金额"
|
||||
:labelCol="{span: 5}"
|
||||
:wrapperCol="{span: 19}"
|
||||
class="stepFormText"
|
||||
>
|
||||
￥ 5,000.00
|
||||
</a-form-item>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
|
||||
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Step2",
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextStep () {
|
||||
let that = this
|
||||
that.loading = true
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep')
|
||||
}, 1500)
|
||||
},
|
||||
prevStep () {
|
||||
this.$emit('prevStep')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
69
ant-design-vue-jeecg/src/views/form/stepForm/Step3.vue
Normal file
69
ant-design-vue-jeecg/src/views/form/stepForm/Step3.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form style="margin: 40px auto 0;">
|
||||
<result title="操作成功" :is-success="true" description="预计两小时内到账">
|
||||
<div class="information">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">付款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款账户：</a-col>
|
||||
<a-col :sm="16" :xs="24">test@example.com</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">收款人姓名：</a-col>
|
||||
<a-col :sm="16" :xs="24">辉夜</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">转账金额：</a-col>
|
||||
<a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div slot="action">
|
||||
<a-button type="primary" @click="finish">再转一笔</a-button>
|
||||
<a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
|
||||
</div>
|
||||
</result>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from '../../result/Result'
|
||||
|
||||
export default {
|
||||
name: "Step3",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$emit('finish')
|
||||
},
|
||||
toOrderList () {
|
||||
this.$router.push('/list/query-list')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.information {
|
||||
line-height: 22px;
|
||||
|
||||
.ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-family: "Helvetica Neue",sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
}
|
||||
</style>
|
||||
62
ant-design-vue-jeecg/src/views/form/stepForm/StepForm.vue
Normal file
62
ant-design-vue-jeecg/src/views/form/stepForm/StepForm.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-steps class="steps" :current="currentTab">
|
||||
<a-step title="填写转账信息" />
|
||||
<a-step title="确认转账信息" />
|
||||
<a-step title="完成" />
|
||||
</a-steps>
|
||||
<div class="content">
|
||||
<step1 v-if="currentTab === 0" @nextStep="nextStep"/>
|
||||
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
|
||||
<step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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,
|
||||
|
||||
// form
|
||||
form: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// handler
|
||||
nextStep () {
|
||||
if (this.currentTab < 2) {
|
||||
this.currentTab += 1
|
||||
}
|
||||
},
|
||||
prevStep () {
|
||||
if (this.currentTab > 0) {
|
||||
this.currentTab -= 1
|
||||
}
|
||||
},
|
||||
finish () {
|
||||
this.currentTab = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.steps {
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
119
ant-design-vue-jeecg/src/views/jeecg/ImagPreview.vue
Normal file
119
ant-design-vue-jeecg/src/views/jeecg/ImagPreview.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组一</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[0].key">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<p>
|
||||
<a-divider orientation="left">组二</a-divider>
|
||||
</p>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="12">
|
||||
<template>
|
||||
<div v-for="(fileDetail,index) in dataSource[1].fileDetails" :key="index">
|
||||
<div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
||||
<div
|
||||
style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[1].key">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
<p></p>
|
||||
</a-col>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
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://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24"
|
||||
}
|
||||
]
|
||||
},{
|
||||
key:1,
|
||||
fileDetails:[
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
imgUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
url: {
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operator {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||||
background-color: #1890FF !important;
|
||||
}
|
||||
</style>
|
||||
75
ant-design-vue-jeecg/src/views/jeecg/ImgDragSort.vue
Normal file
75
ant-design-vue-jeecg/src/views/jeecg/ImgDragSort.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<draggable @end="end" :options="{animation: 300}" v-model="dataSource" style="display: inline-block">
|
||||
<template v-for="(data,index) in dataSource">
|
||||
<div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
|
||||
<div style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
|
||||
<img style="width: 100%;" :src="data.filePath" preview="index">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-button @click="sureChange" type="primary" style="margin-top: 115px">确定</a-button>
|
||||
</draggable>
|
||||
<br/>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<p>拖拽前json数据：</p>
|
||||
<textarea rows="25" style="width: 780px">{{ oldDateSource }}</textarea>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<p>拖拽后json数据：</p>
|
||||
<textarea rows="25" style="width: 780px">{{ newDateSource }}</textarea>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片拖拽排序',
|
||||
spinning: false,
|
||||
//数据集
|
||||
dataSource: [
|
||||
{id:'000',sort: 0,filePath: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg'},
|
||||
{id:'111',sort: 1,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'},
|
||||
{id:'222',sort: 2,filePath: 'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24'},
|
||||
{id:'333',sort: 3,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg'},
|
||||
{id:'444',sort: 4,filePath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
147
ant-design-vue-jeecg/src/views/jeecg/ImgTurnPage.vue
Normal file
147
ant-design-vue-jeecg/src/views/jeecg/ImgTurnPage.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<a-card title="树形结构图片翻页查看" style="min-width: 800px;overflow-x:auto ">
|
||||
<a-row>
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="5">
|
||||
<a-tree
|
||||
showLine
|
||||
:treeData="treeData"
|
||||
:expandedKeys="[expandedKeys[0]]"
|
||||
:selectedKeys="selectedKeys"
|
||||
:style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
|
||||
@expand="onExpand"
|
||||
@select="this.onSelect"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="19">
|
||||
<a-row style="margin-top: 10px">
|
||||
<a-col :span="24" style="padding-left: 2%;margin-bottom: 10px">
|
||||
<a-button @click="prev" type="primary"><a-icon type="left" />上一页</a-button>
|
||||
<a-button @click="next" type="primary" style="margin-left: 8px">下一页<a-icon type="right" /></a-button>
|
||||
<span style="margin-left: 15%;font-weight: bolder">{{ navName }}</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="padding-left: 2%;">
|
||||
<img :src="imgUrl" preview>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'ImgTurnPage',
|
||||
components:{
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '图片翻页',
|
||||
//数据集
|
||||
treeData: [{
|
||||
title: '第一页',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-0-0',
|
||||
imgUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-0-1',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第二页',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-1-0',
|
||||
imgUrl:'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24'
|
||||
}, {
|
||||
title: '2页',
|
||||
key: '0-1-1',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=889120611,3801177793&fm=27&gp=0.jpg'
|
||||
}]
|
||||
},{
|
||||
title: '第三页',
|
||||
key: '0-2',
|
||||
children: [{
|
||||
title: '1页',
|
||||
key: '0-2-0',
|
||||
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2445468140,2491956848&fm=27&gp=0.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]);
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
93
ant-design-vue-jeecg/src/views/jeecg/InterfaceTest.vue
Normal file
93
ant-design-vue-jeecg/src/views/jeecg/InterfaceTest.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :md="2" :sm="4">
|
||||
<a-select defaultValue="POST" style="width: 90px" @change="handleChange" size="large">
|
||||
<a-select-option value="POST">POST</a-select-option>
|
||||
<!--<a-select-option value="GET">GET</a-select-option>-->
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :md="22" :sm="20">
|
||||
<a-input-search
|
||||
placeholder="input send url"
|
||||
v-model="url"
|
||||
@search="onSearch"
|
||||
enterButton="Send"
|
||||
size="large" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-tabs defaultActiveKey="2">
|
||||
<a-tab-pane tab="params" key="2">
|
||||
<textarea style="width:100%;font-size: 16px;font-weight:500" :rows="13" @input="changeVal">
|
||||
</textarea>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="response" key="1">
|
||||
<textarea style="width:100%;font-size: 16px;font-weight:500" :rows="10" v-html="resultJson" readonly>
|
||||
</textarea>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import { postAction,getAction } from '@/api/manage'
|
||||
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) {
|
||||
let that = this
|
||||
this.resultJson = {};
|
||||
if("POST"===this.requestMethod.toUpperCase()){
|
||||
postAction(value,this.paramJson).then((res)=>{
|
||||
console.log(res)
|
||||
this.resultJson = res
|
||||
}).catch((err) => {
|
||||
that.$message.error("请求异常："+err)
|
||||
})
|
||||
}else {
|
||||
getAction(value,this.paramJson).then((res)=>{
|
||||
console.log(res)
|
||||
this.resultJson = res;
|
||||
}).catch((err) => {
|
||||
that.$message.error("请求异常："+err)
|
||||
})
|
||||
}
|
||||
},
|
||||
changeVal(e){
|
||||
try {
|
||||
let json = e.target.value;
|
||||
json = json.replace(/\n/g,"");
|
||||
json = json.replace(/\s*/g,"");
|
||||
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}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
382
ant-design-vue-jeecg/src/views/jeecg/JeecgDemoList.vue
Normal file
382
ant-design-vue-jeecg/src/views/jeecg/JeecgDemoList.vue
Normal file
@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="名称">
|
||||
<a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="年龄">
|
||||
<a-input placeholder="请输入名称查询" v-model="queryParam.age"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="字典下拉">
|
||||
<j-dict-select-tag v-model="queryParam.sex" placeholder="请选择用户名称" dictCode="sex"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="字典表下拉">
|
||||
<j-dict-select-tag v-model="queryParam.realname" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
<a-col :md="6" :sm="24">
|
||||
|
||||
<template v-if="superQueryFlag">
|
||||
<a-tooltip title="已有高级查询条件生效!">
|
||||
<button :disabled="false" class="ant-btn ant-btn-primary" @click="superQuery">
|
||||
<a-icon type="appstore" theme="twoTone" spin="true"></a-icon>
|
||||
<span>高级查询</span>
|
||||
</button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-button v-else type="primary" @click="superQuery" icon="filter">高级查询</a-button>
|
||||
|
||||
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" style="margin-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="plus" @click="jump">创建单据</a-button>
|
||||
<a-button type="primary" icon="plus" @click="onetomany">一对多</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('demo')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
|
||||
selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
<span style="float:right;">
|
||||
<a @click="loadData()"><a-icon type="sync" />刷新</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popover title="自定义列" trigger="click" placement="leftBottom">
|
||||
<template slot="content">
|
||||
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
|
||||
<a-row>
|
||||
<template v-for="(item,index) in defColumns">
|
||||
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
|
||||
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
|
||||
</template>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
<a><a-icon type="setting" />自定义列</a>
|
||||
</a-popover>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<div slot="filterDropdown">
|
||||
<a-card>
|
||||
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
|
||||
<a-row>
|
||||
<template v-for="(item,index) in defColumns">
|
||||
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
|
||||
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
|
||||
</template>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-card>
|
||||
</div>
|
||||
<a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color: '#108ee9' }" />
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeecgDemo-modal ref="modalForm" @ok="modalFormOk"></jeecgDemo-modal>
|
||||
|
||||
<!-- 一对多表单区域 -->
|
||||
<JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal>
|
||||
|
||||
<!-- 高级查询区域 -->
|
||||
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeecgDemoModal from './modules/JeecgDemoModal'
|
||||
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
|
||||
import JeecgDemoTabsModal from './modules/JeecgDemoTabsModal'
|
||||
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import Vue from 'vue'
|
||||
|
||||
//高级查询modal需要参数
|
||||
const superQueryFieldList=[{
|
||||
type:"date",
|
||||
value:"birthday",
|
||||
text:"生日"
|
||||
},{
|
||||
type:"string",
|
||||
value:"name",
|
||||
text:"用户名"
|
||||
},{
|
||||
type:"int",
|
||||
value:"age",
|
||||
text:"年龄"
|
||||
}]
|
||||
export default {
|
||||
name: "JeecgDemoList",
|
||||
mixins:[JeecgListMixin],
|
||||
components: {
|
||||
JeecgDemoModal,
|
||||
JSuperQuery,
|
||||
JeecgDemoTabsModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '用户管理页面',
|
||||
//字典数组缓存
|
||||
sexDictOptions: [],
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeecgDemo/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 filterDictText(this.sexDictOptions, 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/jeecgDemo/list",
|
||||
delete: "/test/jeecgDemo/delete",
|
||||
deleteBatch: "/test/jeecgDemo/deleteBatch",
|
||||
exportXlsUrl: "/test/jeecgDemo/exportXls"
|
||||
},
|
||||
fieldList:superQueryFieldList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDictConfig() {
|
||||
console.log("--我才是真的方法!--")
|
||||
//初始化字典 - 性别
|
||||
initDictOptions('sex').then((res) => {
|
||||
if (res.success) {
|
||||
this.sexDictOptions = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
onetomany: function () {
|
||||
this.$refs.jeecgDemoTabsModal.add();
|
||||
this.$refs.jeecgDemoTabsModal.title = "编辑";
|
||||
},
|
||||
//跳转单据页面
|
||||
jump() {
|
||||
this.$router.push({path: '/jeecg/helloworld'})
|
||||
},
|
||||
//列设置更改事件
|
||||
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";
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initColumns();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :borderd="false">
|
||||
|
||||
|
||||
<a-button @click="handleTableCheck" type="primary">表单验证</a-button>
|
||||
<span style="padding-left:8px;"></span>
|
||||
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableGet" type="primary">获取值</a-button>
|
||||
</a-tooltip>
|
||||
<span style="padding-left:8px;"></span>
|
||||
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
||||
<a-button @click="handleTableSet" type="primary">设置值</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"
|
||||
style="margin-top: 8px;"
|
||||
@selectRowChange="handleSelectRowChange">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<a @click="handleDelete(props)">{{ props.text }}</a>
|
||||
</template>
|
||||
|
||||
</j-editable-table>
|
||||
|
||||
|
||||
</a-card>
|
||||
<br>
|
||||
<a-card title="只读列表">
|
||||
<j-editable-table
|
||||
:columns="columns1"
|
||||
:dataSource="dataSource1"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:maxHeight="200"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import JEditableTable from '@/components/jeecg/JEditableTable'
|
||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
||||
import { randomUUID, randomNumber } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'JeecgEditableTableExample',
|
||||
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}必须以字母开头，可包含数字、下划线、横杠'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文件域',
|
||||
key: 'upload',
|
||||
type: FormTypes.upload,
|
||||
// width: '19%',
|
||||
width: '300px',
|
||||
placeholder: '点击上传',
|
||||
token: true,
|
||||
responseName: 'message',
|
||||
action: window._CONFIG['domianURL'] + '/sys/common/upload'
|
||||
},
|
||||
{
|
||||
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: '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}',
|
||||
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: 'isNull',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.checkbox,
|
||||
customValue: ['Y', 'N'], // true ,false
|
||||
defaultChecked: false
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// width: '8%',
|
||||
width: '100px',
|
||||
type: FormTypes.slot,
|
||||
slotName: 'action',
|
||||
defaultValue: '删除'
|
||||
}
|
||||
|
||||
],
|
||||
dataSource: [],
|
||||
selectedRowIds: [],
|
||||
// table2
|
||||
columns1: [
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
dataSource1: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.randomData(23, false)
|
||||
this.dataSource1 = [
|
||||
{ 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' }
|
||||
]
|
||||
},
|
||||
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
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
192
ant-design-vue-jeecg/src/views/jeecg/JeecgOrderMainList.vue
Normal file
192
ant-design-vue-jeecg/src/views/jeecg/JeecgOrderMainList.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('一对多示例')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeecgOrderMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeecgOrderMainModal from './modules/JeecgOrderMainModal'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderMainList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderMainModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
importExcelUrl:`${window._CONFIG['domianURL']}/test/jeecgOrderMain/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' },
|
||||
}
|
||||
],
|
||||
|
||||
url: {
|
||||
list: "/test/jeecgOrderMain/list",
|
||||
delete: "/test/jeecgOrderMain/delete",
|
||||
deleteBatch: "/test/jeecgOrderMain/deleteBatch",
|
||||
exportXlsUrl: "/test/jeecgOrderMain/exportXls",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
.ant-card-body .table-operator{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.ant-table-tbody .ant-table-row td{
|
||||
padding-top:15px;
|
||||
padding-bottom:15px;
|
||||
}
|
||||
.anty-row-operator button{margin: 0 5px}
|
||||
.ant-btn-danger{background-color: #ffffff}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i>
|
||||
<span>已选择</span>
|
||||
<a style="font-weight: 600">
|
||||
{{ selectedRowKeys.length }}
|
||||
</a>
|
||||
<span>项</span>
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeecg-order-modal-for-j-editable-table ref="modalForm" @ok="modalFormOk"/>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import JeecgOrderModalForJEditableTable from './modules/JeecgOrderModalForJEditableTable'
|
||||
|
||||
export default {
|
||||
name: 'JeecgOrderMainListForJEditableTable',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderModalForJEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
// 请求参数
|
||||
url: {
|
||||
list: '/test/jeecgOrderMain/list',
|
||||
delete: '/test/jeecgOrderMain/delete',
|
||||
deleteBatch: '/test/jeecgOrderMain/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' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
initDictConfig() {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
122
ant-design-vue-jeecg/src/views/jeecg/JeecgPdfView.vue
Normal file
122
ant-design-vue-jeecg/src/views/jeecg/JeecgPdfView.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 左侧文件树 -->
|
||||
<a-col :span="4" class="clName">
|
||||
<a-tree
|
||||
:treeData="treeData"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
@select="this.onSelect"
|
||||
style="height: 500px;overflow-y: auto;"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<!-- 中间面板 -->
|
||||
<a-col :span="2"/>
|
||||
<!--右侧缩略图-->
|
||||
<a-col :span="18">
|
||||
<a-spin tip="Loading..." :spinning="spinning">
|
||||
<div v-for="(file, key) in dataSource" :key="key">
|
||||
<a-row>
|
||||
<a-col :span="24"><p><a-divider orientation="left">{{ file.fileName }}</a-divider></p></a-col>
|
||||
<!-- 预览区域 -->
|
||||
<a-col :span="24">
|
||||
<template v-if="file.filePdfPath">
|
||||
<div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
||||
<div style="width: 100%;height: 100%;position: relative;padding: 8px;" @click="pdfPreview(file.title)">
|
||||
<img style="width: 100%;" src="~@/assets/pdf4.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
(暂无材料，点击右侧"选择文件"或"扫描上传"上传文件)
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-col>
|
||||
<pdf-preview-modal ref="pdfmodal"></pdf-preview-modal >
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<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": "实例"
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: "JeecgPdfView",
|
||||
components:{
|
||||
PdfPreviewModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: 'PDF预览页面',
|
||||
// 文件类型集
|
||||
treeData:[{
|
||||
title: '所有PDF电子档',
|
||||
key: '0-0',
|
||||
children: mockdata }],
|
||||
// 文件数据集
|
||||
dataSource: mockdata,
|
||||
allData:mockdata,
|
||||
// 上传文件集
|
||||
defaultExpandAll: true,
|
||||
// 加载中
|
||||
spinning:false,
|
||||
url: {
|
||||
pdfList: "/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);
|
||||
}
|
||||
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>
|
||||
80
ant-design-vue-jeecg/src/views/jeecg/JeecgTreeTable.vue
Normal file
80
ant-design-vue-jeecg/src/views/jeecg/JeecgTreeTable.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<j-tree-table
|
||||
:url="url"
|
||||
topValue="0"
|
||||
queryKey="id"
|
||||
:columns="columns"
|
||||
:tableProps="tableProps">
|
||||
|
||||
<template v-slot:action="props">
|
||||
<!-- 可使用的参数： -->
|
||||
<!-- props.text -->
|
||||
<!-- props.record -->
|
||||
<!-- props.index -->
|
||||
<a @click="()=>handleEdit(props.record)">编辑</a>
|
||||
</template>
|
||||
|
||||
</j-tree-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTreeTable from '@/components/jeecg/JTreeTable'
|
||||
|
||||
export default {
|
||||
name: 'JeecgTreeTable',
|
||||
components: { JTreeTable },
|
||||
data() {
|
||||
return {
|
||||
url: '/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
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit(record) {
|
||||
this.$info({
|
||||
width: 600,
|
||||
title: '编辑',
|
||||
content: '编辑ID：' + record.id+"；名称："+record.name,
|
||||
okText: '确定',
|
||||
maskClosable: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
166
ant-design-vue-jeecg/src/views/jeecg/PrintDemo.vue
Normal file
166
ant-design-vue-jeecg/src/views/jeecg/PrintDemo.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<a-card :bordered="false" :class="{'abcdefg':true}">
|
||||
<div class="no-print" style="text-align: right">
|
||||
<a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
|
||||
</div>
|
||||
<section ref="print" id="printContent" class="abcdefg">
|
||||
<div style="text-align: center">
|
||||
<p style="font-size: 24px;font-weight: 800">打印测试表单</p>
|
||||
</div>
|
||||
<!--签字-->
|
||||
<a-col :md="24" :sm="24">
|
||||
<div class="sign" style="text-align: left;height: inherit">
|
||||
<a-col :span="24">
|
||||
<span>
|
||||
打印人员:
|
||||
</span>
|
||||
<a-input style="width: 30%" v-model="printer"/>
|
||||
<span style="margin-left: 12.5%">打印日期:</span>
|
||||
<a-input style="width: 30%" v-model="printTime"/>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 20px">
|
||||
<span>打印内容:</span>
|
||||
<a-input style="width: 80%" v-model="printContent"/>
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 20px">
|
||||
<span>打印目的:</span>
|
||||
<a-input style="width: 80%" v-model="printReason"/>
|
||||
</a-col>
|
||||
<a-col style="margin-top: 20px" :span="24">
|
||||
<span>打印图片:</span>
|
||||
<br/>
|
||||
<a-upload
|
||||
action="/jsonplaceholder.typicode.com/posts/"
|
||||
listType="picture-card"
|
||||
:fileList="fileList"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange">
|
||||
<div v-if="fileList.length < 3">
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-col>
|
||||
</div>
|
||||
</a-col>
|
||||
</section>
|
||||
</a-card>
|
||||
<!--</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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ATextarea,
|
||||
ARow,
|
||||
ACol,
|
||||
},
|
||||
name: 'Printgzsld',
|
||||
props:{
|
||||
reBizCode:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
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",
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
.abcdefg .ant-card-body{
|
||||
margin-left: 0%;
|
||||
margin-right: 0%;
|
||||
margin-bottom: 1%;
|
||||
border:0px solid black;
|
||||
min-width: 800px;
|
||||
}
|
||||
.explain{
|
||||
text-align: left;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.explain .ant-input,.sign .ant-input{
|
||||
font-weight:bolder;
|
||||
text-align:center;
|
||||
border-left-width:0px!important;
|
||||
border-top-width:0px!important;;
|
||||
border-right-width:0px!important;;
|
||||
}
|
||||
.explain div{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
285
ant-design-vue-jeecg/src/views/jeecg/RowspanTable.vue
Normal file
285
ant-design-vue-jeecg/src/views/jeecg/RowspanTable.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- table区域-begin -->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="default"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:dataSource="dataSource">
|
||||
|
||||
</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;
|
||||
}
|
||||
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: '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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.ant-table-tbody .ant-table-row td{
|
||||
padding-top:15px;
|
||||
padding-bottom:15px;
|
||||
}
|
||||
.anty-row-operator button{margin: 0 5px}
|
||||
.ant-btn-danger{background-color: #ffffff}
|
||||
|
||||
.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>
|
||||
|
||||
417
ant-design-vue-jeecg/src/views/jeecg/SelectDemo.vue
Normal file
417
ant-design-vue-jeecg/src/views/jeecg/SelectDemo.vue
Normal file
@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="height:100%">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" :form="form">
|
||||
|
||||
|
||||
<!-- 字典下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="性别">
|
||||
<j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex"/>
|
||||
<!-- <j-dict-select-tag title="性别" dictCode="sex" disabled/>-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.sex}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 字典表下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="字典表下拉">
|
||||
<j-dict-select-tag v-model="formData.user" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.user}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 带条件字典表下拉 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="字典表下拉(带条件)">
|
||||
<j-dict-select-tag v-model="formData.user2" placeholder="请选择用户" dictCode="sys_user,realname,id,username!='admin' order by create_time"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中值：{{ formData.user2}}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 部门选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门">
|
||||
<j-select-depart v-decorator="['departId']" :trigger-change="true"></j-select-depart>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门ID(v-decorator):{{ getDepartIdValue() }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择部门">
|
||||
<j-select-depart v-model="departId"></j-select-depart>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的部门ID(v-model):{{ departId }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择用户">
|
||||
<j-select-user-by-dep v-model="userRealName"></j-select-user-by-dep>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ userRealName }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 用户选择控件 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="选择用户">
|
||||
<j-select-multi-user v-model="multiUser"></j-select-multi-user>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的用户(v-model):{{ multiUser }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCheckbox -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="多选组合">
|
||||
<j-checkbox
|
||||
v-model="jcheckbox.values"
|
||||
:options="jcheckbox.options"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选组合(v-model)：{{ jcheckbox.values }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JCodeEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="代码输入框" style="min-height: 120px">
|
||||
<j-code-editor
|
||||
language="javascript"
|
||||
v-model="jcodedditor.value"
|
||||
:fullScreen="true"
|
||||
style="min-height: 100px"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">代码输入框(v-model)：{{ jcodedditor.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JDate -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="日期选择框">
|
||||
<j-date v-model="jdate.value" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">日期选择框(v-model)：{{ jdate.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEditor -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="富文本编辑器" style="min-height: 300px">
|
||||
<j-editor v-model="jeditor.value"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">富文本编辑器(v-model)：{{ jeditor.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JEllipsis -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="过长剪切">
|
||||
<j-ellipsis :value="jellipsis.value" :length="30"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">过长剪切：{{ jellipsis.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JGraphicCode -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="验证码">
|
||||
<j-graphic-code @success="generateCode"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">验证码：{{ jgraphicCode.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSlider -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="滑块验证码">
|
||||
<j-slider @onSuccess="handleJSliderSuccess"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">滑块验证码验证通过：{{ jslider.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="多选下拉框">
|
||||
<j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSelectMultiple -->
|
||||
<a-row :gutter="24">
|
||||
<a-col>
|
||||
|
||||
<a-form-item label="最大化弹窗">
|
||||
<a-button @click="()=>modal.visible=true">最大化弹窗</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-modal
|
||||
:visible="modal.visible"
|
||||
:width="modal.width"
|
||||
:style="modal.style"
|
||||
@ok="()=>modal.visible=false"
|
||||
@cancel="()=>modal.visible=false">
|
||||
|
||||
<template slot="title">
|
||||
<div style="width: 100%;height:20px;padding-right:32px;">
|
||||
<div style="float: left;">{{ modal.title }}</div>
|
||||
<div style="float: right;">
|
||||
<a-button
|
||||
icon="fullscreen"
|
||||
style="width:56px;height:100%;border:0"
|
||||
@click="handleClickToggleFullScreen"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-for="(i,k) of 30">
|
||||
<p :key="k">这是主体内容，高度是自适应的</p>
|
||||
</template>
|
||||
|
||||
</a-modal>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- JSuperQuery 高级查询 -->
|
||||
<!-- JTreeSelect 树组件 -->
|
||||
<!-- JTreeTable 树列表 -->
|
||||
<!-- JUpload.上传组件 -->
|
||||
<!-- JImportModal 导入组件 -->
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="树字典">
|
||||
<j-tree-dict parentCode="B01" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12"></a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- VueCron -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="cron表达式">
|
||||
<a-input @click="openModal" placeholder="corn表达式" v-model="cron.label" readOnly >
|
||||
<a-icon slot="prefix" type="schedule" title="corn控件"/>
|
||||
</a-input>
|
||||
<VueCron ref="innerVueCron" :data="cron" @change="changeCron" ></VueCron>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
|
||||
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
||||
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
||||
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
||||
import JCheckbox from '@/components/jeecg/JCheckbox'
|
||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import JEditor from '@/components/jeecg/JEditor'
|
||||
import JEllipsis from '@/components/jeecg/JEllipsis'
|
||||
import JGraphicCode from '@/components/jeecg/JGraphicCode'
|
||||
import JSlider from '@/components/jeecg/JSlider'
|
||||
import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
|
||||
import JTreeDict from "../../components/jeecg/JTreeDict.vue";
|
||||
import VueCron from "./modules/VueCronModal.vue";
|
||||
export default {
|
||||
name: 'SelectDemo',
|
||||
components: {
|
||||
JTreeDict,
|
||||
JDictSelectTag,
|
||||
JSelectDepart,
|
||||
JSelectUserByDep,
|
||||
JSelectMultiUser,
|
||||
JCheckbox,
|
||||
JCodeEditor,
|
||||
JDate, JEditor, JEllipsis, JGraphicCode, JSlider, JSelectMultiple,
|
||||
VueCron
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectList: [],
|
||||
selectedDepUsers: '',
|
||||
formData:{},
|
||||
form: this.$form.createForm(this),
|
||||
departId: '4f1765520d6346f9bd9c79e2479e5b12,57197590443c44f083d42ae24ef26a2c',
|
||||
userRealName: '',
|
||||
multiUser: '',
|
||||
jcheckbox: {
|
||||
values: 'spring,jeecgboot',
|
||||
options: [
|
||||
{ label: 'Jeecg', value: 'jeecg' },
|
||||
{ label: 'Jeecg-Boot', value: 'jeecgboot' },
|
||||
{ label: 'Spring', value: 'spring', disabled: true },
|
||||
{ label: 'MyBaits', value: 'mybatis' }
|
||||
]
|
||||
},
|
||||
jcodedditor: {
|
||||
value: `function sayHi(word) {
|
||||
alert(word)
|
||||
}
|
||||
sayHi('hello, world!')`
|
||||
},
|
||||
jdate: {
|
||||
value: '2019-5-10 15:33:06'
|
||||
},
|
||||
jeditor: {
|
||||
value: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>'
|
||||
},
|
||||
jellipsis: {
|
||||
value: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。'
|
||||
},
|
||||
jgraphicCode: {
|
||||
value: ''
|
||||
},
|
||||
jslider: {
|
||||
value: false
|
||||
},
|
||||
jselectMultiple: {
|
||||
options: [
|
||||
{ text: '字符串', value: 'String' },
|
||||
{ text: '整数型', value: 'Integer' },
|
||||
{ text: '浮点型', value: 'Double' },
|
||||
{ text: '布尔型', value: 'Boolean' }
|
||||
],
|
||||
value: 'Integer,Boolean'
|
||||
},
|
||||
modal: {
|
||||
title: '这里是标题',
|
||||
visible: false,
|
||||
width: '100%',
|
||||
style: { top: '20px' },
|
||||
fullScreen: true
|
||||
},
|
||||
cron: {
|
||||
label: '',
|
||||
value: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameList: function() {
|
||||
|
||||
var names = []
|
||||
for (var a = 0; a < this.selectList.length; a++) {
|
||||
names.push(this.selectList[a].name)
|
||||
}
|
||||
return names
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
},
|
||||
getDepartIdValue() {
|
||||
return this.form.getFieldValue('departId')
|
||||
},
|
||||
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
|
||||
},
|
||||
generateCode(value) {
|
||||
this.jgraphicCode.value = value.toLowerCase()
|
||||
},
|
||||
handleJSliderSuccess(value) {
|
||||
this.jslider.value = value
|
||||
},
|
||||
/** 切换全屏显示 */
|
||||
handleClickToggleFullScreen() {
|
||||
let mode = !this.modal.fullScreen
|
||||
if (mode) {
|
||||
this.modal.width = '100%'
|
||||
this.modal.style.top = '20px'
|
||||
} else {
|
||||
this.modal.width = '1200px'
|
||||
this.modal.style.top = '50px'
|
||||
}
|
||||
this.modal.fullScreen = mode
|
||||
},
|
||||
openModal(){
|
||||
this.$refs.innerVueCron.show()
|
||||
},
|
||||
changeCron(val){
|
||||
this.cron=val;
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
32
ant-design-vue-jeecg/src/views/jeecg/SplitPanel.vue
Normal file
32
ant-design-vue-jeecg/src/views/jeecg/SplitPanel.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<a-button @click="splitPane" type="primary" icon="desktop">点我分屏</a-button>
|
||||
|
||||
<split-panel-modal ref="splitPanelModal"></split-panel-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplitPanelModal from './modules/SplitPanelModal'
|
||||
|
||||
export default {
|
||||
name: 'SplitPanel',
|
||||
components:{
|
||||
SplitPanelModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '分屏',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
splitPane(){
|
||||
this.$refs.splitPanelModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
266
ant-design-vue-jeecg/src/views/jeecg/TableExpandeSub.vue
Normal file
266
ant-design-vue-jeecg/src/views/jeecg/TableExpandeSub.vue
Normal file
@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:expandedRowKeys= "expandedRowKeys"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
@expand="handleExpand"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<a-table
|
||||
slot="expandedRowRender"
|
||||
slot-scope="text"
|
||||
:columns="innerColumns"
|
||||
:dataSource="innerData"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:loading="loading"
|
||||
>
|
||||
</a-table>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import JeecgOrderDMainModal from '@/views/jeecg/tablist/form/JeecgOrderDMainModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: "TableDemo",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderDMainModal
|
||||
},
|
||||
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",
|
||||
},
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
71
ant-design-vue-jeecg/src/views/jeecg/helloworld.vue
Normal file
71
ant-design-vue-jeecg/src/views/jeecg/helloworld.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-form @submit="handleSubmit" :form="form">
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-form-item label="Note" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
|
||||
<a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-form-item label="Gender" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
|
||||
<a-select v-decorator="['gender',{rules: [{ required: true, message: 'Please select your gender!' }]}]" placeholder="Select a option and change input text above" @change="this.handleSelectChange">
|
||||
<a-select-option value="male">male</a-select-option>
|
||||
<a-select-option value="female">female</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-form-item label="Gender" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
|
||||
<a-cascader :options="areaOptions" @change="onChange" :showSearch="{filter}" placeholder="Please select" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-form-item :wrapperCol="{ span: 12, offset: 5 }">
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-button type="primary" htmlType="submit">Submit</a-button>
|
||||
</a-col>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formLayout: 'horizontal',
|
||||
form: this.$form.createForm(this),
|
||||
areaOptions:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectChange (value) {
|
||||
console.log(value)
|
||||
this.form.setFieldsValue({
|
||||
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
|
||||
})
|
||||
},
|
||||
onChange(value, selectedOptions) {
|
||||
console.log(value, selectedOptions);
|
||||
},
|
||||
filter(inputValue, path) {
|
||||
return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
|
||||
},
|
||||
},
|
||||
created (){
|
||||
getAction('/api/area').then((res) => {
|
||||
console.log("------------")
|
||||
console.log(res)
|
||||
this.areaOptions = res;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
ant-design-vue-jeecg/src/views/jeecg/helloworld2.vue
Normal file
31
ant-design-vue-jeecg/src/views/jeecg/helloworld2.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
hello world!
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
|
||||
value: 1,
|
||||
|
||||
// form
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
181
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgDemoModal.vue
Normal file
181
ant-design-vue-jeecg/src/views/jeecg/modules/JeecgDemoModal.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="姓名"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入姓名" v-decorator="['name', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="关键词"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入关键词" v-decorator="['keyWord', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="打卡时间"
|
||||
hasFeedback >
|
||||
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="sex">
|
||||
<a-select v-decorator="['sex', {}]" placeholder="请选择性别">
|
||||
<a-select-option value="">请选择性别</a-select-option>
|
||||
<a-select-option value="1">男性</a-select-option>
|
||||
<a-select-option value="2">女性</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="年龄"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入年龄" v-decorator="['age', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="生日"
|
||||
hasFeedback >
|
||||
<a-date-picker v-decorator="[ 'birthday', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="邮箱"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入邮箱" v-decorator="['email', {}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="个人简介"
|
||||
hasFeedback >
|
||||
<a-input placeholder="请输入个人简介" v-decorator="['content', {}]" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeecgDemoModal",
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
},
|
||||
url: {
|
||||
add: "/test/jeecgDemo/add",
|
||||
edit: "/test/jeecgDemo/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';
|
||||
}
|
||||
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()
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-card class="card" :bordered="false">
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="任务名">
|
||||
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="任务描述">
|
||||
<a-input placeholder="请输入任务描述" v-decorator="['task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="执行人">
|
||||
<a-select placeholder="请选择执行人" v-decorator="['task.executor',{rules: [{ required: true, message: '请选择执行人'}]} ]">
|
||||
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
|
||||
<a-select-option value="李大刀">李大刀</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="责任人">
|
||||
<a-select placeholder="请选择责任人" v-decorator="['task.manager', {rules: [{ required: true, message: '请选择责任人'}]} ]">
|
||||
<a-select-option value="王伟">王伟</a-select-option>
|
||||
<a-select-option value="李红军">李红军</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item label="提醒时间">
|
||||
<a-time-picker style="width: 100%" v-decorator="['task.time', {rules: [{ required: true, message: '请选择提醒时间'}]} ]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
label="任务类型">
|
||||
<a-select placeholder="请选择任务类型" v-decorator="['task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]">
|
||||
<a-select-option value="定时执行">定时执行</a-select-option>
|
||||
<a-select-option value="周期执行">周期执行</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-tabs defaultActiveKey="1" >
|
||||
<a-tab-pane tab="Tab 1" key="1">
|
||||
|
||||
<a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
|
||||
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
|
||||
<a-tooltip title="必填项" :defaultVisible="false" overlayStyle="{ color: 'red' }">
|
||||
<a-input :key="col" v-if="record.editable" style="margin: -5px 0" :value="text" :placeholder="columns[i].title" @change="e => handlerRowChange(e.target.value, record.key, col)"/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record, index">
|
||||
<template v-if="record.editable">
|
||||
<span v-if="record.isNew">
|
||||
<a @click="saveRow(record.key)">添加</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="saveRow(record.key)">保存</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="cancelEditRow(record.key)">取消</a>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
<a @click="editRow(record.key)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增成员</a-button>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Tab 2" key="2" forceRender>
|
||||
Content of Tab Pane 2
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeecgDemoTabsModal",
|
||||
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/jeecgDemo/add",
|
||||
edit: "/test/jeecgDemo/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';
|
||||
}
|
||||
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
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-modal-body {
|
||||
padding: 8px!important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单日期">
|
||||
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'orderDate',{}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="16">
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单金额">
|
||||
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs defaultActiveKey="1" >
|
||||
<a-tab-pane tab="客户信息" key="1">
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
|
||||
<a-col :span="5">客户名</a-col>
|
||||
<a-col :span="5">性别</a-col>
|
||||
<a-col :span="5">身份证号码</a-col>
|
||||
<a-col :span="5">手机号</a-col>
|
||||
<a-col :span="4">操作</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderCustomerList" :key="index">
|
||||
<a-col :span="5">
|
||||
<a-form-item>
|
||||
<a-input placeholder="客户名" v-decorator="['jeecgOrderCustomerList['+index+'].name', {'initialValue':item.name,rules: [{ required: true, message: '请输入用户名!' }]}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-item>
|
||||
<a-select placeholder="性别" v-decorator="['jeecgOrderCustomerList['+index+'].sex', {'initialValue':item.sex}]">
|
||||
<a-select-option value="1">男</a-select-option>
|
||||
<a-select-option value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-item>
|
||||
<a-input placeholder="身份证号" v-decorator="['jeecgOrderCustomerList['+index+'].idcard', {'initialValue':item.idcard,rules: [{ 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: '身份证号格式不对!' }]}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-form-item>
|
||||
<a-input placeholder="手机号" v-decorator="['jeecgOrderCustomerList['+index+'].telphone', {'initialValue':item.telphone,rules: [{ pattern: '^1(3|4|5|7|8)\\d{9}$', message: '手机号格式不对!' }]}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-item>
|
||||
<a-button @click="addRowCustom" icon="plus"></a-button>
|
||||
<a-button @click="delRowCustom(index)" icon="minus"></a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" forceRender>
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
|
||||
<a-col :span="6">航班号</a-col>
|
||||
<a-col :span="6">航班时间</a-col>
|
||||
<a-col :span="6">操作</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderTicketList" :key="index">
|
||||
<a-col :span="6">
|
||||
<a-form-item>
|
||||
<a-input placeholder="航班号" v-decorator="['jeecgOrderTicketList['+index+'].ticketCode', {'initialValue':item.ticketCode,rules: [{ required: true, message: '请输入航班号!' }]}]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item>
|
||||
<j-date placeholder="航班时间" :trigger-change="true" v-decorator="['jeecgOrderTicketList['+index+'].tickectDate', {'initialValue':item.tickectDate}]"></j-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item>
|
||||
<a-button @click="addRowTicket" icon="plus"></a-button>
|
||||
<a-button @click="delRowTicket(index)" icon="minus"></a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction,getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title:"操作",
|
||||
visible: false,
|
||||
orderMainModel: {jeecgOrderCustomerList: [{}],
|
||||
jeecgOrderTicketList: [{}]},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules:{
|
||||
},
|
||||
url: {
|
||||
add: "/test/jeecgOrderMain/add",
|
||||
edit: "/test/jeecgOrderMain/edit",
|
||||
orderCustomerList: "/test/jeecgOrderMain/queryOrderCustomerListByMainId",
|
||||
orderTicketList: "/test/jeecgOrderMain/queryOrderTicketListByMainId",
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({});
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields();
|
||||
this.orderMainModel = Object.assign({}, record);
|
||||
this.orderMainModel.jeecgOrderCustomerList = [{}];
|
||||
this.orderMainModel.jeecgOrderTicketList = [{}];
|
||||
//--------------------------------------------------------
|
||||
//初始化明细表数据
|
||||
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.jeecgOrderCustomerList = res.result;
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
//初始化订单客户列表
|
||||
getAction(this.url.orderTicketList,params).then((res)=>{
|
||||
if(res.success){
|
||||
this.orderMainModel.jeecgOrderTicketList = res.result;
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
}
|
||||
//--------------------------------------------------------
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.orderMainModel,'orderCode','ctype','orderMoney','content'))
|
||||
this.form.setFieldsValue({orderDate:this.orderMainModel.orderDate?moment(this.orderMainModel.orderDate):null}) //时间格式化
|
||||
});
|
||||
console.log(this.orderMainModel)
|
||||
},
|
||||
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.orderMainModel.id){
|
||||
httpurl+=this.url.add;
|
||||
method = 'post';
|
||||
}else{
|
||||
httpurl+=this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let orderMainData = Object.assign(this.orderMainModel, values);
|
||||
//时间格式化
|
||||
orderMainData.orderDate = orderMainData.orderDate?orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss'):null;
|
||||
let formData = {
|
||||
...orderMainData,
|
||||
jeecgOrderCustomerList: orderMainData.jeecgOrderCustomerList,
|
||||
jeecgOrderTicketList: orderMainData.jeecgOrderTicketList
|
||||
}
|
||||
|
||||
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()
|
||||
},
|
||||
addRowCustom () {
|
||||
this.orderMainModel.jeecgOrderCustomerList.push({});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowCustom (index) {
|
||||
console.log(index)
|
||||
this.orderMainModel.jeecgOrderCustomerList.splice(index,1);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
addRowTicket () {
|
||||
this.orderMainModel.jeecgOrderTicketList.push({});
|
||||
console.log(this.orderMainModel.jeecgOrderTicketList)
|
||||
this.$forceUpdate();
|
||||
},
|
||||
delRowTicket (index) {
|
||||
console.log(index)
|
||||
this.orderMainModel.jeecgOrderTicketList.splice(index,1);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-btn {
|
||||
padding: 0 10px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
line-height: 0px;
|
||||
}
|
||||
/** 主表单行间距 */
|
||||
.ant-form .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/** Tab页面行间距 */
|
||||
.ant-tabs-content .ant-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 主表单区域 -->
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号">
|
||||
<a-input
|
||||
placeholder="请输入订单号"
|
||||
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单类型">
|
||||
<a-select placeholder="请选择订单类型" v-decorator="['ctype',{}]">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单日期">
|
||||
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-decorator="[ 'orderDate',{}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="form-row" :gutter="0">
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单金额">
|
||||
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-decorator="[ 'orderMoney', {}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<!-- 子表单区域 -->
|
||||
<a-tabs v-model="activeKey" @change="handleChangeTabs">
|
||||
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable1"
|
||||
:loading="table1.loading"
|
||||
:columns="table1.columns"
|
||||
:dataSource="table1.dataSource"
|
||||
:maxHeight="300"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"/>
|
||||
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
|
||||
|
||||
<j-editable-table
|
||||
ref="editableTable2"
|
||||
:loading="table2.loading"
|
||||
:columns="table2.columns"
|
||||
:dataSource="table2.dataSource"
|
||||
:maxHeight="300"
|
||||
:rowNumber="true"
|
||||
:rowSelection="true"
|
||||
:actionButton="true"/>
|
||||
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JEditableTable from '@/components/jeecg/JEditableTable'
|
||||
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
|
||||
import { httpAction, getAction } from '@/api/manage'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'JeecgOrderModalForJEditableTable',
|
||||
components: {
|
||||
JDate, JEditableTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
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/jeecgOrderMain/add',
|
||||
edit: '/test/jeecgOrderMain/edit',
|
||||
orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
|
||||
orderTicketList: '/test/jeecgOrderMain/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.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'orderCode', 'ctype', 'orderMoney', 'content'))
|
||||
//时间格式化
|
||||
this.form.setFieldsValue({ orderDate: this.model.orderDate ? moment(this.model.orderDate) : null })
|
||||
})
|
||||
|
||||
// 加载子表数据
|
||||
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')
|
||||
},
|
||||
/** 查询某个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 validateFormAndTables(this.form, 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)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 整理成formData */
|
||||
classifyIntoFormData(allValues) {
|
||||
let orderMain = Object.assign(this.model, allValues.formValue)
|
||||
//时间格式化
|
||||
orderMain.orderDate = orderMain.orderDate ? orderMain.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
|
||||
return {
|
||||
...orderMain, // 展开
|
||||
jeecgOrderCustomerList: allValues.tablesValue[0].values,
|
||||
jeecgOrderTicketList: 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)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div style="display: none">
|
||||
<iframe
|
||||
:id="id"
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="550px"
|
||||
scrolling="auto">
|
||||
</iframe>
|
||||
</div>
|
||||
</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, "*");
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
27
ant-design-vue-jeecg/src/views/jeecg/modules/SplitPanelA.vue
Normal file
27
ant-design-vue-jeecg/src/views/jeecg/modules/SplitPanelA.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是左侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
27
ant-design-vue-jeecg/src/views/jeecg/modules/SplitPanelB.vue
Normal file
27
ant-design-vue-jeecg/src/views/jeecg/modules/SplitPanelB.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<a-card style="min-width: 500px;overflow-x: auto">
|
||||
<p>我是右侧页面</p>
|
||||
<img-turn-page></img-turn-page>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgTurnPage from '../ImgTurnPage'
|
||||
export default {
|
||||
name: "SplitPanelAModal",
|
||||
components:{
|
||||
ImgTurnPage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="分屏"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:bodyStyle="bodyStyle"
|
||||
style="top: 0px;"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<split-pane :min-percent='20' :default-percent='50' split="vertical">
|
||||
<template slot="paneL">
|
||||
<split-panel-a></split-panel-a>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-panel-b></split-panel-b>
|
||||
</template>
|
||||
</split-pane>
|
||||
|
||||
</a-modal>
|
||||
</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;
|
||||
},
|
||||
handleOk(){
|
||||
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="高级查询构造器"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
:mask="false"
|
||||
okText="查询"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form>
|
||||
<div>
|
||||
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择查询字段" v-model="item.field">
|
||||
<a-select-option value="name">用户名</a-select-option>
|
||||
<a-select-option value="key_word">关键词</a-select-option>
|
||||
<a-select-option value="birthday">生日</a-select-option>
|
||||
<a-select-option value="age">年龄</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-select placeholder="选择匹配规则" v-model="item.rule">
|
||||
<a-select-option value="=">等于</a-select-option>
|
||||
<a-select-option value="!=">不等于</a-select-option>
|
||||
<a-select-option value=">">大于</a-select-option>
|
||||
<a-select-option value=">=">大于等于</a-select-option>
|
||||
<a-select-option value="<">小于</a-select-option>
|
||||
<a-select-option value="<=">小于等于</a-select-option>
|
||||
<a-select-option value="LEFT_LIKE">以..开始</a-select-option>
|
||||
<a-select-option value="RIGHT_LIKE">以..结尾</a-select-option>
|
||||
<a-select-option value="LIKE">包含</a-select-option>
|
||||
<a-select-option value="IN">在...中</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6"><a-input placeholder="请输入值" v-model="item.val"/></a-col>
|
||||
<a-col :span="6">
|
||||
<a-button @click="handleAdd" icon="plus"></a-button>
|
||||
<a-button @click="handleDel( index )" icon="minus"></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "SuperQueryModal",
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
queryParamsModel: [{},{}],
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
729
ant-design-vue-jeecg/src/views/jeecg/modules/VueCronModal.vue
Normal file
729
ant-design-vue-jeecg/src/views/jeecg/modules/VueCronModal.vue
Normal file
@ -0,0 +1,729 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="corn表达式"
|
||||
:width="modalWidth"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="change"
|
||||
@cancel="close"
|
||||
cancelText="关闭">
|
||||
<div class="card-container">
|
||||
<a-tabs type="card">
|
||||
<a-tab-pane key="1" type="card">
|
||||
<span slot="tab"><a-icon type="schedule" /> 秒</span>
|
||||
<a-radio-group v-model="result.second.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一秒钟</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input-number>
|
||||
秒执行 从
|
||||
<a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
|
||||
秒开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">具体秒数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
|
||||
秒
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2">
|
||||
<span slot="tab"><a-icon type="schedule" />分</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.minute.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一分钟</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
|
||||
分执行 从
|
||||
<a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
|
||||
分开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">具体分钟数(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
|
||||
分
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3">
|
||||
<span slot="tab"><a-icon type="schedule" /> 时</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.hour.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一小时</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
|
||||
小时执行 从
|
||||
<a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
|
||||
小时开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体小时数(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">周期从
|
||||
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
|
||||
小时
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4">
|
||||
<span slot="tab"><a-icon type="schedule" /> 天</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.day.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一天</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
|
||||
周执行 从
|
||||
<a-select size="small" v-model="result.week.incrementStart">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="3">每隔
|
||||
<a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
|
||||
天执行 从
|
||||
<a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
|
||||
天开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="4">具体星期几(可多选)</a-radio>
|
||||
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="5">具体天数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index">{{ index+1 }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="6">在这个月的最后一天</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="7">在这个月的最后一个工作日</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="8">在这个月的最后一个
|
||||
<a-select size="small" v-model="result.day.cronLastSpecificDomDay">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="9">
|
||||
<a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
|
||||
在本月底前
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="10">最近的工作日（周一至周五）至本月
|
||||
<a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
|
||||
日
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="11">在这个月的第
|
||||
<a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
|
||||
个
|
||||
<a-select size="small" v-model="result.week.cronNthDayDay">
|
||||
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5">
|
||||
<span slot="tab"><a-icon type="schedule" /> 月</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.month.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一月</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
|
||||
月执行 从
|
||||
<a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
|
||||
月开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体月数(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index">{{ index+1 }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">从
|
||||
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
|
||||
月之间的每个月
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6">
|
||||
<span slot="tab"><a-icon type="schedule" /> 年</span>
|
||||
<div class="tabBody">
|
||||
<a-radio-group v-model="result.year.cronEvery">
|
||||
<a-row>
|
||||
<a-radio value="1">每一年</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="2">每隔
|
||||
<a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
|
||||
年执行 从
|
||||
<a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
|
||||
年开始
|
||||
</a-radio>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio class="long" value="3">具体年份(可多选)</a-radio>
|
||||
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
|
||||
<a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
|
||||
</a-select>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-radio value="4">从
|
||||
<a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
|
||||
到
|
||||
<a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
|
||||
年之间的每一年
|
||||
</a-radio>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="bottom">
|
||||
<span class="value">{{this.cron.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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:[],
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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.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||'*'}`
|
||||
}
|
||||
},
|
||||
},
|
||||
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(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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.ant-tabs{
|
||||
border:1px solid #e6ebf5;
|
||||
padding: 0;
|
||||
.ant-tabs-bar {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
border-bottom: none;
|
||||
.ant-tabs-nav-container{
|
||||
margin: 0;
|
||||
.ant-tabs-tab {
|
||||
padding: 0 24px!important;
|
||||
background-color: #f5f7fa!important;
|
||||
margin-right: 0px!important;
|
||||
border-radius: 0;
|
||||
line-height: 38px;
|
||||
border: 1px solid transparent!important;
|
||||
border-bottom: 1px solid #e6ebf5!important;
|
||||
}
|
||||
.ant-tabs-tab-active.ant-tabs-tab{
|
||||
color: #409eff;
|
||||
background-color: #fff!important;
|
||||
border-right:1px solid #e6ebf5!important;
|
||||
border-left:1px solid #e6ebf5!important;
|
||||
border-bottom:1px solid #fff!important;
|
||||
font-weight: normal;
|
||||
transition:none!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-tabpane{
|
||||
padding: 15px;
|
||||
.ant-row{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ant-select,.ant-input-number{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container-widthEn{
|
||||
width: 755px;
|
||||
}
|
||||
.container-widthCn{
|
||||
width: 608px;
|
||||
}
|
||||
.language{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
border: 1px solid transparent;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
font-size: 16px;
|
||||
color: #409eff;
|
||||
z-index: 1;
|
||||
background: #f5f7fa;
|
||||
outline: none;
|
||||
width: 47px;
|
||||
border-bottom: 1px solid #e6ebf5;
|
||||
border-radius: 0;
|
||||
}
|
||||
.card-container{
|
||||
.bottom{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 0 0;
|
||||
.cronButton{
|
||||
margin: 0 10px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabBody{
|
||||
.a-row{
|
||||
margin: 10px 0;
|
||||
.long{
|
||||
.a-select{
|
||||
width:354px;
|
||||
}
|
||||
}
|
||||
.a-input-number{
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
698
ant-design-vue-jeecg/src/views/jeecg/report/Analysis.vue
Normal file
698
ant-design-vue-jeecg/src/views/jeecg/report/Analysis.vue
Normal file
@ -0,0 +1,698 @@
|
||||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<a-row :gutter="24">
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-area :dataSource="chartData.sll" />
|
||||
</div>
|
||||
<template slot="footer">今日受理量：<span>{{ todaySll }}</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-area :dataSource="chartData.bjl"/>
|
||||
</div>
|
||||
<template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-bar :dataSource="chartData.isll"/>
|
||||
</div>
|
||||
<template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-bar :dataSource="chartData.ibjl"/>
|
||||
</div>
|
||||
<template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
|
||||
<div class="salesCard">
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||
<div class="extra-item">
|
||||
<a>今日</a>
|
||||
<a>本周</a>
|
||||
<a>本月</a>
|
||||
<a>本年</a>
|
||||
</div>
|
||||
<a-range-picker :style="{width: '256px'}" />
|
||||
</div>
|
||||
|
||||
<a-tab-pane loading="true" tab="受理监管" key="1">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar title="受理量统计" />
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a-row>
|
||||
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="交互监管" key="2">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar-multid :dataSource="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a-row>
|
||||
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="效率监管" key="3">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<line-chart-multid :dataSource="xljgData" :fields="xljgFields" title="平台与部门交互效率统计"></line-chart-multid>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a-row>
|
||||
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="存储监管" key="4">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<a-row>
|
||||
<template v-if="diskInfo && diskInfo.length>0">
|
||||
<a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
|
||||
<dash-chart-demo :title="item.name" :dataSource="item.restPPT"></dash-chart-demo>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-col>
|
||||
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a-row>
|
||||
<a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
|
||||
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||||
<a-radio-group defaultValue="1">
|
||||
<a-radio-button value="1">转移登记</a-radio-button>
|
||||
<a-radio-button value="2">抵押登记</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
|
||||
<a-tab-pane loading="true" tab="业务流程限时监管" key="1">
|
||||
|
||||
<a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination">
|
||||
<template slot="flowRate" slot-scope="text, record, index">
|
||||
<a-progress :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane loading="true" tab="业务节点限时监管" key="2">
|
||||
<a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination">
|
||||
<template slot="flowRate" slot-scope="text, record, index">
|
||||
<span style="color: red;">{{ record.flowRate }}分钟</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
|
||||
</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'
|
||||
|
||||
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 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 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.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
|
||||
},
|
||||
//数据集
|
||||
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:'api/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',
|
||||
});
|
||||
}
|
||||
},
|
||||
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,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)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.extra-wrapper {
|
||||
line-height: 55px;
|
||||
padding-right: 24px;
|
||||
|
||||
.extra-item {
|
||||
display: inline-block;
|
||||
margin-right: 24px;
|
||||
|
||||
a {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-group {
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 13px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-group {
|
||||
.more-btn {
|
||||
margin-bottom: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.list-content-item {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1600px) {
|
||||
.list-content-item{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1300px) {
|
||||
.list-content-item{
|
||||
margin-left:20px;
|
||||
}
|
||||
.width-hidden4{
|
||||
display:none
|
||||
}
|
||||
}
|
||||
.list-content-item{
|
||||
span{line-height: 20px;}
|
||||
}
|
||||
.list-content-item{
|
||||
p{margin-top: 4px;margin-bottom:0;line-height:22px;}
|
||||
}
|
||||
.anty-list-cust {
|
||||
.ant-list-item-meta{flex: 0.3 !important;}
|
||||
}
|
||||
.anty-list-cust {
|
||||
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-tabs defaultActiveKey="1" @change="callback">
|
||||
<a-tab-pane tab="柱状图" key="1">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="10">
|
||||
<a-radio-group :value="barType" @change="statisticst">
|
||||
<a-radio-button value="year">按年统计</a-radio-button>
|
||||
<a-radio-button value="month">按月统计</a-radio-button>
|
||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
|
||||
<a-form-item label="月份区间">
|
||||
<a-range-picker
|
||||
:placeholder="['开始月份', '结束月份']"
|
||||
format="YYYY-MM"
|
||||
:value="barValue"
|
||||
:mode="barDate"
|
||||
@panelChange="handleBarDate"/>
|
||||
</a-form-item>
|
||||
<a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>
|
||||
<a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane tab="饼状图" key="2">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="10">
|
||||
<a-radio-group :value="pieType" @change="statisticst">
|
||||
<a-radio-button value="year">按年统计</a-radio-button>
|
||||
<a-radio-button value="month">按月统计</a-radio-button>
|
||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
|
||||
<a-row :gutter="24">
|
||||
<a-form-item label="月份区间">
|
||||
<a-range-picker
|
||||
:placeholder="['开始月份', '结束月份']"
|
||||
format="YYYY-MM"
|
||||
:value="pieValue"
|
||||
:mode="pieDate"
|
||||
@panelChange="handlePieDate"/>
|
||||
</a-form-item>
|
||||
<a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatepie">查询</a-button>
|
||||
<a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bar from '@/components/chart/Bar'
|
||||
import Pie from '@/components/chart/Pie'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'ArchivesStatisticst',
|
||||
components: {
|
||||
ACol,
|
||||
Bar,
|
||||
Pie
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '档案统计页面',
|
||||
// 查询条件
|
||||
queryParam: {},
|
||||
// 数据集
|
||||
countSource: [],
|
||||
// 柱状图
|
||||
barType: 'year',
|
||||
barDate: ['month', 'month'],
|
||||
barValue: [],
|
||||
// 饼状图
|
||||
pieType: 'year',
|
||||
pieDate: ['month', 'month'],
|
||||
pieValue: [],
|
||||
// 统计图类型
|
||||
tabStatus:"bar",
|
||||
url: {
|
||||
getYearCountInfo: "/api/report/getYearCountInfo",
|
||||
getMonthCountInfo:"/api/report/getMonthCountInfo",
|
||||
getCntrNoCountInfo:"/api/report/getCntrNoCountInfo",
|
||||
getCabinetCountInfo:"/api/report/getCabinetCountInfo",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let url = this.url.getYearCountInfo;
|
||||
this.loadDate(url,'year',{});
|
||||
},
|
||||
methods: {
|
||||
loadDate(url,type,param) {
|
||||
getAction(url,param,'get').then((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){
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(this.tabStatus === "bar"){
|
||||
this.countSource.push({
|
||||
x: `${data[i].year}年`,
|
||||
y: data[i].yearcount
|
||||
})
|
||||
}else{
|
||||
this.countSource.push({
|
||||
item: `${data[i].year}年`,
|
||||
count:data[i].yearcount
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
getMonthCountSource(data){
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(this.tabStatus === "bar"){
|
||||
this.countSource.push({
|
||||
x: data[i].month,
|
||||
y: data[i].monthcount
|
||||
})
|
||||
}else{
|
||||
this.countSource.push({
|
||||
item: data[i].month,
|
||||
count:data[i].monthcount
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
getCategoryCountSource(data){
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(this.tabStatus ==="bar"){
|
||||
this.countSource.push({
|
||||
x: data[i].classifyname,
|
||||
y: data[i].cntrnocount
|
||||
})
|
||||
}else{
|
||||
this.countSource.push({
|
||||
item: data[i].classifyname,
|
||||
count:data[i].cntrnocount
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
getCabinetCountSource(data){
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(this.tabStatus === "bar"){
|
||||
this.countSource.push({
|
||||
x: data[i].cabinetname,
|
||||
y: data[i].cabinetcocunt
|
||||
})
|
||||
}else{
|
||||
this.countSource.push({
|
||||
item: data[i].cabinetname,
|
||||
count:data[i].cabinetcocunt
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择统计图类别
|
||||
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,{});
|
||||
}
|
||||
},
|
||||
searchReset(){
|
||||
console.log(this.tabStatus);
|
||||
if(this.tabStatus === "pie"){
|
||||
this.pieValue = [];
|
||||
}else{
|
||||
this.barValue = [];
|
||||
}
|
||||
this.getUrl(this.barType,{});
|
||||
},
|
||||
// 选择请求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);
|
||||
},
|
||||
// 选择月份日期
|
||||
handleBarDate(value, mode) {
|
||||
this.barValue = value
|
||||
this.barDate = [
|
||||
mode[0] === 'date' ? 'month' : mode[0],
|
||||
mode[1] === 'date' ? 'month' : mode[1]
|
||||
]
|
||||
},
|
||||
handlePieDate(value, mode) {
|
||||
this.pieValue = value
|
||||
this.pieDate = [
|
||||
mode[0] === 'date' ? 'month' : mode[0],
|
||||
mode[1] === 'date' ? 'month' : mode[1]
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.statistic {
|
||||
padding: 0px !important;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.statistic h4 {
|
||||
margin-bottom: 20px;
|
||||
text-align: center !important;
|
||||
font-size: 24px !important;;
|
||||
}
|
||||
|
||||
.statistic #canvas_1 {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
141
ant-design-vue-jeecg/src/views/jeecg/report/ViserChartDemo.vue
Normal file
141
ant-design-vue-jeecg/src/views/jeecg/report/ViserChartDemo.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<!-- 柱状图 -->
|
||||
<a-tab-pane tab="柱状图" key="1">
|
||||
<bar title="销售额排行" :dataSource="barData" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 多列柱状图 -->
|
||||
<a-tab-pane tab="多列柱状图" key="2">
|
||||
<bar-multid title="多列柱状图" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 迷你柱状图 -->
|
||||
<a-tab-pane tab="迷你柱状图" key="3">
|
||||
<mini-bar :dataSource="barData" :width="400" :height="200"/>
|
||||
</a-tab-pane>
|
||||
<!-- 面积图 -->
|
||||
<a-tab-pane tab="面积图" key="4">
|
||||
<area-chart-ty title="销售额排行" :dataSource="areaData" x="月份" y="销售额" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 迷你面积图 -->
|
||||
<a-tab-pane tab="迷你面积图" key="5">
|
||||
<div style="padding-top: 100px;width:600px;height:200px">
|
||||
<mini-area :dataSource="areaData" x="月份" y="销售额" :height="height"/>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<!-- 多行折线图 -->
|
||||
<a-tab-pane tab="多行折线图" key="6">
|
||||
<line-chart-multid title="多行折线图" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 饼图 -->
|
||||
<a-tab-pane tab="饼图" key="7">
|
||||
<pie title="饼图" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 雷达图 -->
|
||||
<a-tab-pane tab="雷达图" key="8">
|
||||
<radar title="雷达图" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 仪表盘 -->
|
||||
<a-tab-pane tab="仪表盘" key="9">
|
||||
<dash-chart-demo title="仪表盘" :value="9" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- 进度条 -->
|
||||
<a-tab-pane tab="进度条" key="10">
|
||||
<mini-progress :percentage="30" :target="40" :height="30"/>
|
||||
<mini-progress :percentage="51" :target="60" :height="30" color="#FFA500"/>
|
||||
<mini-progress :percentage="66" :target="80" :height="30" color="#1E90FF"/>
|
||||
<mini-progress :percentage="74" :target="70" :height="30" color="#FF4500"/>
|
||||
<mini-progress :percentage="92" :target="100" :height="30" color="#49CC49"/>
|
||||
</a-tab-pane>
|
||||
<!-- 排名列表 -->
|
||||
<a-tab-pane tab="排名列表" key="11">
|
||||
<rank-list title="门店销售排行榜" :list="rankList" style="width: 600px;margin: 0 auto;"/>
|
||||
</a-tab-pane>
|
||||
<!-- TransferBar -->
|
||||
<a-tab-pane tab="TransferBar" key="12">
|
||||
<transfer-bar title="年度消耗流量一览表" :data="barData" x="月份" y="流量(Mb)" :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- Trend -->
|
||||
<a-tab-pane tab="Trend" key="13">
|
||||
<trend title="Trend" term="Trend：" :percentage="30"/>
|
||||
</a-tab-pane>
|
||||
<!-- Liquid -->
|
||||
<a-tab-pane tab="Liquid" key="14">
|
||||
<liquid :height="height"/>
|
||||
</a-tab-pane>
|
||||
<!-- BarAndLine -->
|
||||
<a-tab-pane tab="BarAndLine" key="15">
|
||||
<bar-and-line :height="height"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</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'
|
||||
|
||||
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 = '月') {
|
||||
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, '北京朝阳 ', ' 号店')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 0px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
<!-- 表单区域 -->
|
||||
<jeecgOrderCustomer-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderCustomer-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeecgOrderCustomerModal from './form/JeecgOrderCustomerModal'
|
||||
import JeecgOrderDMainList from './JeecgOrderDMainList'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderCustomerList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderDMainList,
|
||||
JeecgOrderCustomerModal
|
||||
},
|
||||
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;
|
||||
}
|
||||
var params = this.getQueryParams();
|
||||
getAction(this.url.list, {mainId: params.mainId}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
},
|
||||
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>
|
||||
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
filterMultiple="filterMultiple"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:type}"
|
||||
@change="handleTableChange"
|
||||
:customRow="clickThenCheck"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="客户信息" key="1">
|
||||
<Jeecg-Order-Customer-List ref="JeecgOrderCustomerList"></Jeecg-Order-Customer-List>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="机票信息" key="2" forceRender>
|
||||
<Jeecg-Order-Ticket-List ref="JeecgOrderTicketList"></Jeecg-Order-Ticket-List>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeecgOrderDMainModal from './form/JeecgOrderDMainModal'
|
||||
import JeecgOrderCustomerList from './JeecgOrderCustomerList'
|
||||
import JeecgOrderTicketList from './JeecgOrderTicketList'
|
||||
import {deleteAction} from '@/api/manage'
|
||||
import JeecgOrderCustomerModal from './form/JeecgOrderCustomerModal'
|
||||
import JeecgOrderTicketModal from './form/JeecgOrderTicketModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderDMainList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderTicketModal,
|
||||
JeecgOrderCustomerModal,
|
||||
JeecgOrderDMainModal,
|
||||
JeecgOrderCustomerList,
|
||||
JeecgOrderTicketList,
|
||||
},
|
||||
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
|
||||
},
|
||||
// 表头
|
||||
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",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickThenCheck(record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
this.onSelectChange(record.id.split(","), [record]);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
this.$refs.JeecgOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
|
||||
this.$refs.JeecgOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeecgOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeecgOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeecgOrderCustomerList.loadData();
|
||||
this.$refs.JeecgOrderTicketList.loadData();
|
||||
this.$refs.JeecgOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeecgOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeecgOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeecgOrderTicketList.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.JeecgOrderCustomerList.loadData();
|
||||
this.$refs.JeecgOrderTicketList.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
searchQuery:function(){
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeecgOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeecgOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeecgOrderCustomerList.loadData();
|
||||
this.$refs.JeecgOrderTicketList.loadData();
|
||||
this.$refs.JeecgOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeecgOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeecgOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeecgOrderTicketList.selectionRows = [];
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 2px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<JeecgOrderTicket-modal ref="modalForm" @ok="modalFormOk"></JeecgOrderTicket-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeecgOrderTicketModal from './form/JeecgOrderTicketModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderTicketList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JeecgOrderTicketModal,
|
||||
},
|
||||
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;
|
||||
}
|
||||
var params = this.getQueryParams();
|
||||
getAction(this.url.list, {mainId: params.mainId}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
},
|
||||
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>
|
||||
@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<!-- 编辑 -->
|
||||
<a-spin :spinning="confirmLoading" v-if="editStatus">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="客户姓名"
|
||||
hasFeedback>
|
||||
<a-input placeholder="请输入客户姓名" v-decorator="['name', {rules: [{ required: true, message: '请输入客户姓名!' }]}]"
|
||||
:readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="性别"
|
||||
hasFeedback>
|
||||
<a-select v-decorator="['sex', {}]" placeholder="请选择性别">
|
||||
<a-select-option value="1">男性</a-select-option>
|
||||
<a-select-option value="2">女性</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="身份证号码"
|
||||
hasFeedback>
|
||||
<a-input placeholder="请输入身份证号码" v-decorator="['idcard', validatorRules.idcard]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="身份证扫描件"
|
||||
hasFeedback>
|
||||
<a-upload
|
||||
:action="uploadAction"
|
||||
listType="picture-card"
|
||||
:headers="headers"
|
||||
:fileList="fileList"
|
||||
@change="handleChange"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<a-button>
|
||||
<a-icon type="upload"/>
|
||||
upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage"/>
|
||||
</a-modal>
|
||||
|
||||
<br/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="联系方式"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'telphone', validatorRules.telphone]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号码"
|
||||
v-model="this.orderId"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import Vue from 'vue'
|
||||
import {ACCESS_TOKEN} from "@/store/mutation-types"
|
||||
|
||||
import { getUploadFileList,getFilePaths } from '@/utils/commonUploadFile.js'
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderCustomerModal",
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: "center",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex',
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: "center",
|
||||
dataIndex: 'idcard',
|
||||
},
|
||||
{
|
||||
title: '身份证扫描件',
|
||||
align: "center",
|
||||
dataIndex: 'idcardPic',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '订单号码',
|
||||
dataIndex: 'orderId',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createBy',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateBy',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '更新人',
|
||||
dataIndex: 'updateTime',
|
||||
align: "center",
|
||||
},
|
||||
],
|
||||
fileList: [],
|
||||
disableSubmit: false,
|
||||
selectedRowKeys: [],
|
||||
orderId: "",
|
||||
hiding: false,
|
||||
headers: {},
|
||||
picUrl: "",
|
||||
picArray:[],
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
addStatus: false,
|
||||
editStatus: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
url: {
|
||||
add: "/test/order/addCustomer",
|
||||
edit: "/test/order/editCustomer",
|
||||
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
|
||||
imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
|
||||
getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
},
|
||||
validatorRules: {
|
||||
telphone: {rules: [{validator: this.validateMobile}]},
|
||||
idcard: {rules: [{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.orderId = 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.form.resetFields();
|
||||
this.orderId = record.orderId;
|
||||
let currFileList = getUploadFileList(record.idcardPic)
|
||||
this.fileList = [...currFileList]
|
||||
this.model = Object.assign({}, record);
|
||||
if (record.id) {
|
||||
this.hiding = false;
|
||||
this.addStatus = false;
|
||||
this.editStatus = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'id', 'name', 'sex', 'idcard','telphone', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
|
||||
});
|
||||
} else {
|
||||
this.addStatus = false;
|
||||
this.editStatus = true;
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.picUrl = "";
|
||||
this.fileList=[];
|
||||
},
|
||||
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);
|
||||
console.log(formData);
|
||||
formData.orderId = this.orderId;
|
||||
formData.idcardPic = getFilePaths(this.fileList)
|
||||
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();
|
||||
},
|
||||
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("您的身份证号码格式不正确!");
|
||||
}
|
||||
},
|
||||
handleChange(info) {
|
||||
this.fileList = info.fileList;
|
||||
if (info.file.status === 'uploading') {
|
||||
return
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
var response = info.file.response;
|
||||
if (!response.success) {
|
||||
this.$message.warning(response.message);
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePicCancel() {
|
||||
this.previewVisible = false
|
||||
this.previewImage=''
|
||||
},
|
||||
handlePicView(url){
|
||||
this.previewImage = this.url.imgerver + "/" + url
|
||||
this.previewVisible = true
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.previewImage = file.url || file.thumbUrl
|
||||
this.previewVisible = true
|
||||
},
|
||||
getIdCardView(url) {
|
||||
// let pics = this.model.idcardPic.split(",");
|
||||
//let pics_len = pics.length;
|
||||
// 显示上传的最后一个图片
|
||||
return this.url.imgerver + "/" + url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* tile uploaded pictures */
|
||||
.upload-list-inline > > > .ant-upload-list-item {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.upload-list-inline > > > .ant-upload-animate-enter {
|
||||
animation-name: uploadAnimateInlineIn;
|
||||
}
|
||||
|
||||
.upload-list-inline > > > .ant-upload-animate-leave {
|
||||
animation-name: uploadAnimateInlineOut;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 主表单区域 -->
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号"
|
||||
hasFeedback>
|
||||
<a-input
|
||||
placeholder="请输入订单号"
|
||||
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单日期">
|
||||
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'orderDate',{}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单金额">
|
||||
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeecgOrderDMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeecgOrderCustomerList: [{}],
|
||||
jeecgOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: "/test/order/add",
|
||||
edit: "/test/order/edit",
|
||||
orderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
orderTicketList: "/test/order/listOrderTicketByMainId",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.orderMainModel = Object.assign({}, record);
|
||||
//初始化明细表数据
|
||||
console.log(this.orderMainModel.id)
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
|
||||
this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //时间格式化
|
||||
});
|
||||
console.log(this.orderMainModel)
|
||||
},
|
||||
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.orderMainModel.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let orderMainData = Object.assign(this.orderMainModel, values);
|
||||
//时间格式化
|
||||
orderMainData.orderDate = orderMainData.orderDate ? orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null;
|
||||
let formData = {
|
||||
...orderMainData
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-btn {
|
||||
padding: 0 10px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.ant-form-item-control {
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
/** 主表单行间距 */
|
||||
.ant-form .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/** Tab页面行间距 */
|
||||
.ant-tabs-content .ant-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="航班号"
|
||||
hasFeedback>
|
||||
<a-input
|
||||
placeholder="请输入航班号"
|
||||
:readOnly="disableSubmit"
|
||||
v-decorator="['ticketCode', {rules:[{ required: true,message: '请输入航班号!'}]}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="航班时间"
|
||||
hasFeedback>
|
||||
<j-date v-decorator="['tickectDate',{trigger:'input',rules:[{ required: true,message: '请输入航班号!'}]}]"></j-date>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号码"
|
||||
v-model="this.orderId"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="创建人"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'createBy', {}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="创建时间"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'createTime', {}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from 'moment'
|
||||
import JDate from '@/components/jeecg/JDate'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
name: 'JeecgOrderTicketModal',
|
||||
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: {},
|
||||
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.form.resetFields();
|
||||
this.orderId = record.orderId;
|
||||
this.model = Object.assign({}, record);
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'ticketCode', 'tickectDate', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
|
||||
})
|
||||
},
|
||||
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.mainId = this.orderId;
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
110
ant-design-vue-jeecg/src/views/list/CardList.vue
Normal file
110
ant-design-vue-jeecg/src/views/list/CardList.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="card-list" ref="content">
|
||||
<a-list
|
||||
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
<template v-if="item === null">
|
||||
<a-button class="new-btn" type="dashed">
|
||||
<a-icon type="plus"/>
|
||||
新增产品
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-card :hoverable="true">
|
||||
<a-card-meta>
|
||||
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
||||
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
|
||||
<div class="meta-content" slot="description">{{ item.content }}</div>
|
||||
</a-card-meta>
|
||||
<template class="ant-card-actions" slot="actions">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const dataSource = []
|
||||
dataSource.push(null)
|
||||
for (let i = 0; i < 11; 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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.ant-card-actions {
|
||||
background: #f7f9fa;
|
||||
li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
width: 50%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
.meta-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
height: 64px;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
272
ant-design-vue-jeecg/src/views/list/PermissionList.vue
Normal file
272
ant-design-vue-jeecg/src/views/list/PermissionList.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table :columns="columns" :data="loadData">
|
||||
|
||||
<span slot="actions" slot-scope="text, record">
|
||||
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
|
||||
</span>
|
||||
|
||||
<span slot="status" slot-scope="text">
|
||||
{{ text | statusFilter }}
|
||||
</span>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="权限名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="赋予权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
v-model="mdl.actions"
|
||||
:allowClear="true"
|
||||
>
|
||||
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
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('/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
|
||||
})
|
||||
},
|
||||
|
||||
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
|
||||
})
|
||||
},
|
||||
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 {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
182
ant-design-vue-jeecg/src/views/list/RoleList.vue
Normal file
182
ant-design-vue-jeecg/src/views/list/RoleList.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<div
|
||||
slot="expandedRowRender"
|
||||
slot-scope="record"
|
||||
style="margin: 0">
|
||||
<a-row
|
||||
:gutter="24"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
||||
<a-col :span="4">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
|
||||
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20" v-else>-</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="$refs.modal.edit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<role-modal ref="modal" @ok="handleOk"></role-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
|
||||
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 this.$http.get('/api/role', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
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 }
|
||||
})
|
||||
})
|
||||
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.$refs.table.refresh()
|
||||
},
|
||||
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 {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
ant-design-vue-jeecg/src/views/list/StandardList.vue
Normal file
164
ant-design-vue-jeecg/src/views/list/StandardList.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="我的待办" content="8个任务" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周完成任务数" content="24个"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
title="标准列表">
|
||||
|
||||
<div slot="extra">
|
||||
<a-radio-group>
|
||||
<a-radio-button>全部</a-radio-button>
|
||||
<a-radio-button>进行中</a-radio-button>
|
||||
<a-radio-button>等待中</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search style="margin-left: 16px; width: 272px;" />
|
||||
</div>
|
||||
|
||||
<div class="operate">
|
||||
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
|
||||
</div>
|
||||
|
||||
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
|
||||
<a-list-item :key="index" v-for="(item, index) in data">
|
||||
<a-list-item-meta :description="item.description">
|
||||
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
|
||||
<a slot="title">{{ item.title }}</a>
|
||||
</a-list-item-meta>
|
||||
<div slot="actions">
|
||||
<a>编辑</a>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item><a>编辑</a></a-menu-item>
|
||||
<a-menu-item><a>删除</a></a-menu-item>
|
||||
</a-menu>
|
||||
<a>更多<a-icon type="down"/></a>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="list-content-item">
|
||||
<span>Owner</span>
|
||||
<p>{{ item.owner }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<span>开始时间</span>
|
||||
<p>{{ item.startAt }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "StandardList",
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.list-content-item {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
span {
|
||||
line-height: 20px;
|
||||
}
|
||||
p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
270
ant-design-vue-jeecg/src/views/list/TableInnerEditList.vue
Normal file
270
ant-design-vue-jeecg/src/views/list/TableInnerEditList.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => $router.push({name: 'anime-add'})">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
|
||||
<div :key="index">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record, index">
|
||||
<div class="editable-row-operations">
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a class="edit" @click="() => edit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="delete" @click="() => del(record)">删除</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</s-table>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'description' },
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'callNo' },
|
||||
// customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: '100px',
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
scopedSlots: { customRender: 'updatedAt' },
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '120px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/api/service', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleChange (value, key, column) {
|
||||
console.log(value, key, column)
|
||||
},
|
||||
edit (row) {
|
||||
row.editable = true
|
||||
// row = Object.assign({}, row)
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
del (row) {
|
||||
this.$confirm({
|
||||
title: '警告',
|
||||
content: '真的要删除吗?',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
// 在这里调用删除接口
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
|
||||
}).catch(() => console.log('Oops errors!'));
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
save (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
cancel (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.fold {
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
337
ant-design-vue-jeecg/src/views/list/TableList.vue
Normal file
337
ant-design-vue-jeecg/src/views/list/TableList.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="规则编号">
|
||||
<a-input v-model="queryParam.id" placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则编号"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="规则编号" v-model="mdl.no" id="no" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="服务调用次数"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select defaultValue="1" v-model="mdl.status">
|
||||
<a-select-option value="1">Option 1</a-select-option>
|
||||
<a-select-option value="2">Option 2</a-select-option>
|
||||
<a-select-option value="3">Option 3</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
help="请填写一段描述"
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="更新时间"
|
||||
hasFeedback
|
||||
validateStatus="error"
|
||||
>
|
||||
<a-date-picker
|
||||
style="width: 100%"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select Time"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</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'
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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())
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
264
ant-design-vue-jeecg/src/views/list/UserList.vue
Normal file
264
ant-design-vue-jeecg/src/views/list/UserList.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">关闭</a-select-option>
|
||||
<a-select-option value="2">运行中</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<div
|
||||
slot="expandedRowRender"
|
||||
slot-scope="record"
|
||||
style="margin: 0">
|
||||
<a-row
|
||||
:gutter="24"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
||||
<a-col :lg="4" :md="24">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :lg="20" :md="24" v-if="role.actionEntitySet.length > 0">
|
||||
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20" v-else>-</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
style="top: 20px;"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.permissionName }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox-group :options="permission.actionsOptions"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
203
ant-design-vue-jeecg/src/views/list/modules/RoleModal.vue
Normal file
203
ant-design-vue-jeecg/src/views/list/modules/RoleModal.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
>
|
||||
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback >
|
||||
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback >
|
||||
<a-select v-decorator="[ 'status', {rules: []} ]">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider/>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.name }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox
|
||||
v-if="permission.actionsOptions.length > 0"
|
||||
:indeterminate="permission.indeterminate"
|
||||
:checked="permission.checkedAll"
|
||||
@change="onChangeCheckAll($event, permission)">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 })
|
||||
},
|
||||
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()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
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
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
78
ant-design-vue-jeecg/src/views/list/search/SearchLayout.vue
Normal file
78
ant-design-vue-jeecg/src/views/list/search/SearchLayout.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="search-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</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'
|
||||
}
|
||||
},
|
||||
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="scss" scoped>
|
||||
.search-head{
|
||||
background-color: #fff;
|
||||
margin: -25px -24px -24px;
|
||||
.search-input{
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.search-content{
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="消息标题">
|
||||
<a-input placeholder="请输入消息标题" v-model="queryParam.esTitle"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="发送内容">
|
||||
<a-input placeholder="请输入发送内容" v-model="queryParam.esContent"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="接收人">
|
||||
<a-input placeholder="请输入接收人" v-model="queryParam.esReceiver"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" v-show="show" icon="download" @click="handleExportXls('消息')">导出</a-button>
|
||||
<a-upload v-show="show" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
|
||||
@change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
|
||||
selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="esContent" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="10" />
|
||||
</span>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多<a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-show="show">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<sysMessage-modal ref="modalForm" @ok="modalFormOk"></sysMessage-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SysMessageModal from './modules/SysMessageModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: "SysMessageList",
|
||||
mixins: [JeecgListMixin],
|
||||
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'},
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/message/sysMessage/list",
|
||||
delete: "/message/sysMessage/delete",
|
||||
deleteBatch: "/message/sysMessage/deleteBatch",
|
||||
exportXlsUrl: "message/sysMessage/exportXls",
|
||||
importExcelUrl: "message/sysMessage/importExcel",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="模板CODE">
|
||||
<a-input placeholder="请输入模板CODE" v-model="queryParam.templateCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="模板内容">
|
||||
<a-input placeholder="请输入模板内容" v-model="queryParam.templateContent"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="模板标题">
|
||||
<a-input placeholder="请输入模板标题" v-model="queryParam.templateName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="模板类型">
|
||||
<a-input placeholder="请输入模板类型" v-model="queryParam.templateType"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
<a @click="handleToggleSearch" style="margin-left: 8px">
|
||||
{{ toggleSearchStatus ? '收起' : '展开' }}
|
||||
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('消息模板')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
|
||||
@change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
|
||||
selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="templateContent" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="25" />
|
||||
</span>
|
||||
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="handleTest(record)">发送测试</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<sysMessageTemplate-modal ref="modalForm" @ok="modalFormOk"></sysMessageTemplate-modal>
|
||||
|
||||
<sysMessageTest-modal ref="testModal"></sysMessageTest-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SysMessageTemplateModal from './modules/SysMessageTemplateModal'
|
||||
import SysMessageTestModal from './modules/SysMessageTestModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: "SysMessageTemplateList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JEllipsis,
|
||||
SysMessageTemplateModal,
|
||||
SysMessageTestModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '消息模板管理页面',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '模板CODE',
|
||||
align: "center",
|
||||
dataIndex: 'templateCode'
|
||||
},
|
||||
{
|
||||
title: '模板标题',
|
||||
align: "center",
|
||||
dataIndex: 'templateName'
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
align: "center",
|
||||
dataIndex: 'templateContent',
|
||||
scopedSlots: {customRender: 'templateContent'},
|
||||
},
|
||||
{
|
||||
title: '模板类型',
|
||||
align: "center",
|
||||
dataIndex: 'templateType',
|
||||
customRender: function (text) {
|
||||
if(text=='1') {
|
||||
return "短信";
|
||||
}
|
||||
if(text=='2') {
|
||||
return "邮件";
|
||||
}
|
||||
if(text=='3') {
|
||||
return "微信";
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/message/sysMessageTemplate/list",
|
||||
delete: "/message/sysMessageTemplate/delete",
|
||||
deleteBatch: "/message/sysMessageTemplate/deleteBatch",
|
||||
exportXlsUrl: "message/sysMessageTemplate/exportXls",
|
||||
importExcelUrl: "message/sysMessageTemplate/importExcel",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTest(record){
|
||||
this.$refs.testModal.open(record);
|
||||
this.$refs.testModal.title = "发送测试";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="title"
|
||||
:maskClosable="true"
|
||||
width=650
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="close"
|
||||
:visible="visible"
|
||||
style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="消息标题">
|
||||
<a-input placeholder="请输入消息标题" v-decorator="['esTitle', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送内容">
|
||||
<a-input placeholder="请输入发送内容" v-decorator="['esContent', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送所需参数">
|
||||
<a-input placeholder="请输入发送所需参数Json格式" v-decorator="['esParam', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="接收人">
|
||||
<a-input placeholder="请输入接收人" v-decorator="['esReceiver', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送方式">
|
||||
<j-dict-select-tag :triggerChange="true" dictCode="msgType" v-decorator="[ 'esType', {}]" placeholder="请选择发送方式">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送时间">
|
||||
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'esSendTime', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送状态">
|
||||
<j-dict-select-tag :triggerChange="true" dictCode="msgSendStatus" v-decorator="[ 'esSendStatus', {}]" placeholder="请选择发送状态">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送次数">
|
||||
<a-input-number v-decorator="[ 'esSendNum', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="发送失败原因">
|
||||
<a-input v-decorator="['esResult', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="备注">
|
||||
<a-input v-decorator="['remark', {}]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
<div v-show="!disableSubmit">
|
||||
<a-button style="margin-right: .8rem" @confirm="handleCancel">取消</a-button>
|
||||
<a-button @click="handleOk" type="primary" :loading="confirmLoading">提交</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "SysMessageModal",
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
disableSubmit: true,
|
||||
url: {
|
||||
add: "/message/sysMessage/add",
|
||||
edit: "/message/sysMessage/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, 'esContent', 'esParam', 'esReceiver', 'esResult', 'esSendNum', 'esSendStatus', 'esTitle', 'esType', 'remark'))
|
||||
//时间格式化
|
||||
this.form.setFieldsValue({esSendTime: this.model.esSendTime ? moment(this.model.esSendTime) : 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.esSendTime = formData.esSendTime ? formData.esSendTime.format('YYYY-MM-DD HH:mm:ss') : 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()
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板CODE">
|
||||
<a-input
|
||||
:disabled="disable"
|
||||
placeholder="请输入模板编码"
|
||||
v-decorator="['templateCode', validatorRules.templateCode ]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板标题">
|
||||
<a-input
|
||||
placeholder="请输入模板标题"
|
||||
v-decorator="['templateName', validatorRules.templateName]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板类型">
|
||||
<j-dict-select-tag @change="handleChangeTemplateType" :triggerChange="true" dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" placeholder="请选择模板类型">
|
||||
</j-dict-select-tag>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="!useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容">
|
||||
<a-textarea placeholder="请输入模板内容" v-decorator="['templateContent', validatorRules.templateContent ]" :autosize="{ minRows: 8, maxRows: 8 }" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-show="useEditor"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容">
|
||||
<j-editor v-model="templateEditorContent"></j-editor>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import { duplicateCheck } from '@/api/api'
|
||||
import JEditor from '@/components/jeecg/JEditor'
|
||||
|
||||
export default {
|
||||
name: "SysMessageTemplateModal",
|
||||
components:{
|
||||
JEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
disable: true,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
templateCode: {rules: [{required: true, message: '请输入模板CODE!' },{validator: this.validateTemplateCode}]},
|
||||
templateName: {rules: [{required: true, message: '请输入模板标题!'}]},
|
||||
templateContent: {rules: []},
|
||||
templateType: {rules: [{required: true, message: '请输入模板类型!'}]},
|
||||
},
|
||||
url: {
|
||||
add: "/message/sysMessageTemplate/add",
|
||||
edit: "/message/sysMessageTemplate/edit",
|
||||
},
|
||||
useEditor:false,
|
||||
templateEditorContent:""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.disable = false;
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.useEditor = (record.templateType==2)
|
||||
if(this.useEditor){
|
||||
this.templateEditorContent=record.templateContent
|
||||
}else{
|
||||
this.templateEditorContent=''
|
||||
}
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
if(this.useEditor){
|
||||
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateName', 'templateTestJson', 'templateType'))
|
||||
}else{
|
||||
this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateContent', 'templateName', 'templateTestJson', 'templateType'))
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.disable = true;
|
||||
},
|
||||
handleOk() {
|
||||
this.model.templateType = this.templateType;
|
||||
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);
|
||||
//时间格式化
|
||||
|
||||
if(this.useEditor){
|
||||
formData.templateContent=this.templateEditorContent
|
||||
}
|
||||
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();
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
validateTemplateCode(rule, value, callback){
|
||||
var params = {
|
||||
tableName: "sys_sms_template",
|
||||
fieldName: "template_code",
|
||||
fieldVal: value,
|
||||
dataId: this.model.id
|
||||
}
|
||||
duplicateCheck(params).then((res)=>{
|
||||
if(res.success){
|
||||
callback();
|
||||
}else{
|
||||
callback(res.message);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
handleChangeTemplateType(value){
|
||||
//如果是邮件类型那么则改变模板内容是富文本编辑器
|
||||
this.useEditor = value==2
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板标题">
|
||||
<a-input disabled v-model="templateName"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="模板内容">
|
||||
<a-textarea disabled v-model="templateContent" :autosize="{ minRows: 5, maxRows: 8 }"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="测试数据">
|
||||
<a-textarea placeholder="请输入json格式测试数据" v-model="testData" :autosize="{ minRows: 5, maxRows: 8 }"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="消息类型">
|
||||
<j-dict-select-tag
|
||||
v-model="msgType"
|
||||
placeholder="请选择消息类型"
|
||||
dictCode="msgType"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="消息接收方">
|
||||
<a-input placeholder="请输入消息接收方" v-model="receiver"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "SysMessageTestModal",
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
|
||||
confirmLoading: false,
|
||||
url: {
|
||||
send: "/message/sysMessageTemplate/sendMsg",
|
||||
},
|
||||
templateName: "",
|
||||
templateContent: "",
|
||||
receiver: "",
|
||||
msgType: "",
|
||||
testData: "",
|
||||
sendParams: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(record) {
|
||||
this.sendParams.templateCode = record.templateCode;
|
||||
this.templateName = record.templateName;
|
||||
this.templateContent = record.templateContent;
|
||||
this.testData = record.templateTestJson;
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
this.receiver = "";
|
||||
this.msgType = "";
|
||||
this.sendParams = {};
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
let httpurl = this.url.send;
|
||||
let method = 'post';
|
||||
this.sendParams.testData = this.testData;
|
||||
this.sendParams.receiver = this.receiver;
|
||||
this.sendParams.msgType = this.msgType;
|
||||
httpAction(httpurl, this.sendParams, method).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false;
|
||||
this.close();
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<a-card title="磁盘监控">
|
||||
<a-row>
|
||||
<template v-if="diskInfo && diskInfo.length>0">
|
||||
<a-col :span="8" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
|
||||
<dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
|
||||
export default {
|
||||
name: 'DiskMonitoring',
|
||||
components:{
|
||||
ARow,
|
||||
DashChartDemo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '磁盘监控',
|
||||
//数据集
|
||||
diskInfo:[],
|
||||
url:{
|
||||
queryDiskInfo:'actuator/redis/queryDiskInfo',
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getAction(this.url.queryDiskInfo).then((res)=>{
|
||||
if(res.success){
|
||||
for(var i=0;i<res.result.length;i++){
|
||||
res.result[i].restPPT = res.result[i].restPPT/10;
|
||||
}
|
||||
this.diskInfo = res.result;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
148
ant-design-vue-jeecg/src/views/modules/monitor/HttpTrace.vue
Normal file
148
ant-design-vue-jeecg/src/views/modules/monitor/HttpTrace.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
||||
<a-card :bordered="false" class="card-area">
|
||||
|
||||
<a-alert type="info" :showIcon="true">
|
||||
<div slot="message">
|
||||
共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleClickUpdate">立即刷新</a>
|
||||
</div>
|
||||
</a-alert>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 900 }"
|
||||
style="margin-top: 20px;"
|
||||
@change="handleTableChange">
|
||||
|
||||
<template slot="timeTaken" slot-scope="text">
|
||||
<a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
|
||||
<a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
|
||||
<a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
|
||||
<a-tag v-else color="red">{{ text }} ms</a-tag>
|
||||
</template>
|
||||
|
||||
<template slot="responseStatus" slot-scope="text">
|
||||
<a-tag v-if="text < 200" color="pink">{{ text }} </a-tag>
|
||||
<a-tag v-else-if="text < 201" color="green">{{ text }} </a-tag>
|
||||
<a-tag v-else-if="text < 399" color="cyan">{{ text }} </a-tag>
|
||||
<a-tag v-else-if="text < 403" color="orange">{{ text }} </a-tag>
|
||||
<a-tag v-else-if="text < 501" color="red">{{ text }} </a-tag>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
|
||||
<template slot="requestMethod" slot-scope="text">
|
||||
<a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
|
||||
<a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
|
||||
<a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
|
||||
<a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
|
||||
<span v-else>{{ text }} ms</span>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
|
||||
</a-card>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
moment.locale('zh-cn')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
advanced: false,
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
defaultPageSize: 10,
|
||||
defaultCurrent: 1,
|
||||
pageSizeOptions: ['10', '20', '30', '40', '100'],
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
|
||||
},
|
||||
loading: true,
|
||||
tableLoading: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return [{
|
||||
title: '请求时间',
|
||||
dataIndex: 'timestamp',
|
||||
customRender(text) {
|
||||
return moment(text).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '请求方法',
|
||||
dataIndex: 'request.method',
|
||||
scopedSlots: { customRender: 'requestMethod' },
|
||||
filters: [
|
||||
{ text: 'GET', value: 'GET' },
|
||||
{ text: 'POST', value: 'POST' },
|
||||
{ text: 'PUT', value: 'PUT' },
|
||||
{ text: 'DELETE', value: 'DELETE' }
|
||||
],
|
||||
filterMultiple: true,
|
||||
onFilter: (value, record) => record.request.method.includes(value)
|
||||
}, {
|
||||
title: '请求URL',
|
||||
dataIndex: 'request.uri',
|
||||
customRender(text) {
|
||||
return text.split('?')[0]
|
||||
}
|
||||
}, {
|
||||
title: '响应状态',
|
||||
dataIndex: 'response.status',
|
||||
scopedSlots: { customRender: 'responseStatus' }
|
||||
}, {
|
||||
title: '请求耗时',
|
||||
dataIndex: 'timeTaken',
|
||||
scopedSlots: { customRender: 'timeTaken' }
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch()
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleClickUpdate() {
|
||||
this.fetch()
|
||||
},
|
||||
|
||||
handleTableChange() {
|
||||
this.fetch()
|
||||
},
|
||||
|
||||
fetch() {
|
||||
this.tableLoading = true
|
||||
getAction('actuator/httptrace').then((data) => {
|
||||
let filterData = []
|
||||
for (let d of data.traces) {
|
||||
if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
|
||||
filterData.push(d)
|
||||
}
|
||||
}
|
||||
this.dataSource = filterData
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.$message.error('获取HTTP信息失败')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.tableLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
169
ant-design-vue-jeecg/src/views/modules/monitor/JvmInfo.vue
Normal file
169
ant-design-vue-jeecg/src/views/modules/monitor/JvmInfo.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-alert type="info" :showIcon="true">
|
||||
<div slot="message">
|
||||
上次更新时间：{{ this.time }}
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleClickUpdate">立即更新</a>
|
||||
</div>
|
||||
</a-alert>
|
||||
|
||||
<a-table
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:loading="tableLoading"
|
||||
style="margin-top: 20px;">
|
||||
|
||||
<template slot="param" slot-scope="text, record">
|
||||
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text, record">
|
||||
{{ textInfo[record.param].text }}
|
||||
</template>
|
||||
|
||||
<template slot="value" slot-scope="text, record">
|
||||
{{ text }} {{ textInfo[record.param].unit }}
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
moment.locale('zh-cn')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
loading: true,
|
||||
tableLoading: true,
|
||||
columns: [{
|
||||
title: '参数',
|
||||
width: '30%',
|
||||
dataIndex: 'param',
|
||||
scopedSlots: { customRender: 'param' }
|
||||
}, {
|
||||
title: '描述',
|
||||
width: '40%',
|
||||
dataIndex: 'text',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '当前值',
|
||||
width: '30%',
|
||||
dataIndex: 'value',
|
||||
scopedSlots: { customRender: 'value' }
|
||||
}],
|
||||
dataSource: [],
|
||||
// 列表通过 textInfo 渲染出颜色、描述和单位
|
||||
textInfo: {
|
||||
'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB' },
|
||||
'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB' },
|
||||
'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB' },
|
||||
'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB' },
|
||||
'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '个' },
|
||||
'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '个' },
|
||||
'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '个' },
|
||||
'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '个' },
|
||||
'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '个' },
|
||||
'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '个' },
|
||||
'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
|
||||
'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
|
||||
'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
|
||||
'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
|
||||
'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '次' },
|
||||
'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '秒' }
|
||||
},
|
||||
// 当一条记录中需要取出多条数据的时候需要配置该字段
|
||||
moreInfo: {
|
||||
'jvm.gc.pause': ['.count', '.totalTime']
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleClickUpdate() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
|
||||
loadTomcatInfo() {
|
||||
this.tableLoading = true
|
||||
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
|
||||
Promise.all([
|
||||
getAction('actuator/metrics/jvm.memory.max'),
|
||||
getAction('actuator/metrics/jvm.memory.committed'),
|
||||
getAction('actuator/metrics/jvm.memory.used'),
|
||||
getAction('actuator/metrics/jvm.buffer.memory.used'),
|
||||
getAction('actuator/metrics/jvm.buffer.count'),
|
||||
getAction('actuator/metrics/jvm.threads.daemon'),
|
||||
getAction('actuator/metrics/jvm.threads.live'),
|
||||
getAction('actuator/metrics/jvm.threads.peak'),
|
||||
getAction('actuator/metrics/jvm.classes.loaded'),
|
||||
getAction('actuator/metrics/jvm.classes.unloaded'),
|
||||
getAction('actuator/metrics/jvm.gc.memory.allocated'),
|
||||
getAction('actuator/metrics/jvm.gc.memory.promoted'),
|
||||
getAction('actuator/metrics/jvm.gc.max.data.size'),
|
||||
getAction('actuator/metrics/jvm.gc.live.data.size'),
|
||||
getAction('actuator/metrics/jvm.gc.pause')
|
||||
]).then((res) => {
|
||||
|
||||
let info = []
|
||||
res.forEach((value, id) => {
|
||||
let more = this.moreInfo[value.name]
|
||||
if (!(more instanceof Array)) {
|
||||
more = ['']
|
||||
}
|
||||
more.forEach((item, idx) => {
|
||||
let param = value.name + item
|
||||
let val = value.measurements[idx].value
|
||||
|
||||
if (param === 'jvm.memory.max'
|
||||
|| param === 'jvm.memory.committed'
|
||||
|| param === 'jvm.memory.used'
|
||||
|| param === 'jvm.buffer.memory.used'
|
||||
|| param === 'jvm.gc.memory.allocated'
|
||||
|| param === 'jvm.gc.memory.promoted'
|
||||
|| param === 'jvm.gc.max.data.size'
|
||||
|| param === 'jvm.gc.live.data.size'
|
||||
) {
|
||||
val = this.convert(val, Number)
|
||||
}
|
||||
info.push({ id: param + id, param, text: 'false value', value: val })
|
||||
})
|
||||
})
|
||||
this.dataSource = info
|
||||
|
||||
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.$message.error('获取JVM信息失败')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
convert(value, type) {
|
||||
if (type === Number) {
|
||||
return Number(value / 1048576).toFixed(3)
|
||||
} else if (type === Date) {
|
||||
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
189
ant-design-vue-jeecg/src/views/modules/monitor/RedisInfo.vue
Normal file
189
ant-design-vue-jeecg/src/views/modules/monitor/RedisInfo.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
||||
<a-card>
|
||||
<!-- Radis 信息实时监控 -->
|
||||
<a-row :gutter="8">
|
||||
<a-col :sm="24" :xl="12">
|
||||
<area-chart-ty v-bind="memory"/>
|
||||
</a-col>
|
||||
<a-col :sm="24" :xl="12">
|
||||
<area-chart-ty v-bind="key"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<h3>Redis 详细信息</h3>
|
||||
<a-table
|
||||
:loading="tableLoading"
|
||||
:columns="columns"
|
||||
:dataSource="redisInfo"
|
||||
:pagination="false"/>
|
||||
|
||||
</a-card>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '@/api/manage'
|
||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
||||
|
||||
export default {
|
||||
name: 'RedisInfo',
|
||||
components: {
|
||||
AreaChartTy
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
tableLoading: true,
|
||||
// 定时器ID
|
||||
timer: null,
|
||||
// 定时器周期
|
||||
millisec: 3000,
|
||||
// Key 实时数量
|
||||
key: {
|
||||
title: 'Radis Key 实时数量（个）',
|
||||
dataSource: [],
|
||||
y: '数量（个）',
|
||||
height: 340,
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: '#FF6987',
|
||||
lineSize: 8,
|
||||
lineColor: '#DC143C'
|
||||
},
|
||||
// 内存实时占用情况
|
||||
memory: {
|
||||
title: 'Radis 内存实时占用情况（KB）',
|
||||
dataSource: [],
|
||||
y: '内存（KB）',
|
||||
min: 0,
|
||||
max: 3000,
|
||||
height: 340,
|
||||
lineSize: 8
|
||||
},
|
||||
redisInfo: [],
|
||||
columns: [{
|
||||
title: 'Key',
|
||||
align: 'center',
|
||||
dataIndex: 'key'
|
||||
}, {
|
||||
title: 'Description',
|
||||
align: 'left',
|
||||
dataIndex: 'description'
|
||||
}, {
|
||||
title: 'Value',
|
||||
align: 'center',
|
||||
dataIndex: 'value'
|
||||
}],
|
||||
url: {
|
||||
keysSize: '/actuator/redis/keysSize',
|
||||
memoryInfo: '/actuator/redis/memoryInfo',
|
||||
info: '/actuator/redis/info'
|
||||
},
|
||||
path: '/monitor/redis/info'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.openTimer()
|
||||
this.loadRedisInfo()
|
||||
setTimeout(() => {
|
||||
this.loadData()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.closeTimer()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 开启定时器 */
|
||||
openTimer() {
|
||||
this.loadData()
|
||||
this.closeTimer()
|
||||
this.timer = setInterval(() => {
|
||||
if (this.$route.path === this.path) {
|
||||
this.loadData()
|
||||
}
|
||||
}, this.millisec)
|
||||
},
|
||||
|
||||
/** 关闭定时器 */
|
||||
closeTimer() {
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
},
|
||||
|
||||
/** 查询数据 */
|
||||
loadData() {
|
||||
Promise.all([
|
||||
getAction(this.url.keysSize),
|
||||
getAction(this.url.memoryInfo)
|
||||
]).then((res) => {
|
||||
let time = moment().format('hh:mm:ss')
|
||||
|
||||
let [{ dbSize: currentSize }, memoryInfo] = res
|
||||
let currentMemory = memoryInfo.used_memory / 1000
|
||||
|
||||
// push 数据
|
||||
this.key.dataSource.push({ x: time, y: currentSize })
|
||||
this.memory.dataSource.push({ x: time, y: currentMemory })
|
||||
// 最大长度为6
|
||||
if (this.key.dataSource.length > 6) {
|
||||
this.key.dataSource.splice(0, 1)
|
||||
this.memory.dataSource.splice(0, 1)
|
||||
}
|
||||
|
||||
// 计算 Key 最大最小值
|
||||
let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
|
||||
this.key.max = Math.floor(keyPole[0]) + 10
|
||||
this.key.min = Math.floor(keyPole[1]) - 10
|
||||
if (this.key.min < 0) this.key.min = 0
|
||||
|
||||
// 计算 Memory 最大最小值
|
||||
let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
|
||||
this.memory.max = Math.floor(memoryPole[0]) + 100
|
||||
this.memory.min = Math.floor(memoryPole[1]) - 100
|
||||
if (this.memory.min < 0) this.memory.min = 0
|
||||
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.closeTimer()
|
||||
this.$message.error('获取 Redis 信息失败')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 获取一组数据中最大和最小的值
|
||||
getMaxAndMin(dataSource, field) {
|
||||
let maxValue = null, minValue = null
|
||||
dataSource.forEach(item => {
|
||||
let value = Number.parseInt(item[field])
|
||||
// max
|
||||
if (maxValue == null) {
|
||||
maxValue = value
|
||||
} else if (value > maxValue) {
|
||||
maxValue = value
|
||||
}
|
||||
// min
|
||||
if (minValue == null) {
|
||||
minValue = value
|
||||
} else if (value < minValue) {
|
||||
minValue = value
|
||||
}
|
||||
})
|
||||
return [maxValue, minValue]
|
||||
},
|
||||
|
||||
loadRedisInfo() {
|
||||
this.tableLoading = true
|
||||
getAction(this.url.info).then((res) => {
|
||||
this.redisInfo = res.result
|
||||
}).finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>Redis终端</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RedisTerminal'
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
137
ant-design-vue-jeecg/src/views/modules/monitor/SystemInfo.vue
Normal file
137
ant-design-vue-jeecg/src/views/modules/monitor/SystemInfo.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-alert type="info" :showIcon="true">
|
||||
<div slot="message">
|
||||
上次更新时间：{{ this.time }}
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleClickUpdate">立即更新</a>
|
||||
</div>
|
||||
</a-alert>
|
||||
|
||||
<a-table
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:loading="tableLoading"
|
||||
style="margin-top: 20px;">
|
||||
|
||||
<template slot="param" slot-scope="text, record">
|
||||
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text, record">
|
||||
{{ textInfo[record.param].text }}
|
||||
</template>
|
||||
|
||||
<template slot="value" slot-scope="text, record">
|
||||
{{ text }} {{ textInfo[record.param].unit }}
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
moment.locale('zh-cn')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
loading: true,
|
||||
tableLoading: true,
|
||||
columns: [{
|
||||
title: '参数',
|
||||
width: '30%',
|
||||
dataIndex: 'param',
|
||||
scopedSlots: { customRender: 'param' }
|
||||
}, {
|
||||
title: '描述',
|
||||
width: '40%',
|
||||
dataIndex: 'text',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '当前值',
|
||||
width: '30%',
|
||||
dataIndex: 'value',
|
||||
scopedSlots: { customRender: 'value' }
|
||||
}],
|
||||
dataSource: [],
|
||||
// 列表通过 textInfo 渲染出颜色、描述和单位
|
||||
textInfo: {
|
||||
'system.cpu.count': { color: 'green', text: 'CPU 数量', unit: '核' },
|
||||
'system.cpu.usage': { color: 'green', text: '系统 CPU 使用率', unit: '%' },
|
||||
'process.start.time': { color: 'purple', text: '应用启动时间点', unit: '' },
|
||||
'process.uptime': { color: 'purple', text: '应用已运行时间', unit: '秒' },
|
||||
'process.cpu.usage': { color: 'purple', text: '当前应用 CPU 使用率', unit: '%' }
|
||||
},
|
||||
// 当一条记录中需要取出多条数据的时候需要配置该字段
|
||||
moreInfo: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleClickUpdate() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
|
||||
loadTomcatInfo() {
|
||||
this.tableLoading = true
|
||||
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
|
||||
Promise.all([
|
||||
getAction('actuator/metrics/system.cpu.count'),
|
||||
getAction('actuator/metrics/system.cpu.usage'),
|
||||
getAction('actuator/metrics/process.start.time'),
|
||||
getAction('actuator/metrics/process.uptime'),
|
||||
getAction('actuator/metrics/process.cpu.usage')
|
||||
]).then((res) => {
|
||||
let info = []
|
||||
res.forEach((value, id) => {
|
||||
let more = this.moreInfo[value.name]
|
||||
if (!(more instanceof Array)) {
|
||||
more = ['']
|
||||
}
|
||||
more.forEach((item, idx) => {
|
||||
let param = value.name + item
|
||||
let val = value.measurements[idx].value
|
||||
if (param === 'system.cpu.usage' || param === 'process.cpu.usage') {
|
||||
val = this.convert(val, Number)
|
||||
}
|
||||
if (param === 'process.start.time') {
|
||||
val = this.convert(val, Date)
|
||||
}
|
||||
info.push({ id: param + id, param, text: 'false value', value: val })
|
||||
})
|
||||
})
|
||||
this.dataSource = info
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.$message.error('获取服务器信息失败')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
convert(value, type) {
|
||||
if (type === Number) {
|
||||
return Number(value * 100).toFixed(2)
|
||||
} else if (type === Date) {
|
||||
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
149
ant-design-vue-jeecg/src/views/modules/monitor/TomcatInfo.vue
Normal file
149
ant-design-vue-jeecg/src/views/modules/monitor/TomcatInfo.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
||||
<a-card :bordered="false">
|
||||
|
||||
<a-alert type="info" :showIcon="true">
|
||||
<div slot="message">
|
||||
上次更新时间：{{ this.time }}
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleClickUpdate">立即更新</a>
|
||||
</div>
|
||||
</a-alert>
|
||||
|
||||
<a-table
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:loading="tableLoading"
|
||||
style="margin-top: 20px;">
|
||||
|
||||
<template slot="param" slot-scope="text, record">
|
||||
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text, record">
|
||||
{{ textInfo[record.param].text }}
|
||||
</template>
|
||||
|
||||
<template slot="value" slot-scope="text, record">
|
||||
{{ text }} {{ textInfo[record.param].unit }}
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
|
||||
</a-card>
|
||||
</a-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
moment.locale('zh-cn')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
loading: true,
|
||||
tableLoading: true,
|
||||
columns: [{
|
||||
title: '参数',
|
||||
width: '30%',
|
||||
dataIndex: 'param',
|
||||
scopedSlots: { customRender: 'param' }
|
||||
}, {
|
||||
title: '描述',
|
||||
width: '40%',
|
||||
dataIndex: 'text',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '当前值',
|
||||
width: '30%',
|
||||
dataIndex: 'value',
|
||||
scopedSlots: { customRender: 'value' }
|
||||
}],
|
||||
dataSource: [],
|
||||
// 列表通过 textInfo 渲染出颜色、描述和单位
|
||||
textInfo: {
|
||||
'tomcat.sessions.created': { color: 'green', text: 'tomcat 已创建 session 数', unit: '个' },
|
||||
'tomcat.sessions.expired': { color: 'green', text: 'tomcat 已过期 session 数', unit: '个' },
|
||||
'tomcat.sessions.active.current': { color: 'green', text: 'tomcat 当前活跃 session 数', unit: '个' },
|
||||
'tomcat.sessions.active.max': { color: 'green', text: 'tomcat 活跃 session 数峰值', unit: '个' },
|
||||
'tomcat.sessions.rejected': { color: 'green', text: '超过session 最大配置后，拒绝的 session 个数', unit: '个' },
|
||||
|
||||
'tomcat.global.sent': { color: 'purple', text: '发送的字节数', unit: 'bytes' },
|
||||
'tomcat.global.request.max': { color: 'purple', text: 'request 请求最长耗时', unit: '秒' },
|
||||
'tomcat.global.request.count': { color: 'purple', text: '全局 request 请求次数', unit: '次' },
|
||||
'tomcat.global.request.totalTime': { color: 'purple', text: '全局 request 请求总耗时', unit: '秒' },
|
||||
|
||||
'tomcat.servlet.request.max': { color: 'cyan', text: 'servlet 请求最长耗时', unit: '秒' },
|
||||
'tomcat.servlet.request.count': { color: 'cyan', text: 'servlet 总请求次数', unit: '次' },
|
||||
'tomcat.servlet.request.totalTime': { color: 'cyan', text: 'servlet 请求总耗时', unit: '秒' },
|
||||
|
||||
'tomcat.threads.current': { color: 'pink', text: 'tomcat 当前线程数（包括守护线程）', unit: '个' },
|
||||
'tomcat.threads.config.max': { color: 'pink', text: 'tomcat 配置的线程最大数', unit: '个' }
|
||||
},
|
||||
// 当一条记录中需要取出多条数据的时候需要配置该字段
|
||||
moreInfo: {
|
||||
'tomcat.global.request': ['.count', '.totalTime'],
|
||||
'tomcat.servlet.request': ['.count', '.totalTime']
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleClickUpdate() {
|
||||
this.loadTomcatInfo()
|
||||
},
|
||||
|
||||
loadTomcatInfo() {
|
||||
this.tableLoading = true
|
||||
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
|
||||
Promise.all([
|
||||
getAction('actuator/metrics/tomcat.sessions.created'),
|
||||
getAction('actuator/metrics/tomcat.sessions.expired'),
|
||||
getAction('actuator/metrics/tomcat.sessions.active.current'),
|
||||
getAction('actuator/metrics/tomcat.sessions.active.max'),
|
||||
getAction('actuator/metrics/tomcat.sessions.rejected'),
|
||||
getAction('actuator/metrics/tomcat.global.sent'),
|
||||
getAction('actuator/metrics/tomcat.global.request.max'),
|
||||
getAction('actuator/metrics/tomcat.global.request'),
|
||||
// 2.1.3.RELEASE 无此API
|
||||
//getAction('actuator/metrics/tomcat.servlet.request'),
|
||||
// getAction('actuator/metrics/tomcat.servlet.request.max'),
|
||||
getAction('actuator/metrics/tomcat.threads.current'),
|
||||
getAction('actuator/metrics/tomcat.threads.config.max')
|
||||
]).then((res) => {
|
||||
let tomcatInfo = []
|
||||
res.forEach((value, id) => {
|
||||
let more = this.moreInfo[value.name]
|
||||
if (!(more instanceof Array)) {
|
||||
more = ['']
|
||||
}
|
||||
more.forEach((item, idx) => {
|
||||
let param = value.name + item
|
||||
tomcatInfo.push({
|
||||
id: param + id, param,
|
||||
text: 'false value',
|
||||
value: value.measurements[idx].value
|
||||
})
|
||||
})
|
||||
})
|
||||
this.dataSource = tomcatInfo
|
||||
}).catch((e) => {
|
||||
console.error(e)
|
||||
this.$message.error('获取Tomcat信息失败')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.tableLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
342
ant-design-vue-jeecg/src/views/profile/advanced/Advanced.vue
Normal file
342
ant-design-vue-jeecg/src/views/profile/advanced/Advanced.vue
Normal file
@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
|
||||
|
||||
<detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
|
||||
<detail-list-item term="创建人">曲丽丽</detail-list-item>
|
||||
<detail-list-item term="订购产品">XX服务</detail-list-item>
|
||||
<detail-list-item term="创建时间">2018-08-07</detail-list-item>
|
||||
<detail-list-item term="关联单据"><a>12421</a></detail-list-item>
|
||||
<detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
|
||||
<detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
|
||||
</detail-list>
|
||||
<a-row slot="extra" class="status-list">
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">状态</div>
|
||||
<div class="heading">待审批</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">订单金额</div>
|
||||
<div class="heading">¥ 568.08</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- actions -->
|
||||
<template slot="action">
|
||||
<a-button-group style="margin-right: 4px;">
|
||||
<a-button>操作</a-button>
|
||||
<a-button>操作</a-button>
|
||||
<a-button><a-icon type="ellipsis"/></a-button>
|
||||
</a-button-group>
|
||||
<a-button type="primary" >主操作</a-button>
|
||||
</template>
|
||||
|
||||
<a-card :bordered="false" title="流程进度">
|
||||
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
|
||||
<a-step title="创建项目">
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
</a-step>
|
||||
<a-step title="完成">
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户信息">
|
||||
<detail-list>
|
||||
<detail-list-item term="用户姓名">付晓晓</detail-list-item>
|
||||
<detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
|
||||
<detail-list-item term="身份证">3321944288191034921</detail-list-item>
|
||||
<detail-list-item term="联系方式">18112345678</detail-list-item>
|
||||
<detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
|
||||
</detail-list>
|
||||
<detail-list title="信息组">
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
</detail-list>
|
||||
<a-card type="inner" title="多层信息组">
|
||||
<detail-list title="组名称" size="small">
|
||||
<detail-list-item term="负责人">林东东</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
<detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
|
||||
<detail-list-item term="过期时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="1">
|
||||
<detail-list-item term="学名"> Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="2">
|
||||
<detail-list-item term="负责人">付小小</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
</detail-list>
|
||||
</a-card>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
|
||||
<div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作 -->
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
:tabList="tabList"
|
||||
:activeTabKey="activeTabKey"
|
||||
@tabChange="(key) => {this.activeTabKey = key}"
|
||||
>
|
||||
<a-table
|
||||
v-if="activeTabKey === '1'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation1"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '2'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation2"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '3'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation3"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
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': '驳回'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter(type) {
|
||||
const statusTypeMap = {
|
||||
'agree': 'success',
|
||||
'reject': 'error'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.detail-layout {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.text {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: rgba(0, 0, 0, .25);
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.detail-layout {
|
||||
margin-left: unset;
|
||||
}
|
||||
.text {
|
||||
|
||||
}
|
||||
.status-list {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
255
ant-design-vue-jeecg/src/views/profile/basic/Index.vue
Normal file
255
ant-design-vue-jeecg/src/views/profile/basic/Index.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<page-layout :title="title">
|
||||
<a-card :bordered="false">
|
||||
<detail-list title="退款申请">
|
||||
<detail-list-item term="取货单号">1000000000</detail-list-item>
|
||||
<detail-list-item term="状态">已取货</detail-list-item>
|
||||
<detail-list-item term="销售单号">1234123421</detail-list-item>
|
||||
<detail-list-item term="子订单">3214321432</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin-bottom: 32px"/>
|
||||
<detail-list title="用户信息">
|
||||
<detail-list-item term="用户姓名">付小小</detail-list-item>
|
||||
<detail-list-item term="联系电话">18100000000</detail-list-item>
|
||||
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
|
||||
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
|
||||
<detail-list-item term="备注"> 无</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin-bottom: 32px"/>
|
||||
|
||||
<div class="title">退货商品</div>
|
||||
<s-table
|
||||
style="margin-bottom: 24px"
|
||||
:columns="goodsColumns"
|
||||
:data="loadGoodsData">
|
||||
|
||||
</s-table>
|
||||
|
||||
<div class="title">退货进度</div>
|
||||
<s-table
|
||||
style="margin-bottom: 24px"
|
||||
:columns="scheduleColumns"
|
||||
:data="loadScheduleData">
|
||||
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status" :text="status | statusFilter"/>
|
||||
</template>
|
||||
|
||||
</s-table>
|
||||
</a-card>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import STable from '@/components/table/'
|
||||
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,
|
||||
STable
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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="scss" scoped>
|
||||
.title {
|
||||
color: rgba(0,0,0,.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
45
ant-design-vue-jeecg/src/views/result/Error.vue
Normal file
45
ant-design-vue-jeecg/src/views/result/Error.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<result :is-success="false" :title="title" :description="description">
|
||||
<template slot="action">
|
||||
<a-button type="primary" >返回修改</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
|
||||
您提交的内容有如下错误：
|
||||
</div>
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
|
||||
您的账户已被冻结
|
||||
<a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
|
||||
</div>
|
||||
<div>
|
||||
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
|
||||
您的账户还不具备申请资格
|
||||
<a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</result>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from './Result'
|
||||
|
||||
export default {
|
||||
name: "Error",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '提交失败',
|
||||
description: '请核对并修改以下信息后，再重新提交。'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
91
ant-design-vue-jeecg/src/views/result/Result.vue
Normal file
91
ant-design-vue-jeecg/src/views/result/Result.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="result">
|
||||
<div>
|
||||
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
|
||||
</div>
|
||||
<div class="title" v-if="title">{{ title }}</div>
|
||||
<div class="description" v-if="description">{{ description }}</div>
|
||||
<div class="content" v-if="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="action">
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Result",
|
||||
// 'isSuccess', 'title', 'description'
|
||||
props: {
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.result {
|
||||
text-align: center;
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 8px;
|
||||
|
||||
.icon {
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.success {
|
||||
color: #52c41a;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.content {
|
||||
background: #fafafa;
|
||||
padding: 24px 40px;
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
.action {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.result {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
ant-design-vue-jeecg/src/views/result/Success.vue
Normal file
92
ant-design-vue-jeecg/src/views/result/Success.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<result :is-success="true" :description="description" :title="title">
|
||||
<template slot="action">
|
||||
<a-button type="primary">返回列表</a-button>
|
||||
<a-button style="margin-left: 8px">查看项目</a-button>
|
||||
<a-button style="margin-left: 8px">打印</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
|
||||
20180724089
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
|
||||
曲丽丽是谁？
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
||||
<span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
|
||||
2016-12-12 ~ 2017-12-12
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
|
||||
<a-step >
|
||||
<span style="font-size: 14px" slot="title">创建项目</span>
|
||||
<template slot="description">
|
||||
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
|
||||
<div style="margin: 8px 0 4px">
|
||||
曲丽丽
|
||||
<a-icon style="margin-left: 8px" type="dingding-o" />
|
||||
</div>
|
||||
<div>2016-12-12 12:32</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
<span style="font-size: 14px" slot="title">部门初审</span>
|
||||
<template slot="description">
|
||||
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
|
||||
<div style="margin: 8px 0 4px">
|
||||
周毛毛
|
||||
<a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
|
||||
</div>
|
||||
<div><a href="">催一下</a></div>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
<span style="font-size: 14px" slot="title">财务复核</span>
|
||||
</a-step>
|
||||
<a-step title="完成" >
|
||||
<span style="font-size: 14px" slot="title">完成</span>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</div>
|
||||
</result>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Result from './Result'
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
|
||||
const directionType = {
|
||||
horizontal: 'horizontal',
|
||||
vertical: 'vertical'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Success",
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
title: '提交成功',
|
||||
description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
|
||||
' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
|
||||
' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
|
||||
' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
|
||||
directionType
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
134
ant-design-vue-jeecg/src/views/system/DataLogList.vue
Normal file
134
ant-design-vue-jeecg/src/views/system/DataLogList.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="表名">
|
||||
<a-input placeholder="请输入表名" v-model="queryParam.dataTable"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="数据ID">
|
||||
<a-input placeholder="请输入ID" v-model="queryParam.dataId"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-button type="primary" @click="searchQuery">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleCompare()" type="primary" icon="plus">数据比较</a-button>
|
||||
</div>
|
||||
|
||||
<!--table区 -->
|
||||
<div>
|
||||
<!--已选择的清空 -->
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="dataContent" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="80" />
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<data-log-modal ref="modalForm" @ok="modalFormOk"></data-log-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataLogModal from './modules/DataLogModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
|
||||
export default {
|
||||
name: 'DataLogList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JEllipsis,
|
||||
DataLogModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '数据日志管理页面',
|
||||
//表头
|
||||
columns: [
|
||||
{
|
||||
title: '表名',
|
||||
align: 'center',
|
||||
dataIndex: 'dataTable'
|
||||
}, {
|
||||
title: '数据ID',
|
||||
align: 'center',
|
||||
dataIndex: 'dataId'
|
||||
}, {
|
||||
title: '版本号',
|
||||
align: 'center',
|
||||
dataIndex: 'dataVersion'
|
||||
}, {
|
||||
title: '数据内容',
|
||||
align: 'center',
|
||||
dataIndex: 'dataContent',
|
||||
width: "120px",
|
||||
scopedSlots: {customRender: 'dataContent'},
|
||||
}, {
|
||||
title: '创建人',
|
||||
align: 'center',
|
||||
dataIndex: 'createBy'
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/sys/dataLog/list",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCompare: function () {
|
||||
if (!this.selectionRows || this.selectionRows.length != 2) {
|
||||
this.openNotifIcon('请选择两条数据');
|
||||
return false;
|
||||
} else if (this.selectionRows[0].dataId != this.selectionRows[1].dataId) {
|
||||
this.openNotifIcon('请选择相同的数据库表和数据ID进行比较');
|
||||
return false;
|
||||
} else {
|
||||
this.$refs.modalForm.addModal(this.selectionRows);
|
||||
this.$refs.modalForm.title = "数据比较";
|
||||
}
|
||||
},
|
||||
openNotifIcon(msg) {
|
||||
this.$notification['warning']({
|
||||
message: '提示信息',
|
||||
description: msg,
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
519
ant-design-vue-jeecg/src/views/system/DepartList.vue
Normal file
519
ant-design-vue-jeecg/src/views/system/DepartList.vue
Normal file
@ -0,0 +1,519 @@
|
||||
<template xmlns:background-color="http://www.w3.org/1999/xhtml">
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 按钮操作区域 -->
|
||||
<a-row style="margin-left: 14px">
|
||||
<a-button @click="handleAdd(2)" type="primary">添加子部门</a-button>
|
||||
<a-button @click="handleAdd(1)" type="primary">添加一级部门</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
<a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
|
||||
<!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
|
||||
</a-row>
|
||||
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<a-alert type="info" :showIcon="true">
|
||||
<div slot="message">
|
||||
当前选择：
|
||||
<a v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</a>
|
||||
<a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
|
||||
</div>
|
||||
</a-alert>
|
||||
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
||||
<!-- 树-->
|
||||
<a-col :md="10" :sm="24">
|
||||
<template>
|
||||
<a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
|
||||
<span style="user-select: none">
|
||||
<a-tree
|
||||
checkable
|
||||
multiple
|
||||
@select="onSelect"
|
||||
@check="onCheck"
|
||||
@rightClick="rightHandle"
|
||||
:selectedKeys="selectedKeys"
|
||||
:checkedKeys="checkedKeys"
|
||||
:treeData="departTree"
|
||||
:checkStrictly="true"
|
||||
:expandedKeys="iExpandedKeys"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
@expand="onExpand"/>
|
||||
</span>
|
||||
<!--新增右键点击事件,和增加添加和删除功能-->
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
|
||||
<a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
|
||||
<a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-col>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<a-form :form="form">
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构名称">
|
||||
<a-input placeholder="请输入机构/部门名称" v-decorator="['departName', validatorRules.departName ]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
||||
<a-tree-select
|
||||
style="width:100%"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="treeData"
|
||||
:disabled="disable"
|
||||
v-model="model.parentId"
|
||||
placeholder="无">
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="机构编码">
|
||||
<a-input disabled placeholder="请输入机构编码" v-decorator="['orgCode', validatorRules.orgCode ]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序">
|
||||
<a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="手机号">
|
||||
<a-input placeholder="请输入手机号" v-decorator="['mobile', {'initialValue':''}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="地址">
|
||||
<a-input placeholder="请输入地址" v-decorator="['address', {'initialValue':''}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="备注">
|
||||
<a-textarea placeholder="请输入备注" v-decorator="['memo', {'initialValue':''}]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="anty-form-btn">
|
||||
<a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
|
||||
<a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">修改并保存</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<depart-modal ref="departModal" @ok="loadTree"></depart-modal>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
import DepartModal from './modules/DepartModal'
|
||||
import pick from 'lodash.pick'
|
||||
import {queryDepartTreeList, searchByKeywords, deleteByDepartId} from '@/api/api'
|
||||
import {httpAction, deleteAction} from '@/api/manage'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
// 表头
|
||||
const columns = [
|
||||
{
|
||||
title: '机构名称',
|
||||
dataIndex: 'departName'
|
||||
},
|
||||
{
|
||||
title: '机构类型',
|
||||
align: 'center',
|
||||
dataIndex: 'orgType'
|
||||
},
|
||||
{
|
||||
title: '机构编码',
|
||||
dataIndex: 'orgCode',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile'
|
||||
},
|
||||
{
|
||||
title: '传真',
|
||||
dataIndex: 'fax'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'address'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
align: 'center',
|
||||
dataIndex: 'departOrder'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'}
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'DepartList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
DepartModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iExpandedKeys: [],
|
||||
loading: false,
|
||||
autoExpandParent: true,
|
||||
currFlowId: '',
|
||||
currFlowName: '',
|
||||
disable: true,
|
||||
treeData: [],
|
||||
visible: false,
|
||||
departTree: [],
|
||||
rightClickSelectedKey: '',
|
||||
hiding: true,
|
||||
model: {},
|
||||
dropTrigger: '',
|
||||
depart: {},
|
||||
columns: columns,
|
||||
disableSubmit: false,
|
||||
checkedKeys: [],
|
||||
selectedKeys: [],
|
||||
autoIncr: 1,
|
||||
currSelected: {},
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
graphDatasource: {
|
||||
nodes: [],
|
||||
edges: []
|
||||
},
|
||||
validatorRules: {
|
||||
departName: {rules: [{required: true, message: '请输入机构/部门名称!'}]},
|
||||
orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
|
||||
mobile: {rules: [{validator: this.validateMobile}]}
|
||||
},
|
||||
url: {
|
||||
delete: '/sysdepart/sysDepart/delete',
|
||||
edit: '/sysdepart/sysDepart/edit',
|
||||
deleteBatch: '/sysdepart/sysDepart/deleteBatch',
|
||||
exportXlsUrl: "sysdepart/sysDepart/exportXls",
|
||||
importExcelUrl: "sysdepart/sysDepart/importExcel",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.refresh();
|
||||
},
|
||||
loadTree() {
|
||||
var that = this
|
||||
that.treeData = []
|
||||
that.departTree = []
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.treeData.push(temp)
|
||||
that.departTree.push(temp)
|
||||
that.setThisExpandedKeys(temp)
|
||||
console.log(temp.id)
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
setThisExpandedKeys(node) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
this.iExpandedKeys.push(node.key)
|
||||
for (let a = 0; a < node.children.length; a++) {
|
||||
this.setThisExpandedKeys(node.children[a])
|
||||
}
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true
|
||||
this.loadTree()
|
||||
},
|
||||
// 右键操作方法
|
||||
rightHandle(node) {
|
||||
this.dropTrigger = 'contextmenu'
|
||||
console.log(node.node.eventKey)
|
||||
this.rightClickSelectedKey = node.node.eventKey
|
||||
},
|
||||
onExpand(expandedKeys) {
|
||||
console.log('onExpand', expandedKeys)
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.iExpandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
backFlowList() {
|
||||
this.$router.back(-1)
|
||||
},
|
||||
// 右键点击下拉框改变事件
|
||||
dropStatus(visible) {
|
||||
if (visible == false) {
|
||||
this.dropTrigger = ''
|
||||
}
|
||||
},
|
||||
// 右键店家下拉关闭下拉框
|
||||
closeDrop() {
|
||||
this.dropTrigger = ''
|
||||
},
|
||||
addRootNode() {
|
||||
this.$refs.nodeModal.add(this.currFlowId, '')
|
||||
},
|
||||
batchDel: function () {
|
||||
console.log(this.checkedKeys)
|
||||
if (this.checkedKeys.length <= 0) {
|
||||
this.$message.warning('请选择一条记录！')
|
||||
} else {
|
||||
var ids = ''
|
||||
for (var a = 0; a < this.checkedKeys.length; a++) {
|
||||
ids += this.checkedKeys[a] + ','
|
||||
}
|
||||
var that = this
|
||||
this.$confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据?',
|
||||
onOk: function () {
|
||||
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.loadTree()
|
||||
that.onClearSelected()
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onSearch(value) {
|
||||
let that = this
|
||||
if (value) {
|
||||
searchByKeywords({keyWord: value}).then((res) => {
|
||||
if (res.success) {
|
||||
that.departTree = []
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.departTree.push(temp)
|
||||
}
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.loadTree()
|
||||
}
|
||||
|
||||
},
|
||||
nodeModalOk() {
|
||||
this.loadTree()
|
||||
},
|
||||
nodeModalClose() {
|
||||
},
|
||||
hide() {
|
||||
console.log(111)
|
||||
this.visible = false
|
||||
},
|
||||
onCheck(checkedKeys, info) {
|
||||
console.log('onCheck', checkedKeys, info)
|
||||
this.hiding = false
|
||||
this.checkedKeys = checkedKeys.checked
|
||||
},
|
||||
onSelect(selectedKeys, e) {
|
||||
console.log('selected', selectedKeys, e)
|
||||
this.hiding = false
|
||||
let record = e.node.dataRef
|
||||
console.log('onSelect-record', record)
|
||||
this.currSelected = Object.assign({}, record)
|
||||
this.model = this.currSelected
|
||||
this.selectedKeys = [record.key]
|
||||
this.model.parentId = record.parentId
|
||||
this.setValuesToForm(record)
|
||||
|
||||
|
||||
},
|
||||
// 触发onSelect事件时,为部门树右侧的form表单赋值
|
||||
setValuesToForm(record) {
|
||||
this.form.getFieldDecorator('fax', {initialValue: ''})
|
||||
this.form.setFieldsValue(pick(record, 'departName', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
|
||||
},
|
||||
getCurrSelectedTitle() {
|
||||
return !this.currSelected.title ? '' : this.currSelected.title
|
||||
},
|
||||
onClearSelected() {
|
||||
this.hiding = true
|
||||
this.checkedKeys = {}
|
||||
this.currSelected = {}
|
||||
this.form.resetFields()
|
||||
this.selectedKeys = []
|
||||
},
|
||||
handleNodeTypeChange(val) {
|
||||
this.currSelected.nodeType = val
|
||||
},
|
||||
notifyTriggerTypeChange(value) {
|
||||
this.currSelected.notifyTriggerType = value
|
||||
},
|
||||
receiptTriggerTypeChange(value) {
|
||||
this.currSelected.receiptTriggerType = value
|
||||
},
|
||||
submitCurrForm() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (!this.currSelected.id) {
|
||||
this.$message.warning('请点击选择要修改部门!')
|
||||
return
|
||||
}
|
||||
|
||||
let formData = Object.assign(this.currSelected, values)
|
||||
console.log('Received values of form: ', formData)
|
||||
httpAction(this.url.edit, formData, 'put').then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('保存成功!')
|
||||
this.loadTree()
|
||||
} else {
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
emptyCurrForm() {
|
||||
this.form.resetFields()
|
||||
},
|
||||
nodeSettingFormSubmit() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
openSelect() {
|
||||
this.$refs.sysDirectiveModal.show()
|
||||
},
|
||||
handleAdd(num) {
|
||||
if (num == 1) {
|
||||
this.$refs.departModal.add()
|
||||
this.$refs.departModal.title = '新增'
|
||||
} else if (num == 2) {
|
||||
let key = this.currSelected.key
|
||||
if (!key) {
|
||||
this.$message.warning('请先选中一条记录!')
|
||||
return false
|
||||
}
|
||||
this.$refs.departModal.add(this.selectedKeys)
|
||||
this.$refs.departModal.title = '新增'
|
||||
} else {
|
||||
this.$refs.departModal.add(this.rightClickSelectedKey)
|
||||
this.$refs.departModal.title = '新增'
|
||||
}
|
||||
},
|
||||
handleDelete() {
|
||||
deleteByDepartId({id: this.rightClickSelectedKey}).then((resp) => {
|
||||
if (resp.success) {
|
||||
this.$message.success('删除成功!')
|
||||
this.loadTree()
|
||||
} else {
|
||||
this.$message.warning('删除失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
selectDirectiveOk(record) {
|
||||
console.log('选中指令数据', record)
|
||||
this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
|
||||
this.currSelected.sysCode = record.sysCode
|
||||
},
|
||||
getFlowGraphData(node) {
|
||||
this.graphDatasource.nodes.push({
|
||||
id: node.id,
|
||||
text: node.flowNodeName
|
||||
})
|
||||
if (node.children.length > 0) {
|
||||
for (let a = 0; a < node.children.length; a++) {
|
||||
let temp = node.children[a]
|
||||
this.graphDatasource.edges.push({
|
||||
source: node.id,
|
||||
target: temp.id
|
||||
})
|
||||
this.getFlowGraphData(temp)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.currFlowId = this.$route.params.id
|
||||
this.currFlowName = this.$route.params.name
|
||||
// this.loadTree()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.anty-form-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anty-form-btn button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.anty-node-layout .ant-layout-header {
|
||||
padding-right: 0
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.header button {
|
||||
margin: 0 3px
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
#app .desktop {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/** Button按钮间距 */
|
||||
.ant-btn {
|
||||
margin-left: 3px
|
||||
}
|
||||
</style>
|
||||
260
ant-design-vue-jeecg/src/views/system/DepartList2.vue
Normal file
260
ant-design-vue-jeecg/src/views/system/DepartList2.vue
Normal file
@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<!--
|
||||
-->
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<sysDepart-modal ref="sysDepartModal" @ok="modalFormOk"></sysDepart-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SysDepartModal from './modules/DepartModal'
|
||||
/* import { filterObj } from '@/utils/util'
|
||||
, queryByFactories*/
|
||||
import {queryDepartTreeList} from '@/api/api'
|
||||
import {deleteAction} from '@/api/manage'
|
||||
|
||||
// 表头
|
||||
const columns = [
|
||||
{
|
||||
title: '机构名称',
|
||||
dataIndex: 'departName',
|
||||
},
|
||||
{
|
||||
title: '机构类型',
|
||||
align: "center",
|
||||
dataIndex: 'orgType'
|
||||
},
|
||||
{
|
||||
title: '机构编码',
|
||||
dataIndex: 'orgCode'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile'
|
||||
},
|
||||
{
|
||||
title: '传真',
|
||||
dataIndex: 'fax'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'address'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
align: 'center',
|
||||
dataIndex: 'departOrder'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: "center",
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "DepartList2",
|
||||
components: {
|
||||
SysDepartModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: 'jeecg 生成SysDepart代码管理页面',
|
||||
// 查询条件
|
||||
queryParam: {},
|
||||
//数据集
|
||||
factories: '',
|
||||
dataSource: [],
|
||||
columns: columns,
|
||||
// 分页参数
|
||||
/* ipagination:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},*/
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
url: {
|
||||
list: "/sysdepart/sysDepart/list",
|
||||
delete: "/sysdepart/sysDepart/delete",
|
||||
deleteBatch: "/sysdepart/sysDepart/deleteBatch",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.dataSource = [];
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
getQueryField() {
|
||||
//TODO 字段权限控制
|
||||
var str = "id,";
|
||||
for (var a = 0; a < this.columns.length; a++) {
|
||||
str += "," + this.columns[a].dataIndex;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
},
|
||||
//TODO getQueryParams
|
||||
handleDelete: function (id) {
|
||||
var that = this;
|
||||
deleteAction(that.url.delete, {id: id}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDetail(record) {
|
||||
this.$refs.sysDepartModal.edit(record);
|
||||
this.$refs.sysDepartModal.title = "详情";
|
||||
this.$refs.sysDepartModal.disableSubmit = true;
|
||||
},
|
||||
batchDel: function () {
|
||||
if (this.selectedRowKeys.length <= 0) {
|
||||
this.$message.warning('请选择一条记录！');
|
||||
return;
|
||||
} else {
|
||||
var ids = "";
|
||||
for (var a = 0; a < this.selectedRowKeys.length; a++) {
|
||||
ids += this.selectedRowKeys[a] + ",";
|
||||
}
|
||||
var that = this;
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "是否删除选中数据?",
|
||||
onOk: function () {
|
||||
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
that.onClearSelected();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
handleEdit: function (record) {
|
||||
this.$refs.sysDepartModal.edit(record);
|
||||
this.$refs.sysDepartModal.title = "编辑";
|
||||
},
|
||||
handleAdd() {
|
||||
this.$refs.sysDepartModal.add();
|
||||
this.$refs.sysDepartModal.title = "新增";
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
console.log(sorter);
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
}
|
||||
/*this.ipagination = pagination;*/
|
||||
this.loadData();
|
||||
},
|
||||
modalFormOk() {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
194
ant-design-vue-jeecg/src/views/system/DepartUserList.vue
Normal file
194
ant-design-vue-jeecg/src/views/system/DepartUserList.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
||||
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
||||
<!-- 树-->
|
||||
|
||||
<template>
|
||||
|
||||
<!--组织机构-->
|
||||
<a-directory-tree
|
||||
selectable
|
||||
:selectedKeys="selectedKeys"
|
||||
:checkStrictly="true"
|
||||
@select="onSelect"
|
||||
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
||||
:treeData="departTree"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="16" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<a-tabs defaultActiveKey="2" @change="callback">
|
||||
<a-tab-pane tab="基本信息" key="1" forceRender>
|
||||
<Dept-Base-Info ref="DeptBaseInfo"></Dept-Base-Info>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="用户信息" key="2">
|
||||
<Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
import DeptBaseInfo from './modules/DeptBaseInfo'
|
||||
import DeptUserInfo from './modules/DeptUserInfo'
|
||||
import {queryDepartTreeList, searchByKeywords} from '@/api/api'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: 'DepartUserList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
DeptBaseInfo,
|
||||
DeptUserInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDeptId: '',
|
||||
iExpandedKeys: [],
|
||||
loading: false,
|
||||
autoExpandParent: true,
|
||||
currFlowId: '',
|
||||
currFlowName: '',
|
||||
disable: true,
|
||||
treeData: [],
|
||||
visible: false,
|
||||
departTree: [],
|
||||
rightClickSelectedKey: '',
|
||||
hiding: true,
|
||||
model: {},
|
||||
dropTrigger: '',
|
||||
depart: {},
|
||||
disableSubmit: false,
|
||||
checkedKeys: [],
|
||||
selectedKeys: [],
|
||||
autoIncr: 1,
|
||||
currSelected: {},
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
graphDatasource: {
|
||||
nodes: [],
|
||||
edges: []
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
callback(key) {
|
||||
console.log(key)
|
||||
},
|
||||
loadData() {
|
||||
this.refresh();
|
||||
},
|
||||
loadTree() {
|
||||
var that = this
|
||||
that.treeData = []
|
||||
that.departTree = []
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.treeData.push(temp)
|
||||
that.departTree.push(temp)
|
||||
that.setThisExpandedKeys(temp)
|
||||
// console.log(temp.id)
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
setThisExpandedKeys(node) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
this.iExpandedKeys.push(node.key)
|
||||
for (let a = 0; a < node.children.length; a++) {
|
||||
this.setThisExpandedKeys(node.children[a])
|
||||
}
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true
|
||||
this.loadTree()
|
||||
},
|
||||
|
||||
onExpand(expandedKeys) {
|
||||
// console.log('onExpand', expandedKeys)
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.iExpandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
|
||||
onSearch(value) {
|
||||
let that = this
|
||||
if (value) {
|
||||
searchByKeywords({keyWord: value}).then((res) => {
|
||||
if (res.success) {
|
||||
that.departTree = []
|
||||
for (let i = 0; i < res.result.length; i++) {
|
||||
let temp = res.result[i]
|
||||
that.departTree.push(temp)
|
||||
}
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.loadTree()
|
||||
}
|
||||
|
||||
},
|
||||
onCheck(checkedKeys, e) {
|
||||
let record = e.node.dataRef;
|
||||
// console.log('onCheck', checkedKeys, e);
|
||||
this.checkedKeys = [];
|
||||
// if (e.checked === true) {
|
||||
this.currentDeptId = record.id;
|
||||
this.checkedKeys.push(record.id);
|
||||
|
||||
this.$refs.DeptBaseInfo.open(record);
|
||||
this.$refs.DeptUserInfo.open(record);
|
||||
// }
|
||||
// else {
|
||||
// this.checkedKeys = [];
|
||||
// this.$refs.DeptBaseInfo.clearForm();
|
||||
// this.$refs.DeptUserInfo.clearList();
|
||||
// }
|
||||
|
||||
this.hiding = false;
|
||||
// this.checkedKeys = checkedKeys.checked
|
||||
},
|
||||
onSelect(selectedKeys, e) {
|
||||
if (this.selectedKeys[0] !== selectedKeys[0]) {
|
||||
this.selectedKeys = [selectedKeys[0]];
|
||||
}
|
||||
let record = e.node.dataRef;
|
||||
this.checkedKeys.push(record.id);
|
||||
this.$refs.DeptBaseInfo.open(record);
|
||||
this.$refs.DeptUserInfo.onClearSelected();
|
||||
this.$refs.DeptUserInfo.open(record);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.currFlowId = this.$route.params.id
|
||||
this.currFlowName = this.$route.params.name
|
||||
// this.loadTree()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
203
ant-design-vue-jeecg/src/views/system/DictItemList.vue
Normal file
203
ant-design-vue-jeecg/src/views/system/DictItemList.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 抽屉 -->
|
||||
<a-drawer
|
||||
title="字典列表"
|
||||
:width="screenWidth"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<!-- 抽屉内容的border -->
|
||||
<div
|
||||
:style="{
|
||||
padding:'10px',
|
||||
border: '1px solid #e9e9e9',
|
||||
background: '#fff',
|
||||
}">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" :form="form">
|
||||
<a-row :gutter="10">
|
||||
<a-col :md="8" :sm="12">
|
||||
<a-form-item label="名称">
|
||||
<a-input style="width: 120px;" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="9" :sm="24">
|
||||
<a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
placeholder="请选择"
|
||||
v-model="queryParam.status"
|
||||
>
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="24">
|
||||
<span style="float: left;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery">搜索</a-button>
|
||||
<a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="2" :sm="24">
|
||||
<a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import {filterObj} from '@/utils/util';
|
||||
import DictItemModal from './modules/DictItemModal'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: "DictItemList",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {DictItemModal},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
align: "center",
|
||||
dataIndex: 'itemText',
|
||||
},
|
||||
{
|
||||
title: '数据值',
|
||||
align: "center",
|
||||
dataIndex: 'itemValue',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
queryParam: {
|
||||
dictId: "",
|
||||
dictName: "",
|
||||
itemText: "",
|
||||
delFlag: "1",
|
||||
status: [],
|
||||
},
|
||||
title: "操作",
|
||||
visible: false,
|
||||
screenWidth: 800,
|
||||
model: {},
|
||||
dictId: "",
|
||||
status: 1,
|
||||
labelCol: {
|
||||
xs: {span: 5},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 12},
|
||||
sm: {span: 12},
|
||||
},
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
itemText: {rules: [{required: true, message: '请输入名称!'}]},
|
||||
itemValue: {rules: [{required: true, message: '请输入数据值!'}]},
|
||||
},
|
||||
url: {
|
||||
list: "/sys/dictItem/list",
|
||||
delete: "/sys/dictItem/delete",
|
||||
deleteBatch: "/sys/dictItem/deleteBatch",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 当页面初始化时,根据屏幕大小来给抽屉设置宽度
|
||||
this.resetScreenSize();
|
||||
},
|
||||
methods: {
|
||||
add(dictId) {
|
||||
this.dictId = dictId;
|
||||
this.edit({});
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.dictId = record.id;
|
||||
}
|
||||
this.queryParam = {}
|
||||
this.form.resetFields();
|
||||
this.model = Object.assign({}, record);
|
||||
this.model.dictId = this.dictId;
|
||||
this.model.status = this.status;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
|
||||
});
|
||||
// 当其它模块调用该模块时,调用此方法加载字典数据
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
getQueryParams() {
|
||||
var param = Object.assign({}, this.queryParam);
|
||||
param.dictId = this.dictId;
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
|
||||
// 添加字典数据
|
||||
handleAdd() {
|
||||
this.$refs.modalForm.add(this.dictId);
|
||||
this.$refs.modalForm.title = "新增";
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
this.form.resetFields();
|
||||
this.dataSource = [];
|
||||
},
|
||||
// 抽屉的宽度随着屏幕大小来改变
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth;
|
||||
if (screenWidth < 600) {
|
||||
this.screenWidth = screenWidth;
|
||||
} else {
|
||||
this.screenWidth = 600;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
174
ant-design-vue-jeecg/src/views/system/DictList.vue
Normal file
174
ant-design-vue-jeecg/src/views/system/DictList.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 左侧面板 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="7" :sm="8">
|
||||
<a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<div class="table-operator" style="border-top: 5px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
|
||||
<a-button type="primary" icon="download" @click="handleExportXls('字典信息')">导出</a-button>
|
||||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||||
<a-button type="primary" icon="import">导入</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">
|
||||
<a-icon type="edit"/>
|
||||
编辑
|
||||
</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
<dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal> <!-- 字典类型 -->
|
||||
<dict-item-list ref="dictItemList"></dict-item-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import DictModal from './modules/DictModal'
|
||||
import DictItemList from './DictItemList'
|
||||
|
||||
export default {
|
||||
name: "DictList",
|
||||
mixins:[JeecgListMixin],
|
||||
components: {DictModal, DictItemList},
|
||||
data() {
|
||||
return {
|
||||
description: '这是数据字典页面',
|
||||
visible: false,
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
dictCode: "",
|
||||
dictName: "",
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 120,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
align: "left",
|
||||
dataIndex: 'dictName',
|
||||
},
|
||||
{
|
||||
title: '字典编号',
|
||||
align: "left",
|
||||
dataIndex: 'dictCode',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "left",
|
||||
dataIndex: 'description',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}
|
||||
],
|
||||
dict: "",
|
||||
labelCol: {
|
||||
xs: {span: 8},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 16},
|
||||
sm: {span: 19},
|
||||
},
|
||||
url: {
|
||||
list: "/sys/dict/list",
|
||||
delete: "/sys/dict/delete",
|
||||
exportXlsUrl: "sys/dict/exportXls",
|
||||
importExcelUrl: "sys/dict/importExcel",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
importExcelUrl: function () {
|
||||
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams() {
|
||||
var param = Object.assign({}, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
return filterObj(param);
|
||||
},
|
||||
//取消选择
|
||||
cancelDict() {
|
||||
this.dict = "";
|
||||
this.visible = false;
|
||||
this.loadData();
|
||||
},
|
||||
//编辑字典数据
|
||||
editDictItem(record) {
|
||||
this.$refs.dictItemList.edit(record);
|
||||
},
|
||||
// 重置字典类型搜索框的内容
|
||||
searchReset() {
|
||||
var that = this;
|
||||
that.queryParam.dictName = "";
|
||||
that.queryParam.dictCode = "";
|
||||
that.loadData(this.ipagination.current);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
openKeys(val) {
|
||||
console.log('openKeys', val)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
197
ant-design-vue-jeecg/src/views/system/LogList.vue
Normal file
197
ant-design-vue-jeecg/src/views/system/LogList.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!--导航区域-->
|
||||
<div>
|
||||
<a-tabs defaultActiveKey="1" @change="callback">
|
||||
<a-tab-pane tab="登录日志" key="1"></a-tab-pane>
|
||||
<a-tab-pane tab="操作日志" key="2"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="搜索日志">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="8" :sm="10">
|
||||
<a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-range-picker
|
||||
style="width: 210px"
|
||||
v-model="queryParam.createTimeRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onDateChange"
|
||||
@ok="onDateOk"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="8" :sm="10" >
|
||||
<span style="float: right;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" style="left: -35px" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px;left: -35px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
|
||||
<div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
|
||||
<div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
|
||||
<div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
|
||||
</div>
|
||||
|
||||
</a-table>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
|
||||
export default {
|
||||
name: "LogList",
|
||||
mixins:[JeecgListMixin],
|
||||
data () {
|
||||
return {
|
||||
description: '这是日志管理页面',
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
ipInfo:'',
|
||||
createTimeRange:[],
|
||||
logType:'1',
|
||||
keyWord:'',
|
||||
},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日志内容',
|
||||
align:"left",
|
||||
dataIndex: 'logContent',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人ID',
|
||||
dataIndex: 'userid',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人名称',
|
||||
dataIndex: 'username',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'IP',
|
||||
dataIndex: 'ip',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '耗时(毫秒)',
|
||||
dataIndex: 'costTime',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
dataIndex: 'logType_dictText',
|
||||
/*customRender:function (text) {
|
||||
if(text==1){
|
||||
return "登录日志";
|
||||
}else if(text==2){
|
||||
return "操作日志";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
},*/
|
||||
align:"center",
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
align:"center",
|
||||
sorter: true
|
||||
}
|
||||
],
|
||||
labelCol: {
|
||||
xs: { span: 1 },
|
||||
sm: { span: 2 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 10 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
url: {
|
||||
list: "/sys/log/list",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams(){
|
||||
console.log(this.queryParam.createTimeRange)
|
||||
var param = Object.assign({}, this.queryParam,this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
delete param.createTimeRange; // 时间参数不传递后台
|
||||
return filterObj(param);
|
||||
},
|
||||
|
||||
// 重置
|
||||
searchReset(){
|
||||
var that = this;
|
||||
var logType = that.queryParam.logType;
|
||||
that.queryParam = {}; //清空查询区域参数
|
||||
that.queryParam.logType = logType;
|
||||
that.loadData(this.ipagination.current);
|
||||
},
|
||||
// 日志类型
|
||||
callback(key){
|
||||
let that=this;
|
||||
that.queryParam.logType=key;
|
||||
that.loadData();
|
||||
},
|
||||
onDateChange: function (value, dateString) {
|
||||
console.log(dateString[0],dateString[1]);
|
||||
this.queryParam.createTime_begin=dateString[0];
|
||||
this.queryParam.createTime_end=dateString[1];
|
||||
},
|
||||
onDateOk(value) {
|
||||
console.log(value);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
185
ant-design-vue-jeecg/src/views/system/PermissionDataRuleList.vue
Normal file
185
ant-design-vue-jeecg/src/views/system/PermissionDataRuleList.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="数据权限规则"
|
||||
:width="drawerWidth"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
|
||||
>
|
||||
<!-- 抽屉内容的border -->
|
||||
<div
|
||||
:style="{
|
||||
padding:'10px',
|
||||
border: '1px solid #e9e9e9',
|
||||
background: '#fff',
|
||||
}">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="8" :sm="8">
|
||||
<a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="8">
|
||||
<a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
|
||||
<a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="24" :sm="24">
|
||||
<a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:loading="loading"
|
||||
:rowClassName="getRowClassname">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">
|
||||
<a-icon type="edit"/>编辑
|
||||
</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
|
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
||||
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'ruleName',
|
||||
key: 'ruleName'
|
||||
},
|
||||
{
|
||||
title: '规则字段',
|
||||
dataIndex: 'ruleColumn',
|
||||
key: 'ruleColumn'
|
||||
},
|
||||
{
|
||||
title: '规则值',
|
||||
dataIndex: 'ruleValue',
|
||||
key: 'ruleValue'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {customRender: 'action'},
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'PermissionDataRuleList',
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
PermissionDataRuleModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
drawerWidth: 650,
|
||||
columns: columns,
|
||||
permId: '',
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
url: {
|
||||
list: "/sys/permission/getPermRuleListByPermId",
|
||||
delete: "/sys/permission/deletePermissionRule",
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetScreenSize()
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
let that = this
|
||||
this.dataSource = []
|
||||
var params = this.getQueryParams()//查询条件
|
||||
getPermissionRuleList(params).then((res) => {
|
||||
if (res.success) {
|
||||
that.dataSource = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
if (record.id) {
|
||||
this.visible = true
|
||||
this.permId = record.id
|
||||
}
|
||||
this.queryParam = {}
|
||||
this.queryParam.permissionId = record.id
|
||||
this.visible = true
|
||||
this.loadData()
|
||||
this.resetScreenSize()
|
||||
},
|
||||
addPermissionRule() {
|
||||
this.$refs.modalForm.add(this.permId)
|
||||
this.$refs.modalForm.title = '新增'
|
||||
},
|
||||
searchQuery() {
|
||||
var params = this.getQueryParams();
|
||||
params.permissionId = this.permId;
|
||||
queryPermissionRule(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
searchReset() {
|
||||
this.queryParam = {}
|
||||
this.queryParam.permissionId = this.permId
|
||||
this.loadData(1);
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
// 根据屏幕变化,设置抽屉尺寸
|
||||
resetScreenSize() {
|
||||
let screenWidth = document.body.clientWidth
|
||||
if (screenWidth < 500) {
|
||||
this.drawerWidth = screenWidth
|
||||
} else {
|
||||
this.drawerWidth = 650
|
||||
}
|
||||
},
|
||||
getRowClassname(record){
|
||||
if(record.status!=1){
|
||||
return "data-rule-invalid"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.data-rule-invalid{
|
||||
background: #f4f4f4;
|
||||
color: #bababa;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user