<template>
|
<TableLayout>
|
<template v-slot:table-wrap>
|
<div class="config">
|
<div class="config_list">
|
<div class="config_list_head">
|
<span>配置流程</span>
|
</div>
|
<div class="config_content">
|
<div class="item">
|
<div class="head">发起人</div>
|
<div class="content">访客</div>
|
</div>
|
<div class="arrows">
|
<div class="line"></div>
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</div>
|
<div v-for="(item, index) in apprList" :key="index">
|
<div
|
class="item yellow"
|
:class="{
|
active: activeIndex == index,
|
blue: item.type == '1',
|
}"
|
@click="flowClick(index)"
|
>
|
<div class="head">{{ item.remark }}</div>
|
<div class="content">
|
<div v-if="item.objIds && item.objIds.length === 1 ">
|
<span>{{ item.objIds[0].name }} {{ item.objIds[0].companyName }}</span>
|
<span v-if="item.approveType == 0 && item.type == '0'"> 或签</span>
|
<span v-if="item.approveType == 1 && item.type == '0'"> 会签</span>
|
</div>
|
<div v-else-if="item.objIds && item.objIds.length > 1">
|
<span>{{ item.objIds[0].name }} 等</span>
|
<span v-if="item.approveType == 0 && item.type == '0'"> 或签</span>
|
<span v-if="item.approveType == 1 && item.type == '0'"> 会签</span>
|
</div>
|
<div v-else>请选择</div>
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
<div class="arrows">
|
<template v-if="apprList.length - 1 !== index">
|
<div class="line"></div>
|
<img src="@/assets/images/peizhi_ar@2x.png" alt="" />
|
</template>
|
<i
|
v-if="apprList.length - 2 === index"
|
@click="handleAddAppr()"
|
class="el-icon-circle-plus add"
|
></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="config_data">
|
<div class="config_data_item">
|
<div class="config_data_item_label">选择该节点的审批人</div>
|
<div class="df_ac mb10">
|
<div>审批节点名称</div>
|
<el-input
|
class="w200 ml10"
|
v-model="apprList[activeIndex].remark"
|
></el-input>
|
</div>
|
<!-- 抄送人 -->
|
<template v-if="apprList[activeIndex].type == '1'">
|
<div class="config_data_item_reviewed_content">
|
<div
|
v-for="mem in apprList[activeIndex].objIds"
|
:key="mem.id"
|
class="config_data_item_reviewed_content_item"
|
>
|
<span>{{ mem.name }}</span>
|
<i class="el-icon-close"></i>
|
</div>
|
<span class="add" @click="selStaff">+添加</span>
|
</div>
|
</template>
|
<el-radio-group
|
v-if="apprList[activeIndex].type == '0'"
|
v-model="apprList[activeIndex].memberType"
|
>
|
<el-radio :label="0">被访人</el-radio>
|
<el-radio :label="1">指定人员</el-radio>
|
<el-radio :label="2">部门主管</el-radio>
|
</el-radio-group>
|
<div
|
class="config_data_item_reviewed"
|
v-if="apprList[activeIndex].memberType == 1"
|
>
|
<div class="config_data_item_reviewed_label">
|
<span>指定审核人</span>
|
<span>不超过20人</span>
|
</div>
|
<div class="config_data_item_reviewed_content">
|
<div
|
v-for="mem,memIndex in apprList[activeIndex].objIds"
|
:key="mem.id"
|
class="config_data_item_reviewed_content_item"
|
>
|
<span>{{ mem.name }}</span>
|
<i class="el-icon-close" @click="memDel(memIndex)"></i>
|
</div>
|
<span class="add" @click="selStaff">+添加</span>
|
</div>
|
</div>
|
<div
|
class="config_data_item_reviewed"
|
v-if="apprList[activeIndex].memberType == 2"
|
>
|
<div class="config_data_item_reviewed_label">
|
<span>部门主管</span>
|
</div>
|
<div class="config_data_item_reviewed_r">
|
<span>被访人的</span>
|
<el-select
|
v-model="apprList[activeIndex].level"
|
placeholder="请选择"
|
style="margin: 0 20px 0 10px"
|
>
|
<el-option label="直接主管" :value="0" />
|
<el-option label="二级主管" :value="1" />
|
<el-option label="三级主管" :value="2" />
|
<el-option label="四级主管" :value="4" />
|
</el-select>
|
<el-checkbox
|
v-model="apprList[activeIndex].noleaderOpt"
|
:true-label="1"
|
:false-label="0"
|
>找不到主管时，由上级主管代审核</el-checkbox
|
>
|
</div>
|
</div>
|
</div>
|
<div
|
class="config_data_item"
|
v-if="
|
(apprList[activeIndex].memberType == 1 ||
|
apprList[activeIndex].memberType == 2) &&
|
apprList[activeIndex].type == '0'
|
"
|
>
|
<div class="config_data_item_label">
|
审批方式
|
<span>审批人为多个时，采用的审批方式</span>
|
</div>
|
<el-radio-group
|
v-model="apprList[activeIndex].approveType"
|
style="display: flex; flex-direction: column"
|
>
|
<el-radio :label="0" style="margin-bottom: 20px"
|
>或签（其中一名审批人同意或拒绝即可）</el-radio
|
>
|
<el-radio :label="1">会签（所有审批人都同意才可通过）</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="config_data_submit">
|
<el-button
|
@click="onSubmit"
|
style="background: #435ebe"
|
type="primary"
|
>保存配置项</el-button
|
>
|
<el-button
|
v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1"
|
type="danger"
|
plain
|
@click="handleDel"
|
>删除节点</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- -->
|
<el-dialog title="选择员工" :visible.sync="isShowTransfer" width="1000px">
|
<div class="staff_modal">
|
<div class="left">
|
<div
|
style="
|
width: 100%;
|
height: 50px;
|
background: rgba(242, 242, 242, 1);
|
line-height: 50px;
|
text-align: center;
|
font-size: 14px;
|
"
|
>
|
企业组织架构
|
</div>
|
<div style="width: 100%; height: 100%; overflow-y: scroll">
|
<Tree
|
:list="companyTree"
|
:defaultProps="{
|
name: 'name',
|
status: 'fsStatus',
|
children: 'childList',
|
id: 'id',
|
}"
|
@callback="callback"
|
/>
|
</div>
|
</div>
|
<el-transfer
|
filterable
|
:title="['未选', '已选']"
|
openAll
|
:props="{ label: 'name', key: 'keyTemp' }"
|
filter-placeholder="搜索员工"
|
v-model="searchForm.objIds"
|
:data="memberList"
|
class="transfer"
|
>
|
</el-transfer>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowTransfer = false">取 消</el-button>
|
<el-button type="primary" @click="TransferSub">确 定</el-button>
|
</span>
|
</el-dialog>
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
// import treeTransfer from 'el-tree-transfer'
|
import Tree from '@/components/common/Tree'
|
import { approveTemplSave, approveTemplByType } from '@/api'
|
import { fetchList } from '@/api/business/company'
|
import { fetchList as memberListPost } from '@/api/business/member'
|
export default {
|
name: 'config',
|
components: {
|
TableLayout,
|
Tree
|
},
|
data () {
|
return {
|
activeType: '2',
|
apprList: [
|
{ remark: '审批人', active: false, type: '0', objIds: [] },
|
{ remark: '抄送人', active: false, type: '1', objIds: [] }
|
],
|
activeIndex: 0,
|
|
param: {},
|
searchForm: {},
|
isShowTransfer: false,
|
memberList: [],
|
companyTree: []
|
}
|
},
|
created () {
|
this.getfindCompanyTreePage()
|
this.initDate()
|
},
|
methods: {
|
flowClick (i) {
|
this.activeIndex = i
|
this.apprList.forEach((item, index) => {
|
if (i === index) {
|
item.active = true
|
if (item.objIds && item.objIds.length > 0) {
|
const objIds = item.objIds.map(i => {
|
return `${i.id}-${i.name}${i.companyName ? '-' + i.companyName : ''}`
|
})
|
this.$set(this.searchForm, 'objIds', objIds)
|
} else {
|
this.$set(this.searchForm, 'objIds', [])
|
}
|
} else {
|
item.active = false
|
}
|
})
|
},
|
initDate () {
|
const { activeType } = this
|
approveTemplByType(activeType).then(res => {
|
if (res && res.paramList) {
|
const arr = res.paramList || []
|
arr.forEach(item => {
|
if (item.memberList && item.memberList.length > 0) {
|
item.objIds = item.memberList.map(i => {
|
return {
|
id: i.id,
|
name: i.name,
|
companyName: i.companyName
|
}
|
})
|
}
|
})
|
this.apprList = arr
|
this.flowClick(0)
|
this.$forceUpdate()
|
}
|
|
// console.log(res);
|
})
|
},
|
onSubmit () {
|
const { apprList, activeType } = this
|
const temp = JSON.parse(JSON.stringify(apprList))
|
temp.forEach((item, index) => {
|
item.level = index + 1
|
if (item.objIds && item.objIds.length > 0) {
|
item.objIds = item.objIds.map(i => i.id).join(',')
|
}
|
})
|
approveTemplSave({
|
type: activeType,
|
paramList: temp
|
}).then(res => {
|
if (res.code === 200) {
|
this.$message.success('保存成功')
|
}
|
})
|
},
|
handleDel () {
|
const { activeIndex } = this
|
this.apprList.splice(activeIndex, 1)
|
this.activeIndex = 0
|
},
|
handleAddAppr () {
|
this.apprList.splice(this.apprList.length - 2, 0, { remark: '审批人', active: false, type: 0, objIds: [] })
|
// this.apprList.push({ remark: '审批人', active: false, type: '0' })
|
},
|
|
// 获取组织树
|
getfindCompanyTreePage () {
|
fetchList()
|
.then(res => {
|
if (res && res.length > 0) {
|
res[0].fsStatus = 1
|
this.companyTree = res
|
// // this.searchForm.erpOrgId = res[0].erpId
|
// this.search()
|
// this.department = this.getDepartmentTree(res)
|
}
|
})
|
},
|
getMemberList () {
|
memberListPost({
|
model: {
|
companyId: this.searchForm.companyId || '',
|
canVisit: '',
|
companyType: 1,
|
erpOrgId: '',
|
hasFace: '',
|
hkStatus: '',
|
includeChild: false,
|
type: 2
|
},
|
page: 1,
|
capacity: 30
|
}).then(res => {
|
this.memberList = res.records || []
|
this.memberList.forEach(item => {
|
item.keyTemp = item.id + '-' + item.name + '-' + item.companyName || ''
|
})
|
// console.log('defaultProps', res)
|
})
|
},
|
callback (row) {
|
console.log(row)
|
this.$set(this.searchForm, 'companyId', row.id)
|
this.$set(this.searchForm, 'erpOrgId', row.erpId)
|
this.getMemberList()
|
},
|
TransferSub () {
|
const { activeIndex } = this
|
if (this.searchForm.objIds && this.searchForm.objIds.length > 0) {
|
if (this.searchForm.objIds.length > 20) return this.$message.warning('最多选择20人')
|
const arr = this.searchForm.objIds.map(ii => {
|
const obj = ii.split('-')
|
return {
|
id: Number(obj[0]),
|
name: obj[1],
|
companyName: obj[2] || ''
|
}
|
})
|
this.apprList.forEach((item, index) => {
|
if (activeIndex === index) {
|
item.objIds = arr
|
}
|
})
|
}
|
this.isShowTransfer = false
|
console.log(this.searchForm.objIds)
|
},
|
memDel (memIndex) {
|
const { activeIndex } = this
|
this.apprList.forEach((item, index) => {
|
if (activeIndex === index) {
|
item.objIds.splice(memIndex, 1)
|
const objIds = item.objIds.map(i => {
|
return i.id + '-' + i.name
|
})
|
this.$set(this.searchForm, 'objIds', objIds)
|
}
|
})
|
},
|
selStaff () {
|
this.isShowTransfer = true
|
this.getMemberList()
|
},
|
seleItem (i) {
|
this.list.forEach((item, index) => {
|
item.active = index === i
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.config {
|
width: 100%;
|
padding-bottom: 20px;
|
box-sizing: border-box;
|
height: calc(100vh - 140px);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.config_list {
|
width: 543px;
|
height: 100%;
|
flex-shrink: 0;
|
border-radius: 2px;
|
padding: 20px;
|
box-sizing: border-box;
|
border: 1px solid #eeeeee;
|
background: #f7f7f7;
|
.config_list_head {
|
width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
font-size: 18px;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
.config_content {
|
width: 100%;
|
height: calc(100% - 40px);
|
padding-top: 45px;
|
box-sizing: border-box;
|
overflow-y: scroll;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
&::-webkit-scrollbar {
|
width: 0;
|
}
|
.active {
|
border: 2px solid #4456ac !important;
|
}
|
.yellow {
|
background: #e89e42 !important;
|
}
|
.blue {
|
background: #5094f3 !important;
|
}
|
.arrows {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
.line {
|
width: 1px;
|
height: 60px;
|
background-color: #ccc;
|
}
|
.add {
|
font-size: 40px;
|
color: #2080f7;
|
position: absolute;
|
cursor: pointer;
|
z-index: 999;
|
top: 10px;
|
}
|
img {
|
width: 12px;
|
}
|
}
|
.item {
|
width: 200px;
|
cursor: pointer;
|
border: 2px solid #f7f7f7;
|
height: 80px;
|
background: #4456ac;
|
border-radius: 2px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
.head {
|
height: 32px;
|
line-height: 32px;
|
padding: 2px 12px;
|
color: #fff;
|
}
|
.content {
|
flex: 1;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
padding: 0 12px;
|
justify-content: space-between;
|
}
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
.config_data {
|
flex: 1;
|
height: 100%;
|
margin-left: 20px;
|
.config_data_submit {
|
margin-top: 50px;
|
}
|
.config_data_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.config_data_item_label {
|
font-size: 16px;
|
font-weight: 500;
|
color: #222222;
|
margin-bottom: 20px;
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: #999999;
|
margin-left: 10px;
|
}
|
}
|
.config_data_item_reviewed {
|
width: 100%;
|
margin-top: 20px;
|
.config_data_item_reviewed_r {
|
margin-top: 10px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
span {
|
flex-shrink: 0;
|
font-size: 14px;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
.config_data_item_reviewed_label {
|
display: flex;
|
align-items: center;
|
span {
|
&:nth-child(1) {
|
font-size: 14px;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 12px;
|
font-weight: 400;
|
color: #999999;
|
margin-left: 8px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.config_data_item_reviewed_content {
|
width: 400px;
|
margin-top: 10px;
|
height: 110px;
|
padding: 12px;
|
box-sizing: border-box;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
display: flex;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
.add {
|
font-size: 12px;
|
font-weight: 400;
|
color: #435ebe;
|
cursor: pointer;
|
margin-top: 3px;
|
}
|
.config_data_item_reviewed_content_item {
|
padding: 3px 5px;
|
background: #f4f7fc;
|
border-radius: 2px;
|
box-sizing: border-box;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: #333333;
|
}
|
i {
|
color: #949ba2;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
.staff_modal {
|
display: flex;
|
.left {
|
width: 300px;
|
margin-right: 20px;
|
}
|
.transfer {
|
height: 600px;
|
::v-deep .el-transfer-panel__body {
|
height: 500px;
|
}
|
::v-deep .el-transfer-panel__list.is-filterable {
|
height: 480px;
|
}
|
}
|
}
|
</style>
|
