48 changed files with 5051 additions and 1300 deletions
@ -1,78 +0,0 @@ |
|||
<template> |
|||
<el-breadcrumb class="app-breadcrumb" separator="/"> |
|||
<transition-group name="breadcrumb"> |
|||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
|||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> |
|||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> |
|||
</el-breadcrumb-item> |
|||
</transition-group> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
import pathToRegexp from 'path-to-regexp' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
levelList: null |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.getBreadcrumb() |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBreadcrumb() |
|||
}, |
|||
methods: { |
|||
getBreadcrumb() { |
|||
// only show routes with meta.title |
|||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
|||
const first = matched[0] |
|||
|
|||
// if (!this.isDashboard(first)) { |
|||
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) |
|||
// } |
|||
|
|||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) |
|||
}, |
|||
isDashboard(route) { |
|||
const name = route && route.name |
|||
if (!name) { |
|||
return false |
|||
} |
|||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() |
|||
}, |
|||
pathCompile(path) { |
|||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 |
|||
const { params } = this.$route |
|||
var toPath = pathToRegexp.compile(path) |
|||
return toPath(params) |
|||
}, |
|||
handleLink(item) { |
|||
const { redirect, path } = item |
|||
if (redirect) { |
|||
this.$router.push(redirect) |
|||
return |
|||
} |
|||
this.$router.push(this.pathCompile(path)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.app-breadcrumb.el-breadcrumb { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: 50px; |
|||
margin-left: 8px; |
|||
|
|||
.no-redirect { |
|||
color: #97a8be; |
|||
cursor: text; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,44 +0,0 @@ |
|||
<template> |
|||
<div style="padding: 0 15px;" @click="toggleClick"> |
|||
<svg |
|||
:class="{'is-active':isActive}" |
|||
class="hamburger" |
|||
viewBox="0 0 1024 1024" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
width="64" |
|||
height="64" |
|||
> |
|||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> |
|||
</svg> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Hamburger', |
|||
props: { |
|||
isActive: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleClick() { |
|||
this.$emit('toggleClick') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.hamburger { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.hamburger.is-active { |
|||
transform: rotate(180deg); |
|||
} |
|||
</style> |
|||
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
|||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|||
<use :xlink:href="iconName" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script> |
|||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
|||
import { isExternal } from '@/utils/validate' |
|||
|
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
iconClass: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
isExternal() { |
|||
return isExternal(this.iconClass) |
|||
}, |
|||
iconName() { |
|||
return `#icon-${this.iconClass}` |
|||
}, |
|||
svgClass() { |
|||
if (this.className) { |
|||
return 'svg-icon ' + this.className |
|||
} else { |
|||
return 'svg-icon' |
|||
} |
|||
}, |
|||
styleExternalIcon() { |
|||
return { |
|||
mask: `url(${this.iconClass}) no-repeat 50% 50%`, |
|||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-external-icon { |
|||
background-color: currentColor; |
|||
mask-size: cover!important; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -1,129 +0,0 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
|
|||
|
|||
|
|||
|
|||
<el-row> |
|||
<el-col :span="12"> |
|||
|
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event)"> |
|||
<p class="ellipsis tree_nav" v-if="!searchVal"> |
|||
<span @click="getDepartmentList(309)" class="ellipsis">全部</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list"/> |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :span="12"> |
|||
|
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
if(this.data !== null){ |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedDepartmentList.length + this.checkedEmployessList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
}, |
|||
resList() { |
|||
let data = [{ |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.unshift({ |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
return data |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedDepartmentList: [], |
|||
checkedEmployessList: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
saveDialog() { |
|||
let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({ |
|||
type: item.employeeName ? 1 : 3, |
|||
targetId: item.id, |
|||
name: item.employeeName || item.departmentName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedDepartmentList = []; |
|||
this.checkedEmployessList = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -1,146 +0,0 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane label="组织架构" name="1"></el-tab-pane> |
|||
<el-tab-pane label="角色列表" name="2"></el-tab-pane> |
|||
</el-tabs> |
|||
<p class="ellipsis tree_nav" v-if="activeName==1&&!searchVal"> |
|||
<span @click="getDepartmentList(0)" class="ellipsis">天下</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list" style="height: 360px;"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.activeName = "1"; |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
if(this.data !== null) { |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
this.checkedRoleList = this.data.filter(item => item.type === 2).map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedEmployessList.length + this.checkedRoleList.length + this.checkedDepartmentList.length |
|||
}, |
|||
list() { |
|||
if (this.activeName === '2') { |
|||
return [{ |
|||
type: 'role', |
|||
not: false, |
|||
data: this.roles, |
|||
isActiveItem: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
change: (item) => this.$func.toChecked(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} else { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
} |
|||
}, |
|||
resList() { |
|||
let data = [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}, { |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.splice(1, 0, { |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
return data |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
checkedEmployessList: [], |
|||
checkedDepartmentList: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClick() { |
|||
this.searchVal = ""; |
|||
this.conditionRoleSearchName = ""; |
|||
if (this.activeName == 1) { |
|||
this.getDepartmentList(); |
|||
} else { |
|||
this.getRoleList(); |
|||
} |
|||
}, |
|||
saveDialog() { |
|||
let checkedList = [...this.checkedRoleList, ...this.checkedEmployessList, ...this.checkedDepartmentList].map(item => ({ |
|||
type: item.employeeName ? 1 : (item.roleName ? 2 : 3), |
|||
targetId: item.id || item.roleId, |
|||
name: item.employeeName || item.roleName || item.departmentName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedEmployessList = []; |
|||
this.checkedRoleList = []; |
|||
this.checkedDepartmentList = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -1,72 +0,0 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:16:58 |
|||
* @FilePath: /Workflow/src/components/dialog/errorDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="提示" :visible.sync="visibleDialog"> |
|||
<div class="ant-confirm-body"> |
|||
<i class="anticon anticon-close-circle" style="color: #f00;"></i> |
|||
<span class="ant-confirm-title">当前无法发布</span> |
|||
<div class="ant-confirm-content"> |
|||
<div> |
|||
<p class="error-modal-desc">以下内容不完善，需进行修改</p> |
|||
<div class="error-modal-list"> |
|||
<div class="error-modal-item" v-for="(item,index) in list" :key="index"> |
|||
<div class="error-modal-item-label">流程设计</div> |
|||
<div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="visibleDialog = false">我知道了</el-button> |
|||
<el-button type="primary" @click="visibleDialog = false">前往修改</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: ["list", "visible"], |
|||
data() { |
|||
return { |
|||
visibleDialog: false, |
|||
} |
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = val |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.ant-confirm-body .ant-confirm-title { |
|||
color: rgba(0, 0, 0, .85); |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 1.4; |
|||
display: block; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.ant-confirm-body .ant-confirm-content { |
|||
margin-left: 38px; |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, .65); |
|||
margin-top: 8px |
|||
} |
|||
|
|||
.ant-confirm-body>.anticon { |
|||
font-size: 22px; |
|||
margin-right: 16px; |
|||
float: left |
|||
} |
|||
</style> |
|||
@ -1,92 +0,0 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:25:18 |
|||
* @FilePath: /Workflow/src/components/dialog/roleDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择角色" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)"> |
|||
<selectBox :list="list" /> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getRoleList(); |
|||
this.searchVal = ""; |
|||
this.checkedRoleList = this.data.map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedRoleList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
type: 'role', |
|||
not: true, |
|||
data: this.roles, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
|||
change: (item) => this.checkedRoleList = [item] |
|||
}] |
|||
}, |
|||
resList() { |
|||
return [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
saveDialog() { |
|||
let checkedList = this.checkedRoleList.map(item => ({ |
|||
type: 2, |
|||
targetId: item.roleId, |
|||
name: item.roleName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedRoleList = []; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -1,151 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<el-button size="small" @click="showDialog()">选择考核项目</el-button> |
|||
</div> |
|||
|
|||
<el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :append-to-body="true"> |
|||
<div class="gva-search-box"> |
|||
<el-form ref="searchForm" :inline="true" :model="projectSearchInfo"> |
|||
<el-form-item label="考核项目名称"> |
|||
<el-input |
|||
placeholder="请输入名称" |
|||
v-model="projectSearchInfo.title" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="考核项目状态"> |
|||
<el-select v-model="projectSearchInfo.state" clearable placeholder="请选择状态"> |
|||
<el-option :value=1 label="正常">正常</el-option> |
|||
<el-option :value=2 label="禁止">禁止</el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="所属考核类别"> |
|||
<el-select v-model="projectSearchInfo.parentId" clearable placeholder="请选择状态"> |
|||
<el-option |
|||
v-for="item in dutyclasslist" |
|||
:key="item.outId" |
|||
:label="item.title" |
|||
:value="item.outId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
|||
<!-- <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> --> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="gva-table-box"> |
|||
<el-table :data="assessList"> |
|||
<!-- <el-table-column |
|||
type="selection" |
|||
width="55" |
|||
/> --> |
|||
<el-table-column align="left" label="所属考核类别" prop="parentTitle"/> |
|||
<el-table-column align="left" label="考核项目名称" prop="title"/> |
|||
<el-table-column align="left" label="考核项目说明" prop="content"/> |
|||
<el-table-column align="left" fixed="right" label="操作" width="200"> |
|||
<template #default="scope"> |
|||
<el-button type="primary" round @click="checked(scope.row)">选中</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="gva-pagination"> |
|||
<el-pagination |
|||
:current-page="projectSearchInfo.page" |
|||
:page-size="projectSearchInfo.pageSize" |
|||
:page-sizes="[10, 30, 50, 100]" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@current-change="handleCurrentChange" |
|||
@size-change="handleSizeChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- <span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
|||
</span> --> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
dutyclasslist |
|||
} from '@/api/duty/dimension' |
|||
import { |
|||
assessList, |
|||
} from '@/api/duty/project' |
|||
export default { |
|||
data() { |
|||
return { |
|||
projectTitle:'', |
|||
total:'', |
|||
searchList:{ |
|||
page:1, |
|||
pagesize:10000, |
|||
}, |
|||
dutyclasslist:{}, |
|||
projectSearchInfo:{ |
|||
page: 1, |
|||
pageSize: 10, |
|||
state:1, |
|||
}, |
|||
dialogVisible: false, |
|||
assessList:null, |
|||
} |
|||
}, |
|||
created () { |
|||
this.getProjectList(); |
|||
this.getDutyclasslist(); |
|||
}, |
|||
methods: { |
|||
// 条件搜索前端看此方法 |
|||
onSubmit() { |
|||
this.page = 1 |
|||
this.pageSize = 10 |
|||
|
|||
this.getProjectList() |
|||
}, |
|||
// pagesize改变 |
|||
handleSizeChange(val) { |
|||
this.projectSearchInfo.pageSize=val |
|||
}, |
|||
// 页码改变 |
|||
handleCurrentChange(val) { |
|||
this.projectSearchInfo.page=val |
|||
}, |
|||
// 获取考核类别列表 |
|||
async getDutyclasslist(){ |
|||
const res = await dutyclasslist(this.searchList) |
|||
this.dutyclasslist=res.data.list; |
|||
}, |
|||
// 点击按钮事件 |
|||
showDialog(){ |
|||
this.dialogVisible=true; |
|||
}, |
|||
// 获取考核项目列表 |
|||
async getProjectList(){ |
|||
const res = await assessList(this.projectSearchInfo) |
|||
this.assessList=res.data.list; |
|||
this.projectSearchInfo.page=res.data.page; |
|||
this.projectSearchInfo.pageSize=res.data.pageSize; |
|||
this.total=res.data.total; |
|||
}, |
|||
// 选中 |
|||
checked(row){ |
|||
this.projectTitle=row.title; |
|||
this.$emit('checkedInfo',row) |
|||
this.dialogVisible=false |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -1,88 +0,0 @@ |
|||
<!-- eslint-disable vue/no-template-key --> |
|||
<!-- |
|||
* @Date: 2022-08-26 17:18:14 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:17:23 |
|||
* @FilePath: /Workflow/src/components/selectBox.vue |
|||
--> |
|||
<template> |
|||
<ul class="select-box"> |
|||
<template v-for="elem in list"> |
|||
<template v-if="elem.type === 'role'"> |
|||
<li v-for="item in elem.data" :key="item.roleId" |
|||
class="check_box" |
|||
:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|||
@click="elem.change(item)"> |
|||
<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|||
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'department'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}"> |
|||
<a v-if="elem.isDepartment" |
|||
:class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)"> |
|||
<img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|||
<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|||
<i @click="elem.next(item)">下级</i> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'employee'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box"> |
|||
<a :class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)" |
|||
:title="item.departmentNames"> |
|||
<img v-if="item.icon!=''" :src="item.icon"> |
|||
<img v-else-if="(item.icon==''&&item.iconToBase64!='') " :src="item.iconToBase64"> |
|||
<img v-else src="@/assets/images/icon_people.png"> |
|||
{{item.employeeName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.select-box { |
|||
height: 420px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
padding: 5px 0; |
|||
|
|||
i { |
|||
float: right; |
|||
padding-left: 24px; |
|||
padding-right: 10px; |
|||
color: #3195f8; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
background: url(~@/assets/images/next_level_active.png) no-repeat 10px center; |
|||
border-left: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
a.active+i { |
|||
color: rgb(197, 197, 197); |
|||
background-image: url(~@/assets/images/next_level.png); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
img { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,100 +0,0 @@ |
|||
<!-- eslint-disable vue/no-template-key --> |
|||
<!-- |
|||
* @Date: 2022-08-26 16:29:24 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:17:24 |
|||
* @FilePath: /Workflow/src/components/selectResult.vue |
|||
--> |
|||
<template> |
|||
<div class="select-result l"> |
|||
<p class="clear">已选（{{total}}） |
|||
<a @click="$emit('del')">清空</a> |
|||
</p> |
|||
<ul> |
|||
<template v-for="({type, data, cancel}) in list"> |
|||
<template v-if="type === 'role'"> |
|||
<li v-for="item in data" :key="item.roleId"> |
|||
<img src="@/assets/images/icon_role.png"> |
|||
<span>{{item.roleName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'department'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<img src="@/assets/images/icon_file.png"> |
|||
<span>{{item.departmentName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'employee'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<img src="@/assets/images/icon_people.png"> |
|||
<span>{{item.employeeName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
total: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
list: { |
|||
type: Array, |
|||
default: () => [{ type: 'role', data: [], cancel: function () { } }] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.select-result { |
|||
width: 276px; |
|||
height: 100%; |
|||
font-size: 12px; |
|||
|
|||
ul { |
|||
height: 460px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
margin: 11px 26px 13px 19px; |
|||
line-height: 17px; |
|||
|
|||
span { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
img { |
|||
&:first-of-type { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
&:last-of-type { |
|||
float: right; |
|||
margin-top: 2px; |
|||
width: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
p { |
|||
padding-left: 19px; |
|||
padding-right: 20px; |
|||
line-height: 37px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
|
|||
a { |
|||
float: right; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,137 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-20 15:41:47 |
|||
@ 备注: 选择成员模组 |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event)"> |
|||
<p class="ellipsis tree_nav" v-if="!searchVal"> |
|||
<span @click="getDepartmentList(309)" class="ellipsis">所有</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox,selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
data() { |
|||
return { |
|||
checkedDepartmentList: [], |
|||
checkedEmployessList: [], |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
|
|||
if(this.data){ |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId ,icon ,iconToBase64}) => ({ |
|||
employeeName: name, |
|||
id: targetId, |
|||
icon: icon, |
|||
iconToBase64: iconToBase64 |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedDepartmentList.length + this.checkedEmployessList.length |
|||
}, |
|||
list() { |
|||
if (this.activeName === '2') { |
|||
return [{ |
|||
type: 'role', |
|||
not: false, |
|||
data: this.roles, |
|||
isActiveItem: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
change: (item) => this.$func.toChecked(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} else { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
} |
|||
}, |
|||
//已选择 |
|||
resList() { |
|||
let data = [{ |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.unshift({ |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
// console.log("已选择----》",data) |
|||
return data |
|||
} |
|||
}, |
|||
methods:{ |
|||
saveDialog() { |
|||
let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({ |
|||
type: item.employeeName ? "1" : "3", |
|||
targetId: item.id, |
|||
icon: item.icon, |
|||
iconToBase64: item.iconToBase64, |
|||
name: item.employeeName || item.departmentName |
|||
})) |
|||
// console.log("checkedList--->",checkedList); |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
//清除已选择 |
|||
delList() { |
|||
this.checkedDepartmentList = []; |
|||
this.checkedEmployessList = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-22 08:38:45 |
|||
@ 备注: 抄送人设置弹窗选择人员 |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane label="组织架构" name="1"></el-tab-pane> |
|||
<el-tab-pane label="角色列表" name="2"></el-tab-pane> |
|||
</el-tabs> |
|||
<p class="ellipsis tree_nav" v-if="activeName==1&&!searchVal"> |
|||
<span @click="getDepartmentList(309)" class="ellipsis">所有</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list" style="height: 360px;"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
data() { |
|||
return { |
|||
checkedDepartmentList: [], //行政组织 |
|||
checkedEmployessList: [], //人员 |
|||
checkedRoleList: [], //角色 |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.activeName = "1"; |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
if(this.data){ |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId ,icon ,iconToBase64 }) => ({ |
|||
employeeName: name, |
|||
id: targetId, |
|||
icon: icon, |
|||
iconToBase64: iconToBase64 |
|||
})); |
|||
this.checkedRoleList = this.data.filter(item => item.type === 2).map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedEmployessList.length + this.checkedRoleList.length + this.checkedDepartmentList.length |
|||
}, |
|||
//数据列表 |
|||
list() { |
|||
if (this.activeName === '2') { |
|||
return [{ |
|||
type: 'role', |
|||
not: false, |
|||
data: this.roles, |
|||
isActiveItem: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
change: (item) => this.$func.toChecked(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} else { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
} |
|||
}, |
|||
//已选择 |
|||
resList() { |
|||
let data = [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}, { |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.splice(1, 0, { |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
return data |
|||
}, |
|||
}, |
|||
methods:{ |
|||
//保存选择 |
|||
saveDialog() { |
|||
// let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({ |
|||
// type: item.employeeName ? 1 : 3, |
|||
// targetId: item.id, |
|||
// icon: item.icon, |
|||
// iconToBase64: item.iconToBase64, |
|||
// name: item.employeeName || item.departmentName |
|||
// })) |
|||
|
|||
let checkedList = [...this.checkedRoleList, ...this.checkedEmployessList, ...this.checkedDepartmentList].map(item => ({ |
|||
type: item.employeeName ? 1 : (item.roleName ? 2 : 3), |
|||
targetId: item.id || item.roleId, |
|||
name: item.employeeName || item.roleName || item.departmentName, |
|||
icon: item.icon, |
|||
iconToBase64: item.iconToBase64, |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
console.log("保存选择",checkedList) |
|||
}, |
|||
//清除选择 |
|||
delList() { |
|||
this.checkedEmployessList = []; |
|||
this.checkedRoleList = []; |
|||
this.checkedDepartmentList = [] |
|||
}, |
|||
//选人员、角色 |
|||
handleClick() { |
|||
this.searchVal = ""; |
|||
this.conditionRoleSearchName = ""; |
|||
if (this.activeName == 1) { |
|||
this.getDepartmentList(); |
|||
} else { |
|||
this.getRoleList(); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-25 09:36:59 |
|||
@ 备注: 信息提示 |
|||
--> |
|||
<template> |
|||
<el-dialog title="提示" :visible.sync="visibleDialog"> |
|||
<div class="ant-confirm-body"> |
|||
<i class="anticon anticon-close-circle" style="color: #f00;"></i> |
|||
<span class="ant-confirm-title">当前无法发布</span> |
|||
<div class="ant-confirm-content"> |
|||
<div> |
|||
<p class="error-modal-desc">以下内容不完善，需进行修改</p> |
|||
<div class="error-modal-list"> |
|||
<div class="error-modal-item" v-for="(item,index) in list" :key="index"> |
|||
<div class="error-modal-item-label">流程设计</div> |
|||
<div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<!-- <el-button @click="visibleDialog = false">我知道了</el-button> --> |
|||
<el-button type="primary" @click="visibleDialog = false">前往修改</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: ["list", "visible"], |
|||
data() { |
|||
return { |
|||
visibleDialog: false, |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = val |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.ant-confirm-body .ant-confirm-title { |
|||
color: rgba(0, 0, 0, .85); |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 1.4; |
|||
display: block; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.ant-confirm-body .ant-confirm-content { |
|||
margin-left: 38px; |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, .65); |
|||
margin-top: 8px |
|||
} |
|||
|
|||
.ant-confirm-body>.anticon { |
|||
font-size: 22px; |
|||
margin-right: 16px; |
|||
float: left |
|||
} |
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-28 13:42:18 |
|||
@ 备注: 选择岗位 |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择岗位" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索岗位" v-model="searchVal" @input="searchPostName($event,2)"> |
|||
<selectBox :list="list" /> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data'], |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
watch:{ |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getPostList(); |
|||
this.searchVal = ""; |
|||
this.checkedRoleList = this.data.map(({ name, targetId }) => ({ |
|||
name: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedRoleList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
type: 'position', |
|||
not: false, |
|||
data: this.positionList, |
|||
isActiveItem: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'id'), |
|||
change: (item) => this.$func.toChecked(this.checkedRoleList, item, 'id') |
|||
}] |
|||
}, |
|||
resList() { |
|||
return [{ |
|||
type: 'position', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'id') |
|||
}] |
|||
} |
|||
}, |
|||
methods:{ |
|||
saveDialog() { |
|||
let checkedList = this.checkedRoleList.map(item => ({ |
|||
type: "position", |
|||
targetId: item.id, |
|||
name: item.name |
|||
})) |
|||
console.log("岗位保存--->",checkedList) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedRoleList = []; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-21 15:10:02 |
|||
@ 备注: 角色弹窗 |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择角色" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)"> |
|||
<selectBox :list="list" /> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data'], |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
watch:{ |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getRoleList(); |
|||
this.searchVal = ""; |
|||
this.checkedRoleList = this.data.map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedRoleList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
type: 'role', |
|||
not: true, |
|||
data: this.roles, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
|||
change: (item) => this.checkedRoleList = [item] |
|||
}] |
|||
}, |
|||
resList() { |
|||
return [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} |
|||
}, |
|||
methods:{ |
|||
saveDialog() { |
|||
let checkedList = this.checkedRoleList.map(item => ({ |
|||
type: 2, |
|||
targetId: item.roleId, |
|||
name: item.roleName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedRoleList = []; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,379 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-21 13:04:13 |
|||
@ 备注: 执行节点选择栏 |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" :title="nodeTitle" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="saveApprover"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="drawer_content"> |
|||
<!--选择处理界限--> |
|||
<div class="approver_content"> |
|||
<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType"> |
|||
<el-radio :label="1">指定成员</el-radio> |
|||
<el-radio :label="2">主管</el-radio> |
|||
<el-radio :label="3">行政岗位</el-radio> |
|||
<el-radio :label="4">发起人自选</el-radio> |
|||
<el-radio :label="5">发起人自己</el-radio> |
|||
<el-radio :label="7">连续多级主管</el-radio> |
|||
<el-radio :label="8" v-if="approverConfig.type == 3">指定审批节点自选</el-radio> |
|||
</el-radio-group> |
|||
<el-button type="primary" @click="addApprover" v-if="approverConfig.settype==1">添加/修改成员</el-button> |
|||
<p class="selected_list" v-if="approverConfig.settype==1"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<!--主管选项--> |
|||
<div class="approver_manager" v-if="approverConfig.settype==2"> |
|||
<p> |
|||
<span>发起人的：</span> |
|||
<select v-model="approverConfig.directorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'直接':'第'+item+'级'}}主管</option> |
|||
</select> |
|||
</p> |
|||
<p class="tip">找不到主管时，由上级主管代审批</p> |
|||
</div> |
|||
|
|||
<div class="approver_manager" v-if="approverConfig.settype==3"> |
|||
<el-button type="primary" @click="addApproverPost">添加/修改岗位</el-button> |
|||
|
|||
<p class="selected_list" style="margin-top:30px"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<!--发起人自选--> |
|||
<div class="approver_self_select" v-show="approverConfig.settype==4"> |
|||
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%;"> |
|||
<el-radio :label="1">选一个人</el-radio> |
|||
<el-radio :label="2">选多个人</el-radio> |
|||
</el-radio-group> |
|||
<h3>选择范围</h3> |
|||
<el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange"> |
|||
<el-radio :label="1">全公司</el-radio> |
|||
<el-radio :label="4">本部门</el-radio> |
|||
<el-radio :label="2">指定成员</el-radio> |
|||
<el-radio :label="3">指定角色</el-radio> |
|||
</el-radio-group> |
|||
<el-button type="primary" @click="addApprover" v-if="approverConfig.selectRange==2">添加/修改成员</el-button> |
|||
<el-button type="primary" @click="addRoleApprover" v-if="approverConfig.selectRange==3">添加/修改角色</el-button> |
|||
<p class="selected_list" v-if="approverConfig.selectRange==2||approverConfig.selectRange==3"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<!--发起人自选--> |
|||
<div class="approver_self" v-if="approverConfig.settype==5"> |
|||
<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p> |
|||
</div> |
|||
<div class="approver_manager" v-if="approverConfig.settype==7"> |
|||
<p>审批终点</p> |
|||
<p style="padding-bottom:20px"> |
|||
<span>发起人的：</span> |
|||
<select v-model="approverConfig.examineEndDirectorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'最高':'第'+item}}层级主管</option> |
|||
</select> |
|||
</p> |
|||
</div> |
|||
<!--指定审批节点自选--> |
|||
<div class="approver_some" v-if="approverConfig.settype==8"> |
|||
<p>可选节点列表</p> |
|||
<el-radio-group v-model="approverConfig.customNode" class="clear"> |
|||
<el-radio v-for="item in nodeOptional" :label="item.nodeNumber" :key="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="approver_some" v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==3||(approverConfig.settype==4&&approverConfig.selectMode==2)"> |
|||
<p>多人审批时采用的审批方式</p> |
|||
<el-radio-group v-model="approverConfig.examineMode" class="clear"> |
|||
<el-radio :label="1">依次审批</el-radio> |
|||
<br/> |
|||
<el-radio :label="2" v-if="approverConfig.settype!=2">会签(须所有审批人同意)</el-radio> |
|||
<br/> |
|||
<el-radio :label="3" v-if="approverConfig.settype!=2">非会签(有一位审批人同意即可)</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="approver_some" v-if="approverConfig.settype==2||approverConfig.settype==7"> |
|||
<p>审批人为空时</p> |
|||
<el-radio-group v-model="approverConfig.noHanderAction" class="clear"> |
|||
<el-radio :label="1">自动审批通过/不允许发起</el-radio> |
|||
<br/> |
|||
<el-radio :label="2">转交给审核管理员</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="approver_some" v-if="approverConfig.type == 3"> |
|||
<div class="demo-input-suffix"> |
|||
<p>任务执行页面</p> |
|||
<el-input |
|||
placeholder="请输入URL(例：execut/page?key={val}) {val}为地址参数值占位符" |
|||
suffix-icon="el-icon-s-promotion" |
|||
v-model="approverConfig.executionaddress" |
|||
clearable> |
|||
</el-input> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="approver_some"> |
|||
<p>退回设置</p> |
|||
<el-radio-group v-model="approverConfig.sendBackNode" class="clear"> |
|||
<el-radio label="beginnode" class="nodeGroupRadio">发起人</el-radio> |
|||
<el-radio v-for="item in nodeOptional" :label="item.nodeNumber" :key="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveApprover">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employeesDialog |
|||
:visible.sync="approverVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureApprover" |
|||
/> |
|||
<roleDialog |
|||
:visible.sync="approverRoleVisible" |
|||
:data.sync="checkedRoleList" |
|||
@change="sureRoleApprover" |
|||
/> |
|||
<positionDialog |
|||
:visible.sync="appPosistonVisible" |
|||
:data.sync="checkedPostList" |
|||
@change="surePostApprover" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { judgeOptionalNode,getAllParentNode } from "@/api/systemaccredit/systemapi"; |
|||
import { mapState, mapMutations } from 'vuex' |
|||
import employeesDialog from '@/customworkflow/dialog/employeesDialog' |
|||
import roleDialog from '@/customworkflow/dialog/roleDialog' |
|||
import positionDialog from '@/customworkflow/dialog/positionDialog' |
|||
export default { |
|||
components: { employeesDialog,roleDialog,positionDialog }, |
|||
props: ['directorMaxLevel','nodeConfig'], |
|||
data() { |
|||
return { |
|||
nodeTitle:'审批人设置', |
|||
approverConfig: {}, //节点数据 |
|||
approverVisible: false, //添加成员弹窗 |
|||
checkedList: [], //成员数据 |
|||
approverRoleVisible: false, //添加角色弹窗 |
|||
checkedRoleList: [], //角色数据 |
|||
nodeOptional:[], //节点可操作数据 |
|||
appPosistonVisible: false, //添加岗位弹窗 |
|||
checkedPostList: [], //角色数据 |
|||
} |
|||
}, |
|||
created(){ |
|||
// console.log("directorMaxLevel-->",this.directorMaxLevel) |
|||
// console.log("nodeConfig-->",this.nodeConfig) |
|||
}, |
|||
computed: { |
|||
...mapState(['approverConfig1', 'approverDrawer']), |
|||
}, |
|||
watch:{ |
|||
//执行节点数据 |
|||
approverConfig1(val) { |
|||
// console.log("执行节点数据-->",val.value) |
|||
this.approverConfig = val.value; |
|||
switch(this.approverConfig.type){ |
|||
case 3: |
|||
this.nodeTitle='执行人设置'; |
|||
break; |
|||
default: |
|||
this.nodeTitle='审批人设置'; |
|||
break; |
|||
} |
|||
this.getAllFatchNode(val.value.fromNode,this.nodeAllVerify); |
|||
}, |
|||
nodeConfig:{ |
|||
handler(val){ |
|||
// console.log("节点变化---》",val) |
|||
this.nodeAllVerify=[] |
|||
this.getAllNodeCont(val) |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setApproverConfig', 'setApprover']), |
|||
//保存选中的项目 |
|||
saveApprover() { |
|||
this.approverConfig.error = !this.$func.setApproverStr(this.approverConfig) |
|||
this.setApproverConfig({ |
|||
value: this.approverConfig, |
|||
flag: true, |
|||
id: this.approverConfig1.id |
|||
}) |
|||
this.$emit("update:nodeConfig", this.approverConfig); |
|||
this.closeDrawer() |
|||
}, |
|||
//关闭执行抽屉 |
|||
closeDrawer() { |
|||
this.setApprover(false) |
|||
}, |
|||
//判断是否显示（指定审批节点自选）选项及可选节点 |
|||
async getAllNodeCont(val){ |
|||
const res = await judgeOptionalNode(val) |
|||
// console.log("判断是否显示（指定审批节点自选）选项及可选节点",res) |
|||
if(res.code == 0){ |
|||
this.nodeAllVerify = res.data.allcont |
|||
} |
|||
}, |
|||
//获取所有父级审批节点 |
|||
async getAllFatchNode(key,listcont){ |
|||
let sendData = { |
|||
id:key, |
|||
allcont:listcont |
|||
} |
|||
const res = await getAllParentNode(sendData); |
|||
// console.log("获取所有父级审批节点",res) |
|||
if(res.code == 0){ |
|||
this.nodeOptional = res.data.allcont |
|||
if(res.data.total > 0){ |
|||
this.nodeOptionalButton = true |
|||
}else{ |
|||
this.nodeOptionalButton = false |
|||
} |
|||
} |
|||
}, |
|||
//单选控制 |
|||
changeType(val) { |
|||
this.approverConfig.nodeUserList = []; |
|||
this.approverConfig.examineMode = 1; |
|||
this.approverConfig.noHanderAction = 2; |
|||
if (val == 2) { |
|||
this.approverConfig.directorLevel = 1; |
|||
} else if (val == 4) { |
|||
this.approverConfig.selectMode = 1; |
|||
this.approverConfig.selectRange = 1; |
|||
} else if (val == 7) { |
|||
this.approverConfig.examineEndDirectorLevel = 1 |
|||
} |
|||
}, |
|||
//添加/修改成员 |
|||
addApprover() { |
|||
this.approverVisible = true; |
|||
this.checkedList = this.approverConfig.nodeUserList |
|||
// console.log("nodeUserList--------->",this.approverConfig.nodeUserList) |
|||
}, |
|||
//添加、修改成员数值变化 |
|||
sureApprover(data) { |
|||
this.approverConfig.nodeUserList = data; |
|||
this.approverVisible = false; |
|||
}, |
|||
//发起人自选选择范围 |
|||
changeRange() { |
|||
this.approverConfig.nodeUserList = []; |
|||
}, |
|||
//添加角色 |
|||
addRoleApprover() { |
|||
this.approverRoleVisible = true; |
|||
this.checkedRoleList = this.approverConfig.nodeUserList |
|||
}, |
|||
//角色变动（回写数据，关闭弹窗） |
|||
sureRoleApprover(data) { |
|||
this.approverConfig.nodeUserList = data; |
|||
this.approverRoleVisible = false; |
|||
}, |
|||
//岗位变动（回写数据，关闭弹窗） |
|||
surePostApprover(data) { |
|||
this.approverConfig.nodeUserList = data; |
|||
this.appPosistonVisible = false; |
|||
// console.log("岗位变动（回写数据，关闭弹窗）--------->",this.approverConfig.nodeUserList) |
|||
}, |
|||
//添加/修改岗位 |
|||
addApproverPost() { |
|||
this.appPosistonVisible = true; |
|||
this.checkedPostList = this.approverConfig.nodeUserList |
|||
// console.log("nodeUserList--------->",this.approverConfig.nodeUserList) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.nodeGroupRadio{ |
|||
display: block; |
|||
width: 100%; |
|||
margin: 0px 0 0 10px; |
|||
} |
|||
.set_promoter { |
|||
.approver_content { |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
} |
|||
|
|||
.approver_self_select .el-button, |
|||
.approver_content .el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.approver_content .el-radio, |
|||
.approver_some .el-radio, |
|||
.approver_self_select .el-radio { |
|||
width: 27%; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.approver_manager p { |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.approver_manager select { |
|||
width: 420px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
|
|||
.approver_manager p.tip { |
|||
margin: 10px 0 22px 0; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #f8642d; |
|||
} |
|||
|
|||
.approver_self { |
|||
padding: 28px 20px; |
|||
} |
|||
|
|||
.approver_self_select, |
|||
.approver_manager, |
|||
.approver_content, |
|||
.approver_some { |
|||
padding: 20px 20px 0; |
|||
} |
|||
|
|||
.approver_manager p:first-of-type, |
|||
.approver_some p { |
|||
line-height: 19px; |
|||
font-size: 14px; |
|||
margin-bottom: 14px; |
|||
} |
|||
|
|||
.approver_self_select h3 { |
|||
margin: 5px 0 20px; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: 19px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,756 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-22 10:18:00 |
|||
@ 备注: 条件设置 |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition"> |
|||
<select v-model="conditionConfig.priorityLevel" class="priority_level"> |
|||
<option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{item}}</option> |
|||
</select> |
|||
<div class="demo-drawer__content"> |
|||
<div class="condition_content drawer_content"> |
|||
<p class="tip">当审批单同时满足以下条件时进入此流程</p> |
|||
<ul> |
|||
<li v-for="(item,index) in conditionConfig.conditionList" :key="index"> |
|||
<el-row> |
|||
<el-col :span="5"><span class="ellipsis">{{item.type==1?'发起人':item.showName}}：</span></el-col> |
|||
<el-col :span="17"> |
|||
<div v-if="item.type==1"> |
|||
<p :class="conditionConfig.nodeUserList.length > 0?'selected_list':''" @click.self="addConditionRole" style="cursor:text"> |
|||
<span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1"> |
|||
{{item1.name}}<img src="@/assets/images/add-close1.png" @click="$func.removeEle(conditionConfig.nodeUserList,item1,'targetId')"> |
|||
</span> |
|||
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole"> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.columnType == 'String' && item.showType == 'checkBox'"> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleStrClass(item,item1.key)&&'active'" @click="toStrChecked(item,item1.key)" |
|||
v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1">{{item1.value}}</a> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.type==4" > |
|||
<el-row v-for="(item69,index69) in item.condition" :key="index69" :gutter="2"> |
|||
<el-col :span="24" class="bottor_piayi"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-input v-model="item69.wordfield" placeholder="判断关键字"></el-input> |
|||
</el-col> |
|||
<el-col :span="item69.optType != 6?7:16"> |
|||
<select v-model="item69.optType" style="width:100%" @change="myoptChhange($event,item69)"> |
|||
<option value="1">小于</option> |
|||
<option value="2">大于</option> |
|||
<option value="3">小于等于</option> |
|||
<option value="4">等于</option> |
|||
<option value="5">大于等于</option> |
|||
<option value="6">介于两个数之间</option> |
|||
<option value="7">包含</option> |
|||
<option value="8">不包含</option> |
|||
</select> |
|||
</el-col> |
|||
<el-col v-if="item69.optType != 6" :span="9"> |
|||
<el-input v-model="item69.factor.leftval" placeholder="请输入值"></el-input> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="danger" icon="el-icon-delete" size="mini" circle style="margin-bottom:0px" @click="delmyCondition(index69,item.condition)"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col v-if="item69.optType == 6" :span="24" class="bottor_piayi"> |
|||
<el-row> |
|||
<el-col :span="5"> |
|||
<input type="text" style="width:75px;" class="mr_10" v-model="item69.factor.leftval" placeholder="请输入"> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<select style="width:60px;" v-model="item69.factor.leftoptType"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item69.wordfield}}</span> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<select style="width:60px;" class="ml_10" v-model="item69.factor.rightoptType"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<input type="text" style="width:75px;" class="mr_10" v-model="item69.factor.rightval" placeholder="请输入"> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
<el-button type="primary" size="mini" plain @click="addConditionEs(item.condition)">添加条件</el-button> |
|||
</div> |
|||
<div v-else-if="item.type==3"> |
|||
<el-button v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1" type="text" style="padding: 6px 5px;" @click="openDataTable(item1,item)">{{item1.name}}</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="2" style="text-align: right;"> |
|||
<!-- <a v-if="item.type==1" @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==2" @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==3" @click="conditionWordList=[];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> --> |
|||
|
|||
<el-button v-if="item.type==1" type="danger" icon="el-icon-delete" size="mini" circle @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')"></el-button> |
|||
<el-button v-if="item.type==2" type="danger" icon="el-icon-delete" size="mini" circle @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')"></el-button> |
|||
<el-button v-if="item.type==3" type="danger" icon="el-icon-delete" size="mini" circle @click="conditionWordList=[];$func.removeEle(conditionConfig.conditionList,item,'columnId')"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<div v-if="item.type==3" style="width:100%"> |
|||
<el-row v-for="item4 in conditionWordList" :key="item4.tablekey" style="width:99%"> |
|||
<el-col :span="4" style="word-wrap:break-word; word-break:break-all;"> |
|||
数据表<br>{{ item4.tablekey }} |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<el-row class="wordbody" v-for="item3 in item4.wordlist" :key="item3.tablekey" :gutter="5"> |
|||
<el-col :span="6" style="word-wrap:break-word; word-break:break-all;">字段：{{ item3.key }}</el-col> |
|||
<el-col :span="6"> |
|||
<select v-model="item3.notation" style="width:100%" @change="equationChanage($event,item3)"> |
|||
<option v-if="item3.type=='int'" value="1">小于</option> |
|||
<option v-if="item3.type=='int'" value="2">大于</option> |
|||
<option v-if="item3.type=='int'" value="3">小于等于</option> |
|||
<option v-if="item3.type=='int'" value="4">等于</option> |
|||
<option v-if="item3.type=='int'" value="5">大于等于</option> |
|||
<option v-if="item3.type=='int'" value="6">介于两个数之间</option> |
|||
<option v-if="item3.type=='string'" value="in">包含</option> |
|||
<option v-if="item3.type=='string'" value="notin">不包含</option> |
|||
</select> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<input v-if="item3.notation != 6" v-model="item3.equation.letfval" type="text" placeholder="请输入" style="width:100%"> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="$func.removeEle(item4.wordlist,item3,'key')"></el-button> |
|||
</el-col> |
|||
<el-col v-if="item3.notation == 6" :span="24" class="wordbody" > |
|||
<input type="text" style="width:75px;" class="mr_10" v-model="item3.equation.letfval"> |
|||
<select style="width:60px;" v-model="item3.equation.leftnotation"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item3.key}}</span> |
|||
<select style="width:60px;" class="ml_10" v-model="item3.equation.rightnotation"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
<input type="text" style="width:75px;" v-model="item3.equation.rightval"> |
|||
</el-col> |
|||
<el-col :span="24" class="wordbody" > |
|||
描述：{{ item3.comment }} |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</div> |
|||
|
|||
</li> |
|||
</ul> |
|||
<el-button type="primary" @click="addCondition">添加条件</el-button> |
|||
<el-dialog title="选择条件" :visible.sync="conditionVisible" width="480px" append-to-body class="condition_list"> |
|||
<p>请选择用来区分审批流程的条件字段</p> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleClass(conditionList,{columnId:0},'columnId')&&'active'" @click="$func.toChecked(conditionList,{columnId:0},'columnId')">发起人</a> |
|||
<a v-for="(item,index) in conditions" :key="index" :class="$func.toggleClass(conditionList,item,'columnId')&&'active'" |
|||
@click="$func.toChecked(conditionList,item,'columnId')">{{item.showName}}</a> |
|||
</p> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="conditionVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureCondition">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
<!--选择数据表--> |
|||
<el-dialog title="选择表及条件字段" :visible.sync="tabelDialog" width="480px" append-to-body class="condition_list"> |
|||
<template> |
|||
<el-select v-model="dataBaseTable" placeholder="请选择数据表！" style="width:100%" @change="tableChange"> |
|||
<el-option |
|||
v-for="item in dataBaseTableList" |
|||
:key="item.key" |
|||
:label="item.name" |
|||
:value="item.key"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
<template> |
|||
<el-table |
|||
:data="tableDataBaseWord" |
|||
border |
|||
ref="multipleTable" |
|||
tooltip-effect="dark" |
|||
@selection-change="handleSelectionChange" |
|||
style="width: 100%" height="500"> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="field" |
|||
label="表名" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="type" |
|||
label="类型" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="comment" |
|||
label="描述"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="tabelDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureTabelWords">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
|
|||
</div> |
|||
<employeesRoleDialog |
|||
:visible.sync="conditionRoleVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureConditionRole" |
|||
:isDepartment="true" |
|||
/> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCondition">确 定</el-button> |
|||
<el-button @click="setCondition(false)">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex' |
|||
import employeesRoleDialog from '@/customworkflow/dialog/employeesRoleDialog' |
|||
import { getConditions,getDataBaseTable,getDataBaseTableCont } from "@/api/workflowapi/workflowaip" |
|||
export default { |
|||
components: { |
|||
employeesRoleDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
conditionsConfig: { |
|||
conditionNodes: [], |
|||
}, //条件数据 |
|||
PriorityLevel: "", //优先等级 |
|||
conditionConfig: {}, |
|||
conditionRoleVisible: false, //选择成员或角色弹窗 |
|||
checkedList: [], //选择成员或角色弹窗内容 |
|||
conditionList:[], //添加条件 |
|||
conditionVisible: false, //条件弹窗 |
|||
conditions: [], //获取API值 |
|||
databaseradio:"", //数据库 |
|||
tabelDialog:false, //选择表及字段弹窗 |
|||
dataBaseTable:"", //数据表 |
|||
dataBaseTableList:[], //数据表数组 |
|||
tableDataBaseWord:[], //数据表字段列表 |
|||
sureTableWords:[], //被选中得字段 |
|||
conditionWordList:[], //数据表条件列表 |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
computed: { |
|||
...mapState(['tableId', 'conditionsConfig1', 'conditionDrawer']), |
|||
}, |
|||
watch: { |
|||
conditionsConfig1(val) { |
|||
this.conditionsConfig = val.value; |
|||
this.PriorityLevel = val.priorityLevel |
|||
this.conditionConfig = val.priorityLevel |
|||
? this.conditionsConfig.conditionNodes[val.priorityLevel - 1] |
|||
: { nodeUserList: [], conditionList: [] } |
|||
}, |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setCondition', 'setConditionsConfig']), |
|||
//保存条件 |
|||
saveCondition(){ |
|||
|
|||
console.log("保存条件--->",this.conditionWordList) |
|||
console.log("保存条件--1->",this.conditionsConfig) |
|||
this.conditionConfig.databasecondition = this.conditionWordList |
|||
|
|||
var a = this.conditionsConfig.conditionNodes.splice(this.PriorityLevel - 1, 1)//截取旧下标 |
|||
this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])//填充新下标 |
|||
this.conditionsConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1 |
|||
}); |
|||
let isOk = true |
|||
for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) { |
|||
this.conditionsConfig.conditionNodes[i].error = this.$func.conditionStr(this.conditionsConfig, i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1 |
|||
|
|||
|
|||
if(this.conditionsConfig.conditionNodes[i].conditionList.length > 0){ |
|||
this.conditionsConfig.conditionNodes[i].conditionList.forEach(itan =>{ |
|||
if(itan.columnType == "custom"){ |
|||
if(itan.condition.length > 0){ |
|||
itan.condition.forEach(itansun => { |
|||
if(itansun.wordfield=="" || itansun.wordfield==null){ |
|||
isOk = false |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
if(!isOk){ |
|||
this.$alert('自定义判断条件有未填写的内容！', '温馨提示', { |
|||
dangerouslyUseHTMLString: true |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
|
|||
this.setConditionsConfig({ |
|||
value: this.conditionsConfig, |
|||
flag: true, |
|||
id: this.conditionsConfig1.id |
|||
}) |
|||
// this.setCondition(false) |
|||
this.setCondition(false); //关闭弹窗 |
|||
}, |
|||
//选择成员或角色弹窗值变化时操作 |
|||
sureConditionRole(data) { |
|||
this.conditionConfig.nodeUserList = data; |
|||
this.conditionRoleVisible = false; |
|||
}, |
|||
//添加条件 |
|||
async addCondition() { |
|||
this.conditionList = []; |
|||
this.conditionVisible = true; |
|||
let { data } = await getConditions({ tableId: this.tableId }) |
|||
this.conditions = data; |
|||
console.log("添加条件--->",this.conditionConfig.conditionList,this.conditions) |
|||
if (this.conditionConfig.conditionList) { |
|||
for (var i = 0; i < this.conditionConfig.conditionList.length; i++) { |
|||
var { columnId } = this.conditionConfig.conditionList[i] |
|||
if (columnId.toString() == "0") { |
|||
this.conditionList.push({ columnId: 0 }) |
|||
} else { |
|||
// console.log("添加条件-1-->",this.conditionList) |
|||
// this.conditions.filter(item=>{ |
|||
// console.log("添加条件-222-->",columnId,item.columnId) |
|||
// if(item.columnId == columnId.toString()){ |
|||
// console.log("添加条件-2-->",columnId,item) |
|||
// this.conditionList.push(columnId) |
|||
// } |
|||
// }) |
|||
// console.log("添加条件-1-->",this.conditionList) |
|||
this.conditionList.push(this.conditions.filter(item => item.columnId == columnId)[0]) |
|||
// console.log("添加条件-3-->",this.conditionList) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
//确定条件类型 |
|||
sureCondition() { |
|||
//1.弹窗有，外面无+ |
|||
//2.弹窗有，外面有不变 |
|||
for (var i = 0; i < this.conditionList.length; i++) { |
|||
var { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } = this.conditionList[i]; |
|||
if (this.$func.toggleClass(this.conditionConfig.conditionList, this.conditionList[i], "columnId")) { |
|||
continue; |
|||
} |
|||
if (columnId == 0) { |
|||
this.conditionConfig.nodeUserList == []; |
|||
this.conditionConfig.conditionList.push({ |
|||
"type": 1, |
|||
columnId, |
|||
"showName": '发起人' |
|||
}); |
|||
} else { |
|||
if (columnType == "Double") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"optType": "1", |
|||
"zdy1": "2", |
|||
"opt1": "<", |
|||
"zdy2": "", |
|||
"opt2": "<", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
}) |
|||
} else if (columnType == "String" && showType == "checkBox") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue |
|||
}) |
|||
} else if (showType == "datatable") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 3, |
|||
showName, |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue, |
|||
databasecondition:[] //判断条件字段 |
|||
}) |
|||
}else if(columnType == "custom"){ |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
"type": 4, |
|||
columnId, |
|||
showName, |
|||
columnType, |
|||
condition:[ |
|||
{ |
|||
wordfield:"", |
|||
optType:"1", |
|||
factor:{ |
|||
leftoptType:"1", |
|||
leftval:"", |
|||
rightoptType:"1", |
|||
rightval:"" |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
|
|||
}else{ |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 5, |
|||
showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
//3.弹窗无，外面有- |
|||
for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) { |
|||
if (!this.$func.toggleClass(this.conditionList, this.conditionConfig.conditionList[i], "columnId")) { |
|||
this.conditionConfig.conditionList.splice(i, 1); |
|||
} |
|||
} |
|||
this.conditionConfig.conditionList.sort(function (a, b) { return a.columnId - b.columnId; }); |
|||
this.conditionVisible = false; |
|||
this.conditionWordList=[] |
|||
}, |
|||
//条件类型一 |
|||
addConditionRole() { |
|||
this.conditionRoleVisible = true; |
|||
this.checkedList = this.conditionConfig.nodeUserList |
|||
}, |
|||
//选择选项 |
|||
toStrChecked(item, key) { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var isIncludes = this.$func.toggleStrClass(item, key); |
|||
if (!isIncludes) { |
|||
a.push(key) |
|||
item.zdy1 = a.toString() |
|||
} else { |
|||
this.removeStrEle(item, key); |
|||
} |
|||
}, |
|||
//单选项目 |
|||
async toCheckRadio(){ |
|||
|
|||
let { data } = await getDataBaseTable({ name: this.databaseradio }) |
|||
this.dataBaseTableList = data |
|||
if(this.dataBaseTableList.length > 0){ |
|||
this.dataBaseTable= this.dataBaseTableList[0].key |
|||
} |
|||
console.log("单选项目---->",this.databaseradio,data) |
|||
this.getDataBaseTableWord(); |
|||
this.tabelDialog = true |
|||
}, |
|||
//打开数据库选择数据表弹窗 |
|||
async openDataTable(val){ |
|||
this.databaseradio = val.key |
|||
let { data } = await getDataBaseTable({ name: val.key }) |
|||
this.dataBaseTableList = data |
|||
if(this.dataBaseTableList.length > 0){ |
|||
this.dataBaseTable= this.dataBaseTableList[0].key |
|||
console.log("单选项目---1->",this.dataBaseTableList[0].key) |
|||
} |
|||
console.log("单选项目---->",val,this.dataBaseTable) |
|||
this.getDataBaseTableWord(); |
|||
this.tabelDialog = true |
|||
}, |
|||
//获取表字段 |
|||
async getDataBaseTableWord(){ |
|||
console.log("获取表字段---->",this.databaseradio,this.dataBaseTable) |
|||
var sendCont = { |
|||
databasename:this.databaseradio, |
|||
tablesname:this.dataBaseTable |
|||
} |
|||
console.log("获取表字段---->",sendCont) |
|||
let { data } = await getDataBaseTableCont(sendCont) |
|||
this.tableDataBaseWord = data |
|||
console.log("获取表字段---->",this.databaseradio,data) |
|||
}, |
|||
//选中的字段 |
|||
handleSelectionChange(val) { |
|||
console.log("选中的字段---->",val) |
|||
this.sureTableWords = val |
|||
}, |
|||
//改变选择表格 |
|||
tableChange(){ |
|||
this.getDataBaseTableWord(); |
|||
}, |
|||
//确定选中得字段 |
|||
sureTabelWords(){ |
|||
console.log("确定选中得字段---->",this.sureTableWords) |
|||
// this.conditionWordList = [] |
|||
let wordList = new Array |
|||
this.sureTableWords.forEach(item=>{ |
|||
let equation = "4" |
|||
if(item.type != "int"){ |
|||
equation = "in" |
|||
} |
|||
let wordCont = { |
|||
key:item.field, |
|||
type:item.type, |
|||
comment:item.comment, |
|||
notation:equation, |
|||
equation:{ |
|||
leftnotation:equation, |
|||
letfval:"", |
|||
rightnotation:"1", |
|||
rightval:"" |
|||
} |
|||
} |
|||
|
|||
wordList.push(wordCont) |
|||
}) |
|||
console.log("确定选中得字段--1->",wordList) |
|||
if(this.conditionWordList.length > 0 && this.judjeInAry(this.conditionWordList)){ |
|||
this.conditionWordList.forEach(item1=>{ |
|||
if(this.dataBaseTable == item1.tablekey && this.databaseradio == item1.databasename){ |
|||
console.log("确定选中得字段--3->",wordList) |
|||
if(item1.wordlist.length > 0){ |
|||
wordList.forEach(itmCont=>{ |
|||
item1.wordlist.push(itmCont) |
|||
}) |
|||
}else{ |
|||
item1.wordlist = wordList |
|||
} |
|||
|
|||
} |
|||
}) |
|||
}else{ |
|||
console.log("确定选中得字段--2->",wordList) |
|||
this.conditionWordList.push({ |
|||
databasename:this.databaseradio, |
|||
tablekey: this.dataBaseTable, |
|||
wordlist: wordList |
|||
}); |
|||
} |
|||
|
|||
this.closeSureTableWords(); |
|||
}, |
|||
//关闭选择数据库弹窗 |
|||
closeSureTableWords(){ |
|||
this.tabelDialog = false; |
|||
}, |
|||
//判断是否再数组中存在 |
|||
judjeInAry(ary = new Array){ |
|||
let isTrue = false; |
|||
console.log("判断是否再数组中存在--2->",ary) |
|||
ary.forEach(item1=>{ |
|||
console.log("判断是否再数组中存在-1-->",item1.tablekey,item1.databasename,this.dataBaseTable,this.databaseradio) |
|||
if(this.dataBaseTable == item1.tablekey && this.databaseradio == item1.databasename){ |
|||
isTrue = true; |
|||
} |
|||
}) |
|||
console.log("判断是否再数组中存在--->",isTrue) |
|||
return isTrue |
|||
}, |
|||
//等式取值 |
|||
equationChanage(val,subent){ |
|||
console.log("等式取值--->",val.target.value,subent) |
|||
if(val.target.value == "6"){ |
|||
subent.equation.leftnotation = "1" |
|||
subent.equation.letfval = "" |
|||
subent.equation.rightnotation = "1" |
|||
subent.equation.rightval = "" |
|||
} |
|||
}, |
|||
//删除选中得表单字段 |
|||
delwordkey(val,contList){ |
|||
console.log("删除选中得表单字段--->",val,contList) |
|||
let guoDu = new Array |
|||
if(contList.length > 0){ |
|||
contList.forEach(item=>{ |
|||
if(item.key != val.key){ |
|||
guoDu.push(item) |
|||
} |
|||
}) |
|||
} |
|||
contList = guoDu |
|||
console.log("删除选中得表单字段--->",val,contList) |
|||
}, |
|||
//添加条件 |
|||
addConditionEs(val){ |
|||
val.push({ |
|||
wordfield:"", |
|||
optType:"1", |
|||
factor:{ |
|||
leftoptType:"1", |
|||
leftval:"", |
|||
rightoptType:"1", |
|||
rightval:"" |
|||
} |
|||
}); |
|||
}, |
|||
//自定义条件选择 |
|||
myoptChhange(val,objCont){ |
|||
if(val.target.value != 6){ |
|||
objCont.factor.leftoptType = val.target.value |
|||
} |
|||
}, |
|||
//删除条件 |
|||
delmyCondition(includesIndex,condAry){ |
|||
condAry.splice(includesIndex, 1); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.condition_copyer { |
|||
.el-drawer__body { |
|||
.priority_level { |
|||
position: absolute; |
|||
top: 11px; |
|||
right: 30px; |
|||
width: 100px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
} |
|||
|
|||
.condition_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
p.tip { |
|||
margin: 20px 0; |
|||
width: 510px; |
|||
text-indent: 17px; |
|||
line-height: 45px; |
|||
background: rgba(241, 249, 255, 1); |
|||
border: 1px solid rgba(64, 163, 247, 1); |
|||
color: #46a6fe; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
ul { |
|||
max-height: 500px; |
|||
overflow-y: scroll; |
|||
margin-bottom: 20px; |
|||
|
|||
li { |
|||
&>span { |
|||
float: left; |
|||
margin-right: 8px; |
|||
width: 100px; |
|||
line-height: 32px; |
|||
text-align: right; |
|||
} |
|||
|
|||
&>div { |
|||
display: inline-block; |
|||
width: 100%; |
|||
|
|||
&>p:not(:last-child) { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
&:not(:last-child)>div>p { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
&>a { |
|||
float: right; |
|||
margin-right: 10px; |
|||
margin-top: 7px; |
|||
} |
|||
.condition_content { |
|||
padding: 5px 0; |
|||
} |
|||
select, |
|||
input { |
|||
width: 100%; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
padding: 0; |
|||
} |
|||
|
|||
select+input { |
|||
width: 260px; |
|||
} |
|||
|
|||
select { |
|||
margin-right: 10px; |
|||
width: 100px; |
|||
} |
|||
|
|||
p.selected_list { |
|||
padding-left: 10px; |
|||
border-radius: 4px; |
|||
min-height: 32px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
p.check_box { |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.condition_list { |
|||
.el-dialog__body { |
|||
padding: 16px 26px; |
|||
} |
|||
|
|||
p { |
|||
color: #666666; |
|||
margin-bottom: 10px; |
|||
|
|||
&>.check_box { |
|||
margin-bottom: 0; |
|||
line-height: 36px; |
|||
} |
|||
} |
|||
} |
|||
.wordbody{ |
|||
padding: 5px 0; |
|||
} |
|||
.bottor_piayi{ |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,703 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-22 10:18:00 |
|||
@ 备注: 条件设置 |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition"> |
|||
<select v-model="conditionConfig.priorityLevel" class="priority_level"> |
|||
<option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{item}}</option> |
|||
</select> |
|||
<div class="demo-drawer__content"> |
|||
<div class="condition_content drawer_content"> |
|||
<p class="tip">当审批单同时满足以下条件时进入此流程</p> |
|||
<ul> |
|||
<li v-for="(item,index) in conditionConfig.conditionList" :key="index"> |
|||
<span class="ellipsis">{{item.type==1?'发起人':item.showName}}：</span> |
|||
<div v-if="item.type==1"> |
|||
<p :class="conditionConfig.nodeUserList.length > 0?'selected_list':''" @click.self="addConditionRole" style="cursor:text"> |
|||
<span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1"> |
|||
{{item1.name}}<img src="@/assets/images/add-close1.png" @click="$func.removeEle(conditionConfig.nodeUserList,item1,'targetId')"> |
|||
</span> |
|||
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole"> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.columnType == 'String' && item.showType == 'checkBox'"> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleStrClass(item,item1.key)&&'active'" @click="toStrChecked(item,item1.key)" |
|||
v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1">{{item1.value}}</a> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.type==3"> |
|||
|
|||
<!-- <el-radio-group v-model="databaseradio" @input="toCheckRadio"> |
|||
<el-radio v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1" :label="item1.key">{{item1.name}}</el-radio> |
|||
</el-radio-group> --> |
|||
|
|||
<el-button v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1" type="text" style="padding: 6px 5px;" @click="openDataTable(item1,item)">{{item1.name}}</el-button> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div v-else-if="item.type==4"> |
|||
|
|||
<div v-for="(item69,index69) in item.condition" :key="index69"> |
|||
<el-row> |
|||
<el-col :span="6"><input v-if="item69.optType!=6" type="text" placeholder="条件关键字" v-enter-number="2" v-model="item.zdy1"></el-col> |
|||
<el-col :span="18"> |
|||
<p> |
|||
<select v-model="item69.optType" :style="'width:'+(item69.optType==6?370:100)+'px'" @change="changeOptType(item69)"> |
|||
<option value="1">小于</option> |
|||
<option value="2">大于</option> |
|||
<option value="3">小于等于</option> |
|||
<option value="4">等于</option> |
|||
<option value="5">大于等于</option> |
|||
<option value="6">介于两个数之间</option> |
|||
<option value="7">包含</option> |
|||
<option value="8">不包含</option> |
|||
</select> |
|||
<input v-if="item69.optType!=6" type="text" :placeholder="'请输入'+item.showName" v-enter-number="2" v-model="item.zdy1" style="width:70%"> |
|||
</p> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
<el-button type="primary" size="mini" plain>添加条件</el-button> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div v-else> |
|||
<p> |
|||
<select v-model="item.optType" :style="'width:'+(item.optType==6?370:100)+'px'" @change="changeOptType(item)"> |
|||
<option value="1">小于</option> |
|||
<option value="2">大于</option> |
|||
<option value="3">小于等于</option> |
|||
<option value="4">等于</option> |
|||
<option value="5">大于等于</option> |
|||
<option value="6">介于两个数之间</option> |
|||
</select> |
|||
<input v-if="item.optType!=6" type="text" :placeholder="'请输入'+item.showName" v-enter-number="2" v-model="item.zdy1"> |
|||
</p> |
|||
<p v-if="item.optType==6"> |
|||
<input type="text" style="width:75px;" class="mr_10" v-enter-number="2" v-model="item.zdy1"> |
|||
<select style="width:60px;" v-model="item.opt1"> |
|||
<option value="<"><</option> |
|||
<option value="≤">≤</option> |
|||
</select> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item.showName}}</span> |
|||
<select style="width:60px;" class="ml_10" v-model="item.opt2"> |
|||
<option value="<"><</option> |
|||
<option value="≤">≤</option> |
|||
</select> |
|||
<input type="text" style="width:75px;" v-enter-number="2" v-model="item.zdy2"> |
|||
</p> |
|||
</div> |
|||
<a v-if="item.type==1" @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==2" @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==3" @click="conditionWordList=[];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<div v-if="item.type==3" style="width:100%"> |
|||
<el-row v-for="item4 in conditionWordList" :key="item4.tablekey" style="width:99%"> |
|||
<el-col :span="4" style="word-wrap:break-word; word-break:break-all;"> |
|||
数据表<br>{{ item4.tablekey }} |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<el-row class="wordbody" v-for="item3 in item4.wordlist" :key="item3.tablekey" :gutter="5"> |
|||
<el-col :span="6" style="word-wrap:break-word; word-break:break-all;">字段：{{ item3.key }}</el-col> |
|||
<el-col :span="6"> |
|||
<select v-model="item3.notation" style="width:100%" @change="equationChanage($event,item3)"> |
|||
<option v-if="item3.type=='int'" value="1">小于</option> |
|||
<option v-if="item3.type=='int'" value="2">大于</option> |
|||
<option v-if="item3.type=='int'" value="3">小于等于</option> |
|||
<option v-if="item3.type=='int'" value="4">等于</option> |
|||
<option v-if="item3.type=='int'" value="5">大于等于</option> |
|||
<option v-if="item3.type=='int'" value="6">介于两个数之间</option> |
|||
<option v-if="item3.type=='string'" value="in">包含</option> |
|||
<option v-if="item3.type=='string'" value="notin">不包含</option> |
|||
</select> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<input v-if="item3.notation != 6" v-model="item3.equation.letfval" type="text" placeholder="请输入" style="width:100%"> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="$func.removeEle(item4.wordlist,item3,'key')"></el-button> |
|||
</el-col> |
|||
<el-col v-if="item3.notation == 6" :span="24" class="wordbody" > |
|||
<input type="text" style="width:75px;" class="mr_10" v-model="item3.equation.letfval"> |
|||
<select style="width:60px;" v-model="item3.equation.leftnotation"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item3.key}}</span> |
|||
<select style="width:60px;" class="ml_10" v-model="item3.equation.rightnotation"> |
|||
<option value="1"><</option> |
|||
<option value="3">≤</option> |
|||
</select> |
|||
<input type="text" style="width:75px;" v-model="item3.equation.rightval"> |
|||
</el-col> |
|||
<el-col :span="24" class="wordbody" > |
|||
描述：{{ item3.comment }} |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</div> |
|||
|
|||
</li> |
|||
</ul> |
|||
<el-button type="primary" @click="addCondition">添加条件</el-button> |
|||
<el-dialog title="选择条件" :visible.sync="conditionVisible" width="480px" append-to-body class="condition_list"> |
|||
<p>请选择用来区分审批流程的条件字段</p> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleClass(conditionList,{columnId:0},'columnId')&&'active'" @click="$func.toChecked(conditionList,{columnId:0},'columnId')">发起人</a> |
|||
<a v-for="(item,index) in conditions" :key="index" :class="$func.toggleClass(conditionList,item,'columnId')&&'active'" |
|||
@click="$func.toChecked(conditionList,item,'columnId')">{{item.showName}}</a> |
|||
</p> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="conditionVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureCondition">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
<!--选择数据表--> |
|||
<el-dialog title="选择表及条件字段" :visible.sync="tabelDialog" width="480px" append-to-body class="condition_list"> |
|||
<template> |
|||
<el-select v-model="dataBaseTable" placeholder="请选择数据表！" style="width:100%" @change="tableChange"> |
|||
<el-option |
|||
v-for="item in dataBaseTableList" |
|||
:key="item.key" |
|||
:label="item.name" |
|||
:value="item.key"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
<template> |
|||
<el-table |
|||
:data="tableDataBaseWord" |
|||
border |
|||
ref="multipleTable" |
|||
tooltip-effect="dark" |
|||
@selection-change="handleSelectionChange" |
|||
style="width: 100%" height="500"> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="field" |
|||
label="表名" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="type" |
|||
label="类型" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="comment" |
|||
label="描述"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="tabelDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureTabelWords">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
|
|||
</div> |
|||
<employeesRoleDialog |
|||
:visible.sync="conditionRoleVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureConditionRole" |
|||
:isDepartment="true" |
|||
/> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCondition">确 定</el-button> |
|||
<el-button @click="setCondition(false)">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex' |
|||
import employeesRoleDialog from '@/customworkflow/dialog/employeesRoleDialog' |
|||
import { getConditions,getDataBaseTable,getDataBaseTableCont } from "@/api/workflowapi/workflowaip" |
|||
export default { |
|||
components: { |
|||
employeesRoleDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
conditionsConfig: { |
|||
conditionNodes: [], |
|||
}, //条件数据 |
|||
PriorityLevel: "", //优先等级 |
|||
conditionConfig: {}, |
|||
conditionRoleVisible: false, //选择成员或角色弹窗 |
|||
checkedList: [], //选择成员或角色弹窗内容 |
|||
conditionList:[], //添加条件 |
|||
conditionVisible: false, //条件弹窗 |
|||
conditions: [], //获取API值 |
|||
databaseradio:"", //数据库 |
|||
tabelDialog:false, //选择表及字段弹窗 |
|||
dataBaseTable:"", //数据表 |
|||
dataBaseTableList:[], //数据表数组 |
|||
tableDataBaseWord:[], //数据表字段列表 |
|||
sureTableWords:[], //被选中得字段 |
|||
conditionWordList:[], //数据表条件列表 |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
computed: { |
|||
...mapState(['tableId', 'conditionsConfig1', 'conditionDrawer']), |
|||
}, |
|||
watch: { |
|||
conditionsConfig1(val) { |
|||
this.conditionsConfig = val.value; |
|||
this.PriorityLevel = val.priorityLevel |
|||
this.conditionConfig = val.priorityLevel |
|||
? this.conditionsConfig.conditionNodes[val.priorityLevel - 1] |
|||
: { nodeUserList: [], conditionList: [] } |
|||
}, |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setCondition', 'setConditionsConfig']), |
|||
//保存条件 |
|||
saveCondition(){ |
|||
this.setCondition(false) |
|||
console.log("保存条件--->",this.conditionWordList) |
|||
console.log("保存条件--1->",this.conditionsConfig) |
|||
this.conditionConfig.databasecondition = this.conditionWordList |
|||
|
|||
var a = this.conditionsConfig.conditionNodes.splice(this.PriorityLevel - 1, 1)//截取旧下标 |
|||
this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])//填充新下标 |
|||
this.conditionsConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1 |
|||
}); |
|||
for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) { |
|||
this.conditionsConfig.conditionNodes[i].error = this.$func.conditionStr(this.conditionsConfig, i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1 |
|||
} |
|||
|
|||
|
|||
|
|||
this.setConditionsConfig({ |
|||
value: this.conditionsConfig, |
|||
flag: true, |
|||
id: this.conditionsConfig1.id |
|||
}) |
|||
this.setCondition(false); //关闭弹窗 |
|||
}, |
|||
//选择成员或角色弹窗值变化时操作 |
|||
sureConditionRole(data) { |
|||
this.conditionConfig.nodeUserList = data; |
|||
this.conditionRoleVisible = false; |
|||
}, |
|||
//添加条件 |
|||
async addCondition() { |
|||
this.conditionList = []; |
|||
this.conditionVisible = true; |
|||
let { data } = await getConditions({ tableId: this.tableId }) |
|||
this.conditions = data; |
|||
console.log("添加条件--->",this.conditionConfig.conditionList,this.conditions) |
|||
if (this.conditionConfig.conditionList) { |
|||
for (var i = 0; i < this.conditionConfig.conditionList.length; i++) { |
|||
var { columnId } = this.conditionConfig.conditionList[i] |
|||
if (columnId.toString() == "0") { |
|||
this.conditionList.push({ columnId: 0 }) |
|||
} else { |
|||
// console.log("添加条件-1-->",this.conditionList) |
|||
// this.conditions.filter(item=>{ |
|||
// console.log("添加条件-222-->",columnId,item.columnId) |
|||
// if(item.columnId == columnId.toString()){ |
|||
// console.log("添加条件-2-->",columnId,item) |
|||
// this.conditionList.push(columnId) |
|||
// } |
|||
// }) |
|||
// console.log("添加条件-1-->",this.conditionList) |
|||
this.conditionList.push(this.conditions.filter(item => item.columnId == columnId)[0]) |
|||
// console.log("添加条件-3-->",this.conditionList) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
//确定条件类型 |
|||
sureCondition() { |
|||
//1.弹窗有，外面无+ |
|||
//2.弹窗有，外面有不变 |
|||
for (var i = 0; i < this.conditionList.length; i++) { |
|||
var { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } = this.conditionList[i]; |
|||
if (this.$func.toggleClass(this.conditionConfig.conditionList, this.conditionList[i], "columnId")) { |
|||
continue; |
|||
} |
|||
if (columnId == 0) { |
|||
this.conditionConfig.nodeUserList == []; |
|||
this.conditionConfig.conditionList.push({ |
|||
"type": 1, |
|||
columnId, |
|||
"showName": '发起人' |
|||
}); |
|||
} else { |
|||
if (columnType == "Double") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"optType": "1", |
|||
"zdy1": "2", |
|||
"opt1": "<", |
|||
"zdy2": "", |
|||
"opt2": "<", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
}) |
|||
} else if (columnType == "String" && showType == "checkBox") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue |
|||
}) |
|||
} else if (showType == "datatable") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 3, |
|||
showName, |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue, |
|||
databasecondition:[] //判断条件字段 |
|||
}) |
|||
}else if(columnType == "custom"){ |
|||
this.conditionConfig.conditionList.push({ |
|||
"type": 4, |
|||
columnId, |
|||
showName, |
|||
condition:[ |
|||
{ |
|||
wordfield:"", |
|||
optType:4, |
|||
factor:{ |
|||
leftoptType:1, |
|||
leftval:"", |
|||
rightoptType:1, |
|||
rightval:"" |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
|
|||
}else{ |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 5, |
|||
showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
//3.弹窗无，外面有- |
|||
for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) { |
|||
if (!this.$func.toggleClass(this.conditionList, this.conditionConfig.conditionList[i], "columnId")) { |
|||
this.conditionConfig.conditionList.splice(i, 1); |
|||
} |
|||
} |
|||
this.conditionConfig.conditionList.sort(function (a, b) { return a.columnId - b.columnId; }); |
|||
this.conditionVisible = false; |
|||
this.conditionWordList=[] |
|||
}, |
|||
//条件类型一 |
|||
addConditionRole() { |
|||
this.conditionRoleVisible = true; |
|||
this.checkedList = this.conditionConfig.nodeUserList |
|||
}, |
|||
//选择选项 |
|||
toStrChecked(item, key) { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var isIncludes = this.$func.toggleStrClass(item, key); |
|||
if (!isIncludes) { |
|||
a.push(key) |
|||
item.zdy1 = a.toString() |
|||
} else { |
|||
this.removeStrEle(item, key); |
|||
} |
|||
}, |
|||
//单选项目 |
|||
async toCheckRadio(){ |
|||
|
|||
let { data } = await getDataBaseTable({ name: this.databaseradio }) |
|||
this.dataBaseTableList = data |
|||
if(this.dataBaseTableList.length > 0){ |
|||
this.dataBaseTable= this.dataBaseTableList[0].key |
|||
} |
|||
console.log("单选项目---->",this.databaseradio,data) |
|||
this.getDataBaseTableWord(); |
|||
this.tabelDialog = true |
|||
}, |
|||
//打开数据库选择数据表弹窗 |
|||
async openDataTable(val){ |
|||
this.databaseradio = val.key |
|||
let { data } = await getDataBaseTable({ name: val.key }) |
|||
this.dataBaseTableList = data |
|||
if(this.dataBaseTableList.length > 0){ |
|||
this.dataBaseTable= this.dataBaseTableList[0].key |
|||
console.log("单选项目---1->",this.dataBaseTableList[0].key) |
|||
} |
|||
console.log("单选项目---->",val,this.dataBaseTable) |
|||
this.getDataBaseTableWord(); |
|||
this.tabelDialog = true |
|||
}, |
|||
//获取表字段 |
|||
async getDataBaseTableWord(){ |
|||
console.log("获取表字段---->",this.databaseradio,this.dataBaseTable) |
|||
var sendCont = { |
|||
databasename:this.databaseradio, |
|||
tablesname:this.dataBaseTable |
|||
} |
|||
console.log("获取表字段---->",sendCont) |
|||
let { data } = await getDataBaseTableCont(sendCont) |
|||
this.tableDataBaseWord = data |
|||
console.log("获取表字段---->",this.databaseradio,data) |
|||
}, |
|||
//选中的字段 |
|||
handleSelectionChange(val) { |
|||
console.log("选中的字段---->",val) |
|||
this.sureTableWords = val |
|||
}, |
|||
//改变选择表格 |
|||
tableChange(){ |
|||
this.getDataBaseTableWord(); |
|||
}, |
|||
//确定选中得字段 |
|||
sureTabelWords(){ |
|||
console.log("确定选中得字段---->",this.sureTableWords) |
|||
// this.conditionWordList = [] |
|||
let wordList = new Array |
|||
this.sureTableWords.forEach(item=>{ |
|||
let equation = "4" |
|||
if(item.type != "int"){ |
|||
equation = "in" |
|||
} |
|||
let wordCont = { |
|||
key:item.field, |
|||
type:item.type, |
|||
comment:item.comment, |
|||
notation:equation, |
|||
equation:{ |
|||
leftnotation:equation, |
|||
letfval:"", |
|||
rightnotation:"1", |
|||
rightval:"" |
|||
} |
|||
} |
|||
|
|||
wordList.push(wordCont) |
|||
}) |
|||
console.log("确定选中得字段--1->",wordList) |
|||
if(this.conditionWordList.length > 0 && this.judjeInAry(this.conditionWordList)){ |
|||
this.conditionWordList.forEach(item1=>{ |
|||
if(this.dataBaseTable == item1.tablekey && this.databaseradio == item1.databasename){ |
|||
console.log("确定选中得字段--3->",wordList) |
|||
if(item1.wordlist.length > 0){ |
|||
wordList.forEach(itmCont=>{ |
|||
item1.wordlist.push(itmCont) |
|||
}) |
|||
}else{ |
|||
item1.wordlist = wordList |
|||
} |
|||
|
|||
} |
|||
}) |
|||
}else{ |
|||
console.log("确定选中得字段--2->",wordList) |
|||
this.conditionWordList.push({ |
|||
databasename:this.databaseradio, |
|||
tablekey: this.dataBaseTable, |
|||
wordlist: wordList |
|||
}); |
|||
} |
|||
|
|||
this.closeSureTableWords(); |
|||
}, |
|||
//关闭选择数据库弹窗 |
|||
closeSureTableWords(){ |
|||
this.tabelDialog = false; |
|||
}, |
|||
//判断是否再数组中存在 |
|||
judjeInAry(ary = new Array){ |
|||
let isTrue = false; |
|||
console.log("判断是否再数组中存在--2->",ary) |
|||
ary.forEach(item1=>{ |
|||
console.log("判断是否再数组中存在-1-->",item1.tablekey,item1.databasename,this.dataBaseTable,this.databaseradio) |
|||
if(this.dataBaseTable == item1.tablekey && this.databaseradio == item1.databasename){ |
|||
isTrue = true; |
|||
} |
|||
}) |
|||
console.log("判断是否再数组中存在--->",isTrue) |
|||
return isTrue |
|||
}, |
|||
//等式取值 |
|||
equationChanage(val,subent){ |
|||
console.log("等式取值--->",val.target.value,subent) |
|||
if(val.target.value == "6"){ |
|||
subent.equation.leftnotation = "1" |
|||
subent.equation.letfval = "" |
|||
subent.equation.rightnotation = "1" |
|||
subent.equation.rightval = "" |
|||
} |
|||
}, |
|||
//删除选中得表单字段 |
|||
delwordkey(val,contList){ |
|||
console.log("删除选中得表单字段--->",val,contList) |
|||
let guoDu = new Array |
|||
if(contList.length > 0){ |
|||
contList.forEach(item=>{ |
|||
if(item.key != val.key){ |
|||
guoDu.push(item) |
|||
} |
|||
}) |
|||
} |
|||
contList = guoDu |
|||
console.log("删除选中得表单字段--->",val,contList) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.condition_copyer { |
|||
.el-drawer__body { |
|||
.priority_level { |
|||
position: absolute; |
|||
top: 11px; |
|||
right: 30px; |
|||
width: 100px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
} |
|||
|
|||
.condition_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
p.tip { |
|||
margin: 20px 0; |
|||
width: 510px; |
|||
text-indent: 17px; |
|||
line-height: 45px; |
|||
background: rgba(241, 249, 255, 1); |
|||
border: 1px solid rgba(64, 163, 247, 1); |
|||
color: #46a6fe; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
ul { |
|||
max-height: 500px; |
|||
overflow-y: scroll; |
|||
margin-bottom: 20px; |
|||
|
|||
li { |
|||
&>span { |
|||
float: left; |
|||
margin-right: 8px; |
|||
width: 100px; |
|||
line-height: 32px; |
|||
text-align: right; |
|||
} |
|||
|
|||
&>div { |
|||
display: inline-block; |
|||
width: 100%; |
|||
|
|||
&>p:not(:last-child) { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
&:not(:last-child)>div>p { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
&>a { |
|||
float: right; |
|||
margin-right: 10px; |
|||
margin-top: 7px; |
|||
} |
|||
.condition_content { |
|||
padding: 5px 0; |
|||
} |
|||
select, |
|||
input { |
|||
width: 100%; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
|
|||
select+input { |
|||
width: 260px; |
|||
} |
|||
|
|||
select { |
|||
margin-right: 10px; |
|||
width: 100px; |
|||
} |
|||
|
|||
p.selected_list { |
|||
padding-left: 10px; |
|||
border-radius: 4px; |
|||
min-height: 32px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
p.check_box { |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.condition_list { |
|||
.el-dialog__body { |
|||
padding: 16px 26px; |
|||
} |
|||
|
|||
p { |
|||
color: #666666; |
|||
margin-bottom: 10px; |
|||
|
|||
&>.check_box { |
|||
margin-bottom: 0; |
|||
line-height: 36px; |
|||
} |
|||
} |
|||
} |
|||
.wordbody{ |
|||
padding: 5px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-20 16:19:10 |
|||
@ 备注: 行政组织与人员列表 |
|||
--> |
|||
<template> |
|||
<ul class="select-box"> |
|||
<template v-for="elem in list"> |
|||
<template v-if="elem.type === 'role'"> |
|||
<li v-for="item in elem.data" :key="item.roleId" |
|||
class="check_box" |
|||
:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|||
@click="elem.change(item)"> |
|||
<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|||
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'position'"> |
|||
<li v-for="item in elem.data" :key="item.id" |
|||
class="check_box" |
|||
:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|||
@click="elem.change(item)"> |
|||
<a :title="item.name" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|||
<img src="@/assets/images/icon_role.png">{{item.name}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'department'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}"> |
|||
<a v-if="elem.isDepartment" |
|||
:class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)"> |
|||
<img src="@/assets/images/icon_file.png"> |
|||
{{ item.departmentName }} |
|||
</a> |
|||
<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|||
<i @click="elem.next(item)">下级</i> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'employee'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box"> |
|||
<a :class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)" |
|||
:title="item.departmentNames"> |
|||
<!-- <img src="@/assets/images/icon_people.png">{{item.employeeName}} --> |
|||
<img v-if="item.icon && item.icon != ''" :src="item.icon"> |
|||
<img v-else-if="item.iconToBase64 && item.iconToBase64 != ''" :src="item.iconToBase64"> |
|||
<img v-else src="@/assets/images/icon_people.png"> |
|||
{{item.employeeName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
created(){ |
|||
console.log("是定---->",this.list) |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.select-box { |
|||
height: 420px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
padding: 5px 0; |
|||
|
|||
i { |
|||
float: right; |
|||
padding-left: 24px; |
|||
padding-right: 10px; |
|||
color: #3195f8; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
background: url(~@/assets/images/next_level_active.png) no-repeat 10px center; |
|||
border-left: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
a.active+i { |
|||
color: rgb(197, 197, 197); |
|||
background-image: url(~@/assets/images/next_level.png); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
img { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,220 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-27 13:27:28 |
|||
@ 备注: 编辑工作流 |
|||
--> |
|||
<template> |
|||
<el-dialog title="编辑流程" :visible.sync="editWorkFlowIsShow" top="10px" width="90%" :before-close="closeDialogLook" class="dialogClass"> |
|||
|
|||
<el-row :gutter="15"> |
|||
<el-col :span="2"> |
|||
名称： |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
v-model="flowConfig.name" |
|||
clearable> |
|||
</el-input> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
描述： |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
v-model="flowConfig.describe" |
|||
clearable> |
|||
</el-input> |
|||
</el-col> |
|||
<el-col :span="24" style="margin-top:5px"> |
|||
版本：<el-button v-for="item in versionList" :key="item.id" type="primary" :plain="item.version==varsionCode?false:true" size="mini" class="versionclick active" @click="varyClick(item)">{{ item.version }}</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="kuangjiangao"> |
|||
<div class="dashboard-container"> |
|||
<div class="gva-table-box"> |
|||
|
|||
<section class="dingflow-design"> |
|||
<!-- <div class="zoom"> |
|||
<el-button type="button" @click="saveSet">发 布</el-button> |
|||
</div> --> |
|||
<!--流程画布--> |
|||
<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap> |
|||
<div class="end-node"> |
|||
<div class="end-node-circle"></div> |
|||
<div class="end-node-text">流程结束</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
<promoterDrawer /> |
|||
<approverDrawer :directorMaxLevel="directorMaxLevel" :nodeConfig="nodeConfig"/> |
|||
<copyerDrawer /> |
|||
<conditionDrawer /> |
|||
<errorDialog |
|||
:visible.sync="tipVisible" |
|||
:list="tipList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="closeDialogLook">取 消</el-button> |
|||
<el-button type="primary" @click="saveWorkFlow">确定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import { getWorkFlowVersionList } from "@/api/workflowapi/workflowaip" |
|||
import promoterDrawer from "@/customworkflow/drawer/promoterDrawer" //加载开始节点设置页面 |
|||
import approverDrawer from "@/customworkflow/drawer/approverDrawer" //加载执行节点设置页面 |
|||
import copyerDrawer from "@/customworkflow/drawer/copyerDrawer" //抄送人设置页面 |
|||
import conditionDrawer from '@/customworkflow/drawer/conditionDrawer' //条件设置 |
|||
import errorDialog from '@/customworkflow/dialog/errorDialog' |
|||
import { mapMutations } from 'vuex' |
|||
export default { |
|||
components: { |
|||
promoterDrawer, |
|||
approverDrawer, |
|||
copyerDrawer, |
|||
conditionDrawer, |
|||
errorDialog |
|||
}, |
|||
props: ['editWorkFlowIsShow','editWorkFlowInfo','closeEditWorkFlow'], |
|||
data() { |
|||
return { |
|||
varsionCode:this.editWorkFlowInfo.version, |
|||
nowVal:100, |
|||
nodeConfig: {}, //流程数据结构体 |
|||
flowPermission: [], //起始节点发起人(处理人) |
|||
directorMaxLevel: 0, //审批主管最大层级 |
|||
workFlowDef: {}, //工作流主体附加参数 |
|||
tipVisible: false, //流程提示 |
|||
tipList: [], //流程错误信息 |
|||
versionList:[], //版本列表 |
|||
processConfig: {}, //初始工作流数据 |
|||
flowConfig:{ |
|||
flowid:"", |
|||
name:"", |
|||
describe:"" |
|||
}, //工作流表基本设置 |
|||
versionId:0, |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
// this.nodeConfig = JSON.parse(this.editWorkFlowInfo.content) |
|||
}, |
|||
watch:{ |
|||
editWorkFlowIsShow(){ |
|||
console.log("插卡机",this.editWorkFlowInfo) |
|||
this.nodeConfig = JSON.parse(this.editWorkFlowInfo.content) |
|||
console.log("插卡机===>",this.nodeConfig) |
|||
this.varsionCode = this.editWorkFlowInfo.version |
|||
this.processConfig = JSON.parse(this.editWorkFlowInfo.content); |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = this.processConfig; //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
this.flowConfig.flowid = tableId |
|||
this.flowConfig.name = this.editWorkFlowInfo.name |
|||
this.flowConfig.describe = this.editWorkFlowInfo.describe |
|||
this.versionId = this.editWorkFlowInfo.vid |
|||
this.getWorkFlowVersionList(); |
|||
} |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setTableId', 'setIsTried','setPromoter']), |
|||
reErr({ childNode }) { |
|||
if (childNode) { |
|||
let { type, error, nodeName, conditionNodes } = childNode |
|||
if (type == 1 || type == 2 || type == 3) { |
|||
if (error) { |
|||
this.tipList.push({ name: nodeName, type: ["", "审核人", "抄送人", "执行人"][type] }) |
|||
} |
|||
this.reErr(childNode) |
|||
} else if (type == 5) { |
|||
this.reErr(childNode) |
|||
} else if (type == 4) { |
|||
this.reErr(childNode) |
|||
for (var i = 0; i < conditionNodes.length; i++) { |
|||
if (conditionNodes[i].error) { |
|||
this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" }) |
|||
} |
|||
this.reErr(conditionNodes[i]) |
|||
} |
|||
} |
|||
} else { |
|||
childNode = null |
|||
} |
|||
}, |
|||
//关闭弹窗 |
|||
closeDialogLook(){ |
|||
this.$emit('closeEditWorkFlow'); |
|||
}, |
|||
//获取版本列表 |
|||
async getWorkFlowVersionList(){ |
|||
let sendData = { |
|||
id:this.editWorkFlowInfo.key.toString() |
|||
} |
|||
const res = await getWorkFlowVersionList(sendData); |
|||
console.log("获取到得版本列表--->",res); |
|||
if(res.code == 0){ |
|||
this.versionList=res.data |
|||
} |
|||
}, |
|||
//切换版本 |
|||
varyClick(val){ |
|||
console.log("切换版本--->",val); |
|||
this.varsionCode = val.version |
|||
this.processConfig = JSON.parse(val.content); |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = this.processConfig; //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
this.versionId=val.id; |
|||
}, |
|||
//保存更改 |
|||
async saveWorkFlow(){ |
|||
this.setIsTried(true); |
|||
this.tipList = []; |
|||
this.reErr(this.nodeConfig); |
|||
if (this.tipList.length != 0) { |
|||
this.tipVisible = true; |
|||
return; |
|||
} |
|||
this.processConfig.flowPermission = this.flowPermission |
|||
this.processConfig.workFlowDef.name = this.flowConfig.name |
|||
console.log("saveSet---发布--->",JSON.stringify(this.processConfig)) |
|||
console.log("saveSet---发布--2->",this.processConfig) |
|||
let sendData = { |
|||
flowid:this.flowConfig.flowid.toString(), |
|||
name:this.flowConfig.name, |
|||
describe:this.flowConfig.describe, |
|||
versionid:this.versionId.toString(), |
|||
flowcont:this.processConfig |
|||
} |
|||
console.log("saveSet---发布--4->",sendData) |
|||
this.closeDialogLook() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
.miaoshu{ |
|||
padding-left: 25px; |
|||
} |
|||
.versionclick{ |
|||
.active{ |
|||
background-color: #F00; |
|||
} |
|||
} |
|||
.dialogClass { |
|||
.el-dialog__body { |
|||
padding: 10px 26px 30px 26px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,335 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-24 16:11:50 |
|||
@ 备注: 添加流程 |
|||
--> |
|||
<template> |
|||
<el-dialog title="添加流程" :visible.sync="addWorkFlowBox" :top="flowActive==1?'10%':'0px'" :width="flowActive==1?'40%':'90%'" :before-close="closeDialog" class="dialogClass"> |
|||
<el-steps :active="flowActive" align-center> |
|||
<el-step title="基本信息">2</el-step> |
|||
<el-step title="设置流程"></el-step> |
|||
</el-steps> |
|||
<el-form ref="form" v-show="flowActive==1" :model="flowConfig" label-width="90px" style="margin-top:50px"> |
|||
<el-form-item label="工作流名称"> |
|||
<el-input v-model="flowConfig.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="工作流描述"> |
|||
<el-input type="textarea" v-model="flowConfig.describe"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="kuangjiangao" v-show="flowActive==2"> |
|||
<div class="dashboard-container"> |
|||
<div class="gva-table-box"> |
|||
|
|||
<section class="dingflow-design"> |
|||
<!-- <div class="zoom"> |
|||
<el-button type="button" @click="saveSet">发 布</el-button> |
|||
</div> --> |
|||
<!--流程画布--> |
|||
<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap> |
|||
<div class="end-node"> |
|||
<div class="end-node-circle"></div> |
|||
<div class="end-node-text">流程结束</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
<promoterDrawer /> |
|||
<approverDrawer :directorMaxLevel="directorMaxLevel" :nodeConfig="nodeConfig"/> |
|||
<copyerDrawer /> |
|||
<conditionDrawer /> |
|||
<errorDialog |
|||
:visible.sync="tipVisible" |
|||
:list="tipList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="closeDialog">取 消</el-button> |
|||
<el-button v-if="flowActive>1" type="warning" @click="printnext">上一步</el-button> |
|||
<el-button type="primary" @click="next">{{ flowButtonName }}</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import { initializeWorkFlow,publishWorkFlow } from "@/api/workflowapi/workflowaip" |
|||
import promoterDrawer from "@/customworkflow/drawer/promoterDrawer" //加载开始节点设置页面 |
|||
import approverDrawer from "@/customworkflow/drawer/approverDrawer" //加载执行节点设置页面 |
|||
import copyerDrawer from "@/customworkflow/drawer/copyerDrawer" //抄送人设置页面 |
|||
import conditionDrawer from '@/customworkflow/drawer/conditionDrawer' //条件设置 |
|||
import errorDialog from '@/customworkflow/dialog/errorDialog' |
|||
import { mapMutations } from 'vuex' |
|||
export default { |
|||
components: { |
|||
promoterDrawer, |
|||
approverDrawer, |
|||
copyerDrawer, |
|||
conditionDrawer, |
|||
errorDialog |
|||
}, |
|||
props: ['addWorkFlowBox','closeAddWorkFlow'], |
|||
data() { |
|||
return { |
|||
flowActive:1, |
|||
flowButtonName:"下一步", |
|||
nowVal:100, |
|||
nodeConfig: {}, //流程数据结构体 |
|||
flowPermission: [], //起始节点发起人(处理人) |
|||
processConfig: {}, //初始工作流数据 |
|||
directorMaxLevel: 0, //审批主管最大层级 |
|||
workFlowDef: {}, //工作流主体附加参数 |
|||
tipVisible: false, //流程提示 |
|||
tipList: [], //流程错误信息 |
|||
flowConfig:{ |
|||
flowid:"", |
|||
name:"", |
|||
describe:"" |
|||
}, //工作流表基本设置 |
|||
} |
|||
}, |
|||
created(){ |
|||
this.getInitData(); //初始化数据 |
|||
}, |
|||
watch:{ |
|||
addWorkFlowBox(){ |
|||
this.getInitData() |
|||
} |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setTableId', 'setIsTried','setPromoter']), |
|||
reErr({ childNode }) { |
|||
if (childNode) { |
|||
let { type, error, nodeName, conditionNodes } = childNode |
|||
if (type == 1 || type == 2 || type == 3) { |
|||
if (error) { |
|||
this.tipList.push({ name: nodeName, type: ["", "审核人", "抄送人", "执行人"][type] }) |
|||
} |
|||
this.reErr(childNode) |
|||
} else if (type == 5) { |
|||
this.reErr(childNode) |
|||
} else if (type == 4) { |
|||
this.reErr(childNode) |
|||
for (var i = 0; i < conditionNodes.length; i++) { |
|||
if (conditionNodes[i].error) { |
|||
this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" }) |
|||
} |
|||
this.reErr(conditionNodes[i]) |
|||
} |
|||
} |
|||
} else { |
|||
childNode = null |
|||
} |
|||
}, |
|||
//保存工作流 |
|||
async saveWorkFlow(){ |
|||
this.setIsTried(true); |
|||
this.tipList = []; |
|||
this.reErr(this.nodeConfig); |
|||
if (this.tipList.length != 0) { |
|||
this.tipVisible = true; |
|||
return; |
|||
} |
|||
this.processConfig.flowPermission = this.flowPermission |
|||
this.processConfig.workFlowDef.name = this.flowConfig.name |
|||
// console.log("saveSet---发布--->",JSON.stringify(this.processConfig)) |
|||
// console.log("saveSet---发布--2->",this.processConfig) |
|||
let sendData = { |
|||
flowid:this.flowConfig.flowid.toString(), |
|||
name:this.flowConfig.name, |
|||
describe:this.flowConfig.describe, |
|||
flowcont:this.processConfig |
|||
} |
|||
// console.log("saveSet---发布--4->",sendData) |
|||
const res = await publishWorkFlow(sendData); |
|||
// console.log("saveSet---发布--3->",res) |
|||
if(res.code == 0){ |
|||
this.closeDialog(); |
|||
} |
|||
}, |
|||
next() { |
|||
if (this.flowActive++ > 0){ |
|||
|
|||
this.flowButtonName="发布" |
|||
} |
|||
if( this.flowActive == 3){ |
|||
this.flowActive = 2; |
|||
this.saveWorkFlow(); |
|||
} |
|||
}, |
|||
//上一步 |
|||
printnext(){ |
|||
this.flowActive--; |
|||
this.flowButtonName="下一步" |
|||
if(this.flowActive < 1){ |
|||
this.flowActive = 1 |
|||
} |
|||
}, |
|||
//关闭添加流程弹窗 |
|||
closeDialog(){ |
|||
this.$emit('closeAddWorkFlow'); |
|||
this.flowActive = 1; |
|||
this.flowButtonName="下一步"; |
|||
this.initConfig() |
|||
}, |
|||
//发布流程 |
|||
saveSet(){ |
|||
|
|||
}, |
|||
//获取初始化数据 |
|||
async getInitData(){ |
|||
const res = await initializeWorkFlow() |
|||
// console.log("获取初始化数据---->",res) |
|||
this.processConfig = res.data; |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = res.data; //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
this.flowConfig.flowid=tableId.toString() |
|||
this.setTableId(tableId) |
|||
|
|||
}, |
|||
//初始化数据 |
|||
initConfig(){ |
|||
this.flowConfig.name = ""; |
|||
this.flowConfig.describe = ""; |
|||
this.nodeConfig={}; |
|||
this.flowPermission=[]; |
|||
this.directorMaxLevel = 0 |
|||
this.workFlowDef = {} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
#app { |
|||
font-family: "Avenir", Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
color: #333333; |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.clear:before, |
|||
.clear:after { |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
|
|||
.clear:after { |
|||
clear: both; |
|||
} |
|||
|
|||
.ellipsis { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.l { |
|||
float: left; |
|||
} |
|||
|
|||
input { |
|||
text-indent: 10px; |
|||
} |
|||
|
|||
select { |
|||
text-indent: 8px; |
|||
} |
|||
|
|||
.ml_10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.mr_10 { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.radio_box a, |
|||
.check_box a { |
|||
font-size: 12px; |
|||
position: relative; |
|||
padding-left: 20px; |
|||
margin-right: 30px; |
|||
cursor: pointer; |
|||
color: #333; |
|||
} |
|||
|
|||
.check_box.not a:hover { |
|||
color: #333; |
|||
} |
|||
|
|||
.check_box.not a::before, |
|||
.check_box.not a:hover::before { |
|||
border: none; |
|||
} |
|||
|
|||
.check_box.not.active { |
|||
background: #f3f3f3; |
|||
} |
|||
|
|||
.radio_box a:hover::before, |
|||
.check_box a:hover::before { |
|||
border: 1px solid #46a6fe; |
|||
} |
|||
|
|||
.radio_box a::before, |
|||
.check_box a::before { |
|||
position: absolute; |
|||
width: 14px; |
|||
height: 14px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 2px; |
|||
left: 0; |
|||
top: 1px; |
|||
content: ""; |
|||
} |
|||
|
|||
.radio_box a::before { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.check-dot.active::after, |
|||
.radio_box a.active::after, |
|||
.check_box a.active::after { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 50%; |
|||
top: 3px; |
|||
left: 3px; |
|||
content: ""; |
|||
} |
|||
|
|||
.radio_box a.active::after { |
|||
background: #46a6fe; |
|||
} |
|||
|
|||
.check_box a.active::after { |
|||
background: url(~@/assets/images/check_box.png) no-repeat center; |
|||
} |
|||
|
|||
|
|||
.error-modal-list { |
|||
width: 455px; |
|||
} |
|||
.dialogClass{ |
|||
height:100%; |
|||
} |
|||
.dashboard-container{ |
|||
height: 100%; |
|||
} |
|||
.el-dialog { |
|||
/*height: 100%;*/ |
|||
} |
|||
.el-dialog__body{ |
|||
/*height: calc(100% - 110px);*/ |
|||
} |
|||
.kuangjiangao{ |
|||
height: 810px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-27 13:27:28 |
|||
@ 备注: 查看工作流 |
|||
--> |
|||
<template> |
|||
<el-dialog title="查看流程" :visible.sync="lookboxIsShow" top="10px" width="90%" :before-close="closeDialogLook" class="dialogClass"> |
|||
<el-row> |
|||
<el-col :span="24">名称：{{ lookWorkFlowCont.name }}<span class="miaoshu">描述：{{ lookWorkFlowCont.describe }}</span></el-col> |
|||
<el-col :span="20">版本：<el-button v-for="item in versionList" :key="item.id" type="primary" :plain="item.version==varsionCode?false:true" size="mini" class="versionclick active" @click="varyClick(item)">{{ item.version }}</el-button> |
|||
</el-col> |
|||
<el-col :span="4" style="text-align: right;"> |
|||
<el-button type="warning" @click="qiyongFlow" v-if="isState != 1">启用{{ isState }}</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="kuangjiangao"> |
|||
<div class="dashboard-container"> |
|||
<div class="gva-table-box"> |
|||
|
|||
<section class="dingflow-design"> |
|||
<!-- <div class="zoom"> |
|||
<el-button type="button" @click="saveSet">发 布</el-button> |
|||
</div> --> |
|||
<!--流程画布--> |
|||
<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap> |
|||
<div class="end-node"> |
|||
<div class="end-node-circle"></div> |
|||
<div class="end-node-text">流程结束</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
<promoterDrawer /> |
|||
<approverDrawer :directorMaxLevel="directorMaxLevel" :nodeConfig="nodeConfig"/> |
|||
<copyerDrawer /> |
|||
<conditionDrawer /> |
|||
<errorDialog |
|||
:visible.sync="tipVisible" |
|||
:list="tipList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import { getWorkFlowVersionList,StartUsingVersion } from "@/api/workflowapi/workflowaip" |
|||
import promoterDrawer from "@/customworkflow/drawer/promoterDrawer" //加载开始节点设置页面 |
|||
import approverDrawer from "@/customworkflow/drawer/approverDrawer" //加载执行节点设置页面 |
|||
import copyerDrawer from "@/customworkflow/drawer/copyerDrawer" //抄送人设置页面 |
|||
import conditionDrawer from '@/customworkflow/drawer/conditionDrawer' //条件设置 |
|||
import errorDialog from '@/customworkflow/dialog/errorDialog' |
|||
import { mapMutations } from 'vuex' |
|||
export default { |
|||
components: { |
|||
promoterDrawer, |
|||
approverDrawer, |
|||
copyerDrawer, |
|||
conditionDrawer, |
|||
errorDialog |
|||
}, |
|||
props: ['lookboxIsShow','lookWorkFlowCont','closeLookWorkFlow'], |
|||
data() { |
|||
return { |
|||
varsionCode:this.lookWorkFlowCont.version, |
|||
nowVal:100, |
|||
nodeConfig: {}, //流程数据结构体 |
|||
flowPermission: [], //起始节点发起人(处理人) |
|||
directorMaxLevel: 0, //审批主管最大层级 |
|||
workFlowDef: {}, //工作流主体附加参数 |
|||
tipVisible: false, //流程提示 |
|||
tipList: [], //流程错误信息 |
|||
versionList:[], //版本列表 |
|||
isState:1, |
|||
versionId:0, |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
// this.nodeConfig = JSON.parse(this.lookWorkFlowCont.content) |
|||
}, |
|||
watch:{ |
|||
lookboxIsShow(){ |
|||
// console.log("插卡机",this.lookWorkFlowCont) |
|||
// this.nodeConfig = JSON.parse(this.lookWorkFlowCont.content) |
|||
// console.log("插卡机===>",this.nodeConfig) |
|||
this.varsionCode = this.lookWorkFlowCont.version |
|||
this.isState = this.lookWorkFlowCont.vstate |
|||
this.versionId = this.lookWorkFlowCont.vid |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = JSON.parse(this.lookWorkFlowCont.content); //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
this.getWorkFlowVersionList(); |
|||
} |
|||
}, |
|||
methods:{ |
|||
//关闭弹窗 |
|||
closeDialogLook(){ |
|||
this.$emit('closeLookWorkFlow'); |
|||
}, |
|||
//获取版本列表 |
|||
async getWorkFlowVersionList(){ |
|||
let sendData = { |
|||
id:this.lookWorkFlowCont.key.toString() |
|||
} |
|||
const res = await getWorkFlowVersionList(sendData); |
|||
// console.log("获取到得版本列表--->",res); |
|||
if(res.code == 0){ |
|||
this.versionList=res.data |
|||
} |
|||
}, |
|||
//切换版本 |
|||
varyClick(val){ |
|||
// console.log("切换版本--->",val); |
|||
this.varsionCode = val.version |
|||
this.isState = val.state |
|||
this.versionId = val.id |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = JSON.parse(val.content); //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
}, |
|||
//启用版本 |
|||
async qiyongFlow(){ |
|||
let sendCont = { |
|||
id: this.versionId.toString() |
|||
} |
|||
const res = await StartUsingVersion(sendCont); |
|||
// console.log("启用版本",res) |
|||
if(res.code == 0){ |
|||
this.isState = 1 |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
.miaoshu{ |
|||
padding-left: 25px; |
|||
|
|||
} |
|||
.versionclick{ |
|||
.active{ |
|||
background-color: #F00; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<div class="gva-table-box"> |
|||
|
|||
<section class="dingflow-design"> |
|||
<div class="zoom"> |
|||
<el-button type="button" @click="saveSet">发 布</el-button> |
|||
</div> |
|||
<!--流程画布--> |
|||
<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap> |
|||
<div class="end-node"> |
|||
<div class="end-node-circle"></div> |
|||
<div class="end-node-text">流程结束</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
<promoterDrawer /> |
|||
<approverDrawer :directorMaxLevel="directorMaxLevel" :nodeConfig="nodeConfig"/> |
|||
<copyerDrawer /> |
|||
<conditionDrawer /> |
|||
<errorDialog |
|||
:visible.sync="tipVisible" |
|||
:list="tipList" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { initializeWorkFlow } from "@/api/workflowapi/workflowaip" |
|||
import promoterDrawer from "@/customworkflow/drawer/promoterDrawer" //加载开始节点设置页面 |
|||
import approverDrawer from "@/customworkflow/drawer/approverDrawer" //加载执行节点设置页面 |
|||
import copyerDrawer from "@/customworkflow/drawer/copyerDrawer" //抄送人设置页面 |
|||
import conditionDrawer from '@/customworkflow/drawer/conditionDrawer' //条件设置 |
|||
import errorDialog from '@/customworkflow/dialog/errorDialog' |
|||
import { mapMutations } from 'vuex' |
|||
export default { |
|||
components: { |
|||
promoterDrawer, |
|||
approverDrawer, |
|||
copyerDrawer, |
|||
conditionDrawer, |
|||
errorDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
nowVal:100, |
|||
nodeConfig: {}, //流程数据结构体 |
|||
flowPermission: [], //起始节点发起人(处理人) |
|||
processConfig: {}, //初始工作流数据 |
|||
directorMaxLevel: 0, //审批主管最大层级 |
|||
workFlowDef: {}, //工作流主体附加参数 |
|||
tipVisible: false, //流程提示 |
|||
tipList: [], //流程错误信息 |
|||
} |
|||
}, |
|||
created(){ |
|||
this.getInitData(); //初始化数据 |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setTableId', 'setIsTried','setPromoter']), |
|||
reErr({ childNode }) { |
|||
if (childNode) { |
|||
let { type, error, nodeName, conditionNodes } = childNode |
|||
if (type == 1 || type == 2 || type == 3) { |
|||
if (error) { |
|||
this.tipList.push({ name: nodeName, type: ["", "审核人", "抄送人", "执行人"][type] }) |
|||
} |
|||
this.reErr(childNode) |
|||
} else if (type == 5) { |
|||
this.reErr(childNode) |
|||
} else if (type == 4) { |
|||
this.reErr(childNode) |
|||
for (var i = 0; i < conditionNodes.length; i++) { |
|||
if (conditionNodes[i].error) { |
|||
this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" }) |
|||
} |
|||
this.reErr(conditionNodes[i]) |
|||
} |
|||
} |
|||
} else { |
|||
childNode = null |
|||
} |
|||
}, |
|||
//发布流程 |
|||
saveSet(){ |
|||
this.setIsTried(true); |
|||
this.tipList = []; |
|||
this.reErr(this.nodeConfig); |
|||
if (this.tipList.length != 0) { |
|||
this.tipVisible = true; |
|||
return; |
|||
} |
|||
this.processConfig.flowPermission = this.flowPermission |
|||
console.log("saveSet---发布--->",JSON.stringify(this.processConfig)) |
|||
console.log("saveSet---发布--2->",this.processConfig) |
|||
}, |
|||
//获取初始化数据 |
|||
async getInitData(){ |
|||
let sendData = { |
|||
id:"100194967330234368", |
|||
version:"1" |
|||
} |
|||
const res = await initializeWorkFlow(sendData) |
|||
// console.log("获取初始化数据---->",res) |
|||
this.processConfig = res.data; |
|||
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = res.data; //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id} |
|||
this.nodeConfig = nodeConfig; |
|||
this.flowPermission = flowPermission; |
|||
this.directorMaxLevel = directorMaxLevel; |
|||
this.workFlowDef = workFlowDef; |
|||
this.setTableId(tableId) |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
#app { |
|||
font-family: "Avenir", Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
color: #333333; |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.clear:before, |
|||
.clear:after { |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
|
|||
.clear:after { |
|||
clear: both; |
|||
} |
|||
|
|||
.ellipsis { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.l { |
|||
float: left; |
|||
} |
|||
|
|||
input { |
|||
text-indent: 10px; |
|||
} |
|||
|
|||
select { |
|||
text-indent: 8px; |
|||
} |
|||
|
|||
.ml_10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.mr_10 { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.radio_box a, |
|||
.check_box a { |
|||
font-size: 12px; |
|||
position: relative; |
|||
padding-left: 20px; |
|||
margin-right: 30px; |
|||
cursor: pointer; |
|||
color: #333; |
|||
} |
|||
|
|||
.check_box.not a:hover { |
|||
color: #333; |
|||
} |
|||
|
|||
.check_box.not a::before, |
|||
.check_box.not a:hover::before { |
|||
border: none; |
|||
} |
|||
|
|||
.check_box.not.active { |
|||
background: #f3f3f3; |
|||
} |
|||
|
|||
.radio_box a:hover::before, |
|||
.check_box a:hover::before { |
|||
border: 1px solid #46a6fe; |
|||
} |
|||
|
|||
.radio_box a::before, |
|||
.check_box a::before { |
|||
position: absolute; |
|||
width: 14px; |
|||
height: 14px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 2px; |
|||
left: 0; |
|||
top: 1px; |
|||
content: ""; |
|||
} |
|||
|
|||
.radio_box a::before { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.check-dot.active::after, |
|||
.radio_box a.active::after, |
|||
.check_box a.active::after { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 50%; |
|||
top: 3px; |
|||
left: 3px; |
|||
content: ""; |
|||
} |
|||
|
|||
.radio_box a.active::after { |
|||
background: #46a6fe; |
|||
} |
|||
|
|||
.check_box a.active::after { |
|||
background: url(~@/assets/images/check_box.png) no-repeat center; |
|||
} |
|||
|
|||
|
|||
.error-modal-list { |
|||
width: 455px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-03-24 11:55:01 |
|||
@ 备注: 工作流列表 |
|||
--> |
|||
<template> |
|||
<el-container> |
|||
<el-header> |
|||
<el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline"> |
|||
<el-form-item> |
|||
<el-input v-model="searchInfo.name" placeholder="标题"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" @click="searchSubmit">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="warning" icon="el-icon-plus" @click="addWorkFlow">新增流程</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-header> |
|||
<el-main> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<template> |
|||
<el-table |
|||
:data="workflowdata" |
|||
style="width: 100%" |
|||
|
|||
> |
|||
<el-table-column |
|||
fixed |
|||
prop="name" |
|||
label="名称" |
|||
width="150" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed |
|||
prop="describe" |
|||
label="描述" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed |
|||
prop="version" |
|||
label="启用版本" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed |
|||
label="状态" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
<template #default="scope"> |
|||
<el-switch |
|||
inline-prompt |
|||
active-text="正常" |
|||
inactive-text="禁止" |
|||
v-model="scope.row.state" |
|||
active-color="#13ce66" |
|||
inactive-color="#ff4949" |
|||
:active-value=1 |
|||
:inactive-value=2 |
|||
@change="changeVal($event,scope.row.key)" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed |
|||
label="操作" |
|||
width="200" |
|||
align="center" |
|||
> |
|||
<template #default="scope"> |
|||
<el-button |
|||
icon="el-icon-view" |
|||
size="small" |
|||
type="text" |
|||
@click="lookWorkFlow(scope.row)" |
|||
>查看</el-button> |
|||
<el-button |
|||
icon="el-icon-edit" |
|||
size="small" |
|||
type="text" |
|||
@click="editWorkFlowCont(scope.row)" |
|||
>编辑</el-button> |
|||
<el-button |
|||
icon="el-icon-delete" |
|||
size="small" |
|||
type="text" |
|||
@click="delWorkFlowCont(scope.row)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
</template> |
|||
<addflowcont :addWorkFlowBox="addWorkFlowBox" @closeAddWorkFlow="closeAddWorkFlow"></addflowcont> |
|||
<lookflowcont :lookboxIsShow="lookboxIsShow" :lookWorkFlowCont="lookWorkFlowCont" @closeLookWorkFlow="closeLookWorkFlow"></lookflowcont> |
|||
<editflowcont :editWorkFlowIsShow="editWorkFlowIsShow" :editWorkFlowInfo="editWorkFlowInfo" @closeEditWorkFlow="closeEditWorkFlow"></editflowcont> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-pagination class="page_body" |
|||
background |
|||
@current-change="clickPageTurning" |
|||
layout="total,prev, pager, next" |
|||
:total="total" |
|||
:page-size="searchInfo.pagesize" |
|||
> |
|||
</el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
</el-container> |
|||
</template> |
|||
<script> |
|||
import { getWorkFlowList,editWorkFlowState } from "@/api/workflowapi/workflowaip" |
|||
import addflowcont from "@/views/workflow/flowcont" //添加流程弹窗 |
|||
import lookflowcont from "@/views/workflow/lookflowcont" //添加流程弹窗 |
|||
import editflowcont from "@/views/workflow/editflowcont" //添加流程弹窗 |
|||
export default { |
|||
components:{ |
|||
addflowcont, |
|||
lookflowcont, |
|||
editflowcont |
|||
}, |
|||
data() { |
|||
return { |
|||
searchInfo:{ |
|||
name:"", |
|||
page:1, |
|||
pagesize:20 |
|||
}, //查询操作 |
|||
total:0, //记录总数 |
|||
workflowdata:[], //记录列表 |
|||
addWorkFlowBox:false, |
|||
lookboxIsShow:false, |
|||
lookWorkFlowCont:{}, //流程内容 |
|||
editWorkFlowIsShow:false, //编辑弹窗 |
|||
editWorkFlowInfo:{}, //编辑内容 |
|||
} |
|||
}, |
|||
created(){ |
|||
this.getWorkFlowList(); |
|||
}, |
|||
methods:{ |
|||
//获取工作流 |
|||
async getWorkFlowList(){ |
|||
let sendData = { |
|||
name:this.searchInfo.name, |
|||
page:this.searchInfo.page, |
|||
pagesize:this.searchInfo.pagesize |
|||
} |
|||
const res = await getWorkFlowList(sendData); |
|||
// console.log('获取工作流',res) |
|||
if(res.code == 0){ |
|||
this.workflowdata = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
}, |
|||
//查询流程 |
|||
searchSubmit(){}, |
|||
//翻页 |
|||
clickPageTurning(val){ |
|||
this.searchInfo.page=val |
|||
}, |
|||
//新增流程 |
|||
addWorkFlow(){ |
|||
this.addWorkFlowBox=true; |
|||
}, |
|||
//关闭新增流程 |
|||
closeAddWorkFlow(){ |
|||
this.addWorkFlowBox=false; |
|||
this.getWorkFlowList(); |
|||
}, |
|||
//修改流程状态 |
|||
async changeVal(val,id){ |
|||
// console.log("修改流程状态:",val,id) |
|||
let sendData = { |
|||
id:id, |
|||
state:val, |
|||
istrue:2 |
|||
} |
|||
const res = await editWorkFlowState(sendData) |
|||
// console.log("修改流程状态1:",res,sendData) |
|||
if(res.code == 0){ |
|||
this.getWorkFlowList(); |
|||
} |
|||
}, |
|||
//查看工作流 |
|||
async lookWorkFlow(val){ |
|||
// console.log("查看工作流:",val) |
|||
this.lookboxIsShow=true; |
|||
this.lookWorkFlowCont = val |
|||
}, |
|||
//关闭查看工作流弹窗 |
|||
closeLookWorkFlow(){ |
|||
this.lookboxIsShow=false; |
|||
}, |
|||
//编辑工作流 |
|||
editWorkFlowCont(val){ |
|||
// console.log("编辑工作流:",val) |
|||
this.editWorkFlowInfo = val; |
|||
this.editWorkFlowIsShow=true; |
|||
}, |
|||
//关闭编辑工作流弹窗 |
|||
closeEditWorkFlow(){ |
|||
this.editWorkFlowIsShow=false; |
|||
}, |
|||
//删除工作流 |
|||
async delWorkFlowCont(val){ |
|||
let sendData = { |
|||
id:val.key, |
|||
state:3, |
|||
istrue:2 |
|||
} |
|||
const res = await editWorkFlowState(sendData) |
|||
// console.log("删除工作流:",val,sendData,res,sendData) |
|||
if(res.code == 0){ |
|||
this.getWorkFlowList(); |
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang='less'> |
|||
.gaodu{ |
|||
height:calc(100% - 50px); |
|||
} |
|||
.el-container { |
|||
height:calc(100% - 50px); |
|||
overflow: hidden; |
|||
} |
|||
.el-header, .el-footer { |
|||
border-bottom: 1px solid rgb(220, 223, 230); |
|||
text-align: left; |
|||
line-height: 60px; |
|||
padding: 10px 0 0 10px; |
|||
} |
|||
.el-scrollbar { |
|||
height: 101%; |
|||
width: 100%; |
|||
} |
|||
.el-scrollbar__wrap { |
|||
|
|||
overflow: auto; |
|||
overflow: scroll; |
|||
} |
|||
.el-tree-node.is-current>.el-tree-node__content { |
|||
color:#2E89DE!important |
|||
} |
|||
.el-tree-node_black { |
|||
background-color:red !important; |
|||
color:#2E89DE!important |
|||
} |
|||
div::-webkit-scrollbar { |
|||
width: 5px; |
|||
height: 5px; |
|||
} |
|||
div::-webkit-scrollbar-thumb { |
|||
border-radius: 10px; |
|||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
opacity: 0.2; |
|||
|
|||
} |
|||
div::-webkit-scrollbar-track { |
|||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
border-radius: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue