401跳转登录

董国庆

2025-09-12 527efb36f35b471710e445972673abff45bacdac

 laboratory/src/views/chemistQa/projectTesting/addDetectionReport.vue

@@ -1,106 +1,340 @@
<template>
    <div>
        <Card>
    <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>
                </div>
                <div class="header-title-right">
                <!-- <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

                </div> -->
            </div>
            <Table :height="null" :queryForm="queryForm" :total="0">
            <Table :height="null" :data="tableData" :total="0">
                <template>
                    <el-table-column prop="name" label="项目组名称" />
                    <el-table-column prop="age" label="项目负责人" />
                    <el-table-column prop="age" label="项目组成员" />
                    <el-table-column prop="age" label="创建时间" />
                    <el-table-column prop="teamName" label="所属项目组" />
                    <el-table-column prop="itemName" label="检测项名称" />
                    <el-table-column prop="itemCode" label="检测项编号" />
                    <el-table-column prop="remarks" label="备注" />
                    <el-table-column prop="createBy" 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">
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 18px">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item prop="name" label="报告内容">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告内容" />
                        <el-form-item prop="reportContent" label="报告内容" >
                            <el-select v-model="form.reportContent" style="width: 100%;" placeholder="请选择报告内容" :disabled="this.$route.query.type === 'detail'">
                                <el-option label="国家标准" :value="1" />
                                <el-option label="分析方法开发" :value="2" />
                                <el-option label="方法验证报告" :value="3" />
                                <el-option label="方法确认" :value="4" />
                                <el-option label="操作规程" :value="5" />
                                <el-option label="方法转移记录清单" :value="6" />
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                        <el-form-item prop="reportCode" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.reportCode" style="width: 100%;" placeholder="请输入报告编号" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="name" label="制定人">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入制定人" />
                        <el-form-item prop="developPersonName" label="制定人">
                            <el-input v-model="form.developPersonName" style="width: 100%;" placeholder="请输入制定人"
                                disabled />
                        </el-form-item>
                        <el-form-item prop="name" label="制定日期" style="margin-left: 100px;">
                            <el-date-picker :prefix-icon="null" v-model="form.createTime"  type="date" placeholder="请选择日期" />
                        <el-form-item prop="developDate" label="制定日期" style="margin-left: 100px;">
                            <el-date-picker :prefix-icon="null" v-model="form.developDate" type="date" disabled
                                placeholder="请选择日期" />
                        </el-form-item>
                    </el-col>

                </el-row>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <el-form-item prop="reportText" style="margin-top: 18px">
                    <ai-editor ref="materialEditor" :value="form.reportText" style="width: 100%;" :readOnly="this.$route.query.type === 'detail'"
                        placeholder="请输入报告正文" />
                </el-form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                        <span class="noRequire">附件</span>
                    </div>
                </div>
                <el-form-item prop="name" style="margin-top: 38px">
                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList">
                <el-form-item prop="name" style="margin-top: 18px">
                     <el-upload action="#" 
                     :file-list="fileList"
                      :http-request="handleUpload"
                       :disabled="this.$route.query.type === 'detail'"
                        :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">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                    <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 { addDetail, getDetailInfo, updateDetail, getDetail } from './service'
import { customUploadRequest, getFullUrl } from '@/utils/utils'
import { mapState } from "vuex";
export default {
    components: { AiEditor },
    components: {
        AiEditor,
        chooseProject
    },
    data() {
        return {
            loading: false,
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
                reportCode: "",
                reportContent: "",
                reportText: "",
                developPerson: "",
                developPersonName: "",
                developDate: "",
                itemId: "",
                status: 1,
                itemId: "",
                qaReportFiles: [],
                commitPersonId: null,
            },
            tableData: [],
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
            rules: {
                reportContent: [
                    { required: true, message: '请选择报告内容', trigger: 'change' }
                ],
                itemId: [
                    { required: true, message: '请选择检测项', trigger: 'change' }
                ]
            },
            queryForm: {}
        }
    }
}
    },

    mounted() {
        this.form.developPerson = JSON.parse(sessionStorage.getItem('userInfo')).nickName;
        this.form.developPersonName = JSON.parse(sessionStorage.getItem('userInfo')).nickName;
        this.form.commitPersonId = JSON.parse(sessionStorage.getItem('userInfo')).userId
        this.form.developDate = new Date().toISOString().split('T')[0];

        // this.form.itemId = this.$route.query.itemId
        if (this.$route.query.itemId) {
            getDetail(this.$route.query.itemId).then(res => {
                if (res) {
                    let item = {
                        teamName: res.projectTeamVO.teamName,
                        teamId: res.teamId,
                        remark: res.remark,

                        itemName: res.itemName,
                        itemCode: res.itemCode,
                        createBy: res.createBy,
                        createTime: res.createTime
                    }
                    this.form.itemId = this.$route.query.itemId
                    this.form.teamId = this.$route.query.teamId

                    this.tableData = [{ ...item }]
                }
            })
        }
        if (this.$route.query.id) {
            this.getDetail()
        }
    },
    computed: {
    ...mapState(["tagList", "isFold"]),
  },

    methods: {
        getDetail() {
            getDetailInfo({ id: this.$route.query.id }).then(res => {
                if (res) {
                    this.form = {
                        ...res,
                        reportContent: Number(res.reportContent)
                    }
                    // this.tableData = [{ ...res.data.projectTeam, staffName: res.data.staffNames }]
                    // this.fileList = res.qaReportFileList || []
                    if (res.qaReportFileList && res.qaReportFileList.length > 0) {
                        this.fileList = res.qaReportFileList.map(file => ({
                            name: file.fileName,
                            url: getFullUrl(file.fileUrl),
                            uid: file.id
                        }))
                        this.form.qaReportFiles = res.qaReportFileList
                    } else {
                        this.fileList = []
                        this.form.qaReportFiles = []
                    }
                } else {
                    // this.$message.error(res.message || '获取详情失败')
                }
            })
        },
        getProjectData(data) {
            this.tableData = [data]
            this.$forceUpdate()
            this.showChoose = false
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (!valid) return

                if (this.$refs.materialEditor.getContent() == '<p></p>') {
                    this.$message.error('请输入报告正文')
                    return
                }

                let data = {
                    ...this.form,
                    reportText: this.$refs.materialEditor.getContent(),
                    status: 1, // 待审核状态
                }

                this.loading = true
                if (this.$route.query.id) {
                    updateDetail({ ...data, id: this.$route.query.id }).then(res => {
                        if (res.code === 200) {
                            this.$message.success('修改成功')
                            this.back()
                        } else {
                            this.$message.error(res.message || '修改失败')
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    addDetail(data).then(res => {
                        if (res.code === 200) {
                            this.$message.success('发布成功')
                            this.back()
                        } else {
                            this.$message.error(res.message || '发布失败')
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                }
            })
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) return

                let data = {
                    ...this.form,
                    reportText: this.$refs.materialEditor.getContent(),
                    status: -1, // 草稿箱状态
                }

                this.loading = true
                if (this.$route.query.id) {
                    // 编辑草稿
                    updateDetail({ ...data, id: this.$route.query.id }).then(res => {
                        if (res.code === 200) {
                            this.$message.success('草稿保存成功')
                            this.back()
                        } else {
                            this.$message.error(res.message || '保存失败')
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    // 新增草稿
                    addDetail(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)
      );
    },
                 // 上传前校验
                 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 || '',
                            fileName: file.name,
                            fileSize: file.size,
                        };

                        // 添加到文件列表显示
                        this.fileList.push({
                            name: file.name,
                            url: getFullUrl(fileObj.fileUrl),
                            uid: fileObj.id
                        });

                        // 添加到表单数据
                        this.form.qaReportFiles.push(fileObj);

                        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.qaReportFiles.splice(index, 1);
            }
        },
    },
}
</script>

<style lang="less" scoped>