文件上传

luohairen

2024-11-28 c09e46ade0e6dc4851c286962a60e20259ccbdad

文件上传

 src/api/projectManage/progress/index.js

@@ -50,5 +50,21 @@
  })
}

// 保存竣工报告、情况说明附件
export function saveProjectProgressFileLists(data) {
  return request({
    url: '/api/progress-plan/saveProjectProgressFileLists',
    method: 'post',
    data: data
  })
}

export function getProjectProgressForm(id) {
  return request({
    url: '/api/progress-plan/getProjectProgressForm/' + id,
    method: 'get'
  })
}




 src/views/projectManage/plan/planInfoCheck.vue

@@ -17,7 +17,7 @@
                </el-table-column>
                <el-table-column prop="taskName" label="事项名称" width="500" align="center">
                  <template #default="scope">
                    <el-input type="textarea" v-model="scope.row.title" placeholder="请输入" rows="3" />
                    <el-input type="textarea" v-model="scope.row.title" placeholder="请输入" rows="3" readonly />
                  </template>
                </el-table-column>
                <el-table-column prop="startTime" label="计划开始时间" width="160" align="center">
@@ -44,7 +44,7 @@
              </el-table>
              <div style="display: flex; align-items: center;">
                <h1 style="margin: 0;">
                  截止本计划进度完成投资（万元）：
                  计划投资金额（万元）：
                </h1>
                <el-input
                  placeholder="请输入投资金额"
@@ -52,7 +52,8 @@
                  v-model="actualInvest"
                  clearable
                  :type="number"
                  @input="handleInput">
                  @input="handleInput"
                  readonly>
                </el-input>
              </div>


 src/views/projectManage/progress/progressRecord.vue

@@ -97,35 +97,26 @@
            </el-col>
            <div style="margin-bottom: 10px">
              <h1 style="font-size: 20px; font-weight: bold;">竣工报告</h1>
              <div style="display: flex; justify-content: center; align-items: center;">
                <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              <div style="display: flex;margin-left: 20px;">
                <file-upload v-model="projectProgressForm.completedReportFileList"
                             :fileType="projectProgressForm.accept"
                             :isShowTip="false"/>
              </div>
            </div>
            <div style="margin-bottom: 10px">
              <h1 style="font-size: 20px; font-weight: bold;">情况说明</h1>
              <div style="display: flex; justify-content: center; align-items: center;">
                <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              <div style="display: flex;margin-left: 20px;">
                <file-upload v-model="projectProgressForm.situationDescriptionFileList"
                             :fileType="projectProgressForm.accept"
                             :isShowTip="false"/>
              </div>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
              <el-button type="primary" @click="handleSave">保 存</el-button>
            </div>
          </el-row>

          <el-dialog :title=" checkFlag ? '进度查看' : '进度上报' " :visible.sync="dialogFormVisible" custom-class="custom-dialog">
          <el-dialog :title=" checkFlag ? '进度查看' : '进度上报' " :visible.sync="dialogFormVisible" custom-class="custom-dialog" :close-on-click-modal="false" @close="handleCancel">
            <el-form :model="progressReportData">
              <el-form-item label="报告期：" :label-width="formLabelWidth">
                <el-input :value="progressReportData.planTime + (progressReportData.planTimeFlag === 0 ? '月度' : progressReportData.planTimeFlag === 1 ? '季度' : '年度')" readonly />
@@ -146,17 +137,10 @@
              <el-form-item label="进度情况：" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="progressReportData.progressStatus" placeholder="请输入" rows="3" :readonly="checkFlag" />
              </el-form-item>
              <el-form-item label="工程进度附件：" :label-width="formLabelWidth">
                <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :disabled="checkFlag" >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              <el-form-item prop="fileList" label="工程进度附件：" :label-width="formLabelWidth">
                <file-upload v-model="progressReportData.fileList"
                             :fileType="accept"
                             :isShowTip="false"/>
              </el-form-item>
              <el-form-item label="截止本报告完成投资：" :label-width="formLabelWidth">
                <el-input v-model="progressReportData.actualInvest" type="number" :readonly="checkFlag" />
@@ -182,7 +166,7 @@
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handleRecordSubmit" v-if="!checkFlag">上 报</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button @click="handleCancel">取 消</el-button>
            </div>
          </el-dialog>
        </el-card>
@@ -192,10 +176,16 @@
</template>

<script>
import { getProgressInfoList, getProgressReport, recordSubmit } from "@/api/projectManage/progress/index";
import { getProgressInfoList, getProgressReport, recordSubmit, saveProjectProgressFileLists, getProjectProgressForm } from "@/api/projectManage/progress/index";
import progressRecord from "./progressRecord.vue";

export default {
  name: "progressRecord",
  computed: {
    progressRecord() {
      return progressRecord
    }
  },
  data() {
    return {
      // 接收传递过来的项目计划数据
@@ -209,12 +199,24 @@
      // 查看显示
      checkFlag: false,
      progressReportData: {},
      formLabelWidth: '150px'
      formLabelWidth: '150px',

      // 竣工报告、情况说明附件
      projectProgressForm: {
        completedReportFileList: [],
        situationDescriptionFileList: [],
        projectReportId: null,
        accept: ['pdf'],
      },

      // 进度上报附件类型
      accept: ['pdf','jpg','mp4'],
    }
  },
  methods: {
    search() {
      this.getPlanRecordData()
      this.getProjectProgressForm(this.planRecordData.id);
    },
    // 获取传递过来的项目计划详情
    getPlanRecordData() {
@@ -223,6 +225,11 @@
        this.planRecordData = JSON.parse(this.$route.query.data);
        this.getProgressInfoList(this.planRecordData.id);
      }
    },
    getProjectProgressForm(id) {
      getProjectProgressForm(id).then(res => {
        this.projectProgressForm = res.data;
      })
    },
    // 获取项目进度计划项
    getProgressInfoList(id) {
@@ -254,6 +261,20 @@
      getProgressReport(row.id).then(res => {
        this.progressReportData = res.data;
      })
    },
    // 关闭弹窗
    handleCancel() {
      this.dialogFormVisible = false;
      this.checkFlag = false;
    },
    // 保存
    handleSave() {
      this.projectProgressForm.projectReportId = this.planRecordData.id;
      // 判断文件不为空
        saveProjectProgressFileLists(this.projectProgressForm).then(res => {
          this.$message.success('保存成功');
          this.search();
        })
    }
  },
  created() {