feat:增加项目负责人和成员选择功能

在项目申请详情中，新增了项目负责人和成员的选择功能，使用user-picker组件实现。同时，对前置流程的展示进行了调整，并完善了审批记录和流程图的相关逻辑。
2024-07-10 18:08:51 +08:00
parent b1616b716c
commit 42fd8d9740
3 changed files with 112 additions and 13 deletions
--- a/src/components/DetailComponent/ApprovalDetail.vue
+++ b/src/components/DetailComponent/ApprovalDetail.vue
@@ -1,7 +1,7 @@
 <template>
  <div v-loading="loading">
    <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)"
                      v-model:value="formData.fileList" :processViewer="processViewer"
                      :file-list-show="fileListShow"/>
@@ -18,8 +18,8 @@
      </el-form-item>
    </div>
    <div class="approval-record">
-      <div class="approval-title"  style="margin-top: -15px">
-        <baseTitle title="审批记录" ></baseTitle>
+      <div class="approval-title" style="margin-top: -15px">
+        <baseTitle title="审批记录"></baseTitle>
        <div class="diagram">
          <div class="base-title">流程图</div>
          <el-switch
@@ -89,6 +89,38 @@ const schema = computed(() => {
  let arr
  if (props.type == 'approval') {
    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: '前置流程',
        prop: 'preProcess',
--- a/src/components/DetailComponent/ProjectApply.vue
+++ b/src/components/DetailComponent/ProjectApply.vue
@@ -2,8 +2,34 @@
  <div class="apply-block">
    <el-form :model="localFormData" ref="formRef" label-width="auto" :rules="rules" v-if="step!=='50'">
      <el-row>
-        <el-col :span="12">
-          <el-form-item label="前置流程" :required="preProcessRequired" prop="requestName" label-width="125">
+        <el-col :span="24">
+          <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">
              <a :href="item.baseUrl" target="_blank"
                 style="color: #2a99ff;margin-right: 10px;cursor: pointer">{{ item.requestName }}</a>
@@ -26,7 +52,7 @@
          <baseTitle title="审批记录" v-if="mode === 'resubmit'"></baseTitle>
          <div v-else></div>
          <div class="diagram">
-            <div class="base-title" >流程图</div>
+            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
@@ -102,12 +128,17 @@ import {
 import {useProcessStore} from '@/stores/processStore.js';
 import {useTagsView} from '@/stores/tagsview.js'
 import Paging from "@/components/pagination/index.vue";
+import UserPicker from "@/views/workflow/process/common/UserPicker.vue";

 const router = useRouter()
 const route = useRoute()
 const changeDiagram = ref(false)
 const preProcessTable = ref()
 const showSingleTable = ref(false)
+const projectChargePersonUserList = ref()
+const projectChargePersonUserPicker = ref()
+const projectPersonUserList = ref([])
+const projectPersonUserPicker = ref()
 const singleList = ref([])
 const emit = defineEmits(["getAttachment", "getOtherFile"])
 const props = defineProps({
@@ -149,12 +180,16 @@ const pageInfo = reactive({
  pageSize: 10,
 })
 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 processStore = useProcessStore()
 const otherFileList = ref([])
 const localFormData = ref({
+  projectPersonIds: [],
+  projectChargePerson: null,
  preProcess: [
    // {
    //   requestId: null,
@@ -201,6 +236,26 @@ const handleShowPreTable = () => {
  showPreTable.value = true
  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 = () => {
  loading.value = true
  getPreProcess().then(res => {
@@ -278,9 +333,9 @@ const compositeParam = (item) => {
 }
 const getAttachment = (val) => {
  // console.log('上传文件getAttachment', val)
-  showSingleTable.value=false
+  showSingleTable.value = false
  localFormData.value.singleFile = compositeParam(val)
-  singleList.value.push( compositeParam(val))
+  singleList.value.push(compositeParam(val))
  nextTick(() => {
    showSingleTable.value = true
  })
@@ -349,6 +404,8 @@ const handleSubmit = async () => {
    fileList: files,
    singleFile: attachment.value.singleFile,
    projectId: projectId.value,
+    projectChargePerson: localFormData.value.projectChargePerson,
+    projectPersonIds: localFormData.value.projectPersonIds,
    preProcess: JSON.stringify(localFormData.value.preProcess)
  }
  // console.log('params', params)
@@ -430,7 +487,17 @@ const init = async () => {
 }

 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 () => {
  await init()