mosr-web/src/views/projectdemand/demandcollection/add.vue

<template>
  <div v-loading="loading" class="add-block">
    <baseTitle title="需求征集信息录入"></baseTitle>
    <el-form :model="formData" inline class="query-form" ref="demandForm">
      <div class="left-info">
        <el-form-item label="名称" prop="requirementName">
          <el-input v-model="formData.requirementName" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="companyIds">
          <el-select v-model="formData.companyIds" placeholder="所属公司" clearable filterable multiple>
            <el-option
                v-for="item in companyOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="征集类型" prop="collectType">
          <el-select v-model="formData.collectType" placeholder="征集类型" clearable filterable>
            <el-option
                v-for="item in typeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="截止时间" prop="time">
          <el-config-provider>
            <el-date-picker
                v-model="formData.deadline"
                type="datetime"
                placeholder="截止时间"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-config-provider>
        </el-form-item>
      </div>
    </el-form>
    <baseTitle title="征集说明"></baseTitle>

    <Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="formData.collectExplain" height="300"/>
    <baseTitle title="申请文件"></baseTitle>
    <file-upload @getFile="getFile"/>
    <el-table :data="formData.fileList" style="width: 100%" v-if="showTable">
      <el-table-column label="序号" type="index" align="center" width="80"/>
      <el-table-column prop="fileName" label="文件名" align="center"/>
      <el-table-column prop="tag" label="标签" align="center"/>
      <el-table-column prop="size" label="文件大小" align="center">
        <template #default="scope">
          {{ parseInt(scope.row.size / 1024) }}KB
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <a :href="scope.row.url">
            下载
          </a>
        </template>
      </el-table-column>
    </el-table>
    <div class="approval-record">
      <baseTitle title="流程"></baseTitle>
      <process-diagram-viewer mode="view" v-if="processDiagramViewer"/>
      <!--      <div class="process" id="approvalRecord">-->
      <!--        <process-tree ref="processTree" mode="view" id-name="approvalRecord"/>-->
      <!--      </div>-->
    </div>
    <div class="oper-page-btn">
      <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {useAuthStore} from '@/stores/userstore.js'
import {useProcessStore} from '@/stores/processStore.js';
import {getWorkflowInfo, addRequirement, getInfo} from "@/api/project-demand/index.js";
import FileUpload from "@/components/FileUpload.vue";
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()
const dateValue = ref()
const formData = ref({
  requirementName: '',
  companyIds: '',
  collectType: '',
  deadline: '',
  collectExplain: ''
})
const showTable = ref(false)
const processDiagramViewer = ref(false)

const typeOption = ref([
  {
    label: "需求征集",
    value: '需求征集'
  }
])
const companyOption = ref([
  {
    label: "测试公司1",
    value: 22
  },
  {
    label: "测试公司2",
    value: 23
  },
  {
    label: "测试公司3",
    value: 24
  }
])
const form = ref(null)
const fileList = ref(null)
const menuTree = ref(null)
const loading = ref(false)
const localData = reactive({
  affiliatedCompany: []
})
const processStore = useProcessStore()
const processInstanceData = ref()

const getFile = (val) => {
  console.log('val', val, route.query.isAdd)
  if(route.query.isAdd==undefined){
    showTable.value=true
    val.forEach(item => {

      formData.value.fileList.push(item)
    })
    fileList.value=formData.value.fileList
    console.log('fileList.value',fileList.value)
  }
  let fileObj = {}
  let newFileArray = []
  val.forEach(item => {
    fileObj = {
      fileId: item.id,
      tag: formData.value.collectType,
      userId: authStore.userinfo.userId
    }
    newFileArray.push(fileObj)
  })
  fileList.value=newFileArray
}
const init = async () => {
  getWorkflowInfo().then(res => {
    let data = res.data
    processInstanceData.value = data
    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
    })
  })
}

const handleSubmit = () => {
  addRequirement({
    ...formData.value,
    requirementId: 0,
    files: fileList.value,
    deploymentId: processInstanceData.value.deploymentId
  }).then(res => {
    if (res.code === 1000) {
      ElMessage.success(res.msg)
      router.push({
        path: '/projectdemand/demandcollection'
      })
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const getDetailInfo = async () => {
  getInfo(route.query.id).then(res => {
    if (res.code === 1000) {
      ElMessage.success(res.msg)
      formData.value = res.data.formData
      if(route.query.isAdd==undefined){
        showTable.value=true
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const handleBack = () => {
  history.back()
}

watch(localData, (val) => {
  menuTree.value.filter(val.filterText)
})

onMounted(async () => {
  loading.value = true
  await init()
  if (route.query.id) {
    await getDetailInfo()
  }
  loading.value = false
})

</script>

<style lang="scss" scoped>

.add-block {
  //display: flex;
  //justify-content: space-between;
  overflow-x: hidden;
  overflow-y: auto;
  a {
    cursor: pointer;
    font-size: 14px;
    color: #2a99ff;
  }
  .approval-record {
    position: relative;
  }
}
</style>