feat : 项目立项申请页面初始化

2024-05-14 22:16:22 +08:00
parent 6d8dbaa8c4
commit 2a72de08a4
3 changed files with 153 additions and 32 deletions
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -6,10 +6,11 @@
             with-credentials
             :multiple="maxSize > 0"
             :data="uploadParams"
-             :show-file-list="false"
+             :show-file-list="showFileList"
             :auto-upload="true"
             :before-upload="beforeUpload"
             :on-success="handleUploadSuccess"
+             :on-error="uploadError"
  >
    <el-button color="#DED0B2" :loading="loading">上传文件</el-button>
  </el-upload>
@@ -37,6 +38,10 @@ const props = defineProps({
  maxSize: {
    type: Number,
    default: 30
+  },
+  showFileList: {
+    type: Boolean,
+    default: false
  }
 })

@@ -77,6 +82,10 @@ const handleUploadSuccess = (res, file) => {
  fileList.value.push(data)
  emit("getFile", fileList.value)
 }
+const uploadError=(err)=>{
+  loading.value = false
+  ElMessage.error("上传失败，请稍后再试！")
+}

 </script>

--- a/src/views/project-demand/collection/add.vue
+++ b/src/views/project-demand/collection/add.vue
@@ -33,10 +33,12 @@
      </div>
    </el-form>
    <baseTitle title="征集说明"></baseTitle>
-    <Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="formData.collectExplain" height="300" v-if="showTinymce"/>
+    <Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="formData.collectExplain" height="300"
+             v-if="showTinymce"/>
    <baseTitle title="申请文件"></baseTitle>
    <file-upload @getFile="getFile"/>
-    <fvTable style="width: 100%;max-height: 200px" v-if="showTable" :tableConfig="tableConfig" :data="formData.fileList" :isSettingCol="false" :pagination="false">
+    <fvTable style="width: 100%;max-height: 200px" v-if="showTable" :tableConfig="tableConfig" :data="formData.fileList"
+             :isSettingCol="false" :pagination="false">
      <template #empty>
        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
      </template>
@@ -136,27 +138,27 @@ const tableConfig = reactive({
        return (
            <div>
              <a style="cursor: pointer;font-size: 14px;color: #2a99ff;" href={row.url}>下载</a>
-              <el-button type="primary" size="large" link onClick={() => beforeRemove(row)}>删除</el-button>
+              <el-button type="primary" size="large" link onClick={() => handleDelete(row)}>删除</el-button>
            </div>
        )
      }
    }
  ]
 })
-const compositeParam=(item)=>{
-    return  {
-      fileId: item.id,
-      size: item.size,
-      originalFileName: item.originalFilename,
-      fileType: item.fileType,
-      url: item.url,
-      processNodeTag: null,
-      tag: formData.value.collectType,
-      userId: authStore.userinfo.userId
-    }
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    processNodeTag: null,
+    tag: formData.value.collectType,
+    userId: authStore.userinfo.userId
+  }
 }
 const getFile = (val) => {
-  console.log('上传文件',val)
+  console.log('上传文件', val)
  showTable.value = false
  nextTick(() => {
    showTable.value = true
@@ -165,14 +167,14 @@ const getFile = (val) => {
  let newFileArray = []
  if (route.query.isAdd === undefined) {
    val.forEach(item => {
-      fileObj =compositeParam(item)
+      fileObj = compositeParam(item)
      newFileArray.push(fileObj)
      formData.value.fileList.push(fileObj)
    })
    fileList.value = formData.value.fileList
  } else {
    val.forEach(item => {
-      fileObj =compositeParam(item)
+      fileObj = compositeParam(item)
      newFileArray.push(fileObj)
    })
    formData.value.fileList = newFileArray
@@ -241,7 +243,6 @@ const handleResubmit = () => {
 const getDetailInfo = async () => {
  getFormInfo(route.query.id).then(res => {
    if (res.code === 1000) {
-      console.log(res)
      ElMessage.success(res.msg)
      formData.value = res.data
      showTinymce.value = false
@@ -257,26 +258,23 @@ const getDetailInfo = async () => {
 const handleBack = () => {
  history.back()
 }
-const beforeRemove = (row) => {
+const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
-    handleRemove(row)
+    deleteFile(row.fileId).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success("删除成功");
+        fileList.value.splice(fileList.value.findIndex((item) => item.id === row.id), 1);
+      }
+    });
  }).catch(() => {
    ElMessage.warning("用户取消删除! ");
  })
 }

-const handleRemove = (row) => {
-  deleteFile(row.fileId).then(res => {
-    if (res.code === 1000) {
-      ElMessage.success("删除成功");
-      fileList.value.splice(fileList.value.findIndex((item) => item.id === row.id), 1);
-    }
-  });
-};
 onMounted(async () => {
  loading.value = true
  await init()
@@ -292,9 +290,10 @@ onMounted(async () => {
 </script>

 <style lang="scss" scoped>
-:deep(.el-empty__description){
+:deep(.el-empty__description) {
  margin-top: 0;
 }
+
 .add-block {
  //display: flex;
  //justify-content: space-between;
--- a/src/views/project-management/initiation/apply.vue
+++ b/src/views/project-management/initiation/apply.vue
@@ -1,23 +1,136 @@
 <template>
  <div class="apply-block">
    <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
-      <baseTitle title="项目立项-申请"></baseTitle>
+      <baseTitle title="项目立项申请"></baseTitle>
      <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-col :span="24">
+          <el-form-item label="项目立项附件" prop="attachment">
+            <file-upload @getFile="getAttachment" :showFileList="true"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="其他文件">
+            <el-card style="width: 100%">
+              <file-upload @getFile="getOtherFile" :showFileList="true"/>
+              <fvTable style="width: 100%;max-height: 250px" v-if="showTable" :tableConfig="tableConfig"
+                       :data="otherFileList" :isSettingCol="false" :pagination="false">
+                <template #empty>
+                  <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+                </template>
+              </fvTable>
+            </el-card>
+          </el-form-item>
+        </el-col>
      </el-row>
    </el-form>
+    <div class="oper-page-btn">
+      <el-button color="#DED0B2" @click="handleSubmit(applyForm)">提交</el-button>
+    </div>
  </div>
 </template>

 <script setup lang="jsx">
+import FileUpload from "@/components/FileUpload.vue";
+
 const formData = ref({})
 const rules = reactive({
-  auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
+  attachment: [{required: true, message: '请上传项目立项附件', trigger: 'blur'}],
 })
+const fileList = ref(null)
+const applyForm = ref()
+const showTable = ref(true)
+const otherFileList = ref([])
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <a style="cursor: pointer;font-size: 14px;color: #2a99ff;" href={row.url}>下载</a>
+              <el-button type="primary" size="large" link onClick={() => beforeRemove(row)}>删除</el-button>
+            </div>
+        )
+      }
+    }
+  ]
+})
+
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    processNodeTag: null,
+    tag: formData.value.collectType
+  }
+}
+const getAttachment = (val) => {
+  console.log('上传文件', val)
+  showTable.value = false
+  nextTick(() => {
+    showTable.value = true
+  })
+  let fileObj = {}
+  let newFileArray = []
+  if (route.query.isAdd === undefined) {
+    val.forEach(item => {
+      fileObj = compositeParam(item)
+      newFileArray.push(fileObj)
+      formData.value.fileList.push(fileObj)
+    })
+    fileList.value = formData.value.fileList
+  } else {
+    val.forEach(item => {
+      fileObj = compositeParam(item)
+      newFileArray.push(fileObj)
+    })
+    formData.value.fileList = newFileArray
+    fileList.value = newFileArray
+  }
+}
+const getOtherFile = () => {
+
+}
+const handleSubmit = (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+
+  })
+}
 </script>

 <style scoped>