<template>
|
<TableLayout :style="'overflow: auto;height: 100%;'">
|
<template v-slot:table-wrap>
|
<el-tabs v-model="activeType" @tab-click="handleClick">
|
<el-tab-pane label="市内用车" name="3"></el-tab-pane>
|
<el-tab-pane label="市外用车" name="4"></el-tab-pane>
|
</el-tabs>
|
<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">
|
<!-- 审批 -->
|
<template v-if="item.type == 0">
|
<template v-if="item.memberType == '2'">
|
<div>部门主管</div>
|
</template>
|
<template v-if="item.memberType == '1'">
|
<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>
|
</template>
|
</template>
|
<!-- 抄送 -->
|
<template v-if="item.type == 1">
|
<div v-if="item.objIds && item.objIds.length === 1">
|
<span>{{ item.objIds[0].name }}
|
{{ item.objIds[0].companyName }}</span>
|
</div>
|
<div v-else-if="item.objIds && item.objIds.length > 1">
|
<span>{{ item.objIds[0].name }} 等</span>
|
</div>
|
<div v-else>请选择</div>
|
<i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i>
|
</template>
|
</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, memIndex in apprList[activeIndex].objIds" :key="mem.id"
|
class="config_data_item_reviewed_content_item">
|
<span>{{ mem.name }}</span>
|
<i @click="memDel(memIndex)" 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].objLevel" 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 v-if="apprList[activeIndex].type == '0'" class="df_ac mb10">
|
<div>允许修改"驾驶员"</div>
|
<el-switch class="ml10" :active-value="1" :inactive-value="0"
|
v-model="apprList[activeIndex].driverParam"></el-switch>
|
</div>
|
<div class="config_data_submit">
|
<el-button @click="onSubmit" :loading="subLoading" 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%; max-height: 560px; 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 {
|
height: 500,
|
activeType: '3',
|
subLoading: false,
|
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()
|
this.height = window.innerHeight -300
|
},
|
methods: {
|
handleClick() {
|
this.apprList = []
|
const arr = [
|
{ remark: '审批人', active: false, type: 0, objIds: [] },
|
{ remark: '抄送人', active: false, type: 1, objIds: [] }
|
]
|
this.apprList = [...arr]
|
this.initDate()
|
},
|
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
|
}
|
})
|
} else {
|
item.objIds = []
|
}
|
})
|
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(',')
|
} else {
|
item.objIds = ''
|
}
|
})
|
this.subLoading = true
|
approveTemplSave({
|
type: activeType,
|
paramList: temp
|
}).then(res => {
|
this.subLoading = false
|
this.$tip.success('保存成功')
|
}, () => {
|
this.subLoading = false
|
})
|
},
|
handleDel() {
|
const { activeIndex } = this
|
this.apprList.splice(activeIndex, 1)
|
this.activeIndex = 0
|
},
|
handleAddAppr() {
|
this.apprList.splice(this.apprList.length - 1, 0, { remark: '审批人', approveType: 0, 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: true,
|
type: 2
|
},
|
page: 1,
|
capacity: 300
|
}).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>
|
.el-container .el-main{
|
overflow: auto !important;
|
}
|
.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;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
::v-deep .el-transfer-panel {
|
flex: 1;
|
height: 100%;
|
}
|
|
::v-deep .el-transfer-panel__body {
|
height: 500px;
|
}
|
|
::v-deep .el-transfer-panel__list.is-filterable {
|
height: 480px;
|
}
|
}
|
}
|
</style>
|
