feat : 项目详情中立项/编辑页面demo

src/components/DetailComponent/ProjectApply.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="apply-block">
+    <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="前置流程">
+            <el-input v-model="formData.requirementName" clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <AttachmentUpload ref="attachment" :label="title+'附件'" :showTable="showTable" :otherFileList="otherFileList"
+                      @getAttachment="getAttachment"
+                      @getOtherFile="getOtherFile" :showFileList="true" :formData="formData"
+                      :preview="route.query.state==3"/>
+    <div class="approval-record">
+      <baseTitle title="流程"></baseTitle>
+      <process-diagram-viewer mode="view" idName="projectApply" v-if="processDiagramViewer"/>
+    </div>
+    <div class="oper-page-btn">
+      <el-button color="#DED0B2" v-if="route.query.state==0" @click="handleSubmit(applyForm)">提交</el-button>
+      <el-button color="#DED0B2" v-else-if="route.query.state==3" @click="handleSubmit(applyForm)">重新提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
+import {ElNotification} from "element-plus";
+import {getApplyProcess, projectApply, resubmitApply, getApplyDetail} from "@/api/project-manage";
+import {useProcessStore} from '@/stores/processStore.js';
+import {useTagsView} from '@/stores/tagsview.js'
+
+const router = useRouter()
+const route = useRoute()
+const emit = defineEmits(["getAttachment", "getOtherFile"])
+const props = defineProps({
+  title: {
+    type: String,
+    default: '项目立项'
+  },
+  showTable: {
+    type: Boolean,
+    default: false
+  }
+})
+const rules = reactive({
+  // requirementName: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
+})
+const tagsViewStore = useTagsView()
+const processStore = useProcessStore()
+const otherFileList = ref([])
+const formData = ref({})
+const attachment = ref()
+const showTable = ref(true)
+const loading = ref(false)
+const processDiagramViewer = ref(false)
+const name = ref(router.currentRoute.value.name)
+const applyForm = ref()
+const deploymentId = ref()
+const compositeParam = (item) => {
+  // let tag = ''
+  // if (name.value === 'Initiation/apply' || route.query.state==3) {
+  //   tag = props.title
+  // }
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: false,
+    tag: props.title
+  }
+}
+const getAttachment = (val) => {
+  console.log('上传文件getAttachment', val)
+  formData.value.singleFile = compositeParam(val)
+}
+const getOtherFile = (val) => {
+  console.log('上传文件getOtherFile', val)
+  showTable.value = false
+  let fileObj = compositeParam(val)
+  otherFileList.value.push(fileObj)
+  nextTick(() => {
+    showTable.value = true
+  })
+}
+const getFileParam = (item) => {
+  return {
+    fileId: item.fileId,
+    tag: item.tag
+  }
+}
+const handleSubmit = (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    let files = []
+    if (route.query.state === '3') {
+      attachment.value.allFileList.forEach(item => {
+        files.push(getFileParam(item))
+      })
+    }else {
+      otherFileList.value.forEach(item => {
+        files.push(getFileParam(item))
+      })
+    }
+    // if (formData.value.singleFile !== undefined) {
+    //   formData.value.singleFile = getFileParam(formData.value.singleFile)
+    // }
+    if (attachment.value.singleFile == null) {
+      attachment.value.validate()
+      ElNotification({
+        title: '提示',
+        message: '请上传附件',
+        type: 'error'
+      })
+      return;
+    } else {
+      attachment.value.clearValidate()
+    }
+    let params = {
+      deploymentId: deploymentId.value,
+      requirementId: route.query.id,
+      fileList: files,
+      singleFile: formData.value.singleFile,
+      projectId: route.query.projectId,
+    }
+    console.log('params', params)
+    let res
+    if (route.query.state === '3') {
+      res = await resubmitApply(params)
+    }else {
+     res = await projectApply(params)
+    }
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+      await router.push({
+        name: 'Initiation'
+      })
+    }
+  })
+}
+// const handleResubmit = async () => {
+//   let files = []
+//   if (route.query.state == 3) {
+//     attachment.value.allFileList.forEach(item => {
+//       files.push(getFileParam(item))
+//     })
+//   }
+//   if (attachment.value.singleFile == null) {
+//     attachment.value.validate()
+//     ElNotification({
+//       title: '提示',
+//       message: '请上传附件',
+//       type: 'error'
+//     })
+//     return;
+//   } else {
+//     attachment.value.clearValidate()
+//   }
+//   let params = {
+//     deploymentId: deploymentId.value,
+//     requirementId: route.query.id,
+//     fileList: files,
+//     singleFile: attachment.value.singleFile,
+//     projectId: route.query.projectId,
+//   }
+//   console.log('params', params, attachment.value.singleFile)
+//   let res = await resubmitApply(params)
+//   ElNotification({
+//     title: '提示',
+//     message: res.msg,
+//     type: res.code === 1000 ? 'success' : 'error'
+//   })
+//   if (res.code === 1000) {
+//     tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+//     await router.push({
+//       name: 'Initiation'
+//     })
+//   }
+// }
+const init = () => {
+  if (!route.query.projectId) return;
+  processDiagramViewer.value = false
+  getApplyProcess(route.query.projectId).then(res => {
+    if (res.code === 1000) {
+      let data = res.data
+      deploymentId.value = data.deploymentId
+      processStore.setDesign(data)
+      processStore.runningList.value = data.runningList;
+      processStore.endList.value = data.endList;
+      processStore.noTakeList.value = data.noTakeList;
+      processStore.refuseList.value = data.refuseList;
+      processStore.passList.value = data.passList;
+      nextTick(() => {
+        processDiagramViewer.value = true
+      })
+    } else {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+const getDetailInfo = async () => {
+  if (!route.query.projectId) return;
+  getApplyDetail(route.query.projectId).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      formData.value = res.data.formData
+      loading.value = false
+    }
+  })
+}
+onMounted(async () => {
+  await init()
+  if (route.query.state == 3) {
+    loading.value = true
+    await getDetailInfo()
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/views/project-management/implementation/detail.vue

@@ -11,19 +11,32 @@
           v-model:value="auditOpinion"
       />
       <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm"
-                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow" v-model:value="auditOpinion"/>
+                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"
-      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData"
+                      v-model:value="auditOpinion"/>
+      <ApprovalDetail type="approval" v-show="showActive == '20'&&!showApply&&!showTabs" :formData="commonForm.formData"
                       :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
                       :fileListShow="fileListShow" v-model:value="auditOpinion"/>
       <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData"
                       :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
                       :fileListShow="fileListShow" v-model:value="auditOpinion"/>
       <ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm"
-                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow" v-model:value="auditOpinion"/>
+                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"
-
+                      v-model:value="auditOpinion"/>
+      <project-apply v-if="showApply"/>
+      <el-tabs v-if="showTabs" v-model="activeName">
+        <el-tab-pane label="详情" name="first">
+          <ApprovalDetail type="approval" idName="applyDetail" :formData="commonForm.formData"
+                          :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
+                          :fileListShow="fileListShow" v-model:value="auditOpinion"/>
+        </el-tab-pane>
+        <el-tab-pane label="重新提交" name="second">
+          <project-apply/>
+        </el-tab-pane>
+      </el-tabs>
     </template>
   </steps>
-  <opinion v-if="commonForm.taskId" :formData="commonForm.formData" :taskId="commonForm.taskId" v-model:value="auditOpinion"/>
+  <opinion v-if="commonForm.taskId" :formData="commonForm.formData" :taskId="commonForm.taskId"
+           v-model:value="auditOpinion"/>
 </template>
 
 <script setup lang="jsx">
@@ -37,6 +50,8 @@ import Opinion from "@/components/DetailComponent/Opinion.vue";
 
 const route = useRoute()
 const activeName = ref('first')
+const showApply = ref(false)
+const showTabs = ref(false)
 const loading = ref(false)
 const processStore = useProcessStore()
 const fileListShow = ref('READ')
@@ -64,8 +79,8 @@ const getAllInfo = async (state) => {
         message: msg,
         type: 'error'
       })
-      if(msg==='查询结果为空'){
+      if (msg === '查询结果为空') {
-        commonForm.value=[]
+        commonForm.value = []
       }
       loading.close()
     }
@@ -79,7 +94,7 @@ const getAllInfo = async (state) => {
     processStore.passList.value = data.passList;
     nextTick(() => {
       commonProvessViewer.value = true
-      if (data.formPermMap["fileList"]) {
+      if (data.formPermMap && data.formPermMap["fileList"]) {
         fileListShow.value = data.formPermMap["fileList"].perm
       }
     })
@@ -88,41 +103,53 @@ const getAllInfo = async (state) => {
     loading.close()
   }
 }
-
+const changeModel = (active) => {
+  if (route.query.state === '0' && active === '20') {
+    showApply.value = true
+  } else if (route.query.state === '3' && active === '20') {
+    //tab左侧详情, 右侧重新提交
+    showTabs.value = true
+    getAllInfo(active)
+  } else {
+    showApply.value = false
+    showTabs.value = false
+    getAllInfo(active)
+  }
+}
 
 const setDetail = (active) => {
   showActive.value = active
-  getAllInfo(active)
+  changeModel(active)
 }
 
 const stepChange = (data) => {
   showActive.value = data.active
-  getAllInfo(data.active)
+  changeModel(data.active)
 }
 </script>
 
 <style scoped lang="scss">
 .detail-block {
   padding-top: 15px;
+}
 
-  :deep(.el-tabs__nav-scroll) {
+:deep(.el-tabs__nav-scroll) {
-    width: 100%;
+  width: 100%;
+  display: flex;
+
+  .el-tabs__nav {
     display: flex;
+    flex: 1;
 
-    .el-tabs__nav {
+    .el-tabs__item {
-      display: flex;
       flex: 1;
-
+      font-size: 16px;
-      .el-tabs__item {
-        flex: 1;
-        font-size: 16px;
-      }
-
-      .is-active {
-        color: black;
-        background-color: #DED0B2;
-      }
     }
+
+    //.is-active {
+    //  color: black;
+    //  //background-color: #DED0B2;
+    //}
   }
 }
 </style>