From 97ee8ffcb333367ec8407deb8b2186609c4d4739 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期四, 26 六月 2025 16:26:15 +0800
Subject: [PATCH] 文件数据回显
---
laboratory/src/views/reportLibrary/feasibilityReport/add.vue | 672 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 360 insertions(+), 312 deletions(-)
diff --git a/laboratory/src/views/reportLibrary/feasibilityReport/add.vue b/laboratory/src/views/reportLibrary/feasibilityReport/add.vue
index e219757..c18dc13 100644
--- a/laboratory/src/views/reportLibrary/feasibilityReport/add.vue
+++ b/laboratory/src/views/reportLibrary/feasibilityReport/add.vue
@@ -1,361 +1,409 @@
<template>
- <div class="add-container" :loading="loading">
- <Card v-loading="loading">
- <div class="header-title" style="width: 100%;">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>所属项目组</div>
- </div>
- <div class="header-title-right">
- <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
- 选择项目组</el-button>
- </div>
- </div>
- <Table :height="null" :data="tableData" :queryForm="queryForm" :total="0">
- <template>
- <el-table-column prop="teamName" label="项目组名称" />
- <el-table-column prop="personCharge" label="项目负责人" />
- <el-table-column prop="staffName" label="项目组成员" />
- <el-table-column prop="createTime" label="创建时间" />
- </template>
- </Table>
- <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
- <div class="header-title" style="width: 100%;">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>报告编号</div>
- </div>
- </div>
- <el-form-item prop="reportCode" style="margin-top: 38px">
- <el-input v-model="form.reportCode" disabled style="width: 100%;" placeholder="请输入报告编号" />
- </el-form-item>
+ <div class="add-container" :loading="loading">
+ <Card v-loading="loading">
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>所属项目组</div>
+ </div>
+ <div class="header-title-right">
+ <el-button
+ @click="showChoose = true"
+ class="el-icon-circle-plus-outline"
+ type="primary"
+ >
+ 选择项目组</el-button
+ >
+ </div>
+ </div>
+ <Table :height="null" :data="tableData" :queryForm="queryForm" :total="0">
+ <template>
+ <el-table-column prop="teamName" label="项目组名称" />
+ <el-table-column prop="personCharge" label="项目负责人" />
+ <el-table-column prop="staffName" label="项目组成员" />
+ <el-table-column prop="createTime" label="创建时间" />
+ </template>
+ </Table>
+ <el-form
+ ref="form"
+ :model="form"
+ :rules="rules"
+ inline
+ label-position="top"
+ style="margin-top: 38px"
+ >
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告编号</div>
+ </div>
+ </div>
+ <el-form-item prop="reportCode" style="margin-top: 38px">
+ <el-input
+ v-model="form.reportCode"
+ disabled
+ style="width: 100%"
+ placeholder="请输入报告编号"
+ />
+ </el-form-item>
- <div class="header-title" style="width: 100%;">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>报告名称</div>
- </div>
- </div>
- <el-form-item prop="reportName" style="margin-top: 38px">
- <el-input v-model="form.reportName" style="width: 100%;" placeholder="请输入报告名称" />
- </el-form-item>
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告名称</div>
+ </div>
+ </div>
+ <el-form-item prop="reportName" style="margin-top: 38px">
+ <el-input
+ v-model="form.reportName"
+ style="width: 100%"
+ placeholder="请输入报告名称"
+ />
+ </el-form-item>
- <div class="header-title" style="width: 100%;">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>报告正文</div>
- </div>
- </div>
- <el-form-item prop="reportText" style="margin-top: 38px">
- <ai-editor ref="materialEditor" :value="form.reportText" style="width: 100%;"
- placeholder="请输入报告正文" />
- </el-form-item>
- <div class="header-title" style="width: 100%;">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div class="noRequire">附件</div>
- </div>
- </div>
- <el-form-item prop="name" style="margin-top: 38px">
- <el-upload action="#" :file-list="fileList" :http-request="handleUpload"
- :before-upload="beforeUpload" :on-remove="handleRemove">
- <el-button size="small" type="primary">点击上传</el-button>
- <div slot="tip" class="el-upload__tip">支持任意格式文件上传</div>
- </el-upload>
- </el-form-item>
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告正文</div>
+ </div>
+ </div>
+ <el-form-item prop="reportText" style="margin-top: 38px">
+ <ai-editor
+ ref="materialEditor"
+ :value="form.reportText"
+ style="width: 100%"
+ placeholder="请输入报告正文"
+ />
+ </el-form-item>
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div class="noRequire">附件</div>
+ </div>
+ </div>
+ <el-form-item prop="name" style="margin-top: 38px">
+ <el-upload
+ action="#"
+ :file-list="fileList"
+ :http-request="handleUpload"
+ :before-upload="beforeUpload"
+ :on-remove="handleRemove"
+ >
+ <el-button size="small" type="primary">点击上传</el-button>
+ <div slot="tip" class="el-upload__tip">支持任意格式文件上传</div>
+ </el-upload>
+ </el-form-item>
- <div class="end-btn" style="margin-top: 38px">
- <el-button type="primary" @click="submit" :loading="loading">发送</el-button>
- <el-button type="default" @click="save" :loading="loading">存草稿</el-button>
- </div>
- </el-form>
- </Card>
- <chooseProject @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject>
- </div>
+ <div class="end-btn" style="margin-top: 38px">
+ <el-button type="primary" @click="submit" :loading="loading"
+ >发送</el-button
+ >
+ <el-button type="default" @click="save" :loading="loading"
+ >存草稿</el-button
+ >
+ </div>
+ </el-form>
+ </Card>
+ <chooseProject
+ @submit="getProjectData"
+ :show="showChoose"
+ @close="showChoose = false"
+ ></chooseProject>
+ </div>
</template>
<script>
-import { Card } from 'element-ui';
-import AiEditor from '@/components/AiEditor'
-import chooseProject from '@/components/chooseProject'
-import { addData, getDetail, editData } from './service'
-import { customUploadRequest, getFullUrl } from '@/utils/utils'
+import { Card } from "element-ui";
+import AiEditor from "@/components/AiEditor";
+import chooseProject from "@/components/chooseProject";
+import { addData, getDetail, editData } from "./service";
+import { customUploadRequest, getFullUrl } from "@/utils/utils";
import { mapState } from "vuex";
export default {
- components: {
- AiEditor,
- chooseProject
- },
- data() {
- return {
- loading: false,
- form: {
- reportCode: "",
- reportName: "",
- reportText: "",
- feasibilityReportFiles:[]
- },
- tableData: [],
- fileList: [], // 附件列表
- showChoose: false,
- rules: {
- // reportCode: [
- // { required: true, message: '请输入报告编号', trigger: 'blur' }
- // ],
- reportName: [
- { required: true, message: '请输入报告名称', trigger: 'blur' }
- ],
- },
- queryForm: {}
- }
- },
+ components: {
+ AiEditor,
+ chooseProject,
+ },
+ data() {
+ return {
+ loading: false,
+ form: {
+ reportCode: "",
+ reportName: "",
+ reportText: "",
+ feasibilityReportFiles: [],
+ },
+ tableData: [],
+ fileList: [], // 附件列表
+ showChoose: false,
+ rules: {
+ // reportCode: [
+ // { required: true, message: '请输入报告编号', trigger: 'blur' }
+ // ],
+ reportName: [
+ { required: true, message: "请输入报告名称", trigger: "blur" },
+ ],
+ },
+ queryForm: {},
+ };
+ },
- mounted() {
- if (this.$route.query.id) {
- this.getDetail()
- }
- },
- computed: {
+ mounted() {
+ if (this.$route.query.id) {
+ this.getDetail();
+ }
+ },
+ computed: {
...mapState(["tagList", "isFold"]),
},
- methods: {
- getDetail() {
- getDetail(this.$route.query.id).then(res => {
- this.form = res
- this.tableData = [{ ...res.projectTeam, staffName: res.staffNames }]
- if (res.feasibilityReportFiles && res.feasibilityReportFiles.length > 0) {
- this.fileList = res.feasibilityReportFiles.map(file => ({
- name: file.fileName,
- url: getFullUrl(file.fileUrl),
- uid: file.id
- }))
- this.form.feasibilityReportFiles = res.fileList
- } else {
- this.fileList = []
- this.form.feasibilityReportFiles = []
- }
- })
- },
- getProjectData(data) {
- this.tableData = [data]
- this.$forceUpdate()
- this.showChoose = false
- },
- // 上传前校验
- beforeUpload(file) {
- return true;
- },
- // 自定义上传处理
- handleUpload(options) {
- const { file, onSuccess, onError } = options;
+ methods: {
+ getDetail() {
+ getDetail(this.$route.query.id).then((res) => {
+ this.form = res;
+ this.tableData = [{ ...res.projectTeam, staffName: res.staffNames }];
+ if (
+ res.feasibilityReportFiles &&
+ res.feasibilityReportFiles.length > 0
+ ) {
+ this.fileList = res.feasibilityReportFiles.map((file) => {
+ return {
+ name: file.fileName,
+ url: getFullUrl(file.fileUrl),
+ uid: file.id,
+ };
+ });
+ this.form.feasibilityReportFiles = res.feasibilityReportFiles;
+
+ } else {
+ this.fileList = [];
+ this.form.feasibilityReportFiles = [];
+ }
+ });
+ },
+ getProjectData(data) {
+ this.tableData = [data];
+ this.$forceUpdate();
+ this.showChoose = false;
+ },
+ // 上传前校验
+ beforeUpload(file) {
+ return true;
+ },
+ // 自定义上传处理
+ handleUpload(options) {
+ const { file, onSuccess, onError } = options;
- // 使用封装的customUploadRequest方法
- customUploadRequest({
- file,
- onSuccess: (res) => {
- if (res.code === 200) {
- const fileObj = {
- id: new Date().getTime(),
- reportId: this.$route.query.id ? this.$route.query.id : '',
- fileUrl: res.msg || res.data || '',
- reportType: 2, // 报告类型
- fileName: file.name,
- fileSize: file.size,
- };
+ // 使用封装的customUploadRequest方法
+ customUploadRequest({
+ file,
+ onSuccess: (res) => {
+ if (res.code === 200) {
+ const fileObj = {
+ id: new Date().getTime(),
+ reportId: this.$route.query.id ? this.$route.query.id : "",
+ fileUrl: res.msg || res.data || "",
+ reportType: 2, // 报告类型
+ fileName: file.name,
+ fileSize: file.size,
+ };
- // 添加到文件列表显示
- this.fileList.push({
- name: file.name,
- url: getFullUrl(fileObj.fileUrl),
- uid: fileObj.id
- });
-
- // 添加到表单数据
- this.form.feasibilityReportFiles.push(fileObj);
-
- this.$message.success('文件上传成功');
- onSuccess(res);
- } else {
- this.$message.error(res.message || '文件上传失败');
- onError();
- }
- },
- onError: (err) => {
- this.$message.error('文件上传失败');
- onError(err);
- }
+ // 添加到文件列表显示
+ this.fileList.push({
+ name: file.name,
+ url: getFullUrl(fileObj.fileUrl),
+ uid: fileObj.id,
});
- },
- // 删除文件
- handleRemove(file) {
- const index = this.fileList.findIndex(item => item.name === file.name);
- if (index !== -1) {
- this.fileList.splice(index, 1);
- this.form.feasibilityReportFiles.splice(index, 1);
- }
- },
- submit() {
- if (this.tableData.length == 0) {
- this.$message.error('请选择项目组')
- return
- }
- this.$refs.form.validate((valid) => {
- if (this.$refs.materialEditor.getContent() == '<p></p>') {
- this.$message.error('请输入报告正文')
- return
- }
- let data = {
- ...this.form,
- reportType: 2,
- status: 1,
- reportText: this.$refs.materialEditor.getContent(),
- teamId: this.tableData[0].id
- }
- if (valid) {
- this.loading = true
- if (this.$route.query.id) {
- editData({ ...data, id: this.$route.query.id }).then(res => {
- if (res.code === 200) {
- this.$message.success('修改成功')
- this.back()
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- addData({ ...data }).then(res => {
- if (res.code === 200) {
- this.$message.success('发布成功')
- this.back()
- } else {
- this.$message.error(res.message)
- }
- }).finally(() => {
- this.loading = false
- })
- }
- }
- })
+ // 添加到表单数据
+ this.form.feasibilityReportFiles.push(fileObj);
+
+ this.$message.success("文件上传成功");
+ onSuccess(res);
+ } else {
+ this.$message.error(res.message || "文件上传失败");
+ onError();
+ }
},
- back() {
+ onError: (err) => {
+ this.$message.error("文件上传失败");
+ onError(err);
+ },
+ });
+ },
+ // 删除文件
+ handleRemove(file) {
+ const index = this.fileList.findIndex((item) => item.name === file.name);
+ if (index !== -1) {
+ this.fileList.splice(index, 1);
+ this.form.feasibilityReportFiles.splice(index, 1);
+ }
+ },
+ submit() {
+ if (this.tableData.length == 0) {
+ this.$message.error("请选择项目组");
+ return;
+ }
+
+ this.$refs.form.validate((valid) => {
+ if (this.$refs.materialEditor.getContent() == "<p></p>") {
+ this.$message.error("请输入报告正文");
+ return;
+ }
+ let data = {
+ ...this.form,
+ reportType: 2,
+ status: 1,
+ reportText: this.$refs.materialEditor.getContent(),
+ teamId: this.tableData[0].id,
+ };
+ if (valid) {
+ this.loading = true;
+ if (this.$route.query.id) {
+ editData({ ...data, id: this.$route.query.id }).then((res) => {
+ if (res.code === 200) {
+ this.$message.success("修改成功");
+ this.back();
+ } else {
+ this.$message.error(res.message);
+ }
+ });
+ } else {
+ addData({ ...data })
+ .then((res) => {
+ if (res.code === 200) {
+ this.$message.success("发布成功");
+ this.back();
+ } else {
+ this.$message.error(res.message);
+ }
+ })
+ .finally(() => {
+ this.loading = false;
+ });
+ }
+ }
+ });
+ },
+ back() {
this.$router.back();
this.$store.commit(
"SET_TAGLIST",
this.tagList.filter((item) => item.path !== this.$route.path)
);
},
- save() {
- this.$refs.form.validate((valid) => {
- let data = {
- ...this.form,
- reportType: 2,
- status: -1,
- reportText: this.$refs.materialEditor.getContent(),
- teamId: this.tableData[0].id
- }
+ save() {
+ this.$refs.form.validate((valid) => {
+ let data = {
+ ...this.form,
+ reportType: 2,
+ status: -1,
+ reportText: this.$refs.materialEditor.getContent(),
+ teamId: this.tableData[0].id,
+ };
- delete data.id
+ delete data.id;
- if (valid) {
- this.loading = true
- if (this.$route.query.id) {
- editData({ ...data, id: this.$route.query.id }).then(res => {
- if (res.code === 200) {
- this.$message.success('修改成功')
- this.back()
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- addData({ ...data }).then(res => {
- if (res.code === 200) {
- this.$message.success('发布成功')
- this.back()
- } else {
- this.$message.error(res.message)
- }
- }).finally(() => {
- this.loading = false
- })
- }
+ if (valid) {
+ this.loading = true;
+ if (this.$route.query.id) {
+ editData({ ...data, id: this.$route.query.id }).then((res) => {
+ if (res.code === 200) {
+ this.$message.success("修改成功");
+ this.back();
+ } else {
+ this.$message.error(res.message);
+ }
+ });
+ } else {
+ addData({ ...data })
+ .then((res) => {
+ if (res.code === 200) {
+ this.$message.success("发布成功");
+ this.back();
+ } else {
+ this.$message.error(res.message);
}
- })
- },
+ })
+ .finally(() => {
+ this.loading = false;
+ });
+ }
+ }
+ });
},
-}
+ },
+};
</script>
<style lang="less" scoped>
.header-title {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: 20px;
+ gap: 13px;
+
+ .header-title-left {
display: flex;
align-items: center;
- flex-wrap: wrap;
- margin-bottom: 20px;
gap: 13px;
+ margin-top: 38px;
- .header-title-left {
- display: flex;
- align-items: center;
- gap: 13px;
- margin-top: 38px;
-
- img {
- width: 12px;
- height: 19px;
- }
-
- div {
- flex-shrink: 0;
- font-weight: bold;
- font-size: 18px;
- color: #222222;
- line-height: 27px;
- font-family: "Source Han Sans CN Bold Bold";
-
- &:before {
- content: "*";
- color: #f56c6c;
- margin-right: 4px;
- }
- }
-
- .noRequire:before {
- content: unset;
- }
-
- span {
- flex-shrink: 0;
- font-weight: bold;
- font-size: 18px;
- color: #222222;
- line-height: 27px;
- font-family: "Source Han Sans CN Bold Bold";
- }
+ img {
+ width: 12px;
+ height: 19px;
}
- .header-title-left :first-child {
- margin-top: 0;
+ div {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+
+ &:before {
+ content: "*";
+ color: #f56c6c;
+ margin-right: 4px;
+ }
}
+
+ .noRequire:before {
+ content: unset;
+ }
+
+ span {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+ }
+ }
+
+ .header-title-left :first-child {
+ margin-top: 0;
+ }
}
.header-title:first-child {
- .header-title-left {
- margin-top: 0;
- }
+ .header-title-left {
+ margin-top: 0;
+ }
}
.end-btn {
- display: flex;
- align-items: center;
- gap: 10px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
- button {
- width: 180px;
- height: 36px;
- }
+ button {
+ width: 180px;
+ height: 36px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.7.1