fix

13404089107

7 天以前 9cb1c3c39136c89974bc4049fca5e450e757b1be

 laboratory/src/views/reportLibrary/feasibilityReport/add.vue

@@ -1,351 +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: {
    ...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) => {
            return {
              name: file.fileName,
              url: getFullUrl(file.fileUrl),
              uid: file.id,
            };
          });
          this.form.feasibilityReportFiles = res.feasibilityReportFiles;
          
        } else {
          this.fileList = [];
          this.form.feasibilityReportFiles = [];
        }
      });
    },

    mounted() {
        if (this.$route.query.id) {
            this.getDetail()
        }
    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 => ({
                        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;
      // 使用封装的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) => {
                    console.log()
                    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.$router.back()
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        addData({ ...data }).then(res => {
                            if (res.code === 200) {
                                this.$message.success('发布成功')
                                this.$router.back()
                            } else {
                                this.$message.error(res.message)
                            }
                        }).finally(() => {
                            this.loading = false
                        })
                    }
                }
            })
        },
        save() {
            this.$refs.form.validate((valid) => {
                let data = {
                    ...this.form,
                    reportType: 2,
                    status: -1,
                    reportText: this.$refs.materialEditor.getContent(),
                    teamId: this.tableData[0].id
                }
            // 添加到表单数据
            this.form.feasibilityReportFiles.push(fileObj);

                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.$router.back()
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        addData({ ...data }).then(res => {
                            if (res.code === 200) {
                                this.$message.success('发布成功')
                                this.$router.back()
                            } else {
                                this.$message.error(res.message)
                            }
                        }).finally(() => {
                            this.loading = false
                        })
                    }
                }
            })
            this.$message.success("文件上传成功");
            onSuccess(res);
          } else {
            this.$message.error(res.message || "文件上传失败");
            onError();
          }
        },
        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,
        };

        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;
              });
          }
        }
      });
    },
  },
};
</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>