feat:增加项目负责人和成员选择功能
在项目申请详情中,新增了项目负责人和成员的选择功能,使用user-picker组件实现。 同时,对前置流程的展示进行了调整,并完善了审批记录和流程图的相关逻辑。
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
<fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
|
<fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
|
||||||
<el-form :model="formData" label-width="auto" style="margin-top: -15px">
|
<el-form :model="formData" label-width="auto" style="margin-top: -15px">
|
||||||
<file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)"
|
<file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)"
|
||||||
v-model:value="formData.fileList" :processViewer="processViewer"
|
v-model:value="formData.fileList" :processViewer="processViewer"
|
||||||
:file-list-show="fileListShow"/>
|
:file-list-show="fileListShow"/>
|
||||||
@@ -18,8 +18,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<div class="approval-record">
|
<div class="approval-record">
|
||||||
<div class="approval-title" style="margin-top: -15px">
|
<div class="approval-title" style="margin-top: -15px">
|
||||||
<baseTitle title="审批记录" ></baseTitle>
|
<baseTitle title="审批记录"></baseTitle>
|
||||||
<div class="diagram">
|
<div class="diagram">
|
||||||
<div class="base-title">流程图</div>
|
<div class="base-title">流程图</div>
|
||||||
<el-switch
|
<el-switch
|
||||||
@@ -89,6 +89,38 @@ const schema = computed(() => {
|
|||||||
let arr
|
let arr
|
||||||
if (props.type == 'approval') {
|
if (props.type == 'approval') {
|
||||||
arr = [
|
arr = [
|
||||||
|
{
|
||||||
|
label: '项目负责人',
|
||||||
|
prop: 'projectChargePerson',
|
||||||
|
colProps: {
|
||||||
|
span: 24
|
||||||
|
},
|
||||||
|
component: () => (
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
props.formData.projectChargePerson ?
|
||||||
|
<span>{props.formData.projectChargePerson.name} </span>
|
||||||
|
: <span>{'--'}</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '项目成员',
|
||||||
|
prop: 'projectPersonList',
|
||||||
|
colProps: {
|
||||||
|
span: 24
|
||||||
|
},
|
||||||
|
component: () => (
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
props.formData.projectPersonList ? props.formData.projectPersonList.map(item => {
|
||||||
|
return <span>{item.name} </span>
|
||||||
|
}) : <span>{'--'}</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '前置流程',
|
label: '前置流程',
|
||||||
prop: 'preProcess',
|
prop: 'preProcess',
|
||||||
|
|||||||
@@ -2,8 +2,34 @@
|
|||||||
<div class="apply-block">
|
<div class="apply-block">
|
||||||
<el-form :model="localFormData" ref="formRef" label-width="auto" :rules="rules" v-if="step!=='50'">
|
<el-form :model="localFormData" ref="formRef" label-width="auto" :rules="rules" v-if="step!=='50'">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="24">
|
||||||
<el-form-item label="前置流程" :required="preProcessRequired" prop="requestName" label-width="125">
|
<el-form-item label="项目负责人" :required="true" prop="projectChargePerson"
|
||||||
|
label-width="125">
|
||||||
|
<div v-for="item in projectChargePersonUserList" :key="item.id" style="margin-right: 5px">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<el-button color="#DED0B2" @click="handleShowProjectChargePersonTable">
|
||||||
|
{{ localFormData.projectChargePerson ? '更改' : '请选择' }}
|
||||||
|
</el-button>
|
||||||
|
<user-picker :multiple="false" ref="projectChargePersonUserPicker" title="请选择项目负责人"
|
||||||
|
v-model:value="projectChargePersonUserList" @ok="projectChargePersonUserPickerOk"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="项目成员" :required="true" prop="projectPerson"
|
||||||
|
label-width="125">
|
||||||
|
<div v-for="item in projectPersonUserList" :key="item.id" style="margin-right: 5px">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<el-button color="#DED0B2" @click="handleShowProjectPersonTable">
|
||||||
|
{{ localFormData.projectPersonIds ? '更改' : '请选择' }}
|
||||||
|
</el-button>
|
||||||
|
<user-picker :multiple="true" ref="projectPersonUserPicker" title="请选择项目成员"
|
||||||
|
v-model:value="projectPersonUserList" @ok="projectPersonUserPickerOk"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="前置流程" :required="preProcessRequired" prop="preProcess" label-width="125">
|
||||||
<div v-for="item in localFormData.preProcess" :key="item.requestId">
|
<div v-for="item in localFormData.preProcess" :key="item.requestId">
|
||||||
<a :href="item.baseUrl" target="_blank"
|
<a :href="item.baseUrl" target="_blank"
|
||||||
style="color: #2a99ff;margin-right: 10px;cursor: pointer">{{ item.requestName }}</a>
|
style="color: #2a99ff;margin-right: 10px;cursor: pointer">{{ item.requestName }}</a>
|
||||||
@@ -26,7 +52,7 @@
|
|||||||
<baseTitle title="审批记录" v-if="mode === 'resubmit'"></baseTitle>
|
<baseTitle title="审批记录" v-if="mode === 'resubmit'"></baseTitle>
|
||||||
<div v-else></div>
|
<div v-else></div>
|
||||||
<div class="diagram">
|
<div class="diagram">
|
||||||
<div class="base-title" >流程图</div>
|
<div class="base-title">流程图</div>
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="changeDiagram"
|
v-model="changeDiagram"
|
||||||
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
||||||
@@ -102,12 +128,17 @@ import {
|
|||||||
import {useProcessStore} from '@/stores/processStore.js';
|
import {useProcessStore} from '@/stores/processStore.js';
|
||||||
import {useTagsView} from '@/stores/tagsview.js'
|
import {useTagsView} from '@/stores/tagsview.js'
|
||||||
import Paging from "@/components/pagination/index.vue";
|
import Paging from "@/components/pagination/index.vue";
|
||||||
|
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const changeDiagram = ref(false)
|
const changeDiagram = ref(false)
|
||||||
const preProcessTable = ref()
|
const preProcessTable = ref()
|
||||||
const showSingleTable = ref(false)
|
const showSingleTable = ref(false)
|
||||||
|
const projectChargePersonUserList = ref()
|
||||||
|
const projectChargePersonUserPicker = ref()
|
||||||
|
const projectPersonUserList = ref([])
|
||||||
|
const projectPersonUserPicker = ref()
|
||||||
const singleList = ref([])
|
const singleList = ref([])
|
||||||
const emit = defineEmits(["getAttachment", "getOtherFile"])
|
const emit = defineEmits(["getAttachment", "getOtherFile"])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@@ -149,12 +180,16 @@ const pageInfo = reactive({
|
|||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
})
|
})
|
||||||
const rules = reactive({
|
const rules = reactive({
|
||||||
requestName: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
|
preProcess: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
|
||||||
|
projectChargePerson: [{required: true, message: '请选择项目负责人', trigger: 'blur'}],
|
||||||
|
projectPerson: [{required: true, message: '请选择项目成员', trigger: 'blur'}],
|
||||||
})
|
})
|
||||||
const tagsViewStore = useTagsView()
|
const tagsViewStore = useTagsView()
|
||||||
const processStore = useProcessStore()
|
const processStore = useProcessStore()
|
||||||
const otherFileList = ref([])
|
const otherFileList = ref([])
|
||||||
const localFormData = ref({
|
const localFormData = ref({
|
||||||
|
projectPersonIds: [],
|
||||||
|
projectChargePerson: null,
|
||||||
preProcess: [
|
preProcess: [
|
||||||
// {
|
// {
|
||||||
// requestId: null,
|
// requestId: null,
|
||||||
@@ -201,6 +236,26 @@ const handleShowPreTable = () => {
|
|||||||
showPreTable.value = true
|
showPreTable.value = true
|
||||||
getPreProcessList()
|
getPreProcessList()
|
||||||
}
|
}
|
||||||
|
const handleShowProjectChargePersonTable = () => {
|
||||||
|
projectChargePersonUserPicker.value.showUserPicker()
|
||||||
|
}
|
||||||
|
|
||||||
|
const projectChargePersonUserPickerOk = (userList) => {
|
||||||
|
projectChargePersonUserList.value = userList
|
||||||
|
localFormData.value.projectChargePerson = userList[0].id
|
||||||
|
}
|
||||||
|
const handleShowProjectPersonTable = () => {
|
||||||
|
projectPersonUserPicker.value.showUserPicker()
|
||||||
|
}
|
||||||
|
|
||||||
|
const projectPersonUserPickerOk = (userList) => {
|
||||||
|
projectPersonUserList.value = userList
|
||||||
|
let userIds = []
|
||||||
|
for (const user of userList) {
|
||||||
|
userIds.push(user.id)
|
||||||
|
}
|
||||||
|
localFormData.value.projectPersonIds = userIds
|
||||||
|
}
|
||||||
const getPreProcessList = () => {
|
const getPreProcessList = () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
getPreProcess().then(res => {
|
getPreProcess().then(res => {
|
||||||
@@ -278,9 +333,9 @@ const compositeParam = (item) => {
|
|||||||
}
|
}
|
||||||
const getAttachment = (val) => {
|
const getAttachment = (val) => {
|
||||||
// console.log('上传文件getAttachment', val)
|
// console.log('上传文件getAttachment', val)
|
||||||
showSingleTable.value=false
|
showSingleTable.value = false
|
||||||
localFormData.value.singleFile = compositeParam(val)
|
localFormData.value.singleFile = compositeParam(val)
|
||||||
singleList.value.push( compositeParam(val))
|
singleList.value.push(compositeParam(val))
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
showSingleTable.value = true
|
showSingleTable.value = true
|
||||||
})
|
})
|
||||||
@@ -349,6 +404,8 @@ const handleSubmit = async () => {
|
|||||||
fileList: files,
|
fileList: files,
|
||||||
singleFile: attachment.value.singleFile,
|
singleFile: attachment.value.singleFile,
|
||||||
projectId: projectId.value,
|
projectId: projectId.value,
|
||||||
|
projectChargePerson: localFormData.value.projectChargePerson,
|
||||||
|
projectPersonIds: localFormData.value.projectPersonIds,
|
||||||
preProcess: JSON.stringify(localFormData.value.preProcess)
|
preProcess: JSON.stringify(localFormData.value.preProcess)
|
||||||
}
|
}
|
||||||
// console.log('params', params)
|
// console.log('params', params)
|
||||||
@@ -430,7 +487,17 @@ const init = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
return Object.keys(props.formData).length && (localFormData.value = props.formData)
|
projectChargePersonUserList.value = [props.formData.projectChargePerson]
|
||||||
|
projectPersonUserList.value = props.formData.projectPersonList
|
||||||
|
let flag = Object.keys(props.formData).length && (localFormData.value = props.formData)
|
||||||
|
localFormData.value.projectChargePerson = props.formData.projectChargePerson.id
|
||||||
|
localFormData.value.projectPersonIds = []
|
||||||
|
if (projectPersonUserList.value){
|
||||||
|
projectPersonUserList.value.forEach(item => {
|
||||||
|
localFormData.value.projectPersonIds.push(item.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return flag
|
||||||
})
|
})
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await init()
|
await init()
|
||||||
|
|||||||
@@ -14,8 +14,8 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-form :model="queryType">
|
<el-form :model="queryType">
|
||||||
<el-form-item prop="dictType">
|
<el-form-item prop="dictName">
|
||||||
<el-input v-model="queryType.dictType" placeholder="请输入字典类型" :suffix-icon="Search"
|
<el-input v-model="queryType.dictName" placeholder="请输入字典类型" :suffix-icon="Search"
|
||||||
clearable @clear="getTreeList" @input="getTreeList"></el-input>
|
clearable @clear="getTreeList" @input="getTreeList"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -230,7 +230,7 @@ const cacheStore = useCacheStore();
|
|||||||
cacheStore.setCacheKey(["normal_disable"]);
|
cacheStore.setCacheKey(["normal_disable"]);
|
||||||
//查询参数
|
//查询参数
|
||||||
const queryType = reactive({
|
const queryType = reactive({
|
||||||
dictType: ""
|
dictName: ""
|
||||||
});
|
});
|
||||||
//查询参数
|
//查询参数
|
||||||
const queryData = reactive({
|
const queryData = reactive({
|
||||||
|
|||||||
Reference in New Issue
Block a user