other_project/demo
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
fengdong777
2023-04-29 14:25:40 +08:00
parent dd22b1021b
commit f2bac630c2
258 changed files with 33043 additions and 33974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
demo-web-ui/src/views/404.vue
View File

@@ -1,228 +1,228 @@
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">All rights reserved
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
<a href="" class="bullshit__return-home">Back to home</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Page404',
computed: {
message() {
return 'The webmaster said that you can not enter this page...'
}
}
}
</script>
<style lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">All rights reserved
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
<a href="" class="bullshit__return-home">Back to home</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Page404',
computed: {
message() {
return 'The webmaster said that you can not enter this page...'
}
}
}
</script>
<style lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>

655
demo-web-ui/src/views/Home/Home.vue
View File

@@ -1,655 +0,0 @@
<template>
<div style="height: 100%;">
<div class="header">
<p class="title"><img src="../../assets/loginImg/logo.png"/>安瑞集团信息化平台</p>
<div class="head_info" style="display: flex;flex-direction: row;justify-content:space-between;align-items: center">
<div>欢迎您</div>
<div>
<el-select v-model="defaultOrgPathName" class="selectStyle" size="small" placeholder="" @change="changeOrg" filterable>
<el-option v-for="item in orgDept_list" :key="item.orgPath" :label="item.orgName" :value="item.orgName"/>
</el-select>
</div>
<div style="padding-right: 5px">
<el-tooltip placement="top">
<div slot="content">{{ roleName }}</div>
<el-button style="color: #FFFFFF;font-size: 17px" type="text">{{ postName }}</el-button>
</el-tooltip>
</div>
<div>{{ name }}</div>
<div @click="logout()" style="display: flex;flex-direction: row;justify-content:center;align-items: center;padding-left: 20px;padding-right: 10px"><img src="@/assets/images/dy.png"/></div>
</div>
</div>
<div class="container1">
<el-row :gutter="20">
<el-col :span="14">
<ul class="grid-content bg-ltop">
<li @click="todowork">
<div style="position: relative">
<el-badge v-if="shuliang.workCount !== 0" :value="shuliang.workCount" size="mini" class="mark"/>
<img src="@/assets/home/ltIcon1.png">
</div>
<p>待办工作</p>
</li>
<li @click="donework">
<img src="@/assets/home/ltIcon2.png">
<p>已办工作</p>
</li>
<li @click="tobereadwork">
<div style="position: relative">
<el-badge v-if="shuliang.toBeReadCount !== 0" :value="shuliang.toBeReadCount" size="mini" class="mark"/>
<img src="@/assets/home/ltIcon4.png">
</div>
<p>待阅工作</p>
</li>
<li @click="havereadwork">
<img src="@/assets/home/ltIcon3.png">
<p>已阅工作</p>
</li>
</ul>
</el-col>
<el-col :span="10">
<div class="grid-content bg-rtop">
<img class="anrui" src="@/assets/home/anrui.png"/>
<p class="rt_title">通知公告</p>
<ul>
<li>
<img class="rtImg" src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知...</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
<li>
<img src="../../assets/home/notice.png"/>
<span class="notice">关于召开2021年公司全体员工大会的通知</span>
<span class="anrui_time">2021-09-01</span>
</li>
</ul>
</div>
</el-col>
</el-row>
<ul class="bg-bottom">
<li @click="toNav(index)" v-for="(item,index) in menus" :key='index'>
<img :src="item.imgUrl">
<p>{{ item.title }}</p>
</li>
</ul>
<p class="copy">Copyright © {{ year }} 安瑞集团 All Rights Reserved</p>
</div>
<!--<ul class="nav-box">-->
<!--<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>-->
<!--<template v-for="(item, i) in menus">
<li v-if="item.sourceName == '系统管理'" :key="i" @click="toNav('index','系统管理')" :style="{backgroundColor: item.iconBgColor}">
<img :src="item.iconUrl">
<p>{{ item.sourceName }}</p>
</li>
<li v-else :key="i" @click="toNavbar(item.pageUrl)" :style="{backgroundColor: item.iconBgColor}">
<img :src="item.iconUrl">
<p>{{ item.sourceName }}</p>
</li>
</template>-->
<!-- <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li> -->
<!-- <li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li @click="xxzx">
<img src="@/assets/images/xxzx.png">
<p>消息中心</p>
</li>
<li style="background-color: #ffb751;" @click="xxzx">
<img src="@/assets/images/cxjl.png">
<p>诚信计量</p>
</li>
<li style="background-color: #6fb3e0;" @click="xxzx">
<img src="@/assets/images/zwsm.png">
<p>C标志自我声明</p>
</li>
<li style="background-color: #87b880;" @click="xxzx">
<img src="@/assets/images/sjcc.png">
<p>双随机抽查</p>
</li>
<li style="background-color: #448fb9;" @click="xxzx">
<img src="@/assets/images/jlsc.png">
<p>能量计量审查</p>
</li>
<li style="background-color: #24ca95;" @click="xxzx">
<img src="@/assets/images/qjsh.png">
<p>强检计量器具审核</p>
</li>
<li style="background-color: #b4429d;" @click="xxzx">
<img src="@/assets/images/jsxd.png">
<p>技术规范制修订</p>
</li>
<li style="background-color: #b3b442;" @click="toNavbar('http://39.104.100.138:8083/')">
<img src="@/assets/images/xtbg.png">
<p>协同办公</p>
</li>
<li style="background-color: #eab054;" @click="xxzx">
<img src="@/assets/images/tjfx.png">
<p>统计分析</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
<img src="@/assets/images/jcxx.png">
<p>基础信息</p>
</li>
<li style="background-color: #617be8;" @click="toNav('index','系统管理')">
<img src="@/assets/images/xtgl.png">
<p>系统管理</p>
</li> -->
<!--</ul>-->
<el-dialog center :visible.sync="dialogVisible" width="40%" :show-close="false" :close-on-click-modal="false">
<el-form :model="form" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="4" class="tleftb">
<span>原密码</span>
</el-col>
<el-col :span="20">
<el-form-item><el-input v-model="form.original" type="password" show-password/></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>新密码</span>
</el-col>
<el-col :span="20">
<el-form-item><el-input v-model="form.password" type="password" show-password/></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>确认密码</span>
</el-col>
<el-col :span="20">
<el-form-item><el-input v-model="form.confirmPassword" type="password" show-password/></el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleConirm">确 定</el-button>
<el-button size="small" @click="handleQuXiao">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getToken, removeToken, getStorage, removeStorage } from '@/utils/auth'
import {sourcesofrole} from '@/api/system/Role/role.js'
import User from '@/api/User/login.js'
import { getTodoNum } from '@/api/system/home/home'
import { getToBeReadNum } from '@/api/flow/read'
export default {
data() {
return {
menus: [{
imgUrl: require('@/assets/home/bIcon1.png'),
title: '业务管理'
}, {
imgUrl: require('@/assets/home/scm.png'),
title: '供应链管理'
}, {
imgUrl: require('@/assets/home/bIcon2.png'),
title: '风控管理'
}, {
imgUrl: require('@/assets/home/bIcon3.png'),
title: '审计管理'
}, {
imgUrl: require('@/assets/home/bIcon4.png'),
title: '财务管理'
}, {
imgUrl: require('@/assets/home/bIcon5.png'),
title: '行政管理'
}, {
imgUrl: require('@/assets/home/bIcon6.png'),
title: '报表中心'
}, {
imgUrl: require('@/assets/home/bIcon7.png'),
title: '基础信息'
}, {
imgUrl: require('@/assets/home/notice.png'),
title: '消息中心'
}, {
imgUrl: require('@/assets/home/bIcon8.png'),
title: '系统管理'
}],
userInfo: {},
orgDept_list: [],
shuliang: {
workCount: '',
toBeReadCount: ''
},
dialogVisible: false,
form: {
original: '',
password: '',
confirmPassword: '',
userSid: ''
},
timer: '',
Orgname: '',
departmentName: '',
name: '',
pNameAndDepartmentNameAndPostName: '',
defaultOrgPathName: '',
defaultOrgPath: '',
roleName: '',
postName: '',
year: ''
}
},
beforeCreate() {
},
created() {
this.getsPasswordByUserSid()
},
mounted() {
this.Orgname = window.sessionStorage.getItem('Orgname')
this.departmentName = window.sessionStorage.getItem('departmentName')
this.pNameAndDepartmentNameAndPostName = window.sessionStorage.getItem('pNameAndDepartmentNameAndPostName')
this.defaultOrgPathName = window.sessionStorage.getItem('defaultOrgPathName')
this.defaultOrgPath = window.sessionStorage.getItem('defaultOrgPath')
this.roleName = window.sessionStorage.getItem('roleName')
this.postName = window.sessionStorage.getItem('postName')
this.name = window.sessionStorage.getItem('name')
var nowDate = new Date()
this.year = nowDate.getFullYear()
// sourcesofrole({ psid: '0', roleSid: this.$store.getters.userInfo.roleSid }).then(res => {
// this.menus = res.data
// })
},
methods: {
getsPasswordByUserSid() {
User.selectPasswordByUserSid(window.sessionStorage.getItem('userSid')).then((resp) => {
if (resp.success && resp.data) {
this.dialogVisible = true
} else {
this.getNum()
this.timer = setInterval(this.getNum, 20000)
}
})
User.getOrgListByUserSid({ userSid: window.sessionStorage.getItem('userSid') }).then((res) => {
if (res.success) {
this.orgDept_list = res.data
}
})
},
getNum() {
getTodoNum(window.sessionStorage.getItem('userSid')).then((resp) => {
if (resp.success) {
this.shuliang.workCount = resp.data
}
})
getToBeReadNum(window.sessionStorage.getItem('userSid')).then((resp) => {
if (resp.success) {
this.shuliang.toBeReadCount = resp.data
}
})
},
handleConirm() {
if (this.form.original === '') {
this.$message({ showClose: true, type: 'error', message: '原密码不能为空' })
return
}
if (this.form.password !== this.form.confirmPassword) {
this.$message({ showClose: true, type: 'error', message: '两次输入密码不一致' })
return
}
this.form.userSid = window.sessionStorage.getItem('userSid')
User.updatePassword(this.form).then((resp) => {
if (resp.success) {
this.$alert('密码修改成功！请重新登录点击确定后退出。', '修改成功', {
confirmButtonText: '确定',
callback: action => {
this.handleQuXiao()
}
})
}
})
},
handleQuXiao() {
this.dialogVisible = false
this.form = {
original: '',
password: '',
confirmPassword: ''
}
User.logout({ token: getStorage() }).then((res) => {
if (res.success) {
removeStorage()
this.$store.commit('user/SET_UESRINFO', '')
this.$router.push({ path: '/login' })
}
})
},
todowork() {
window.open('/#/todo' + '?token=' + getStorage(), '_blank')
// this.$router.push({ path: '/todo' + '?token=' + getStorage() })
// window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
},
donework() {
window.open('/#/done' + '?token=' + getStorage(), '_blank')
// this.$router.push({ path: '/done' + '?token=' + getStorage() })
// window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
},
tobereadwork() {
window.open('/#/toberead' + '?token=' + getStorage(), '_blank')
},
havereadwork() {
window.open('/#/haveread' + '?token=' + getStorage(), '_blank')
},
logout() {
this.$confirm('确定要退出吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
User.logout({token: getStorage()}).then(res => {
removeStorage()
this.$store.commit('user/SET_UESRINFO', '')
this.$router.push({ path: '/login' })
})
})
},
xxzx() {
this.$alert('项目正在开发中', '提示', {
dangerouslyUseHTMLString: true
})
},
toNavbar(name) {
let myPopup = window.open(name + '?token=' + getStorage(), '_blank')
},
changeOrg(value) {
const choose = this.orgDept_list.filter((item) => item.orgName === value)
this.defaultOrgPathName = choose[0].orgName
this.defaultOrgPath = choose[0].orgPath
},
toNav(index, name, titleName) {
const organizationData = {
defaultOrgPathName: this.defaultOrgPathName,
defaultOrgPath: this.defaultOrgPath
}
if (index == '9') {
// this.$router.push({path: '/index'})
let myPopup = window.open('/#/index', '_blank')
} else if (index == '7') {
// let myPopup = window.open('http://127.0.0.1:9531/base/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/base/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/base/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
} else if (index == '8') {
// let myPopup = window.open('http://127.0.0.1:9531/message/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/message/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/message/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
} else if (index == '1') {
// let myPopup = window.open('http://127.0.0.1:9531/scm/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/scm/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/scm/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
} else if (index == '4') {
// let myPopup = window.open('http://127.0.0.1:9531/fin/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/fin/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/fin/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
} else if (index == '5') {
// let myPopup = window.open('http://127.0.0.1:9531/manage/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/manage/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/manage/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
} else if (index == '0') {
// let myPopup = window.open('http://127.0.0.1:9531/buscenter/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
let myPopup = window.open('http://anrui.yyundong.com/buscenter/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
// let myPopup = window.open('http://120.46.172.184/buscenter/#/' + '?token=' + getStorage() + '&organizationData=' + encodeURI((JSON.stringify(organizationData))), '_blank')
}
// const page = this.$router.resolve({name: name})
// window.open(page.href,'_blank')
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<style scoped="scoped">
li:hover,
p:hover {
cursor: pointer
}
</style>
<style lang="scss" scoped>
p {
margin: 0;
padding: 0;
}
.header {
background-color: #0294d7;
color: #fff;
overflow: hidden;
height: 60px;
line-height: 60px;
.title {
img {
width: 70px;
vertical-align: middle;
font-family: Adobe Heiti Std;
}
float: left;
font-size: 34px;
margin-left: 35px;
height: 60px;
line-height: 60px;
}
.head_info {
float: right;
margin-top: 0;
font-size: 17px;
}
p {
float: left;
}
}
//.head_info img {
// width: 25px;
// margin-top: 20px;
// margin-left: 30px;
// margin-right: 10px;
// float: left;
//}
//
//.head_info .dy {
// margin-left: 10px;
// margin-right: 20px;
//}
.container1 {
background: #E9F1F7;
padding: 20px;
width: 100%;
height: calc(100% - 60px);
margin: 0;
.bg-ltop {
margin: 0;
padding: 0 20px;
background-image: url(../../assets/home/ltBg.png);
border-radius: 10px;
overflow: hidden;
height: 190px;
li {
float: left;
list-style: none;
width: 25%;
text-align: center;
img {
width: 70px;
margin: 45px auto 10px auto;
}
}
}
.bg-rtop {
background-image: url(../../assets/home/rtBg.png);
border-radius: 10px;
height: 190px;
overflow: hidden;
position: relative;
.anrui {
width: 100%;
height: 40px;
}
.rt_title {
position: absolute;
top: 10px;
left: 15px;
font-size: 18px;
font-family: SourceHanSerifCN;
font-weight: 600;
color: #191919;
}
ul {
margin: 0px auto;
padding: 0;
height: 148px;
width: 100%;
li {
font-size: 14px;
height: 33px;
line-height: 28px;
list-style: none;
text-decoration: underline;
border-bottom: 1px solid #666;
width: calc(100% - 70px);
margin-left: 40px;
position: relative;
padding-top: 10px;
font-family: SimSun;
img {
width: 16px;
margin: 5px 10px;
position: absolute;
left: -30px;
}
.notice {
display: inline-block;
width: 65%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.anrui_time {
float: right;
display: inline-block;
margin-right: 5px;
line-height: 30px;
}
}
}
}
.bg-bottom {
background-image: url(../../assets/home/bottomBg.png);
border-radius: 10px;
overflow: hidden;
margin: 20px 0 0 0;
padding: 10px 20px;
li {
float: left;
list-style: none;
width: 11.6%;
margin: 10px 2.5%;
background: #fff;
border-radius: 40px;
text-align: center;
padding: 10px 25px 15px;
img {
width: 80%;
margin: 10px auto;
}
}
}
}
.copy {
position: fixed;
bottom: 0;
width: calc(100% - 40px);
margin: auto;
text-align: center;
line-height: 40px;
border-top: 2px solid #4E74A6;
background: #E9F1F7;
font-size: 14px;
color: #666;
}
.mark {
position: absolute;
top: 38%;
margin-left: 58px;
}
.mark {
::v-deep .el-badge__content {
font-size: 14px !important;
}
}
.selectStyle {
::v-deep .el-input__inner {
border: 0px !important;
background-color: #0294d7 !important;
font-size: 17px;
color: #FFFFFF;
}
}
</style>

136
demo-web-ui/src/views/Process/BpmData.js
View File

@@ -1,68 +1,68 @@
/**
* 存储流程设计相关参数
*/
export default class BpmData {
constructor() {
this.controls = [] // 设计器控件
this.init()
}
init() {
this.controls = [
{
action: 'create.start-event',
title: '开始'
},
{
action: 'create.intermediate-event',
title: '中间'
},
{
action: 'create.end-event',
title: '结束'
},
{
action: 'create.exclusive-gateway',
title: '网关'
},
{
action: 'create.task',
title: '任务'
},
{
action: 'create.user-task',
title: '用户任务'
},
{
action: 'create.user-sign-task',
title: '会签任务'
},
{
action: 'create.subprocess-expanded',
title: '子流程'
},
{
action: 'create.data-object',
title: '数据对象'
},
{
action: 'create.data-store',
title: '数据存储'
},
{
action: 'create.participant-expanded',
title: '扩展流程'
},
{
action: 'create.group',
title: '分组'
}
]
}
// 获取控件配置信息
getControl(action) {
const result = this.controls.filter(item => item.action === action)
return result[0] || {}
}
}
/**
* 存储流程设计相关参数
*/
export default class BpmData {
constructor() {
this.controls = [] // 设计器控件
this.init()
}
init() {
this.controls = [
{
action: 'create.start-event',
title: '开始'
},
{
action: 'create.intermediate-event',
title: '中间'
},
{
action: 'create.end-event',
title: '结束'
},
{
action: 'create.exclusive-gateway',
title: '网关'
},
{
action: 'create.task',
title: '任务'
},
{
action: 'create.user-task',
title: '用户任务'
},
{
action: 'create.user-sign-task',
title: '会签任务'
},
{
action: 'create.subprocess-expanded',
title: '子流程'
},
{
action: 'create.data-object',
title: '数据对象'
},
{
action: 'create.data-store',
title: '数据存储'
},
{
action: 'create.participant-expanded',
title: '扩展流程'
},
{
action: 'create.group',
title: '分组'
}
]
}
// 获取控件配置信息
getControl(action) {
const result = this.controls.filter(item => item.action === action)
return result[0] || {}
}
}

338
demo-web-ui/src/views/Process/PropertyPanel.vue
View File

@@ -1,169 +1,169 @@
<template>
<div ref="propertyPanel" class="property-panel">
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
<component
:is="getComponent"
v-if="element"
:element="element"
:modeler="modeler"
:users="users"
:groups="groups"
:categorys="categorys"
@dataType="dataType"
/>
</div>
</template>
<script>
import taskPanel from './components/nodePanel/task'
import startEndPanel from './components/nodePanel/startEnd'
import processPanel from './components/nodePanel/process'
import sequenceFlowPanel from './components/nodePanel/sequenceFlow'
import gatewayPanel from './components/nodePanel/gateway'
import { NodeName } from './lang/zh'
export default {
name: 'PropertyPanel',
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
},
categorys: {
type: Array,
required: true
},
modeler: {
type: Object,
required: true
}
},
data() {
return {
element: null,
form: {
id: '',
name: '',
color: null
},
roles: [
{ value: 'manager', label: '经理' },
{ value: 'personnel', label: '人事' },
{ value: 'charge', label: '主管' }
]
}
},
computed: {
getComponent() {
const type = this.element?.type
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
return 'startEndPanel'
}
if ([
'bpmn:UserTask',
'bpmn:Task',
'bpmn:SendTask',
'bpmn:ReceiveTask',
'bpmn:ManualTask',
'bpmn:BusinessRuleTask',
'bpmn:ServiceTask',
'bpmn:ScriptTask'
// 'bpmn:CallActivity',
// 'bpmn:SubProcess'
].includes(type)) {
return 'taskPanel'
}
if (type === 'bpmn:SequenceFlow') {
return 'sequenceFlowPanel'
}
if ([
'bpmn:InclusiveGateway',
'bpmn:ExclusiveGateway',
'bpmn:ParallelGateway',
'bpmn:EventBasedGateway'
].includes(type)) {
return 'gatewayPanel'
}
if (type === 'bpmn:Process') {
return 'processPanel'
}
return null
},
nodeName() {
if (this.element) {
const bizObj = this.element.businessObject
const type = bizObj?.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
return NodeName[type] || type
}
return ''
}
},
mounted() {
this.handleModeler()
},
methods: {
handleModeler() {
this.modeler.on('root.added', e => {
if (e.element.type === 'bpmn:Process') {
this.element = null
this.$nextTick().then(() => {
this.element = e.element
})
}
})
this.modeler.on('element.click', e => {
const { element } = e
console.log(element)
if (element.type === 'bpmn:Process') {
this.element = element
}
})
this.modeler.on('selection.changed', e => {
// hack 同类型面板不刷新
this.element = null
const element = e.newSelection[0]
if (element) {
this.$nextTick().then(() => {
this.element = element
})
}
})
},
/** 获取数据类型 */
dataType(data){
this.$emit('dataType', data)
}
}
}
</script>
<style lang="scss">
.property-panel {
padding: 20px 20px;
// reset element css
.el-form--label-top .el-form-item__label {
padding: 0;
}
.el-form-item {
margin-bottom: 6px;
}
.tab-table .el-form-item {
margin-bottom: 16px;
}
.node-name{
border-bottom: 1px solid #ccc;
padding: 0 0 10px 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #444;
}
}
</style>
<template>
<div ref="propertyPanel" class="property-panel">
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
<component
:is="getComponent"
v-if="element"
:element="element"
:modeler="modeler"
:users="users"
:groups="groups"
:categorys="categorys"
@dataType="dataType"
/>
</div>
</template>
<script>
import taskPanel from './components/nodePanel/task'
import startEndPanel from './components/nodePanel/startEnd'
import processPanel from './components/nodePanel/process'
import sequenceFlowPanel from './components/nodePanel/sequenceFlow'
import gatewayPanel from './components/nodePanel/gateway'
import { NodeName } from './lang/zh'
export default {
name: 'PropertyPanel',
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
},
categorys: {
type: Array,
required: true
},
modeler: {
type: Object,
required: true
}
},
data() {
return {
element: null,
form: {
id: '',
name: '',
color: null
},
roles: [
{ value: 'manager', label: '经理' },
{ value: 'personnel', label: '人事' },
{ value: 'charge', label: '主管' }
]
}
},
computed: {
getComponent() {
const type = this.element?.type
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
return 'startEndPanel'
}
if ([
'bpmn:UserTask',
'bpmn:Task',
'bpmn:SendTask',
'bpmn:ReceiveTask',
'bpmn:ManualTask',
'bpmn:BusinessRuleTask',
'bpmn:ServiceTask',
'bpmn:ScriptTask'
// 'bpmn:CallActivity',
// 'bpmn:SubProcess'
].includes(type)) {
return 'taskPanel'
}
if (type === 'bpmn:SequenceFlow') {
return 'sequenceFlowPanel'
}
if ([
'bpmn:InclusiveGateway',
'bpmn:ExclusiveGateway',
'bpmn:ParallelGateway',
'bpmn:EventBasedGateway'
].includes(type)) {
return 'gatewayPanel'
}
if (type === 'bpmn:Process') {
return 'processPanel'
}
return null
},
nodeName() {
if (this.element) {
const bizObj = this.element.businessObject
const type = bizObj?.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
return NodeName[type] || type
}
return ''
}
},
mounted() {
this.handleModeler()
},
methods: {
handleModeler() {
this.modeler.on('root.added', e => {
if (e.element.type === 'bpmn:Process') {
this.element = null
this.$nextTick().then(() => {
this.element = e.element
})
}
})
this.modeler.on('element.click', e => {
const { element } = e
console.log(element)
if (element.type === 'bpmn:Process') {
this.element = element
}
})
this.modeler.on('selection.changed', e => {
// hack 同类型面板不刷新
this.element = null
const element = e.newSelection[0]
if (element) {
this.$nextTick().then(() => {
this.element = element
})
}
})
},
/** 获取数据类型 */
dataType(data){
this.$emit('dataType', data)
}
}
}
</script>
<style lang="scss">
.property-panel {
padding: 20px 20px;
// reset element css
.el-form--label-top .el-form-item__label {
padding: 0;
}
.el-form-item {
margin-bottom: 6px;
}
.tab-table .el-form-item {
margin-bottom: 16px;
}
.node-name{
border-bottom: 1px solid #ccc;
padding: 0 0 10px 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #444;
}
}
</style>

40
demo-web-ui/src/views/Process/common/customTranslate.js
View File

@@ -1,20 +1,20 @@
import translations from '../lang/zh'
export default function customTranslate(template, replacements) {
replacements = replacements || {}
// Translate
template = translations[template] || template
// Replace
return template.replace(/{([^}]+)}/g, function(_, key) {
var str = replacements[key]
if (
translations[replacements[key]] !== null &&
translations[replacements[key]] !== 'undefined'
) {
str = translations[replacements[key]]
}
return str || '{' + key + '}'
})
}
import translations from '../lang/zh'
export default function customTranslate(template, replacements) {
replacements = replacements || {}
// Translate
template = translations[template] || template
// Replace
return template.replace(/{([^}]+)}/g, function(_, key) {
var str = replacements[key]
if (
translations[replacements[key]] !== null &&
translations[replacements[key]] !== 'undefined'
) {
str = translations[replacements[key]]
}
return str || '{' + key + '}'
})
}

48
demo-web-ui/src/views/Process/common/mixinExecutionListener.js
View File

@@ -1,24 +1,24 @@
import executionListenerDialog from '../components/nodePanel/property/executionListener'
export default {
components: {
executionListenerDialog
},
data() {
return {
executionListenerLength: 0,
dialogName: null
}
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
}
}
}
import executionListenerDialog from '../components/nodePanel/property/executionListener'
export default {
components: {
executionListenerDialog
},
data() {
return {
executionListenerLength: 0,
dialogName: null
}
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
}
}
}

140
demo-web-ui/src/views/Process/common/mixinPanel.js
View File

@@ -1,70 +1,70 @@
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
import showConfig from '../flowable/showConfig'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm },
props: {
modeler: {
type: Object,
required: true
},
element: {
type: Object,
required: true
},
categorys: {
type: Array,
default: () => []
}
},
watch: {
'formData.id': function(val) {
this.updateProperties({ id: val })
},
'formData.name': function(val) {
this.updateProperties({ name: val })
},
'formData.documentation': function(val) {
if (!val) {
this.updateProperties({ documentation: [] })
return
}
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
this.updateProperties({ documentation: [documentationElement] })
}
},
methods: {
updateProperties(properties) {
const modeling = this.modeler.get('modeling')
modeling.updateProperties(this.element, properties)
}
},
computed: {
elementType() {
const bizObj = this.element.businessObject
return bizObj.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
},
showConfig() {
return showConfig[this.elementType] || {}
}
}
}
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
import showConfig from '../flowable/showConfig'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm },
props: {
modeler: {
type: Object,
required: true
},
element: {
type: Object,
required: true
},
categorys: {
type: Array,
default: () => []
}
},
watch: {
'formData.id': function(val) {
this.updateProperties({ id: val })
},
'formData.name': function(val) {
this.updateProperties({ name: val })
},
'formData.documentation': function(val) {
if (!val) {
this.updateProperties({ documentation: [] })
return
}
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
this.updateProperties({ documentation: [documentationElement] })
}
},
methods: {
updateProperties(properties) {
const modeling = this.modeler.get('modeling')
modeling.updateProperties(this.element, properties)
}
},
computed: {
elementType() {
const bizObj = this.element.businessObject
return bizObj.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
},
showConfig() {
return showConfig[this.elementType] || {}
}
}
}

44
demo-web-ui/src/views/Process/common/mixinXcrud.js
View File

@@ -1,22 +1,22 @@
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm }
}
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm }
}

106
demo-web-ui/src/views/Process/common/parseElement.js
View File

@@ -1,53 +1,53 @@
export function commonParse(element) {
const result = {
...element.businessObject,
...element.businessObject.$attrs
}
return formatJsonKeyValue(result)
}
export function formatJsonKeyValue(result) {
// 移除flowable前缀，格式化数组
for (const key in result) {
if (key.indexOf('flowable:') === 0) {
const newKey = key.replace('flowable:', '')
result[newKey] = result[key]
delete result[key]
}
}
result = documentationParse(result)
return result
}
export function documentationParse(obj) {
if ('documentation' in obj) {
let str = ''
obj.documentation.forEach(item => {
str += item.text
})
obj.documentation = str
}
return obj
}
export function conditionExpressionParse(obj) {
if ('conditionExpression' in obj) {
obj.conditionExpression = obj.conditionExpression.body
}
return obj
}
export function userTaskParse(obj) {
for (const key in obj) {
if (key === 'candidateUsers') {
obj.userType = 'candidateUsers'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'candidateGroups') {
obj.userType = 'candidateGroups'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'assignee') {
obj.userType = 'assignee'
}
}
return obj
}
export function commonParse(element) {
const result = {
...element.businessObject,
...element.businessObject.$attrs
}
return formatJsonKeyValue(result)
}
export function formatJsonKeyValue(result) {
// 移除flowable前缀，格式化数组
for (const key in result) {
if (key.indexOf('flowable:') === 0) {
const newKey = key.replace('flowable:', '')
result[newKey] = result[key]
delete result[key]
}
}
result = documentationParse(result)
return result
}
export function documentationParse(obj) {
if ('documentation' in obj) {
let str = ''
obj.documentation.forEach(item => {
str += item.text
})
obj.documentation = str
}
return obj
}
export function conditionExpressionParse(obj) {
if ('conditionExpression' in obj) {
obj.conditionExpression = obj.conditionExpression.body
}
return obj
}
export function userTaskParse(obj) {
for (const key in obj) {
if (key === 'candidateUsers') {
obj.userType = 'candidateUsers'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'candidateGroups') {
obj.userType = 'candidateGroups'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'assignee') {
obj.userType = 'assignee'
}
}
return obj
}

48
demo-web-ui/src/views/Process/components/custom/customContextPad.vue
View File

@@ -1,24 +1,24 @@
export default class CustomContextPad {
constructor(config, contextPad, create, elementFactory, injector, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this); // 定义这是一个contextPad
}
getContextPadEntries(element) {}
}
CustomContextPad.$inject = [
'config',
'contextPad',
'create',
'elementFactory',
'injector',
'translate'
];
export default class CustomContextPad {
constructor(config, contextPad, create, elementFactory, injector, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this); // 定义这是一个contextPad
}
getContextPadEntries(element) {}
}
CustomContextPad.$inject = [
'config',
'contextPad',
'create',
'elementFactory',
'injector',
'translate'
];

162
demo-web-ui/src/views/Process/components/nodePanel/gateway.vue
View File

@@ -1,81 +1,81 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否'
}
]
}
}
},
watch: {
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': val })
}
},
created() {
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否'
}
]
}
}
},
watch: {
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': val })
}
},
created() {
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>

226
demo-web-ui/src/views/Process/components/nodePanel/process.vue
View File

@@ -1,113 +1,113 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #signal>
<el-badge :value="signalLength">
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<signalDialog
v-if="dialogName === 'signalDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import signalDialog from './property/signal'
import { commonParse } from '../../common/parseElement'
export default {
components: {
signalDialog
},
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
signalLength: 0,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'select',
name: 'processCategory',
label: '流程分类',
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' }
},
{
xType: 'input',
name: 'id',
label: '流程标识key',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '流程名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'signal',
label: '信号定义'
}
]
}
}
},
watch: {
'formData.processCategory': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:processCategory': val })
}
},
created() {
this.formData = commonParse(this.element)
},
methods: {
computedSignalLength() {
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishSignal() {
if (this.dialogName === 'signalDialog') {
this.computedSignalLength()
}
this.dialogName = ''
}
}
}
</script>
<style>
</style>
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #signal>
<el-badge :value="signalLength">
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<signalDialog
v-if="dialogName === 'signalDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import signalDialog from './property/signal'
import { commonParse } from '../../common/parseElement'
export default {
components: {
signalDialog
},
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
signalLength: 0,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'select',
name: 'processCategory',
label: '流程分类',
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' }
},
{
xType: 'input',
name: 'id',
label: '流程标识key',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '流程名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'signal',
label: '信号定义'
}
]
}
}
},
watch: {
'formData.processCategory': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:processCategory': val })
}
},
created() {
this.formData = commonParse(this.element)
},
methods: {
computedSignalLength() {
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishSignal() {
if (this.dialogName === 'signalDialog') {
this.computedSignalLength()
}
this.dialogName = ''
}
}
}
</script>
<style>
</style>

388
demo-web-ui/src/views/Process/components/nodePanel/property/executionListener.vue
View File

@@ -1,194 +1,194 @@
<template>
<div>
<el-dialog
title="执行监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
executionListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '执行监听器',
name: 'executionListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'start', value: 'start' },
{ label: 'end', value: 'end' },
{ label: 'take', value: 'take' }
]
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
],
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
`
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.executionListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:ExecutionListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.executionListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.executionListener[this.nowIndex]
cache.params = param
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.executionListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
this.formData.executionListener.forEach(item => {
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
executionListener['event'] = item.event
executionListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
executionListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(executionListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>
<template>
<div>
<el-dialog
title="执行监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
executionListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '执行监听器',
name: 'executionListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'start', value: 'start' },
{ label: 'end', value: 'end' },
{ label: 'take', value: 'take' }
]
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
],
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
`
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.executionListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:ExecutionListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.executionListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.executionListener[this.nowIndex]
cache.params = param
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.executionListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
this.formData.executionListener.forEach(item => {
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
executionListener['event'] = item.event
executionListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
executionListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(executionListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

192
demo-web-ui/src/views/Process/components/nodePanel/property/listenerParam.vue
View File

@@ -1,96 +1,96 @@
<template>
<div>
<el-dialog
title="监听器参数"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close', formData.paramList)"
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinXcrud from '../../../common/mixinXcrud'
export default {
mixins: [mixinXcrud],
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
dialogVisible: true,
formData: {
paramList: this.value
}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '监听器参数',
name: 'paramList',
column: [
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '字符串', value: 'stringValue' },
{ label: '表达式', value: 'expression' }
]
},
{
label: '名称',
name: 'name',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '值',
name: 'value',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
methods: {
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>
<template>
<div>
<el-dialog
title="监听器参数"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close', formData.paramList)"
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinXcrud from '../../../common/mixinXcrud'
export default {
mixins: [mixinXcrud],
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
dialogVisible: true,
formData: {
paramList: this.value
}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '监听器参数',
name: 'paramList',
column: [
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '字符串', value: 'stringValue' },
{ label: '表达式', value: 'expression' }
]
},
{
label: '名称',
name: 'name',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '值',
name: 'value',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
methods: {
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

234
demo-web-ui/src/views/Process/components/nodePanel/property/multiInstance.vue
View File

@@ -1,117 +1,117 @@
<template>
<div>
<el-dialog
title="多实例配置"
:visible.sync="dialogVisible"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
class="muti-instance"
@closed="$emit('close')"
>
<el-alert
type="info"
:closable="false"
show-icon
style="margin-bottom: 20px"
>
<template #title>
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
nrOfInstances：实例总数。<br>
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
nrOfCompletedInstances：已完成的实例数量。<br>
loopCounter：给定实例在for-each循环中的index。<br>
</template>
</el-alert>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import { formatJsonKeyValue } from '../../../common/parseElement'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'collection',
label: '集合',
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
},
{
xType: 'input',
name: 'elementVariable',
label: '元素变量',
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
},
{
xType: 'radio',
name: 'isSequential',
label: '执行方式',
dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
},
{
xType: 'input',
name: 'completionCondition',
label: '完成条件',
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
}
],
operate: [
{ text: '确定', show: true, click: _this.save },
{ text: '清空', show: true, click: () => { _this.formData = {} } }
]
}
}
},
mounted() {
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
cache.completionCondition = cache.completionCondition?.body
this.formData = formatJsonKeyValue(cache)
},
methods: {
updateElement() {
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
if (!loopCharacteristics) {
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
}
loopCharacteristics['isSequential'] = this.formData.isSequential
loopCharacteristics['collection'] = this.formData.collection
loopCharacteristics['elementVariable'] = this.formData.elementVariable
if (this.formData.completionCondition) {
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
loopCharacteristics['completionCondition'] = completionCondition
}
this.updateProperties({ loopCharacteristics: loopCharacteristics })
} else {
delete this.element.businessObject.loopCharacteristics
}
},
save() {
this.updateElement()
this.dialogVisible = false
}
}
}
</script>
<style>
.muti-instance .el-form-item {
margin-bottom: 22px;
}
</style>
<template>
<div>
<el-dialog
title="多实例配置"
:visible.sync="dialogVisible"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
class="muti-instance"
@closed="$emit('close')"
>
<el-alert
type="info"
:closable="false"
show-icon
style="margin-bottom: 20px"
>
<template #title>
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
nrOfInstances：实例总数。<br>
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
nrOfCompletedInstances：已完成的实例数量。<br>
loopCounter：给定实例在for-each循环中的index。<br>
</template>
</el-alert>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import { formatJsonKeyValue } from '../../../common/parseElement'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'collection',
label: '集合',
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
},
{
xType: 'input',
name: 'elementVariable',
label: '元素变量',
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
},
{
xType: 'radio',
name: 'isSequential',
label: '执行方式',
dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
},
{
xType: 'input',
name: 'completionCondition',
label: '完成条件',
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
}
],
operate: [
{ text: '确定', show: true, click: _this.save },
{ text: '清空', show: true, click: () => { _this.formData = {} } }
]
}
}
},
mounted() {
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
cache.completionCondition = cache.completionCondition?.body
this.formData = formatJsonKeyValue(cache)
},
methods: {
updateElement() {
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
if (!loopCharacteristics) {
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
}
loopCharacteristics['isSequential'] = this.formData.isSequential
loopCharacteristics['collection'] = this.formData.collection
loopCharacteristics['elementVariable'] = this.formData.elementVariable
if (this.formData.completionCondition) {
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
loopCharacteristics['completionCondition'] = completionCondition
}
this.updateProperties({ loopCharacteristics: loopCharacteristics })
} else {
delete this.element.businessObject.loopCharacteristics
}
},
save() {
this.updateElement()
this.dialogVisible = false
}
}
}
</script>
<style>
.muti-instance .el-form-item {
margin-bottom: 22px;
}
</style>

248
demo-web-ui/src/views/Process/components/nodePanel/property/signal.vue
View File

@@ -1,124 +1,124 @@
<template>
<div>
<el-dialog
title="信号定义"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {
signal: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '信号定义',
name: 'signal',
column: [
{
label: 'scope',
name: 'scope',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '全局', value: 'start' },
{ label: '流程实例', value: 'end' }
]
},
{
label: 'id',
name: 'id',
width: 200,
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '名称',
name: 'name',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
mounted() {
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
// let type
// if ('class' in item.$attrs) type = 'class'
// if ('expression' in item.$attrs) type = 'expression'
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression'
// return {
// event: item.$attrs.event,
// type: type,
// className: item.$attrs[type]
// }
// }) ?? []
},
methods: {
updateElement() {
if (this.formData.signal?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:signal')
}
const length = extensionElements.get('values').length
for (let i = 0; i < length; i++) {
// 清除旧值
extensionElements.get('values').pop()
}
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>
<template>
<div>
<el-dialog
title="信号定义"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {
signal: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '信号定义',
name: 'signal',
column: [
{
label: 'scope',
name: 'scope',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '全局', value: 'start' },
{ label: '流程实例', value: 'end' }
]
},
{
label: 'id',
name: 'id',
width: 200,
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '名称',
name: 'name',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
mounted() {
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
// let type
// if ('class' in item.$attrs) type = 'class'
// if ('expression' in item.$attrs) type = 'expression'
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression'
// return {
// event: item.$attrs.event,
// type: type,
// className: item.$attrs[type]
// }
// }) ?? []
},
methods: {
updateElement() {
if (this.formData.signal?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:signal')
}
const length = extensionElements.get('values').length
for (let i = 0; i < length; i++) {
// 清除旧值
extensionElements.get('values').pop()
}
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

392
demo-web-ui/src/views/Process/components/nodePanel/property/taskListener.vue
View File

@@ -1,196 +1,196 @@
<template>
<div>
<el-dialog
title="任务监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
taskListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '任务监听器',
name: 'taskListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'create', value: 'create' },
{ label: 'assignment', value: 'assignment' },
{ label: 'complete', value: 'complete' },
{ label: 'delete', value: 'delete' }
],
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
`
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
]
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.taskListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:TaskListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.taskListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.taskListener[this.nowIndex]
cache.params = param
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.taskListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
this.formData.taskListener.forEach(item => {
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
taskListener['event'] = item.event
taskListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
taskListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(taskListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>
<template>
<div>
<el-dialog
title="任务监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
taskListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '任务监听器',
name: 'taskListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'create', value: 'create' },
{ label: 'assignment', value: 'assignment' },
{ label: 'complete', value: 'complete' },
{ label: 'delete', value: 'delete' }
],
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
`
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
]
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.taskListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:TaskListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.taskListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.taskListener[this.nowIndex]
cache.params = param
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.taskListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
this.formData.taskListener.forEach(item => {
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
taskListener['event'] = item.event
taskListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
taskListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(taskListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

184
demo-web-ui/src/views/Process/components/nodePanel/sequenceFlow.vue
View File

@@ -1,92 +1,92 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'conditionExpression',
label: '跳转条件'
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式'
}
]
}
}
},
watch: {
'formData.conditionExpression': function(val) {
if (val) {
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
this.updateProperties({ conditionExpression: newCondition })
} else {
this.updateProperties({ conditionExpression: null })
}
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
}
},
created() {
let cache = commonParse(this.element)
cache = conditionExpressionParse(cache)
this.formData = cache
}
}
</script>
<style></style>
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'conditionExpression',
label: '跳转条件'
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式'
}
]
}
}
},
watch: {
'formData.conditionExpression': function(val) {
if (val) {
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
this.updateProperties({ conditionExpression: newCondition })
} else {
this.updateProperties({ conditionExpression: null })
}
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
}
},
created() {
let cache = commonParse(this.element)
cache = conditionExpressionParse(cache)
this.formData = cache
}
}
</script>
<style></style>

188
demo-web-ui/src/views/Process/components/nodePanel/startEnd.vue
View File

@@ -1,94 +1,94 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'initiator',
label: '发起人',
show: !!_this.showConfig.initiator
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
}
]
}
}
},
watch: {
'formData.initiator': function(val) {
if (val === '') val = null
// 默认设置流程发起人
// if (val === '') val = 'INITIATOR'
this.updateProperties({ 'flowable:initiator': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
}
},
created() {
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'initiator',
label: '发起人',
show: !!_this.showConfig.initiator
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
}
]
}
}
},
watch: {
'formData.initiator': function(val) {
if (val === '') val = null
// 默认设置流程发起人
// if (val === '') val = 'INITIATOR'
this.updateProperties({ 'flowable:initiator': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
}
},
created() {
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>

852
demo-web-ui/src/views/Process/components/nodePanel/task.vue
View File

@@ -1,426 +1,426 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #taskListener>
<el-badge :value="taskListenerLength">
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #multiInstance>
<el-badge :is-dot="hasMultiInstance">
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<taskListenerDialog
v-if="dialogName === 'taskListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishTaskListener"
/>
<multiInstanceDialog
v-if="dialogName === 'multiInstanceDialog'"
:element="element"
:modeler="modeler"
@close="finishMultiInstance"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import { commonParse, userTaskParse } from '../../common/parseElement'
export default {
components: {
executionListenerDialog,
taskListenerDialog,
multiInstanceDialog
},
mixins: [mixinPanel],
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
}
},
data() {
return {
userTypeOption: [
{ label: '指定人员', value: 'assignee' },
{ label: '候选人员', value: 'candidateUsers' },
{ label: '候选组', value: 'candidateGroups' }
],
dataTypeOption: [
{ label: '固定', value: 'fixed' },
{ label: '动态', value: 'dynamic' }
],
dialogName: '',
executionListenerLength: 0,
taskListenerLength: 0,
hasMultiInstance: false,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称',
rules: [{ required: true, message: '节点名称不能为空' }]
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'taskListener',
label: '任务监听器',
show: !!_this.showConfig.taskListener
},
{
xType: 'select',
name: 'userType',
label: '人员类型',
dic: _this.userTypeOption,
show: !!_this.showConfig.userType
},
{
xType: 'radio',
name: 'dataType',
label: '指定方式',
dic: _this.dataTypeOption,
show: !!_this.showConfig.dataType,
rules: [{ required: true, message: '请指定方式' }]
},
// {
// xType: 'input',
// name: 'assigneeFixed',
// label: '指定人(表达式)',
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
// },
// {
// xType: 'input',
// name: 'candidateUsersFixed',
// label: '候选人(表达式)',
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
// },
// {
// xType: 'input',
// name: 'candidateGroupsFixed',
// label: '候选组(表达式)',
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
// },
{
xType: 'select',
name: 'assignee',
label: '指定人员',
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
},
{
xType: 'select',
name: 'candidateUsers',
label: '候选人员',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
},
{
xType: 'select',
name: 'candidateGroups',
label: '候选组',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
},
{
xType: 'slot',
name: 'multiInstance',
label: '多实例'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.async
},
{
xType: 'input',
name: 'priority',
label: '优先级',
show: !!_this.showConfig.priority
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式',
show: !!_this.showConfig.skipExpression
},
{
xType: 'switch',
name: 'isForCompensation',
label: '是否为补偿',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.isForCompensation
},
{
xType: 'switch',
name: 'triggerable',
label: '服务任务可触发',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.triggerable
},
{
xType: 'switch',
name: 'autoStoreVariables',
label: '自动存储变量',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.autoStoreVariables
},
{
xType: 'input',
name: 'ruleVariablesInput',
label: '输入变量',
show: !!_this.showConfig.ruleVariablesInput
},
{
xType: 'input',
name: 'rules',
label: '规则',
show: !!_this.showConfig.rules
},
{
xType: 'input',
name: 'resultVariable',
label: '结果变量',
show: !!_this.showConfig.resultVariable
},
{
xType: 'switch',
name: 'exclude',
label: '排除',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.exclude
},
{
xType: 'input',
name: 'class',
label: '类',
show: !!_this.showConfig.class
},
{
xType: 'datePicker',
type: 'datetime',
name: 'dueDate',
label: '到期时间',
show: !!_this.showConfig.dueDate
}
]
}
}
},
watch: {
'formData.userType': function(val, oldVal) {
if (oldVal) {
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
}
},
// 动态选择流程执行人
'formData.dataType': function(val) {
const that = this
this.updateProperties({'flowable:dataType': val})
if (val === 'dynamic') {
this.updateProperties({'flowable:userType': that.formData.userType})
}
// 切换时 删除之前选中的值
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
// 传值到父组件
const params = {
dataType: val,
userType: this.formData.userType
}
this.$emit('dataType', params)
},
'formData.assignee': function(val) {
if (this.formData.userType !== 'assignee') {
delete this.element.businessObject.$attrs[`flowable:assignee`]
return
}
this.updateProperties({'flowable:assignee': val})
},
'formData.candidateUsers': function(val) {
if (this.formData.userType !== 'candidateUsers') {
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
return
}
this.updateProperties({'flowable:candidateUsers': val?.join(',')})
},
'formData.candidateGroups': function(val) {
if (this.formData.userType !== 'candidateGroups') {
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
return
}
this.updateProperties({'flowable:candidateGroups': val?.join(',')})
},
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': true })
},
'formData.dueDate': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:dueDate': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
},
'formData.priority': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:priority': val })
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
},
'formData.isForCompensation': function(val) {
if (val === '') val = null
this.updateProperties({ 'isForCompensation': val })
},
'formData.triggerable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:triggerable': val })
},
'formData.class': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:class': val })
},
'formData.autoStoreVariables': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:autoStoreVariables': val })
},
'formData.exclude': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:exclude': val })
},
'formData.ruleVariablesInput': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:ruleVariablesInput': val })
},
'formData.rules': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:rules': val })
},
'formData.resultVariable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:resultVariable': val })
}
},
created() {
let cache = commonParse(this.element)
cache = userTaskParse(cache)
this.formData = cache
this.computedExecutionListenerLength()
this.computedTaskListenerLength()
this.computedHasMultiInstance()
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
},
computedTaskListenerLength() {
this.taskListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
},
computedHasMultiInstance() {
if (this.element.businessObject.loopCharacteristics) {
this.hasMultiInstance = true
} else {
this.hasMultiInstance = false
}
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
},
finishTaskListener() {
if (this.dialogName === 'taskListenerDialog') {
this.computedTaskListenerLength()
}
this.dialogName = ''
},
finishMultiInstance() {
if (this.dialogName === 'multiInstanceDialog') {
this.computedHasMultiInstance()
}
this.dialogName = ''
}
}
}
</script>
<style></style>
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #taskListener>
<el-badge :value="taskListenerLength">
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #multiInstance>
<el-badge :is-dot="hasMultiInstance">
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<taskListenerDialog
v-if="dialogName === 'taskListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishTaskListener"
/>
<multiInstanceDialog
v-if="dialogName === 'multiInstanceDialog'"
:element="element"
:modeler="modeler"
@close="finishMultiInstance"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import { commonParse, userTaskParse } from '../../common/parseElement'
export default {
components: {
executionListenerDialog,
taskListenerDialog,
multiInstanceDialog
},
mixins: [mixinPanel],
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
}
},
data() {
return {
userTypeOption: [
{ label: '指定人员', value: 'assignee' },
{ label: '候选人员', value: 'candidateUsers' },
{ label: '候选组', value: 'candidateGroups' }
],
dataTypeOption: [
{ label: '固定', value: 'fixed' },
{ label: '动态', value: 'dynamic' }
],
dialogName: '',
executionListenerLength: 0,
taskListenerLength: 0,
hasMultiInstance: false,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称',
rules: [{ required: true, message: '节点名称不能为空' }]
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'taskListener',
label: '任务监听器',
show: !!_this.showConfig.taskListener
},
{
xType: 'select',
name: 'userType',
label: '人员类型',
dic: _this.userTypeOption,
show: !!_this.showConfig.userType
},
{
xType: 'radio',
name: 'dataType',
label: '指定方式',
dic: _this.dataTypeOption,
show: !!_this.showConfig.dataType,
rules: [{ required: true, message: '请指定方式' }]
},
// {
// xType: 'input',
// name: 'assigneeFixed',
// label: '指定人(表达式)',
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
// },
// {
// xType: 'input',
// name: 'candidateUsersFixed',
// label: '候选人(表达式)',
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
// },
// {
// xType: 'input',
// name: 'candidateGroupsFixed',
// label: '候选组(表达式)',
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
// },
{
xType: 'select',
name: 'assignee',
label: '指定人员',
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
},
{
xType: 'select',
name: 'candidateUsers',
label: '候选人员',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
},
{
xType: 'select',
name: 'candidateGroups',
label: '候选组',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
},
{
xType: 'slot',
name: 'multiInstance',
label: '多实例'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.async
},
{
xType: 'input',
name: 'priority',
label: '优先级',
show: !!_this.showConfig.priority
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式',
show: !!_this.showConfig.skipExpression
},
{
xType: 'switch',
name: 'isForCompensation',
label: '是否为补偿',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.isForCompensation
},
{
xType: 'switch',
name: 'triggerable',
label: '服务任务可触发',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.triggerable
},
{
xType: 'switch',
name: 'autoStoreVariables',
label: '自动存储变量',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.autoStoreVariables
},
{
xType: 'input',
name: 'ruleVariablesInput',
label: '输入变量',
show: !!_this.showConfig.ruleVariablesInput
},
{
xType: 'input',
name: 'rules',
label: '规则',
show: !!_this.showConfig.rules
},
{
xType: 'input',
name: 'resultVariable',
label: '结果变量',
show: !!_this.showConfig.resultVariable
},
{
xType: 'switch',
name: 'exclude',
label: '排除',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.exclude
},
{
xType: 'input',
name: 'class',
label: '类',
show: !!_this.showConfig.class
},
{
xType: 'datePicker',
type: 'datetime',
name: 'dueDate',
label: '到期时间',
show: !!_this.showConfig.dueDate
}
]
}
}
},
watch: {
'formData.userType': function(val, oldVal) {
if (oldVal) {
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
}
},
// 动态选择流程执行人
'formData.dataType': function(val) {
const that = this
this.updateProperties({'flowable:dataType': val})
if (val === 'dynamic') {
this.updateProperties({'flowable:userType': that.formData.userType})
}
// 切换时 删除之前选中的值
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
// 传值到父组件
const params = {
dataType: val,
userType: this.formData.userType
}
this.$emit('dataType', params)
},
'formData.assignee': function(val) {
if (this.formData.userType !== 'assignee') {
delete this.element.businessObject.$attrs[`flowable:assignee`]
return
}
this.updateProperties({'flowable:assignee': val})
},
'formData.candidateUsers': function(val) {
if (this.formData.userType !== 'candidateUsers') {
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
return
}
this.updateProperties({'flowable:candidateUsers': val?.join(',')})
},
'formData.candidateGroups': function(val) {
if (this.formData.userType !== 'candidateGroups') {
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
return
}
this.updateProperties({'flowable:candidateGroups': val?.join(',')})
},
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': true })
},
'formData.dueDate': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:dueDate': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
},
'formData.priority': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:priority': val })
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
},
'formData.isForCompensation': function(val) {
if (val === '') val = null
this.updateProperties({ 'isForCompensation': val })
},
'formData.triggerable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:triggerable': val })
},
'formData.class': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:class': val })
},
'formData.autoStoreVariables': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:autoStoreVariables': val })
},
'formData.exclude': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:exclude': val })
},
'formData.ruleVariablesInput': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:ruleVariablesInput': val })
},
'formData.rules': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:rules': val })
},
'formData.resultVariable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:resultVariable': val })
}
},
created() {
let cache = commonParse(this.element)
cache = userTaskParse(cache)
this.formData = cache
this.computedExecutionListenerLength()
this.computedTaskListenerLength()
this.computedHasMultiInstance()
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
},
computedTaskListenerLength() {
this.taskListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
},
computedHasMultiInstance() {
if (this.element.businessObject.loopCharacteristics) {
this.hasMultiInstance = true
} else {
this.hasMultiInstance = false
}
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
},
finishTaskListener() {
if (this.dialogName === 'taskListenerDialog') {
this.computedTaskListenerLength()
}
this.dialogName = ''
},
finishMultiInstance() {
if (this.dialogName === 'multiInstanceDialog') {
this.computedHasMultiInstance()
}
this.dialogName = ''
}
}
}
</script>
<style></style>

2388
demo-web-ui/src/views/Process/flowable/flowable.json
View File

File diff suppressed because it is too large Load Diff

48
demo-web-ui/src/views/Process/flowable/init.js
View File

@@ -1,24 +1,24 @@
function randomStr() {
return Math.random().toString(36).slice(-8)
}
export default function() {
return `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
<process id="process_${randomStr()}" name="name_${randomStr()}">
<startEvent id="startNode1" name="开始" />
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_flow">
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
<omgdc:Bounds x="240" y="200" width="30" height="30" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="242" y="237" width="23" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
`
}
function randomStr() {
return Math.random().toString(36).slice(-8)
}
export default function() {
return `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
<process id="process_${randomStr()}" name="name_${randomStr()}">
<startEvent id="startNode1" name="开始" />
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_flow">
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
<omgdc:Bounds x="240" y="200" width="30" height="30" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="242" y="237" width="23" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
`
}

110
demo-web-ui/src/views/Process/flowable/showConfig.js
View File

@@ -1,55 +1,55 @@
export default {
'bpmn:EndEvent': {},
'bpmn:StartEvent': {
initiator: true,
formKey: true
},
'bpmn:UserTask': {
userType: true,
dataType: true,
assignee: true,
candidateUsers: true,
candidateGroups: true,
// assigneeFixed: true,
// candidateUsersFixed: true,
// candidateGroupsFixed: true,
async: true,
priority: true,
formKey: true,
skipExpression: true,
dueDate: true,
taskListener: true
},
'bpmn:ServiceTask': {
async: true,
skipExpression: true,
isForCompensation: true,
triggerable: true,
class: true
},
'bpmn:ScriptTask': {
async: true,
isForCompensation: true,
autoStoreVariables: true
},
'bpmn:ManualTask': {
async: true,
isForCompensation: true
},
'bpmn:ReceiveTask': {
async: true,
isForCompensation: true
},
'bpmn:SendTask': {
async: true,
isForCompensation: true
},
'bpmn:BusinessRuleTask': {
async: true,
isForCompensation: true,
ruleVariablesInput: true,
rules: true,
resultVariable: true,
exclude: true
}
}
export default {
'bpmn:EndEvent': {},
'bpmn:StartEvent': {
initiator: true,
formKey: true
},
'bpmn:UserTask': {
userType: true,
dataType: true,
assignee: true,
candidateUsers: true,
candidateGroups: true,
// assigneeFixed: true,
// candidateUsersFixed: true,
// candidateGroupsFixed: true,
async: true,
priority: true,
formKey: true,
skipExpression: true,
dueDate: true,
taskListener: true
},
'bpmn:ServiceTask': {
async: true,
skipExpression: true,
isForCompensation: true,
triggerable: true,
class: true
},
'bpmn:ScriptTask': {
async: true,
isForCompensation: true,
autoStoreVariables: true
},
'bpmn:ManualTask': {
async: true,
isForCompensation: true
},
'bpmn:ReceiveTask': {
async: true,
isForCompensation: true
},
'bpmn:SendTask': {
async: true,
isForCompensation: true
},
'bpmn:BusinessRuleTask': {
async: true,
isForCompensation: true,
ruleVariablesInput: true,
rules: true,
resultVariable: true,
exclude: true
}
}

10
demo-web-ui/src/views/Process/index.js
View File

@@ -1,5 +1,5 @@
import workflowBpmnModeler from './index.vue'
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
export default workflowBpmnModeler
import workflowBpmnModeler from './index.vue'
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
export default workflowBpmnModeler

956
demo-web-ui/src/views/Process/index.vue
View File

@@ -1,478 +1,478 @@
<template>
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
<el-container style="height: 100%">
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;">
<div style="display: flex; padding: 10px 0px; justify-content: space-between;">
{{xml}} <div>
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">
<el-tooltip effect="dark" content="加载xml" placement="bottom">
<el-button size="mini" icon="el-icon-folder-opened" />
</el-tooltip>
</el-upload>
<el-tooltip effect="dark" content="新建" placement="bottom">
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" />
</el-tooltip>
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" />
</el-tooltip>
<el-tooltip effect="dark" content="放大" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" />
</el-tooltip>
<el-tooltip effect="dark" content="缩小" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" />
</el-tooltip>
<el-tooltip effect="dark" content="后退" placement="bottom">
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" />
</el-tooltip>
<el-tooltip effect="dark" content="前进" placement="bottom">
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" />
</el-tooltip>
</div>
<div>
<el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
<el-button size="mini" type="primary" @click="save">保存模型</el-button>
</div>
</div>
</el-header>
<el-container style="align-items: stretch">
<el-main style="padding: 0;">
<div ref="canvas" class="canvas" />
</el-main>
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
// 汉化
import customTranslate from './common/customTranslate'
import Modeler from 'bpmn-js/lib/Modeler'
import panel from './PropertyPanel'
import BpmData from './BpmData'
import getInitStr from './flowable/init'
// 引入flowable的节点文件
import flowableModdle from './flowable/flowable.json'
export default {
name: 'WorkflowBpmnModeler',
components: {
panel
},
props: {
xml: {
type: String,
default: ''
},
users: {
type: Array,
default: () => []
},
groups: {
type: Array,
default: () => []
},
categorys: {
type: Array,
default: () => []
},
isView: {
type: Boolean,
default: false
},
taskList: {
type: Array,
default: () => []
}
},
data() {
return {
modeler: null,
zoom: 1
}
},
watch: {
xml: function(val) {
if (val) {
this.createNewDiagram(val)
}
},
// 流程实例的颜色
taskList:function (){
this.createNewDiagram(this.xml)
}
},
mounted() {
// 生成实例
this.modeler = new Modeler({
container: this.$refs.canvas,
additionalModules: [
{
translate: ['value', customTranslate]
}
],
moddleExtensions: {
flowable: flowableModdle
}
})
console.log('1111111111111111111111111111111');
console.log(this.xml);
console.log(this.taskList);
console.log('1111111111111111111111111111122');
// 新增流程定义
if (!this.xml) {
this.newDiagram()
} else {
this.createNewDiagram(this.xml)
}
},
methods: {
newDiagram() {
this.createNewDiagram(getInitStr())
},
// 让图能自适应屏幕
fitViewport() {
this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
const bbox = document.querySelector('.flow-containers .viewport').getBBox()
const currentViewbox = this.modeler.get('canvas').viewbox()
const elementMid = {
x: bbox.x + bbox.width / 2 - 65,
y: bbox.y + bbox.height / 2
}
this.modeler.get('canvas').viewbox({
x: elementMid.x - currentViewbox.width / 2,
y: elementMid.y - currentViewbox.height / 2,
width: currentViewbox.width,
height: currentViewbox.height
})
this.zoom = bbox.width / currentViewbox.width * 1.8
},
// 放大缩小
zoomViewport(zoomIn = true) {
this.zoom = this.modeler.get('canvas').zoom()
this.zoom += (zoomIn ? 0.1 : -0.1)
this.modeler.get('canvas').zoom(this.zoom)
},
async createNewDiagram(data) {
// 将字符串转换成图显示出来
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
return str.replace(/</g, '&lt;')
})
try {
await this.modeler.importXML(data)
this.adjustPalette()
this.fitViewport()
if (this.taskList !==undefined && this.taskList.length > 0 ) {
this.fillColor()
}
} catch (err) {
console.error(err.message, err.warnings)
}
},
// 调整左侧工具栏排版
adjustPalette() {
try {
// 获取 bpmn 设计器实例
const canvas = this.$refs.canvas
const djsPalette = canvas.children[0].children[1].children[4]
const djsPalStyle = {
width: '130px',
padding: '5px',
background: 'white',
left: '20px',
borderRadius: 0
}
for (var key in djsPalStyle) {
djsPalette.style[key] = djsPalStyle[key]
}
const palette = djsPalette.children[0]
const allGroups = palette.children
allGroups[0].style['display'] = 'none'
// 修改控件样式
for (var gKey in allGroups) {
const group = allGroups[gKey]
for (var cKey in group.children) {
const control = group.children[cKey]
const controlStyle = {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: '100%',
padding: '5px'
}
if (
control.className &&
control.dataset &&
control.className.indexOf('entry') !== -1
) {
const controlProps = new BpmData().getControl(
control.dataset.action
)
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
controlProps['title']
}</div>`
for (var csKey in controlStyle) {
control.style[csKey] = controlStyle[csKey]
}
}
}
}
} catch (e) {
console.log(e)
}
},
fillColor() {
const canvas = this.modeler.get('canvas')
this.modeler._definitions.rootElements[0].flowElements.forEach(n => {
const completeTask = this.taskList.find(m => m.key === n.id)
const todoTask = this.taskList.find(m => !m.completed)
const endTask = this.taskList[this.taskList.length - 1]
if (n.$type === 'bpmn:UserTask') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
// canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
// canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(n.id,'highlight-todo')
}else {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
} else {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
// canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
// canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(n.id,'highlight-todo')
}
}
})
}
}
// 排他网关
else if (n.$type === 'bpmn:ExclusiveGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
// 并行网关
else if (n.$type === 'bpmn:ParallelGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
debugger
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
else if (n.$type === 'bpmn:StartEvent') {
n.outgoing.forEach(nn => {
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(n.id, 'highlight')
return
}
})
}
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight')
return
}
}
})
},
// 对外 api
getProcess() {
const element = this.getProcessElement()
return {
id: element.id,
name: element.name,
category: element.$attrs['flowable:processCategory']
}
},
getProcessElement() {
const rootElements = this.modeler.getDefinitions().rootElements
for (let i = 0; i < rootElements.length; i++) {
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
}
},
async saveXML(download = false) {
try {
const { xml } = await this.modeler.saveXML({ format: true })
if (download) {
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
}
return xml
} catch (err) {
console.log(err)
}
},
async showXML() {
try {
const { xml } = await this.modeler.saveXML({ format: true })
debugger
this.$emit('showXML',xml)
} catch (err) {
console.log(err)
}
},
async saveImg(type = 'svg', download = false) {
try {
const { svg } = await this.modeler.saveSVG({ format: true })
if (download) {
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
}
return svg
} catch (err) {
console.log(err)
}
},
async save() {
const process = this.getProcess()
const xml = await this.saveXML()
const svg = await this.saveImg()
const result = { process, xml, svg }
this.$emit('save', result)
window.parent.postMessage(result, '*')
},
openBpmn(file) {
const reader = new FileReader()
reader.readAsText(file, 'utf-8')
reader.onload = () => {
this.createNewDiagram(reader.result)
}
return false
},
downloadFile(filename, data, type) {
var a = document.createElement('a')
var url = window.URL.createObjectURL(new Blob([data], { type: type }))
a.href = url
a.download = filename
a.click()
window.URL.revokeObjectURL(url)
},
/** 获取数据类型 */
dataType(data){
this.$emit('dataType', data)
}
}
}
</script>
<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.view-mode {
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
display: none;
}
.el-loading-mask {
background-color: initial;
}
.el-loading-spinner {
display: none;
}
}
.flow-containers {
// background-color: #ffffff;
width: 100%;
height: 100%;
.canvas {
width: 100%;
height: 100%;
}
.panel {
position: absolute;
right: 0;
top: 50px;
width: 300px;
}
.load {
margin-right: 10px;
}
.el-form-item__label{
font-size: 13px;
}
.djs-palette{
left: 0px!important;
top: 0px;
border-top: none;
}
.djs-container svg {
min-height: 650px;
}
.highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
.highlight.djs-shape .djs-visual > :nth-child(2) {
fill: green !important;
}
.highlight.djs-shape .djs-visual > path {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
.highlight.djs-connection > .djs-visual > path {
stroke: green !important;
}
// .djs-connection > .djs-visual > path {
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
// .djs-shape .djs-visual > :nth-child(1) {
// fill: orange !important;
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
.highlight-todo.djs-connection > .djs-visual > path {
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill: orange !important;
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.overlays-div {
font-size: 10px;
color: red;
width: 100px;
top: -20px !important;
}
}
</style>
<template>
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
<el-container style="height: 100%">
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;">
<div style="display: flex; padding: 10px 0px; justify-content: space-between;">
{{xml}} <div>
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">
<el-tooltip effect="dark" content="加载xml" placement="bottom">
<el-button size="mini" icon="el-icon-folder-opened" />
</el-tooltip>
</el-upload>
<el-tooltip effect="dark" content="新建" placement="bottom">
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" />
</el-tooltip>
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" />
</el-tooltip>
<el-tooltip effect="dark" content="放大" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" />
</el-tooltip>
<el-tooltip effect="dark" content="缩小" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" />
</el-tooltip>
<el-tooltip effect="dark" content="后退" placement="bottom">
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" />
</el-tooltip>
<el-tooltip effect="dark" content="前进" placement="bottom">
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" />
</el-tooltip>
</div>
<div>
<el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
<el-button size="mini" type="primary" @click="save">保存模型</el-button>
</div>
</div>
</el-header>
<el-container style="align-items: stretch">
<el-main style="padding: 0;">
<div ref="canvas" class="canvas" />
</el-main>
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
// 汉化
import customTranslate from './common/customTranslate'
import Modeler from 'bpmn-js/lib/Modeler'
import panel from './PropertyPanel'
import BpmData from './BpmData'
import getInitStr from './flowable/init'
// 引入flowable的节点文件
import flowableModdle from './flowable/flowable.json'
export default {
name: 'WorkflowBpmnModeler',
components: {
panel
},
props: {
xml: {
type: String,
default: ''
},
users: {
type: Array,
default: () => []
},
groups: {
type: Array,
default: () => []
},
categorys: {
type: Array,
default: () => []
},
isView: {
type: Boolean,
default: false
},
taskList: {
type: Array,
default: () => []
}
},
data() {
return {
modeler: null,
zoom: 1
}
},
watch: {
xml: function(val) {
if (val) {
this.createNewDiagram(val)
}
},
// 流程实例的颜色
taskList:function (){
this.createNewDiagram(this.xml)
}
},
mounted() {
// 生成实例
this.modeler = new Modeler({
container: this.$refs.canvas,
additionalModules: [
{
translate: ['value', customTranslate]
}
],
moddleExtensions: {
flowable: flowableModdle
}
})
console.log('1111111111111111111111111111111');
console.log(this.xml);
console.log(this.taskList);
console.log('1111111111111111111111111111122');
// 新增流程定义
if (!this.xml) {
this.newDiagram()
} else {
this.createNewDiagram(this.xml)
}
},
methods: {
newDiagram() {
this.createNewDiagram(getInitStr())
},
// 让图能自适应屏幕
fitViewport() {
this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
const bbox = document.querySelector('.flow-containers .viewport').getBBox()
const currentViewbox = this.modeler.get('canvas').viewbox()
const elementMid = {
x: bbox.x + bbox.width / 2 - 65,
y: bbox.y + bbox.height / 2
}
this.modeler.get('canvas').viewbox({
x: elementMid.x - currentViewbox.width / 2,
y: elementMid.y - currentViewbox.height / 2,
width: currentViewbox.width,
height: currentViewbox.height
})
this.zoom = bbox.width / currentViewbox.width * 1.8
},
// 放大缩小
zoomViewport(zoomIn = true) {
this.zoom = this.modeler.get('canvas').zoom()
this.zoom += (zoomIn ? 0.1 : -0.1)
this.modeler.get('canvas').zoom(this.zoom)
},
async createNewDiagram(data) {
// 将字符串转换成图显示出来
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
return str.replace(/</g, '&lt;')
})
try {
await this.modeler.importXML(data)
this.adjustPalette()
this.fitViewport()
if (this.taskList !==undefined && this.taskList.length > 0 ) {
this.fillColor()
}
} catch (err) {
console.error(err.message, err.warnings)
}
},
// 调整左侧工具栏排版
adjustPalette() {
try {
// 获取 bpmn 设计器实例
const canvas = this.$refs.canvas
const djsPalette = canvas.children[0].children[1].children[4]
const djsPalStyle = {
width: '130px',
padding: '5px',
background: 'white',
left: '20px',
borderRadius: 0
}
for (var key in djsPalStyle) {
djsPalette.style[key] = djsPalStyle[key]
}
const palette = djsPalette.children[0]
const allGroups = palette.children
allGroups[0].style['display'] = 'none'
// 修改控件样式
for (var gKey in allGroups) {
const group = allGroups[gKey]
for (var cKey in group.children) {
const control = group.children[cKey]
const controlStyle = {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: '100%',
padding: '5px'
}
if (
control.className &&
control.dataset &&
control.className.indexOf('entry') !== -1
) {
const controlProps = new BpmData().getControl(
control.dataset.action
)
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
controlProps['title']
}</div>`
for (var csKey in controlStyle) {
control.style[csKey] = controlStyle[csKey]
}
}
}
}
} catch (e) {
console.log(e)
}
},
fillColor() {
const canvas = this.modeler.get('canvas')
this.modeler._definitions.rootElements[0].flowElements.forEach(n => {
const completeTask = this.taskList.find(m => m.key === n.id)
const todoTask = this.taskList.find(m => !m.completed)
const endTask = this.taskList[this.taskList.length - 1]
if (n.$type === 'bpmn:UserTask') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
// canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
// canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(n.id,'highlight-todo')
}else {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
} else {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
// canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
// canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(n.id,'highlight-todo')
}
}
})
}
}
// 排他网关
else if (n.$type === 'bpmn:ExclusiveGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
// 并行网关
else if (n.$type === 'bpmn:ParallelGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
debugger
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
else if (n.$type === 'bpmn:StartEvent') {
n.outgoing.forEach(nn => {
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(n.id, 'highlight')
return
}
})
}
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight')
return
}
}
})
},
// 对外 api
getProcess() {
const element = this.getProcessElement()
return {
id: element.id,
name: element.name,
category: element.$attrs['flowable:processCategory']
}
},
getProcessElement() {
const rootElements = this.modeler.getDefinitions().rootElements
for (let i = 0; i < rootElements.length; i++) {
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
}
},
async saveXML(download = false) {
try {
const { xml } = await this.modeler.saveXML({ format: true })
if (download) {
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
}
return xml
} catch (err) {
console.log(err)
}
},
async showXML() {
try {
const { xml } = await this.modeler.saveXML({ format: true })
debugger
this.$emit('showXML',xml)
} catch (err) {
console.log(err)
}
},
async saveImg(type = 'svg', download = false) {
try {
const { svg } = await this.modeler.saveSVG({ format: true })
if (download) {
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
}
return svg
} catch (err) {
console.log(err)
}
},
async save() {
const process = this.getProcess()
const xml = await this.saveXML()
const svg = await this.saveImg()
const result = { process, xml, svg }
this.$emit('save', result)
window.parent.postMessage(result, '*')
},
openBpmn(file) {
const reader = new FileReader()
reader.readAsText(file, 'utf-8')
reader.onload = () => {
this.createNewDiagram(reader.result)
}
return false
},
downloadFile(filename, data, type) {
var a = document.createElement('a')
var url = window.URL.createObjectURL(new Blob([data], { type: type }))
a.href = url
a.download = filename
a.click()
window.URL.revokeObjectURL(url)
},
/** 获取数据类型 */
dataType(data){
this.$emit('dataType', data)
}
}
}
</script>
<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.view-mode {
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
display: none;
}
.el-loading-mask {
background-color: initial;
}
.el-loading-spinner {
display: none;
}
}
.flow-containers {
// background-color: #ffffff;
width: 100%;
height: 100%;
.canvas {
width: 100%;
height: 100%;
}
.panel {
position: absolute;
right: 0;
top: 50px;
width: 300px;
}
.load {
margin-right: 10px;
}
.el-form-item__label{
font-size: 13px;
}
.djs-palette{
left: 0px!important;
top: 0px;
border-top: none;
}
.djs-container svg {
min-height: 650px;
}
.highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
.highlight.djs-shape .djs-visual > :nth-child(2) {
fill: green !important;
}
.highlight.djs-shape .djs-visual > path {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
.highlight.djs-connection > .djs-visual > path {
stroke: green !important;
}
// .djs-connection > .djs-visual > path {
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
// .djs-shape .djs-visual > :nth-child(1) {
// fill: orange !important;
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
.highlight-todo.djs-connection > .djs-visual > path {
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill: orange !important;
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.overlays-div {
font-size: 10px;
color: red;
width: 100px;
top: -20px !important;
}
}
</style>

454
demo-web-ui/src/views/Process/lang/zh.js
View File

@@ -1,227 +1,227 @@
export default {
// Labels
'Activate the global connect tool': '激活全局连接工具',
'Append {type}': '添加 {type}',
'Add Lane above': '在上面添加道',
'Divide into two Lanes': '分割成两个道',
'Divide into three Lanes': '分割成三个道',
'Add Lane below': '在下面添加道',
'Append compensation activity': '追加补偿活动',
'Change type': '修改类型',
'Connect using Association': '使用关联连接',
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
'Connect using DataInputAssociation': '使用数据输入关联连接',
'Remove': '移除',
'Activate the hand tool': '激活抓手工具',
'Activate the lasso tool': '激活套索工具',
'Activate the create/remove space tool': '激活创建/删除空间工具',
'Create expanded SubProcess': '创建扩展子过程',
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
'Create Pool/Participant': '创建池/参与者',
'Parallel Multi Instance': '并行多重事件',
'Sequential Multi Instance': '时序多重事件',
'DataObjectReference': '数据对象参考',
'DataStoreReference': '数据存储参考',
'Loop': '循环',
'Ad-hoc': '即席',
'Create {type}': '创建 {type}',
'Task': '任务',
'Send Task': '发送任务',
'Receive Task': '接收任务',
'User Task': '用户任务',
'Manual Task': '手工任务',
'Business Rule Task': '业务规则任务',
'Service Task': '服务任务',
'Script Task': '脚本任务',
'Call Activity': '调用活动',
'Sub Process (collapsed)': '子流程（折叠的）',
'Sub Process (expanded)': '子流程（展开的）',
'Start Event': '开始事件',
'StartEvent': '开始事件',
'Intermediate Throw Event': '中间事件',
'End Event': '结束事件',
'EndEvent': '结束事件',
'Create Gateway': '创建网关',
'Create Intermediate/Boundary Event': '创建中间/边界事件',
'Message Start Event': '消息开始事件',
'Timer Start Event': '定时开始事件',
'Conditional Start Event': '条件开始事件',
'Signal Start Event': '信号开始事件',
'Error Start Event': '错误开始事件',
'Escalation Start Event': '升级开始事件',
'Compensation Start Event': '补偿开始事件',
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
'Message Intermediate Catch Event': '消息中间捕获事件',
'Message Intermediate Throw Event': '消息中间抛出事件',
'Timer Intermediate Catch Event': '定时中间捕获事件',
'Escalation Intermediate Throw Event': '升级中间抛出事件',
'Conditional Intermediate Catch Event': '条件中间捕获事件',
'Link Intermediate Catch Event': '链接中间捕获事件',
'Link Intermediate Throw Event': '链接中间抛出事件',
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
'Signal Intermediate Catch Event': '信号中间捕获事件',
'Signal Intermediate Throw Event': '信号中间抛出事件',
'Message End Event': '消息结束事件',
'Escalation End Event': '定时结束事件',
'Error End Event': '错误结束事件',
'Cancel End Event': '取消结束事件',
'Compensation End Event': '补偿结束事件',
'Signal End Event': '信号结束事件',
'Terminate End Event': '终止结束事件',
'Message Boundary Event': '消息边界事件',
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
'Timer Boundary Event': '定时边界事件',
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
'Escalation Boundary Event': '升级边界事件',
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
'Conditional Boundary Event': '条件边界事件',
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
'Error Boundary Event': '错误边界事件',
'Cancel Boundary Event': '取消边界事件',
'Signal Boundary Event': '信号边界事件',
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
'Compensation Boundary Event': '补偿边界事件',
'Exclusive Gateway': '互斥网关',
'Parallel Gateway': '并行网关',
'Inclusive Gateway': '相容网关',
'Complex Gateway': '复杂网关',
'Event based Gateway': '事件网关',
'Transaction': '转运',
'Sub Process': '子流程',
'Event Sub Process': '事件子流程',
'Collapsed Pool': '折叠池',
'Expanded Pool': '展开池',
// Errors
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
'no shape type specified': '没有指定的形状类型',
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
'out of bounds release': 'out of bounds release',
'more than {count} child lanes': '子道大于{count} ',
'element required': '元素不能为空',
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
'no diagram to display': '没有可展示的流程图',
'no process or collaboration to display': '没有可展示的流程/协作',
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
'already rendered {element}': '{element} 已被渲染',
'failed to import {element}': '导入{element}失败',
// 属性面板的参数
'Id': '标识',
'Name': '名称',
'General': '常规',
'Details': '详情',
'Message Name': '消息名称',
'Message': '消息',
'Initiator': '创建者',
'Asynchronous Continuations': '持续异步',
'Asynchronous Before': '异步前',
'Asynchronous After': '异步后',
'Job Configuration': '工作配置',
'Exclusive': '排除',
'Job Priority': '工作优先级',
'Retry Time Cycle': '重试时间周期',
'Documentation': '文档',
'Element Documentation': '元素文档',
'History Configuration': '历史配置',
'History Time To Live': '历史的生存时间',
'Forms': '表单',
'Form Key': '表单key',
'Form Fields': '表单字段',
'Business Key': '业务key',
'Form Field': '表单字段',
'ID': '编号',
'Type': '类型',
'Label': '名称',
'Default Value': '默认值',
'Validation': '校验',
'Add Constraint': '添加约束',
'Config': '配置',
'Properties': '属性',
'Add Property': '添加属性',
'Value': '值',
'Listeners': '监听器',
'Execution Listener': '执行监听',
'Event Type': '事件类型',
'Listener Type': '监听器类型',
'Java Class': 'Java类',
'Expression': '表达式',
'Must provide a value': '必须提供一个值',
'Delegate Expression': '代理表达式',
'Script': '脚本',
'Script Format': '脚本格式',
'Script Type': '脚本类型',
'Inline Script': '内联脚本',
'External Script': '外部脚本',
'Resource': '资源',
'Field Injection': '字段注入',
'Extensions': '扩展',
'Input/Output': '输入/输出',
'Input Parameters': '输入参数',
'Output Parameters': '输出参数',
'Parameters': '参数',
'Output Parameter': '输出参数',
'Timer Definition Type': '定时器定义类型',
'Timer Definition': '定时器定义',
'Date': '日期',
'Duration': '持续',
'Cycle': '循环',
'Signal': '信号',
'Signal Name': '信号名称',
'Escalation': '升级',
'Error': '错误',
'Link Name': '链接名称',
'Condition': '条件名称',
'Variable Name': '变量名称',
'Variable Event': '变量事件',
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
'Wait for Completion': '等待完成',
'Activity Ref': '活动参考',
'Version Tag': '版本标签',
'Executable': '可执行文件',
'External Task Configuration': '扩展任务配置',
'Task Priority': '任务优先级',
'External': '外部',
'Connector': '连接器',
'Must configure Connector': '必须配置连接器',
'Connector Id': '连接器编号',
'Implementation': '实现方式',
'Field Injections': '字段注入',
'Fields': '字段',
'Result Variable': '结果变量',
'Topic': '主题',
'Configure Connector': '配置连接器',
'Input Parameter': '输入参数',
'Assignee': '代理人',
'Candidate Users': '候选用户',
'Candidate Groups': '候选组',
'Due Date': '到期时间',
'Follow Up Date': '跟踪日期',
'Priority': '优先级',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'Variables': '变量'
}
export const NodeName = {
'bpmn:Process': '流程',
'bpmn:StartEvent': '开始事件',
'bpmn:IntermediateThrowEvent': '中间事件',
'bpmn:Task': '任务',
'bpmn:SendTask': '发送任务',
'bpmn:ReceiveTask': '接收任务',
'bpmn:UserTask': '用户任务',
'bpmn:ManualTask': '手工任务',
'bpmn:BusinessRuleTask': '业务规则任务',
'bpmn:ServiceTask': '服务任务',
'bpmn:ScriptTask': '脚本任务',
'bpmn:EndEvent': '结束事件',
'bpmn:SequenceFlow': '流程线',
'bpmn:ExclusiveGateway': '互斥网关',
'bpmn:ParallelGateway': '并行网关',
'bpmn:InclusiveGateway': '相容网关',
'bpmn:ComplexGateway': '复杂网关',
'bpmn:EventBasedGateway': '事件网关'
}
export default {
// Labels
'Activate the global connect tool': '激活全局连接工具',
'Append {type}': '添加 {type}',
'Add Lane above': '在上面添加道',
'Divide into two Lanes': '分割成两个道',
'Divide into three Lanes': '分割成三个道',
'Add Lane below': '在下面添加道',
'Append compensation activity': '追加补偿活动',
'Change type': '修改类型',
'Connect using Association': '使用关联连接',
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
'Connect using DataInputAssociation': '使用数据输入关联连接',
'Remove': '移除',
'Activate the hand tool': '激活抓手工具',
'Activate the lasso tool': '激活套索工具',
'Activate the create/remove space tool': '激活创建/删除空间工具',
'Create expanded SubProcess': '创建扩展子过程',
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
'Create Pool/Participant': '创建池/参与者',
'Parallel Multi Instance': '并行多重事件',
'Sequential Multi Instance': '时序多重事件',
'DataObjectReference': '数据对象参考',
'DataStoreReference': '数据存储参考',
'Loop': '循环',
'Ad-hoc': '即席',
'Create {type}': '创建 {type}',
'Task': '任务',
'Send Task': '发送任务',
'Receive Task': '接收任务',
'User Task': '用户任务',
'Manual Task': '手工任务',
'Business Rule Task': '业务规则任务',
'Service Task': '服务任务',
'Script Task': '脚本任务',
'Call Activity': '调用活动',
'Sub Process (collapsed)': '子流程（折叠的）',
'Sub Process (expanded)': '子流程（展开的）',
'Start Event': '开始事件',
'StartEvent': '开始事件',
'Intermediate Throw Event': '中间事件',
'End Event': '结束事件',
'EndEvent': '结束事件',
'Create Gateway': '创建网关',
'Create Intermediate/Boundary Event': '创建中间/边界事件',
'Message Start Event': '消息开始事件',
'Timer Start Event': '定时开始事件',
'Conditional Start Event': '条件开始事件',
'Signal Start Event': '信号开始事件',
'Error Start Event': '错误开始事件',
'Escalation Start Event': '升级开始事件',
'Compensation Start Event': '补偿开始事件',
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
'Message Intermediate Catch Event': '消息中间捕获事件',
'Message Intermediate Throw Event': '消息中间抛出事件',
'Timer Intermediate Catch Event': '定时中间捕获事件',
'Escalation Intermediate Throw Event': '升级中间抛出事件',
'Conditional Intermediate Catch Event': '条件中间捕获事件',
'Link Intermediate Catch Event': '链接中间捕获事件',
'Link Intermediate Throw Event': '链接中间抛出事件',
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
'Signal Intermediate Catch Event': '信号中间捕获事件',
'Signal Intermediate Throw Event': '信号中间抛出事件',
'Message End Event': '消息结束事件',
'Escalation End Event': '定时结束事件',
'Error End Event': '错误结束事件',
'Cancel End Event': '取消结束事件',
'Compensation End Event': '补偿结束事件',
'Signal End Event': '信号结束事件',
'Terminate End Event': '终止结束事件',
'Message Boundary Event': '消息边界事件',
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
'Timer Boundary Event': '定时边界事件',
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
'Escalation Boundary Event': '升级边界事件',
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
'Conditional Boundary Event': '条件边界事件',
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
'Error Boundary Event': '错误边界事件',
'Cancel Boundary Event': '取消边界事件',
'Signal Boundary Event': '信号边界事件',
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
'Compensation Boundary Event': '补偿边界事件',
'Exclusive Gateway': '互斥网关',
'Parallel Gateway': '并行网关',
'Inclusive Gateway': '相容网关',
'Complex Gateway': '复杂网关',
'Event based Gateway': '事件网关',
'Transaction': '转运',
'Sub Process': '子流程',
'Event Sub Process': '事件子流程',
'Collapsed Pool': '折叠池',
'Expanded Pool': '展开池',
// Errors
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
'no shape type specified': '没有指定的形状类型',
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
'out of bounds release': 'out of bounds release',
'more than {count} child lanes': '子道大于{count} ',
'element required': '元素不能为空',
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
'no diagram to display': '没有可展示的流程图',
'no process or collaboration to display': '没有可展示的流程/协作',
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
'already rendered {element}': '{element} 已被渲染',
'failed to import {element}': '导入{element}失败',
// 属性面板的参数
'Id': '标识',
'Name': '名称',
'General': '常规',
'Details': '详情',
'Message Name': '消息名称',
'Message': '消息',
'Initiator': '创建者',
'Asynchronous Continuations': '持续异步',
'Asynchronous Before': '异步前',
'Asynchronous After': '异步后',
'Job Configuration': '工作配置',
'Exclusive': '排除',
'Job Priority': '工作优先级',
'Retry Time Cycle': '重试时间周期',
'Documentation': '文档',
'Element Documentation': '元素文档',
'History Configuration': '历史配置',
'History Time To Live': '历史的生存时间',
'Forms': '表单',
'Form Key': '表单key',
'Form Fields': '表单字段',
'Business Key': '业务key',
'Form Field': '表单字段',
'ID': '编号',
'Type': '类型',
'Label': '名称',
'Default Value': '默认值',
'Validation': '校验',
'Add Constraint': '添加约束',
'Config': '配置',
'Properties': '属性',
'Add Property': '添加属性',
'Value': '值',
'Listeners': '监听器',
'Execution Listener': '执行监听',
'Event Type': '事件类型',
'Listener Type': '监听器类型',
'Java Class': 'Java类',
'Expression': '表达式',
'Must provide a value': '必须提供一个值',
'Delegate Expression': '代理表达式',
'Script': '脚本',
'Script Format': '脚本格式',
'Script Type': '脚本类型',
'Inline Script': '内联脚本',
'External Script': '外部脚本',
'Resource': '资源',
'Field Injection': '字段注入',
'Extensions': '扩展',
'Input/Output': '输入/输出',
'Input Parameters': '输入参数',
'Output Parameters': '输出参数',
'Parameters': '参数',
'Output Parameter': '输出参数',
'Timer Definition Type': '定时器定义类型',
'Timer Definition': '定时器定义',
'Date': '日期',
'Duration': '持续',
'Cycle': '循环',
'Signal': '信号',
'Signal Name': '信号名称',
'Escalation': '升级',
'Error': '错误',
'Link Name': '链接名称',
'Condition': '条件名称',
'Variable Name': '变量名称',
'Variable Event': '变量事件',
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
'Wait for Completion': '等待完成',
'Activity Ref': '活动参考',
'Version Tag': '版本标签',
'Executable': '可执行文件',
'External Task Configuration': '扩展任务配置',
'Task Priority': '任务优先级',
'External': '外部',
'Connector': '连接器',
'Must configure Connector': '必须配置连接器',
'Connector Id': '连接器编号',
'Implementation': '实现方式',
'Field Injections': '字段注入',
'Fields': '字段',
'Result Variable': '结果变量',
'Topic': '主题',
'Configure Connector': '配置连接器',
'Input Parameter': '输入参数',
'Assignee': '代理人',
'Candidate Users': '候选用户',
'Candidate Groups': '候选组',
'Due Date': '到期时间',
'Follow Up Date': '跟踪日期',
'Priority': '优先级',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'Variables': '变量'
}
export const NodeName = {
'bpmn:Process': '流程',
'bpmn:StartEvent': '开始事件',
'bpmn:IntermediateThrowEvent': '中间事件',
'bpmn:Task': '任务',
'bpmn:SendTask': '发送任务',
'bpmn:ReceiveTask': '接收任务',
'bpmn:UserTask': '用户任务',
'bpmn:ManualTask': '手工任务',
'bpmn:BusinessRuleTask': '业务规则任务',
'bpmn:ServiceTask': '服务任务',
'bpmn:ScriptTask': '脚本任务',
'bpmn:EndEvent': '结束事件',
'bpmn:SequenceFlow': '流程线',
'bpmn:ExclusiveGateway': '互斥网关',
'bpmn:ParallelGateway': '并行网关',
'bpmn:InclusiveGateway': '相容网关',
'bpmn:ComplexGateway': '复杂网关',
'bpmn:EventBasedGateway': '事件网关'
}

334
demo-web-ui/src/views/PwdModify/PwdModify.vue
View File

@@ -1,167 +1,167 @@
<template>
<div class="content">
<div class="right_cont">
<!-- table -->
<div style="padding-top: 15px;"></div>
<table class="tishi" cellspacing="0" style="margin:0 auto 30px">
<tr>
<td style="border-bottom: none; border-right: none;">原密码</td>
<td style="border-bottom: none;">
<el-input type="password" v-model="form.original" show-password/>
<span>*</span>
</td>
</tr>
<tr>
<td style="border-bottom: none; border-right: none;">新密码</td>
<td style="border-bottom: none;">
<el-input type="password" v-model="form.password" show-password/>
<span>*</span>
</td>
</tr>
<tr>
<td style="border-right: none;">确认密码</td>
<td>
<el-input type="password" v-model="form.confirmPassword" show-password/>
<span>*</span>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer" style="margin-left:40%;">
<el-button style=" margin-left: 8%; width: 100px;height: 40px;" type="primary"
@click="updatePsw()">确认</el-button>
<!-- <el-button style="margin-left: 6%; width: 100px;height: 40px;" type="danger" @click="$router.go(-1)">关闭</el-button> -->
</span>
</div>
</div>
</template>
<script>
import login from '@/api/User/login.js'
import {removeStorage} from '@/utils/auth'
import User from '@/api/User/login.js'
import myviewer from '@/components/viewerjs/index.vue'
export default {
components: {myviewer},
data() {
return {
checked: '',
form: {
confirmPassword: '',
original: '',
password: '',
userSid: window.sessionStorage.getItem('userSid')
},
token: window.sessionStorage.getItem('token')
}
},
mounted() {
},
methods: {
updatePsw() {
if (this.form.password != this.form.confirmPassword) {
this.$message({
type: 'warning',
message: '两次密码输入不一致!'
});
return
}
login.updatePassword(this.form).then(res => {
this.$alert('密码修改成！请重新登录点击确定后退出。', '修改成功', {
confirmButtonText: '确定',
callback: action => {
User.logout({token: this.token}).then(res => {
// removeToken()
window.sessionStorage.removeStorage('token')
window.sessionStorage.removeStorage('userSid')
this.$router.push({path: '/login'})
})
.catch(() => {
this.$router.push({path: '/login'})
})
}
});
// this.$message({
// type: 'success',
// message: '!'
// });
})
},
guanli() {
this.$router.push({
name: 'roleAdminister'
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.content {
width: 100%;
padding-top: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.shouye {
position: absolute;
top: -3px;
left: 100px;
font-size: 16px;
color: #0395d8;
font-weight: bold;
}
.placename {
position: absolute;
top: -3px;
left: 210px;
font-size: 16px;
color: #fff;
font-weight: bold;
}
.right_cont {
width: 100%;
height: 645px;
background-color: #fff;
margin: 0;
padding: 15px;
box-sizing: border-box;
}
.tishi {
width: 560px;
color: #000;
padding-left: 1.5%;
margin-bottom: 50px;
tr {
height: 70px;
}
td {
border: 1px solid #e6e9f0;
text-align: center;
}
td:first-child {
background-color: #f7f9fc;
}
.el-input,
input {
width: 80%;
}
span {
font-size: 26px;
color: red;
margin-left: 10px;
}
}
</style>
<template>
<div class="content">
<div class="right_cont">
<!-- table -->
<div style="padding-top: 15px;"></div>
<table class="tishi" cellspacing="0" style="margin:0 auto 30px">
<tr>
<td style="border-bottom: none; border-right: none;">原密码</td>
<td style="border-bottom: none;">
<el-input type="password" v-model="form.original" show-password/>
<span>*</span>
</td>
</tr>
<tr>
<td style="border-bottom: none; border-right: none;">新密码</td>
<td style="border-bottom: none;">
<el-input type="password" v-model="form.password" show-password/>
<span>*</span>
</td>
</tr>
<tr>
<td style="border-right: none;">确认密码</td>
<td>
<el-input type="password" v-model="form.confirmPassword" show-password/>
<span>*</span>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer" style="margin-left:40%;">
<el-button style=" margin-left: 8%; width: 100px;height: 40px;" type="primary"
@click="updatePsw()">确认</el-button>
<!-- <el-button style="margin-left: 6%; width: 100px;height: 40px;" type="danger" @click="$router.go(-1)">关闭</el-button> -->
</span>
</div>
</div>
</template>
<script>
import login from '@/api/User/login.js'
import {removeStorage} from '@/utils/auth'
import User from '@/api/User/login.js'
import myviewer from '@/components/viewerjs/index.vue'
export default {
components: {myviewer},
data() {
return {
checked: '',
form: {
confirmPassword: '',
original: '',
password: '',
userSid: window.sessionStorage.getItem('userSid')
},
token: window.sessionStorage.getItem('token')
}
},
mounted() {
},
methods: {
updatePsw() {
if (this.form.password != this.form.confirmPassword) {
this.$message({
type: 'warning',
message: '两次密码输入不一致!'
});
return
}
login.updatePassword(this.form).then(res => {
this.$alert('密码修改成！请重新登录点击确定后退出。', '修改成功', {
confirmButtonText: '确定',
callback: action => {
User.logout({token: this.token}).then(res => {
// removeToken()
window.sessionStorage.removeStorage('token')
window.sessionStorage.removeStorage('userSid')
this.$router.push({path: '/login'})
})
.catch(() => {
this.$router.push({path: '/login'})
})
}
});
// this.$message({
// type: 'success',
// message: '!'
// });
})
},
guanli() {
this.$router.push({
name: 'roleAdminister'
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.content {
width: 100%;
padding-top: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.shouye {
position: absolute;
top: -3px;
left: 100px;
font-size: 16px;
color: #0395d8;
font-weight: bold;
}
.placename {
position: absolute;
top: -3px;
left: 210px;
font-size: 16px;
color: #fff;
font-weight: bold;
}
.right_cont {
width: 100%;
height: 645px;
background-color: #fff;
margin: 0;
padding: 15px;
box-sizing: border-box;
}
.tishi {
width: 560px;
color: #000;
padding-left: 1.5%;
margin-bottom: 50px;
tr {
height: 70px;
}
td {
border: 1px solid #e6e9f0;
text-align: center;
}
td:first-child {
background-color: #f7f9fc;
}
.el-input,
input {
width: 80%;
}
span {
font-size: 26px;
color: red;
margin-left: 10px;
}
}
</style>

348
demo-web-ui/src/views/Regist/Organing/components/amap.vue
View File

@@ -1,174 +1,174 @@
<template>
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
<div class="toolbar">
<span>当前坐标: {{ lng }}, {{ lat }}</span>
<span>地址: {{ address }}</span>
<el-button type="primary" @click="select" class="btn">确定</el-button>
</div>
<el-amap
vid="amapDemo2"
:center="mapCenter"
:zoom="zoom"
class="amap-demo"
:events="events"
:plugin="plugin"
>
<!-- <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" /> -->
<el-amap-marker v-for="marker in markers" :position="marker" />
</el-amap>
</div>
</el-dialog>
</template>
<script>
import { AMapManager } from 'vue-amap'
export default {
name: 'AmapPage',
props: {
dialogVisible: {
type: Boolean,
default: false
},
address:{
type: String,
default: ''
},
makerPosition: {
type: Array,
default: () => {
return []
}
}
},
data: function() {
const self = this
return {
zoom: 12,
mapCenter: [116.384201, 39.90307],
markers: [[116.384201, 39.90307]],
searchOption: {
city: '北京',
citylimit: false
},
lng: 0,
lat: 0,
loaded: false,
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
if (self.makerPosition.length == 0) {
self.address = result.formattedAddress
self.lng = result.position.lng
self.lat = result.position.lat
}
self.searchOption.city = result.addressComponent.city
self.center = [self.lng, self.lat]
self.loaded = true
self.$nextTick()
}
})
}
}
}],
events: {
click(e) {
const { lng, lat } = e.lnglat
self.lng = lng
self.lat = lat
self.markers[0] = [lng, lat]
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: 'all'
})
geocoder.getAddress([lng, lat], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
self.address = result.regeocode.formattedAddress
self.$nextTick()
}
}
})
}
}
}
},
created() {
if (this.makerPosition.length) {
this.markers[0] = this.makerPosition
this.lng = this.makerPosition[0] || 0
this.lat = this.makerPosition[1] || 0
}
},
methods: {
onSearchResult(pois) {
let latSum = 0
let lngSum = 0
if (pois.length > 0) {
pois.forEach(poi => {
const { lng, lat } = poi
lngSum += lng
latSum += lat
this.markers.push([poi.lng, poi.lat])
})
const center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
}
this.mapCenter = [center.lng, center.lat]
}
},
handleClose(done) {
this.$emit('update:dialogVisible', false)
this.$nextTick(() => {
done()
})
},
select() {
this.$emit('update:dialogVisible', false)
this.$emit('update:makerPosition', this.markers[0])
this.$emit('update:address', this.address)
this.$parent.validateForm()
}
}
}
</script>
<style lang="scss" scoped>
.amap-demo {
height: 450px;
}
.search-box {
z-index: 999;
margin-bottom: 20px;
position: absolute;
top: 70px;
left: 100px;
}
.amap-page-container {
position: relative;
}
.toolbar{
padding-bottom: 10px;
height: 50px;
line-height: 50px;
position: relative;
.btn{
position: absolute;
right: 0;
}
span{
padding-left: 10px;
}
}
</style>
<template>
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
<div class="toolbar">
<span>当前坐标: {{ lng }}, {{ lat }}</span>
<span>地址: {{ address }}</span>
<el-button type="primary" @click="select" class="btn">确定</el-button>
</div>
<el-amap
vid="amapDemo2"
:center="mapCenter"
:zoom="zoom"
class="amap-demo"
:events="events"
:plugin="plugin"
>
<!-- <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" /> -->
<el-amap-marker v-for="marker in markers" :position="marker" />
</el-amap>
</div>
</el-dialog>
</template>
<script>
import { AMapManager } from 'vue-amap'
export default {
name: 'AmapPage',
props: {
dialogVisible: {
type: Boolean,
default: false
},
address:{
type: String,
default: ''
},
makerPosition: {
type: Array,
default: () => {
return []
}
}
},
data: function() {
const self = this
return {
zoom: 12,
mapCenter: [116.384201, 39.90307],
markers: [[116.384201, 39.90307]],
searchOption: {
city: '北京',
citylimit: false
},
lng: 0,
lat: 0,
loaded: false,
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
if (self.makerPosition.length == 0) {
self.address = result.formattedAddress
self.lng = result.position.lng
self.lat = result.position.lat
}
self.searchOption.city = result.addressComponent.city
self.center = [self.lng, self.lat]
self.loaded = true
self.$nextTick()
}
})
}
}
}],
events: {
click(e) {
const { lng, lat } = e.lnglat
self.lng = lng
self.lat = lat
self.markers[0] = [lng, lat]
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: 'all'
})
geocoder.getAddress([lng, lat], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
self.address = result.regeocode.formattedAddress
self.$nextTick()
}
}
})
}
}
}
},
created() {
if (this.makerPosition.length) {
this.markers[0] = this.makerPosition
this.lng = this.makerPosition[0] || 0
this.lat = this.makerPosition[1] || 0
}
},
methods: {
onSearchResult(pois) {
let latSum = 0
let lngSum = 0
if (pois.length > 0) {
pois.forEach(poi => {
const { lng, lat } = poi
lngSum += lng
latSum += lat
this.markers.push([poi.lng, poi.lat])
})
const center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
}
this.mapCenter = [center.lng, center.lat]
}
},
handleClose(done) {
this.$emit('update:dialogVisible', false)
this.$nextTick(() => {
done()
})
},
select() {
this.$emit('update:dialogVisible', false)
this.$emit('update:makerPosition', this.markers[0])
this.$emit('update:address', this.address)
this.$parent.validateForm()
}
}
}
</script>
<style lang="scss" scoped>
.amap-demo {
height: 450px;
}
.search-box {
z-index: 999;
margin-bottom: 20px;
position: absolute;
top: 70px;
left: 100px;
}
.amap-page-container {
position: relative;
}
.toolbar{
padding-bottom: 10px;
height: 50px;
line-height: 50px;
position: relative;
.btn{
position: absolute;
right: 0;
}
span{
padding-left: 10px;
}
}
</style>

180
demo-web-ui/src/views/Regist/Organing/components/first.vue
View File

@@ -1,90 +1,90 @@
<template>
<el-row :gutter="50">
<el-col :span="12">
<div class="color-red fs18" style="line-height: 36px;">
<p>提示:</p>
<p style="text-indent:25px">为保证系统信息安全，本平台使用实名注册，注册时填写的内容需与上传文件相符，并经系统管理员审核通过后生效。
对于单位注册，注册时需提供单位法人委托书，授权一名单位管理员专门管理本单位账户，并对本单位信息安全负责。</p>
<p class="color-grey pd-t40">
法人授权委托书制作步骤如下: <br>
1、点击“下载授权委托书模板”；<br>
2、打开授权委托书文本；<br>
3、填写授权委托书内容；<br>
4、打印授权委托书；<br>
5、在授权委托书上签字盖章；<br>
6、扫描或拍照已签字盖章的授权委托书，并上传至本电脑备用。<br>
</p>
</div>
</el-col>
<el-col :span="12">
<div>
<el-button type="primary" class='bg-primary' @click.native.prevent="download()" style='margin: 12px 0;'>
下载授权委托书
</el-button>
<el-button type="primary" class='bg-primary' @click="onImport()">上传授权委托书</el-button>
</div>
<UploadImg class='first' ref="uploadImg" :FrontPhoto="Photourl" @imgUrl="attorneyPath"></UploadImg>
</el-col>
</el-row>
</template>
<script>
import UploadImg from '@/components/uploadFile/index.vue'
import axios from 'axios'
import {download} from '@/api/orgRegist/index.js'
export default {
components: {UploadImg},
name: 'frist',
props: {
Form: {
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
Photourl: require('@/assets/images/org/jian.png'),
}
},
computed: {},
methods: {
download() {
axios({
method: 'get',
url: 'api/system/organization/download',
responseType: 'blob'
}).then(response => {
console.log(response);
let blob = new Blob([response.data], {type: "application/msword"});
let link = document.createElement('a');
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, "授权书附件.doc");
} else {
// var objectUrl = URL.createObjectURL(blob);
// window.open(objectUrl);
link.href = window.URL.createObjectURL(blob);
link.download = "授权书附件.doc";
link.click();
}
})
},
onImport() {
this.$refs['uploadImg'].$refs['upload'].$refs['upload-inner'].handleClick()
},
attorneyPath(url) { // 授权委托书
this.$set(this.Form, "attorneyPath", url.filePath)
this.$set(this.Form, "attorneyPathurl", url.fullUrl)
}
}
}
</script>
<style>
.avatar-uploader.first .avatar {
width: 350px;
height: 350px;
}
</style>
<template>
<el-row :gutter="50">
<el-col :span="12">
<div class="color-red fs18" style="line-height: 36px;">
<p>提示:</p>
<p style="text-indent:25px">为保证系统信息安全，本平台使用实名注册，注册时填写的内容需与上传文件相符，并经系统管理员审核通过后生效。
对于单位注册，注册时需提供单位法人委托书，授权一名单位管理员专门管理本单位账户，并对本单位信息安全负责。</p>
<p class="color-grey pd-t40">
法人授权委托书制作步骤如下: <br>
1、点击“下载授权委托书模板”；<br>
2、打开授权委托书文本；<br>
3、填写授权委托书内容；<br>
4、打印授权委托书；<br>
5、在授权委托书上签字盖章；<br>
6、扫描或拍照已签字盖章的授权委托书，并上传至本电脑备用。<br>
</p>
</div>
</el-col>
<el-col :span="12">
<div>
<el-button type="primary" class='bg-primary' @click.native.prevent="download()" style='margin: 12px 0;'>
下载授权委托书
</el-button>
<el-button type="primary" class='bg-primary' @click="onImport()">上传授权委托书</el-button>
</div>
<UploadImg class='first' ref="uploadImg" :FrontPhoto="Photourl" @imgUrl="attorneyPath"></UploadImg>
</el-col>
</el-row>
</template>
<script>
import UploadImg from '@/components/uploadFile/index.vue'
import axios from 'axios'
import {download} from '@/api/orgRegist/index.js'
export default {
components: {UploadImg},
name: 'frist',
props: {
Form: {
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
Photourl: require('@/assets/images/org/jian.png'),
}
},
computed: {},
methods: {
download() {
axios({
method: 'get',
url: 'api/system/organization/download',
responseType: 'blob'
}).then(response => {
console.log(response);
let blob = new Blob([response.data], {type: "application/msword"});
let link = document.createElement('a');
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, "授权书附件.doc");
} else {
// var objectUrl = URL.createObjectURL(blob);
// window.open(objectUrl);
link.href = window.URL.createObjectURL(blob);
link.download = "授权书附件.doc";
link.click();
}
})
},
onImport() {
this.$refs['uploadImg'].$refs['upload'].$refs['upload-inner'].handleClick()
},
attorneyPath(url) { // 授权委托书
this.$set(this.Form, "attorneyPath", url.filePath)
this.$set(this.Form, "attorneyPathurl", url.fullUrl)
}
}
}
</script>
<style>
.avatar-uploader.first .avatar {
width: 350px;
height: 350px;
}
</style>

62
demo-web-ui/src/views/Regist/Organing/components/fourth.vue
View File

@@ -1,31 +1,31 @@
<template>
<div class="text-center pd-y40">
<img src="../../../../assets/images/org/success.png" alt=""/>
<h4 class="pd-y20 fs20">提交成功</h4>
<p>管理员审核通过后会有短信提醒！<br> 系统将在{{time}}秒后返回登录页！</p>
</div>
</template>
<script>
export default {
data() {
return {
time: 13,
timeInterval: null
}
},
mounted(){
this.timeInterval = setInterval(()=>{
--this.time
if(this.time == 0){
clearInterval(this.timeInterval)
window.close();
this.time = '';
}
},1000)
}
}
</script>
<style>
</style>
<template>
<div class="text-center pd-y40">
<img src="../../../../assets/images/org/success.png" alt=""/>
<h4 class="pd-y20 fs20">提交成功</h4>
<p>管理员审核通过后会有短信提醒！<br> 系统将在{{time}}秒后返回登录页！</p>
</div>
</template>
<script>
export default {
data() {
return {
time: 13,
timeInterval: null
}
},
mounted(){
this.timeInterval = setInterval(()=>{
--this.time
if(this.time == 0){
clearInterval(this.timeInterval)
window.close();
this.time = '';
}
},1000)
}
}
</script>
<style>
</style>

10
demo-web-ui/src/views/Regist/Organing/components/index.js
View File

@@ -1,5 +1,5 @@
export { default as first } from './first.vue'
export { default as second } from './second.vue'
export { default as third } from './third.vue'
export { default as fourth } from './fourth.vue'
export { default as first } from './first.vue'
export { default as second } from './second.vue'
export { default as third } from './third.vue'
export { default as fourth } from './fourth.vue'

298
demo-web-ui/src/views/Regist/Organing/components/second.vue
View File

@@ -1,149 +1,149 @@
<template>
<div>
<el-form :model="Form" :rules="rules" ref="ruleForm" label-width="180px">
<el-form-item label="单位类别" prop="dwType">
<el-select v-model="Form.dwType" placeholder="请选择单位类别">
<el-option v-for="item in DwTypelist"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单位级别" prop="dwjb">
<el-select v-model="Form.dwjb" placeholder="请选择单位类别">
<el-option v-for="item in DwJblist"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="统一信用代码/登记证号" prop="orgCode">
<el-input v-model="Form.orgCode" @input="changeorgCOde" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="单位名称" prop="name">
<el-input v-model="Form.name"></el-input>
</el-form-item>
<el-form-item label="登录用户名">
<el-input v-model="Form.userName" disabled></el-input>
</el-form-item>
<el-form-item label="单位注册地址" prop="orgAddress">
<el-input v-model="Form.orgAddress"></el-input>
</el-form-item>
<el-form-item label="法人代表/负责人" prop="contactMan">
<el-input v-model="Form.contactMan"></el-input>
</el-form-item>
<el-form-item label="单位所属区域" prop="regionSid" class="demo-form-inline">
<AreaPicker @areaPicker="areaPicker"></AreaPicker>
</el-form-item>
<el-form-item label="单位地理位置" prop="gisInfo">
<el-input v-model="Form.gisInfo" readonly>
<el-button slot="append" icon="el-icon-map-location" @click='mapDialog = true'></el-button>
</el-input>
</el-form-item>
<el-form-item label="单位通讯地址" prop="postAddress">
<el-input v-model="Form.postAddress"></el-input>
</el-form-item>
<el-form-item label="法人证书" prop="businessLicense">
<UploadImg class="second" :FrontPhoto="Photourl" @imgUrl="FrontPhotoUrl"></UploadImg>
</el-form-item>
</el-form>
<Position v-if="mapDialog" :address.sync="Form.postAddress" :maker-position.sync="Form.gisInfo" :dialog-visible.sync="mapDialog" />
</div>
</template>
<script>
// import AMap from 'AMap'
import UploadImg from '@/components/uploadFile/index.vue'
import AreaPicker from '@/components/AreaPicker/index.vue'
import Position from './amap.vue'
import { getDwType, getDwJb } from '@/api/system/dataDict/dataDict.js'
export default {
components:{UploadImg, AreaPicker, Position},
props:{
Form:{
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
DwTypelist: [],
DwJblist: [],
mapDialog: false,
address: '',
Photourl: require('@/assets/images/org/yyzz.png'),
rules: {
orgCode: [
{ required: true, message: '请输入统一信用代码', trigger: 'blur' },
{ min: 9, max: 18, message: '统一信用代码长度在 9位 或者 18 位', trigger: 'blur' }
],
dwType: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
dwjb: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
name: [{required: true, message: '请输入单位名称', trigger: 'blur'}],
orgAddress: [{required: true, message: '请输入单位注册地址', trigger: 'blur'}],
contactMan: [{required: true, message: '请输入法人代表/负责人', trigger: 'blur'}],
regionSid: [{required: true, message: '请选择单位地区', trigger: ['blur', 'change']}],
gisInfo: [{required: true, message: '请选择单位地理位置', trigger: 'blur'}],
postAddress: [{required: true, message: '请输入单位通讯地址', trigger: 'blur'}],
DwType: [{required: true, message: '请选择活动区域', trigger: 'change'}],
businessLicense: [{required: true, message: '请上传应用执照', trigger: 'change'}],
},
}
},
async mounted() {
getDwType().then((res) => {
this.DwTypelist = res.data
})
getDwJb().then((res) => {
this.DwJblist = res.data
})
},
methods: {
FrontPhotoUrl(url){
this.$set(this.Form,'businessLicense',url.filePath)
this.validateForm()
},
addressInput(){
console.log('ssss')
this.validateForm()
},
areaPicker(val){
this.$set(this.Form,'regionSid',val)
},
changeorgCOde(){
this.Form.userName = this.Form.orgCode
},
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
<style>
.avatar-uploader.second .avatar {
width: 350px;
height: 450px;
}
.map{
width: 600px;
height: 600px;
}
.amap-demo {
height: 300px;
}
</style>
<template>
<div>
<el-form :model="Form" :rules="rules" ref="ruleForm" label-width="180px">
<el-form-item label="单位类别" prop="dwType">
<el-select v-model="Form.dwType" placeholder="请选择单位类别">
<el-option v-for="item in DwTypelist"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单位级别" prop="dwjb">
<el-select v-model="Form.dwjb" placeholder="请选择单位类别">
<el-option v-for="item in DwJblist"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="统一信用代码/登记证号" prop="orgCode">
<el-input v-model="Form.orgCode" @input="changeorgCOde" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="单位名称" prop="name">
<el-input v-model="Form.name"></el-input>
</el-form-item>
<el-form-item label="登录用户名">
<el-input v-model="Form.userName" disabled></el-input>
</el-form-item>
<el-form-item label="单位注册地址" prop="orgAddress">
<el-input v-model="Form.orgAddress"></el-input>
</el-form-item>
<el-form-item label="法人代表/负责人" prop="contactMan">
<el-input v-model="Form.contactMan"></el-input>
</el-form-item>
<el-form-item label="单位所属区域" prop="regionSid" class="demo-form-inline">
<AreaPicker @areaPicker="areaPicker"></AreaPicker>
</el-form-item>
<el-form-item label="单位地理位置" prop="gisInfo">
<el-input v-model="Form.gisInfo" readonly>
<el-button slot="append" icon="el-icon-map-location" @click='mapDialog = true'></el-button>
</el-input>
</el-form-item>
<el-form-item label="单位通讯地址" prop="postAddress">
<el-input v-model="Form.postAddress"></el-input>
</el-form-item>
<el-form-item label="法人证书" prop="businessLicense">
<UploadImg class="second" :FrontPhoto="Photourl" @imgUrl="FrontPhotoUrl"></UploadImg>
</el-form-item>
</el-form>
<Position v-if="mapDialog" :address.sync="Form.postAddress" :maker-position.sync="Form.gisInfo" :dialog-visible.sync="mapDialog" />
</div>
</template>
<script>
// import AMap from 'AMap'
import UploadImg from '@/components/uploadFile/index.vue'
import AreaPicker from '@/components/AreaPicker/index.vue'
import Position from './amap.vue'
import { getDwType, getDwJb } from '@/api/system/dataDict/dataDict.js'
export default {
components:{UploadImg, AreaPicker, Position},
props:{
Form:{
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
DwTypelist: [],
DwJblist: [],
mapDialog: false,
address: '',
Photourl: require('@/assets/images/org/yyzz.png'),
rules: {
orgCode: [
{ required: true, message: '请输入统一信用代码', trigger: 'blur' },
{ min: 9, max: 18, message: '统一信用代码长度在 9位 或者 18 位', trigger: 'blur' }
],
dwType: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
dwjb: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
name: [{required: true, message: '请输入单位名称', trigger: 'blur'}],
orgAddress: [{required: true, message: '请输入单位注册地址', trigger: 'blur'}],
contactMan: [{required: true, message: '请输入法人代表/负责人', trigger: 'blur'}],
regionSid: [{required: true, message: '请选择单位地区', trigger: ['blur', 'change']}],
gisInfo: [{required: true, message: '请选择单位地理位置', trigger: 'blur'}],
postAddress: [{required: true, message: '请输入单位通讯地址', trigger: 'blur'}],
DwType: [{required: true, message: '请选择活动区域', trigger: 'change'}],
businessLicense: [{required: true, message: '请上传应用执照', trigger: 'change'}],
},
}
},
async mounted() {
getDwType().then((res) => {
this.DwTypelist = res.data
})
getDwJb().then((res) => {
this.DwJblist = res.data
})
},
methods: {
FrontPhotoUrl(url){
this.$set(this.Form,'businessLicense',url.filePath)
this.validateForm()
},
addressInput(){
console.log('ssss')
this.validateForm()
},
areaPicker(val){
this.$set(this.Form,'regionSid',val)
},
changeorgCOde(){
this.Form.userName = this.Form.orgCode
},
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
<style>
.avatar-uploader.second .avatar {
width: 350px;
height: 450px;
}
.map{
width: 600px;
height: 600px;
}
.amap-demo {
height: 300px;
}
</style>

352
demo-web-ui/src/views/Regist/Organing/components/third.vue
View File

@@ -1,176 +1,176 @@
<template>
<el-form :model="Form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-Form">
<el-form-item label="被委托人身份证号码" prop="idNo">
<el-input type="idNo" v-model="Form.idNo" :maxlength="18" placeholder="请输入身份证号码"></el-input>
</el-form-item>
<el-form-item label="被委托人姓名" prop="staffInfoName">
<el-input v-model="Form.staffInfoName" placeholder="请输入委托人姓名"></el-input>
</el-form-item>
<el-row>
<el-col :span='12'>
<el-form-item label="单位管理员头像" prop="staffInfoHeadUrl">
<UploadImg @imgUrl="HeadUrl" :FrontPhoto="require('@/assets/images/org/headerimg.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="授权书复印件" >
<UploadImg @imgUrl="FrontPhotoUrl" :FrontPhoto="Form1.attorneyPathurl" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="被委托人身份证正面复印件" prop="idFrontPhoto">
<UploadImg @imgUrl="idFrontPhoto" :FrontPhoto="require('@/assets/images/org/sfz.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="被委托人身份证反面复印件" prop="idBackPhoto" class="demo-form-inline">
<UploadImg @imgUrl="idBackPhoto" :FrontPhoto="require('@/assets/images/org/sfz.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="用户名">
<el-input v-model="Form1.userName" placeholder="请输入用户名" disabled></el-input>
</el-form-item>
<el-form-item label="联系人手机号码" prop="contactMobile">
<el-input type="text" v-model="Form.contactMobile" placeholder="请输入手机号" maxlength="11"></el-input>
<el-button class="Tips" type="text" :disabled='isDisabled' @click.stop.prevent="getcode()">点击获取验证码 {{downTime ? downTime+'s':''}}</el-button>
</el-form-item>
<el-form-item label="联系人座机电话" prop="contactTelephone">
<el-input v-model="Form.contactTelephone" placeholder="请输入座机电话"></el-input>
</el-form-item>
<el-form-item label="手机短信验证码" prop="verificationCode">
<el-input v-model="Form.verificationCode" placeholder="请输入短信验证码"></el-input>
</el-form-item>
</el-form>
</template>
<script>
import UploadImg from '@/components/uploadFile/index.vue'
import {
getVerificationCode
} from '@/api/orgRegist/index.js'
export default {
components:{UploadImg},
props:{
Form:{
type: Object,
default: function () {
return {}
}
},
Form1:{
type: Object,
default: function () {
return {}
}
}
},
data() {
var validatorPhone = function (rule, value, callback) {
if (value === '') {
callback(new Error('手机号不能为空'))
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
}
}
return {
downTime: '',
isDisabled: false,
rule: [{ required: true, trigger: 'change' }],
rules: {
idNo: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '身份证号格式错误', trigger: 'blur' ,
}
],
userName: [{ required: true, message: '请输入用户名', trigger: 'change' }],
staffInfoName: [{ required: true, message: '请输入被委托人姓名', trigger: 'change' }],
staffInfoHeadUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
attorneyPath: [{ required: true, message: '请上传图片', trigger: 'change' }],
idFrontPhoto: [{ required: true, message: '请上传图片', trigger: 'change' }],
idBackPhoto: [{ required: true, message: '请上传图片', trigger: 'change' }],
contactMobile: [
{ required: true, validator: validatorPhone, trigger: 'blur' }
],
verificationCode: [{ required: true, message: '请输入验证码', trigger: 'change' }],
},
}
},
mounted() {
},
methods: {
// 手机验证码
getcode() {
if(!this.Form.contactMobile){
this.$message({
type: 'warning',
message: '请输入手机号码!'
});
return
}
this.downTime = 60
this.isDisabled = true
let timeInterval = setInterval(()=>{
--this.downTime
if(this.downTime == 0){
clearInterval(timeInterval)
this.downTime = '';
this.isDisabled = false
}
},1000)
getVerificationCode({
mobile: this.Form.contactMobile
}).catch(()=>{
this.isDisabled = false
})
},
FrontPhotoUrl(url){
this.Form.attorneyPath = url.filePath
},
HeadUrl(url){
this.Form.staffInfoHeadUrl = url.filePath
},
idBackPhoto(url){
this.Form.idBackPhoto = url.filePath
},
idFrontPhoto(url){
this.Form.idFrontPhoto = url.filePath
},
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
console.log(this.Form)
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
<style>
.avatar-uploader-icon {
width: 200px;
height: 200px;
line-height: 178px;
}
.avatar-uploader .avatar {
width: 200px;
height: 200px;
}
.Tips {
padding-left: 10px;
position: absolute;
left: 100%;
top: 0;
}
</style>
<template>
<el-form :model="Form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-Form">
<el-form-item label="被委托人身份证号码" prop="idNo">
<el-input type="idNo" v-model="Form.idNo" :maxlength="18" placeholder="请输入身份证号码"></el-input>
</el-form-item>
<el-form-item label="被委托人姓名" prop="staffInfoName">
<el-input v-model="Form.staffInfoName" placeholder="请输入委托人姓名"></el-input>
</el-form-item>
<el-row>
<el-col :span='12'>
<el-form-item label="单位管理员头像" prop="staffInfoHeadUrl">
<UploadImg @imgUrl="HeadUrl" :FrontPhoto="require('@/assets/images/org/headerimg.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="授权书复印件" >
<UploadImg @imgUrl="FrontPhotoUrl" :FrontPhoto="Form1.attorneyPathurl" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="被委托人身份证正面复印件" prop="idFrontPhoto">
<UploadImg @imgUrl="idFrontPhoto" :FrontPhoto="require('@/assets/images/org/sfz.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="被委托人身份证反面复印件" prop="idBackPhoto" class="demo-form-inline">
<UploadImg @imgUrl="idBackPhoto" :FrontPhoto="require('@/assets/images/org/sfz.png')" :tip="'要求图片大小不超过10M'"></UploadImg>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="用户名">
<el-input v-model="Form1.userName" placeholder="请输入用户名" disabled></el-input>
</el-form-item>
<el-form-item label="联系人手机号码" prop="contactMobile">
<el-input type="text" v-model="Form.contactMobile" placeholder="请输入手机号" maxlength="11"></el-input>
<el-button class="Tips" type="text" :disabled='isDisabled' @click.stop.prevent="getcode()">点击获取验证码 {{downTime ? downTime+'s':''}}</el-button>
</el-form-item>
<el-form-item label="联系人座机电话" prop="contactTelephone">
<el-input v-model="Form.contactTelephone" placeholder="请输入座机电话"></el-input>
</el-form-item>
<el-form-item label="手机短信验证码" prop="verificationCode">
<el-input v-model="Form.verificationCode" placeholder="请输入短信验证码"></el-input>
</el-form-item>
</el-form>
</template>
<script>
import UploadImg from '@/components/uploadFile/index.vue'
import {
getVerificationCode
} from '@/api/orgRegist/index.js'
export default {
components:{UploadImg},
props:{
Form:{
type: Object,
default: function () {
return {}
}
},
Form1:{
type: Object,
default: function () {
return {}
}
}
},
data() {
var validatorPhone = function (rule, value, callback) {
if (value === '') {
callback(new Error('手机号不能为空'))
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
}
}
return {
downTime: '',
isDisabled: false,
rule: [{ required: true, trigger: 'change' }],
rules: {
idNo: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '身份证号格式错误', trigger: 'blur' ,
}
],
userName: [{ required: true, message: '请输入用户名', trigger: 'change' }],
staffInfoName: [{ required: true, message: '请输入被委托人姓名', trigger: 'change' }],
staffInfoHeadUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
attorneyPath: [{ required: true, message: '请上传图片', trigger: 'change' }],
idFrontPhoto: [{ required: true, message: '请上传图片', trigger: 'change' }],
idBackPhoto: [{ required: true, message: '请上传图片', trigger: 'change' }],
contactMobile: [
{ required: true, validator: validatorPhone, trigger: 'blur' }
],
verificationCode: [{ required: true, message: '请输入验证码', trigger: 'change' }],
},
}
},
mounted() {
},
methods: {
// 手机验证码
getcode() {
if(!this.Form.contactMobile){
this.$message({
type: 'warning',
message: '请输入手机号码!'
});
return
}
this.downTime = 60
this.isDisabled = true
let timeInterval = setInterval(()=>{
--this.downTime
if(this.downTime == 0){
clearInterval(timeInterval)
this.downTime = '';
this.isDisabled = false
}
},1000)
getVerificationCode({
mobile: this.Form.contactMobile
}).catch(()=>{
this.isDisabled = false
})
},
FrontPhotoUrl(url){
this.Form.attorneyPath = url.filePath
},
HeadUrl(url){
this.Form.staffInfoHeadUrl = url.filePath
},
idBackPhoto(url){
this.Form.idBackPhoto = url.filePath
},
idFrontPhoto(url){
this.Form.idFrontPhoto = url.filePath
},
validateForm () {
let flag = null
this.$refs['ruleForm'].validate(valid => {
console.log(this.Form)
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
}
}
}
</script>
<style>
.avatar-uploader-icon {
width: 200px;
height: 200px;
line-height: 178px;
}
.avatar-uploader .avatar {
width: 200px;
height: 200px;
}
.Tips {
padding-left: 10px;
position: absolute;
left: 100%;
top: 0;
}
</style>

456
demo-web-ui/src/views/Regist/Organing/index.vue
View File

@@ -1,228 +1,228 @@
<template>
<div class="container">
<el-header>
<h3 class="title">河北省计量业务应用平台</h3>
</el-header>
<div class="org-from">
<el-steps :active="active" finish-status="success">
<el-step v-for="(item,index) of stepTitle" :key="index" :title="item" @click.native="handleStep(index)"/>
</el-steps>
<!-- 内容展示区 -->
<!-- 第一步 -->
<div class="basicInfo pd-y20 pd-x20" v-if="active ===0">
<keep-alive>
<first :Form='Form1' ref="Form1"></first>
</keep-alive>
</div>
<!-- 第二步 -->
<div class="basicInfo" v-if="active ===1">
<keep-alive>
<second :Form.sync='Form2' ref="Form2"></second>
</keep-alive>
</div>
<!-- 第三 -->
<div class="basicInfo" v-if="active ===2">
<keep-alive>
<third :Form.sync='Form3' :Form1="Form" ref="Form3"></third>
</keep-alive>
</div>
<!-- 第四 -->
<div class="basicInfo" v-if="active ===3">
<keep-alive>
<fourth></fourth>
</keep-alive>
</div>
<div class="deployBtn text-center">
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='prev'
v-show='active==1||active==2'>上一步
</el-button>
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='next'
v-show='active==1||active==0'>下一步
</el-button>
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='save' v-show='active==2'>提交
</el-button>
</div>
</div>
</div>
</template>
<script>
import {first, second, third, fourth} from './components/index.js'
import paddwordinput from '@/components/passwordSafe/index.vue'
import {saveOrg} from '@/api/orgRegist/index.js'
export default {
components: {first, second, third, fourth},
data() {
return {
active: 0, // 步骤
stepSuc: [0],// 已选步骤
stepTitle: ['上传授权证书', '填写单位信息', '填写被授权人信息', '注册完成'], // 步骤标题
Form1: {
attorneyPath: '',
attorneyPathurl: ''
},
Form2: {
businessLicense: ''
},
Form3: {},
Form: {}
}
},
mounted() {
},
methods: {
// 点击步骤条
handleStep(val) {
if (this.stepSuc.includes(val) === true) {
this.active = val
}
},
prev() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
if (--this.active === 0) {
this.active = 0
}
},
next() {
if (this.active == 0) {
if (!this.Form1.attorneyPathurl) {
this.$message({
type: 'error',
message: '请上传授权委托书!'
});
return
} else {
this.stepSuc.push(++this.active)
}
}
if (this.active == 1) {
let flag = this.$refs['Form2'].validateForm()
console.log(flag)
if (!this.$refs['Form2'].validateForm()) {
this.$message({
type: 'error',
message: '必填项不能为空!'
});
return
} else {
this.stepSuc.push(++this.active)
}
}
this.Form = Object.assign(this.Form1, this.Form2, this.Form3)
document.body.scrollTop = document.documentElement.scrollTop = 0;
},
save() {
if (!this.$refs['Form3'].validateForm()) {
this.$message({
type: 'error',
message: '必填项不能为空!'
});
return
}
let Form = Object.assign(this.Form1, this.Form2, this.Form3)
Form.gisInfo = Form.gisInfo.join()
saveOrg(Form).then(res => {
console.log(res)
if (res.code == 200) {
this.stepSuc.push(++this.active)
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
h3 {
margin: 0;
padding: 0;
}
.el-header {
width: 100%;
background-color: #0294d7;
color: #fff;
line-height: 60px;
overflow: hidden;
position: fixed;
z-index: 99;
top: 0;
.title {
float: left;
font-size: 26px;
margin-left: 35px;
}
}
.content, .container {
padding: 50px 0;
background-color: #f7f9fc;
}
</style>
<style lang="scss">
.org-from {
width: 1160px;
padding: 30px 0;
margin: 0 auto;
// 步骤条样式
.el-step__icon {
width: 40px;
height: 40px;
}
.el-step__icon.is-text {
background-color: #919192;
font-size: 26px;
color: #FFFFFF;
border: 5px solid #DEDEDE;
}
.el-step.is-horizontal .el-step__line {
top: 15px;
height: 10px;
background-color: #D9D9D9;
}
.el-step__title.is-success,
.el-step__title.is-process {
color: #018CD6;
}
.el-step__head.is-success {
border-color: transparent;
}
.el-step__head.is-process .is-text,
.el-step__head.is-success .is-text {
background-color: #018CD6;
}
.el-input__inner:focus {
border: 1px solid #549FD9;
}
.basicInfo .el-form {
width: 860px;
padding-top: 20px;
margin: 0 auto;
}
}
.deployBtn {
}
.flex-com {
display: flex;
}
.active-color {
color: #018CD6;
background-color: #018CD6;
}
</style>
<template>
<div class="container">
<el-header>
<h3 class="title">河北省计量业务应用平台</h3>
</el-header>
<div class="org-from">
<el-steps :active="active" finish-status="success">
<el-step v-for="(item,index) of stepTitle" :key="index" :title="item" @click.native="handleStep(index)"/>
</el-steps>
<!-- 内容展示区 -->
<!-- 第一步 -->
<div class="basicInfo pd-y20 pd-x20" v-if="active ===0">
<keep-alive>
<first :Form='Form1' ref="Form1"></first>
</keep-alive>
</div>
<!-- 第二步 -->
<div class="basicInfo" v-if="active ===1">
<keep-alive>
<second :Form.sync='Form2' ref="Form2"></second>
</keep-alive>
</div>
<!-- 第三 -->
<div class="basicInfo" v-if="active ===2">
<keep-alive>
<third :Form.sync='Form3' :Form1="Form" ref="Form3"></third>
</keep-alive>
</div>
<!-- 第四 -->
<div class="basicInfo" v-if="active ===3">
<keep-alive>
<fourth></fourth>
</keep-alive>
</div>
<div class="deployBtn text-center">
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='prev'
v-show='active==1||active==2'>上一步
</el-button>
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='next'
v-show='active==1||active==0'>下一步
</el-button>
<el-button type="primary" class='bg-primary' style='margin-top: 12px;' @click='save' v-show='active==2'>提交
</el-button>
</div>
</div>
</div>
</template>
<script>
import {first, second, third, fourth} from './components/index.js'
import paddwordinput from '@/components/passwordSafe/index.vue'
import {saveOrg} from '@/api/orgRegist/index.js'
export default {
components: {first, second, third, fourth},
data() {
return {
active: 0, // 步骤
stepSuc: [0],// 已选步骤
stepTitle: ['上传授权证书', '填写单位信息', '填写被授权人信息', '注册完成'], // 步骤标题
Form1: {
attorneyPath: '',
attorneyPathurl: ''
},
Form2: {
businessLicense: ''
},
Form3: {},
Form: {}
}
},
mounted() {
},
methods: {
// 点击步骤条
handleStep(val) {
if (this.stepSuc.includes(val) === true) {
this.active = val
}
},
prev() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
if (--this.active === 0) {
this.active = 0
}
},
next() {
if (this.active == 0) {
if (!this.Form1.attorneyPathurl) {
this.$message({
type: 'error',
message: '请上传授权委托书!'
});
return
} else {
this.stepSuc.push(++this.active)
}
}
if (this.active == 1) {
let flag = this.$refs['Form2'].validateForm()
console.log(flag)
if (!this.$refs['Form2'].validateForm()) {
this.$message({
type: 'error',
message: '必填项不能为空!'
});
return
} else {
this.stepSuc.push(++this.active)
}
}
this.Form = Object.assign(this.Form1, this.Form2, this.Form3)
document.body.scrollTop = document.documentElement.scrollTop = 0;
},
save() {
if (!this.$refs['Form3'].validateForm()) {
this.$message({
type: 'error',
message: '必填项不能为空!'
});
return
}
let Form = Object.assign(this.Form1, this.Form2, this.Form3)
Form.gisInfo = Form.gisInfo.join()
saveOrg(Form).then(res => {
console.log(res)
if (res.code == 200) {
this.stepSuc.push(++this.active)
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
h3 {
margin: 0;
padding: 0;
}
.el-header {
width: 100%;
background-color: #0294d7;
color: #fff;
line-height: 60px;
overflow: hidden;
position: fixed;
z-index: 99;
top: 0;
.title {
float: left;
font-size: 26px;
margin-left: 35px;
}
}
.content, .container {
padding: 50px 0;
background-color: #f7f9fc;
}
</style>
<style lang="scss">
.org-from {
width: 1160px;
padding: 30px 0;
margin: 0 auto;
// 步骤条样式
.el-step__icon {
width: 40px;
height: 40px;
}
.el-step__icon.is-text {
background-color: #919192;
font-size: 26px;
color: #FFFFFF;
border: 5px solid #DEDEDE;
}
.el-step.is-horizontal .el-step__line {
top: 15px;
height: 10px;
background-color: #D9D9D9;
}
.el-step__title.is-success,
.el-step__title.is-process {
color: #018CD6;
}
.el-step__head.is-success {
border-color: transparent;
}
.el-step__head.is-process .is-text,
.el-step__head.is-success .is-text {
background-color: #018CD6;
}
.el-input__inner:focus {
border: 1px solid #549FD9;
}
.basicInfo .el-form {
width: 860px;
padding-top: 20px;
margin: 0 auto;
}
}
.deployBtn {
}
.flex-com {
display: flex;
}
.active-color {
color: #018CD6;
background-color: #018CD6;
}
</style>

549
demo-web-ui/src/views/Regist/User.vue
View File

@@ -1,293 +1,256 @@
<template>
<div class="content">
<el-header>
<h3 class="title">河北省计量业务应用平台</h3>
</el-header>
<div class="user-from">
<el-form :model="userForm" :rules="rules" ref="userForm" label-width="120px" class="demo-userForm">
<el-form-item label="身份证号" prop="idNo">
<el-input v-model="userForm.idNo" @blur="onInputBlur" placeholder="请输入身份证号" :maxlength="18"></el-input>
</el-form-item>
<el-form-item label="真实姓名" prop="name">
<el-input v-model="userForm.name" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="个人手机号" prop="mobile">
<el-input v-model="userForm.mobile" placeholder="请输入手机号" ></el-input>
<el-button class="Tips" type="text" :disabled='isDisabled' @click.stop.prevent="getcode()">点击获取验证码 {{downTime ? downTime+'s':''}}</el-button>
</el-form-item>
<el-form-item label="手机验证码" prop="verificationCode">
<el-input v-model="userForm.verificationCode" placeholder="请输入验证码"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input v-model="userForm.userName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<paddwordinput v-model="userForm.password" placeholder="请输入密码" :pastips='true' :maxlength="10"></paddwordinput>
<el-button class="Tips" type="text">密码必须为8至10位大小写字母和数字组合</el-button>
</el-form-item>
<el-form-item label="确认密码" prop="rePassword">
<paddwordinput v-model="userForm.rePassword" placeholder="请再次输入密码" :maxlength="10"></paddwordinput>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证正面照" prop="idFrontPhoto">
<UploadImg @imgUrl="FrontPhotoUrl"></UploadImg>
<el-input v-model="userForm.idFrontPhoto" v-show="false"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证背面照" prop="idBackPhoto">
<UploadImg @imgUrl="BackPhotoUrl"></UploadImg>
<el-input v-model="userForm.idBackPhoto" v-show="false"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item style="text-align: center;">
<el-button type="primary" @click="submitForm('userForm')" :disabled="btnDisabled">注册</el-button>
<el-button @click="resetForm('userForm')">关闭</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {
registUser,
getVerificationCode
} from '@/api/user1.js'
import qs from 'qs'
import UploadImg from '@/components/uploadFile/index.vue'
import paddwordinput from '@/components/passwordSafe/index.vue'
export default {
components:{ UploadImg, paddwordinput },
data() {
var validatorPhone = function (rule, value, callback) {
if (value === '') {
callback(new Error('手机号不能为空'))
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
// password 是表单上绑定的字段
} else if (value !== this.userForm.password) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
downTime: '',
isDisabled: false,
userForm: {
name: '',
userName: '', //用户名
password: '',
rePassword: '',
mobile: '', // 手机号
verificationCode: '',
idNo: '',
idBackPhoto: '', // 反面
idFrontPhoto: ''
},
btnDisabled: false,
rule: [{required: true, message: '不能为空', trigger: 'blur'}],
rules: {
idNo: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '身份证号格式错误', trigger: 'blur' ,
}
],
name: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
],
mobile: [
{ required: true, validator: validatorPhone, trigger: 'blur' }
],
verificationCode: [
{ required: true, message: '请输入手机验证码', trigger: 'blur' }
],
userName: [
{ required: true, message: '请输入身份证号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 8, max: 10, message: '长度在 8 到 10 个字符大小写字母和数字组合', trigger: 'blur' }
],
rePassword: [
{ required: true, validator: validatePass2, trigger: 'blur' }
],
idFrontPhoto: [
{ required: true, message: '请输入上传身份证', trigger: 'blur' }
],
idBackPhoto: [
{ required: true, message: '请输入上传身份证', trigger: 'blur' }
],
}
};
},
methods: {
// 手机验证码
getcode() {
let _this = this
if (!/^1\d{10}$/.test(_this.userForm.mobile)) {
this.$message({
type: 'error',
message: '手机号格式错误!'
});
}else {
_this.downTime = 60
let timeInterval = null
_this.isDisabled = true
timeInterval = setInterval(()=>{
--_this.downTime
if(_this.downTime == 0){
clearInterval(timeInterval)
_this.downTime = '';
_this.isDisabled = false
}
},1000)
getVerificationCode({
mobile: _this.userForm.mobile
}).then(res =>{
// this.isDisabled = false
})
}
},
FrontPhotoUrl(url){
this.userForm.idFrontPhoto = url.filePath
},
BackPhotoUrl(url){
this.userForm.idBackPhoto = url.filePath
},
submitForm(formName) {
this.btnDisabled = true
this.$refs[formName].validate((valid) => {
if (valid) {
registUser(qs.stringify(this.userForm)).then((res) => {
this.btnDisabled = false
this.$confirm('注册成功, 是否关闭页面?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}).then(() => {
window.close();
})
}).catch(() => {
this.btnDisabled = false
})
} else {
return false;
}
});
},
resetForm(formName) {
window.close();
this.$refs[formName].resetFields();
},
onInputBlur() { // 用户名密码
this.userForm.userName = this.userForm.idNo
},
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
h3{margin: 0;padding: 0;}
.el-header{
width: 100%;
background-color: #0294d7;
color: #fff;
line-height: 60px;
overflow: hidden;
position: fixed;
z-index: 99;
top: 0;
.title{
float: left;
font-size: 26px;
margin-left: 35px;
}
}
.content{
padding: 50px 0;
background-color: #f7f9fc;
}
</style>
<style lang="scss">
@import "~@/styles/variables.scss";
.opcity{
opacity: 1 !important;
}
.user-from {
width: 860px;
padding-top: 20px;
margin: 0 auto;
.el-input__inner:focus {
border: 1px solid $border-color;
}
.Tips {
padding-left: 10px;
position: absolute;
left: 100%;
top: 0;
}
.pasTips {
display: flex;
justify-content: center;
span {
display: inline-block;
margin: 15px 10px 0 10px;
padding: 0 30px;
line-height: 30px;
border-top: 3px solid red;
opacity: 0.3;
}
span:nth-child(2) {
border-color: blue;
}
span:nth-child(3) {
border-color: green;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 200px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
</style>
<template>
<div class="content">
<el-header>
<h3 class="title">河北省计量业务应用平台</h3>
</el-header>
<div class="stude">学生注册</div>
<div class="user-from">
<el-form
:model="userForm"
:rules="rules"
ref="userForm"
label-width="120px"
class="demo-userForm"
>
<el-form-item label="学生学号" prop="userName">
<el-input
v-model="userForm.userName"
placeholder="请输入学号"
></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<paddwordinput
v-model="userForm.password"
placeholder="请输入密码"
:pastips="true"
:maxlength="10"
></paddwordinput>
<el-button class="Tips" type="text"
>密码必须为8至10位大小写字母和数字组合</el-button
>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<paddwordinput
v-model="userForm.confirmPassword"
placeholder="请再次输入密码"
:maxlength="10"
></paddwordinput>
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="userForm.nickName" placeholder="请输入昵称"></el-input>
</el-form-item>
<el-form-item style="text-align: center">
<el-button
type="primary"
@click="submitForm('userForm')"
:disabled="btnDisabled"
>注册</el-button
>
<el-button @click="resetForm()">关闭</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {registUser} from '@/api/user.js'
import qs from "qs";
import paddwordinput from "@/components/passwordSafe/index.vue";
export default {
components: { paddwordinput },
data() {
var validatorPhone = function (rule, value, callback) {
if (value === "") {
callback(new Error("学号不能为空"));
} else {
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
// password 是表单上绑定的字段
} else if (value !== this.userForm.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
downTime: "",
isDisabled: false,
userForm: {
name: "",//姓名
userName: "", //学号
password: "",
confirmPassword: "",
nickName: "", //昵称
},
btnDisabled: false,
rule: [{ required: true, message: "不能为空", trigger: "blur" }],
rules: {
userName: [
{ required: true, validator: validatorPhone, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
min: 8,
max: 10,
message: "长度在 8 到 10 个字符大小写字母和数字组合",
trigger: "blur",
},
],
confirmPassword: [
{ required: true, validator: validatePass2, trigger: 'blur' }
],
},
};
},
methods: {
FrontPhotoUrl(url) {
this.userForm.idFrontPhoto = url.filePath;
},
BackPhotoUrl(url) {
this.userForm.idBackPhoto = url.filePath;
},
submitForm(formName) {
this.btnDisabled = true;
this.$refs[formName].validate((valid) => {
if (valid) {
registUser(this.userForm)
.then((res) => {
console.log(res);
this.btnDisabled = false;
this.$confirm("注册成功, 是否关闭页面?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
}).then(() => {
this.$router.push('/login');
});
})
.catch(() => {
this.btnDisabled = false;
});
} else {
return false;
}
});
},
resetForm() {
this.$router.push('/login');
},
onInputBlur() {
// 用户名密码
this.userForm.userName = this.userForm.idNo;
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
h3 {
margin: 0;
padding: 0;
}
.el-header {
width: 100%;
background-color: #0294d7;
color: #fff;
line-height: 60px;
overflow: hidden;
position: fixed;
z-index: 99;
top: 0;
.title {
float: left;
font-size: 26px;
margin-left: 35px;
}
}
.content {
padding: 50px 0;
background-color: #f7f9fc;
}
</style>
<style lang="scss">
@import "~@/styles/variables.scss";
.opcity {
opacity: 1 !important;
}
.stude{
margin-left: 735px;
margin-top: 20px;
font-size: 26px;
}
.user-from {
width: 860px;
padding-top: 20px;
margin: 0 auto;
.el-input__inner:focus {
border: 1px solid $border-color;
}
.Tips {
padding-left: 10px;
position: absolute;
left: 100%;
top: 0;
}
.pasTips {
display: flex;
justify-content: center;
span {
display: inline-block;
margin: 15px 10px 0 10px;
padding: 0 30px;
line-height: 30px;
border-top: 3px solid red;
opacity: 0.3;
}
span:nth-child(2) {
border-color: blue;
}
span:nth-child(3) {
border-color: green;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 200px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
</style>

1760
demo-web-ui/src/views/RoleAdminister/RoleAdminister.vue
View File

File diff suppressed because it is too large Load Diff

356
demo-web-ui/src/views/copyofprocess/liuchengchaosongAdd.vue
View File

@@ -1,178 +1,178 @@
<template>
<div class="app-container">
<div>
<!--标题按钮部分开始-->
<div class="tab-header webtop">
<!--标题-->
<div>{{ viewTitle }}</div>
<!--start 添加修改按钮-->
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<!--标题按钮部分结束-->
<!--Start 新增修改部分-->
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #E0E3EB">
<el-col :span="4" class="tleftb">
<span><span class="icon">*</span>流程名称</span>
</el-col>
<el-col :span="20">
<el-form-item prop="flowName">
<el-select v-model="formobj.flowName" placeholder="请选择" @change="changeFlow" filterable>
<el-option v-for="item in flow_list" :key="item.key" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>角色</span>
</el-col>
<el-col :span="20">
<el-form-item>
<el-select v-model="recipientList" placeholder="请选择" filterable multiple>
<el-option v-for="item in role_list" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { fetchSid, save, roleList } from '@/api/system/liuchengchaosong/liuchengchaosong'
import { selectFlowList } from '@/api/system/postManage/index'
export default {
name: 'LiuChengChaoSongAdd',
data() {
return {
viewTitle: '',
index: 0,
tableKey: 0,
role_list: [],
flow_list: [],
recipientList: [],
// 表单数据
formobj: {
sid: '', // 一条数据的sid
flowName: '',
flowKey: '',
roleNames: [],
roleSids: []
},
rules: {
flowName: [{ required: true, message: '流程名称不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {
roleList({}).then((res) => {
if (res.success) {
this.role_list = res.data
}
})
selectFlowList().then((res) => {
if (res.success) {
this.flow_list = res.data
}
})
},
showAdd() {
this.init()
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '【新增】流程抄送'
},
showEdit(row) {
this.init()
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '【设置】流程抄送'
console.log('编辑回显', row.sid)
fetchSid(row.sid).then((resp) => {
this.formobj = resp.data
this.recipientList = this.formobj.roleSids
}).catch((e) => {
this.formobj = row
})
},
changeFlow(value) {
const choose = this.flow_list.filter((item) => item.name === value)
this.formobj.flowKey = choose[0].key
},
save() {
console.log(this.formobj)
if (this.recipientList.length === 0) {
this.$message({ showClose: true, type: 'error', message: '角色不能为空' })
return
} else {
const aa = []
const bb = []
for (var i = 0; i < this.recipientList.length; i++) {
for (var k = 0; k < this.role_list.length; k++) {
if (this.recipientList[i] === this.role_list[k].sid) {
aa.push(this.role_list[k].name)
bb.push(this.role_list[k].sid)
}
}
}
this.formobj.roleNames = aa
this.formobj.roleSids = bb
}
this.$refs['form_obj'].validate((valid) => {
if (valid) {
this.submitdisabled = true
save(this.formobj).then((resp) => {
if (resp.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
}
}).catch(() => {
this.submitdisabled = false
})
} else {
return false
}
})
},
// 返回（===既判断）
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
// 表单数据
this.formobj = {
sid: '', // 一条数据的sid
flowName: '',
flowKey: '',
roleNames: [],
roleSids: []
}
this.recipientList = []
this.submitdisabled = false
this.$refs['form_obj'].resetFields()
this.$emit('doback')
}
}
}
</script>
<style scoped>
.title {
padding: 7px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>
<template>
<div class="app-container">
<div>
<!--标题按钮部分开始-->
<div class="tab-header webtop">
<!--标题-->
<div>{{ viewTitle }}</div>
<!--start 添加修改按钮-->
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<!--标题按钮部分结束-->
<!--Start 新增修改部分-->
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #E0E3EB">
<el-col :span="4" class="tleftb">
<span><span class="icon">*</span>流程名称</span>
</el-col>
<el-col :span="20">
<el-form-item prop="flowName">
<el-select v-model="formobj.flowName" placeholder="请选择" @change="changeFlow" filterable>
<el-option v-for="item in flow_list" :key="item.key" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>角色</span>
</el-col>
<el-col :span="20">
<el-form-item>
<el-select v-model="recipientList" placeholder="请选择" filterable multiple>
<el-option v-for="item in role_list" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { fetchSid, save, roleList } from '@/api/system/liuchengchaosong/liuchengchaosong'
import { selectFlowList } from '@/api/system/postManage/index'
export default {
name: 'LiuChengChaoSongAdd',
data() {
return {
viewTitle: '',
index: 0,
tableKey: 0,
role_list: [],
flow_list: [],
recipientList: [],
// 表单数据
formobj: {
sid: '', // 一条数据的sid
flowName: '',
flowKey: '',
roleNames: [],
roleSids: []
},
rules: {
flowName: [{ required: true, message: '流程名称不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {
roleList({}).then((res) => {
if (res.success) {
this.role_list = res.data
}
})
selectFlowList().then((res) => {
if (res.success) {
this.flow_list = res.data
}
})
},
showAdd() {
this.init()
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '【新增】流程抄送'
},
showEdit(row) {
this.init()
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '【设置】流程抄送'
console.log('编辑回显', row.sid)
fetchSid(row.sid).then((resp) => {
this.formobj = resp.data
this.recipientList = this.formobj.roleSids
}).catch((e) => {
this.formobj = row
})
},
changeFlow(value) {
const choose = this.flow_list.filter((item) => item.name === value)
this.formobj.flowKey = choose[0].key
},
save() {
console.log(this.formobj)
if (this.recipientList.length === 0) {
this.$message({ showClose: true, type: 'error', message: '角色不能为空' })
return
} else {
const aa = []
const bb = []
for (var i = 0; i < this.recipientList.length; i++) {
for (var k = 0; k < this.role_list.length; k++) {
if (this.recipientList[i] === this.role_list[k].sid) {
aa.push(this.role_list[k].name)
bb.push(this.role_list[k].sid)
}
}
}
this.formobj.roleNames = aa
this.formobj.roleSids = bb
}
this.$refs['form_obj'].validate((valid) => {
if (valid) {
this.submitdisabled = true
save(this.formobj).then((resp) => {
if (resp.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
}
}).catch(() => {
this.submitdisabled = false
})
} else {
return false
}
})
},
// 返回（===既判断）
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
// 表单数据
this.formobj = {
sid: '', // 一条数据的sid
flowName: '',
flowKey: '',
roleNames: [],
roleSids: []
}
this.recipientList = []
this.submitdisabled = false
this.$refs['form_obj'].resetFields()
this.$emit('doback')
}
}
}
</script>
<style scoped>
.title {
padding: 7px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>

543
demo-web-ui/src/views/copyofprocess/liuchengchasongguanli.vue
View File

@@ -1,228 +1,315 @@
<template>
<div class="app-container">
<div v-show="viewState == 1">
<button-bar view-title="流程抄送设置" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="流程名称">
<el-select v-model="listQuery.params.flowName" placeholder="请选择" filterable>
<el-option v-for="item in flow_list" :key="item.key" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" size="small" icon="el-icon-search" @click="handleFilter">查询</el-button>
<el-button type="primary" size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">业务流程列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%">
<el-table-column width="60" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column width="180" label="操作" align="center">
<template slot-scope="scope">
<el-button size="small" type="primary" @click="handleUpdate(scope.row)">设置</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column label="流程名称" align="center" width="400">
<template slot-scope="scope">
<span>{{ scope.row.flowName }}</span>
</template>
</el-table-column>
<el-table-column label="抄送角色" align="left" header-align="center">
<template slot-scope="scope">
<span>{{ scope.row.roleName }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
</div>
</div>
<liuchengchaosongAdd v-show="viewState == 2 ||viewState == 3" ref="divadd" @doback="resetState" @reloadlist="getList" />
</div>
</template>
<script>
import { pageList, delBySids } from '@/api/system/liuchengchaosong/liuchengchaosong'
import { selectFlowList } from '@/api/system/postManage/index'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import liuchengchaosongAdd from './liuchengchaosongAdd'
export default {
name: 'liuchengchaosong',
components: {
Pagination,
pageye,
ButtonBar,
liuchengchaosongAdd
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1, // 1、列表 2、添加-车辆预订 3、编辑 4、查看 5、订金-订金收取
// 查询 -----------
flow_list: [], // 分公司
tableKey: 0,
list: [],
sids: [],
FormLoading: false,
listLoading: false,
listQuery: {
current: 1,
size: 5,
total: 0,
params: {
flowName: ''
}
}
}
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
created() {
// 初始化变量
this.init()
// 加载列表
this.getList()
},
methods: {
init() {
selectFlowList().then((res) => {
if (res.success) {
this.flow_list = res.data
}
})
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
// 查询列表信息
getList() {
this.listLoading = true
this.listQuery.params.orgSidPath = window.sessionStorage.getItem('orgSidPath')
pageList(this.listQuery).then((response) => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
// 查询按钮
handleFilter() {
this.listQuery.current = 1
this.getList()
},
// 重置
handleReset() {
this.listQuery = {
current: 1,
size: 5,
total: 0,
params: {
flowName: ''
}
}
this.getList()
},
toAdd() {
this.viewState = 2
this.$refs['divadd'].showAdd()
},
// 编辑
handleUpdate(row) {
this.viewState = 3
this.$refs['divadd'].showEdit(row)
},
handleDelete(row) {
const tip = '请确认是否删除'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const aa = []
aa.push(row.sid)
delBySids(aa).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '删除成功' })
this.getList()
}
})
})
},
resetState() {
this.viewState = 1
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="app-container">
<div v-show="viewState == 1">
<button-bar
view-title="流程抄送设置"
ref="btnbar"
:btndisabled="btndisabled"
@btnhandle="btnHandle"
/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{
searchxianshitit
}}</el-button>
<div v-show="isSearchShow" class="search">
<el-form
ref="listQueryform"
:inline="true"
:model="listQuery"
label-width="100px"
class="tab-header"
>
<el-form-item label="流程名称">
<el-select
v-model="listQuery.params.flowName"
placeholder="请选择"
filterable
>
<el-option
v-for="item in flow_list"
:key="item.key"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center">
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="handleFilter"
>查询</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-refresh"
@click="handleReset"
>重置</el-button
>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">业务流程列表</div>
<pageye
v-show="list.length > 0"
:total="listQuery.total"
:page.sync="listQuery.current"
:limit.sync="listQuery.size"
class="pagination"
@pagination="getList"
/>
</div>
<div class="">
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
style="width: 100%"
>
<el-table-column
width="60"
label="序号"
type="index"
:index="indexMethod"
align="center"
/>
<el-table-column width="180" label="操作" align="center">
<template slot-scope="scope">
<el-button
size="small"
type="primary"
@click="handleUpdate(scope.row)"
>设置</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
<el-table-column label="流程名称" align="center" width="400">
<template slot-scope="scope">
<span>{{ scope.row.flowName }}</span>
</template>
</el-table-column>
<el-table-column
label="抄送角色"
align="left"
header-align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.roleName }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit" />
<!-- 翻页 -->
<pagination
v-show="list.length > 0"
:total="listQuery.total"
:page.sync="listQuery.current"
:limit.sync="listQuery.size"
class="pagination"
@pagination="getList"
/>
</div>
</div>
</div>
<liuchengchaosongAdd
v-show="viewState == 2 || viewState == 3"
ref="divadd"
@doback="resetState"
@reloadlist="getList"
/>
</div>
</template>
<script>
import {
pageList,
delBySids,
} from "@/api/system/liuchengchaosong/liuchengchaosong";
import { selectFlowList } from "@/api/system/postManage/index";
import Pagination from "@/components/pagination";
import pageye from "@/components/pagination/pageye";
import ButtonBar from "@/components/ButtonBar";
import liuchengchaosongAdd from "./liuchengchaosongAdd";
export default {
name: "liuchengchaosong",
components: {
Pagination,
pageye,
ButtonBar,
liuchengchaosongAdd,
},
data() {
return {
btndisabled: false,
btnList: [
{
type: "primary",
size: "small",
icon: "plus",
btnKey: "toAdd",
btnLabel: "新增",
},
{
type: "info",
size: "small",
icon: "cross",
btnKey: "doClose",
btnLabel: "关闭",
},
],
isSearchShow: false,
searchxianshitit: "显示查询条件",
viewState: 1, // 1、列表 2、添加-车辆预订 3、编辑 4、查看 5、订金-订金收取
// 查询 -----------
flow_list: [], // 分公司
tableKey: 0,
list: [],
sids: [],
FormLoading: false,
listLoading: false,
listQuery: {
current: 1,
size: 5,
total: 0,
params: {
flowName: "",
},
},
};
},
mounted() {
this.$refs["btnbar"].setButtonList(this.btnList);
},
created() {
// 初始化变量
this.init();
// 加载列表
this.getList();
},
methods: {
init() {
selectFlowList().then((res) => {
if (res.success) {
this.flow_list = res.data;
}
});
},
btnHandle(btnKey) {
console.log("XXXXXXXXXXXXXXX " + btnKey);
switch (btnKey) {
case "toAdd":
this.toAdd();
break;
case "doClose":
this.doClose();
break;
default:
break;
}
},
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow;
if (this.isSearchShow) {
this.searchxianshitit = "隐藏查询条件";
} else {
this.searchxianshitit = "显示查询条件";
}
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size;
var pageindex = index + 1 + pagestart;
return pageindex;
},
// 查询列表信息
getList() {
this.listLoading = true;
this.listQuery.params.orgSidPath =
window.sessionStorage.getItem("orgSidPath");
pageList(this.listQuery).then((response) => {
this.listLoading = false;
if (response.success) {
this.list = response.data.records;
this.listQuery.total = response.data.total;
} else {
this.list = [];
this.listQuery.total = 0;
}
});
},
// 查询按钮
handleFilter() {
this.listQuery.current = 1;
this.getList();
},
// 重置
handleReset() {
this.listQuery = {
current: 1,
size: 5,
total: 0,
params: {
flowName: "",
},
};
this.getList();
},
toAdd() {
this.viewState = 2;
this.$refs["divadd"].showAdd();
},
// 编辑
handleUpdate(row) {
this.viewState = 3;
this.$refs["divadd"].showEdit(row);
},
handleDelete(row) {
const tip = "请确认是否删除";
this.$confirm(tip, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
const aa = [];
aa.push(row.sid);
delBySids(aa).then((res) => {
if (res.success) {
this.$message({
showClose: true,
type: "success",
message: "删除成功",
});
this.getList();
}
});
});
},
resetState() {
this.viewState = 1;
},
doClose() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.go(-1);
},
},
};
</script>
<style scoped>
</style>

522
demo-web-ui/src/views/datamapping/shujuyingshe.vue
View File

@@ -1,261 +1,261 @@
<template>
<div class="app-container">
<!-- Start 列表页面 -->
<div>
<button-bar view-title="业务数据映射查询" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" class="tab-header" label-width="150px">
<el-form-item label="数据字典类别编码:">
<el-input v-model="listQuery.params.dictTypeCode" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据字典类别名称:">
<el-input v-model="listQuery.params.dictTypeName" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据key:">
<el-input v-model="listQuery.params.dictKey" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据value:">
<el-input v-model="listQuery.params.dictValue" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射来源:">
<el-select v-model="listQuery.params.map_sourceKey" filterable placeholder="">
<el-option v-for="item in mappingsource_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
</el-select>
</el-form-item>
<el-form-item label="映射实体名称:">
<el-input v-model="listQuery.params.map_object" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目类别:">
<el-input v-model="listQuery.params.map_item" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目编码:">
<el-input v-model="listQuery.params.map_itemKey" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目值:">
<el-input v-model="listQuery.params.map_itemValue" clearable placeholder=""/>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" @click="handleFilter" size="small">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" @click="handleReset" size="small">重置</el-button>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">数据映射列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;">
<el-table-column fixed width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column label="数据字典类别编码" width="200" align="center">
<template slot-scope="scope">
<span>{{ scope.row.dictTypeCode }}</span>
</template>
</el-table-column>
<el-table-column label="数据字典类别名称" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.dictTypeName }}</span>
</template>
</el-table-column>
<el-table-column label="数据key" align="center" width="150">
<template slot-scope="scope">
<span>{{ scope.row.dictKey }}</span>
</template>
</el-table-column>
<el-table-column label="数据value" align="center" width="150">
<template slot-scope="scope">
<span>{{ scope.row.dictValue }}</span>
</template>
</el-table-column>
<el-table-column label="映射来源" align="center" width="100">
<template slot-scope="scope">
<span>{{ scope.row.map_sourceValue }}</span>
</template>
</el-table-column>
<el-table-column label="映射实体名称" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_object }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目类别" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_item }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目编码" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_itemKey }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目值" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_itemValue }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
</div>
</div>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import { listPage } from '@/api/system/datamapping/datamapping'
import { typeValues } from '@/api/system/roleAdminister'
export default {
name: 'shujuyingshe',
components: {
Pagination,
pageye,
ButtonBar,
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
// 查询条件 -----------
tableKey: 0,
list: [],
mappingsource_list: [],
FormLoading: false,
listLoading: false,
listQuery: {
params: {
map_sourceKey: '',
map_sourceValue: '',
map_object: '',
map_item: '',
map_itemKey: '',
map_itemValue: '',
dictTypeCode: '',
dictTypeName: '',
dictKey: '',
dictValue: ''
},
current: 1,
size: 5,
total: 0
},
rules: {}
}
},
created() {
// 加载列表
this.getList()
this.init()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
init() {
typeValues({ type: 'sys_mappingsource' }).then((resp) => {
if (resp.success) {
this.mappingsource_list = resp.data
}
})
},
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'doClose':
this.doClose()
break
default:
break
}
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
// 查询列表信息
getList() {
this.listLoading = true
listPage(this.listQuery).then((response) => {
console.log('列表查询结果：', response)
this.listLoading = false
if (response.success && response.data && response.data.total > 0) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
// 查询按钮
handleFilter() {
this.listQuery.current = 1
this.getList()
},
handleReset() {
this.listQuery = {
params: {
map_sourceKey: '',
map_sourceValue: '',
map_object: '',
map_item: '',
map_itemKey: '',
map_itemValue: '',
dictTypeCode: '',
dictTypeName: '',
dictKey: '',
dictValue: ''
},
current: 1,
size: 5,
total: 0
}
this.getList()
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
/*表格列设置fixed后固定列出现下边框的设置*/
/deep/ .el-table__fixed {
height: 100% !important;
}
/*表格列设置fixed后固定列出现下边框的设置*/
/deep/ .el-table__fixed-right {
height: 100% !important;
}
</style>
<template>
<div class="app-container">
<!-- Start 列表页面 -->
<div>
<button-bar view-title="业务数据映射查询" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" class="tab-header" label-width="150px">
<el-form-item label="数据字典类别编码:">
<el-input v-model="listQuery.params.dictTypeCode" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据字典类别名称:">
<el-input v-model="listQuery.params.dictTypeName" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据key:">
<el-input v-model="listQuery.params.dictKey" clearable placeholder=""/>
</el-form-item>
<el-form-item label="数据value:">
<el-input v-model="listQuery.params.dictValue" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射来源:">
<el-select v-model="listQuery.params.map_sourceKey" filterable placeholder="">
<el-option v-for="item in mappingsource_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
</el-select>
</el-form-item>
<el-form-item label="映射实体名称:">
<el-input v-model="listQuery.params.map_object" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目类别:">
<el-input v-model="listQuery.params.map_item" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目编码:">
<el-input v-model="listQuery.params.map_itemKey" clearable placeholder=""/>
</el-form-item>
<el-form-item label="映射项目值:">
<el-input v-model="listQuery.params.map_itemValue" clearable placeholder=""/>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" @click="handleFilter" size="small">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" @click="handleReset" size="small">重置</el-button>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">数据映射列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;">
<el-table-column fixed width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column label="数据字典类别编码" width="200" align="center">
<template slot-scope="scope">
<span>{{ scope.row.dictTypeCode }}</span>
</template>
</el-table-column>
<el-table-column label="数据字典类别名称" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.dictTypeName }}</span>
</template>
</el-table-column>
<el-table-column label="数据key" align="center" width="150">
<template slot-scope="scope">
<span>{{ scope.row.dictKey }}</span>
</template>
</el-table-column>
<el-table-column label="数据value" align="center" width="150">
<template slot-scope="scope">
<span>{{ scope.row.dictValue }}</span>
</template>
</el-table-column>
<el-table-column label="映射来源" align="center" width="100">
<template slot-scope="scope">
<span>{{ scope.row.map_sourceValue }}</span>
</template>
</el-table-column>
<el-table-column label="映射实体名称" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_object }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目类别" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_item }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目编码" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_itemKey }}</span>
</template>
</el-table-column>
<el-table-column label="映射项目值" align="center" width="200">
<template slot-scope="scope">
<span>{{ scope.row.map_itemValue }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
</div>
</div>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import { listPage } from '@/api/system/datamapping/datamapping'
import { typeValues } from '@/api/system/roleAdminister'
export default {
name: 'shujuyingshe',
components: {
Pagination,
pageye,
ButtonBar,
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
// 查询条件 -----------
tableKey: 0,
list: [],
mappingsource_list: [],
FormLoading: false,
listLoading: false,
listQuery: {
params: {
map_sourceKey: '',
map_sourceValue: '',
map_object: '',
map_item: '',
map_itemKey: '',
map_itemValue: '',
dictTypeCode: '',
dictTypeName: '',
dictKey: '',
dictValue: ''
},
current: 1,
size: 5,
total: 0
},
rules: {}
}
},
created() {
// 加载列表
this.getList()
this.init()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
init() {
typeValues({ type: 'sys_mappingsource' }).then((resp) => {
if (resp.success) {
this.mappingsource_list = resp.data
}
})
},
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'doClose':
this.doClose()
break
default:
break
}
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
// 查询列表信息
getList() {
this.listLoading = true
listPage(this.listQuery).then((response) => {
console.log('列表查询结果：', response)
this.listLoading = false
if (response.success && response.data && response.data.total > 0) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
// 查询按钮
handleFilter() {
this.listQuery.current = 1
this.getList()
},
handleReset() {
this.listQuery = {
params: {
map_sourceKey: '',
map_sourceValue: '',
map_object: '',
map_item: '',
map_itemKey: '',
map_itemValue: '',
dictTypeCode: '',
dictTypeName: '',
dictKey: '',
dictValue: ''
},
current: 1,
size: 5,
total: 0
}
this.getList()
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
/*表格列设置fixed后固定列出现下边框的设置*/
/deep/ .el-table__fixed {
height: 100% !important;
}
/*表格列设置fixed后固定列出现下边框的设置*/
/deep/ .el-table__fixed-right {
height: 100% !important;
}
</style>

496
demo-web-ui/src/views/dictManage/dictCommon.vue
View File

@@ -1,248 +1,248 @@
<template>
<div class="container">
<div v-show="viewState == 1">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="数据value">
<el-input v-model="page.params.dictValue" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查 询</el-button>
<el-button @click="add()">添 加</el-button>
<el-button @click="closeDict">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="280px">
<template slot-scope="scope">
<!-- <el-button type="primary" size="mini" @click="add(scope.row)">-->
<!-- 添加子级-->
<!-- </el-button>-->
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
<el-button type="primary" size="mini" @click="handleMap(scope.row)">
映射
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictType" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="groupName" label="数据分组" align="center">
</el-table-column>
<el-table-column prop="dictKey" label="数据key" align="center">
</el-table-column>
<el-table-column prop="dictValue" label="数据value" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典数据'" :visible.sync="editDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>字典分类编码</td>
<td>
{{ form.dictType }}
</td>
</tr>
<tr>
<td>数据分组</td>
<td>
<el-input v-model="form.groupName"></el-input>
</td>
</tr>
<tr>
<td>数据key</td>
<td>
<el-input v-model="form.dictKey"></el-input>
</td>
</tr>
<tr>
<td>数据value</td>
<td>
<el-input v-model="form.dictValue"></el-input>
</td>
</tr>
</table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
<dictMap v-show="viewState == 2" ref="divAdd" @doback="resetState"/>
</div>
</template>
<script>
import { deldictCommon, dictCommonList, putdictCommon, savedictCommon } from '@/api/system/dictType/dictCommon.js'
import dictMap from './dictMap'
export default {
components: {
dictMap
},
data() {
return {
editDialog: false,
dialogTitle: '',
viewState: 1,
form: {
dictKey: '',
dictType: '',
groupName: '',
dictValue: '',
parentSid: ''
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
dictKey: '',
dictType: '',
dictValue: '',
parentSid: '',
sidPath: '',
}
},
tableData: []
}
},
props: ['dictData'],
watch: {
dictData: {
handler(val) {
this.form.parentSid = val.sid
this.form.dictType = val.dictType
this.form.groupName = val.groupName
this.page.params.parentSid = val.sid
this.page.params.dictType = val.dictType
this.getPageList(this.page)
},
deep: true
}
},
mounted() {
// if (this.$route.query.sid) {
// sessionStorage.setItem('dictType', this.$route.query.dictType);
// sessionStorage.setItem('parentSid', this.$route.query.sid);
// this.page.params.dictType = this.$route.query.dictType
// this.page.params.parentSid = this.$route.query.sid
// this.form.dictType = this.$route.query.dictType;
// this.form.parentSid = this.$route.query.sid
// } else {
// this.page.params.dictType = sessionStorage.getItem('dictType');
// this.page.params.parentSid = sessionStorage.getItem('parentSid');
// this.form.dictType = sessionStorage.getItem('dictType');
// this.form.parentSid = sessionStorage.getItem('parentSid');
// }
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { // 查询
this.getPageList(this.page)
},
resetSearch() { // 重置
this.getPageList(this.page)
},
getPageList(data) { // 获取列表
dictCommonList(data).then((res) => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(row) {
if (row) {
this.form.dictType = row.dictType
this.form.parentSid = row.sid
} else {
this.form.parentSid = 0
// this.form.dictType = row.dictType
}
this.dialogTitle = '新增'
this.editDialog = true
this.form.dictKey = ''
this.form.groupName = ''
this.form.dictValue = ''
this.form.sid = ''
},
closeDict() {
this.form.parentSid = ''
this.form.dictType = ''
this.form.groupName = ''
this.page.params.parentSid = ''
this.page.params.dictType = ''
this.$emit('doback')
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save() {
if (this.form.sid) {
putdictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
savedictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该数据吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deldictCommon({ sid: row.sid }).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
})
})
})
},
handleMap(row) {
this.viewState = 2
this.$refs['divAdd'].showAdd(row)
},
resetState() {
this.viewState = 1
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="container">
<div v-show="viewState == 1">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="数据value">
<el-input v-model="page.params.dictValue" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查 询</el-button>
<el-button @click="add()">添 加</el-button>
<el-button @click="closeDict">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="280px">
<template slot-scope="scope">
<!-- <el-button type="primary" size="mini" @click="add(scope.row)">-->
<!-- 添加子级-->
<!-- </el-button>-->
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
<el-button type="primary" size="mini" @click="handleMap(scope.row)">
映射
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictType" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="groupName" label="数据分组" align="center">
</el-table-column>
<el-table-column prop="dictKey" label="数据key" align="center">
</el-table-column>
<el-table-column prop="dictValue" label="数据value" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典数据'" :visible.sync="editDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>字典分类编码</td>
<td>
{{ form.dictType }}
</td>
</tr>
<tr>
<td>数据分组</td>
<td>
<el-input v-model="form.groupName"></el-input>
</td>
</tr>
<tr>
<td>数据key</td>
<td>
<el-input v-model="form.dictKey"></el-input>
</td>
</tr>
<tr>
<td>数据value</td>
<td>
<el-input v-model="form.dictValue"></el-input>
</td>
</tr>
</table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
<dictMap v-show="viewState == 2" ref="divAdd" @doback="resetState"/>
</div>
</template>
<script>
import { deldictCommon, dictCommonList, putdictCommon, savedictCommon } from '@/api/system/dictType/dictCommon.js'
import dictMap from './dictMap'
export default {
components: {
dictMap
},
data() {
return {
editDialog: false,
dialogTitle: '',
viewState: 1,
form: {
dictKey: '',
dictType: '',
groupName: '',
dictValue: '',
parentSid: ''
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
dictKey: '',
dictType: '',
dictValue: '',
parentSid: '',
sidPath: '',
}
},
tableData: []
}
},
props: ['dictData'],
watch: {
dictData: {
handler(val) {
this.form.parentSid = val.sid
this.form.dictType = val.dictType
this.form.groupName = val.groupName
this.page.params.parentSid = val.sid
this.page.params.dictType = val.dictType
this.getPageList(this.page)
},
deep: true
}
},
mounted() {
// if (this.$route.query.sid) {
// sessionStorage.setItem('dictType', this.$route.query.dictType);
// sessionStorage.setItem('parentSid', this.$route.query.sid);
// this.page.params.dictType = this.$route.query.dictType
// this.page.params.parentSid = this.$route.query.sid
// this.form.dictType = this.$route.query.dictType;
// this.form.parentSid = this.$route.query.sid
// } else {
// this.page.params.dictType = sessionStorage.getItem('dictType');
// this.page.params.parentSid = sessionStorage.getItem('parentSid');
// this.form.dictType = sessionStorage.getItem('dictType');
// this.form.parentSid = sessionStorage.getItem('parentSid');
// }
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { // 查询
this.getPageList(this.page)
},
resetSearch() { // 重置
this.getPageList(this.page)
},
getPageList(data) { // 获取列表
dictCommonList(data).then((res) => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(row) {
if (row) {
this.form.dictType = row.dictType
this.form.parentSid = row.sid
} else {
this.form.parentSid = 0
// this.form.dictType = row.dictType
}
this.dialogTitle = '新增'
this.editDialog = true
this.form.dictKey = ''
this.form.groupName = ''
this.form.dictValue = ''
this.form.sid = ''
},
closeDict() {
this.form.parentSid = ''
this.form.dictType = ''
this.form.groupName = ''
this.page.params.parentSid = ''
this.page.params.dictType = ''
this.$emit('doback')
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save() {
if (this.form.sid) {
putdictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
savedictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该数据吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deldictCommon({ sid: row.sid }).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
})
})
})
},
handleMap(row) {
this.viewState = 2
this.$refs['divAdd'].showAdd(row)
},
resetState() {
this.viewState = 1
}
}
}
</script>
<style scoped>
</style>

400
demo-web-ui/src/views/dictManage/dictManage.vue
View File

@@ -1,200 +1,200 @@
<template>
<div class="container">
<div v-show="viewState == 1">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="分类名称">
<el-input clearable v-model="page.params.dictTypeName"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="说明">
<el-input clearable v-model="page.params.remarks"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查询</el-button>
<el-button @click="add()">添加</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="300px">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="guanli(scope.row)">
管理
</el-button>
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictTypeCode" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="dictTypeName" label="字典分类名称" align="center">
</el-table-column>
<el-table-column prop="remarks" label="说明" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典分类'" :visible.sync="editDialog" width="50%">
<el-form>
<table class="e-table" cellspacing="0">
<tr>
<td>数据字典code</td>
<td>
<el-input v-model="form.dictTypeCode"></el-input>
</td>
</tr>
<tr>
<td>数据分类名称</td>
<td>
<el-input v-model="form.dictTypeName"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
<dict-common @doback="resetState" :dictData='dictData' v-show="viewState == 2"/>
</div>
</template>
<script>
import { pageList, saveDictType, putDictType, delDictType } from '@/api/system/dictType/index.js'
import dictCommon from './dictCommon.vue'
export default {
data() {
return {
editDialog: false,
dialogTitle: '',
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
dictTypeName: '',
dictTypeCode: ''
}
},
tableData: [],
viewState: 1,
dictData: {}
}
},
components: {
dictCommon
},
mounted() {
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { // 查询
this.getPageList()
},
resetSearch() { // 重置
this.page.current = 1
this.getPageList()
},
getPageList() { // 获取列表
pageList(this.page).then((res) => {
if (res.success) {
this.tableData = res.data.records
this.page.total = res.data.total
} else {
this.tableData = []
this.page.total = 0
}
})
},
add() {
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save() {
if (this.form.sid) {
putDictType(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveDictType(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该条数据吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delDictType({ sid: row.sid }).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
})
})
})
},
guanli(row) {
this.dictData = { dictType: row.dictTypeCode }
this.viewState = 2
},
resetState() {
this.viewState = 1
}
}
}
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>
<template>
<div class="container">
<div v-show="viewState == 1">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="分类名称">
<el-input clearable v-model="page.params.dictTypeName"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="说明">
<el-input clearable v-model="page.params.remarks"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查询</el-button>
<el-button @click="add()">添加</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="300px">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="guanli(scope.row)">
管理
</el-button>
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictTypeCode" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="dictTypeName" label="字典分类名称" align="center">
</el-table-column>
<el-table-column prop="remarks" label="说明" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典分类'" :visible.sync="editDialog" width="50%">
<el-form>
<table class="e-table" cellspacing="0">
<tr>
<td>数据字典code</td>
<td>
<el-input v-model="form.dictTypeCode"></el-input>
</td>
</tr>
<tr>
<td>数据分类名称</td>
<td>
<el-input v-model="form.dictTypeName"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
<dict-common @doback="resetState" :dictData='dictData' v-show="viewState == 2"/>
</div>
</template>
<script>
import { pageList, saveDictType, putDictType, delDictType } from '@/api/system/dictType/index.js'
import dictCommon from './dictCommon.vue'
export default {
data() {
return {
editDialog: false,
dialogTitle: '',
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
dictTypeName: '',
dictTypeCode: ''
}
},
tableData: [],
viewState: 1,
dictData: {}
}
},
components: {
dictCommon
},
mounted() {
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { // 查询
this.getPageList()
},
resetSearch() { // 重置
this.page.current = 1
this.getPageList()
},
getPageList() { // 获取列表
pageList(this.page).then((res) => {
if (res.success) {
this.tableData = res.data.records
this.page.total = res.data.total
} else {
this.tableData = []
this.page.total = 0
}
})
},
add() {
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save() {
if (this.form.sid) {
putDictType(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveDictType(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该条数据吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delDictType({ sid: row.sid }).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
})
})
})
},
guanli(row) {
this.dictData = { dictType: row.dictTypeCode }
this.viewState = 2
},
resetState() {
this.viewState = 1
}
}
}
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>

310
demo-web-ui/src/views/dictManage/dictMap.vue
View File

@@ -1,155 +1,155 @@
<template>
<div class="app-app-container">
<div class="tab-header webtop">
<!--标题-->
<div>{{ viewTitle }}</div>
<!--start 添加修改按钮-->
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" class="formadd" :model="formobj">
<div class="title">
<div>[{{ dictionariesKey }}+{{dictionariesValue}}]映射列表</div>
<el-button type="primary" size="mini" @click="Add">添加</el-button>
</div>
<el-table :key="tableKey" :data="formobj.listDtos" :index="index" border style="width: 100%">
<el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
<el-table-column fixed prop="name" label="操作" width="100px" align="center" header-align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="dataDelete(scope.$index)">删除
</el-button>
</template>
</el-table-column>
<el-table-column label="映射来源" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.map_sourceValue" filterable placeholder="" @change="changeSource($event, scope.row)">
<el-option v-for="item in mappingsource_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="映射实体名称" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_object" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目类别" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_item" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目编码" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_itemKey" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目值" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_itemValue" placeholder="" clearable/>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</div>
</template>
<script>
import { typeValues } from '@/api/system/roleAdminister/index'
import { saveMappingList, selectMappingListInfo } from '@/api/system/dictType/index.js'
export default {
data() {
return{
viewTitle: '数据字典-映射管理',
tableKey: 0,
index: 0,
dictionariesKey: '',
dictionariesValue: '',
mappingsource_list: [],
formobj: {
userSid: '',
dictSid: '',
listDtos: []
},
submitdisabled: false
}
},
methods: {
showAdd(row) {
this.formobj.dictSid = row.sid
this.dictionariesKey = row.dictType
this.dictionariesValue = row.dictValue
this.formobj.userSid = window.sessionStorage.getItem('userSid')
typeValues({ type: 'sys_mappingsource' }).then((resp) => {
if (resp.success) {
this.mappingsource_list = resp.data
}
})
selectMappingListInfo({ dictSid: row.sid }).then((resp) => {
if (resp.success) {
this.formobj.listDtos = resp.data
}
})
},
Add() {
this.formobj.listDtos.push({
map_item: '',
map_itemKey: '',
map_itemValue: '',
map_object: '',
map_sourceKey: '',
map_sourceValue: '',
sid: ''
})
},
changeSource(value, row) {
let bb = null
this.mappingsource_list.forEach((e) => {
if (e.dictValue === value) {
bb = {
value: e.dictValue,
key: e.dictKey
}
}
})
row.map_sourceKey = bb.key
},
dataDelete(index) {
this.formobj.listDtos.splice(index, 1)
},
save() {
if (this.formobj.listDtos.length === 0) {
this.$message({ showClose: true, type: 'error', message: '映射列表不能为空' })
return
}
saveMappingList(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn()
}
})
},
handleReturn() {
this.formobj = {
userSid: '',
dictSid: '',
listDtos: []
}
this.$emit('doback')
}
}
}
</script>
<style scoped>
.title {
padding: 7px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>
<template>
<div class="app-app-container">
<div class="tab-header webtop">
<!--标题-->
<div>{{ viewTitle }}</div>
<!--start 添加修改按钮-->
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" class="formadd" :model="formobj">
<div class="title">
<div>[{{ dictionariesKey }}+{{dictionariesValue}}]映射列表</div>
<el-button type="primary" size="mini" @click="Add">添加</el-button>
</div>
<el-table :key="tableKey" :data="formobj.listDtos" :index="index" border style="width: 100%">
<el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
<el-table-column fixed prop="name" label="操作" width="100px" align="center" header-align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="dataDelete(scope.$index)">删除
</el-button>
</template>
</el-table-column>
<el-table-column label="映射来源" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.map_sourceValue" filterable placeholder="" @change="changeSource($event, scope.row)">
<el-option v-for="item in mappingsource_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="映射实体名称" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_object" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目类别" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_item" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目编码" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_itemKey" placeholder="" clearable/>
</template>
</el-table-column>
<el-table-column label="映射项目值" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.map_itemValue" placeholder="" clearable/>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</div>
</template>
<script>
import { typeValues } from '@/api/system/roleAdminister/index'
import { saveMappingList, selectMappingListInfo } from '@/api/system/dictType/index.js'
export default {
data() {
return{
viewTitle: '数据字典-映射管理',
tableKey: 0,
index: 0,
dictionariesKey: '',
dictionariesValue: '',
mappingsource_list: [],
formobj: {
userSid: '',
dictSid: '',
listDtos: []
},
submitdisabled: false
}
},
methods: {
showAdd(row) {
this.formobj.dictSid = row.sid
this.dictionariesKey = row.dictType
this.dictionariesValue = row.dictValue
this.formobj.userSid = window.sessionStorage.getItem('userSid')
typeValues({ type: 'sys_mappingsource' }).then((resp) => {
if (resp.success) {
this.mappingsource_list = resp.data
}
})
selectMappingListInfo({ dictSid: row.sid }).then((resp) => {
if (resp.success) {
this.formobj.listDtos = resp.data
}
})
},
Add() {
this.formobj.listDtos.push({
map_item: '',
map_itemKey: '',
map_itemValue: '',
map_object: '',
map_sourceKey: '',
map_sourceValue: '',
sid: ''
})
},
changeSource(value, row) {
let bb = null
this.mappingsource_list.forEach((e) => {
if (e.dictValue === value) {
bb = {
value: e.dictValue,
key: e.dictKey
}
}
})
row.map_sourceKey = bb.key
},
dataDelete(index) {
this.formobj.listDtos.splice(index, 1)
},
save() {
if (this.formobj.listDtos.length === 0) {
this.$message({ showClose: true, type: 'error', message: '映射列表不能为空' })
return
}
saveMappingList(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn()
}
})
},
handleReturn() {
this.formobj = {
userSid: '',
dictSid: '',
listDtos: []
}
this.$emit('doback')
}
}
}
</script>
<style scoped>
.title {
padding: 7px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>

1046
demo-web-ui/src/views/flow/doneList.vue
View File

File diff suppressed because it is too large Load Diff

148
demo-web-ui/src/views/flow/flowRecordForBusiness.vue
View File

@@ -1,74 +1,74 @@
<template>
<div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import { setStorage } from '@/utils/auth'
import { getFlowViewer, readXml } from '@/api/flow/todo'
import { flowRecord } from '@/api/workflow/finished'
export default {
name: 'flowRecordForBusiness',
components: {
flowRecords
},
data() {
return {
taskList: [],
xmlData: '',
flowRecordList: []
}
},
created() {
var one = window.location.href.indexOf('?data') + 6
const data = window.location.href.substr(one) // url解码unescape()已从web中移除,尽量不使用
const obj = JSON.parse(decodeURIComponent(data))
this.obj = obj
var token = obj.token
setStorage(token)
console.log(obj)
this.getFlowViewer(obj.procInsId)
this.getModelDetail(obj.deployId)
this.getFlowRecordList(obj.procInsId, obj.deployId)
window.parent.postMessage({
cmd: 'returnHeight',
params: {
// 告诉父级页面，子页面的弹框高度。
code: 2,
data: 600 + 'px'
}
}, '*')
},
methods: {
/** xml 文件 */
getModelDetail(deployId) {
// 发送请求，获取xml
readXml(deployId).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
getFlowViewer(procInsId).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = { procInsId: procInsId, deployId: deployId }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>
<template>
<div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import { setStorage } from '@/utils/auth'
import { getFlowViewer, readXml } from '@/api/flow/todo'
import { flowRecord } from '@/api/workflow/finished'
export default {
name: 'flowRecordForBusiness',
components: {
flowRecords
},
data() {
return {
taskList: [],
xmlData: '',
flowRecordList: []
}
},
created() {
var one = window.location.href.indexOf('?data') + 6
const data = window.location.href.substr(one) // url解码unescape()已从web中移除,尽量不使用
const obj = JSON.parse(decodeURIComponent(data))
this.obj = obj
var token = obj.token
setStorage(token)
console.log(obj)
this.getFlowViewer(obj.procInsId)
this.getModelDetail(obj.deployId)
this.getFlowRecordList(obj.procInsId, obj.deployId)
window.parent.postMessage({
cmd: 'returnHeight',
params: {
// 告诉父级页面，子页面的弹框高度。
code: 2,
data: 600 + 'px'
}
}, '*')
},
methods: {
/** xml 文件 */
getModelDetail(deployId) {
// 发送请求，获取xml
readXml(deployId).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
getFlowViewer(procInsId).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = { procInsId: procInsId, deployId: deployId }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>

784
demo-web-ui/src/views/flow/havereadList.vue
View File

@@ -1,392 +1,392 @@
<template>
<div class="app-container">
<div class="tab-header webtop">
<div style="text-align: right">
<a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
</div>
</div>
<div class="searchcon">
<div class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="工作名称">
<el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
</el-form-item>
<el-form-item label="发起人">
<el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
<el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发送日期">
<el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
<span style="padding: 0 8px">至</span>
<el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-button type="primary" @click="handleFilter">查询</el-button>
</el-form>
</div>
</div>
<div class="listtop">
<div class="tit">已阅列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
<el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column width="180px" label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column label="工作名称" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgTitle }}</span>
</template>
</el-table-column>
<el-table-column label="发送人" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderName }}</span>
</template>
</el-table-column>
<el-table-column label="发送日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sendTime }}</span>
</template>
</el-table-column>
<el-table-column label="发送部门" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderDeptName }}</span>
</template>
</el-table-column>
<el-table-column label="发送来源" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgSource }}</span>
</template>
</el-table-column>
<el-table-column label="阅读日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.modifyTime }}</span>
</template>
</el-table-column>
<el-table-column label="审批记录" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!-- Start查看页面 -->
<el-dialog
title=""
:visible.sync="centerDialogVisible"
width="78%"
height="1%"
:before-close="closeIt"
center>
<iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
</el-dialog>
<!-- End查看页面-->
<!-- 编辑信息 -->
<el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
<!--流程流转记录-->
<div style="text-align: right">
<el-button type="primary" size="small" @click="handleComment">评论</el-button>
</div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</el-dialog>
<!-- 审批人员填写评论 -->
<el-dialog title="评论" :visible.sync="commentVisible" width="50%">
<el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
</el-input>
<upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
<el-button size="small" @click="commentVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import { getStorage } from '@/utils/auth'
import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
import { pagerList } from '@/api/flow/read'
import { flowRecord } from '@/api/workflow/finished'
import upload from '@/components/uploadFile/upload'
export default {
name: '',
components: {
pageye,
Pagination,
flowRecords,
upload
},
data() {
return {
taskList: [],
user_list: [],
xmlData: '',
dialogHeight: '80%',
centerDialogVisible: false, // 弹框
editDialog: false,
flowRecordList: [],
listLoading: false,
list: [],
tableKey: 0,
url: '',
commentVisible: false, // 评论内容弹框
comment_ImgList: [],
comment: {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
},
line_row: {},
loginInfo: {
userSid: ''
},
selectUrl_list: {
proc_def_id: '', // 流程定义id
taskDefKey: '', // 节点id
type: '' // 类型
},
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
names: '',
createStartTime: '',
createEndTime: '',
userSid: '',
state: '1', // 0是待阅,1是已阅
orgPath: '',
startUserSid: ''
}
}
}
},
mounted() {
// 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
},
created() {
// 加载列表
this.init()
},
methods: {
async handleMessage(event) {
var code = ''
if (event.data.params !== null && event.data.params !== undefined) {
code = event.data.params.code
}
if (code === 1) {
this.init()
this.centerDialogVisible = false
} else if (code === 2) {
this.dialogHeight = event.data.params.data
this.setIframeHeight(document.getElementById('iframe_done'))
}
},
setIframeHeight(iframe) {
iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
},
init() {
sysstaffinfo().then((resp) => {
if (resp.success) {
this.user_list = resp.data
}
})
this.getList()
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
getList() {
this.listLoading = true
this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
pagerList(this.listQuery).then((rep) => {
this.listLoading = false
if (rep.success) {
this.list = rep.data.records
this.listQuery.total = rep.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
handleFilter() {
this.listQuery.pageNumber = 1
this.getList()
},
/** 打开详情 */
handleCheck(row) {
this.selectUrl_list.proc_def_id = row.procDefId
this.selectUrl_list.taskDefKey = row.taskDefKey
this.selectUrl_list.type = 2 // 详情
const parameter_list = {
businessSid: row.businessSid,
instanceId: row.procInsId,
taskId: row.taskId,
taskDefKey: row.taskDefKey,
taskName: row.taskName,
deployId: row.procDefId
}
selectUrl(this.selectUrl_list).then((response) => {
if (response.success && response.data.url !== '') {
// this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
// this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
} else if (response.success && response.data.url === '') {
this.$notify({
title: '提示',
message: '请联系系统管理员',
type: 'error',
duration: 2000
})
} else {
this.$notify({
title: '提示',
message: '执行失败',
type: 'error',
duration: 2000
})
}
})
this.getFlowRecordList(row.procInsId, row.procDefId)
this.centerDialogVisible = true
},
handleComment() {
this.commentVisible = true
this.comment = {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
}
this.comment_ImgList = []
},
handleCommentConfirm() {
if (this.comment.content === '') {
this.$message({ showClose: true, type: 'error', message: '请填写评论' })
return
}
if (this.comment_ImgList.length > 0) {
for (var i = 0; i < this.comment_ImgList.length; i++) {
this.comment.fileList.push(this.comment_ImgList[i].url)
}
}
this.comment.reviewer = window.sessionStorage.getItem('name')
this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
this.comment.processId = this.line_row.procInsId
commentSave(this.comment).then((resp) => {
if (resp.success) {
this.commentVisible = false
this.handleFlowRecord(this.line_row)
}
})
},
closeIt() {
this.url = ''
this.centerDialogVisible = false
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.line_row = row
this.getModelDetail(row.procDefId)
this.getFlowViewer(row.procInsId)
this.getFlowRecordList(row.procInsId, row.procDefId)
this.editDialog = true
},
/** xml 文件 */
getModelDetail(procDefId) {
var token = getStorage()
// 发送请求，获取xml
readXml(procDefId, token).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
var token = getStorage()
getFlowViewer(procInsId, token).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, procDefId) {
var token = getStorage()
const params = { procInsId: procInsId, deployId: procDefId, token: token }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>
<style>
.listtop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 0px 10px 15px;
margin: 0;
}
.listtop .tit {
font-weight: bold;
}
.listtop .pagination {
margin: 0;
padding: 0;
}
.pages {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 0px 0px 15px 15px;
}
.pages .tit {
font-weight: bold;
}
.pages .pagination {
margin: 0;
}
.dialogStyle /deep/ .el-dialog__body {
padding-top: 0px !important;
}
</style>
<template>
<div class="app-container">
<div class="tab-header webtop">
<div style="text-align: right">
<a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
</div>
</div>
<div class="searchcon">
<div class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="工作名称">
<el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
</el-form-item>
<el-form-item label="发起人">
<el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
<el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发送日期">
<el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
<span style="padding: 0 8px">至</span>
<el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-button type="primary" @click="handleFilter">查询</el-button>
</el-form>
</div>
</div>
<div class="listtop">
<div class="tit">已阅列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
<el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column width="180px" label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column label="工作名称" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgTitle }}</span>
</template>
</el-table-column>
<el-table-column label="发送人" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderName }}</span>
</template>
</el-table-column>
<el-table-column label="发送日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sendTime }}</span>
</template>
</el-table-column>
<el-table-column label="发送部门" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderDeptName }}</span>
</template>
</el-table-column>
<el-table-column label="发送来源" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgSource }}</span>
</template>
</el-table-column>
<el-table-column label="阅读日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.modifyTime }}</span>
</template>
</el-table-column>
<el-table-column label="审批记录" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!-- Start查看页面 -->
<el-dialog
title=""
:visible.sync="centerDialogVisible"
width="78%"
height="1%"
:before-close="closeIt"
center>
<iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
</el-dialog>
<!-- End查看页面-->
<!-- 编辑信息 -->
<el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
<!--流程流转记录-->
<div style="text-align: right">
<el-button type="primary" size="small" @click="handleComment">评论</el-button>
</div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</el-dialog>
<!-- 审批人员填写评论 -->
<el-dialog title="评论" :visible.sync="commentVisible" width="50%">
<el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
</el-input>
<upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
<el-button size="small" @click="commentVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import { getStorage } from '@/utils/auth'
import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
import { pagerList } from '@/api/flow/read'
import { flowRecord } from '@/api/workflow/finished'
import upload from '@/components/uploadFile/upload'
export default {
name: '',
components: {
pageye,
Pagination,
flowRecords,
upload
},
data() {
return {
taskList: [],
user_list: [],
xmlData: '',
dialogHeight: '80%',
centerDialogVisible: false, // 弹框
editDialog: false,
flowRecordList: [],
listLoading: false,
list: [],
tableKey: 0,
url: '',
commentVisible: false, // 评论内容弹框
comment_ImgList: [],
comment: {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
},
line_row: {},
loginInfo: {
userSid: ''
},
selectUrl_list: {
proc_def_id: '', // 流程定义id
taskDefKey: '', // 节点id
type: '' // 类型
},
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
names: '',
createStartTime: '',
createEndTime: '',
userSid: '',
state: '1', // 0是待阅,1是已阅
orgPath: '',
startUserSid: ''
}
}
}
},
mounted() {
// 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
},
created() {
// 加载列表
this.init()
},
methods: {
async handleMessage(event) {
var code = ''
if (event.data.params !== null && event.data.params !== undefined) {
code = event.data.params.code
}
if (code === 1) {
this.init()
this.centerDialogVisible = false
} else if (code === 2) {
this.dialogHeight = event.data.params.data
this.setIframeHeight(document.getElementById('iframe_done'))
}
},
setIframeHeight(iframe) {
iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
},
init() {
sysstaffinfo().then((resp) => {
if (resp.success) {
this.user_list = resp.data
}
})
this.getList()
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
getList() {
this.listLoading = true
this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
pagerList(this.listQuery).then((rep) => {
this.listLoading = false
if (rep.success) {
this.list = rep.data.records
this.listQuery.total = rep.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
handleFilter() {
this.listQuery.pageNumber = 1
this.getList()
},
/** 打开详情 */
handleCheck(row) {
this.selectUrl_list.proc_def_id = row.procDefId
this.selectUrl_list.taskDefKey = row.taskDefKey
this.selectUrl_list.type = 2 // 详情
const parameter_list = {
businessSid: row.businessSid,
instanceId: row.procInsId,
taskId: row.taskId,
taskDefKey: row.taskDefKey,
taskName: row.taskName,
deployId: row.procDefId
}
selectUrl(this.selectUrl_list).then((response) => {
if (response.success && response.data.url !== '') {
// this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
// this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
} else if (response.success && response.data.url === '') {
this.$notify({
title: '提示',
message: '请联系系统管理员',
type: 'error',
duration: 2000
})
} else {
this.$notify({
title: '提示',
message: '执行失败',
type: 'error',
duration: 2000
})
}
})
this.getFlowRecordList(row.procInsId, row.procDefId)
this.centerDialogVisible = true
},
handleComment() {
this.commentVisible = true
this.comment = {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
}
this.comment_ImgList = []
},
handleCommentConfirm() {
if (this.comment.content === '') {
this.$message({ showClose: true, type: 'error', message: '请填写评论' })
return
}
if (this.comment_ImgList.length > 0) {
for (var i = 0; i < this.comment_ImgList.length; i++) {
this.comment.fileList.push(this.comment_ImgList[i].url)
}
}
this.comment.reviewer = window.sessionStorage.getItem('name')
this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
this.comment.processId = this.line_row.procInsId
commentSave(this.comment).then((resp) => {
if (resp.success) {
this.commentVisible = false
this.handleFlowRecord(this.line_row)
}
})
},
closeIt() {
this.url = ''
this.centerDialogVisible = false
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.line_row = row
this.getModelDetail(row.procDefId)
this.getFlowViewer(row.procInsId)
this.getFlowRecordList(row.procInsId, row.procDefId)
this.editDialog = true
},
/** xml 文件 */
getModelDetail(procDefId) {
var token = getStorage()
// 发送请求，获取xml
readXml(procDefId, token).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
var token = getStorage()
getFlowViewer(procInsId, token).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, procDefId) {
var token = getStorage()
const params = { procInsId: procInsId, deployId: procDefId, token: token }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>
<style>
.listtop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 0px 10px 15px;
margin: 0;
}
.listtop .tit {
font-weight: bold;
}
.listtop .pagination {
margin: 0;
padding: 0;
}
.pages {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 0px 0px 15px 15px;
}
.pages .tit {
font-weight: bold;
}
.pages .pagination {
margin: 0;
}
.dialogStyle /deep/ .el-dialog__body {
padding-top: 0px !important;
}
</style>

786
demo-web-ui/src/views/flow/tobereadList.vue
View File

@@ -1,393 +1,393 @@
<template>
<div class="app-container">
<div class="tab-header webtop">
<div style="text-align: right">
<a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
</div>
</div>
<div class="searchcon">
<div class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="工作名称">
<el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
</el-form-item>
<el-form-item label="发起人">
<el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
<el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发送日期">
<el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
<span style="padding: 0 8px">至</span>
<el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-button type="primary" @click="handleFilter">查询</el-button>
</el-form>
</div>
</div>
<div class="listtop">
<div class="tit">待阅列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
<el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column width="180px" label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column label="工作名称" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgTitle }}</span>
</template>
</el-table-column>
<el-table-column label="发送人" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderName }}</span>
</template>
</el-table-column>
<el-table-column label="发送日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sendTime }}</span>
</template>
</el-table-column>
<el-table-column label="发送部门" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderDeptName }}</span>
</template>
</el-table-column>
<el-table-column label="发送来源" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgSource }}</span>
</template>
</el-table-column>
<el-table-column label="审批记录" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!-- Start查看页面 -->
<el-dialog :visible.sync="centerDialogVisible" width="78%" height="1%" center @close="colsePage">
<iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
</el-dialog>
<!-- End查看页面-->
<!-- 编辑信息 -->
<el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle" @close="colsePage">
<!--流程流转记录-->
<div style="text-align: right">
<el-button type="primary" size="small" @click="handleComment">评论</el-button>
</div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</el-dialog>
<!-- 审批人员填写评论 -->
<el-dialog title="评论" :visible.sync="commentVisible" width="50%">
<el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
</el-input>
<upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
<el-button size="small" @click="commentVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import { getStorage } from '@/utils/auth'
import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
import { pagerList, changeRead } from '@/api/flow/read'
import { flowRecord } from '@/api/workflow/finished'
import upload from '@/components/uploadFile/upload'
export default {
name: '',
components: {
pageye,
Pagination,
flowRecords,
upload
},
data() {
return {
taskList: [],
user_list: [],
xmlData: '',
dialogHeight: '80%',
centerDialogVisible: false, // 弹框
editDialog: false,
flowRecordList: [],
listLoading: false,
list: [],
tableKey: 0,
url: '',
commentVisible: false, // 评论内容弹框
comment_ImgList: [],
comment: {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
},
line_row: {},
loginInfo: {
userSid: ''
},
selectUrl_list: {
proc_def_id: '', // 流程定义id
taskDefKey: '', // 节点id
type: '' // 类型
},
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
names: '',
createStartTime: '',
createEndTime: '',
userSid: '',
state: '0', // 0是待阅,1是已阅
orgPath: '',
startUserSid: ''
}
}
}
},
mounted() {
// 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
},
created() {
// 加载列表
this.init()
},
methods: {
async handleMessage(event) {
var code = ''
if (event.data.params !== null && event.data.params !== undefined) {
code = event.data.params.code
}
if (code === 1) {
this.init()
this.centerDialogVisible = false
} else if (code === 2) {
this.dialogHeight = event.data.params.data
this.setIframeHeight(document.getElementById('iframe_done'))
}
},
setIframeHeight(iframe) {
iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
},
init() {
sysstaffinfo().then((resp) => {
if (resp.success) {
this.user_list = resp.data
}
})
this.getList()
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
getList() {
this.listLoading = true
this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
pagerList(this.listQuery).then((rep) => {
this.listLoading = false
if (rep.success) {
this.list = rep.data.records
this.listQuery.total = rep.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
handleFilter() {
this.listQuery.pageNumber = 1
this.getList()
},
/** 打开详情 */
handleCheck(row) {
changeRead(row.sid).then((res) => {
if (res.success) {
this.selectUrl_list.proc_def_id = row.procDefId
this.selectUrl_list.taskDefKey = row.taskDefKey
this.selectUrl_list.type = 2 // 详情
const parameter_list = {
businessSid: row.businessSid,
instanceId: row.procInsId,
taskId: row.taskId,
taskDefKey: row.taskDefKey,
taskName: row.taskName,
deployId: row.procDefId
}
selectUrl(this.selectUrl_list).then((response) => {
if (response.success && response.data.url !== '') {
// this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
// this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
} else if (response.success && response.data.url === '') {
this.$notify({
title: '提示',
message: '请联系系统管理员',
type: 'error',
duration: 2000
})
} else {
this.$notify({
title: '提示',
message: '执行失败',
type: 'error',
duration: 2000
})
}
})
this.getFlowRecordList(row.procInsId, row.procDefId)
this.centerDialogVisible = true
// this.$router.push({path: '/todo' + '?token=' + getStorage()})
}
})
},
handleComment() {
this.commentVisible = true
this.comment = {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
}
this.comment_ImgList = []
},
handleCommentConfirm() {
if (this.comment.content === '') {
this.$message({ showClose: true, type: 'error', message: '请填写评论' })
return
}
if (this.comment_ImgList.length > 0) {
for (var i = 0; i < this.comment_ImgList.length; i++) {
this.comment.fileList.push(this.comment_ImgList[i].url)
}
}
this.comment.reviewer = window.sessionStorage.getItem('name')
this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
this.comment.processId = this.line_row.procInsId
commentSave(this.comment).then((resp) => {
if (resp.success) {
this.commentVisible = false
this.handleFlowRecord(this.line_row)
}
})
},
closeIt() {
this.url = ''
this.centerDialogVisible = false
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.line_row = row
changeRead(row.sid).then((res) => {
if (res.success) {
this.getModelDetail(row.procDefId)
this.getFlowViewer(row.procInsId)
this.getFlowRecordList(row.procInsId, row.procDefId)
this.editDialog = true
}
})
},
colsePage() {
this.getList()
},
/** xml 文件 */
getModelDetail(procDefId) {
var token = getStorage()
// 发送请求，获取xml
readXml(procDefId, token).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
var token = getStorage()
getFlowViewer(procInsId, token).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, procDefId) {
var token = getStorage()
const params = { procInsId: procInsId, deployId: procDefId, token: token }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>
<style>
.listtop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 0px 10px 15px;
margin: 0;
}
.listtop .tit {
font-weight: bold;
}
.listtop .pagination {
margin: 0;
padding: 0;
}
.pages {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 0px 0px 15px 15px;
}
.pages .tit {
font-weight: bold;
}
.pages .pagination {
margin: 0;
}
.dialogStyle /deep/ .el-dialog__body {
padding-top: 0px !important;
}
</style>
<template>
<div class="app-container">
<div class="tab-header webtop">
<div style="text-align: right">
<a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
</div>
</div>
<div class="searchcon">
<div class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="工作名称">
<el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
</el-form-item>
<el-form-item label="发起人">
<el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
<el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发送日期">
<el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
<span style="padding: 0 8px">至</span>
<el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-button type="primary" @click="handleFilter">查询</el-button>
</el-form>
</div>
</div>
<div class="listtop">
<div class="tit">待阅列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
<el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
<el-table-column width="180px" label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column label="工作名称" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgTitle }}</span>
</template>
</el-table-column>
<el-table-column label="发送人" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderName }}</span>
</template>
</el-table-column>
<el-table-column label="发送日期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sendTime }}</span>
</template>
</el-table-column>
<el-table-column label="发送部门" align="center">
<template slot-scope="scope">
<span>{{ scope.row.senderDeptName }}</span>
</template>
</el-table-column>
<el-table-column label="发送来源" align="center">
<template slot-scope="scope">
<span>{{ scope.row.msgSource }}</span>
</template>
</el-table-column>
<el-table-column label="审批记录" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!-- Start查看页面 -->
<el-dialog :visible.sync="centerDialogVisible" width="78%" height="1%" center @close="colsePage">
<iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
</el-dialog>
<!-- End查看页面-->
<!-- 编辑信息 -->
<el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle" @close="colsePage">
<!--流程流转记录-->
<div style="text-align: right">
<el-button type="primary" size="small" @click="handleComment">评论</el-button>
</div>
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
</el-dialog>
<!-- 审批人员填写评论 -->
<el-dialog title="评论" :visible.sync="commentVisible" width="50%">
<el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
</el-input>
<upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
<el-button size="small" @click="commentVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import { getStorage } from '@/utils/auth'
import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
import { pagerList, changeRead } from '@/api/flow/read'
import { flowRecord } from '@/api/workflow/finished'
import upload from '@/components/uploadFile/upload'
export default {
name: '',
components: {
pageye,
Pagination,
flowRecords,
upload
},
data() {
return {
taskList: [],
user_list: [],
xmlData: '',
dialogHeight: '80%',
centerDialogVisible: false, // 弹框
editDialog: false,
flowRecordList: [],
listLoading: false,
list: [],
tableKey: 0,
url: '',
commentVisible: false, // 评论内容弹框
comment_ImgList: [],
comment: {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
},
line_row: {},
loginInfo: {
userSid: ''
},
selectUrl_list: {
proc_def_id: '', // 流程定义id
taskDefKey: '', // 节点id
type: '' // 类型
},
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
names: '',
createStartTime: '',
createEndTime: '',
userSid: '',
state: '0', // 0是待阅,1是已阅
orgPath: '',
startUserSid: ''
}
}
}
},
mounted() {
// 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
},
created() {
// 加载列表
this.init()
},
methods: {
async handleMessage(event) {
var code = ''
if (event.data.params !== null && event.data.params !== undefined) {
code = event.data.params.code
}
if (code === 1) {
this.init()
this.centerDialogVisible = false
} else if (code === 2) {
this.dialogHeight = event.data.params.data
this.setIframeHeight(document.getElementById('iframe_done'))
}
},
setIframeHeight(iframe) {
iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
},
init() {
sysstaffinfo().then((resp) => {
if (resp.success) {
this.user_list = resp.data
}
})
this.getList()
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
getList() {
this.listLoading = true
this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
pagerList(this.listQuery).then((rep) => {
this.listLoading = false
if (rep.success) {
this.list = rep.data.records
this.listQuery.total = rep.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
handleFilter() {
this.listQuery.pageNumber = 1
this.getList()
},
/** 打开详情 */
handleCheck(row) {
changeRead(row.sid).then((res) => {
if (res.success) {
this.selectUrl_list.proc_def_id = row.procDefId
this.selectUrl_list.taskDefKey = row.taskDefKey
this.selectUrl_list.type = 2 // 详情
const parameter_list = {
businessSid: row.businessSid,
instanceId: row.procInsId,
taskId: row.taskId,
taskDefKey: row.taskDefKey,
taskName: row.taskName,
deployId: row.procDefId
}
selectUrl(this.selectUrl_list).then((response) => {
if (response.success && response.data.url !== '') {
// this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
// this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
} else if (response.success && response.data.url === '') {
this.$notify({
title: '提示',
message: '请联系系统管理员',
type: 'error',
duration: 2000
})
} else {
this.$notify({
title: '提示',
message: '执行失败',
type: 'error',
duration: 2000
})
}
})
this.getFlowRecordList(row.procInsId, row.procDefId)
this.centerDialogVisible = true
// this.$router.push({path: '/todo' + '?token=' + getStorage()})
}
})
},
handleComment() {
this.commentVisible = true
this.comment = {
reviewer: '',
reviewerSid: '',
time: '',
content: '',
processId: '',
processInstSid: '',
fileList: []
}
this.comment_ImgList = []
},
handleCommentConfirm() {
if (this.comment.content === '') {
this.$message({ showClose: true, type: 'error', message: '请填写评论' })
return
}
if (this.comment_ImgList.length > 0) {
for (var i = 0; i < this.comment_ImgList.length; i++) {
this.comment.fileList.push(this.comment_ImgList[i].url)
}
}
this.comment.reviewer = window.sessionStorage.getItem('name')
this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
this.comment.processId = this.line_row.procInsId
commentSave(this.comment).then((resp) => {
if (resp.success) {
this.commentVisible = false
this.handleFlowRecord(this.line_row)
}
})
},
closeIt() {
this.url = ''
this.centerDialogVisible = false
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.line_row = row
changeRead(row.sid).then((res) => {
if (res.success) {
this.getModelDetail(row.procDefId)
this.getFlowViewer(row.procInsId)
this.getFlowRecordList(row.procInsId, row.procDefId)
this.editDialog = true
}
})
},
colsePage() {
this.getList()
},
/** xml 文件 */
getModelDetail(procDefId) {
var token = getStorage()
// 发送请求，获取xml
readXml(procDefId, token).then(res => {
this.xmlData = res.data
})
},
// 已办环节的节点
getFlowViewer(procInsId) {
var token = getStorage()
getFlowViewer(procInsId, token).then(res => {
this.taskList = res.data
})
},
/** 流程流转记录 */
getFlowRecordList(procInsId, procDefId) {
var token = getStorage()
const params = { procInsId: procInsId, deployId: procDefId, token: token }
flowRecord(params).then(res => {
this.flowRecordList = res.data
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData
this.formConfOpen = true
}
}).catch(res => {
this.getList()
})
}
}
}
</script>
<style>
.listtop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 0px 10px 15px;
margin: 0;
}
.listtop .tit {
font-weight: bold;
}
.listtop .pagination {
margin: 0;
padding: 0;
}
.pages {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 0px 0px 15px 15px;
}
.pages .tit {
font-weight: bold;
}
.pages .pagination {
margin: 0;
}
.dialogStyle /deep/ .el-dialog__body {
padding-top: 0px !important;
}
</style>

1226
demo-web-ui/src/views/flow/todoList.vue
View File

File diff suppressed because it is too large Load Diff

708
demo-web-ui/src/views/functional/functional.vue
View File

@@ -1,354 +1,354 @@
<template>
<div>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="功能列表" name="roleList">
<div class="container">
<!-- <div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="功能名称">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-button @click="getList">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>-->
<!-- table -->
<el-table :data="roleTable" border style="width: 100%;"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
row-key="sid"
ref="multipleTable"
header-cell-class-name="table-header"
>
<el-table-column prop="name" label="功能名称" width="200px" align="left"></el-table-column>
<el-table-column label="操作" width="280px" align="center">
<template slot-scope="scope">
<el-button @click="addChildren(scope.row)" type="primary" size="mini"> 添加子功能</el-button>
<el-button @click="editRow(scope.row)" v-if="scope.row.isSource == '0'" type="primary" size="mini"> 修改
</el-button>
<el-button @click="delRow(scope.row)" v-if="scope.row.isSource == '0'" type="danger" size="mini"> 删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="actionUrl" label="url地址" width="200" align="center"></el-table-column>
<el-table-column prop="isEnable" label="是否可用" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-value='1'
inactive-value='0'
active-color="#13ce66"
inactive-color="#ff4949"
@change="enabledChange($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<!--<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />-->
<!-- 编辑功能信息 -->
<el-dialog :title="dialogTitle + '功能信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>上级功能</td>
<td>
<el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>终端权限</td>
<td>
<el-radio-group v-model="roleForm.phoneFunction">
<el-radio label="0">pc端</el-radio>
<el-radio label="1">移动端</el-radio>
</el-radio-group>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '0'">
<td>pc端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '1'">
<td>移动端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
</td>
</tr>
<tr>
<td>模块名称</td>
<td>
<el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
<el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>url地址</td>
<td>
<el-select v-model="roleForm.actionUrl" filterable style="width:300px">
<el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>功能名称</td>
<td>
<el-input v-model="roleForm.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增功能" name="addrole">
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>上级功能</td>
<td>
<el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>终端权限</td>
<td>
<el-radio-group v-model="roleForm.phoneFunction">
<el-radio label="0">pc端</el-radio>
<el-radio label="1">移动端</el-radio>
</el-radio-group>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '0'">
<td>pc端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '1'">
<td>移动端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
</td>
</tr>
<tr>
<td>模块名称</td>
<td>
<el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
<el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>url地址</td>
<td>
<el-select v-model="roleForm.actionUrl" filterable style="width:300px">
<el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>功能名称</td>
<td>
<el-input v-model="roleForm.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { pageList, savePost, sourceList, delOrgroles, getSingleData, putOrgroles, IsEnable, getMenusForFunction } from '@/api/system/functional/functional.js'
export default {
data() {
return {
dialogTitle: '',
activeName: 'roleList',
roleForm: {
sid: '',
parentName: '顶级菜单',
parentSid: '0',
name: '',
actionUrl: '',
sourceSid: '',
phoneFunction: '',
remarks: '',
cId: '',
funId: ''
},
// 模块名称
sourceNameData: [],
actionUrl_list: [],
formBackup: {},
search: {
name: ''
},
roleTable: [],
editDialog: false,
// 树形
loading: false
}
},
mounted() {
this.formBackup = Object.assign({}, this.roleForm)
this.getList()
this.getsourceList()
},
methods: {
// 分页列表
getList() {
pageList({ name: this.search.name }).then((res) => {
if (res.success) {
this.roleTable = res.data
}
console.log(res.data)
})
},
// 模块名称
getsourceList() {
sourceList({}).then((res) => {
if (res.success) {
this.sourceNameData = res.data
this.loading = false
}
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getList()
}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.roleForm = Object.assign({}, row)
console.log(this.roleForm)
getSingleData({ id: row.sid }).then((res) => {
if (res.success) {
this.roleForm = res.data
}
})
getMenusForFunction({ sourceSid: this.roleForm.sourceSid }).then((resp) => {
if (resp.success) {
this.actionUrl_list = resp.data
}
})
},
addChildren(row) {
this.refersh()
this.activeName = 'addrole'
this.roleForm.parentName = row.name
this.roleForm.parentSid = row.sid
if (row.isSource == '1') {
this.roleForm.parentName = '顶级菜单'
this.roleForm.parentSid = 0
} else {
this.roleForm.parentName = row.name
this.roleForm.parentSid = row.sid
}
},
delRow(row) {
this.$confirm('确定要删除该功能吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgroles({ sid: row.sid }).then((res) => {
if (res.success) {
this.getList()
this.$message({ showClose: true, type: 'success', message: '删除成功!' })
}
})
})
},
changeSource(value) {
const choose = this.sourceNameData.filter((item) => item.sid === value)
getMenusForFunction({ sourceSid: choose[0].sid }).then((res) => {
if (res.success) {
this.actionUrl_list = res.data
}
})
},
// 保存角色
save() {
if (this.roleForm.sid) {
putOrgroles(this.roleForm).then((res) => {
if (res.success) {
this.getList()
this.editDialog = false
this.$message({ showClose: true, message: res.msg, type: 'success' })
}
})
} else {
savePost(this.roleForm).then((res) => {
if (res.success) {
this.getList()
this.activeName = 'roleList'
this.$message({ showClose: true, message: res.msg, type: 'success' })
}
})
}
},
refersh() {
this.roleForm = {
parentName: '顶级菜单',
parentSid: '0',
name: '',
actionUrl: '',
sourceSid: '',
phoneFunction: '',
remarks: '',
cId: '',
funId: ''
}
},
// 是否可用 按钮
enabledChange(value, row) {
IsEnable({ sid: row.sid, isEnable: row.isEnable }).then(res => {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
}
}
}
</script>
<style scoped>
.el-select > .el-input {
display: block;
width: 300px;
}
.my-tabs {
margin-top: 10px;
}
</style>
<template>
<div>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="功能列表" name="roleList">
<div class="container">
<!-- <div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="功能名称">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-button @click="getList">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>-->
<!-- table -->
<el-table :data="roleTable" border style="width: 100%;"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
row-key="sid"
ref="multipleTable"
header-cell-class-name="table-header"
>
<el-table-column prop="name" label="功能名称" width="200px" align="left"></el-table-column>
<el-table-column label="操作" width="280px" align="center">
<template slot-scope="scope">
<el-button @click="addChildren(scope.row)" type="primary" size="mini"> 添加子功能</el-button>
<el-button @click="editRow(scope.row)" v-if="scope.row.isSource == '0'" type="primary" size="mini"> 修改
</el-button>
<el-button @click="delRow(scope.row)" v-if="scope.row.isSource == '0'" type="danger" size="mini"> 删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="actionUrl" label="url地址" width="200" align="center"></el-table-column>
<el-table-column prop="isEnable" label="是否可用" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-value='1'
inactive-value='0'
active-color="#13ce66"
inactive-color="#ff4949"
@change="enabledChange($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<!--<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />-->
<!-- 编辑功能信息 -->
<el-dialog :title="dialogTitle + '功能信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>上级功能</td>
<td>
<el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>终端权限</td>
<td>
<el-radio-group v-model="roleForm.phoneFunction">
<el-radio label="0">pc端</el-radio>
<el-radio label="1">移动端</el-radio>
</el-radio-group>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '0'">
<td>pc端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '1'">
<td>移动端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
</td>
</tr>
<tr>
<td>模块名称</td>
<td>
<el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
<el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>url地址</td>
<td>
<el-select v-model="roleForm.actionUrl" filterable style="width:300px">
<el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>功能名称</td>
<td>
<el-input v-model="roleForm.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增功能" name="addrole">
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>上级功能</td>
<td>
<el-input v-model="roleForm.parentName" :disabled="true" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>终端权限</td>
<td>
<el-radio-group v-model="roleForm.phoneFunction">
<el-radio label="0">pc端</el-radio>
<el-radio label="1">移动端</el-radio>
</el-radio-group>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '0'">
<td>pc端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.cId"></el-input>
</td>
</tr>
<tr v-show="roleForm.phoneFunction == '1'">
<td>移动端功能ID</td>
<td>
<el-input clearable style="width:300px" v-model="roleForm.funId"></el-input>
</td>
</tr>
<tr>
<td>模块名称</td>
<td>
<el-select v-model="roleForm.sourceSid" style="width:300px" @change="changeSource">
<el-option v-for="item in sourceNameData" :key="item.sid" :label="item.sourceName" :value="item.sid"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>url地址</td>
<td>
<el-select v-model="roleForm.actionUrl" filterable style="width:300px">
<el-option v-for="item in actionUrl_list" :key="item.sid" :label="item.name" :value="item.url"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>功能名称</td>
<td>
<el-input v-model="roleForm.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>说明</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { pageList, savePost, sourceList, delOrgroles, getSingleData, putOrgroles, IsEnable, getMenusForFunction } from '@/api/system/functional/functional.js'
export default {
data() {
return {
dialogTitle: '',
activeName: 'roleList',
roleForm: {
sid: '',
parentName: '顶级菜单',
parentSid: '0',
name: '',
actionUrl: '',
sourceSid: '',
phoneFunction: '',
remarks: '',
cId: '',
funId: ''
},
// 模块名称
sourceNameData: [],
actionUrl_list: [],
formBackup: {},
search: {
name: ''
},
roleTable: [],
editDialog: false,
// 树形
loading: false
}
},
mounted() {
this.formBackup = Object.assign({}, this.roleForm)
this.getList()
this.getsourceList()
},
methods: {
// 分页列表
getList() {
pageList({ name: this.search.name }).then((res) => {
if (res.success) {
this.roleTable = res.data
}
console.log(res.data)
})
},
// 模块名称
getsourceList() {
sourceList({}).then((res) => {
if (res.success) {
this.sourceNameData = res.data
this.loading = false
}
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getList()
}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.roleForm = Object.assign({}, row)
console.log(this.roleForm)
getSingleData({ id: row.sid }).then((res) => {
if (res.success) {
this.roleForm = res.data
}
})
getMenusForFunction({ sourceSid: this.roleForm.sourceSid }).then((resp) => {
if (resp.success) {
this.actionUrl_list = resp.data
}
})
},
addChildren(row) {
this.refersh()
this.activeName = 'addrole'
this.roleForm.parentName = row.name
this.roleForm.parentSid = row.sid
if (row.isSource == '1') {
this.roleForm.parentName = '顶级菜单'
this.roleForm.parentSid = 0
} else {
this.roleForm.parentName = row.name
this.roleForm.parentSid = row.sid
}
},
delRow(row) {
this.$confirm('确定要删除该功能吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgroles({ sid: row.sid }).then((res) => {
if (res.success) {
this.getList()
this.$message({ showClose: true, type: 'success', message: '删除成功!' })
}
})
})
},
changeSource(value) {
const choose = this.sourceNameData.filter((item) => item.sid === value)
getMenusForFunction({ sourceSid: choose[0].sid }).then((res) => {
if (res.success) {
this.actionUrl_list = res.data
}
})
},
// 保存角色
save() {
if (this.roleForm.sid) {
putOrgroles(this.roleForm).then((res) => {
if (res.success) {
this.getList()
this.editDialog = false
this.$message({ showClose: true, message: res.msg, type: 'success' })
}
})
} else {
savePost(this.roleForm).then((res) => {
if (res.success) {
this.getList()
this.activeName = 'roleList'
this.$message({ showClose: true, message: res.msg, type: 'success' })
}
})
}
},
refersh() {
this.roleForm = {
parentName: '顶级菜单',
parentSid: '0',
name: '',
actionUrl: '',
sourceSid: '',
phoneFunction: '',
remarks: '',
cId: '',
funId: ''
}
},
// 是否可用 按钮
enabledChange(value, row) {
IsEnable({ sid: row.sid, isEnable: row.isEnable }).then(res => {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
}
}
}
</script>
<style scoped>
.el-select > .el-input {
display: block;
width: 300px;
}
.my-tabs {
margin-top: 10px;
}
</style>

94
demo-web-ui/src/views/index.vue
View File

@@ -1,47 +1,47 @@
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
</div>
</template>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: ''
}
},
methods: {
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
canvas {
}
</style>
<template>
<div class="imgDemo">
<!--<el-button type="primary" @click="getToken()">token</el-button>
<div style="width: 200px;">{{token}}</div>-->
</div>
</template>
<script>
import {login1} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: ''
}
},
methods: {
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
canvas {
}
</style>

424
demo-web-ui/src/views/logManage/logManage.vue
View File

@@ -1,212 +1,212 @@
<template>
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="日志类别">
<el-input v-model="page.params.eventName" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="getPageList(page)">查询</el-button>
<el-button type="primary" @click="exportExcel" >导出日志</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" type="index" align="center" width="70px">
</el-table-column>
<el-table-column prop="eventName" label="日志类别" align="center">
</el-table-column>
<el-table-column prop="eventContent" label="日志内容" align="center">
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
<el-table-column prop="userIp" label="IP地址" align="center">
</el-table-column>
<el-table-column prop="timestamp" label="记录时间" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
</template>
<script>
import { logPageList } from '@/api/system/log/index.js'
import axios from 'axios'
import { getStorage } from '@/utils/auth'
export default {
data() {
return {
radio: '1',
dialogVisible: false,
disabled: false,
form: {},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
eventName: ''
}
},
tableData: []
}
},
mounted() {
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.page = this.pageBackup
},
getPageList(data){ // 获取列表
logPageList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
exportExcel(){ // 导出文件
axios({
method: 'get',
url: 'api/system/v1/systemlogs/exportLogExcel',
params: this.page,
responseType: 'blob',
headers:{'token': getStorage()}
}).then(response => {
let blob = new Blob([response.data], {type:"application/vnd.ms-excel"});
if (!!window.ActiveXObject || "ActiveXObject" in window) {
window.navigator.msSaveOrOpenBlob(blob, '日志');
} else {
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "日志";
link.click();
}
}).catch((error) => {
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>
<template>
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="日志类别">
<el-input v-model="page.params.eventName" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="getPageList(page)">查询</el-button>
<el-button type="primary" @click="exportExcel" >导出日志</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" type="index" align="center" width="70px">
</el-table-column>
<el-table-column prop="eventName" label="日志类别" align="center">
</el-table-column>
<el-table-column prop="eventContent" label="日志内容" align="center">
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
<el-table-column prop="userIp" label="IP地址" align="center">
</el-table-column>
<el-table-column prop="timestamp" label="记录时间" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
</template>
<script>
import { logPageList } from '@/api/system/log/index.js'
import axios from 'axios'
import { getStorage } from '@/utils/auth'
export default {
data() {
return {
radio: '1',
dialogVisible: false,
disabled: false,
form: {},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
eventName: ''
}
},
tableData: []
}
},
mounted() {
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.page = this.pageBackup
},
getPageList(data){ // 获取列表
logPageList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
exportExcel(){ // 导出文件
axios({
method: 'get',
url: 'api/system/v1/systemlogs/exportLogExcel',
params: this.page,
responseType: 'blob',
headers:{'token': getStorage()}
}).then(response => {
let blob = new Blob([response.data], {type:"application/vnd.ms-excel"});
if (!!window.ActiveXObject || "ActiveXObject" in window) {
window.navigator.msSaveOrOpenBlob(blob, '日志');
} else {
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "日志";
link.click();
}
}).catch((error) => {
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>

591
demo-web-ui/src/views/login/login.vue
View File

@@ -1,281 +1,310 @@
<template>
<div class="login">
<div class="logoTitle">
<img src="../../assets/loginImg/logo.png"/><span>安瑞集团</span>
<p class="title">安瑞集团信息化平台</p>
</div>
<div class="main">
<div class="content">
<el-form ref="loginForm" :model="loginForm" class="login-form">
<h3 class="title1">用户登录</h3>
<el-form-item>
<el-input v-model="loginForm.userName" autocomplete="off" placeholder="请输入账号" prefix-icon="el-icon-user">
</el-input>
</el-form-item>
<el-form-item>
<el-input v-model="loginForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password>
</el-input>
<span class="nopsw register" @click="handleforgetPwd">忘记密码 ？</span>
</el-form-item>
<el-form-item v-show="showMsg" style="margin-bottom:0;">
<span class="text-danger">提示：用户名或密码错误，请重试！</span>
</el-form-item>
<el-form-item>
<el-popover
placement="top"
width="400"
trigger="click"
v-model="loginCode"
@show="codeShow">
<imgCodeRole @login="login" ref="imgCodeRole"></imgCodeRole>
<el-button slot="reference" type="primary" class="login-btn" v-loading="loading">登 录</el-button>
</el-popover>
<!--<router-link :to="{name: 'registUser'}" target="_blank" tag="a" class="register fl">个人注册</router-link>
<router-link :to="{name: 'registOrg'}" target="_blank" tag="a" class="register fr">单位注册</router-link>-->
</el-form-item>
</el-form>
</div>
</div>
<el-dialog title="忘记密码" :visible.sync="forgetPwd" :close-on-click-modal="false">
<el-form :model="nopassword">
<el-form-item label="手机号">
<el-input v-model="nopassword.userPhone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="nopassword.userName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="forgetPwd = false">取 消</el-button>
<el-button type="primary" @click="reGetPwd()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
login,
imgCode
} from '@/api/user.js'
import user from '@/api/User/login.js'
import {setToken, getToken, setSession} from '@/utils/auth'
import imgCodeRole from '@/components/imgCodeRole/index.vue'
export default {
components: {imgCodeRole},
data() {
return {
loginForm: {
userName: '',
password: '',
verifyCode: '',
uuid: ''
},
imgCode: '',
loading: false,
loginCode: false,
showMsg: false,
forgetPwd: false,
nopassword: {
userPhone: '',
userName: ''
}
}
},
mounted() {
// window.loginIt = this.loginIt;
},
methods: {
// loginIt(data) {
// alert(data);
// },
login(data) {
this.loading = true
this.loginForm.verifyCode = data.verifyCode
this.loginForm.uuid = data.uuid
this.$store.dispatch('user/login', this.loginForm).then((res) => {
// this.$store.dispatch('user/getInfo')
this.$router.push({path: '/home'})
this.loading = false
}).catch(() => {
this.loading = false
this.$refs.imgCodeRole.getCodeImage()
})
},
codeShow() {
if (this.loginForm.password == '' || this.loginForm.userName == '') {
this.loginCode = false
this.showMsg = true
return;
}
this.$refs.imgCodeRole.getCodeImage()
},
handleforgetPwd() {
this.forgetPwd = true
this.nopassword = {
userPhone: '',
userName: ''
}
},
reGetPwd() {
if (this.nopassword.userPhone === '') {
this.$message({ showClose: true, type: 'error', message: '手机号不能为空' })
return
}
if (this.nopassword.userName === '') {
this.$message({ showClose: true, type: 'error', message: '姓名不能为空' })
return
}
user.reGetPwd(this.nopassword).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '新密码已发送至手机，请查看短信' })
this.forgetPwd = false
} else {
this.$message({ showClose: true, type: 'error', message: res.msg })
}
})
}
}
}
</script>
<style lang="scss">
.login {
position: relative;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url(../../assets/loginImg/bgImg.png);
background-position: center;
overflow: hidden;
.logoTitle {
margin: 30px;
img {
width: 70px;
}
span {
font-size: 40px;
color: #191919;
}
.title {
font-size: 25px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #191919;
margin: 0;
}
}
.main {
width: 30%;
/*height: 640px;*/
background: #FFFFFF;
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
opacity: 0.9;
border-radius: 20px;
position: absolute;
right: 10%;
.content {
position: relative;
/*.title-h3{
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 30px;
margin: 0;
position: absolute;
top: -65px;
}*/
}
}
}
.login-form {
padding: 30px 50px;
.title1 {
margin: 0px auto 30px auto;
text-align: center;
font-size: 20px;
color: #191919;
font-size: 23px;
font-weight: 500;
}
.el-input {
border: none;
background-color: transparent;
}
.code {
position: absolute;
top: 3px;
right: 5px;
width: 35%;
height: 35px;
cursor: pointer;
z-index: 9;
}
.nopsw {
position: absolute;
bottom: -30px;
right: 5px;
color: #018ad2;
font-size: 15px;
line-height: 30px;
}
.register {
color: #018ad2;
}
.register:hover,
.nopsw:hover {
cursor: pointer;
}
.btn-eye {
cursor: pointer;
}
.text-danger {
color: #F56C6C;
}
.login-btn {
margin: 10px 0 10px 0;
width: 100%;
background-color: #007fff;
border: 0;
}
.login-btn:hover {
background-color: #007fdd;
border: 0;
}
.el-input--prefix .el-input__inner {
border: 1px solid #018ad2;
background: transparent;
color: #333 !important;
}
.el-form-item {
margin-bottom: 40px;
}
.el-loading-mask {
background-color: rgba(255, 255, 255, .6);
}
}
</style>
<template>
<div class="login">
<div class="logoTitle">
<img src="../../assets/loginImg/logo.png" /><span>安瑞集团</span>
<p class="title">安瑞集团信息化平台</p>
</div>
<div class="main">
<div class="content">
<el-form ref="loginForm" :model="loginForm" class="login-form">
<h3 class="title1">用户登录</h3>
<el-form-item>
<el-input
v-model="loginForm.userName"
autocomplete="off"
placeholder="请输入账号"
prefix-icon="el-icon-user"
>
</el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="loginForm.password"
autocomplete="off"
placeholder="请输入密码"
prefix-icon="el-icon-lock"
show-password
>
</el-input>
</el-form-item>
<el-form-item v-show="showMsg" style="margin-bottom: 0">
<span class="text-danger">提示：用户名或密码错误，请重试！</span>
</el-form-item>
<el-form-item>
<el-popover placement="top" width="400" trigger="click">
<el-button
slot="reference"
v-loading="loading"
type="primary"
class="login-btn"
@click="login"
>登 录</el-button
>
</el-popover>
</el-form-item>
</el-form>
</div>
</div>
<el-link :underline="false" class="register" @click="regist">注册</el-link>
<!-- <el-dialog
title="忘记密码"
:visible.sync="forgetPwd"
:close-on-click-modal="false"
>
<el-form :model="nopassword">
<el-form-item label="手机号">
<el-input
v-model="nopassword.userPhone"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="nopassword.userName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="forgetPwd = false">取 消</el-button>
<el-button type="primary" @click="reGetPwd()">确 定</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import { login, imgCode } from "@/api/user.js";
import user from "@/api/User/login.js";
import { setToken, getToken, setSession } from "@/utils/auth";
// import imgCodeRole from "@/components/imgCodeRole/index.vue";
export default {
components: {},
data() {
return {
loginForm: {
userName: "",
password: "",
verifyCode: "",
uuid: "",
},
imgCode: "",
loading: false,
loginCode: false,
showMsg: false,
forgetPwd: false,
nopassword: {
userPhone: "",
userName: "",
},
};
},
mounted() {},
methods: {
login(data) {
this.loading = true;
this.loginForm.verifyCode = data.verifyCode;
this.loginForm.uuid = data.uuid;
this.$store
.dispatch("user/login", this.loginForm)
.then((res) => {
// this.$store.dispatch('user/getInfo')
this.$router.push({ path: "/index" });
this.loading = false;
})
.catch(() => {
this.loading = false;
// this.$refs.imgCodeRole.getCodeImage();
});
},
codeShow() {
if (this.loginForm.password == "" || this.loginForm.userName == "") {
this.loginCode = false;
this.showMsg = true;
return;
}
this.$refs.imgCodeRole.getCodeImage();
},
handleforgetPwd() {
this.forgetPwd = true;
this.nopassword = {
userPhone: "",
userName: "",
};
},
reGetPwd() {
if (this.nopassword.userPhone === "") {
this.$message({
showClose: true,
type: "error",
message: "手机号不能为空",
});
return;
}
if (this.nopassword.userName === "") {
this.$message({
showClose: true,
type: "error",
message: "姓名不能为空",
});
return;
}
user.reGetPwd(this.nopassword).then((res) => {
if (res.success) {
this.$message({
showClose: true,
type: "success",
message: "新密码已发送至手机，请查看短信",
});
this.forgetPwd = false;
} else {
this.$message({ showClose: true, type: "error", message: res.msg });
}
});
},
regist(){
this.$router.push('/reg')
}
},
};
</script>
<style lang="scss">
.login {
position: relative;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url(../../assets/loginImg/bgImg.png);
background-position: center;
overflow: hidden;
.register{
position: absolute;
left: 1300px;
top:370px;
}
.logoTitle {
margin: 30px;
img {
width: 70px;
}
span {
font-size: 40px;
color: #191919;
}
.title {
font-size: 25px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #191919;
margin: 0;
}
}
.main {
width: 30%;
/*height: 640px;*/
background: #ffffff;
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
opacity: 0.9;
border-radius: 20px;
position: absolute;
right: 10%;
.content {
position: relative;
/*.title-h3{
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 30px;
margin: 0;
position: absolute;
top: -65px;
}*/
}
}
}
.login-form {
padding: 30px 50px;
.title1 {
margin: 0px auto 30px auto;
text-align: center;
font-size: 20px;
color: #191919;
font-size: 23px;
font-weight: 500;
}
.el-input {
border: none;
background-color: transparent;
}
.code {
position: absolute;
top: 3px;
right: 5px;
width: 35%;
height: 35px;
cursor: pointer;
z-index: 9;
}
.nopsw {
position: absolute;
bottom: -30px;
right: 5px;
color: #018ad2;
font-size: 15px;
line-height: 30px;
}
.register {
color: #018ad2;
}
.register:hover,
.nopsw:hover {
cursor: pointer;
}
.btn-eye {
cursor: pointer;
}
.text-danger {
color: #f56c6c;
}
.login-btn {
margin: 10px 0 10px 0;
width: 100%;
background-color: #007fff;
border: 0;
}
.login-btn:hover {
background-color: #007fdd;
border: 0;
}
.el-input--prefix .el-input__inner {
border: 1px solid #018ad2;
background: transparent;
color: #333 !important;
}
.el-form-item {
margin-bottom: 40px;
}
.el-loading-mask {
background-color: rgba(255, 255, 255, 0.6);
}
}
</style>

1074
demo-web-ui/src/views/menuManage/menuManage.vue
View File

File diff suppressed because it is too large Load Diff

360
demo-web-ui/src/views/mobileterminal/adhibition.vue
View File

@@ -1,180 +1,180 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>当前插件</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkName" class="addInput" clearable placeholder="" readonly></el-input></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用分类</span>
</el-col>
<el-col :span="19">
<el-form-item prop="titleGroup"><el-input v-model="formobj.titleGroup" class="addInput" clearable placeholder=""></el-input></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="title"><el-input v-model="formobj.title" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用icon</span>
</el-col>
<el-col :span="19">
<el-form-item prop="iconUrl">
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="path"><el-input v-model="formobj.path" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>json</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.json" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { saveOrUpdate, details } from '@/api/system/mobileterminal/mobileterminal'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'plugin',
components: {
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
list: [],
formobj: {
iconUrl: '',
linkSid: '',
path: '',
sid: '',
sortNo: '',
title: '',
titleGroup: '',
json: '',
linkName: ''
},
rules: {
titleGroup: [{ required: true, message: '应用分类不能为空', trigger: 'blur' }],
title: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
iconUrl: [{ required: true, message: '应用icon不能为空', trigger: 'blur' }],
path: [{ required: true, message: '应用路由不能为空', trigger: 'blur' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showAdd(row) {
this.init()
this.dialogStatus = 'add'
this.viewTitle = '新增应用'
this.formobj.linkName = row.appName
this.formobj.linkSid = row.appSid
},
showEdit(row) {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '更新应用'
this.dialogStatus = 'edit'
console.log(row.sid, 888)
details({ sid: row.sid }).then((resp) => {
if (resp.success) {
this.formobj = resp.data
this.list.push({
name: '',
url: this.formobj.iconUrl
})
}
}).catch(e => {
this.formobj = row
})
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
this.submitdisabled = true
saveOrUpdate(this.formobj).then(resp => {
this.submitdisabled = false
if (resp.success) {
this.$message({ showClose: true, type: 'success', message: resp.msg })
this.handleReturn('true')
}
}).catch(() => {
this.submitdisabled = false
})
} else {
return false
}
})
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
iconUrl: '',
linkSid: '',
path: '',
sid: '',
sortNo: '',
title: '',
titleGroup: '',
json: '',
linkName: ''
}
this.list = []
this.$refs['form_obj'].resetFields()
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>当前插件</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkName" class="addInput" clearable placeholder="" readonly></el-input></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用分类</span>
</el-col>
<el-col :span="19">
<el-form-item prop="titleGroup"><el-input v-model="formobj.titleGroup" class="addInput" clearable placeholder=""></el-input></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="title"><el-input v-model="formobj.title" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用icon</span>
</el-col>
<el-col :span="19">
<el-form-item prop="iconUrl">
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>应用路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="path"><el-input v-model="formobj.path" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>json</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.json" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder=""/></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { saveOrUpdate, details } from '@/api/system/mobileterminal/mobileterminal'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'plugin',
components: {
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
list: [],
formobj: {
iconUrl: '',
linkSid: '',
path: '',
sid: '',
sortNo: '',
title: '',
titleGroup: '',
json: '',
linkName: ''
},
rules: {
titleGroup: [{ required: true, message: '应用分类不能为空', trigger: 'blur' }],
title: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
iconUrl: [{ required: true, message: '应用icon不能为空', trigger: 'blur' }],
path: [{ required: true, message: '应用路由不能为空', trigger: 'blur' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showAdd(row) {
this.init()
this.dialogStatus = 'add'
this.viewTitle = '新增应用'
this.formobj.linkName = row.appName
this.formobj.linkSid = row.appSid
},
showEdit(row) {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '更新应用'
this.dialogStatus = 'edit'
console.log(row.sid, 888)
details({ sid: row.sid }).then((resp) => {
if (resp.success) {
this.formobj = resp.data
this.list.push({
name: '',
url: this.formobj.iconUrl
})
}
}).catch(e => {
this.formobj = row
})
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
this.submitdisabled = true
saveOrUpdate(this.formobj).then(resp => {
this.submitdisabled = false
if (resp.success) {
this.$message({ showClose: true, type: 'success', message: resp.msg })
this.handleReturn('true')
}
}).catch(() => {
this.submitdisabled = false
})
} else {
return false
}
})
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
iconUrl: '',
linkSid: '',
path: '',
sid: '',
sortNo: '',
title: '',
titleGroup: '',
json: '',
linkName: ''
}
this.list = []
this.$refs['form_obj'].resetFields()
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>

244
demo-web-ui/src/views/mobileterminal/frame.vue
View File

@@ -1,122 +1,122 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_frameApk ref="uploadMoreImg" @change="change" v-model="imgList" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>版本描述</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_frameApk from '@/components/uploadFile/upload_frameApk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'frame',
components: {
upload_frameApk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
formobj: {
iconUrl: '',
upgradeInfo: ''
},
rules: {},
submitdisabled: false
}
},
methods: {
showAdd() {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.dialogStatus = 'add'
this.viewTitle = '更新框架'
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
iconUrl: '',
upgradeInfo: ''
}
this.list = []
this.imgList = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_frameApk ref="uploadMoreImg" @change="change" v-model="imgList" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>版本描述</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_frameApk from '@/components/uploadFile/upload_frameApk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'frame',
components: {
upload_frameApk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
formobj: {
iconUrl: '',
upgradeInfo: ''
},
rules: {},
submitdisabled: false
}
},
methods: {
showAdd() {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.dialogStatus = 'add'
this.viewTitle = '更新框架'
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
iconUrl: '',
upgradeInfo: ''
}
this.list = []
this.imgList = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>

400
demo-web-ui/src/views/mobileterminal/mobileterminal.vue
View File

@@ -1,200 +1,200 @@
<template>
<div class="app-container">
<!-- Start 列表页面 -->
<div v-show="viewState == 1">
<button-bar view-title="安瑞移动门户" :version="version" :time="time" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="" style="margin-top: 10px">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" row-key="appName" :tree-props="{children: 'mobileMenuList'}">
<el-table-column prop="appName" label="插件名称" align="center"/>
<el-table-column label="版本号/应用分类" align="center">
<template slot-scope="scope">
<span>{{ scope.row.versionName }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center">
<template slot-scope="scope">
<span>{{ scope.row.modifyTime }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="handleAddAdhibition(scope.row)">新增应用</el-button>
<el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="hanglePlugin(scope.row)">更新插件</el-button>
<el-button type="primary" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleUpdateAdhibition(scope.row)">修改</el-button>
<el-button type="danger" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column label="应用路由" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sourceAction }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<plugin v-show="viewState == 2" ref="divPlugin" @doback="resetState" @reloadlist="getList"/>
<updatePlugin v-show="viewState == 3" ref="divUpdatePlugin" @doback="resetState" @reloadlist="getList"/>
<adhibition v-show="viewState == 4 || viewState == 5" ref="divAdhibition" @doback="resetState" @reloadlist="getList"/>
<frame v-show="viewState == 6" ref="divFrame" @doback="resetState" @reloadlist="getList"/>
</div>
</template>
<script>
import { pageList, deleteMenu } from '@/api/system/mobileterminal/mobileterminal'
import ButtonBar from '@/components/ButtonBar'
import plugin from './plugin'
import updatePlugin from './updatePlugin'
import adhibition from './adhibition'
import frame from './frame'
export default {
name: 'mobileterminal',
components: {
ButtonBar,
plugin,
updatePlugin,
adhibition,
frame
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增插件'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '更新框架'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1,
// 查询条件 -----------
tableKey: 0,
version: '',
time: '',
list: [],
sids: [],
FormLoading: false,
listLoading: false,
rules: {}
}
},
created() {
// 加载列表
this.getList()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'doDel':
this.doDel()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
// 查询列表信息
getList() {
this.listLoading = true
pageList().then((response) => {
console.log('列表查询结果：', response)
this.listLoading = false
if (response.success) {
this.list = response.data.list
this.version = response.data.appVersionVo.versionName
this.time = response.data.appVersionVo.modifyTime
} else {
this.list = []
}
})
},
toAdd() {
this.viewState = 2
this.$refs['divPlugin'].showAdd()
},
toEdit() {
this.viewState = 6
this.$refs['divFrame'].showAdd()
},
hanglePlugin(row) {
this.viewState = 3
this.$refs['divUpdatePlugin'].showEdit(row)
},
handleAddAdhibition(row) {
this.viewState = 4
this.$refs['divAdhibition'].showAdd(row)
},
handleUpdateAdhibition(row) {
this.viewState = 5
this.$refs['divAdhibition'].showEdit(row)
},
handleDelete(row) {
const tip = '请确认是否删除该应用?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenu({ sid: row.sid }).then((resp) => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
this.getList()
}
}).catch(e => {
})
}).catch(() => {
})
},
resetState() {
this.viewState = 1
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="app-container">
<!-- Start 列表页面 -->
<div v-show="viewState == 1">
<button-bar view-title="安瑞移动门户" :version="version" :time="time" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="" style="margin-top: 10px">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" row-key="appName" :tree-props="{children: 'mobileMenuList'}">
<el-table-column prop="appName" label="插件名称" align="center"/>
<el-table-column label="版本号/应用分类" align="center">
<template slot-scope="scope">
<span>{{ scope.row.versionName }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center">
<template slot-scope="scope">
<span>{{ scope.row.modifyTime }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="handleAddAdhibition(scope.row)">新增应用</el-button>
<el-button type="primary" size="small" v-show="scope.row.appSid !== null && scope.row.appSid !== undefined && scope.row.appSid !== ''" @click="hanglePlugin(scope.row)">更新插件</el-button>
<el-button type="primary" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleUpdateAdhibition(scope.row)">修改</el-button>
<el-button type="danger" size="small" v-show="scope.row.appSid == null || scope.row.appSid == undefined || scope.row.appSid == ''" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column label="应用路由" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sourceAction }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<plugin v-show="viewState == 2" ref="divPlugin" @doback="resetState" @reloadlist="getList"/>
<updatePlugin v-show="viewState == 3" ref="divUpdatePlugin" @doback="resetState" @reloadlist="getList"/>
<adhibition v-show="viewState == 4 || viewState == 5" ref="divAdhibition" @doback="resetState" @reloadlist="getList"/>
<frame v-show="viewState == 6" ref="divFrame" @doback="resetState" @reloadlist="getList"/>
</div>
</template>
<script>
import { pageList, deleteMenu } from '@/api/system/mobileterminal/mobileterminal'
import ButtonBar from '@/components/ButtonBar'
import plugin from './plugin'
import updatePlugin from './updatePlugin'
import adhibition from './adhibition'
import frame from './frame'
export default {
name: 'mobileterminal',
components: {
ButtonBar,
plugin,
updatePlugin,
adhibition,
frame
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增插件'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '更新框架'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1,
// 查询条件 -----------
tableKey: 0,
version: '',
time: '',
list: [],
sids: [],
FormLoading: false,
listLoading: false,
rules: {}
}
},
created() {
// 加载列表
this.getList()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'doDel':
this.doDel()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
// 查询列表信息
getList() {
this.listLoading = true
pageList().then((response) => {
console.log('列表查询结果：', response)
this.listLoading = false
if (response.success) {
this.list = response.data.list
this.version = response.data.appVersionVo.versionName
this.time = response.data.appVersionVo.modifyTime
} else {
this.list = []
}
})
},
toAdd() {
this.viewState = 2
this.$refs['divPlugin'].showAdd()
},
toEdit() {
this.viewState = 6
this.$refs['divFrame'].showAdd()
},
hanglePlugin(row) {
this.viewState = 3
this.$refs['divUpdatePlugin'].showEdit(row)
},
handleAddAdhibition(row) {
this.viewState = 4
this.$refs['divAdhibition'].showAdd(row)
},
handleUpdateAdhibition(row) {
this.viewState = 5
this.$refs['divAdhibition'].showEdit(row)
},
handleDelete(row) {
const tip = '请确认是否删除该应用?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenu({ sid: row.sid }).then((resp) => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
this.getList()
}
}).catch(e => {
})
}).catch(() => {
})
},
resetState() {
this.viewState = 1
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>

430
demo-web-ui/src/views/mobileterminal/plugin.vue
View File

@@ -1,215 +1,215 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="appName"><el-input v-model="formobj.appName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>关联主程序</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>启动名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="modulePluginName"><el-input v-model="formobj.modulePluginName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>主页路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourceAction"><el-input v-model="formobj.sourceAction" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件包名</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourcePackage"><el-input v-model="formobj.sourcePackage" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件类型</span>
</el-col>
<el-col :span="19">
<el-form-item prop="type">
<el-select v-model="formobj.type" placeholder="请选择" filterable clearable class="addInput">
<el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_apk ref="uploadMoreImg" v-model="imgList" @change="change" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>更新内容</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_apk from '@/components/uploadFile/upload_apk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'plugin',
components: {
upload_apk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
type_list: [
{
dictKey: 0,
dictValue: '内置Activity'
},
{
dictKey: 1,
dictValue: '内置WebView'
},
{
dictKey: 2,
dictValue: 'RePlugin插件'
}
],
formobj: {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
},
rules: {
appName: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
modulePluginName: [{ required: true, message: '启动名称不能为空', trigger: 'blur' }],
sourceAction: [{ required: true, message: '主页路由不能为空', trigger: 'blur' }],
sourcePackage: [{ required: true, message: '插件包名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '插件类型不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showAdd() {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.init()
this.dialogStatus = 'add'
this.viewTitle = '新增插件'
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
let bb = null
this.type_list.forEach((e) => {
if (e.dictValue === this.formobj.type) {
bb = {
key: e.dictKey
}
}
})
this.formobj.type = bb.key
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
}
this.imgList = []
this.list = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="appName"><el-input v-model="formobj.appName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>关联主程序</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>启动名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="modulePluginName"><el-input v-model="formobj.modulePluginName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>主页路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourceAction"><el-input v-model="formobj.sourceAction" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件包名</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourcePackage"><el-input v-model="formobj.sourcePackage" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件类型</span>
</el-col>
<el-col :span="19">
<el-form-item prop="type">
<el-select v-model="formobj.type" placeholder="请选择" filterable clearable class="addInput">
<el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_apk ref="uploadMoreImg" v-model="imgList" @change="change" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>更新内容</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_apk from '@/components/uploadFile/upload_apk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'plugin',
components: {
upload_apk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
type_list: [
{
dictKey: 0,
dictValue: '内置Activity'
},
{
dictKey: 1,
dictValue: '内置WebView'
},
{
dictKey: 2,
dictValue: 'RePlugin插件'
}
],
formobj: {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
},
rules: {
appName: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
modulePluginName: [{ required: true, message: '启动名称不能为空', trigger: 'blur' }],
sourceAction: [{ required: true, message: '主页路由不能为空', trigger: 'blur' }],
sourcePackage: [{ required: true, message: '插件包名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '插件类型不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showAdd() {
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.init()
this.dialogStatus = 'add'
this.viewTitle = '新增插件'
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
let bb = null
this.type_list.forEach((e) => {
if (e.dictValue === this.formobj.type) {
bb = {
key: e.dictKey
}
}
})
this.formobj.type = bb.key
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
}
this.imgList = []
this.list = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>

482
demo-web-ui/src/views/mobileterminal/updatePlugin.vue
View File

@@ -1,241 +1,241 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="appName"><el-input v-model="formobj.appName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>关联主程序</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件标识</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.appSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>启动名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="modulePluginName"><el-input v-model="formobj.modulePluginName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>主页路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourceAction"><el-input v-model="formobj.sourceAction" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件包名</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourcePackage"><el-input v-model="formobj.sourcePackage" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件类型</span>
</el-col>
<el-col :span="19">
<el-form-item prop="type">
<el-select v-model="formobj.type" placeholder="请选择" filterable clearable class="addInput">
<el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_updateApk ref="uploadMoreImg" @change="change" v-model="imgList" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>更新内容</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_updateApk from '@/components/uploadFile/upload_updateApk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'updateplugin',
components: {
upload_updateApk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
type_list: [
{
dictKey: 0,
dictValue: '内置Activity'
},
{
dictKey: 1,
dictValue: '内置WebView'
},
{
dictKey: 2,
dictValue: 'RePlugin插件'
}
],
formobj: {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
},
rules: {
appName: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
modulePluginName: [{ required: true, message: '启动名称不能为空', trigger: 'blur' }],
sourceAction: [{ required: true, message: '主页路由不能为空', trigger: 'blur' }],
sourcePackage: [{ required: true, message: '插件包名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '插件类型不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showEdit(row) {
console.log(row, 8585)
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '更新插件'
this.dialogStatus = 'edit'
this.formobj.appName = row.appName
this.formobj.iconUrl = row.iconUrl
this.formobj.linkSid = row.linkSid
this.formobj.appSid = row.appSid
this.formobj.modulePluginName = row.modulePluginName
this.formobj.sourceAction = row.sourceAction
this.formobj.sourcePackage = row.sourcePackage
this.list.push({
name: '',
url: this.formobj.iconUrl
})
let bb = null
this.type_list.forEach((e) => {
if (e.dictKey == row.type) {
bb = {
type: e.dictValue
}
}
})
this.formobj.type = bb.type
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
let bb = null
this.type_list.forEach((e) => {
if (e.dictValue === this.formobj.type) {
bb = {
key: e.dictKey
}
}
})
this.formobj.type = bb.key
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
}
this.list = []
this.imgList = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="appName"><el-input v-model="formobj.appName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件icon</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>关联主程序</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.linkSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件标识</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.appSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>启动名称</span>
</el-col>
<el-col :span="19">
<el-form-item prop="modulePluginName"><el-input v-model="formobj.modulePluginName" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>主页路由</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourceAction"><el-input v-model="formobj.sourceAction" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件包名</span>
</el-col>
<el-col :span="19">
<el-form-item prop="sourcePackage"><el-input v-model="formobj.sourcePackage" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>插件类型</span>
</el-col>
<el-col :span="19">
<el-form-item prop="type">
<el-select v-model="formobj.type" placeholder="请选择" filterable clearable class="addInput">
<el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span><span class="icon">*</span>apk上传</span>
</el-col>
<el-col :span="19">
<el-form-item>
<upload_updateApk ref="uploadMoreImg" @change="change" v-model="imgList" bucket="map" :fileInfo ="formobj"/>
</el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>更新内容</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="5" class="tleftb">
<span>排序号</span>
</el-col>
<el-col :span="19">
<el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import upload_updateApk from '@/components/uploadFile/upload_updateApk'
import upload_icon from '@/components/uploadFile/upload_icon'
export default {
name: 'updateplugin',
components: {
upload_updateApk,
upload_icon
},
data() {
return {
tableKey: 0,
index: 0,
viewTitle: '',
dialogStatus: '',
sid: '',
isShow: true,
list: [],
imgList: [],
type_list: [
{
dictKey: 0,
dictValue: '内置Activity'
},
{
dictKey: 1,
dictValue: '内置WebView'
},
{
dictKey: 2,
dictValue: 'RePlugin插件'
}
],
formobj: {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
},
rules: {
appName: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
modulePluginName: [{ required: true, message: '启动名称不能为空', trigger: 'blur' }],
sourceAction: [{ required: true, message: '主页路由不能为空', trigger: 'blur' }],
sourcePackage: [{ required: true, message: '插件包名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '插件类型不能为空', trigger: 'change' }]
},
submitdisabled: false
}
},
methods: {
init() {},
showEdit(row) {
console.log(row, 8585)
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.viewTitle = '更新插件'
this.dialogStatus = 'edit'
this.formobj.appName = row.appName
this.formobj.iconUrl = row.iconUrl
this.formobj.linkSid = row.linkSid
this.formobj.appSid = row.appSid
this.formobj.modulePluginName = row.modulePluginName
this.formobj.sourceAction = row.sourceAction
this.formobj.sourcePackage = row.sourcePackage
this.list.push({
name: '',
url: this.formobj.iconUrl
})
let bb = null
this.type_list.forEach((e) => {
if (e.dictKey == row.type) {
bb = {
type: e.dictValue
}
}
})
this.formobj.type = bb.type
},
handleSave() {
this.$refs['form_obj'].validate(valid => {
if (valid) {
let bb = null
this.type_list.forEach((e) => {
if (e.dictValue === this.formobj.type) {
bb = {
key: e.dictKey
}
}
})
this.formobj.type = bb.key
this.$refs.uploadMoreImg.submitUpload()
} else {
return false
}
})
},
change(value) {
console.log(value, 65656)
if (value.response.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.$message({ showClose: true, type: 'error', message: value.response.msg })
}
},
backIcon(val) {
if (val.length > 0) {
this.formobj.iconUrl = val[0].url
}
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.dialogStatus = ''
this.formobj = {
appName: '',
appSid: '',
iconUrl: '',
linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
sourceAction: '',
sourcePackage: '',
type: '',
upgradeInfo: '',
modulePluginName: '',
sortNo: ''
}
this.list = []
this.imgList = []
this.$emit('doback')
}
}
}
</script>
<style scoped>
.addInput {
width: 30%;
}
</style>

1320
demo-web-ui/src/views/organizationManage/organizationManage.vue
View File

File diff suppressed because it is too large Load Diff

234
demo-web-ui/src/views/personalization/personalization.vue
View File

@@ -1,117 +1,117 @@
<template>
<div class="content">
<div class="right_cont">
<table class="tishi" cellspacing="0" style="margin:0 auto 30px">
<tr>
<td style="border-right: none;">设置默认组织机构</td>
<td>
<el-select v-model="formobj.orgNamePath" filterable placeholder="请选择" @change="changeoOrgNamePath" clearable>
<el-option v-for="item in orgNamePath_list" :key="item.orgSidPath" :label="item.orgNamePath" :value="item.orgNamePath"/>
</el-select>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer" style="margin-left:40%;">
<el-button style=" margin-left: 8%; width: 100px;height: 40px;" type="primary" @click="handleConfirm()">确认</el-button>
</span>
</div>
</div>
</template>
<script>
import { getList, saveOrUpdate } from '@/api/system/personalization/personalization'
export default {
name: 'personalization',
data() {
return {
orgNamePath_list: [],
formobj: {
orgSidPath: '',
orgNamePath: '',
userSid: ''
}
}
},
created() {
this.init()
},
methods: {
init() {
getList({ userSid: window.sessionStorage.getItem('userSid') }).then((res) => {
if (res.success) {
this.formobj.orgNamePath = res.data.orgNamePath
this.formobj.orgSidPath = res.data.orgSidPath
this.orgNamePath_list = res.data.list
}
})
},
changeoOrgNamePath(value) {
const choose = this.orgNamePath_list.filter((item) => item.orgNamePath === value)
this.formobj.orgSidPath = choose[0].orgSidPath
},
handleConfirm() {
if (this.formobj.orgNamePath === '') {
this.$message({ showClose: true, type: 'error', message: '默认组织机构不能为空' })
return
}
this.formobj.userSid = window.sessionStorage.getItem('userSid')
saveOrUpdate(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '操作成功' })
}
})
}
}
}
</script>
<style scoped="scoped" lang="scss">
.content {
width: 100%;
padding-top: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.right_cont {
width: 100%;
height: 645px;
background-color: #fff;
margin: 0;
padding: 15px;
box-sizing: border-box;
}
.tishi {
width: 560px;
color: #000;
padding-left: 1.5%;
margin-bottom: 50px;
tr {
height: 70px;
}
td {
border: 1px solid #e6e9f0;
text-align: center;
}
td:first-child {
background-color: #f7f9fc;
}
.el-input,
input {
width: 80%;
}
span {
font-size: 26px;
color: red;
margin-left: 10px;
}
}
</style>
<template>
<div class="content">
<div class="right_cont">
<table class="tishi" cellspacing="0" style="margin:0 auto 30px">
<tr>
<td style="border-right: none;">设置默认组织机构</td>
<td>
<el-select v-model="formobj.orgNamePath" filterable placeholder="请选择" @change="changeoOrgNamePath" clearable>
<el-option v-for="item in orgNamePath_list" :key="item.orgSidPath" :label="item.orgNamePath" :value="item.orgNamePath"/>
</el-select>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer" style="margin-left:40%;">
<el-button style=" margin-left: 8%; width: 100px;height: 40px;" type="primary" @click="handleConfirm()">确认</el-button>
</span>
</div>
</div>
</template>
<script>
import { getList, saveOrUpdate } from '@/api/system/personalization/personalization'
export default {
name: 'personalization',
data() {
return {
orgNamePath_list: [],
formobj: {
orgSidPath: '',
orgNamePath: '',
userSid: ''
}
}
},
created() {
this.init()
},
methods: {
init() {
getList({ userSid: window.sessionStorage.getItem('userSid') }).then((res) => {
if (res.success) {
this.formobj.orgNamePath = res.data.orgNamePath
this.formobj.orgSidPath = res.data.orgSidPath
this.orgNamePath_list = res.data.list
}
})
},
changeoOrgNamePath(value) {
const choose = this.orgNamePath_list.filter((item) => item.orgNamePath === value)
this.formobj.orgSidPath = choose[0].orgSidPath
},
handleConfirm() {
if (this.formobj.orgNamePath === '') {
this.$message({ showClose: true, type: 'error', message: '默认组织机构不能为空' })
return
}
this.formobj.userSid = window.sessionStorage.getItem('userSid')
saveOrUpdate(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '操作成功' })
}
})
}
}
}
</script>
<style scoped="scoped" lang="scss">
.content {
width: 100%;
padding-top: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.right_cont {
width: 100%;
height: 645px;
background-color: #fff;
margin: 0;
padding: 15px;
box-sizing: border-box;
}
.tishi {
width: 560px;
color: #000;
padding-left: 1.5%;
margin-bottom: 50px;
tr {
height: 70px;
}
td {
border: 1px solid #e6e9f0;
text-align: center;
}
td:first-child {
background-color: #f7f9fc;
}
.el-input,
input {
width: 80%;
}
span {
font-size: 26px;
color: red;
margin-left: 10px;
}
}
</style>

1010
demo-web-ui/src/views/postManage/postManage.vue
View File

File diff suppressed because it is too large Load Diff

24
demo-web-ui/src/views/redirect/index.vue
View File

@@ -1,12 +1,12 @@
<script>
export default {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h() // avoid warning message
}
}
</script>
<script>
export default {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h() // avoid warning message
}
}
</script>

254
demo-web-ui/src/views/region/component/regionAdd.vue
View File

@@ -1,127 +1,127 @@
<template>
<el-dialog width="60%" :append-to-body="true" :visible.sync="dialogShow" title="新增">
<div id="regionAdd">
<div class="poptitle">
<div class="conter_title">名称：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.name" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">行政区域代码：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.districtCode" onkeyup="value=value.replace(/[^\d]/g,'')"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">级别：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.level" onkeyup="value=value.replace(/[^\d]/g,'')" type="namber"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">排序号：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.sortNo" onkeyup="value=value.replace(/[^\d]/g,'')" type="namber"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
<el-button @click="newWrit_bc">保存</el-button>
<el-button @click="close_">关闭</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import req from '@/api/system/region/region' //请求方法
export default {
name: "regionAdd",
data() {
return {
dialogShow: false,
regionDto: {
districtCode: '',
level: Number(1),
name: '',
psid: '0',
sortNo: 0
}
}
},
methods: {
//psid,level
showAdd(psid, level) {
this.regionDto.psid = psid
this.regionDto.level = level
this.dialogShow = true
console.log('添加组件接收到的psid', this.regionDto.psid)
console.log('添加组件接收到的level', this.regionDto.level)
},
close_() {
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.psid = ''
this.regionDto.level = ''
this.sortNo = 0
this.dialogShow = false
this.$emit('closeLoding')
},
newWrit_bc() {
this.save()
},
save() {
if (this.regionDto.level === 0) {
return this.$message({
type: 'error',
message: '级别不能为0',
showClose: true
})
} else {
req.save(this.regionDto).then(resp => {
if (resp && resp.success) {
this.$message({
type: 'success',
message: resp.msg,
showClose: true
})
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.level = ''
this.sortNo = 0
this.dialogShow = false
this.$emit('closeLoding')
} else {
this.$message.error(resp.msg)
}
})
}
}
}
}
</script>
<style scoped lang="scss">
.poptitle {
width: 97%;
height: 50px;
line-height: 50px;
border: 1px solid #dedede;
display: flex;
.conter_title {
flex: 3;
height: 50px;
border-right: 1px solid #dedede;
text-align: center;
line-height: 50px;
}
.conter_content {
flex: 7;
}
}
</style>
<template>
<el-dialog width="60%" :append-to-body="true" :visible.sync="dialogShow" title="新增">
<div id="regionAdd">
<div class="poptitle">
<div class="conter_title">名称：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.name" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">行政区域代码：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.districtCode" onkeyup="value=value.replace(/[^\d]/g,'')"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">级别：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.level" onkeyup="value=value.replace(/[^\d]/g,'')" type="namber"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">排序号：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="regionDto.sortNo" onkeyup="value=value.replace(/[^\d]/g,'')" type="namber"
style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
<el-button @click="newWrit_bc">保存</el-button>
<el-button @click="close_">关闭</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import req from '@/api/system/region/region' //请求方法
export default {
name: "regionAdd",
data() {
return {
dialogShow: false,
regionDto: {
districtCode: '',
level: Number(1),
name: '',
psid: '0',
sortNo: 0
}
}
},
methods: {
//psid,level
showAdd(psid, level) {
this.regionDto.psid = psid
this.regionDto.level = level
this.dialogShow = true
console.log('添加组件接收到的psid', this.regionDto.psid)
console.log('添加组件接收到的level', this.regionDto.level)
},
close_() {
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.psid = ''
this.regionDto.level = ''
this.sortNo = 0
this.dialogShow = false
this.$emit('closeLoding')
},
newWrit_bc() {
this.save()
},
save() {
if (this.regionDto.level === 0) {
return this.$message({
type: 'error',
message: '级别不能为0',
showClose: true
})
} else {
req.save(this.regionDto).then(resp => {
if (resp && resp.success) {
this.$message({
type: 'success',
message: resp.msg,
showClose: true
})
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.level = ''
this.sortNo = 0
this.dialogShow = false
this.$emit('closeLoding')
} else {
this.$message.error(resp.msg)
}
})
}
}
}
}
</script>
<style scoped lang="scss">
.poptitle {
width: 97%;
height: 50px;
line-height: 50px;
border: 1px solid #dedede;
display: flex;
.conter_title {
flex: 3;
height: 50px;
border-right: 1px solid #dedede;
text-align: center;
line-height: 50px;
}
.conter_content {
flex: 7;
}
}
</style>

248
demo-web-ui/src/views/region/component/regionAlter.vue
View File

@@ -1,124 +1,124 @@
<template>
<div id="">
<div class="poptitle">
<div class="conter_title">名称：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.name" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">行政区域代码：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.districtCode" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">级别：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.level" type="namber" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">排序号：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.sortNo" type="namber" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
<el-button @click="newWrit_bc">保存</el-button>
<el-button @click="close_">关闭</el-button>
</div>
</div>
</template>
<script>
import req from '@/api/system/region/region' //请求方法
export default {
name: "regionAlter",
props: {
psid: {
type: String,
default: function () {
return ''
}
},
huixian: {
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
regionDto: {
districtCode: '',
level: 0,
name: '',
psid: this.psid,
sortNo: 0
}
}
},
mounted() {
console.log(this.psid)
console.log(this.huixian)
},
methods: {
close_() {
this.$emit('closeLoding')
},
newWrit_bc() {
this.update()
},
update() {
this.regionDto.districtCode = this.huixian.districtCode
this.regionDto.level = this.huixian.level
this.regionDto.name = this.huixian.name
this.regionDto.sortNo = this.huixian.sortNo
console.log(this.regionDto)
req.update(this.regionDto).then(resp => {
if (resp && resp.success) {
this.$message({
type: 'success',
message: resp.msg,
showClose: true
})
if (resp.code === '200') {
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.psid = ''
this.regionDto.level = ''
this.regionDto.sortNo = 0
this.$emit('closeLoding')
}
} else {
this.$message.error(resp.msg)
}
})
}
}
}
</script>
<style scoped lang="scss">
.poptitle {
width: 97%;
height: 50px;
line-height: 50px;
border: 1px solid #dedede;
display: flex;
.conter_title {
flex: 3;
height: 50px;
border-right: 1px solid #dedede;
text-align: center;
line-height: 50px;
}
.conter_content {
flex: 7;
}
}
</style>
<template>
<div id="">
<div class="poptitle">
<div class="conter_title">名称：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.name" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">行政区域代码：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.districtCode" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">级别：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.level" type="namber" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div class="poptitle">
<div class="conter_title" style="">排序号：</div>
<div class="conter_content" style="flex: 7">
<el-input v-model="huixian.sortNo" type="namber" style="width: 300px;margin-left: 20px"/>
</div>
</div>
<div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
<el-button @click="newWrit_bc">保存</el-button>
<el-button @click="close_">关闭</el-button>
</div>
</div>
</template>
<script>
import req from '@/api/system/region/region' //请求方法
export default {
name: "regionAlter",
props: {
psid: {
type: String,
default: function () {
return ''
}
},
huixian: {
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
regionDto: {
districtCode: '',
level: 0,
name: '',
psid: this.psid,
sortNo: 0
}
}
},
mounted() {
console.log(this.psid)
console.log(this.huixian)
},
methods: {
close_() {
this.$emit('closeLoding')
},
newWrit_bc() {
this.update()
},
update() {
this.regionDto.districtCode = this.huixian.districtCode
this.regionDto.level = this.huixian.level
this.regionDto.name = this.huixian.name
this.regionDto.sortNo = this.huixian.sortNo
console.log(this.regionDto)
req.update(this.regionDto).then(resp => {
if (resp && resp.success) {
this.$message({
type: 'success',
message: resp.msg,
showClose: true
})
if (resp.code === '200') {
this.regionDto.districtCode = ''
this.regionDto.name = ''
this.regionDto.psid = ''
this.regionDto.level = ''
this.regionDto.sortNo = 0
this.$emit('closeLoding')
}
} else {
this.$message.error(resp.msg)
}
})
}
}
}
</script>
<style scoped lang="scss">
.poptitle {
width: 97%;
height: 50px;
line-height: 50px;
border: 1px solid #dedede;
display: flex;
.conter_title {
flex: 3;
height: 50px;
border-right: 1px solid #dedede;
text-align: center;
line-height: 50px;
}
.conter_content {
flex: 7;
}
}
</style>

1126
demo-web-ui/src/views/region/region.vue
View File

File diff suppressed because it is too large Load Diff

1144
demo-web-ui/src/views/region/regionCity.vue
View File

File diff suppressed because it is too large Load Diff

1094
demo-web-ui/src/views/region/regionDistrict.vue
View File

File diff suppressed because it is too large Load Diff

910
demo-web-ui/src/views/sourceManage/sourceManage.vue
View File

@@ -1,455 +1,455 @@
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="资源列表" name="roleList">
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="page.params" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="21">
<el-form-item label="资源ID">
<el-input v-model="page.params.sourceId" placeholder="资源ID" clearable></el-input>
</el-form-item>
<el-form-item label="资源名称">
<el-input v-model="page.params.sourceName" placeholder="资源名称" clearable></el-input>
</el-form-item>
<el-button type="primary" @click="getPageList(1)">查 询</el-button>
</el-col>
<el-col :span="3">
<el-form-item style="float: right;">
<el-button type="primary" @click="getPageList">保存排序</el-button>
<!--<el-button type="primary" @click="add()">添加资源</el-button>-->
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="70px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="150px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="sourceName" label="资源名称" align="center">
</el-table-column>
<el-table-column prop="sortNo" label="排序" align="center" width="70px">
<template slot-scope="scope">
<el-input v-model="scope.row.sortNo" size="mini"/>
</template>
</el-table-column>
<el-table-column prop="sourceId" label="资源ID(微服务的name属性)" align="center">
</el-table-column>
<el-table-column prop="remarks" label="资源描述" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<!--<tr>
<td>父级资源</td>
<td>
<el-select v-model="form.psid" placeholder="请选择" style="width:300px">
&lt;!&ndash;<el-option
label="请选择"
value="0">
</el-option>&ndash;&gt;
<el-option
v-for="item in sourceList"
:key="item.sid"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
&lt;!&ndash; <el-input v-model="form.psid"></el-input> &ndash;&gt;
</td>
</tr>-->
<tr>
<td>资源ID</td>
<td>
<el-input v-model="form.sourceId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-input v-model="form.sourceName" style="width:300px"></el-input>
</td>
</tr>
<!--<tr>
<td>资源类别</td>
<td>
<el-select v-model="form.sourceType" placeholder="请选择资源类别" style="width:300px">
<el-option
v-for="item in zylb"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>-->
<tr>
<td>app下载地址</td>
<td>
<el-input v-model="form.sourceUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>web页面url</td>
<td>
<el-input v-model="form.pageUrl" style="width:300px"></el-input>
</td>
</tr>
<!-- <tr>
<td>资源url标识</td>
<td >
<el-input v-model="form.urlSign"></el-input>
</td>
</tr> -->
<tr>
<td>包名</td>
<td>
<el-input v-model="form.sourcePackage" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>菜单图标地址</td>
<td>
<el-input v-model="form.iconUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源图标背景色</td>
<td>
<el-input v-model="form.iconBgColor" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源版本</td>
<td>
<el-input v-model="form.ver" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>启动模块动作</td>
<td>
<el-input v-model="form.sourceAction" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源用到的json拼接</td>
<td>
<el-input v-model="form.sourceExtra" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>提示数量</td>
<td>
<el-input v-model="form.noticeNum" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>RePlugin插件名称</td>
<td>
<el-input v-model="form.modulePluginName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input type="number" v-model="form.sortNo" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增资源" name="addrole">
<!--<el-dialog :title="dialogTitle + '资源描述'" :visible.sync="editDialog" width="60%">-->
<table class="e-table" cellspacing="0">
<!-- <tr>
<td>父级资源</td>
<td>
<el-select v-model="form.psid" placeholder="请选择" style="width:300px">
&lt;!&ndash;<el-option
label="请选择"
value="0">
</el-option>&ndash;&gt;
<el-option
v-for="item in sourceList"
:key="item.sid"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
&lt;!&ndash; <el-input v-model="form.psid"></el-input> &ndash;&gt;
</td>
</tr>-->
<tr>
<td>资源ID</td>
<td>
<el-input v-model="form.sourceId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-input v-model="form.sourceName" style="width:300px"></el-input>
</td>
</tr>
<!--<tr>
<td>资源类别</td>
<td>
<el-select v-model="form.sourceType" placeholder="请选择资源类别" style="width:300px">
<el-option
v-for="item in zylb"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>-->
<tr>
<td>app下载地址</td>
<td>
<el-input v-model="form.sourceUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>web页面url</td>
<td>
<el-input v-model="form.pageUrl" style="width:300px"></el-input>
</td>
</tr>
<!-- <tr>
<td>资源url标识</td>
<td >
<el-input v-model="form.urlSign"></el-input>
</td>
</tr> -->
<tr>
<td>包名</td>
<td>
<el-input v-model="form.sourcePackage" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>菜单图标地址</td>
<td>
<el-input v-model="form.iconUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源图标背景色</td>
<td>
<el-input v-model="form.iconBgColor" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源版本</td>
<td>
<el-input v-model="form.ver" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>启动模块动作</td>
<td>
<el-input v-model="form.sourceAction" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源用到的json拼接</td>
<td>
<el-input v-model="form.sourceExtra" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>提示数量</td>
<td>
<el-input v-model="form.noticeNum" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>RePlugin插件名称</td>
<td>
<el-input v-model="form.modulePluginName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input type="number" v-model="form.sortNo" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
<!--</el-dialog>-->
<!--</div>-->
</el-tab-pane>
</el-tabs>
</template>
<script>
import {
pageList,
saveSourcesInfo,
getSourcesInfo,
putSourcesInfo,
delSources,
getZzylb,
getsourceList
} from '@/api/system/sources/index.js'
export default {
data() {
return {
activeName: 'roleList',
dialogTitle: '',
editDialog: false,
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
psid: '',
sourceId: '',
sourceName: ''
},
},
tableData: [],
zylb: [],
sourceList: []
}
},
mounted() {
this.getPageList(this.page)
// getsourceList().then(res => {
// this.sourceList = res.data
// })
// getZzylb().then(res => {
// this.zylb = res.data
// })
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
resetSearch() { // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
psid: '',
sourceId: '',
sourceName: ''
},
}
this.getPageList()
},
getPageList() { // 获取列表
pageList(this.page).then((res) => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getPageList()
}
},
save() {
if (this.form.sid) {
putSourcesInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveSourcesInfo(this.form).then(res => {
this.getPageList()
this.activeName = "roleList"
this.$message({
message: res.msg,
type: 'success'
})
})
}
this.reset()
},
reset() {
this.form = {}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
// getSourcesInfo({sid: row.sid}).then(res => {
// this.form = res.data
// })
},
deleteRow(row) {
this.$confirm('确定要删除该资源吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delSources({sid: row.sid}).then(res => {
this.getPageList()
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.my-tabs {
margin-top: 10px;
}
</style>
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="资源列表" name="roleList">
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="page.params" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="21">
<el-form-item label="资源ID">
<el-input v-model="page.params.sourceId" placeholder="资源ID" clearable></el-input>
</el-form-item>
<el-form-item label="资源名称">
<el-input v-model="page.params.sourceName" placeholder="资源名称" clearable></el-input>
</el-form-item>
<el-button type="primary" @click="getPageList(1)">查 询</el-button>
</el-col>
<el-col :span="3">
<el-form-item style="float: right;">
<el-button type="primary" @click="getPageList">保存排序</el-button>
<!--<el-button type="primary" @click="add()">添加资源</el-button>-->
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="70px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="150px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="sourceName" label="资源名称" align="center">
</el-table-column>
<el-table-column prop="sortNo" label="排序" align="center" width="70px">
<template slot-scope="scope">
<el-input v-model="scope.row.sortNo" size="mini"/>
</template>
</el-table-column>
<el-table-column prop="sourceId" label="资源ID(微服务的name属性)" align="center">
</el-table-column>
<el-table-column prop="remarks" label="资源描述" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<!--<tr>
<td>父级资源</td>
<td>
<el-select v-model="form.psid" placeholder="请选择" style="width:300px">
&lt;!&ndash;<el-option
label="请选择"
value="0">
</el-option>&ndash;&gt;
<el-option
v-for="item in sourceList"
:key="item.sid"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
&lt;!&ndash; <el-input v-model="form.psid"></el-input> &ndash;&gt;
</td>
</tr>-->
<tr>
<td>资源ID</td>
<td>
<el-input v-model="form.sourceId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-input v-model="form.sourceName" style="width:300px"></el-input>
</td>
</tr>
<!--<tr>
<td>资源类别</td>
<td>
<el-select v-model="form.sourceType" placeholder="请选择资源类别" style="width:300px">
<el-option
v-for="item in zylb"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>-->
<tr>
<td>app下载地址</td>
<td>
<el-input v-model="form.sourceUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>web页面url</td>
<td>
<el-input v-model="form.pageUrl" style="width:300px"></el-input>
</td>
</tr>
<!-- <tr>
<td>资源url标识</td>
<td >
<el-input v-model="form.urlSign"></el-input>
</td>
</tr> -->
<tr>
<td>包名</td>
<td>
<el-input v-model="form.sourcePackage" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>菜单图标地址</td>
<td>
<el-input v-model="form.iconUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源图标背景色</td>
<td>
<el-input v-model="form.iconBgColor" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源版本</td>
<td>
<el-input v-model="form.ver" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>启动模块动作</td>
<td>
<el-input v-model="form.sourceAction" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源用到的json拼接</td>
<td>
<el-input v-model="form.sourceExtra" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>提示数量</td>
<td>
<el-input v-model="form.noticeNum" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>RePlugin插件名称</td>
<td>
<el-input v-model="form.modulePluginName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input type="number" v-model="form.sortNo" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增资源" name="addrole">
<!--<el-dialog :title="dialogTitle + '资源描述'" :visible.sync="editDialog" width="60%">-->
<table class="e-table" cellspacing="0">
<!-- <tr>
<td>父级资源</td>
<td>
<el-select v-model="form.psid" placeholder="请选择" style="width:300px">
&lt;!&ndash;<el-option
label="请选择"
value="0">
</el-option>&ndash;&gt;
<el-option
v-for="item in sourceList"
:key="item.sid"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
&lt;!&ndash; <el-input v-model="form.psid"></el-input> &ndash;&gt;
</td>
</tr>-->
<tr>
<td>资源ID</td>
<td>
<el-input v-model="form.sourceId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-input v-model="form.sourceName" style="width:300px"></el-input>
</td>
</tr>
<!--<tr>
<td>资源类别</td>
<td>
<el-select v-model="form.sourceType" placeholder="请选择资源类别" style="width:300px">
<el-option
v-for="item in zylb"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>-->
<tr>
<td>app下载地址</td>
<td>
<el-input v-model="form.sourceUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>web页面url</td>
<td>
<el-input v-model="form.pageUrl" style="width:300px"></el-input>
</td>
</tr>
<!-- <tr>
<td>资源url标识</td>
<td >
<el-input v-model="form.urlSign"></el-input>
</td>
</tr> -->
<tr>
<td>包名</td>
<td>
<el-input v-model="form.sourcePackage" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>菜单图标地址</td>
<td>
<el-input v-model="form.iconUrl" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源图标背景色</td>
<td>
<el-input v-model="form.iconBgColor" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源版本</td>
<td>
<el-input v-model="form.ver" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>启动模块动作</td>
<td>
<el-input v-model="form.sourceAction" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源用到的json拼接</td>
<td>
<el-input v-model="form.sourceExtra" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>提示数量</td>
<td>
<el-input v-model="form.noticeNum" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>RePlugin插件名称</td>
<td>
<el-input v-model="form.modulePluginName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input type="number" v-model="form.sortNo" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
<!--</el-dialog>-->
<!--</div>-->
</el-tab-pane>
</el-tabs>
</template>
<script>
import {
pageList,
saveSourcesInfo,
getSourcesInfo,
putSourcesInfo,
delSources,
getZzylb,
getsourceList
} from '@/api/system/sources/index.js'
export default {
data() {
return {
activeName: 'roleList',
dialogTitle: '',
editDialog: false,
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
psid: '',
sourceId: '',
sourceName: ''
},
},
tableData: [],
zylb: [],
sourceList: []
}
},
mounted() {
this.getPageList(this.page)
// getsourceList().then(res => {
// this.sourceList = res.data
// })
// getZzylb().then(res => {
// this.zylb = res.data
// })
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
resetSearch() { // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
psid: '',
sourceId: '',
sourceName: ''
},
}
this.getPageList()
},
getPageList() { // 获取列表
pageList(this.page).then((res) => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getPageList()
}
},
save() {
if (this.form.sid) {
putSourcesInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveSourcesInfo(this.form).then(res => {
this.getPageList()
this.activeName = "roleList"
this.$message({
message: res.msg,
type: 'success'
})
})
}
this.reset()
},
reset() {
this.form = {}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
// getSourcesInfo({sid: row.sid}).then(res => {
// this.form = res.data
// })
},
deleteRow(row) {
this.$confirm('确定要删除该资源吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delSources({sid: row.sid}).then(res => {
this.getPageList()
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.my-tabs {
margin-top: 10px;
}
</style>

704
demo-web-ui/src/views/system-admin/RoleAdminister/RoleAdminister.vue
View File

@@ -1,352 +1,352 @@
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="角色列表" name="roleList">
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="角色名称">
<el-input v-model="search.roleName" clearable></el-input>
</el-form-item>
<el-button @click="getroleOrgList()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="roleTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="240px" align="center">
<template slot-scope="scope">
<el-button @click="roleMenus(scope.row)" type="primary" size="mini">
菜单授权
</el-button>
<el-button @click="editRow(scope.row)" type="primary" size="mini">
修改
</el-button>
<el-button @click="delRow(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" width="220px" align="center">
</el-table-column>
<el-table-column prop="remarks" label="备注" align="center">
</el-table-column>
<el-table-column prop="isEnable" label="是否可用" width="120px" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.isEnable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
:inactive-value="0" @change="enabledChange(scope.row.isEnable,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName"></el-input>
</td>
</tr>
<tr>
<td>是否可用</td>
<td>
<el-switch v-model="roleForm.isEnable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
:inactive-value="0">
</el-switch>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 菜单授权 -->
<el-dialog title="菜单授权" :visible.sync="roleDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName" readonly></el-input>
</td>
</tr>
<tr>
<td>可操作菜单列表</td>
<td>
<el-tree v-loading="loading" :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
:default-checked-keys="checkedId" :props="defaultProps" @check-change="checkchange">
</el-tree>
</td>
</tr>
</table>
<div slot="footer" class="text-center">
<el-button type="primary" @click="getCheckedKeys">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增角色" name="addrole">
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName"></el-input>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</template>
<script>
import {
roleOrgList,
saveOrgroles,
putOrgroles,
delOrgroles,
setRoleEnable
} from '@/api/system/roleAdminister/index.js'
import {
roleMenuTree,
saveorgrolemenus
} from '@/api/system/roleAdminister/rolemenus.js'
import {
getrolemenus,
saverolemenus
} from '@/api/system/roleMenus/index.js'
export default {
data() {
return {
dialogTitle: '',
activeName: 'roleList',
roleForm: {
orgSid: this.$store.getters.userInfo.orgSid,
remarks: "",
roleName: ""
},
formBackup: {},
search: {
roleName: '',
orgSid: this.$store.getters.userInfo.orgSid
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
roleTable: [],
editDialog: false,
// 树形
loading: false,
defaultProps: {
children: 'children',
label: 'menuName'
},
checkedId: [],
treedata: [],
chace: [],
roleDialog: false,
Thisrow: {}
};
},
mounted() {
this.formBackup = Object.assign({}, this.roleForm),
this.getroleOrgList()
},
methods: {
pagination(val) { // 分页函数
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getroleOrgList(this.page)
},
// 分页列表
getroleOrgList() {
let params = this.page
params.params = this.search
roleOrgList(params).then(res => {
this.page.total = res.data.total
this.roleTable = res.data.records
})
},
handleClick(tab, event) {
if(tab.name == 'addrole'){
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
}else{
this.getroleOrgList()
}
},
add() {
this.dialogTitle = '新增'
this.editDialog = true
this.roleForm = Object.assign({}, this.formBackup)
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.roleForm = Object.assign({}, row)
},
delRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgroles({
sid: row.sid
}).then(res => {
this.getroleOrgList()
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
// 保存角色
save() {
if (this.roleForm.sid) {
putOrgroles(this.roleForm).then(res => {
if (res.code == '200') {
this.getroleOrgList()
this.editDialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
saveOrgroles(this.roleForm).then(res => {
if (res.code == '200') {
this.getroleOrgList()
this.activeName = "roleList"
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
},
// 是否可用 按钮
enabledChange(value, row) {
setRoleEnable({
sid: row.sid,
isEnable: value
}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
},
// 获取授权菜单树形
roleMenus(row) {
this.roleDialog = true
this.checkedId = []
this.roleForm.roleName = row.roleName
this.Thisrow = row
this.loading = true
let params = {
orgSid: this.$store.getters.userInfo.orgSid,
roleSid: row.sid,
userType: '2'
}
roleMenuTree(params).then(res => {
this.treedata = res.data
this.getTreeParentNode(res.data, this.checkedId)
this.getTreeParentid(res.data)
this.loading = false
})
},
// 递归查询所有上级数据
getTreeParentNode(menus, ids) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].children && menus[i].children.length != 0) {
this.getTreeParentNode(menus[i].children, ids)
} else if (menus[i].isCheck) {
ids.push(menus[i].sid)
}
}
},
// 所有一级菜单ID
getTreeParentid(menus) {
for (var i = 0; i < menus.length; i++) {
this.chace.push(menus[i].sid)
}
},
getCheckedKeys() {
let _this = this
let roleMenus = []
this.$refs.Tree.getCheckedKeys().forEach(val => {
roleMenus.push({
menuSid: val,
orgSid: _this.$store.getters.userInfo.orgSid,
roleSid: _this.Thisrow.sid
})
})
let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
for (let i = 0; i < parentTrue.length; i++) {
for (let j = 0; j < this.chace.length; j++) {
if (parentTrue[i] == this.chace[j]) {
parentTrue.splice(i, 1);
}
}
}
parentTrue.forEach(val => {
roleMenus.push({
menuSid: val,
orgSid: _this.$store.getters.userInfo.orgSid,
roleSid: _this.Thisrow.sid
})
})
saveorgrolemenus({
roleSid: _this.Thisrow.sid,
roleMenus: roleMenus
}).then(res => {
this.roleDialog = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
}
};
</script>
<style scoped="scoped">
.my-tabs{
margin-top: 10px;
}
</style>
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="角色列表" name="roleList">
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="角色名称">
<el-input v-model="search.roleName" clearable></el-input>
</el-form-item>
<el-button @click="getroleOrgList()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="roleTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="240px" align="center">
<template slot-scope="scope">
<el-button @click="roleMenus(scope.row)" type="primary" size="mini">
菜单授权
</el-button>
<el-button @click="editRow(scope.row)" type="primary" size="mini">
修改
</el-button>
<el-button @click="delRow(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" width="220px" align="center">
</el-table-column>
<el-table-column prop="remarks" label="备注" align="center">
</el-table-column>
<el-table-column prop="isEnable" label="是否可用" width="120px" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.isEnable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
:inactive-value="0" @change="enabledChange(scope.row.isEnable,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName"></el-input>
</td>
</tr>
<tr>
<td>是否可用</td>
<td>
<el-switch v-model="roleForm.isEnable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
:inactive-value="0">
</el-switch>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 菜单授权 -->
<el-dialog title="菜单授权" :visible.sync="roleDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName" readonly></el-input>
</td>
</tr>
<tr>
<td>可操作菜单列表</td>
<td>
<el-tree v-loading="loading" :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
:default-checked-keys="checkedId" :props="defaultProps" @check-change="checkchange">
</el-tree>
</td>
</tr>
</table>
<div slot="footer" class="text-center">
<el-button type="primary" @click="getCheckedKeys">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增角色" name="addrole">
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="roleForm.roleName"></el-input>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</template>
<script>
import {
roleOrgList,
saveOrgroles,
putOrgroles,
delOrgroles,
setRoleEnable
} from '@/api/system/roleAdminister/index.js'
import {
roleMenuTree,
saveorgrolemenus
} from '@/api/system/roleAdminister/rolemenus.js'
import {
getrolemenus,
saverolemenus
} from '@/api/system/roleMenus/index.js'
export default {
data() {
return {
dialogTitle: '',
activeName: 'roleList',
roleForm: {
orgSid: this.$store.getters.userInfo.orgSid,
remarks: "",
roleName: ""
},
formBackup: {},
search: {
roleName: '',
orgSid: this.$store.getters.userInfo.orgSid
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
roleTable: [],
editDialog: false,
// 树形
loading: false,
defaultProps: {
children: 'children',
label: 'menuName'
},
checkedId: [],
treedata: [],
chace: [],
roleDialog: false,
Thisrow: {}
};
},
mounted() {
this.formBackup = Object.assign({}, this.roleForm),
this.getroleOrgList()
},
methods: {
pagination(val) { // 分页函数
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getroleOrgList(this.page)
},
// 分页列表
getroleOrgList() {
let params = this.page
params.params = this.search
roleOrgList(params).then(res => {
this.page.total = res.data.total
this.roleTable = res.data.records
})
},
handleClick(tab, event) {
if(tab.name == 'addrole'){
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
}else{
this.getroleOrgList()
}
},
add() {
this.dialogTitle = '新增'
this.editDialog = true
this.roleForm = Object.assign({}, this.formBackup)
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.roleForm = Object.assign({}, row)
},
delRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgroles({
sid: row.sid
}).then(res => {
this.getroleOrgList()
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
// 保存角色
save() {
if (this.roleForm.sid) {
putOrgroles(this.roleForm).then(res => {
if (res.code == '200') {
this.getroleOrgList()
this.editDialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
saveOrgroles(this.roleForm).then(res => {
if (res.code == '200') {
this.getroleOrgList()
this.activeName = "roleList"
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
},
// 是否可用 按钮
enabledChange(value, row) {
setRoleEnable({
sid: row.sid,
isEnable: value
}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
},
// 获取授权菜单树形
roleMenus(row) {
this.roleDialog = true
this.checkedId = []
this.roleForm.roleName = row.roleName
this.Thisrow = row
this.loading = true
let params = {
orgSid: this.$store.getters.userInfo.orgSid,
roleSid: row.sid,
userType: '2'
}
roleMenuTree(params).then(res => {
this.treedata = res.data
this.getTreeParentNode(res.data, this.checkedId)
this.getTreeParentid(res.data)
this.loading = false
})
},
// 递归查询所有上级数据
getTreeParentNode(menus, ids) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].children && menus[i].children.length != 0) {
this.getTreeParentNode(menus[i].children, ids)
} else if (menus[i].isCheck) {
ids.push(menus[i].sid)
}
}
},
// 所有一级菜单ID
getTreeParentid(menus) {
for (var i = 0; i < menus.length; i++) {
this.chace.push(menus[i].sid)
}
},
getCheckedKeys() {
let _this = this
let roleMenus = []
this.$refs.Tree.getCheckedKeys().forEach(val => {
roleMenus.push({
menuSid: val,
orgSid: _this.$store.getters.userInfo.orgSid,
roleSid: _this.Thisrow.sid
})
})
let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
for (let i = 0; i < parentTrue.length; i++) {
for (let j = 0; j < this.chace.length; j++) {
if (parentTrue[i] == this.chace[j]) {
parentTrue.splice(i, 1);
}
}
}
parentTrue.forEach(val => {
roleMenus.push({
menuSid: val,
orgSid: _this.$store.getters.userInfo.orgSid,
roleSid: _this.Thisrow.sid
})
})
saveorgrolemenus({
roleSid: _this.Thisrow.sid,
roleMenus: roleMenus
}).then(res => {
this.roleDialog = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
}
};
</script>
<style scoped="scoped">
.my-tabs{
margin-top: 10px;
}
</style>

440
demo-web-ui/src/views/system-admin/UserAdminister/components/client.vue
View File

@@ -1,220 +1,220 @@
<template>
<div>
<div class="cline-set"><el-button type="primary" icon="el-icon-plus" @click="set_SQR()">变更被授权人</el-button></div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="100px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="被委托人姓名">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-form-item label="被委托日期">
<el-date-picker
v-model="search.startDate"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="至" label-width="23px">
<el-date-picker
v-model="search.endDate"
:picker-options="pickerStartData(search.startDate)"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-button @click="onSearch()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">被委托人列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="clientTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="startDate" label="开始日期" align="center">
</el-table-column>
<el-table-column prop="endDate" label="结束日期" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 变更授权ren -->
<el-dialog title="本单位人员列表" width="70%" :visible.sync="dialogTable" append-to-body>
<div class="clearfix">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="60px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="姓名:">
<el-input v-model="search1.name" clearable></el-input>
</el-form-item>
<el-button @click="set_SQR()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="table-describe clearfix">
<h4 style="">本单位人员列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="gridData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="160px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
变更为授权委托人
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="idNO" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
</el-table>
<pagination :total="page1.total" :page.sync="page1.current" :limit.sync="page1.size" @pagination="pagination1"/>
</div>
</el-dialog>
</div>
</template>
<script>
import { clientList, setclientList, doClientAlter } from '@/api/system/userAdminister/client.js'
export default {
data() {
return {
activeName: 'first',
search: {
endDate: "",
name: "",
startDate: "",
orgSid: this.$store.getters.userInfo.orgSid
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
clientTable: [],
dialogTable: false,
search1: {
endDate: "",
name: "",
startDate: "",
orgSid: this.$store.getters.userInfo.orgSid
},
page1: {
total: 0,
current: 1,
size: 10,
},
gridData:[]
};
},
mounted() {
this.getclientList()
},
methods: {
getclientList(){
let params = this.page
params.params = this.search
clientList(params).then(res=>{
this.page.total = res.data.total
this.clientTable = res.data.records
})
},
pickerStartData(newtime){
return {
disabledDate(time) { return time.getTime() < new Date(newtime) - 1000*60*60*24 }
}
},
handleClick(tab, event) {
console.log(tab, event);
},
onSearch(){
this.getclientList()
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getclientList()
},
pagination1(){
this.page.current = val.pageNum
this.page.size = val.pageSize
this.set_SQR()
},
set_SQR(row){
this.dialogTable = true
let params = this.page1
params.params = this.search1
setclientList(params).then(res =>{
this.page1.total = res.data.total
this.gridData = res.data.records
})
},
// 变更为被委托人
setRole(row){
console.log(row)
let params = {
orgSid: this.$store.getters.userInfo.orgSid,
name: row.name,
staffSid: row.staffSid,
mobile: row.mobile,
idNo: row.idNO
}
doClientAlter(params).then(res => {
if(res.code == '200'){
this.getclientList()
this.dialogTable = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
}
};
</script>
<style>
.clearfix{
zoom: 1;
}
.clearfix:before,
.clearfix:after{
width: 100%;
display: table;
content: "";
height: 0;
visibility: hidden;
}
.clearfix:after{
clear: both;
}
.cline-set{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #018ad2;
}
</style>
<template>
<div>
<div class="cline-set"><el-button type="primary" icon="el-icon-plus" @click="set_SQR()">变更被授权人</el-button></div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="100px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="被委托人姓名">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-form-item label="被委托日期">
<el-date-picker
v-model="search.startDate"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="至" label-width="23px">
<el-date-picker
v-model="search.endDate"
:picker-options="pickerStartData(search.startDate)"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-button @click="onSearch()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">被委托人列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="clientTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="startDate" label="开始日期" align="center">
</el-table-column>
<el-table-column prop="endDate" label="结束日期" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 变更授权ren -->
<el-dialog title="本单位人员列表" width="70%" :visible.sync="dialogTable" append-to-body>
<div class="clearfix">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="60px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="姓名:">
<el-input v-model="search1.name" clearable></el-input>
</el-form-item>
<el-button @click="set_SQR()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="table-describe clearfix">
<h4 style="">本单位人员列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="gridData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="160px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
变更为授权委托人
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="idNO" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
</el-table>
<pagination :total="page1.total" :page.sync="page1.current" :limit.sync="page1.size" @pagination="pagination1"/>
</div>
</el-dialog>
</div>
</template>
<script>
import { clientList, setclientList, doClientAlter } from '@/api/system/userAdminister/client.js'
export default {
data() {
return {
activeName: 'first',
search: {
endDate: "",
name: "",
startDate: "",
orgSid: this.$store.getters.userInfo.orgSid
},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
clientTable: [],
dialogTable: false,
search1: {
endDate: "",
name: "",
startDate: "",
orgSid: this.$store.getters.userInfo.orgSid
},
page1: {
total: 0,
current: 1,
size: 10,
},
gridData:[]
};
},
mounted() {
this.getclientList()
},
methods: {
getclientList(){
let params = this.page
params.params = this.search
clientList(params).then(res=>{
this.page.total = res.data.total
this.clientTable = res.data.records
})
},
pickerStartData(newtime){
return {
disabledDate(time) { return time.getTime() < new Date(newtime) - 1000*60*60*24 }
}
},
handleClick(tab, event) {
console.log(tab, event);
},
onSearch(){
this.getclientList()
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getclientList()
},
pagination1(){
this.page.current = val.pageNum
this.page.size = val.pageSize
this.set_SQR()
},
set_SQR(row){
this.dialogTable = true
let params = this.page1
params.params = this.search1
setclientList(params).then(res =>{
this.page1.total = res.data.total
this.gridData = res.data.records
})
},
// 变更为被委托人
setRole(row){
console.log(row)
let params = {
orgSid: this.$store.getters.userInfo.orgSid,
name: row.name,
staffSid: row.staffSid,
mobile: row.mobile,
idNo: row.idNO
}
doClientAlter(params).then(res => {
if(res.code == '200'){
this.getclientList()
this.dialogTable = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
}
};
</script>
<style>
.clearfix{
zoom: 1;
}
.clearfix:before,
.clearfix:after{
width: 100%;
display: table;
content: "";
height: 0;
visibility: hidden;
}
.clearfix:after{
clear: both;
}
.cline-set{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #018ad2;
}
</style>

564
demo-web-ui/src/views/system-admin/UserAdminister/components/user.vue
View File

@@ -1,282 +1,282 @@
<template>
<div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="用户姓名">
<el-input v-model="search.xm" clearable></el-input>
</el-form-item>
<el-form-item label="部门名称">
<el-input v-model="search.deptmentName" clearable></el-input>
</el-form-item>
<el-button @click="getOrgUserList()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">本单位用户列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size"
@pagination="pagination"/>
</div>
<el-table :data="userTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
设置角色
</el-button>
<el-button @click="setOrg(scope.row)" type="primary" size="mini">
设置部门
</el-button>
<el-button @click="initPwd(scope.row)" type="danger" size="mini">
初始化密码
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="userinfo(scope.row)">{{scope.row.userName}}</span>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" width="120px" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
<el-table-column prop="deptmentName" label="所属部门" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 角色设置 -->
<el-dialog title="设置角色" :visible.sync="roleDialog" width="30%">
<el-form :model="roleForm" :rules="rules" ref="roleForm">
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleSid">
<el-select v-model="roleForm.roleSid" placeholder="请选择">
<el-option v-for="item in roleList"
:key="item.sid"
:label="item.roleName"
:value="item.sid"
></el-option>
</el-select>
<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveRole('roleForm')">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 部门设置 -->
<el-dialog title="部门设置" :visible.sync="bm_Dialog" width="30%">
<el-form :model="bm_Form" :rules="rules" ref="bm_Form">
<el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentSid">
<!-- <el-select v-model="bm_Form.departmentSid" placeholder="请选择">
<el-option v-for="item in bm_List"
:key="item.departmentSid"
:label="item.departmentName"
:value="item.departmentSid"
></el-option>
</el-select> -->
<el-cascader
v-model="bm_Form.departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveOrg('bm_Form')">保 存</el-button>
<el-button @click="bm_Dialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {orgUserList} from '@/api/system/userAdminister/index.js'
import {orgrolesList, saveOrgRole, getOrgList, saveDepartment} from '@/api/system/userAdminister/index.js'
import {initPwd} from '@/api/system/user/Auser.js'
import {getOrgTree} from '@/api/system/departments/departments.js'
export default {
data() {
return {
activeName: 'first',
search: {
userName: '',
xm: '',
orgSid: this.$store.getters.userInfo.orgSid
},
props: {
value: "sid",
label: "name",
children: "orgDepartmentVoList"
},
treedata: null,
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
userTable: [],
clientTable: [],
// 设置角色
formLabelWidth: '100',
roleDialog: false,
roleList: [],
roleForm: {
orgSid: this.$store.getters.userInfo.orgSid,
roleSid: "",
userSid: ""
},
// 部门
bm_Dialog: false,
bm_Form: {departmentSid: ''},
bm_List: [],
rules: {
roleSid: [
{required: true, message: '请选择角色名称', trigger: 'change'}
],
departmentSid: [
{required: true, message: '请选择部门名称', trigger: 'change'}
],
}
};
},
mounted() {
this.getOrgUserList()
orgrolesList({orgSid: this.$store.getters.userInfo.orgSid, roleName: ''}).then(res => {
this.roleList = res.data
})
this.getOrgTree()
getOrgList(this.$store.getters.userInfo.orgSid).then(res => {
this.bm_List = res.data
})
},
methods: {
// 列表 + 初始化
getOrgUserList() {
let params = this.page
params.params = this.search
orgUserList(this.page).then(res => {
this.page.total = res.data.total
this.userTable = res.data.records
})
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getOrgUserList()
},
getOrgTree() { // 获取部门树形列表
function treeArr(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].orgDepartmentVoList.length > 0) {
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
let tree = res.data[0].orgDepartmentVoList
treeArr(tree)
this.treedata = tree
})
},
//设置角色 设置 用户ID
setRole(row) {
this.roleDialog = true
this.roleForm.userSid = row.sid
},
//设置角色 提交
saveRole(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
saveOrgRole(this.roleForm).then(res => {
if (res.code == "200") {
this.roleDialog = false
this.getOrgUserList()
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
//设置部门 获取 用户ID
setOrg(row) {
this.bm_Dialog = true
this.bm_Form.departmentSid = ''
this.$set(this.bm_Form, 'staffSid', row.staffSid)
},
//设置部门 提交
saveOrg(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = { // 请求的参数
departmentSid: this.bm_Form.departmentSid[this.bm_Form.departmentSid.length - 1],
staffSid: this.bm_Form.staffSid,
}
saveDepartment(params).then(res => {
if (res.code == "200") {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
initPwd(row) {
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
})
},
toNav(src) {
this.$router.push("/" + src);
}
}
};
</script>
<style scoped="scoped">
.el-select > .el-input {
display: block;
width: 300px;
}
</style>
<template>
<div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="用户姓名">
<el-input v-model="search.xm" clearable></el-input>
</el-form-item>
<el-form-item label="部门名称">
<el-input v-model="search.deptmentName" clearable></el-input>
</el-form-item>
<el-button @click="getOrgUserList()">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">本单位用户列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size"
@pagination="pagination"/>
</div>
<el-table :data="userTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
设置角色
</el-button>
<el-button @click="setOrg(scope.row)" type="primary" size="mini">
设置部门
</el-button>
<el-button @click="initPwd(scope.row)" type="danger" size="mini">
初始化密码
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="userinfo(scope.row)">{{scope.row.userName}}</span>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" width="120px" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
<el-table-column prop="deptmentName" label="所属部门" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 角色设置 -->
<el-dialog title="设置角色" :visible.sync="roleDialog" width="30%">
<el-form :model="roleForm" :rules="rules" ref="roleForm">
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleSid">
<el-select v-model="roleForm.roleSid" placeholder="请选择">
<el-option v-for="item in roleList"
:key="item.sid"
:label="item.roleName"
:value="item.sid"
></el-option>
</el-select>
<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveRole('roleForm')">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 部门设置 -->
<el-dialog title="部门设置" :visible.sync="bm_Dialog" width="30%">
<el-form :model="bm_Form" :rules="rules" ref="bm_Form">
<el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentSid">
<!-- <el-select v-model="bm_Form.departmentSid" placeholder="请选择">
<el-option v-for="item in bm_List"
:key="item.departmentSid"
:label="item.departmentName"
:value="item.departmentSid"
></el-option>
</el-select> -->
<el-cascader
v-model="bm_Form.departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveOrg('bm_Form')">保 存</el-button>
<el-button @click="bm_Dialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {orgUserList} from '@/api/system/userAdminister/index.js'
import {orgrolesList, saveOrgRole, getOrgList, saveDepartment} from '@/api/system/userAdminister/index.js'
import {initPwd} from '@/api/system/user/Auser.js'
import {getOrgTree} from '@/api/system/departments/departments.js'
export default {
data() {
return {
activeName: 'first',
search: {
userName: '',
xm: '',
orgSid: this.$store.getters.userInfo.orgSid
},
props: {
value: "sid",
label: "name",
children: "orgDepartmentVoList"
},
treedata: null,
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
},
userTable: [],
clientTable: [],
// 设置角色
formLabelWidth: '100',
roleDialog: false,
roleList: [],
roleForm: {
orgSid: this.$store.getters.userInfo.orgSid,
roleSid: "",
userSid: ""
},
// 部门
bm_Dialog: false,
bm_Form: {departmentSid: ''},
bm_List: [],
rules: {
roleSid: [
{required: true, message: '请选择角色名称', trigger: 'change'}
],
departmentSid: [
{required: true, message: '请选择部门名称', trigger: 'change'}
],
}
};
},
mounted() {
this.getOrgUserList()
orgrolesList({orgSid: this.$store.getters.userInfo.orgSid, roleName: ''}).then(res => {
this.roleList = res.data
})
this.getOrgTree()
getOrgList(this.$store.getters.userInfo.orgSid).then(res => {
this.bm_List = res.data
})
},
methods: {
// 列表 + 初始化
getOrgUserList() {
let params = this.page
params.params = this.search
orgUserList(this.page).then(res => {
this.page.total = res.data.total
this.userTable = res.data.records
})
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getOrgUserList()
},
getOrgTree() { // 获取部门树形列表
function treeArr(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].orgDepartmentVoList.length > 0) {
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
let tree = res.data[0].orgDepartmentVoList
treeArr(tree)
this.treedata = tree
})
},
//设置角色 设置 用户ID
setRole(row) {
this.roleDialog = true
this.roleForm.userSid = row.sid
},
//设置角色 提交
saveRole(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
saveOrgRole(this.roleForm).then(res => {
if (res.code == "200") {
this.roleDialog = false
this.getOrgUserList()
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
//设置部门 获取 用户ID
setOrg(row) {
this.bm_Dialog = true
this.bm_Form.departmentSid = ''
this.$set(this.bm_Form, 'staffSid', row.staffSid)
},
//设置部门 提交
saveOrg(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = { // 请求的参数
departmentSid: this.bm_Form.departmentSid[this.bm_Form.departmentSid.length - 1],
staffSid: this.bm_Form.staffSid,
}
saveDepartment(params).then(res => {
if (res.code == "200") {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
initPwd(row) {
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
})
},
toNav(src) {
this.$router.push("/" + src);
}
}
};
</script>
<style scoped="scoped">
.el-select > .el-input {
display: block;
width: 300px;
}
</style>

84
demo-web-ui/src/views/system-admin/UserAdminister/index.vue
View File

@@ -1,42 +1,42 @@
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户列表" name="first">
<User></User>
</el-tab-pane>
<el-tab-pane label="被委托人列表" name="second">
<Client></Client>
</el-tab-pane>
</el-tabs>
</template>
<script>
import User from './components/user.vue'
import Client from './components/client.vue'
export default {
components: {Client, User},
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
}
}
}
</script>
<style lang="scss">
.my-tabs {
margin-top: 10px;
.el-date-editor .el-range-separator {
line-height: 26px;
}
.tab-header .el-form-item .el-input__icon {
line-height: 26px;
}
}
</style>
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户列表" name="first">
<User></User>
</el-tab-pane>
<el-tab-pane label="被委托人列表" name="second">
<Client></Client>
</el-tab-pane>
</el-tabs>
</template>
<script>
import User from './components/user.vue'
import Client from './components/client.vue'
export default {
components: {Client, User},
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
}
}
}
</script>
<style lang="scss">
.my-tabs {
margin-top: 10px;
.el-date-editor .el-range-separator {
line-height: 26px;
}
.tab-header .el-form-item .el-input__icon {
line-height: 26px;
}
}
</style>

912
demo-web-ui/src/views/system-admin/check/company.vue
View File

@@ -1,456 +1,456 @@
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" :model="page.params" >
<el-form-item label="区域" label-width="50px">
<AreaPicker @areaPicker="areaPicker"
:province="page.params.province"
:city="page.params.city"
:county="page.params.county"></AreaPicker>
</el-form-item>
<el-form-item label="单位名称" label-width="80px">
<el-input v-model="page.params.name" clearable></el-input>
</el-form-item>
<!-- <el-form-item label="状态" label-width="50px">
<el-select v-model="page.params.state" placeholder="请选择状态">
<el-option label="全部" :value="0">
</el-option>
<el-option label="未审核" :value="1">
</el-option>
<el-option label="已审核" :value="2">
</el-option>
</el-select>
</el-form-item> -->
</el-form>
</div>
<div slot="btn">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button @click="orgRegister(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"查看"}}
</el-button>
<el-button @click="handledelete(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="orgCode" label="单位代码" align="center">
</el-table-column>
<el-table-column label="单位名称" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="orgRegister(scope.row)">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="所在区域" align="center">
<el-table-column prop="province" label="省" align="center">
</el-table-column>
<el-table-column prop="city" label="市" align="center">
</el-table-column>
<el-table-column prop="county" label="区/县" align="center">
</el-table-column>
</el-table-column>
<el-table-column prop="contactMan" label="负责人" align="center">
</el-table-column>
<el-table-column prop="contactMobile" label="手机号码" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 审核窗口 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" class="company" style="margin-top: -10vh;">
<div class="zcxx" >
<p>审核单位注册信息</p>
<el-button v-if="showbtn == 1" type="primary" @click="dialogVisible = false" icon="el-icon-back" style="background-color: #0272c8; margin-right: 10px;">返回</el-button>
<!-- <el-button type="primary" icon="el-icon-position" style="background-color: #018ad2; margin-right: 10px;">导出</el-button> -->
<el-button v-if="showbtn == 1" type="primary" @click="handleVerify(3)" icon="el-icon-circle-close" style="background-color: #d6432b;margin-right: 10px;">不通过</el-button>
<el-button v-if="showbtn == 1" type="primary" @click="handleVerify(2)" icon="el-icon-circle-check" style="background-color: #198e08;">通过</el-button>
</div>
<table style="font-size: 16px;">
<tr>
<td >法人证书：</td>
<td >{{orgInfo.orgCode}}</td>
<td >单位全称：</td>
<td >{{orgInfo.name}}<span>点击验证企业</span></td>
</tr>
<tr>
<td >法定代表人姓名：</td>
<td >{{orgInfo.contactMan}}</td>
<td >单位类别：</td>
<td >{{orgInfo.dwType}}</td>
</tr>
<tr>
<td>电话：</td>
<td>{{orgInfo.contactMobile}}</td>
<td>单位地理位置：</td>
<td>{{orgInfo.gisInfo}}</td>
</tr>
<tr>
<td>所在区域：</td>
<td>{{orgInfo.region}}</td>
<td>单位级别：</td>
<td>{{orgInfo.dwjb}}</td>
</tr>
<tr>
<td>单位通讯地址：</td>
<td colspan="3">
{{orgInfo.postAddress}}
</td>
</tr>
<tr>
<td>单位注册地址：</td>
<td colspan="3">{{orgInfo.orgAddress}}</td>
</tr>
<tr>
<td>单位营业执照副本复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
</table>
<div class="zcxx" style="margin-top: 20px;">
<p>被委托人信息</p>
</div>
<table class="bwtr" style="font-size: 16px;">
<tr>
<td>身份证号：</td>
<td>{{orgInfo.idNo}}</td>
<td>姓名：</td>
<td>{{orgInfo.name}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{orgInfo.userName}}</td>
<td>手机号码：</td>
<td>{{orgInfo.mobile}}</td>
</tr>
<tr>
<td>单位管理员头像：</td>
<td>
<eimage :url="orgInfo.photoPath"></eimage>
</td>
<td>授权书复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
<tr>
<td>身份证正面复印件：</td>
<td>
<eimage :url="orgInfo.idFrontPhoto"></eimage>
</td>
<td>身份证反面复印件：</td>
<td>
<eimage :url="orgInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<remarks :dialogBack.sync="dialogBack" @verifyBack="verifyBack"></remarks>
</div>
</template>
<script>
import organization from '@/api/system/organization/organization.js'
import AreaPicker from '@/components/AreaPicker/index.vue'
import remarks from './remarks/index.vue'
export default {
components:{AreaPicker, remarks},
data() {
return {
imageUrl: '',
dialogVisible: false,
disabled: false,
dialogBack: false,
showbtn: true,
organizationSid: '',// 单位SID
page: {
total: 10, // 默认数据总数
current: 1, // 默认开始页面
params: {
city: '',
county: '',
name: '',
province: '',
state: 0,
},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [],
orgInfo:{
"attorney": "",
"businessLicense": "",
"contactMan": "",
"contactMobile": "",
"dwType": "",
"gisInfo": "",
"idBackPhoto": "",
"idFrontPhoto": "",
"orgCode": "",
"organizationName": "",
"photoPath": "",
"postAddress": "",
"region": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
orgBackup: Object.assign({}, this.orgInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data){ // 获取审核列表
organization.verifyList(data).then(res => {
console.log(res)
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){
this.page = {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: {
city: '',
county: '',
name: '',
province: '',
state: 0,
},
size: 10, // 每页的数据条数
}
this.getverifyList(this.page)
},
areaPicker(val){//省市区值
let arr = val.split('/')
this.page.params.province = arr[1] || ""
this.page.params.city = arr[2] || ""
this.page.params.county = arr[3] || ""
},
orgRegister(row){ // 获取审核详情
this.dialogVisible = true
this.organizationSid = row.sid
this.showbtn = row.state
this.orgInfo = Object.assign({}, this.orgBackup)
let params = {
organizationSid: row.sid
}
organization.orgRegisterDetails(params).then(res => {
console.log(res)
this.orgInfo = res.data
})
},
verify(state){ // 审核
let params ={
state: state+'',
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
console.log(res)
this.dialogVisible = false
this.$message({
type: 'success',
message: res.msg
});
this.getverifyList(this.page)
})
},
// 审核通过
handleVerify(state){
if(state == 2){
let params ={ // 请求的参数
state: state,
remarks:'',
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogVisible = false
})
}else{
this.dialogBack = true
}
},
// 审核不通过
verifyBack(remarks){
let params ={ // 请求的参数
state: 3,
remarks:remarks,
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogBack = false
this.dialogVisible = false
})
},
handledelete(row) {
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
organization.del({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
<style lang="scss">
.company .el-image .el-image__inner--center{
height: 150px !important;
}
</style>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
}
td:nth-child(2) {
padding-left: 30px;
}
td:nth-child(3) {
text-align: right;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" :model="page.params" >
<el-form-item label="区域" label-width="50px">
<AreaPicker @areaPicker="areaPicker"
:province="page.params.province"
:city="page.params.city"
:county="page.params.county"></AreaPicker>
</el-form-item>
<el-form-item label="单位名称" label-width="80px">
<el-input v-model="page.params.name" clearable></el-input>
</el-form-item>
<!-- <el-form-item label="状态" label-width="50px">
<el-select v-model="page.params.state" placeholder="请选择状态">
<el-option label="全部" :value="0">
</el-option>
<el-option label="未审核" :value="1">
</el-option>
<el-option label="已审核" :value="2">
</el-option>
</el-select>
</el-form-item> -->
</el-form>
</div>
<div slot="btn">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button @click="orgRegister(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"查看"}}
</el-button>
<el-button @click="handledelete(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="orgCode" label="单位代码" align="center">
</el-table-column>
<el-table-column label="单位名称" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="orgRegister(scope.row)">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="所在区域" align="center">
<el-table-column prop="province" label="省" align="center">
</el-table-column>
<el-table-column prop="city" label="市" align="center">
</el-table-column>
<el-table-column prop="county" label="区/县" align="center">
</el-table-column>
</el-table-column>
<el-table-column prop="contactMan" label="负责人" align="center">
</el-table-column>
<el-table-column prop="contactMobile" label="手机号码" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 审核窗口 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" class="company" style="margin-top: -10vh;">
<div class="zcxx" >
<p>审核单位注册信息</p>
<el-button v-if="showbtn == 1" type="primary" @click="dialogVisible = false" icon="el-icon-back" style="background-color: #0272c8; margin-right: 10px;">返回</el-button>
<!-- <el-button type="primary" icon="el-icon-position" style="background-color: #018ad2; margin-right: 10px;">导出</el-button> -->
<el-button v-if="showbtn == 1" type="primary" @click="handleVerify(3)" icon="el-icon-circle-close" style="background-color: #d6432b;margin-right: 10px;">不通过</el-button>
<el-button v-if="showbtn == 1" type="primary" @click="handleVerify(2)" icon="el-icon-circle-check" style="background-color: #198e08;">通过</el-button>
</div>
<table style="font-size: 16px;">
<tr>
<td >法人证书：</td>
<td >{{orgInfo.orgCode}}</td>
<td >单位全称：</td>
<td >{{orgInfo.name}}<span>点击验证企业</span></td>
</tr>
<tr>
<td >法定代表人姓名：</td>
<td >{{orgInfo.contactMan}}</td>
<td >单位类别：</td>
<td >{{orgInfo.dwType}}</td>
</tr>
<tr>
<td>电话：</td>
<td>{{orgInfo.contactMobile}}</td>
<td>单位地理位置：</td>
<td>{{orgInfo.gisInfo}}</td>
</tr>
<tr>
<td>所在区域：</td>
<td>{{orgInfo.region}}</td>
<td>单位级别：</td>
<td>{{orgInfo.dwjb}}</td>
</tr>
<tr>
<td>单位通讯地址：</td>
<td colspan="3">
{{orgInfo.postAddress}}
</td>
</tr>
<tr>
<td>单位注册地址：</td>
<td colspan="3">{{orgInfo.orgAddress}}</td>
</tr>
<tr>
<td>单位营业执照副本复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
</table>
<div class="zcxx" style="margin-top: 20px;">
<p>被委托人信息</p>
</div>
<table class="bwtr" style="font-size: 16px;">
<tr>
<td>身份证号：</td>
<td>{{orgInfo.idNo}}</td>
<td>姓名：</td>
<td>{{orgInfo.name}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{orgInfo.userName}}</td>
<td>手机号码：</td>
<td>{{orgInfo.mobile}}</td>
</tr>
<tr>
<td>单位管理员头像：</td>
<td>
<eimage :url="orgInfo.photoPath"></eimage>
</td>
<td>授权书复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
<tr>
<td>身份证正面复印件：</td>
<td>
<eimage :url="orgInfo.idFrontPhoto"></eimage>
</td>
<td>身份证反面复印件：</td>
<td>
<eimage :url="orgInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<remarks :dialogBack.sync="dialogBack" @verifyBack="verifyBack"></remarks>
</div>
</template>
<script>
import organization from '@/api/system/organization/organization.js'
import AreaPicker from '@/components/AreaPicker/index.vue'
import remarks from './remarks/index.vue'
export default {
components:{AreaPicker, remarks},
data() {
return {
imageUrl: '',
dialogVisible: false,
disabled: false,
dialogBack: false,
showbtn: true,
organizationSid: '',// 单位SID
page: {
total: 10, // 默认数据总数
current: 1, // 默认开始页面
params: {
city: '',
county: '',
name: '',
province: '',
state: 0,
},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [],
orgInfo:{
"attorney": "",
"businessLicense": "",
"contactMan": "",
"contactMobile": "",
"dwType": "",
"gisInfo": "",
"idBackPhoto": "",
"idFrontPhoto": "",
"orgCode": "",
"organizationName": "",
"photoPath": "",
"postAddress": "",
"region": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
orgBackup: Object.assign({}, this.orgInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data){ // 获取审核列表
organization.verifyList(data).then(res => {
console.log(res)
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){
this.page = {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: {
city: '',
county: '',
name: '',
province: '',
state: 0,
},
size: 10, // 每页的数据条数
}
this.getverifyList(this.page)
},
areaPicker(val){//省市区值
let arr = val.split('/')
this.page.params.province = arr[1] || ""
this.page.params.city = arr[2] || ""
this.page.params.county = arr[3] || ""
},
orgRegister(row){ // 获取审核详情
this.dialogVisible = true
this.organizationSid = row.sid
this.showbtn = row.state
this.orgInfo = Object.assign({}, this.orgBackup)
let params = {
organizationSid: row.sid
}
organization.orgRegisterDetails(params).then(res => {
console.log(res)
this.orgInfo = res.data
})
},
verify(state){ // 审核
let params ={
state: state+'',
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
console.log(res)
this.dialogVisible = false
this.$message({
type: 'success',
message: res.msg
});
this.getverifyList(this.page)
})
},
// 审核通过
handleVerify(state){
if(state == 2){
let params ={ // 请求的参数
state: state,
remarks:'',
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogVisible = false
})
}else{
this.dialogBack = true
}
},
// 审核不通过
verifyBack(remarks){
let params ={ // 请求的参数
state: 3,
remarks:remarks,
organizationSid: this.organizationSid
}
organization.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogBack = false
this.dialogVisible = false
})
},
handledelete(row) {
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
organization.del({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
<style lang="scss">
.company .el-image .el-image__inner--center{
height: 150px !important;
}
</style>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
}
td:nth-child(2) {
padding-left: 30px;
}
td:nth-child(3) {
text-align: right;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>

614
demo-web-ui/src/views/system-admin/check/people.vue
View File

@@ -1,307 +1,307 @@
<!-- 个人注册 -->
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="page.params.userName" clearable></el-input>
</el-form-item>
</el-form>
</div>
<div slot="btn">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button @click="userRegister(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"已审核"}}
</el-button>
<el-button @click.stop="Rowdelete(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="createTime" label="注册日期" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 审核 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" style="margin-top: -10vh;">
<div class="zcxx" v-if="showbtn == 1">
<p>审核注册个人信息</p>
<el-button type="primary" @click="dialogVisible=false" icon="el-icon-back" style="background-color: #0272c8;margin-right: 10px;">返回</el-button>
<el-button type="primary" @click="handleVerify(3)" icon="el-icon-circle-close" style="background-color: #d6432b; margin-right: 10px;">不通过</el-button>
<el-button type="primary" @click="handleVerify(2)" icon="el-icon-circle-check" style="background-color: #198e08;">通过</el-button>
</div>
<table style="font-size: 18px;">
<tr>
<td>真实姓名：</td>
<td>{{userInfo.name }}</td>
<td>身份证号：</td>
<td>{{userInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{userInfo.userName}}</td>
<td>手机号：</td>
<td>{{userInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :url="userInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :url="userInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<remarks :dialogBack.sync="dialogBack" @verifyBack="verifyBack"></remarks>
</div>
</template>
<script>
import remarks from './remarks/index.vue'
import user from '@/api/system/user/user1.js'
export default {
components:{remarks},
data() {
return {
dialogVisible: false,
showbtn: true,
dialogBack: false,
page: {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: { // 查询的参数
state: '',
userName: '',
state: 1
},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [], // tabel 数据
userInfo:{ // 审核的表单字段
"idBackPhoto": "",
"idFrontPhoto": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
userBackup: Object.assign({}, this.userInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data){ // 获取列表
user.verifyList(data).then(res => {
console.log(res)
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){
this.page = {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: { // 查询的参数
state: '',
userName: '',
state: 1
},
size: 10, // 每页的数据条数
}
this.getverifyList(this.page)
},
userRegister(row){ // 获取审核表单内容
console.log(row.userName)
this.dialogVisible = true
this.showbtn = row.state
this.userInfo = Object.assign({}, this.userBackup)
let params = { // 请求的参数
userName: row.userName
}
user.userRegisterDetails(params).then(res => {
console.log(res)
this.userInfo = res.data
})
},
verify(state){ // 审核的通过不通过
},
// 审核通过
handleVerify(state){
if(state == 2){
let params ={ // 请求的参数
state: state,
remarks:'',
userName: this.userInfo.userName,
}
user.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogVisible = false
})
}else{
this.dialogBack = true
}
},
// 审核不通过
verifyBack(remarks){
let params ={ // 请求的参数
state: 3,
remarks:remarks,
userName: this.userInfo.userName,
}
user.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogBack = false
this.dialogVisible = false
})
},
Rowdelete(row) { // 删除当前行
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
user.userNameDelete({userName: row.userName}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
}
</script>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>
<!-- 个人注册 -->
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="page.params.userName" clearable></el-input>
</el-form-item>
</el-form>
</div>
<div slot="btn">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button @click="userRegister(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"已审核"}}
</el-button>
<el-button @click.stop="Rowdelete(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="createTime" label="注册日期" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 审核 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" style="margin-top: -10vh;">
<div class="zcxx" v-if="showbtn == 1">
<p>审核注册个人信息</p>
<el-button type="primary" @click="dialogVisible=false" icon="el-icon-back" style="background-color: #0272c8;margin-right: 10px;">返回</el-button>
<el-button type="primary" @click="handleVerify(3)" icon="el-icon-circle-close" style="background-color: #d6432b; margin-right: 10px;">不通过</el-button>
<el-button type="primary" @click="handleVerify(2)" icon="el-icon-circle-check" style="background-color: #198e08;">通过</el-button>
</div>
<table style="font-size: 18px;">
<tr>
<td>真实姓名：</td>
<td>{{userInfo.name }}</td>
<td>身份证号：</td>
<td>{{userInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{userInfo.userName}}</td>
<td>手机号：</td>
<td>{{userInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :url="userInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :url="userInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<remarks :dialogBack.sync="dialogBack" @verifyBack="verifyBack"></remarks>
</div>
</template>
<script>
import remarks from './remarks/index.vue'
import user from '@/api/system/user/user1.js'
export default {
components:{remarks},
data() {
return {
dialogVisible: false,
showbtn: true,
dialogBack: false,
page: {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: { // 查询的参数
state: '',
userName: '',
state: 1
},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [], // tabel 数据
userInfo:{ // 审核的表单字段
"idBackPhoto": "",
"idFrontPhoto": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
userBackup: Object.assign({}, this.userInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data){ // 获取列表
user.verifyList(data).then(res => {
console.log(res)
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){
this.page = {
total: 20, // 默认数据总数
current: 1, // 默认开始页面
params: { // 查询的参数
state: '',
userName: '',
state: 1
},
size: 10, // 每页的数据条数
}
this.getverifyList(this.page)
},
userRegister(row){ // 获取审核表单内容
console.log(row.userName)
this.dialogVisible = true
this.showbtn = row.state
this.userInfo = Object.assign({}, this.userBackup)
let params = { // 请求的参数
userName: row.userName
}
user.userRegisterDetails(params).then(res => {
console.log(res)
this.userInfo = res.data
})
},
verify(state){ // 审核的通过不通过
},
// 审核通过
handleVerify(state){
if(state == 2){
let params ={ // 请求的参数
state: state,
remarks:'',
userName: this.userInfo.userName,
}
user.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogVisible = false
})
}else{
this.dialogBack = true
}
},
// 审核不通过
verifyBack(remarks){
let params ={ // 请求的参数
state: 3,
remarks:remarks,
userName: this.userInfo.userName,
}
user.verify(params).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
this.dialogBack = false
this.dialogVisible = false
})
},
Rowdelete(row) { // 删除当前行
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
user.userNameDelete({userName: row.userName}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
}
</script>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>

754
demo-web-ui/src/views/system-admin/check/personnel.vue
View File

@@ -1,377 +1,377 @@
<!-- 人员绑定 -->
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" label-width="40px">
<el-form-item label="姓名">
<el-input v-model="page.params.userName" clearable></el-input>
</el-form-item>
<el-button @click="onSearch()">查询</el-button>
<!-- <el-button @click="resetSearch()">重置</el-button> -->
</el-form>
</div>
<div slot="btn">
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="190" align="center">
<template slot-scope="scope">
<el-button @click="Register(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"已通过"}}
</el-button>
</template>
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />
<!-- 审核 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" style="margin-top: -10vh;">
<div class="zcxx" v-if="showbtn == 1">
<p>审核单位人员信息</p>
<el-button type="primary" @click="dialogVisible=false" icon="el-icon-back" style="background-color: #0272c8;margin-right: 10px;">返回</el-button>
<el-button type="primary" @click="verify(3)" icon="el-icon-circle-close" style="background-color: #d6432b; margin-right: 10px;">
不通过
</el-button>
<el-button type="primary" @click="setinnerVisible" icon="el-icon-circle-check" style="background-color: #198e08;">
通过
</el-button>
</div>
<table style="font-size: 16px;">
<tr>
<td>真实姓名：</td>
<td>{{verifyInfo.name }}</td>
<td>身份证号：</td>
<td>{{verifyInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{verifyInfo.userName}}</td>
<td>手机号：</td>
<td>{{verifyInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :url="verifyInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :url="verifyInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
<el-dialog
width="30%"
title="绑定部门"
:visible.sync="innerVisible"
append-to-body>
<div class="block">
<label class="demonstration">请选择部门: </label>
<el-cascader
v-model="departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="setDepartment(0)">保存</el-button>
<el-button @click="innerVisible = false">返回</el-button>
</span>
</el-dialog>
</el-dialog>
<el-dialog
width="30%"
title="绑定部门"
:visible.sync="bmdialog"
append-to-body>
<div class="block">
<label class="demonstration">请选择部门: </label>
<el-cascader
v-model="departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="setDepartment(1)">保存</el-button>
<el-button @click="bmdialog = false">返回</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import staffOrg from '@/api/jlcyry/staffOrg/staffOrg.js'
import departments from '@/api/system/departments/departments.js'
import { getOrgTree } from '@/api/system/departments/departments.js'
export default {
data() {
return {
props: {
value: "sid",
label: "name",
children: "orgDepartmentVoList"
},
departmentSid: '',
dialogVisible: false,
dialogFormVisible: false,
innerVisible: false,
bmdialog: false,
showbtn: true,
departmentTree: [],
department: '',
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
params: {},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [],
treedata: null,
verifyInfo: { // 审核的表单字段
"idBackPhoto": "",
"idFrontPhoto": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
verifyBackup: Object.assign({}, this.verifyInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data) { // 获取table列表
staffOrg.staffBingingList(data).then(res => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch() { // 查询重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
params: {},
size: 10, // 每页的数据条数
},
this.getverifyList(this.page)
},
// 获取审核 表单内容
Register(row) {
this.dialogVisible = true
this.showbtn = row.state
this.verifyInfo = Object.assign({}, this.verifyBackup)
let params = { // 请求的参数
userName: row.userName
}
staffOrg.staffOrgBingingDetails(params).then(res => {
console.log(res)
this.verifyInfo = res.data
this.verifyInfo.orgSid = row.orgSid
this.verifyInfo.staffSid = row.staffSid
})
},
verify(state) { // 审核 —— 通过 ，不通过
let params = { // 请求的参数
organizationSid: this.verifyInfo.orgSid,
staffSid: this.verifyInfo.staffSid,
state: state,
}
staffOrg.verify(params).then(res => {
console.log(res)
this.$message({
type: 'success',
message: res.msg
});
this.getverifyList(this.page)
this.dialogVisible = false
this.dialogFormVisible = false
})
},
setDepartment(state){
console.log(this.departmentSid)
let params = { // 请求的参数
departmentSid: this.departmentSid[this.departmentSid.length-1],
staffSid: this.verifyInfo.staffSid,
}
staffOrg.setUpDepartment(params).then(res => {
this.innerVisible = false
this.bmdialog = false
this.$message({
type: 'success',
message: res.msg
});
if(state == 0){
this.verify(2)
}
})
},
setinnerVisible(){
this.innerVisible = true
this.getOrgTree()
},
setbmdialog(){
this.bmdialog = true
this.getOrgTree()
},
getOrgTree(){ // 获取部门树形列表
function treeArr(data){
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if(data[i].orgDepartmentVoList.length > 0){
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
let tree = res.data[0].orgDepartmentVoList
treeArr(tree)
this.treedata = tree
})
},
delete(row) { // 删除当前行
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
user.delete().then(res => {
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
toNav(src){
this.$router.push("/"+src);
}
}
}
</script>
<style lang="scss" scoped="scoped">
.el-image {
width: 180px;
height: 150px;
}
.el-image__preview {
object-fit: none !important;
}
.demonstration{
padding-right: 10px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>
<!-- 人员绑定 -->
<template>
<div class="container">
<!-- 查询 -->
<tab-search>
<div slot="from">
<el-form ref="form" :inline="true" label-width="40px">
<el-form-item label="姓名">
<el-input v-model="page.params.userName" clearable></el-input>
</el-form-item>
<el-button @click="onSearch()">查询</el-button>
<!-- <el-button @click="resetSearch()">重置</el-button> -->
</el-form>
</div>
<div slot="btn">
</div>
</tab-search>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="id" label="序号" width="60" align="center">
<template slot-scope="scope">
{{(scope.$index+1)+(page.current-1)*page.size}}
</template>
</el-table-column>
<el-table-column label="操作" width="190" align="center">
<template slot-scope="scope">
<el-button @click="Register(scope.row)" type="primary" size="mini">
{{scope.row.state == 1 ? "审核":"已通过"}}
</el-button>
</template>
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center">
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />
<!-- 审核 -->
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="70%" style="margin-top: -10vh;">
<div class="zcxx" v-if="showbtn == 1">
<p>审核单位人员信息</p>
<el-button type="primary" @click="dialogVisible=false" icon="el-icon-back" style="background-color: #0272c8;margin-right: 10px;">返回</el-button>
<el-button type="primary" @click="verify(3)" icon="el-icon-circle-close" style="background-color: #d6432b; margin-right: 10px;">
不通过
</el-button>
<el-button type="primary" @click="setinnerVisible" icon="el-icon-circle-check" style="background-color: #198e08;">
通过
</el-button>
</div>
<table style="font-size: 16px;">
<tr>
<td>真实姓名：</td>
<td>{{verifyInfo.name }}</td>
<td>身份证号：</td>
<td>{{verifyInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{verifyInfo.userName}}</td>
<td>手机号：</td>
<td>{{verifyInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :url="verifyInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :url="verifyInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
<el-dialog
width="30%"
title="绑定部门"
:visible.sync="innerVisible"
append-to-body>
<div class="block">
<label class="demonstration">请选择部门: </label>
<el-cascader
v-model="departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="setDepartment(0)">保存</el-button>
<el-button @click="innerVisible = false">返回</el-button>
</span>
</el-dialog>
</el-dialog>
<el-dialog
width="30%"
title="绑定部门"
:visible.sync="bmdialog"
append-to-body>
<div class="block">
<label class="demonstration">请选择部门: </label>
<el-cascader
v-model="departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="setDepartment(1)">保存</el-button>
<el-button @click="bmdialog = false">返回</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import staffOrg from '@/api/jlcyry/staffOrg/staffOrg.js'
import departments from '@/api/system/departments/departments.js'
import { getOrgTree } from '@/api/system/departments/departments.js'
export default {
data() {
return {
props: {
value: "sid",
label: "name",
children: "orgDepartmentVoList"
},
departmentSid: '',
dialogVisible: false,
dialogFormVisible: false,
innerVisible: false,
bmdialog: false,
showbtn: true,
departmentTree: [],
department: '',
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
params: {},
size: 10, // 每页的数据条数
},
pageBackup: Object.assign({}, this.page),
tableData: [],
treedata: null,
verifyInfo: { // 审核的表单字段
"idBackPhoto": "",
"idFrontPhoto": "",
"idNo": "",
"mobile": "",
"name": "",
"userName": ""
},
verifyBackup: Object.assign({}, this.verifyInfo),
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
getverifyList(data) { // 获取table列表
staffOrg.staffBingingList(data).then(res => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch() { // 查询重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
params: {},
size: 10, // 每页的数据条数
},
this.getverifyList(this.page)
},
// 获取审核 表单内容
Register(row) {
this.dialogVisible = true
this.showbtn = row.state
this.verifyInfo = Object.assign({}, this.verifyBackup)
let params = { // 请求的参数
userName: row.userName
}
staffOrg.staffOrgBingingDetails(params).then(res => {
console.log(res)
this.verifyInfo = res.data
this.verifyInfo.orgSid = row.orgSid
this.verifyInfo.staffSid = row.staffSid
})
},
verify(state) { // 审核 —— 通过 ，不通过
let params = { // 请求的参数
organizationSid: this.verifyInfo.orgSid,
staffSid: this.verifyInfo.staffSid,
state: state,
}
staffOrg.verify(params).then(res => {
console.log(res)
this.$message({
type: 'success',
message: res.msg
});
this.getverifyList(this.page)
this.dialogVisible = false
this.dialogFormVisible = false
})
},
setDepartment(state){
console.log(this.departmentSid)
let params = { // 请求的参数
departmentSid: this.departmentSid[this.departmentSid.length-1],
staffSid: this.verifyInfo.staffSid,
}
staffOrg.setUpDepartment(params).then(res => {
this.innerVisible = false
this.bmdialog = false
this.$message({
type: 'success',
message: res.msg
});
if(state == 0){
this.verify(2)
}
})
},
setinnerVisible(){
this.innerVisible = true
this.getOrgTree()
},
setbmdialog(){
this.bmdialog = true
this.getOrgTree()
},
getOrgTree(){ // 获取部门树形列表
function treeArr(data){
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if(data[i].orgDepartmentVoList.length > 0){
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
let tree = res.data[0].orgDepartmentVoList
treeArr(tree)
this.treedata = tree
})
},
delete(row) { // 删除当前行
this.$confirm('确认要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
user.delete().then(res => {
this.$message({
type: 'success',
message: '删除成功!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
toNav(src){
this.$router.push("/"+src);
}
}
}
</script>
<style lang="scss" scoped="scoped">
.el-image {
width: 180px;
height: 150px;
}
.el-image__preview {
object-fit: none !important;
}
.demonstration{
padding-right: 10px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 18px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
width: 20%;
}
td:nth-child(2) {
padding-left: 30px;
width: 23%;
}
td:nth-child(3) {
text-align: right;
width: 20%;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>

116
demo-web-ui/src/views/system-admin/check/remarks/index.vue
View File

@@ -1,58 +1,58 @@
<template>
<el-dialog title="退回原因" :visible.sync="dialogBack" :before-close="handleClose" append-to-body>
<el-form :model="formBack" :rules="rules" ref="formBack">
<el-form-item label="" prop="remarks">
<el-input type="textarea" :rows="4" v-model="formBack.remarks" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('formBack')">退 回</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
dialogBack: Boolean,
},
data() {
return {
formBack: {
remarks: ''
},
rules: {
name: [{
required: true,
message: '请输入',
trigger: 'blur'
}]
}
};
},
methods: {
// 关闭弹匡事件
handleClose(done) {
this.$emit('update:dialogBack', false)
this.$nextTick(() => {
done()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.formBack.remarks)
this.$emit('verifyBack', this.formBack.remarks)
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
<style>
</style>
<template>
<el-dialog title="退回原因" :visible.sync="dialogBack" :before-close="handleClose" append-to-body>
<el-form :model="formBack" :rules="rules" ref="formBack">
<el-form-item label="" prop="remarks">
<el-input type="textarea" :rows="4" v-model="formBack.remarks" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('formBack')">退 回</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
dialogBack: Boolean,
},
data() {
return {
formBack: {
remarks: ''
},
rules: {
name: [{
required: true,
message: '请输入',
trigger: 'blur'
}]
}
};
},
methods: {
// 关闭弹匡事件
handleClose(done) {
this.$emit('update:dialogBack', false)
this.$nextTick(() => {
done()
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.formBack.remarks)
this.$emit('verifyBack', this.formBack.remarks)
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
<style>
</style>

302
demo-web-ui/src/views/system-admin/components/orgInfo.vue
View File

@@ -1,151 +1,151 @@
<template>
<div class="orginfo">
<div class="zcxx">
<p>审核单位注册信息</p>
</div>
<table style="font-size: 16px;">
<tr>
<td>法人证书：</td>
<td>{{orgInfo.orgCode}}</td>
<td>单位全称：</td>
<td>{{orgInfo.name}}<span>点击验证企业</span></td>
</tr>
<tr>
<td>法定代表人姓名：</td>
<td>{{orgInfo.contactMan}}</td>
<td>单位类别：</td>
<td>{{orgInfo.dwType}}</td>
</tr>
<tr>
<td>电话：</td>
<td>{{orgInfo.contactMobile}}</td>
<td>单位地理位置：</td>
<td>{{orgInfo.gisInfo}}</td>
</tr>
<tr>
<td>所在区域：</td>
<td>{{orgInfo.region}}</td>
<td>单位级别：</td>
<td>{{orgInfo.dwjb}}</td>
</tr>
<tr>
<td>单位通讯地址：</td>
<td colspan="3">
{{orgInfo.postAddress}}
</td>
</tr>
<tr>
<td>单位注册地址：</td>
<td colspan="3">{{orgInfo.orgAddress}}</td>
</tr>
<tr>
<td>单位营业执照副本复印件：</td>
<td>
<eimage :url="orgInfo.grantPhoto"></eimage>
</td>
</tr>
</table>
<div class="zcxx" style="margin-top: 20px;">
<p>被委托人信息</p>
</div>
<table class="bwtr" style="font-size: 16px;">
<tr>
<td>身份证号：</td>
<td>{{orgInfo.idNo}}</td>
<td>姓名：</td>
<td>{{orgInfo.name}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{orgInfo.userName}}</td>
<td>手机号码：</td>
<td>{{orgInfo.mobile}}</td>
</tr>
<tr>
<td>单位管理员头像：</td>
<td>
<eimage :url="orgInfo.photoPath"></eimage>
</td>
<td>授权书复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
<tr>
<td>身份证正面复印件：</td>
<td>
<eimage :url="orgInfo.idBackPhoto"></eimage>
</td>
<td>身份证反面复印件：</td>
<td>
<eimage :url="orgInfo.idFrontPhoto"></eimage>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props: {
orgInfo: {
type: Object,
default () {
return {}
}
}
}
}
</script>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 100%;
margin: 0 20px;
td {
padding: 5px 0;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
}
</style>
<template>
<div class="orginfo">
<div class="zcxx">
<p>审核单位注册信息</p>
</div>
<table style="font-size: 16px;">
<tr>
<td>法人证书：</td>
<td>{{orgInfo.orgCode}}</td>
<td>单位全称：</td>
<td>{{orgInfo.name}}<span>点击验证企业</span></td>
</tr>
<tr>
<td>法定代表人姓名：</td>
<td>{{orgInfo.contactMan}}</td>
<td>单位类别：</td>
<td>{{orgInfo.dwType}}</td>
</tr>
<tr>
<td>电话：</td>
<td>{{orgInfo.contactMobile}}</td>
<td>单位地理位置：</td>
<td>{{orgInfo.gisInfo}}</td>
</tr>
<tr>
<td>所在区域：</td>
<td>{{orgInfo.region}}</td>
<td>单位级别：</td>
<td>{{orgInfo.dwjb}}</td>
</tr>
<tr>
<td>单位通讯地址：</td>
<td colspan="3">
{{orgInfo.postAddress}}
</td>
</tr>
<tr>
<td>单位注册地址：</td>
<td colspan="3">{{orgInfo.orgAddress}}</td>
</tr>
<tr>
<td>单位营业执照副本复印件：</td>
<td>
<eimage :url="orgInfo.grantPhoto"></eimage>
</td>
</tr>
</table>
<div class="zcxx" style="margin-top: 20px;">
<p>被委托人信息</p>
</div>
<table class="bwtr" style="font-size: 16px;">
<tr>
<td>身份证号：</td>
<td>{{orgInfo.idNo}}</td>
<td>姓名：</td>
<td>{{orgInfo.name}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{orgInfo.userName}}</td>
<td>手机号码：</td>
<td>{{orgInfo.mobile}}</td>
</tr>
<tr>
<td>单位管理员头像：</td>
<td>
<eimage :url="orgInfo.photoPath"></eimage>
</td>
<td>授权书复印件：</td>
<td>
<eimage :url="orgInfo.businessLicense"></eimage>
</td>
</tr>
<tr>
<td>身份证正面复印件：</td>
<td>
<eimage :url="orgInfo.idBackPhoto"></eimage>
</td>
<td>身份证反面复印件：</td>
<td>
<eimage :url="orgInfo.idFrontPhoto"></eimage>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props: {
orgInfo: {
type: Object,
default () {
return {}
}
}
}
}
</script>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 100%;
margin: 0 20px;
td {
padding: 5px 0;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
}
</style>

70
demo-web-ui/src/views/system-admin/components/userInfo.vue
View File

@@ -1,35 +1,35 @@
<template>
<div class="zcxx">
<p>审核注册个人信息</p>
</div>
<table style="font-size: 18px;">
<tr>
<td>真实姓名：</td>
<td>{{userInfo.name }}</td>
<td>身份证号：</td>
<td>{{userInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{userInfo.userName}}</td>
<td>手机号：</td>
<td>{{userInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :src="userInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :src="userInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</template>
<script>
</script>
<style>
</style>
<template>
<div class="zcxx">
<p>审核注册个人信息</p>
</div>
<table style="font-size: 18px;">
<tr>
<td>真实姓名：</td>
<td>{{userInfo.name }}</td>
<td>身份证号：</td>
<td>{{userInfo.idNo}}</td>
</tr>
<tr>
<td>用户名：</td>
<td>{{userInfo.userName}}</td>
<td>手机号：</td>
<td>{{userInfo.mobile}}</td>
</tr>
<tr style="vertical-align: middle;">
<td>身份证正面照片：</td>
<td>
<eimage :src="userInfo.idFrontPhoto"></eimage>
</td>
<td>身份证背面照片：</td>
<td>
<eimage :src="userInfo.idBackPhoto"></eimage>
</td>
</tr>
</table>
</template>
<script>
</script>
<style>
</style>

360
demo-web-ui/src/views/system-admin/dictCommon.vue
View File

@@ -1,180 +1,180 @@
<template>
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="数据value">
<el-input v-model="page.params.dictValue" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查 询</el-button>
<el-button @click="add()">添 加</el-button>
<el-button @click="$router.go(-1)">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictType" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="dictKey" label="数据key" align="center">
</el-table-column>
<el-table-column prop="dictValue" label="数据value" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典分类'" :visible.sync="editDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>字典分类编码</td>
<td>
{{form.dictType}}
</td>
</tr>
<tr>
<td>数据key</td>
<td>
<el-input v-model="form.dictKey"></el-input>
</td>
</tr>
<tr>
<td>数据value</td>
<td>
<el-input v-model="form.dictValue"></el-input>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { dictCommonList, savedictCommon, putdictCommon, deldictCommon } from '@/api/system/dictType/dictCommon.js'
export default {
data() {
return {
editDialog: false,
dialogTitle: '',
form: {
dictKey: '',
dictType: '',
dictValue: '',
parentSid: ''
},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params:{
dictKey: '',
dictType: '',
dictValue: '',
parentSid: '',
sidPath: '',
}
},
tableData: []
}
},
mounted() {
this.page.params.dictType = this.$route.params.dictType
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.getPageList(this.page)
},
getPageList(data){ // 获取列表
dictCommonList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(){
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
this.form.dictType = this.$route.params.dictType
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save(){
this.form.parentSid = this.$route.params.sid
if(this.form.sid){
putdictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}else{
savedictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deldictCommon({sid: row.sid}).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
},
}
</script>
<style lang="scss">
</style>
<template>
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="数据value">
<el-input v-model="page.params.dictValue" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch()">查 询</el-button>
<el-button @click="add()">添 加</el-button>
<el-button @click="$router.go(-1)">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="dictType" label="字典分类编码" align="center">
</el-table-column>
<el-table-column prop="dictKey" label="数据key" align="center">
</el-table-column>
<el-table-column prop="dictValue" label="数据value" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 分类编辑 -->
<el-dialog :title="dialogTitle + '字典分类'" :visible.sync="editDialog" width="50%">
<table class="e-table" cellspacing="0">
<tr>
<td>字典分类编码</td>
<td>
{{form.dictType}}
</td>
</tr>
<tr>
<td>数据key</td>
<td>
<el-input v-model="form.dictKey"></el-input>
</td>
</tr>
<tr>
<td>数据value</td>
<td>
<el-input v-model="form.dictValue"></el-input>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { dictCommonList, savedictCommon, putdictCommon, deldictCommon } from '@/api/system/dictType/dictCommon.js'
export default {
data() {
return {
editDialog: false,
dialogTitle: '',
form: {
dictKey: '',
dictType: '',
dictValue: '',
parentSid: ''
},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params:{
dictKey: '',
dictType: '',
dictValue: '',
parentSid: '',
sidPath: '',
}
},
tableData: []
}
},
mounted() {
this.page.params.dictType = this.$route.params.dictType
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.getPageList(this.page)
},
getPageList(data){ // 获取列表
dictCommonList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(){
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
this.form.dictType = this.$route.params.dictType
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
save(){
this.form.parentSid = this.$route.params.sid
if(this.form.sid){
putdictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}else{
savedictCommon(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deldictCommon({sid: row.sid}).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
},
}
</script>
<style lang="scss">
</style>

894
demo-web-ui/src/views/system-admin/orgsetup/index.vue
View File

@@ -1,447 +1,447 @@
<template>
<div class="container" style="display: flex;">
<div class="org-tree">
<el-tree :data="treedata"
node-key="organizationSid"
:props="props"
default-expand-all
@node-click="handleNodeClick"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }"
@mouseenter="mouseenter(data)"
@mouseleave="mouseleave(data)"
@click.stop.native>
<span>{{ node.label || $store.getters.userInfo.Orgname }}</span>
<span v-show="data.del" class="handle">
<el-tooltip class="item" effect="dark" content="新增" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => append(data)" icon="el-icon-circle-plus-outline">
</el-button>
</el-tooltip>
<el-tooltip v-show="data.sid" class="item" effect="dark" content="修改" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => deit(data)" icon="el-icon-edit">
</el-button>
</el-tooltip>
<el-tooltip v-show="data.sid" class="item" effect="dark" content="删除" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => remove(data)" icon="el-icon-delete">
</el-button>
</el-tooltip>
</span>
</span>
</el-tree>
</div>
<el-dialog title="编辑节点" :visible.sync="dialogVisible" width="40%">
<el-form :model="nodeForm">
<el-form-item label="部门名称" label-width="120px">
<el-input v-model="nodeForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="排序号" label-width="120px">
<el-input v-model="nodeForm.sortNo" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="text-center">
<el-button type="primary" @click="nodeSave()">保 存</el-button>
<el-button @click="dialogVisible = false">返 回</el-button>
</div>
</el-dialog>
<div class="org-table" v-show="isshow == 'table'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="部门名称">
<el-input v-model="page.params.name" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table
:data="tableData"
default-expand-all
border style="width: 100%;">
<el-table-column label="序号" type="index" width="70px" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="200px">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
编辑
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="remove(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="部门名称" align="center">
</el-table-column>
<el-table-column prop="contactMan" label="联系人" align="center" width="100px">
</el-table-column>
<el-table-column prop="mobile" label="联系人手机号码" width="160px" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="sortNo" label="排序" align="center" width="50px">
</el-table-column>
<el-table-column prop="regdate" label="二维码" align="center" width="80px">
<template slot-scope="scope">
<el-button @click.native.prevent="lookRow(scope.row)" type="text" size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<div class="org-table" v-show="isshow == 'ewm'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;">部门二维码</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="Printewm">打 印</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ewm" style="display: flex;justify-content: center; align-items: center;" ref="print">
<img style="width: 200px; height: 200px;" :src="ewmForm.qrFilePath" alt="">
<ul style="list-style:none; line-height: 32px; font-size: 16px;">
<li><label for="">部门名称: </label><span>{{ewmForm.departmentName}}</span></li>
</ul>
</div>
</div>
<!-- 新增编辑 -->
<div class="org-table" v-show="isshow == 'edit'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;"> {{ dialogTitle }}部门信息</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ediut">
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item label="部门名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="部门地理位置" prop="dlxx">
<el-input v-model="form.dlxx" readonly>
<el-button slot="append" icon="el-icon-map-location" @click='mapDialog = true'></el-button>
</el-input>
</el-form-item>
<el-form-item label="部门地址" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="部门联系人" prop="contactMan">
<el-input v-model="form.contactMan"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="排序号" prop="sortNo">
<el-input v-model="form.sortNo"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<Position v-if="mapDialog" :address.sync="form.address" :maker-position.sync="form.dlxx"
:dialog-visible.sync="mapDialog"/>
</div>
</template>
<script>
import {
getOrgTree,
addOrgTree,
getPagelist,
putOrgtree,
postOrgtree,
delOrgtree,
getQrCode
} from '@/api/system/departments/departments.js'
import Position from '@/components/amap/amap.vue'
export default {
components: {Position},
data() {
return {
dialogVisible: false,
mapDialog: false,
dialogTitle: '',
props: {
label: "name",
children: "orgDepartmentVoList",
},
nodeForm: {
sid: '',
name: '',
sortNo: ''
},
ewmForm: {
qrFilePath: '',
organizationName: '',
departmentName: '',
address: ''
},
form: {
organizationSid: '',
psid: '',
address: '',
dlxx: ''
},
formBackup: Object.assign({}, this.form),
isshow: 'table',
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
name: '',
organizationSid: '',
psid: ''
}
},
tableData: [],
treedata: [],
rules: {
name: [
{required: true, message: '请输入', trigger: 'blur'},
],
dlxx: [
{required: true, message: '请输入', trigger: 'blur'},
],
address: [
{required: true, message: '请输入', trigger: 'blur'},
],
contactMan: [
{required: true, message: '请输入', trigger: 'blur'},
],
mobile: [
{required: true, message: '请输入', trigger: 'blur'},
],
sortNo: [
{required: true, message: '请输入', trigger: 'blur'},
]
}
}
},
mounted() {
this.getOrgTree()
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
handleNodeClick(data) {
this.isshow = 'table'
this.page.params.organizationSid = this.$store.getters.userInfo.orgSid
this.page.params.psid = data.sid || 0
// let params = {
// total: 0,
// current: 1,
// size: 10,
// params:{
// name: '',
// organizationSid: this.$store.getters.userInfo.orgSid,
// psid: data.sid || 0
// }
// }
this.getPageList(this.page)
},
getPageList(data) { // 获取树形列表
getPagelist(data).then(res => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
getOrgTree() { // 获取树形列表
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
this.treedata = res.data
})
},
save() {
this.form.organizationSid = this.$store.getters.userInfo.orgSid
console.log(this.form)
this.form.dlxx = typeof (this.form.dlxx) == 'string' ? this.form.dlxx : this.form.dlxx.join()
if (this.form.sid) {
putOrgtree(this.form).then(res => {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({sid: this.form.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
addOrgTree(this.form).then(res => {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({sid: this.form.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
append(data) {
console.log(data)
this.dialogTitle = '新增'
this.isshow = 'edit'
this.form = Object.assign({}, this.formBackup)
this.form.psid = data.sid || 0
this.form.organizationSid = this.$store.getters.userInfo.orgSid
this.form.address = data.orgAddress || data.address
this.form.dlxx = data.gisInfo || data.dlxx
},
editRow(row) {
this.dialogTitle = '编辑'
this.isshow = 'edit'
this.form = Object.assign({}, row)
// getRoleInfo({sid: row.sid}).then(res => {
// this.form = res.data
// // this.user = Object.assign({}, row
// })
},
deit(data) { // 节点编辑保存
console.log(data)
this.dialogVisible = true
this.nodeForm.sid = data.sid
this.nodeForm.name = data.name
this.nodeForm.sortNo = data.sortNo
},
nodeSave() { // 节点编辑保存
postOrgtree(this.nodeForm).then(res => {
this.getOrgTree()
this.dialogVisible = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
remove(data) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgtree({sid: data.sid}).then(res => {
this.getOrgTree()
this.handleNodeClick({sid: data.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
})
},
lookRow(row) { // 查看二维码
this.isshow = 'ewm'
getQrCode({sid: row.sid}).then(res => {
this.ewmForm = res.data
})
},
Printewm() {
this.$print(this.$refs.print) // 使用
},
mouseenter(data) {
this.$set(data, 'del', true)
},
mouseleave(data) {
this.$set(data, 'del', false)
},
onSearch() {
this.getPageList(this.page)
},
resetSearch() {
this.page.params.name = ''
this.getPageList(this.page)
}
},
}
</script>
<style>
.el-icon-arrow-right:before {
content: '\e6e0';
color: #727272;
}
</style>
<style scoped="scoped" lang="scss">
.org-tree {
width: 240px;
min-height: 100%;
box-sizing: border-box;
padding-right: 10px;
border: 1px solid #edf1f7;
}
.org-table {
flex: 1;
// padding-left: 10px;
margin: 0 10px;
border: 1px solid #edf1f7;
.ewm {
margin: 30px auto 0;
width: 560px;
}
.ediut {
margin: 30px auto 0;
width: 750px;
}
}
.custom-tree-node {
position: relative;
overflow: hidden;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.handle {
position: absolute;
right: 0;
.el-button--text {
font-size: 15px;
background-color: #FFFFFF;
}
}
</style>
<template>
<div class="container" style="display: flex;">
<div class="org-tree">
<el-tree :data="treedata"
node-key="organizationSid"
:props="props"
default-expand-all
@node-click="handleNodeClick"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }"
@mouseenter="mouseenter(data)"
@mouseleave="mouseleave(data)"
@click.stop.native>
<span>{{ node.label || $store.getters.userInfo.Orgname }}</span>
<span v-show="data.del" class="handle">
<el-tooltip class="item" effect="dark" content="新增" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => append(data)" icon="el-icon-circle-plus-outline">
</el-button>
</el-tooltip>
<el-tooltip v-show="data.sid" class="item" effect="dark" content="修改" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => deit(data)" icon="el-icon-edit">
</el-button>
</el-tooltip>
<el-tooltip v-show="data.sid" class="item" effect="dark" content="删除" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => remove(data)" icon="el-icon-delete">
</el-button>
</el-tooltip>
</span>
</span>
</el-tree>
</div>
<el-dialog title="编辑节点" :visible.sync="dialogVisible" width="40%">
<el-form :model="nodeForm">
<el-form-item label="部门名称" label-width="120px">
<el-input v-model="nodeForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="排序号" label-width="120px">
<el-input v-model="nodeForm.sortNo" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="text-center">
<el-button type="primary" @click="nodeSave()">保 存</el-button>
<el-button @click="dialogVisible = false">返 回</el-button>
</div>
</el-dialog>
<div class="org-table" v-show="isshow == 'table'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="部门名称">
<el-input v-model="page.params.name" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table
:data="tableData"
default-expand-all
border style="width: 100%;">
<el-table-column label="序号" type="index" width="70px" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="200px">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
编辑
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="remove(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="部门名称" align="center">
</el-table-column>
<el-table-column prop="contactMan" label="联系人" align="center" width="100px">
</el-table-column>
<el-table-column prop="mobile" label="联系人手机号码" width="160px" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="sortNo" label="排序" align="center" width="50px">
</el-table-column>
<el-table-column prop="regdate" label="二维码" align="center" width="80px">
<template slot-scope="scope">
<el-button @click.native.prevent="lookRow(scope.row)" type="text" size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<div class="org-table" v-show="isshow == 'ewm'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;">部门二维码</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="Printewm">打 印</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ewm" style="display: flex;justify-content: center; align-items: center;" ref="print">
<img style="width: 200px; height: 200px;" :src="ewmForm.qrFilePath" alt="">
<ul style="list-style:none; line-height: 32px; font-size: 16px;">
<li><label for="">部门名称: </label><span>{{ewmForm.departmentName}}</span></li>
</ul>
</div>
</div>
<!-- 新增编辑 -->
<div class="org-table" v-show="isshow == 'edit'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;"> {{ dialogTitle }}部门信息</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ediut">
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item label="部门名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="部门地理位置" prop="dlxx">
<el-input v-model="form.dlxx" readonly>
<el-button slot="append" icon="el-icon-map-location" @click='mapDialog = true'></el-button>
</el-input>
</el-form-item>
<el-form-item label="部门地址" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="部门联系人" prop="contactMan">
<el-input v-model="form.contactMan"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="排序号" prop="sortNo">
<el-input v-model="form.sortNo"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<Position v-if="mapDialog" :address.sync="form.address" :maker-position.sync="form.dlxx"
:dialog-visible.sync="mapDialog"/>
</div>
</template>
<script>
import {
getOrgTree,
addOrgTree,
getPagelist,
putOrgtree,
postOrgtree,
delOrgtree,
getQrCode
} from '@/api/system/departments/departments.js'
import Position from '@/components/amap/amap.vue'
export default {
components: {Position},
data() {
return {
dialogVisible: false,
mapDialog: false,
dialogTitle: '',
props: {
label: "name",
children: "orgDepartmentVoList",
},
nodeForm: {
sid: '',
name: '',
sortNo: ''
},
ewmForm: {
qrFilePath: '',
organizationName: '',
departmentName: '',
address: ''
},
form: {
organizationSid: '',
psid: '',
address: '',
dlxx: ''
},
formBackup: Object.assign({}, this.form),
isshow: 'table',
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
name: '',
organizationSid: '',
psid: ''
}
},
tableData: [],
treedata: [],
rules: {
name: [
{required: true, message: '请输入', trigger: 'blur'},
],
dlxx: [
{required: true, message: '请输入', trigger: 'blur'},
],
address: [
{required: true, message: '请输入', trigger: 'blur'},
],
contactMan: [
{required: true, message: '请输入', trigger: 'blur'},
],
mobile: [
{required: true, message: '请输入', trigger: 'blur'},
],
sortNo: [
{required: true, message: '请输入', trigger: 'blur'},
]
}
}
},
mounted() {
this.getOrgTree()
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
handleNodeClick(data) {
this.isshow = 'table'
this.page.params.organizationSid = this.$store.getters.userInfo.orgSid
this.page.params.psid = data.sid || 0
// let params = {
// total: 0,
// current: 1,
// size: 10,
// params:{
// name: '',
// organizationSid: this.$store.getters.userInfo.orgSid,
// psid: data.sid || 0
// }
// }
this.getPageList(this.page)
},
getPageList(data) { // 获取树形列表
getPagelist(data).then(res => {
this.tableData = res.data.records
this.page.total = res.data.total
})
},
getOrgTree() { // 获取树形列表
getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
this.treedata = res.data
})
},
save() {
this.form.organizationSid = this.$store.getters.userInfo.orgSid
console.log(this.form)
this.form.dlxx = typeof (this.form.dlxx) == 'string' ? this.form.dlxx : this.form.dlxx.join()
if (this.form.sid) {
putOrgtree(this.form).then(res => {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({sid: this.form.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
addOrgTree(this.form).then(res => {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({sid: this.form.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
append(data) {
console.log(data)
this.dialogTitle = '新增'
this.isshow = 'edit'
this.form = Object.assign({}, this.formBackup)
this.form.psid = data.sid || 0
this.form.organizationSid = this.$store.getters.userInfo.orgSid
this.form.address = data.orgAddress || data.address
this.form.dlxx = data.gisInfo || data.dlxx
},
editRow(row) {
this.dialogTitle = '编辑'
this.isshow = 'edit'
this.form = Object.assign({}, row)
// getRoleInfo({sid: row.sid}).then(res => {
// this.form = res.data
// // this.user = Object.assign({}, row
// })
},
deit(data) { // 节点编辑保存
console.log(data)
this.dialogVisible = true
this.nodeForm.sid = data.sid
this.nodeForm.name = data.name
this.nodeForm.sortNo = data.sortNo
},
nodeSave() { // 节点编辑保存
postOrgtree(this.nodeForm).then(res => {
this.getOrgTree()
this.dialogVisible = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
remove(data) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgtree({sid: data.sid}).then(res => {
this.getOrgTree()
this.handleNodeClick({sid: data.psid})
this.$message({
message: res.msg,
type: 'success'
})
})
})
},
lookRow(row) { // 查看二维码
this.isshow = 'ewm'
getQrCode({sid: row.sid}).then(res => {
this.ewmForm = res.data
})
},
Printewm() {
this.$print(this.$refs.print) // 使用
},
mouseenter(data) {
this.$set(data, 'del', true)
},
mouseleave(data) {
this.$set(data, 'del', false)
},
onSearch() {
this.getPageList(this.page)
},
resetSearch() {
this.page.params.name = ''
this.getPageList(this.page)
}
},
}
</script>
<style>
.el-icon-arrow-right:before {
content: '\e6e0';
color: #727272;
}
</style>
<style scoped="scoped" lang="scss">
.org-tree {
width: 240px;
min-height: 100%;
box-sizing: border-box;
padding-right: 10px;
border: 1px solid #edf1f7;
}
.org-table {
flex: 1;
// padding-left: 10px;
margin: 0 10px;
border: 1px solid #edf1f7;
.ewm {
margin: 30px auto 0;
width: 560px;
}
.ediut {
margin: 30px auto 0;
width: 750px;
}
}
.custom-tree-node {
position: relative;
overflow: hidden;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.handle {
position: absolute;
right: 0;
.el-button--text {
font-size: 15px;
background-color: #FFFFFF;
}
}
</style>

646
demo-web-ui/src/views/system-admin/role.vue
View File

@@ -1,323 +1,323 @@
<template>
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="角色名称">
<el-input v-model="page.params.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button type="primary" @click="add()">新增</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="70px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="260px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="roleMenus(scope.row)">
菜单授权
</el-button>
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" align="center">
</el-table-column>
<el-table-column prop="orgTypeKey" label="单位类别" align="center">
</el-table-column>
<el-table-column prop="remarks" label="备注" align="center">
</el-table-column>
<el-table-column prop="enabled" label="是否可用" width="100px" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
@change="enabledChange(scope.row.isEnable,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="form.roleName"></el-input>
</td>
</tr>
<tr>
<td>单位类型</td>
<td>
<el-select v-model="form.orgTypeKey" placeholder="请选择单位类型">
<el-option
v-for="item in dwlb"
:key="item.sid"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.state" placeholder="请选择用户类型">
<el-option
v-for="item in userType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</span>
</el-dialog>
<!-- 菜单授权 -->
<el-dialog title="菜单授权" :visible.sync="roleDialog" width="50%">
<el-tree
v-loading="loading"
:data="treedata"
ref="Tree"
show-checkbox
accordion
node-key="sid"
:default-checked-keys="checkedId"
@setChecked="setChecked"
:props="defaultProps"
@check-change="checkchange">
</el-tree>
<div slot="footer" class="text-center">
<el-button type="primary" @click="getCheckedKeys">保 存</el-button>
<el-button @click="roleDialog = false">返 回</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { rolePageList, saveRoleInfo, getRoleInfo, putRoleInfo, delRole, setRoleEnable } from '@/api/system/Role/roleManage.js'
import { getrolemenus, saverolemenus } from '@/api/system/roleMenus/index.js'
import { getDicts } from '@/api/system/dataDict/dataDict.js'
export default {
data() {
return {
loading: false,
dialogTitle: '',
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
roleName: ''
},
},
tableData: [],
editDialog: false,
treedata: [],
roleDialog: false,
defaultProps: {
children: 'children',
label: 'menuName'
},
checkedId: [],
roleSid: '',
chace: [],
userType:[],
dwlb:[]
}
},
mounted() {
this.getPageList(this.page)
getDicts("userType").then(res =>{ this.userType = res.data })
getDicts('dwlb').then(res =>{ this.dwlb = res.data })
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
roleName: ''
},
}
this.getPageList(this.page)
},
getPageList(data){ // 获取列表
rolePageList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(){
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
},
save(){
let data = this.form
if(this.form.sid){
putRoleInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}else{
saveRoleInfo(data).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
// getRoleInfo({sid: row.sid}).then(res => {
// this.form = res.data
// // this.user = Object.assign({}, row
// })
},
deleteRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delRole({sid: row.sid}).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
enabledChange(value,row){
console.log(value,row)
setRoleEnable({isEnable:value, sid: row.sid }).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
},
roleMenus(row){ // 获取授权菜单树形
this.roleDialog = true
this.checkedId = []
this.roleSid = row.sid
this.loading = true
getrolemenus({roleSid: row.sid}).then(res => {
this.treedata = res.data
this.getTreeParentNode(res.data, this.checkedId)
this.getTreeParentid(res.data)
this.loading = false
})
},
// 递归查询所有上级数据
getTreeParentNode (menus, ids) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].children && menus[i].children.length != 0) {
this.getTreeParentNode(menus[i].children, ids)
}else if (menus[i].isCheck) {
ids.push(menus[i].sid)
}
}
},
// 所有一级菜单ID
getTreeParentid (menus) {
for (var i = 0; i < menus.length; i++) {
this.chace.push(menus[i].sid)
}
},
getCheckedKeys() {
let roleMenus = []
this.$refs.Tree.getCheckedKeys().forEach(val => {
roleMenus.push({
menuSid: val,
roleSid: this.roleSid
})
})
let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
for(let i = 0; i < parentTrue.length;i++) {
for(let j = 0; j < this.chace.length;j++) {
if(parentTrue[i] == this.chace[j]) {
parentTrue.splice(i, 1);
}
}
}
parentTrue.forEach(val => {
roleMenus.push({
menuSid: val,
roleSid: this.roleSid
})
})
saverolemenus({roleSid: this.roleSid,roleMenus: roleMenus}).then(res => {
this.roleDialog = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
setChecked(){
},
checkchange(){
console.log(this.$refs.Tree.getCheckedKeys())
console.log(this.$refs.Tree.getHalfCheckedKeys())
}
},
}
</script>
<style scoped="scoped" lang="scss">
</style>
<template>
<div class="container">
<div class="tab-header">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="角色名称">
<el-input v-model="page.params.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button type="primary" @click="add()">新增</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="70px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="260px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="roleMenus(scope.row)">
菜单授权
</el-button>
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="roleName" label="角色名称" align="center">
</el-table-column>
<el-table-column prop="orgTypeKey" label="单位类别" align="center">
</el-table-column>
<el-table-column prop="remarks" label="备注" align="center">
</el-table-column>
<el-table-column prop="enabled" label="是否可用" width="100px" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
@change="enabledChange(scope.row.isEnable,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '角色信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>角色名称</td>
<td>
<el-input v-model="form.roleName"></el-input>
</td>
</tr>
<tr>
<td>单位类型</td>
<td>
<el-select v-model="form.orgTypeKey" placeholder="请选择单位类型">
<el-option
v-for="item in dwlb"
:key="item.sid"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.state" placeholder="请选择用户类型">
<el-option
v-for="item in userType"
:key="item.dictKey"
:label="item.dictValue"
:value="item.dictKey">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</span>
</el-dialog>
<!-- 菜单授权 -->
<el-dialog title="菜单授权" :visible.sync="roleDialog" width="50%">
<el-tree
v-loading="loading"
:data="treedata"
ref="Tree"
show-checkbox
accordion
node-key="sid"
:default-checked-keys="checkedId"
@setChecked="setChecked"
:props="defaultProps"
@check-change="checkchange">
</el-tree>
<div slot="footer" class="text-center">
<el-button type="primary" @click="getCheckedKeys">保 存</el-button>
<el-button @click="roleDialog = false">返 回</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { rolePageList, saveRoleInfo, getRoleInfo, putRoleInfo, delRole, setRoleEnable } from '@/api/system/Role/roleManage.js'
import { getrolemenus, saverolemenus } from '@/api/system/roleMenus/index.js'
import { getDicts } from '@/api/system/dataDict/dataDict.js'
export default {
data() {
return {
loading: false,
dialogTitle: '',
form: {},
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
roleName: ''
},
},
tableData: [],
editDialog: false,
treedata: [],
roleDialog: false,
defaultProps: {
children: 'children',
label: 'menuName'
},
checkedId: [],
roleSid: '',
chace: [],
userType:[],
dwlb:[]
}
},
mounted() {
this.getPageList(this.page)
getDicts("userType").then(res =>{ this.userType = res.data })
getDicts('dwlb').then(res =>{ this.dwlb = res.data })
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
onSearch() { //查询
this.getPageList(this.page)
},
resetSearch(){ // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
roleName: ''
},
}
this.getPageList(this.page)
},
getPageList(data){ // 获取列表
rolePageList(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
add(){
this.dialogTitle = '新增'
this.editDialog = true
this.form = Object.assign({}, this.formBackup)
},
save(){
let data = this.form
if(this.form.sid){
putRoleInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}else{
saveRoleInfo(data).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
// getRoleInfo({sid: row.sid}).then(res => {
// this.form = res.data
// // this.user = Object.assign({}, row
// })
},
deleteRow(row) {
this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delRole({sid: row.sid}).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
},
enabledChange(value,row){
console.log(value,row)
setRoleEnable({isEnable:value, sid: row.sid }).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
},
roleMenus(row){ // 获取授权菜单树形
this.roleDialog = true
this.checkedId = []
this.roleSid = row.sid
this.loading = true
getrolemenus({roleSid: row.sid}).then(res => {
this.treedata = res.data
this.getTreeParentNode(res.data, this.checkedId)
this.getTreeParentid(res.data)
this.loading = false
})
},
// 递归查询所有上级数据
getTreeParentNode (menus, ids) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].children && menus[i].children.length != 0) {
this.getTreeParentNode(menus[i].children, ids)
}else if (menus[i].isCheck) {
ids.push(menus[i].sid)
}
}
},
// 所有一级菜单ID
getTreeParentid (menus) {
for (var i = 0; i < menus.length; i++) {
this.chace.push(menus[i].sid)
}
},
getCheckedKeys() {
let roleMenus = []
this.$refs.Tree.getCheckedKeys().forEach(val => {
roleMenus.push({
menuSid: val,
roleSid: this.roleSid
})
})
let parentTrue = this.$refs.Tree.getHalfCheckedKeys()
for(let i = 0; i < parentTrue.length;i++) {
for(let j = 0; j < this.chace.length;j++) {
if(parentTrue[i] == this.chace[j]) {
parentTrue.splice(i, 1);
}
}
}
parentTrue.forEach(val => {
roleMenus.push({
menuSid: val,
roleSid: this.roleSid
})
})
saverolemenus({roleSid: this.roleSid,roleMenus: roleMenus}).then(res => {
this.roleDialog = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
setChecked(){
},
checkchange(){
console.log(this.$refs.Tree.getCheckedKeys())
console.log(this.$refs.Tree.getHalfCheckedKeys())
}
},
}
</script>
<style scoped="scoped" lang="scss">
</style>

726
demo-web-ui/src/views/system-admin/user.vue
View File

@@ -1,363 +1,363 @@
<template>
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="单位名称">
<el-input v-model="page.params.organizationName"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="page.params.userName"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">用户信息列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope">
<!-- <el-button @click="getrolelist(scope.row)" type="primary" size="mini"
:disabled="!scope.row.organizationName">
设置角色
</el-button> -->
<el-button @click="initPwd(scope.row)" type="primary" size="mini">
初始化密码
</el-button>
<el-button @click="delUser(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="userinfo(scope.row)">{{scope.row.userName}}</span>
</template>
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" width="120px" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
<!-- <el-table-column prop="role" label="角色" align="center" width="140px">
</el-table-column> -->
<el-table-column prop="organizationName" label="单位名称" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="orgInfo(scope.row)">{{scope.row.organizationName}}</span>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<el-dialog title="用户信息" :visible.sync="showuserInfo" width="70%" >
<table class="tishi" cellspacing="0">
<tr>
<td style="border-bottom: none; border-right: none;">真实姓名</td>
<td style="border-bottom: none;">
{{userInfoFrom.name}}
</td>
<td style="border-bottom: none; border-right: none;">身份证号码</td>
<td style="border-bottom: none;">
{{userInfoFrom.idNo}}
</td>
</tr>
<tr>
<td style="border-bottom: none; border-right: none;">用户名</td>
<td style="border-bottom: none;">
{{userInfoFrom.userName}}
</td>
<td style="border-bottom: none; border-right: none;">手机号码</td>
<td style="border-bottom: none;">
{{userInfoFrom.mobile}}
</td>
</tr>
<tr>
<td style="border-right: none;">身份证正面照片</td>
<td>
<eimage :url="userInfoFrom.idFrontPhoto"></eimage>
</td>
<td style="border-right: none;">身份证背面照片</td>
<td>
<eimage :url="userInfoFrom.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<el-dialog title="" :visible.sync="showOrgInfo" width="70%" >
<lockorginfo :orgInfo="OrgInfoFrom"></lockorginfo>
</el-dialog>
<el-dialog title="设置角色" :visible.sync="roledialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td style="border-bottom: none; border-right: none;">用户名</td>
<td style="border-bottom: none;">
{{rolefrom.userName }}
</td>
</tr>
<tr>
<td style="border-right: none;">角色</td>
<td>
<el-select v-model="rolefrom.roleSid" placeholder="请选择">
<el-option
v-for="item in rolelist"
:key="item.sid"
:label="item.roleName"
:value="item.sid">
</el-option>
</el-select>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveUserRole()">保 存</el-button>
<el-button @click="roledialog = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { userListByAdmin, verifyList, initPwd, delUser, getUserINfo, getOrgINfo, initUserRole, saveUserRole } from '@/api/system/user/Auser.js'
import { roleList } from '@/api/system/Role/roleManage.js'
import lockorginfo from './components/orgInfo.vue'
export default {
components:{ lockorginfo },
data() {
return {
imageUrl: '',
dialogImageUrl: '',
showuserInfo: false,
showOrgInfo: false,
dialogVisible: false,
roledialog: false,
form: {},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
isAdmin: '',
organizationName: '',
state: 2,
userName: ''
}
},
pageBackup: Object.assign({}, this.page),
tableData: [],
userInfoFrom: {},
OrgInfoFrom: {},
rolelist: [],
rolefrom: {
roleSid: '',
userSid: ''
}
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){ // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
isAdmin: '',
organizationName: '',
state: 2,
userName: ''
}
}
this.getverifyList(this.page)
},
getverifyList(data){ // 获取用户列表
userListByAdmin(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
// getrolelist(row){ // 获取角色初始化列表
// initUserRole({userSid: row.sid}).then(res => {
// this.roledialog = true
// this.rolelist = res.data.roleVoList
// this.rolefrom.userSid = res.data.userSid
// this.rolefrom.userName = res.data.userName
// this.rolefrom.roleSid = res.data.roleSid
// })
// },
saveUserRole(){
saveUserRole(this.rolefrom).then(res=>{
this.roledialog = false
this.$message({
type: 'success',
message: res.msg
});
})
},
initPwd(row){
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
})
})
},
userinfo(row) { // 查看用户信息
this.showuserInfo = true
getUserINfo({userName: row.userName}).then(res => {
this.userInfoFrom = res.data
})
},
orgInfo(row){
this.showOrgInfo = true
getOrgINfo({organizationSid: row.organizationSid}).then(res => {
this.OrgInfoFrom = res.data
})
},
delUser(row){
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
}
},
}
</script>
<style>
.el-dialog__footer{
text-align: center;
}
</style>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.tablerow-click{
color: #007FFF;
cursor: pointer;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
}
td:nth-child(2) {
padding-left: 30px;
}
td:nth-child(3) {
text-align: right;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>
<template>
<div class="container">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="单位名称">
<el-input v-model="page.params.organizationName"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="page.params.userName"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<div class="table-describe clearfix">
<h4 style="">用户信息列表</h4>
<pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope">
<!-- <el-button @click="getrolelist(scope.row)" type="primary" size="mini"
:disabled="!scope.row.organizationName">
设置角色
</el-button> -->
<el-button @click="initPwd(scope.row)" type="primary" size="mini">
初始化密码
</el-button>
<el-button @click="delUser(scope.row)" type="danger" size="mini">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="userinfo(scope.row)">{{scope.row.userName}}</span>
</template>
</el-table-column>
<el-table-column prop="idNo" label="身份证号码" align="center">
</el-table-column>
<el-table-column prop="name" label="真实姓名" width="120px" align="center">
</el-table-column>
<el-table-column prop="mobile" label="手机号码" align="center" width="140px">
</el-table-column>
<!-- <el-table-column prop="role" label="角色" align="center" width="140px">
</el-table-column> -->
<el-table-column prop="organizationName" label="单位名称" align="center">
<template slot-scope="scope">
<span class="tablerow-click" @click="orgInfo(scope.row)">{{scope.row.organizationName}}</span>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<el-dialog title="用户信息" :visible.sync="showuserInfo" width="70%" >
<table class="tishi" cellspacing="0">
<tr>
<td style="border-bottom: none; border-right: none;">真实姓名</td>
<td style="border-bottom: none;">
{{userInfoFrom.name}}
</td>
<td style="border-bottom: none; border-right: none;">身份证号码</td>
<td style="border-bottom: none;">
{{userInfoFrom.idNo}}
</td>
</tr>
<tr>
<td style="border-bottom: none; border-right: none;">用户名</td>
<td style="border-bottom: none;">
{{userInfoFrom.userName}}
</td>
<td style="border-bottom: none; border-right: none;">手机号码</td>
<td style="border-bottom: none;">
{{userInfoFrom.mobile}}
</td>
</tr>
<tr>
<td style="border-right: none;">身份证正面照片</td>
<td>
<eimage :url="userInfoFrom.idFrontPhoto"></eimage>
</td>
<td style="border-right: none;">身份证背面照片</td>
<td>
<eimage :url="userInfoFrom.idBackPhoto"></eimage>
</td>
</tr>
</table>
</el-dialog>
<el-dialog title="" :visible.sync="showOrgInfo" width="70%" >
<lockorginfo :orgInfo="OrgInfoFrom"></lockorginfo>
</el-dialog>
<el-dialog title="设置角色" :visible.sync="roledialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td style="border-bottom: none; border-right: none;">用户名</td>
<td style="border-bottom: none;">
{{rolefrom.userName }}
</td>
</tr>
<tr>
<td style="border-right: none;">角色</td>
<td>
<el-select v-model="rolefrom.roleSid" placeholder="请选择">
<el-option
v-for="item in rolelist"
:key="item.sid"
:label="item.roleName"
:value="item.sid">
</el-option>
</el-select>
</td>
</tr>
</table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveUserRole()">保 存</el-button>
<el-button @click="roledialog = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { userListByAdmin, verifyList, initPwd, delUser, getUserINfo, getOrgINfo, initUserRole, saveUserRole } from '@/api/system/user/Auser.js'
import { roleList } from '@/api/system/Role/roleManage.js'
import lockorginfo from './components/orgInfo.vue'
export default {
components:{ lockorginfo },
data() {
return {
imageUrl: '',
dialogImageUrl: '',
showuserInfo: false,
showOrgInfo: false,
dialogVisible: false,
roledialog: false,
form: {},
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
isAdmin: '',
organizationName: '',
state: 2,
userName: ''
}
},
pageBackup: Object.assign({}, this.page),
tableData: [],
userInfoFrom: {},
OrgInfoFrom: {},
rolelist: [],
rolefrom: {
roleSid: '',
userSid: ''
}
}
},
mounted() {
this.getverifyList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getverifyList(this.page)
},
onSearch() { //查询
this.getverifyList(this.page)
},
resetSearch(){ // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
isAdmin: '',
organizationName: '',
state: 2,
userName: ''
}
}
this.getverifyList(this.page)
},
getverifyList(data){ // 获取用户列表
userListByAdmin(data).then((res)=>{
this.tableData = res.data.records
this.page.total = res.data.total
})
},
// getrolelist(row){ // 获取角色初始化列表
// initUserRole({userSid: row.sid}).then(res => {
// this.roledialog = true
// this.rolelist = res.data.roleVoList
// this.rolefrom.userSid = res.data.userSid
// this.rolefrom.userName = res.data.userName
// this.rolefrom.roleSid = res.data.roleSid
// })
// },
saveUserRole(){
saveUserRole(this.rolefrom).then(res=>{
this.roledialog = false
this.$message({
type: 'success',
message: res.msg
});
})
},
initPwd(row){
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: res.msg
});
})
})
},
userinfo(row) { // 查看用户信息
this.showuserInfo = true
getUserINfo({userName: row.userName}).then(res => {
this.userInfoFrom = res.data
})
},
orgInfo(row){
this.showOrgInfo = true
getOrgINfo({organizationSid: row.organizationSid}).then(res => {
this.OrgInfoFrom = res.data
})
},
delUser(row){
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser({sid: row.sid}).then(res => {
this.getverifyList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
}
},
}
</script>
<style>
.el-dialog__footer{
text-align: center;
}
</style>
<style lang="scss" scoped="scoped">
.el-image{
width: 180px;
height: 150px;
}
.tablerow-click{
color: #007FFF;
cursor: pointer;
}
.zcxx {
color: #000;
width: 98%;
margin: 0px auto 30px;
background-color: #f7f9fc;
border: 1px solid #e6e9f0;
height: 60px;
line-height: 60px;
p {
font-size: 16px;
float: left;
margin-top: 0px;
margin-left: 10px;
font-weight: bold;
width: 300px;
}
.el-button {
float: right;
margin-top: 13px;
border: none;
width: 80px;
padding: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
table {
width: 98%;
margin: 0 auto;
tr {
height: 45px;
vertical-align: top;
}
td:first-child {
text-align: right;
}
td:nth-child(2) {
padding-left: 30px;
}
td:nth-child(3) {
text-align: right;
}
td:nth-child(4) {
padding-left: 30px;
}
span {
font-size: 14px;
color: #015bff;
margin-left: 20px;
}
.sfz {
border: 1px solid #e6e9f0;
width: 45%;
}
#bei {
width: 21.4%;
}
}
</style>

130
demo-web-ui/src/views/userManage/userManage.vue
View File

@@ -1,65 +1,65 @@
<template>
<div>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户列表" name="roleList">
<user-manage-list :dataObj='dataObj' @status='isShow' @item='listObj'></user-manage-list>
</el-tab-pane>
<!-- <el-tab-pane label="新增用户" name="addrole">
<user-manage-add @status='isShow' :dataObj='childObj'></user-manage-add>
</el-tab-pane>-->
</el-tabs>
</div>
</template>
<script>
import userManageList from './userManageList.vue'
import userManageAdd from './userManageAdd.vue'
export default {
components: {
userManageList: userManageList,
userManageAdd: userManageAdd,
},
data() {
return {
activeName: 'roleList',
editDialog: false,
dataObj: {
isShow: ''
},
childObj: {}
};
},
mounted() {
},
methods: {
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
// this.roleForm = Object.assign({}, this.formBackup)
} else {
// this.getroleOrgList()
}
},
isShow(val) {
if (!val) {
this.activeName = 'roleList'
this.dataObj.isShow = false
this.dataObj.isShow = true
} else {
this.activeName = 'addrole'
}
},
listObj(val) {
this.childObj = val
}
}
};
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>
<template>
<div>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="学生信息" name="roleList">
<user-manage-list :dataObj='dataObj' @status='isShow' @item='listObj'></user-manage-list>
</el-tab-pane>
<!-- <el-tab-pane label="新增用户" name="addrole">
<user-manage-add @status='isShow' :dataObj='childObj'></user-manage-add>
</el-tab-pane>-->
</el-tabs>
</div>
</template>
<script>
import userManageList from './userManageList.vue'
import userManageAdd from './userManageAdd.vue'
export default {
components: {
userManageList: userManageList,
userManageAdd: userManageAdd,
},
data() {
return {
activeName: 'roleList',
editDialog: false,
dataObj: {
isShow: ''
},
childObj: {}
};
},
mounted() {
},
methods: {
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
// this.roleForm = Object.assign({}, this.formBackup)
} else {
// this.getroleOrgList()
}
},
isShow(val) {
if (!val) {
this.activeName = 'roleList'
this.dataObj.isShow = false
this.dataObj.isShow = true
} else {
this.activeName = 'addrole'
}
},
listObj(val) {
this.childObj = val
}
}
};
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>

534
demo-web-ui/src/views/userManage/userManageAdd.vue
View File

@@ -1,267 +1,267 @@
<template>
<div>
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.userType" @change="$forceUpdate()" style="width:300px">
<el-option
v-for="(item, i) in userTypeData"
:key="i"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>部门</td>
<td>
<el-select v-model="form.deptSid" placeholder="请选择" style="width:300px">
<el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option>
<el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
:default-checked-keys="checkedId"
:default-expand-all='true' :check-strictly='true' :props="defaultProps"
@check-change="checkchange"
>
</el-tree>
</el-select>
<!--<el-select v-model="form.deptSid" @change="$forceUpdate()">
<el-option
v-for="(item, i) in treedata"
:key="i"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>-->
</td>
</tr>
<tr>
<td>岗位</td>
<td>
<el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px">
<el-option
v-for="(item, i) in postSidData"
:key="i"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
<!--<el-input v-model="form.postSid"></el-input>-->
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<el-input v-model="form.mobile" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>手机验证码</td>
<td>
<el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px">
<el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button>
<el-button v-show="!showCode" slot="append">{{phoneCodeCount}} s</el-button>
</el-input>
<!--<el-input v-model="form.verificationCode"></el-input>-->
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<!--<el-button type="warning" @click="cancel()">取 消</el-button>-->
</div>
</el-card>
</div>
</template>
<script>
import {userAdd, userUpdata, userSingle, orgList, postList, getCode} from '@/api/system/userManage/index.js'
export default {
data() {
return {
form: {
sid: '',
name: '',
userType: '',
deptSid: '',
postSid: '',
mobile: '',
verificationCode: ''
},
form1: {
sid: '',
},
userTypeData: [{
value: '1',
name: '员工'
}, {
value: '2',
name: '客户'
}, {
value: '3',
name: '供应商'
}],
treedata: [],
checkedId: [],
orgName: '',
defaultProps: {
children: 'children',
label: 'name'
},
postSidData: [],
showCode: true,
phoneCodeCount: '',
timer: null,
};
},
props: ['dataObj'],
watch: {
dataObj: {
handler(val) {
this.form1.sid = val.sid
this.getUserSingle()
this.getOrgList()
},
deep: true,
},
},
mounted() {
this.getOrgList()
},
methods: {
getUserSingle() {
userSingle(this.form1).then(res => {
if (res.code == '200') {
this.form.sid = res.data.sid
this.form.name = res.data.name
this.form.userType = res.data.userType
this.form.deptSid = res.data.deptSid
this.orgName = res.data.departmentName
this.form.postSid = res.data.postSid
this.form.mobile = res.data.mobile
}
})
},
// 获取部门树形
getOrgList(row) {
// this.roleDialog = true
this.checkedId = []
this.Thisrow = row
this.loading = true
let params = {}
orgList(params).then(res => {
this.treedata = res.data
})
},
checkchange(data, checked, indeterminate) {
if (checked) {
this.form.deptSid = data.sid
this.orgName = data.name
let arr = []
arr = [data.sid];
this.$refs.Tree.setCheckedKeys(arr);
this.form.postSid = ''
this.getPost(data.sid)
return;
}
},
getPost(orgSid) {
let params = {
sid: orgSid
}
postList(params).then(res => {
this.postSidData = res.data
})
},
save() {
if (this.form.sid) {
userUpdata(this.form).then(res => {
if (res.code == '200') {
this.$message({
message: res.msg,
type: 'success'
})
this.$emit('status', false)
}
})
} else {
let orgSid = this.$refs.Tree.getCheckedKeys()
this.form.deptSid = orgSid.toString()
userAdd(this.form).then(res => {
if (res.code == '200') {
this.$message({
message: res.msg,
type: 'success'
})
this.$emit('status', false)
}
})
let arr = []
this.$refs.Tree.setCheckedKeys(arr);
}
this.reset()
},
reset() {
this.form = {
sid: '',
name: '',
userType: '',
deptSid: '',
postSid: '',
mobile: '',
verificationCode: ''
}
},
//获取验证码
getIdentifying() {
if (this.form.mobile == "") {
this.$alert('请填写手机号码', '', {
confirmButtonText: '确定'
})
return;
}
//验证码倒计时
const TIME_COUNT = 60;
if (!this.timer) {
this.phoneCodeCount = TIME_COUNT;
this.showCode = false;
this.timer = setInterval(() => {
if (this.phoneCodeCount > 0 && this.phoneCodeCount <= TIME_COUNT) {
this.phoneCodeCount--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
let obj = {
phone: this.form.mobile,
}
getCode(obj).then(res => {
if (res.code == '200') {
this.orginTranceNo = res.data.tranceNo;
}
})
},
cancel() {
this.$emit('status', false)
}
}
}
</script>
<style>
</style>
<template>
<div>
<el-card class="box-card">
<table class="e-table" cellspacing="0">
<tr>
<td>姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.userType" @change="$forceUpdate()" style="width:300px">
<el-option
v-for="(item, i) in userTypeData"
:key="i"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>部门</td>
<td>
<el-select v-model="form.deptSid" placeholder="请选择" style="width:300px">
<el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option>
<el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid"
:default-checked-keys="checkedId"
:default-expand-all='true' :check-strictly='true' :props="defaultProps"
@check-change="checkchange"
>
</el-tree>
</el-select>
<!--<el-select v-model="form.deptSid" @change="$forceUpdate()">
<el-option
v-for="(item, i) in treedata"
:key="i"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>-->
</td>
</tr>
<tr>
<td>岗位</td>
<td>
<el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px">
<el-option
v-for="(item, i) in postSidData"
:key="i"
:label="item.name"
:value="item.sid">
</el-option>
</el-select>
<!--<el-input v-model="form.postSid"></el-input>-->
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<el-input v-model="form.mobile" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>手机验证码</td>
<td>
<el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px">
<el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button>
<el-button v-show="!showCode" slot="append">{{phoneCodeCount}} s</el-button>
</el-input>
<!--<el-input v-model="form.verificationCode"></el-input>-->
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<!--<el-button type="warning" @click="cancel()">取 消</el-button>-->
</div>
</el-card>
</div>
</template>
<script>
import {userAdd, userUpdata, userSingle, orgList, postList, getCode} from '@/api/system/userManage/index.js'
export default {
data() {
return {
form: {
sid: '',
name: '',
userType: '',
deptSid: '',
postSid: '',
mobile: '',
verificationCode: ''
},
form1: {
sid: '',
},
userTypeData: [{
value: '1',
name: '员工'
}, {
value: '2',
name: '客户'
}, {
value: '3',
name: '供应商'
}],
treedata: [],
checkedId: [],
orgName: '',
defaultProps: {
children: 'children',
label: 'name'
},
postSidData: [],
showCode: true,
phoneCodeCount: '',
timer: null,
};
},
props: ['dataObj'],
watch: {
dataObj: {
handler(val) {
this.form1.sid = val.sid
this.getUserSingle()
this.getOrgList()
},
deep: true,
},
},
mounted() {
this.getOrgList()
},
methods: {
getUserSingle() {
userSingle(this.form1).then(res => {
if (res.code == '200') {
this.form.sid = res.data.sid
this.form.name = res.data.name
this.form.userType = res.data.userType
this.form.deptSid = res.data.deptSid
this.orgName = res.data.departmentName
this.form.postSid = res.data.postSid
this.form.mobile = res.data.mobile
}
})
},
// 获取部门树形
getOrgList(row) {
// this.roleDialog = true
this.checkedId = []
this.Thisrow = row
this.loading = true
let params = {}
orgList(params).then(res => {
this.treedata = res.data
})
},
checkchange(data, checked, indeterminate) {
if (checked) {
this.form.deptSid = data.sid
this.orgName = data.name
let arr = []
arr = [data.sid];
this.$refs.Tree.setCheckedKeys(arr);
this.form.postSid = ''
this.getPost(data.sid)
return;
}
},
getPost(orgSid) {
let params = {
sid: orgSid
}
postList(params).then(res => {
this.postSidData = res.data
})
},
save() {
if (this.form.sid) {
userUpdata(this.form).then(res => {
if (res.code == '200') {
this.$message({
message: res.msg,
type: 'success'
})
this.$emit('status', false)
}
})
} else {
let orgSid = this.$refs.Tree.getCheckedKeys()
this.form.deptSid = orgSid.toString()
userAdd(this.form).then(res => {
if (res.code == '200') {
this.$message({
message: res.msg,
type: 'success'
})
this.$emit('status', false)
}
})
let arr = []
this.$refs.Tree.setCheckedKeys(arr);
}
this.reset()
},
reset() {
this.form = {
sid: '',
name: '',
userType: '',
deptSid: '',
postSid: '',
mobile: '',
verificationCode: ''
}
},
//获取验证码
getIdentifying() {
if (this.form.mobile == "") {
this.$alert('请填写手机号码', '', {
confirmButtonText: '确定'
})
return;
}
//验证码倒计时
const TIME_COUNT = 60;
if (!this.timer) {
this.phoneCodeCount = TIME_COUNT;
this.showCode = false;
this.timer = setInterval(() => {
if (this.phoneCodeCount > 0 && this.phoneCodeCount <= TIME_COUNT) {
this.phoneCodeCount--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
let obj = {
phone: this.form.mobile,
}
getCode(obj).then(res => {
if (res.code == '200') {
this.orginTranceNo = res.data.tranceNo;
}
})
},
cancel() {
this.$emit('status', false)
}
}
}
</script>
<style>
</style>

966
demo-web-ui/src/views/userManage/userManageList.vue
View File

@@ -1,483 +1,483 @@
<template>
<div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="用户名">
<el-input v-model="search.userName" clearable></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="search.roleSid" filterable clearable placeholder="请选择">
<el-option v-for="item in roleListAll" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="search.orgName" clearable></el-input>
<!-- <el-select v-model="search.roleSid" clearable placeholder="请选择">-->
<!-- <el-option v-for="(item,i) in roleListAll" :key="i" :label="item.name" :value="item.sid"></el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-button @click="getOrgUserList(1)">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="userTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
设置角色
</el-button>
<el-button @click="initPwd(scope.row)" type="danger" size="mini">
初始化密码
</el-button>
<!-- <el-button @click="del(scope.row)" type="danger" size="mini">
删除
</el-button>-->
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<!-- <span class="tablerow-click" @click="userinfoChange(scope.row)">-->{{ scope.row.userName }}<!--</span>-->
</template>
</el-table-column>
<el-table-column prop="userType" label="用户类型" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="120px" align="center"></el-table-column>
<el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
<el-table-column prop="postName" label="岗位" align="center"></el-table-column>
<el-table-column prop="isEnable" label="是否可用" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-value='1'
inactive-value='0'
active-color="#13ce66"
inactive-color="#ff4949"
@change="enabledChange($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 角色设置 -->
<el-dialog title="设置角色" :visible.sync="roleDialog" width="30%">
<el-form :model="roleForm" :rules="rules" ref="roleForm">
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleSid">
<el-select v-model="roleForm.roleSid" placeholder="请选择" filterable multiple>
<el-option v-for="(item,i) in roleList" :key="i" :label="item.name" :value="item.sid"></el-option>
</el-select>
<!--<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveRole('roleForm')">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 部门设置 -->
<el-dialog title="部门设置" :visible.sync="bm_Dialog" width="30%">
<el-form :model="bm_Form" :rules="rules" ref="bm_Form">
<el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentSid">
<!-- <el-select v-model="bm_Form.departmentSid" placeholder="请选择">
<el-option v-for="item in bm_List"
:key="item.departmentSid"
:label="item.departmentName"
:value="item.departmentSid"
></el-option>
</el-select> -->
<el-cascader
v-model="bm_Form.departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveOrg('bm_Form')">保 存</el-button>
<el-button @click="bm_Dialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.userTypeKey" @change="$forceUpdate()" style="width:300px">
<el-option v-for="(item, i) in userTypeData" :key="i" :label="item.name" :value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>部门</td>
<td>
<el-select v-model="form.deptSid" placeholder="请选择" @change="$forceUpdate()" style="width:300px">
<el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option>
<el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid" :default-checked-keys="checkedId" :default-expand-all='true' :check-strictly='true' :props="defaultProps" @check-change="checkchange">
</el-tree>
</el-select>
</td>
</tr>
<tr>
<td>岗位</td>
<td>
<el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px">
<el-option v-for="(item, i) in postSidData" :key="i" :label="item.name" :value="item.sid"></el-option>
</el-select>
<!--<el-input v-model="form.postSid"></el-input>-->
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<el-input v-model="form.userName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>手机验证码</td>
<td>
<el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px">
<el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button>
<el-button v-show="!showCode" slot="append">{{ phoneCodeCount }} s</el-button>
</el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
userList,
delUser,
initPwd,
setRole,
orgList,
postList,
saveOrgRole,
roleList,
setRoleEnable,
userUpdata
} from '@/api/system/userManage/index.js'
export default {
data() {
return {
editDialog: false,
form: {},
userTypeData: [{
value: '1',
name: '员工'
}, {
value: '2',
name: '客户'
}, {
value: '3',
name: '供应商'
}],
checkedId: [],
orgName: '',
defaultProps: {
children: 'children',
label: 'name'
},
showCode: true,
postSidData: [],
phoneCodeCount: '',
timer: null,
roleListAll: [],
search: {
name: '',
userName: '',
roleSid: ''
},
props: {
value: 'sid',
label: 'name',
children: 'orgDepartmentVoList'
},
treedata: null,
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10 // 每页的数据条数
},
userTable: [],
clientTable: [],
// 设置角色
formLabelWidth: '100',
roleDialog: false,
roleList: [],
roleForm: {
roleSid: '',
userSid: ''
},
// 部门
bm_Dialog: false,
postSid: '',
bm_Form: { departmentSid: '' },
bm_List: [],
rules: {
roleSid: [{ required: true, message: '请选择角色名称', trigger: 'blur' }],
departmentSid: [{ required: true, message: '请选择部门名称', trigger: 'blur' }]
}
}
},
props: ['dataObj'],
watch: {
dataObj: {
handler(val) {
this.getOrgUserList()
},
deep: true
}
},
mounted() {
this.getOrgUserList()
this.getRoleList()
this.getOrgTree()
this.getOrgList()
},
methods: {
// 列表 + 初始化
getOrgUserList(flag) {
if (flag === '1') {
this.page.current = 1
}
let params = this.page
params.params = this.search
userList(params).then(res => {
this.page.total = res.data.total
this.userTable = res.data.records
})
},
getRoleList() {
var param = {}
roleList(param).then(res => {
if (res.code === '200') {
this.roleListAll = res.data
}
})
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getOrgUserList()
},
getOrgTree() { // 获取部门树形列表
function treeArr(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].orgDepartmentVoList.length > 0) {
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
// getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
// let tree = res.data[0].orgDepartmentVoList
// treeArr(tree)
// this.treedata = tree
// })
},
// 设置角色 设置 用户ID
setRole(row) {
this.roleForm.roleSid = []
this.roleDialog = true
this.roleForm.sid = row.sid
this.roleForm.userSid = row.sid
setRole(this.roleForm).then(res => {
this.roleList = res.data
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].checked === '0') {
this.roleForm.roleSid.push(res.data[i].sid)
}
}
// this.roleForm.roleSid = res.data.filter(item=> item.checked =='0')
})
},
// 设置角色 提交
saveRole(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.roleForm.roleSid = this.roleForm.roleSid.toString()
saveOrgRole(this.roleForm).then(res => {
if (res.code === '200') {
this.roleDialog = false
this.getOrgUserList()
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
return false
}
})
},
// 设置部门 提交
saveOrg(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = { // 请求的参数
departmentSid: this.bm_Form.departmentSid[this.bm_Form.departmentSid.length - 1],
staffSid: this.bm_Form.staffSid
}
saveDepartment(params).then(res => {
if (res.code === '200') {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
return false
}
});
},
// 设置部门 提交
save(formName) {
this.form.userType = this.form.userTypeKey;
userUpdata(this.form).then(res => {
if (res.code === '200') {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
this.editDialog = false
}
this.reset()
})
},
initPwd(row) {
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.$message({
type: 'success',
message: res.msg
})
})
})
},
// 修改用户信息
userinfoChange(row) {
var postSid = row.postSid
this.editDialog = true
this.form = Object.assign({}, row)
this.postSid = postSid
this.$nextTick(() => {
this.$refs.Tree.setChecked(this.form.departmentSid, true, true)
})
// this.$emit('status',true)
// this.$emit('item',row)
},
// 删除
del(row) {
this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser({ sid: row.sid }).then(res => {
this.$message({
type: 'success',
message: res.msg
});
this.getOrgUserList()
})
})
},
toNav(src) {
this.$router.push('/' + src)
},
// 获取部门树形
getOrgList(row) {
// this.roleDialog = true
this.checkedId = []
this.Thisrow = row
this.loading = true
let params = {}
orgList(params).then(res => {
this.treedata = res.data
})
},
checkchange(data, checked, indeterminate) {
if (checked) {
this.form.deptSid = data.sid
this.orgName = data.name
let arr = []
arr = [data.sid]
this.$refs.Tree.setCheckedKeys(arr)
this.form.postSid = ''
this.getPost(data.sid)
return
}
},
getPost(orgSid) {
let params = {
sid: orgSid
}
postList(params).then(res => {
this.postSidData = res.data
})
this.form.postSid = this.postSid
},
reset() {
this.form = {}
},
enabledChange(value, row) {
setRoleEnable({
sid: row.sid,
isEnable: value
}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
}
}
}
</script>
<style scoped="scoped">
.el-select > .el-input {
display: block;
width: 300px;
}
</style>
<template>
<div>
<div class="tab-header">
<el-form ref="form" :inline="true" :model="search" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="用户名">
<el-input v-model="search.userName" clearable></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="search.name" clearable></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="search.roleSid" filterable clearable placeholder="请选择">
<el-option v-for="item in roleListAll" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="search.orgName" clearable></el-input>
<!-- <el-select v-model="search.roleSid" clearable placeholder="请选择">-->
<!-- <el-option v-for="(item,i) in roleListAll" :key="i" :label="item.name" :value="item.sid"></el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-button @click="getOrgUserList(1)">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="userTable" border style="width: 100%;">
<el-table-column label="序号" width="50px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template slot-scope="scope">
<el-button @click="setRole(scope.row)" type="primary" size="mini">
设置角色
</el-button>
<el-button @click="initPwd(scope.row)" type="danger" size="mini">
初始化密码
</el-button>
<!-- <el-button @click="del(scope.row)" type="danger" size="mini">
删除
</el-button>-->
</template>
</el-table-column>
<el-table-column prop="userName" label="用户名" align="center">
<template slot-scope="scope">
<!-- <span class="tablerow-click" @click="userinfoChange(scope.row)">-->{{ scope.row.userName }}<!--</span>-->
</template>
</el-table-column>
<el-table-column prop="userType" label="用户类型" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="120px" align="center"></el-table-column>
<el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
<el-table-column prop="postName" label="岗位" align="center"></el-table-column>
<el-table-column prop="isEnable" label="是否可用" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-value='1'
inactive-value='0'
active-color="#13ce66"
inactive-color="#ff4949"
@change="enabledChange($event,scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 角色设置 -->
<el-dialog title="设置角色" :visible.sync="roleDialog" width="30%">
<el-form :model="roleForm" :rules="rules" ref="roleForm">
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleSid">
<el-select v-model="roleForm.roleSid" placeholder="请选择" filterable multiple>
<el-option v-for="(item,i) in roleList" :key="i" :label="item.name" :value="item.sid"></el-option>
</el-select>
<!--<el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle icon="el-icon-plus"></el-button>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveRole('roleForm')">保 存</el-button>
<el-button @click="roleDialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 部门设置 -->
<el-dialog title="部门设置" :visible.sync="bm_Dialog" width="30%">
<el-form :model="bm_Form" :rules="rules" ref="bm_Form">
<el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentSid">
<!-- <el-select v-model="bm_Form.departmentSid" placeholder="请选择">
<el-option v-for="item in bm_List"
:key="item.departmentSid"
:label="item.departmentName"
:value="item.departmentSid"
></el-option>
</el-select> -->
<el-cascader
v-model="bm_Form.departmentSid"
:options="treedata"
:props="props"></el-cascader>
<el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle
icon="el-icon-plus"></el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveOrg('bm_Form')">保 存</el-button>
<el-button @click="bm_Dialog = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>用户类型</td>
<td>
<el-select v-model="form.userTypeKey" @change="$forceUpdate()" style="width:300px">
<el-option v-for="(item, i) in userTypeData" :key="i" :label="item.name" :value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>部门</td>
<td>
<el-select v-model="form.deptSid" placeholder="请选择" @change="$forceUpdate()" style="width:300px">
<el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option>
<el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid" :default-checked-keys="checkedId" :default-expand-all='true' :check-strictly='true' :props="defaultProps" @check-change="checkchange">
</el-tree>
</el-select>
</td>
</tr>
<tr>
<td>岗位</td>
<td>
<el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px">
<el-option v-for="(item, i) in postSidData" :key="i" :label="item.name" :value="item.sid"></el-option>
</el-select>
<!--<el-input v-model="form.postSid"></el-input>-->
</td>
</tr>
<tr>
<td>手机号码</td>
<td>
<el-input v-model="form.userName" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>手机验证码</td>
<td>
<el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px">
<el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button>
<el-button v-show="!showCode" slot="append">{{ phoneCodeCount }} s</el-button>
</el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
userList,
delUser,
initPwd,
setRole,
orgList,
postList,
saveOrgRole,
roleList,
setRoleEnable,
userUpdata
} from '@/api/system/userManage/index.js'
export default {
data() {
return {
editDialog: false,
form: {},
userTypeData: [{
value: '1',
name: '员工'
}, {
value: '2',
name: '客户'
}, {
value: '3',
name: '供应商'
}],
checkedId: [],
orgName: '',
defaultProps: {
children: 'children',
label: 'name'
},
showCode: true,
postSidData: [],
phoneCodeCount: '',
timer: null,
roleListAll: [],
search: {
name: '',
userName: '',
roleSid: ''
},
props: {
value: 'sid',
label: 'name',
children: 'orgDepartmentVoList'
},
treedata: null,
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10 // 每页的数据条数
},
userTable: [],
clientTable: [],
// 设置角色
formLabelWidth: '100',
roleDialog: false,
roleList: [],
roleForm: {
roleSid: '',
userSid: ''
},
// 部门
bm_Dialog: false,
postSid: '',
bm_Form: { departmentSid: '' },
bm_List: [],
rules: {
roleSid: [{ required: true, message: '请选择角色名称', trigger: 'blur' }],
departmentSid: [{ required: true, message: '请选择部门名称', trigger: 'blur' }]
}
}
},
props: ['dataObj'],
watch: {
dataObj: {
handler(val) {
this.getOrgUserList()
},
deep: true
}
},
mounted() {
this.getOrgUserList()
this.getRoleList()
this.getOrgTree()
this.getOrgList()
},
methods: {
// 列表 + 初始化
getOrgUserList(flag) {
if (flag === '1') {
this.page.current = 1
}
let params = this.page
params.params = this.search
userList(params).then(res => {
this.page.total = res.data.total
this.userTable = res.data.records
})
},
getRoleList() {
var param = {}
roleList(param).then(res => {
if (res.code === '200') {
this.roleListAll = res.data
}
})
},
// 分页
pagination(val) {
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getOrgUserList()
},
getOrgTree() { // 获取部门树形列表
function treeArr(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].orgDepartmentVoList.length > 0) {
treeArr(data[i].orgDepartmentVoList)
} else {
delete data[i].orgDepartmentVoList
}
}
}
}
// getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
// let tree = res.data[0].orgDepartmentVoList
// treeArr(tree)
// this.treedata = tree
// })
},
// 设置角色 设置 用户ID
setRole(row) {
this.roleForm.roleSid = []
this.roleDialog = true
this.roleForm.sid = row.sid
this.roleForm.userSid = row.sid
setRole(this.roleForm).then(res => {
this.roleList = res.data
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].checked === '0') {
this.roleForm.roleSid.push(res.data[i].sid)
}
}
// this.roleForm.roleSid = res.data.filter(item=> item.checked =='0')
})
},
// 设置角色 提交
saveRole(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.roleForm.roleSid = this.roleForm.roleSid.toString()
saveOrgRole(this.roleForm).then(res => {
if (res.code === '200') {
this.roleDialog = false
this.getOrgUserList()
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
return false
}
})
},
// 设置部门 提交
saveOrg(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = { // 请求的参数
departmentSid: this.bm_Form.departmentSid[this.bm_Form.departmentSid.length - 1],
staffSid: this.bm_Form.staffSid
}
saveDepartment(params).then(res => {
if (res.code === '200') {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
return false
}
});
},
// 设置部门 提交
save(formName) {
this.form.userType = this.form.userTypeKey;
userUpdata(this.form).then(res => {
if (res.code === '200') {
this.getOrgUserList()
this.bm_Dialog = false
this.$message({
message: res.msg,
type: 'success'
})
this.editDialog = false
}
this.reset()
})
},
initPwd(row) {
this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
initPwd({sid: row.sid}).then(res => {
this.$message({
type: 'success',
message: res.msg
})
})
})
},
// 修改用户信息
userinfoChange(row) {
var postSid = row.postSid
this.editDialog = true
this.form = Object.assign({}, row)
this.postSid = postSid
this.$nextTick(() => {
this.$refs.Tree.setChecked(this.form.departmentSid, true, true)
})
// this.$emit('status',true)
// this.$emit('item',row)
},
// 删除
del(row) {
this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser({ sid: row.sid }).then(res => {
this.$message({
type: 'success',
message: res.msg
});
this.getOrgUserList()
})
})
},
toNav(src) {
this.$router.push('/' + src)
},
// 获取部门树形
getOrgList(row) {
// this.roleDialog = true
this.checkedId = []
this.Thisrow = row
this.loading = true
let params = {}
orgList(params).then(res => {
this.treedata = res.data
})
},
checkchange(data, checked, indeterminate) {
if (checked) {
this.form.deptSid = data.sid
this.orgName = data.name
let arr = []
arr = [data.sid]
this.$refs.Tree.setCheckedKeys(arr)
this.form.postSid = ''
this.getPost(data.sid)
return
}
},
getPost(orgSid) {
let params = {
sid: orgSid
}
postList(params).then(res => {
this.postSidData = res.data
})
this.form.postSid = this.postSid
},
reset() {
this.form = {}
},
enabledChange(value, row) {
setRoleEnable({
sid: row.sid,
isEnable: value
}).then(res => {
this.$message({
type: 'success',
message: res.msg
});
})
}
}
}
</script>
<style scoped="scoped">
.el-select > .el-input {
display: block;
width: 300px;
}
</style>

1247
demo-web-ui/src/views/workflow/definition/definition.vue
View File

File diff suppressed because it is too large Load Diff

70
demo-web-ui/src/views/workflow/definition/definitionAdd.vue
View File

@@ -1,35 +1,35 @@
<template>
<!-- <div>-->
<!-- <bpmn-modeler-->
<!-- ref="refNode"-->
<!-- :xml="xml"-->
<!-- :users="users"-->
<!-- :groups="groups"-->
<!-- :categorys="categorys"-->
<!-- :is-view="false"-->
<!-- @save="save"-->
<!-- @showXML="showXML"-->
<!-- @dataType="dataType"-->
<!-- />-->
<!-- &lt;!&ndash;在线查看xml&ndash;&gt;-->
<!-- <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="60%" append-to-body>-->
<!-- <div>-->
<!-- <pre v-highlight>-->
<!-- <code class="xml">-->
<!-- {{xmlContent}}-->
<!-- </code>-->
<!-- </pre>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- </div>-->
</template>
<script>
export default {
name: "definitionAdd"
}
</script>
<style scoped>
</style>
<template>
<!-- <div>-->
<!-- <bpmn-modeler-->
<!-- ref="refNode"-->
<!-- :xml="xml"-->
<!-- :users="users"-->
<!-- :groups="groups"-->
<!-- :categorys="categorys"-->
<!-- :is-view="false"-->
<!-- @save="save"-->
<!-- @showXML="showXML"-->
<!-- @dataType="dataType"-->
<!-- />-->
<!-- &lt;!&ndash;在线查看xml&ndash;&gt;-->
<!-- <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="60%" append-to-body>-->
<!-- <div>-->
<!-- <pre v-highlight>-->
<!-- <code class="xml">-->
<!-- {{xmlContent}}-->
<!-- </code>-->
<!-- </pre>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- </div>-->
</template>
<script>
export default {
name: "definitionAdd"
}
</script>
<style scoped>
</style>

132
demo-web-ui/src/views/workflow/demo/leavedemo.vue
View File

@@ -1,66 +1,66 @@
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix"><span class="el-icon-document">请假申请</span></div>
<!--初始化流程加载表单信息-->
<el-col :span="16" :offset="4">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
<el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
<el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
<el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
<el-form-item label="待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
<el-form-item label="组织架构"><el-input v-model="form.orgSid" /></el-form-item>
<!-- <el-form-item label="请假原因"><el-input v-model="form.zd" /></el-form-item>
<el-form-item label="请假天数"><el-input v-model="form.days" /></el-form-item>
<el-form-item label="指定人员"><el-input v-model="form.initiator" /></el-form-item>
<el-form-item label="审批意见"><el-input v-model="form.outcome" /></el-form-item>-->
<el-form-item>
<el-button type="primary" @click="onSubmit">申请</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-card>
<el-card class="box-card" style="margin: 20px 0px 30px 0px;">
<div slot="header" class="clearfix"><span class="el-icon-picture-outline">流程图</span></div>
</el-card>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
export default {
data() {
return {
form: {
zd: '',
days: '',
initiator: '',
INITIATOR: '0d8d8119-d476-47ce-89c2-075cd809dda6',
outcome: ''
}
}
},
methods: {
onSubmit() {
const userSid = window.sessionStorage.getItem('userSid')
const _this = this
const param = {
procDefId: 'order_approve_96asleqi:1:227504',
userSid: userSid,
variables: _this.form
}
reqFlow.businessStart(param).then(res => {
alert('操作成功');
this.form.zd1='';
this.form.zd2='';
this.form.zd3='';
this.form.zd4='';
})
}
}
}
</script>
<style></style>
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix"><span class="el-icon-document">请假申请</span></div>
<!--初始化流程加载表单信息-->
<el-col :span="16" :offset="4">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
<el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
<el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
<el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
<el-form-item label="待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
<el-form-item label="组织架构"><el-input v-model="form.orgSid" /></el-form-item>
<!-- <el-form-item label="请假原因"><el-input v-model="form.zd" /></el-form-item>
<el-form-item label="请假天数"><el-input v-model="form.days" /></el-form-item>
<el-form-item label="指定人员"><el-input v-model="form.initiator" /></el-form-item>
<el-form-item label="审批意见"><el-input v-model="form.outcome" /></el-form-item>-->
<el-form-item>
<el-button type="primary" @click="onSubmit">申请</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-card>
<el-card class="box-card" style="margin: 20px 0px 30px 0px;">
<div slot="header" class="clearfix"><span class="el-icon-picture-outline">流程图</span></div>
</el-card>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
export default {
data() {
return {
form: {
zd: '',
days: '',
initiator: '',
INITIATOR: '0d8d8119-d476-47ce-89c2-075cd809dda6',
outcome: ''
}
}
},
methods: {
onSubmit() {
const userSid = window.sessionStorage.getItem('userSid')
const _this = this
const param = {
procDefId: 'order_approve_96asleqi:1:227504',
userSid: userSid,
variables: _this.form
}
reqFlow.businessStart(param).then(res => {
alert('操作成功');
this.form.zd1='';
this.form.zd2='';
this.form.zd3='';
this.form.zd4='';
})
}
}
}
</script>
<style></style>

396
demo-web-ui/src/views/workflow/endtask.vue
View File

@@ -1,198 +1,198 @@
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="天数"><el-input v-model="queryParams.params.zd1" clearable placeholder="天数" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="endTaskList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">流转记录</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleRevoke(scope.row)">撤回</el-button>
</template>
</el-table-column>
<el-table-column label="任务编号" width="150" align="center" prop="taskId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="天数" align="center" width="50px" prop="processVariables.zd1" />
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>
{{ scope.row.startUserName }}
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="60%">
<!--流程流转记录-->
<el-card class="box-card" v-if="flowRecordList">
<div slot="header" class="clearfix">
<span class="el-icon-notebook-1">审批记录</span>
</div>
<el-col :span="16" :offset="4" >
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(item,index ) in flowRecordList"
:key="index"
:icon="setIcon(item.finishTime)"
:color="setColor(item.finishTime)"
>
<p style="font-weight: 700">{{item.taskName}}</p>
<el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeName" style="font-weight: normal;margin-right: 30px;">实际办理： {{item.assigneeName}} <el-tag type="info" size="mini">{{item.deptName}}</el-tag></label>
<label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理： {{item.candidate}}</label><br>
<label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{item.createTime}}</label><br>
<label v-if="item.finishTime" style="font-weight: normal">办结时间： </label><label style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label><br>
<label v-if="item.duration" style="font-weight: normal">耗时： </label><label style="color:#8a909c;font-weight: normal">{{item.duration}}</label>
<p v-if="item.comment">
<el-tag type="success" v-if="item.comment.type === '1'"> {{item.comment.comment}}</el-tag>
<el-tag type="warning" v-if="item.comment.type === '2'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '3'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '6'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '7'"> {{item.comment.comment}}</el-tag>
</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
</el-dialog>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import { flowRecord,finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/workflow/finished";
export default {
data() {
return {editDialog:false,
flowRecordList: [],
queryParams: {
current: 1,
size: 10,
total: 0,
params: { processDefinitionId:'',
name: '',
startTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
endTaskList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = {procInsId: procInsId, deployId: deployId}
flowRecord(params).then(res => {
this.flowRecordList = res.data.flowList;
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData;
this.formConfOpen = true
}
}).catch(res => {
this.goBack();
})
},
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227694"
this.tableLoading = true
reqFlow
.doneTaskList(this.queryParams)
.then(response => {
this.endTaskList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
}, /** 流程流转记录 */
handleFlowRecord(row){
this.getFlowRecordList( row.procInsId, row.deployId);
this.editDialog = true;
/* this.$router.push({ path: '/flowable/task/record/index',
query: {
procInsId: row.procInsId,
deployId: row.deployId,
taskId: row.taskId,
finished: false
}})*/
},
/** 撤回任务 */
handleRevoke(row){
const params = {
instanceId: row.procInsId,
taskId: row.taskId,
userSid: window.sessionStorage.getItem('userSid')
}
revokeProcess(params).then( res => {
this.msgSuccess(res.msg);
this.handleQuery();
});
},
setIcon(val){
if (val){
return "el-icon-check";
}else {
return "el-icon-time";
}
},
setColor(val){
if (val){
return "#2bc418";
}else {
return "#b3bdbb";
}
}
}
}
</script>
<style></style>
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="天数"><el-input v-model="queryParams.params.zd1" clearable placeholder="天数" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="endTaskList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">流转记录</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleRevoke(scope.row)">撤回</el-button>
</template>
</el-table-column>
<el-table-column label="任务编号" width="150" align="center" prop="taskId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="天数" align="center" width="50px" prop="processVariables.zd1" />
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>
{{ scope.row.startUserName }}
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="60%">
<!--流程流转记录-->
<el-card class="box-card" v-if="flowRecordList">
<div slot="header" class="clearfix">
<span class="el-icon-notebook-1">审批记录</span>
</div>
<el-col :span="16" :offset="4" >
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(item,index ) in flowRecordList"
:key="index"
:icon="setIcon(item.finishTime)"
:color="setColor(item.finishTime)"
>
<p style="font-weight: 700">{{item.taskName}}</p>
<el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeName" style="font-weight: normal;margin-right: 30px;">实际办理： {{item.assigneeName}} <el-tag type="info" size="mini">{{item.deptName}}</el-tag></label>
<label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理： {{item.candidate}}</label><br>
<label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{item.createTime}}</label><br>
<label v-if="item.finishTime" style="font-weight: normal">办结时间： </label><label style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label><br>
<label v-if="item.duration" style="font-weight: normal">耗时： </label><label style="color:#8a909c;font-weight: normal">{{item.duration}}</label>
<p v-if="item.comment">
<el-tag type="success" v-if="item.comment.type === '1'"> {{item.comment.comment}}</el-tag>
<el-tag type="warning" v-if="item.comment.type === '2'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '3'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '6'"> {{item.comment.comment}}</el-tag>
<el-tag type="danger" v-if="item.comment.type === '7'"> {{item.comment.comment}}</el-tag>
</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
</el-dialog>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import { flowRecord,finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/workflow/finished";
export default {
data() {
return {editDialog:false,
flowRecordList: [],
queryParams: {
current: 1,
size: 10,
total: 0,
params: { processDefinitionId:'',
name: '',
startTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
endTaskList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = {procInsId: procInsId, deployId: deployId}
flowRecord(params).then(res => {
this.flowRecordList = res.data.flowList;
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData;
this.formConfOpen = true
}
}).catch(res => {
this.goBack();
})
},
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227694"
this.tableLoading = true
reqFlow
.doneTaskList(this.queryParams)
.then(response => {
this.endTaskList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
}, /** 流程流转记录 */
handleFlowRecord(row){
this.getFlowRecordList( row.procInsId, row.deployId);
this.editDialog = true;
/* this.$router.push({ path: '/flowable/task/record/index',
query: {
procInsId: row.procInsId,
deployId: row.deployId,
taskId: row.taskId,
finished: false
}})*/
},
/** 撤回任务 */
handleRevoke(row){
const params = {
instanceId: row.procInsId,
taskId: row.taskId,
userSid: window.sessionStorage.getItem('userSid')
}
revokeProcess(params).then( res => {
this.msgSuccess(res.msg);
this.handleQuery();
});
},
setIcon(val){
if (val){
return "el-icon-check";
}else {
return "el-icon-time";
}
},
setColor(val){
if (val){
return "#2bc418";
}else {
return "#b3bdbb";
}
}
}
}
</script>
<style></style>

612
demo-web-ui/src/views/workflow/form/form.vue
View File

@@ -1,331 +1,281 @@
<template>
<div class="app-container">
<!--Start 列表页面-->
<div v-show=" viewState == 1 ">
<el-menu :default-active="activeIndex" style="" class="el-menu-demo" mode="horizontal">
<el-menu-item
index="1"
style="margin-left: 0;text-align: center; background-color: #028ac8!important;color: #fff;">
流程定义
</el-menu-item>
<div class="new_" @click="handleAdd">新增</div>
<div class="new_out" @click="handleExport"></div>
</el-menu>
<div class="container">
<div class="tab-header">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="表单名称" prop="formName">
<el-input
v-model="queryParams.formName"
placeholder="请输入表单名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- >新增-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- >修改-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- >导出-->
<!-- </el-button>-->
<!-- &lt;!&ndash; </el-col>&ndash;&gt;</el-row>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="表单主键" align="center" prop="formId"/>
<el-table-column label="表单名称" align="center" prop="formName"/>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改流程表单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="表单名称" prop="formName">
<el-input v-model="form.formName" placeholder="请输入表单名称"/>
</el-form-item>
<el-form-item label="表单内容">
<editor v-model="form.formContent" :min-height="192"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!--表单配置详情-->
<el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
<div class="test-form">
<parser :key="new Date().getTime()" :form-conf="formConf"/>
</div>
</el-dialog>
</div>
<!--Start 新增页面-->
<form-add v-show=" viewState == 2"></form-add>
</div>
</template>
<script>
import {listForm, getForm, delForm, addForm, updateForm, exportForm} from "@/api/workflow/form";
// import Editor from '@/components/Editor';
// import Parser from '@/components/parser/Parser'
import formAdd from "./formAdd";
export default {
name: "form",
components: {
Editor,
// Parser,
formAdd
},
data() {
return {
activeIndex: '1',
viewState: 1,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程表单表格数据
formList: [],
// 弹出层标题
title: "",
formConf: {}, // 默认表单数据
formConfOpen: false,
formTitle: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
size: 10, // 每页的数据条数
total: 0, // 默认数据总数
current: 1, // 默认开始页面
params: {
formName: null,
formContent: null,
}
},
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
created() {
this.getList();
},
methods: {
/** 查询流程表单列表 */
getList() {
this.loading = true;
listForm(this.queryParams).then(response => {
this.formList = response.data.records;
this.total = response.data.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
formId: null,
formName: null,
formContent: null,
createTime: null,
updateTime: null,
createBy: null,
updateBy: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.formId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 表单配置信息 */
handleDetail(row) {
this.formConfOpen = true;
this.formTitle = "流程表单配置详细";
this.formConf = JSON.parse(row.formContent)
},
/** 新增按钮操作 */
handleAdd() {
// this.reset();
// this.open = true;
// this.title = "添加流程表单";
this.$router.push({path: '/tool/build/index', query: {formId: null}})
},
/** 修改按钮操作 */
handleUpdate(row) {
// this.reset();
// const formId = row.formId || this.ids
// getForm(formId).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "修改流程表单";
// });
this.$router.push({path: '/tool/build/index', query: {formId: row.formId}})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.formId != null) {
updateForm(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addForm(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const formIds = row.formId || this.ids;
this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delForm(formIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return exportForm(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
}
</script>
<style scoped>
</style>
<template>
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="教师信息" name="roleList">
<div class="container">
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="序号" width="70px" type="index" align="center">
</el-table-column>
<el-table-column label="操作" width="150px" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="教师姓名" width="100px" align="center">
</el-table-column>
<el-table-column prop="infoId" label="教师工号" align="center" width="150px">
</el-table-column>
<el-table-column prop="sex" label="性别" align="center" width="70px">
</el-table-column>
<el-table-column prop="calss" label="所属班级" align="center" width="100px">
</el-table-column>
<el-table-column prop="department" label="系别" align="center" width="100px">
</el-table-column>
<el-table-column prop="speciality" label="专业" align="center" width="150px">
</el-table-column>
<el-table-column prop="studyYear" label="入职年份" align="center" width="150px">
</el-table-column>
<el-table-column prop="remarks" label="成绩录入" align="center">
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
<!-- 编辑角色信息 -->
<el-dialog :title="dialogTitle + '教师信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>教师姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>教师工号</td>
<td>
<el-input v-model="form.infoId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<el-input v-model="form.sex" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>所属班级</td>
<td>
<el-input v-model="form.calss" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>系别</td>
<td>
<el-input v-model="form.department" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>专业</td>
<td>
<el-input v-model="form.speciality" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>入职年份</td>
<td>
<el-input v-model="form.studyYear" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
</el-dialog>
</div>
</el-tab-pane>
<el-tab-pane label="新增教师" name="addrole">
<table class="e-table" cellspacing="0">
<tr>
<td>教师姓名</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>教师工号</td>
<td>
<el-input v-model="form.infoId" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<el-input v-model="form.sex" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>所属班级</td>
<td>
<el-input v-model="form.calss" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>系别</td>
<td>
<el-input v-model="form.department" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>专业</td>
<td>
<el-input v-model="form.speciality" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>入职年份</td>
<td>
<el-input v-model="form.studyYear" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>资源描述</td>
<td>
<el-input type="textarea" v-model="form.remarks"></el-input>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
<!--<el-button @click="editDialog = false">关闭</el-button>-->
</div>
<!--</el-dialog>-->
<!--</div>-->
</el-tab-pane>
</el-tabs>
</template>
<script>
import {
pageList,
saveSourcesInfo,
putSourcesInfo,
delSources,
} from '@/api/system/sources/index.js'
export default {
data() {
return {
activeName: 'roleList',
dialogTitle: '',
editDialog: false,
form: {},
type:'js',
formBackup: Object.assign({}, this.form),
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
psid: '',
sourceId: '',
sourceName: ''
},
},
tableData: [],
zylb: [],
sourceList: []
}
},
mounted() {
this.getPageList(this.page)
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
resetSearch() { // 重置
this.page = {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
name:'',
psid: '',
sourceId: '',
sourceName: ''
},
}
this.getPageList()
},
getPageList() { // 获取列表
pageList(this.type).then((res) => {
this.tableData = res.data
this.page.total = res.data.total
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getPageList()
}
},
save() {
if (this.form.sid) {
putSourcesInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveSourcesInfo(this.form).then(res => {
this.getPageList()
this.activeName = "roleList"
this.$message({
message: res.msg,
type: 'success'
})
})
}
this.reset()
},
reset() {
this.form = {}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
},
deleteRow(row) {
this.$confirm('确定要删除该资源吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delSources({sid: row.sid}).then(res => {
this.getPageList()
this.$message({
type: 'success',
message: '删除成功!'
});
})
})
}
},
}
</script>
<style scoped="scoped" lang="scss">
.my-tabs {
margin-top: 10px;
}
</style>

26
demo-web-ui/src/views/workflow/form/formAdd.vue
View File

@@ -1,13 +1,13 @@
<template>
</template>
<script>
export default {
name: "formAdd"
}
</script>
<style scoped>
</style>
<template>
</template>
<script>
export default {
name: "formAdd"
}
</script>
<style scoped>
</style>

88
demo-web-ui/src/views/workflow/index.vue
View File

@@ -1,44 +1,44 @@
<template>
<div>
<el-tabs v-model="activeName" class="my-tabs" type="card" @tab-click="handleClick">
<el-tab-pane label="请假示例" name="first"><leavedemo /></el-tab-pane>
<el-tab-pane label="流程列表" name="second"><processlist /></el-tab-pane>
<el-tab-pane label="我的流程" name="third"><myprocess /></el-tab-pane>
<el-tab-pane label="待办任务" name="fourth"><mytask /></el-tab-pane>
<el-tab-pane label="已办任务" name="fifth"><endtask /></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import leavedemo from './demo/leavedemo.vue'
import processlist from './processlist.vue'
import myprocess from './myprocess.vue'
import mytask from './mytask.vue'
import endtask from './endtask.vue'
export default {
components: {
leavedemo,
processlist,
myprocess,
mytask,
endtask
},
data() {
return {
activeName: 'first'
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
}
}
}
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>
<template>
<div>
<el-tabs v-model="activeName" class="my-tabs" type="card" @tab-click="handleClick">
<el-tab-pane label="请假示例" name="first"><leavedemo /></el-tab-pane>
<el-tab-pane label="流程列表" name="second"><processlist /></el-tab-pane>
<el-tab-pane label="我的流程" name="third"><myprocess /></el-tab-pane>
<el-tab-pane label="待办任务" name="fourth"><mytask /></el-tab-pane>
<el-tab-pane label="已办任务" name="fifth"><endtask /></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import leavedemo from './demo/leavedemo.vue'
import processlist from './processlist.vue'
import myprocess from './myprocess.vue'
import mytask from './mytask.vue'
import endtask from './endtask.vue'
export default {
components: {
leavedemo,
processlist,
myprocess,
mytask,
endtask
},
data() {
return {
activeName: 'first'
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
}
}
}
</script>
<style scoped="scoped">
.my-tabs {
margin-top: 10px;
}
</style>

338
demo-web-ui/src/views/workflow/myprocess.vue
View File

@@ -1,169 +1,169 @@
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.name" clearable placeholder="请输入名称" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.deployTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="myProcessList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleStop(scope.row)">取消申请</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:deployment:remove']"
>删除</el-button
>
</template>
</el-table-column>
<el-table-column label="流程编号" width="300" align="center" prop="procInsId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="流程类别" align="center" prop="category" width="100px" />
<el-table-column label="流程版本" align="center" width="80px">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="提交时间" align="center" prop="createTime" width="180" />
<el-table-column label="流程状态" align="center" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
<el-tag v-if="scope.row.finishTime != null" type="success" size="mini">已完成</el-tag>
</template>
</el-table-column>
<el-table-column label="耗时" align="center" prop="duration" width="180" />
<el-table-column label="当前节点" align="center" prop="taskName" />
<el-table-column label="办理" align="center">
<template slot-scope="scope">
<label v-if="scope.row.assigneeName">
{{ scope.row.assigneeName }}
<el-tag type="info" size="mini">{{ scope.row.deptName }}</el-tag>
</label>
<label v-if="scope.row.candidate">{{ scope.row.candidate }}</label>
</template>
</el-table-column>
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import { myProcessList, stopProcess,delDeployment } from "@/api/workflow/process";
export default {
data() {
return {
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
deployTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
myProcessList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.tableLoading = true
reqFlow
.myProcessList(this.queryParams)
.then(response => {
this.myProcessList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
} ,
/** 取消流程申请 */
handleStop(row) {
const params = {
instanceId: row.procInsId,
userSid: '0d8d8119-d476-47ce-89c2-075cd809dda6'
};
stopProcess(params).then(res => {
this.msgSuccess(res.msg);
this.getList();
});
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.$router.push({
path: "/flowable/task/record/index",
query: {
procInsId: row.procInsId,
deployId: row.deployId,
taskId: row.taskId,
finished: false
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
console.log(row);
const ids = row.procInsId || this.ids;
this.$confirm(
'是否确认删除流程定义编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(function() {
return delDeployment(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
});
}
}
}
</script>
<style></style>
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.name" clearable placeholder="请输入名称" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.deployTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="myProcessList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleStop(scope.row)">取消申请</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:deployment:remove']"
>删除</el-button
>
</template>
</el-table-column>
<el-table-column label="流程编号" width="300" align="center" prop="procInsId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="流程类别" align="center" prop="category" width="100px" />
<el-table-column label="流程版本" align="center" width="80px">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="提交时间" align="center" prop="createTime" width="180" />
<el-table-column label="流程状态" align="center" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
<el-tag v-if="scope.row.finishTime != null" type="success" size="mini">已完成</el-tag>
</template>
</el-table-column>
<el-table-column label="耗时" align="center" prop="duration" width="180" />
<el-table-column label="当前节点" align="center" prop="taskName" />
<el-table-column label="办理" align="center">
<template slot-scope="scope">
<label v-if="scope.row.assigneeName">
{{ scope.row.assigneeName }}
<el-tag type="info" size="mini">{{ scope.row.deptName }}</el-tag>
</label>
<label v-if="scope.row.candidate">{{ scope.row.candidate }}</label>
</template>
</el-table-column>
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import { myProcessList, stopProcess,delDeployment } from "@/api/workflow/process";
export default {
data() {
return {
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
deployTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
myProcessList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.tableLoading = true
reqFlow
.myProcessList(this.queryParams)
.then(response => {
this.myProcessList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
} ,
/** 取消流程申请 */
handleStop(row) {
const params = {
instanceId: row.procInsId,
userSid: '0d8d8119-d476-47ce-89c2-075cd809dda6'
};
stopProcess(params).then(res => {
this.msgSuccess(res.msg);
this.getList();
});
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.$router.push({
path: "/flowable/task/record/index",
query: {
procInsId: row.procInsId,
deployId: row.deployId,
taskId: row.taskId,
finished: false
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
console.log(row);
const ids = row.procInsId || this.ids;
this.$confirm(
'是否确认删除流程定义编号为"' + ids + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(function() {
return delDeployment(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
});
}
}
}
</script>
<style></style>

366
demo-web-ui/src/views/workflow/mytask.vue
View File

@@ -1,183 +1,183 @@
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.days" clearable placeholder="请输入名称" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="myTaskList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)">处理</el-button>
</template>
</el-table-column>
<el-table-column label="请假天数" width="90" align="center" prop="processVariables.zd1" />
<el-table-column label="任务编号" width="300" align="center" prop="taskId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>
{{ scope.row.startUserName }}
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
<el-card class="box-card">
<el-col :span="16" :offset="4">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
<el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
<el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
<el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
<el-form-item label="指定待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
<el-form-item>
<el-button type="primary" @click="handleComplete">同意</el-button>
<el-button @click="handleReject">驳回</el-button>
<el-button @click="getNextNode">下一环节</el-button>
</el-form-item>
</el-form>
</el-col>
</el-card>
</el-dialog>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import {complete} from'@/api/workflow/flow'
import { rejectTask } from "@/api/workflow/todo";
export default {
data() {
return {
editDialog:false,
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
processDefinitionId:'',
days: '',
startTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
myTaskList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: '',
taskId:"",
userSid:"",
comment:"",
instanceId:""
}
}
},
created() {
this.loadList()
},
methods: {
/** 审批任务 */
handleComplete() {
this.$refs["form"].validate(valid => {
if (valid) {
complete(this.form).then(response => {
this.editDialog = false;
this.handleQuery();
});
}
});
},
// 跳转到处理页面
handleProcess(row) {
this.editDialog = true
this.form.zd1=row.processVariables.zd1;
this.form.zd2=row.processVariables.zd2;
this.form.zd3=row.processVariables.zd3;
this.form.zd4=row.processVariables.zd4;
/*
this.form.zd=row.processVariables.zd;
this.form.outcome=row.processVariables.outcome;
this.form.initiator=row.processVariables.initiator;
this.form.days=row.processVariables.days;
*/
this.form.taskId=row.taskId;
this.form.userSid= window.sessionStorage.getItem('userSid');
this.form.comment='同意';
this.form.instanceId=row.procInsId;
},
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227504"
this.tableLoading = true
reqFlow
.todoTaskList(this.queryParams)
.then(response => {
this.myTaskList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
},
/** 驳回任务 */
handleReject() {
const params = {
taskId: this.form.taskId
}
rejectTask(params).then(res => {
this.msgSuccess(res.msg);
this.goBack();
});
},
/** 下一环节 */
getNextNode() {
const params = {
taskId: this.form.taskId
}
reqFlow.getNextNodes(params).then(res => {
this.msgSuccess(res.msg);
});
}
}
}
</script>
<style></style>
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.days" clearable placeholder="请输入名称" /></el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
</el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="myTaskList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)">处理</el-button>
</template>
</el-table-column>
<el-table-column label="请假天数" width="90" align="center" prop="processVariables.zd1" />
<el-table-column label="任务编号" width="300" align="center" prop="taskId" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>
{{ scope.row.startUserName }}
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag>
</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
<!-- 编辑信息 -->
<el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
<el-card class="box-card">
<el-col :span="16" :offset="4">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
<el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
<el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
<el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
<el-form-item label="指定待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
<el-form-item>
<el-button type="primary" @click="handleComplete">同意</el-button>
<el-button @click="handleReject">驳回</el-button>
<el-button @click="getNextNode">下一环节</el-button>
</el-form-item>
</el-form>
</el-col>
</el-card>
</el-dialog>
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
import {complete} from'@/api/workflow/flow'
import { rejectTask } from "@/api/workflow/todo";
export default {
data() {
return {
editDialog:false,
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
processDefinitionId:'',
days: '',
startTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
myTaskList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: '',
taskId:"",
userSid:"",
comment:"",
instanceId:""
}
}
},
created() {
this.loadList()
},
methods: {
/** 审批任务 */
handleComplete() {
this.$refs["form"].validate(valid => {
if (valid) {
complete(this.form).then(response => {
this.editDialog = false;
this.handleQuery();
});
}
});
},
// 跳转到处理页面
handleProcess(row) {
this.editDialog = true
this.form.zd1=row.processVariables.zd1;
this.form.zd2=row.processVariables.zd2;
this.form.zd3=row.processVariables.zd3;
this.form.zd4=row.processVariables.zd4;
/*
this.form.zd=row.processVariables.zd;
this.form.outcome=row.processVariables.outcome;
this.form.initiator=row.processVariables.initiator;
this.form.days=row.processVariables.days;
*/
this.form.taskId=row.taskId;
this.form.userSid= window.sessionStorage.getItem('userSid');
this.form.comment='同意';
this.form.instanceId=row.procInsId;
},
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227504"
this.tableLoading = true
reqFlow
.todoTaskList(this.queryParams)
.then(response => {
this.myTaskList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
},
/** 驳回任务 */
handleReject() {
const params = {
taskId: this.form.taskId
}
rejectTask(params).then(res => {
this.msgSuccess(res.msg);
this.goBack();
});
},
/** 下一环节 */
getNextNode() {
const params = {
taskId: this.form.taskId
}
reqFlow.getNextNodes(params).then(res => {
this.msgSuccess(res.msg);
});
}
}
}
</script>
<style></style>

234
demo-web-ui/src/views/workflow/processlist.vue
View File

@@ -1,117 +1,117 @@
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.name" clearable placeholder="请输入名称" /></el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="processList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleStop(scope.row)">取消申请</el-button>
</template>
</el-table-column>
<el-table-column label="流程编号" width="300" align="center" prop="deploymentId" />
<el-table-column label="流程标识" align="center" prop="key" />
<el-table-column label="流程分类" align="center" prop="category" />
<el-table-column label="流程名称(流程图)" align="center">
<template slot-scope="scope">
<el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
<span>{{ scope.row.name }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="挂载表单" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
<span>{{ scope.row.formName }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
<el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
export default {
data() {
return {
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
deployTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
processList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.tableLoading = true
reqFlow
.myProcessList(this.queryParams)
.then(response => {
this.processList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
}
}
}
</script>
<style></style>
<template>
<div>
<div class="tab-header">
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="名称"><el-input v-model="queryParams.params.name" clearable placeholder="请输入名称" /></el-form-item>
<el-button @click="handleQuery">查询</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="tableLoading" :data="processList" border>
<el-table-column label="序号" width="50px" type="index" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-tickets" @click="handleStop(scope.row)">取消申请</el-button>
</template>
</el-table-column>
<el-table-column label="流程编号" width="300" align="center" prop="deploymentId" />
<el-table-column label="流程标识" align="center" prop="key" />
<el-table-column label="流程分类" align="center" prop="category" />
<el-table-column label="流程名称(流程图)" align="center">
<template slot-scope="scope">
<el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
<span>{{ scope.row.name }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="挂载表单" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
<span>{{ scope.row.formName }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
<el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180" />
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
</div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
export default {
data() {
return {
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
deployTime: '',
userSid: window.sessionStorage.getItem('userSid')
}
},
tableLoading: false,
processList: [],
form: {
zd: '',
days: '',
initiator: '',
outcome: ''
}
}
},
created() {
this.loadList()
},
methods: {
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryForm'].resetFields()
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
loadList() {
this.tableLoading = true
reqFlow
.myProcessList(this.queryParams)
.then(response => {
this.processList = response.data.records
this.queryParams.total = response.data.total
this.tableLoading = false
})
.catch(e => {
this.tableLoading = false
})
},
// 分页
pagination(val) {
this.queryParams.current = val.pageNum
this.queryParams.size = val.pageSize
this.loadList()
}
}
}
</script>
<style></style>

64
demo-web-ui/src/views/workflow/task/record/flow.vue
View File

@@ -1,32 +1,32 @@
<template>
<div>
<bpmn-modeler
ref="refNode"
:xml="xmlData"
:is-view="true"
:taskList="taskData"
/>
</div>
</template>
<script>
import bpmnModeler from '@/components/Process/index'
export default {
name: "Flow",
components: {
bpmnModeler
},
props: {
xmlData: {
type: String,
default: ''
},
taskData: {
type: Array,
default: () => []
}
},
data() {
return {};
}
};
</script>
<template>
<div>
<bpmn-modeler
ref="refNode"
:xml="xmlData"
:is-view="true"
:taskList="taskData"
/>
</div>
</template>
<script>
import bpmnModeler from '@/components/Process/index'
export default {
name: "Flow",
components: {
bpmnModeler
},
props: {
xmlData: {
type: String,
default: ''
},
taskData: {
type: Array,
default: () => []
}
},
data() {
return {};
}
};
</script>

24
demo-web-ui/src/views/workflow/task/record/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
11111111111111111111111111111111
</div>
</template>
<script>
export default {
data() {
}
}
</script>
<template>
<div>
11111111111111111111111111111111
</div>
</template>
<script>
export default {
data() {
}
}
</script>