ssc
4 years ago
parent
0165c01d75
commit
bffb44a725
12 changed files with 522 additions and 21 deletions
@ -0,0 +1,19 @@ |
|||||||
|
import request from '@/router/axios' |
||||||
|
|
||||||
|
const prefix = '/api/blade-workflow/design/model/scope' |
||||||
|
|
||||||
|
export const getList = (params) => { |
||||||
|
return request({ |
||||||
|
url: `${prefix}/list`, |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const submit = (row) => { |
||||||
|
return request({ |
||||||
|
url: `${prefix}/submit`, |
||||||
|
method: 'post', |
||||||
|
data: row |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,272 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="wf-dialog" |
||||||
|
custom-class="wf-dialog" |
||||||
|
:visible.sync="visible" |
||||||
|
title="人员配置" |
||||||
|
width="60%" |
||||||
|
:before-close="handleClose" |
||||||
|
append-to-body> |
||||||
|
<el-table v-if="visible" |
||||||
|
class="avue-crud" |
||||||
|
:data="data" |
||||||
|
border |
||||||
|
size="mini"> |
||||||
|
<el-table-column align="center" |
||||||
|
header-align="center" |
||||||
|
width="80"> |
||||||
|
<template #header> |
||||||
|
<el-button circle |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
icon="el-icon-plus" |
||||||
|
@click="data.push({})"></el-button> |
||||||
|
</template> |
||||||
|
<template #default="{$index}"> |
||||||
|
<el-button circle |
||||||
|
type="danger" |
||||||
|
size="mini" |
||||||
|
icon="el-icon-delete" |
||||||
|
@click="data.splice($index, 1)"></el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="人员类型" |
||||||
|
prop="type" |
||||||
|
align="center" |
||||||
|
header-align="center"> |
||||||
|
<template #default="{row, $index}"> |
||||||
|
<el-select v-model="row.type" |
||||||
|
size="mini" |
||||||
|
placeholder="人员类型" |
||||||
|
@change="handleTypeChange($index)"> |
||||||
|
<el-option v-for="item in typeList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
:disabled="data.find(d => d.type == item.value)"></el-option> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="值" |
||||||
|
prop="text" |
||||||
|
align="center" |
||||||
|
header-align="center"> |
||||||
|
<template #default="{row, $index}"> |
||||||
|
<template v-if="row.type == 'user'"> |
||||||
|
<el-input v-model="row.text" |
||||||
|
size="mini" |
||||||
|
placeholder="用户" |
||||||
|
readonly |
||||||
|
@click.native="handleSelect($index, 'user-select')"> |
||||||
|
<template #append> |
||||||
|
<el-button icon="el-icon-plus"></el-button> |
||||||
|
</template> |
||||||
|
</el-input> |
||||||
|
</template> |
||||||
|
<template v-else-if="row.type == 'role'"> |
||||||
|
<avue-input-tree :ref="`role_${$index}`" |
||||||
|
v-model="row.value" |
||||||
|
size="mini" |
||||||
|
dataType="string" |
||||||
|
multiple |
||||||
|
clearable |
||||||
|
placeholder="角色" |
||||||
|
:dic="roleList" |
||||||
|
:props="roleProps || {label: 'roleName', value: 'id'}" |
||||||
|
@change="handleChange($index, `role_${$index}`)"> |
||||||
|
</avue-input-tree> |
||||||
|
</template> |
||||||
|
<template v-else-if="row.type == 'dept'"> |
||||||
|
<avue-input-tree :ref="`dept_${$index}`" |
||||||
|
v-model="row.value" |
||||||
|
size="mini" |
||||||
|
dataType="string" |
||||||
|
multiple |
||||||
|
clearable |
||||||
|
placeholder="部门" |
||||||
|
:dic="deptList" |
||||||
|
:props="deptProps || {label: 'deptName', value: 'id'}" |
||||||
|
@change="handleChange($index, `dept_${$index}`)"> |
||||||
|
</avue-input-tree> |
||||||
|
</template> |
||||||
|
<template v-else-if="row.type == 'post'"> |
||||||
|
<avue-input-tree :ref="`post_${$index}`" |
||||||
|
v-model="row.value" |
||||||
|
size="mini" |
||||||
|
dataType="string" |
||||||
|
multiple |
||||||
|
clearable |
||||||
|
placeholder="职位" |
||||||
|
:dic="postList" |
||||||
|
:props="postProps || {label: 'postName', value: 'id'}" |
||||||
|
@change="handleChange($index, `post_${$index}`)"> |
||||||
|
</avue-input-tree> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<template #footer> |
||||||
|
<el-button @click="handleClose" |
||||||
|
size="mini">取消</el-button> |
||||||
|
<el-button type="primary" |
||||||
|
@click="handleSubmit" |
||||||
|
size="mini">确定</el-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<user-select ref="user-select" |
||||||
|
check-type="checkbox" |
||||||
|
:user-url="userUrl" |
||||||
|
:custom-option="customOption" |
||||||
|
:default-checked="defaultChecked" |
||||||
|
@onConfirm="handleSelectConfirm"></user-select> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import UserSelect from './user-select.vue' |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
userOption: Object |
||||||
|
}, |
||||||
|
components: { |
||||||
|
UserSelect, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
userUrl() { |
||||||
|
return this.userOption.userUrl |
||||||
|
}, |
||||||
|
roleUrl() { |
||||||
|
return this.userOption.roleUrl |
||||||
|
}, |
||||||
|
deptUrl() { |
||||||
|
return this.userOption.deptUrl |
||||||
|
}, |
||||||
|
postUrl() { |
||||||
|
return this.userOption.postUrl |
||||||
|
}, |
||||||
|
customUrl() { |
||||||
|
return this.userOption.customUrl |
||||||
|
}, |
||||||
|
customOption() { |
||||||
|
return this.userOption.customOption |
||||||
|
}, |
||||||
|
roleProps() { |
||||||
|
return this.customOption ? this.customOption.roleProps : null |
||||||
|
}, |
||||||
|
deptProps() { |
||||||
|
return this.customOption ? this.customOption.deptProps : null |
||||||
|
}, |
||||||
|
postProps() { |
||||||
|
return this.customOption ? this.customOption.postProps : null |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible(val) { |
||||||
|
if (!this.init) { |
||||||
|
this.getRoleList() |
||||||
|
this.getDeptList() |
||||||
|
this.getPostList() |
||||||
|
this.init = true |
||||||
|
} |
||||||
|
if (val && this.userOption && this.userOption.data) this.$set(this, 'data', JSON.parse(JSON.stringify(this.userOption.data))) |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
init: false, |
||||||
|
visible: false, |
||||||
|
data: [], |
||||||
|
roleList: [], |
||||||
|
deptList: [], |
||||||
|
postList: [], |
||||||
|
selectIndex: 0, |
||||||
|
defaultChecked: '', |
||||||
|
typeList: [{ |
||||||
|
label: '用户', |
||||||
|
value: 'user' |
||||||
|
}, { |
||||||
|
label: '角色', |
||||||
|
value: 'role' |
||||||
|
}, { |
||||||
|
label: '部门', |
||||||
|
value: 'dept' |
||||||
|
}, { |
||||||
|
label: '职位', |
||||||
|
value: 'post' |
||||||
|
}], |
||||||
|
typeDic: { |
||||||
|
user: '用户', |
||||||
|
role: '角色', |
||||||
|
dept: '部门', |
||||||
|
post: '职位', |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleSelect(index, ref) { |
||||||
|
this.selectIndex = index |
||||||
|
this.defaultChecked = this.data[index].value |
||||||
|
this.$refs[ref].visible = true |
||||||
|
}, |
||||||
|
handleSelectConfirm(id, name) { |
||||||
|
this.$set(this.data[this.selectIndex], 'value', id) |
||||||
|
this.$set(this.data[this.selectIndex], 'text', name) |
||||||
|
}, |
||||||
|
handleTypeChange(index) { |
||||||
|
this.$set(this.data, index, { |
||||||
|
type: this.data[index].type |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleChange(index, ref) { |
||||||
|
this.$nextTick(() => { |
||||||
|
const text = this.$refs[ref].labelShow.join(',') |
||||||
|
if (text) this.$set(this.data[index], 'text', text) |
||||||
|
}) |
||||||
|
}, |
||||||
|
getRoleList() { |
||||||
|
this.$axios.get(this.roleUrl).then(res => { |
||||||
|
this.roleList = res.data.data |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDeptList() { |
||||||
|
this.$axios.get(this.deptUrl).then(res => { |
||||||
|
this.deptList = res.data.data |
||||||
|
}) |
||||||
|
}, |
||||||
|
getPostList() { |
||||||
|
this.$axios.get(this.postUrl, { current: 1, size: 999 }).then(res => { |
||||||
|
this.postList = res.data.data.records |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
this.$emit('submit', this.data.filter(d => d.type && d.value)) |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
handleClose(done) { |
||||||
|
this.visible = false |
||||||
|
if (done && typeof done == 'function') done() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
.wf-dialog { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
margin: 0 !important; |
||||||
|
position: absolute; |
||||||
|
top: 40%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -40%); |
||||||
|
max-height: calc(100% - 30px); |
||||||
|
max-width: calc(100% - 30px); |
||||||
|
|
||||||
|
.el-dialog__body { |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.el-select { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue