From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001 From: 董国庆 <364620639@qq.com> Date: 星期五, 25 七月 2025 10:47:19 +0800 Subject: [PATCH] 修改弹窗ui和客户反馈 --- laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue | 946 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 508 insertions(+), 438 deletions(-) diff --git a/laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue b/laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue index c79be9d..8774e03 100644 --- a/laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue +++ b/laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue @@ -1,507 +1,577 @@ <template> - <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" - @close="handleClose"> - <div class="approval-dialog"> - <!-- 左侧审批内容 --> - <div class="approval-content"> - <Card class="approval-content-card"> - <template style="position: relative"> - <div class="header-title" style="width: 100%;"> - <div class="header-title-left"> - <img src="@/assets/public/headercard.png" /> - <div>所属项目组</div> - </div> - </div> - <Table :height="null" :total="0" :data="tableData"> - <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: 18px"> - <el-row :gutter="20"> - <el-col :span="24"> - <el-form-item prop="reportTitle" label="报告标题"> - <el-input v-model="form.reportTitle" style="width: 100%;" placeholder="请输入报告标题" - disabled /> - </el-form-item> - <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="developPerson" label="制定人"> - <el-input v-model="form.developPerson" style="width: 100%;" placeholder="请输入制定人" - disabled /> - </el-form-item> - <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> - <el-form-item prop="reportText" style="margin-top: 18px"> - <ai-editor :value="form.reportText" style="width: 100%;" placeholder="请输入报告正文" - :readOnly="true" /> - </el-form-item> - <div class="header-title" style="width: 100%;"> - <div class="header-title-left"> - <img src="@/assets/public/headercard.png" /> - <span class="noRequire">附件</span> - </div> - </div> - <el-form-item prop="name" style="margin-top: -18px"> - <el-upload action="#" - :file-list="fileList" - disabled - :on-preview="handlePreview"> - <!-- <el-button size="small" type="primary" disabled>点击上传</el-button> --> - </el-upload> - </el-form-item> - </el-form> - </template> - <!-- <SelectMember ref="selectMember" /> --> - </Card> + <el-dialog + :title="dialogTitle" + :visible.sync="dialogVisible" + width="90%" + top="5vh" + :close-on-click-modal="false" + @close="handleClose" + > + <div class="approval-dialog"> + <!-- 左侧审批内容 --> + <div class="approval-content"> + <Card class="approval-content-card"> + <template style="position: relative"> + <div class="header-title" style="width: 100%"> + <div class="header-title-left"> + <img src="@/assets/public/headercard.png" /> + <div>所属项目组</div> + </div> </div> - <!-- 右侧审批流程 --> - <div class="approval-flow"> - <div class="flow-content"> - <approval-process :processData="form.processData" /> + <Table :height="null" :total="0" :data="tableData"> + <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: 18px" + > + <el-row :gutter="20"> + <el-col :span="24"> + <el-form-item prop="reportTitle" label="报告标题"> + <el-input + v-model="form.reportTitle" + style="width: 100%" + placeholder="请输入报告标题" + disabled + /> + </el-form-item> + <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="developPerson" label="制定人"> + <el-input + v-model="form.developPerson" + style="width: 100%" + placeholder="请输入制定人" + disabled + /> + </el-form-item> + <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> + <el-form-item prop="reportText" style="margin-top: 18px"> + <ai-editor + :value="form.reportText" + style="width: 100%" + placeholder="请输入报告正文" + :readOnly="true" + /> + </el-form-item> + <div class="header-title" style="width: 100%"> + <div class="header-title-left"> + <img src="@/assets/public/headercard.png" /> + <span class="noRequire">附件</span> + </div> + </div> + <el-form-item prop="name" style="margin-top: -18px"> + <el-upload + action="#" + :file-list="fileList" + disabled + :on-preview="handlePreview" + > + <!-- <el-button size="small" type="primary" disabled>点击上传</el-button> --> + </el-upload> + </el-form-item> + </el-form> + </template> + <!-- <SelectMember ref="selectMember" /> --> + </Card> + </div> + <!-- 右侧审批流程 --> + <div class="approval-flow"> + <div class="flow-content"> + <approval-process :processData="form.processData" /> + </div> + </div> + </div> + <div class="approval-dialog-approve" v-if="type == 'approve'"> + <el-row :span="24"> + <el-col :span="12"> + <div class="status"> + <div class="status-title">审批结果</div> + <div class="status-content"> + <div + class="resolve" + :class="status == '1' && 'activeStatus'" + @click.stop="status = 1" + > + 通过 + </div> + <div + class="reject" + :class="status == '2' && 'activeStatus'" + @click.stop="status = 2" + > + 驳回 + </div> </div> - </div> - <div class="approval-dialog-approve" v-if="type == 'approve'"> - <el-row :span="24"> - <el-col :span="12"> - <div class="status"> - <div class="status-title">审批结果</div> - <div class="status-content"> - <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1"> - 通过 - </div> - <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2"> - 驳回 - </div> - </div> - </div> - </el-col> - <el-col :span="12"> - <div class="remark"> - <div class="remark-title">审批意见</div> - <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" /> - </div> - </el-col> - </el-row> - </div> - <div slot="footer" class="dialog-footer"> - <el-button @click="handleClose">取 消</el-button> - <el-button type="primary" @click="handleApprove" v-if="type == 'approve'">确 定</el-button> - </div> - </el-dialog> + </div> + </el-col> + <el-col :span="12"> + <div class="remark"> + <div class="remark-title">审批意见</div> + <el-input + type="textarea" + v-model="remark" + placeholder="请输入审批意见" + /> + </div> + </el-col> + </el-row> + </div> + <div slot="footer" class="dialog-footer"> + <el-button @click="handleClose">取 消</el-button> + <el-button type="primary" @click="handleApprove" v-if="type == 'approve'" + >确 定</el-button + > + </div> + </el-dialog> </template> <script> -import ApprovalProcess from '@/components/approvalProcess' -import AiEditor from '@/components/AiEditor' -import { getDetail, audit } from '../../service' -import apiConfig from '@/utils/baseurl'; +import ApprovalProcess from "@/components/approvalProcess"; +import AiEditor from "@/components/AiEditor"; +import { getDetail, audit } from "../../service"; +import apiConfig from "@/utils/baseurl"; export default { - name: "ApprovalDialog", - components: { - ApprovalProcess, - AiEditor + name: "ApprovalDialog", + components: { + ApprovalProcess, + AiEditor, + }, + props: { + visible: { + type: Boolean, + default: false, }, - props: { - visible: { - type: Boolean, - default: false, - }, - type: { - type: String, - default: "approve", // approve-审批,view-查看 - }, - data: { - type: Object, - default: () => ({}), - }, + type: { + type: String, + default: "approve", // approve-审批,view-查看 }, - data() { - return { - dialogVisible: false, - form: { - reportCode: "", - reportTitle: "", - reportText: "", - developPerson: "", - developPersonName: "", - developDate: "", - reportType: 2, - status: 1, - teamId: "", - qaReportFiles: [], - commitPersonId: null, - processData: [] - }, - tableData: [], - fileList: [], // 附件列表 - rules: {}, - status: "1", - remark: "", - }; + data: { + type: Object, + default: () => ({}), }, - computed: { - dialogTitle() { - return this.type == "approve" ? "审批" : "审批详情"; - }, + }, + data() { + return { + dialogVisible: false, + form: { + reportCode: "", + reportTitle: "", + reportText: "", + developPerson: "", + developPersonName: "", + developDate: "", + reportType: 2, + status: 1, + teamId: "", + qaReportFiles: [], + commitPersonId: null, + processData: [], + }, + tableData: [], + fileList: [], // 附件列表 + rules: {}, + status: "1", + remark: "", + }; + }, + computed: { + dialogTitle() { + return this.type == "approve" ? "审批" : "审批详情"; }, - watch: { - visible: { - handler(val) { - this.dialogVisible = val; - if (val && this.data.id) { - this.getDetail(); - } - }, - immediate: true + }, + watch: { + visible: { + handler(val) { + this.dialogVisible = val; + if (val && this.data.id) { + this.getDetail(); } + }, + immediate: true, }, - methods: { - handlePreview(file) { - console.log('url', file) - if (file && file.url) { - if (file.url && file.url.startsWith(apiConfig.showImgUrl)) { - window.open(file.url, '_blank'); - }else{ - let newUrl=apiConfig.showImgUrl+file.url; - window.open(newUrl, '_blank'); - } + }, + methods: { + handlePreview(file) { + console.log("url", file); + if (file && file.url) { + if (file.url && file.url.startsWith(apiConfig.showImgUrl)) { + window.open(file.url, "_blank"); + } else { + let newUrl = apiConfig.showImgUrl + file.url; + window.open(newUrl, "_blank"); + } + } + }, + getDetail() { + getDetail(this.data.id) + .then((res) => { + if (res) { + this.form = { ...res, processData: [] }; + // 组装流程数据 + let processData = []; + // 提交节点 + processData.push({ + type: "primary", + mode: "list", + fields: [ + { label: "提交人:", value: res.updateBy || "" }, + { label: "提交时间:", value: res.createTime || "" }, + ], + }); + if (res.status == 2 || res.status == 4) { + processData.push({ + type: + res.status == 2 + ? "primary" + : res.status == 4 + ? "primary" + : "warning", + mode: "list", + fields: [ + { + label: "审核结果:", + value: + res.status == 2 + ? "通过" + : res.status == 4 + ? "驳回" + : "待审批", + }, + { label: "审批意见:", value: res.auditRemark || "" }, + { + label: "审核人:", + value: res.auditPersonName || res.auditPersonId || "", + }, + { label: "审核时间:", value: res.auditTime || "" }, + ], + }); + } else { + processData.push({ + type: "warning", + mode: "list", + fields: [{ label: "等待审核" }], + }); } - }, - getDetail() { - getDetail(this.data.id).then(res => { - if (res) { - this.form = { ...res, processData: [] }; - // 组装流程数据 - let processData = []; - // 提交节点 - processData.push({ - type: "primary", - mode: "list", - fields: [ - { label: "提交人:", value: res.updateBy || "" }, - { label: "提交时间:", value: res.createTime || "" }, - ], - }); - if (res.status == 2 || res.status == 4) { - processData.push({ - type: - res.status == 2 - ? "primary" - : res.status == 4 - ? "primary" - : "warning", - mode: "list", - fields: [ - { - label: "审核结果:", - value: - res.status == 2 - ? "通过" - : res.status == 4 - ? "驳回" - : "待审批", - }, - { label: "审批意见:", value: res.auditRemark || "" }, - { label: "审核人:", value: res.auditPersonName || res.auditPersonId || "" }, - { label: "审核时间:", value: res.auditTime || "" }, - ], - }); - } else { - processData.push({ - type: "warning", - mode: "list", - fields: [ - { label: "等待审核" }, - ], - }); - } - // this.form = res; - this.tableData = [{ ...res.projectTeamVO, staffName: res.projectTeamVO.staffs.map(item => item.nickName).join(',') }] - this.fileList = res.qaReportFileList.map(item => { - return { - ...item, - name: item.fileName, - url: item.fileUrl - } - }) || []; - this.$nextTick(() => { - this.form.processData = processData; - }) - } else { - this.$message.error(res.message || '获取详情失败'); - } - }).catch(err => { - // console.error('获取详情失败:', err); - // this.$message.error('获取详情失败'); + // this.form = res; + this.tableData = [ + { + ...res.projectTeamVO, + staffName: res.projectTeamVO.staffs + .map((item) => item.nickName) + .join(","), + }, + ]; + this.fileList = + res.qaReportFileList.map((item) => { + return { + ...item, + name: item.fileName, + url: item.fileUrl, + }; + }) || []; + this.$nextTick(() => { + this.form.processData = processData; }); - }, - handleClose() { - // this.$emit("update:visible", false); - this.$emit("close"); - this.form.approvalComment = ""; - }, - handleApprove() { - if (this.status == "2" && !this.remark) { - this.$message.warning("请输入审批意见"); - return; - } - const params = { - id: this.data.id, - auditStatus: this.status == "1" ? 2 : 4, // 1=通过(2),2=驳回(4) - auditRemark: this.remark - }; - audit(params).then(res => { - if (res) { - this.$message.success("审批成功"); - this.$emit("close"); - // this.$emit("refresh"); - } else { - this.$message.error(res.message || "审批失败"); - } - }).catch(err => { - // console.error("审批失败:", err); - // this.$message.error("审批失败"); - }); - }, - handleReject() { - if (!this.form.approvalComment) { - this.$message.warning("请输入审批意见"); - return; - } - this.$emit("reject", { - ...this.form, - status: "rejected", - }); - }, + } else { + this.$message.error(res.message || "获取详情失败"); + } + }) + .catch((err) => { + // console.error('获取详情失败:', err); + // this.$message.error('获取详情失败'); + }); }, + handleClose() { + // this.$emit("update:visible", false); + this.$emit("close"); + this.form.approvalComment = ""; + }, + handleApprove() { + if (this.status == "2" && !this.remark) { + this.$message.warning("请输入审批意见"); + return; + } + const params = { + id: this.data.id, + auditStatus: this.status == "1" ? 2 : 4, // 1=通过(2),2=驳回(4) + auditRemark: this.remark, + }; + audit(params) + .then((res) => { + if (res) { + this.$message.success("审批成功"); + this.$emit("close"); + // this.$emit("refresh"); + } else { + this.$message.error(res.message || "审批失败"); + } + }) + .catch((err) => { + // console.error("审批失败:", err); + // this.$message.error("审批失败"); + }); + }, + handleReject() { + if (!this.form.approvalComment) { + this.$message.warning("请输入审批意见"); + return; + } + this.$emit("reject", { + ...this.form, + status: "rejected", + }); + }, + }, }; </script> <style scoped lang="less"> ::v-deep .el-dialog__header { - border-bottom: 1px solid #e4e7ed; + border-bottom: 1px solid #e4e7ed; } .approval-dialog { - display: flex; - height: 40vh; + display: flex; + min-height: 60vh; + max-height: 80vh; - .approval-content { - flex: 2.5; - margin-right: 20px; - background: #ffffff; - box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); - border-radius: 10px; + .approval-content { + flex: 1; + margin-right: 20px; + background: #ffffff; + box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); + border-radius: 10px; + } + + .approval-flow { + padding: 20px 10px; + width: 305px; + // flex: 1; + background: #ffffff; + box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); + border-radius: 10px; + + .flow-title { + font-size: 16px; + font-weight: bold; + margin-bottom: 20px; + color: #303133; } - .approval-flow { - padding: 40px 20px; - // width: 405px; - flex: 1; - background: #ffffff; - box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); - border-radius: 10px; + .flow-content { + height: calc(100% - 40px); + overflow-y: auto; - .flow-title { - font-size: 16px; - font-weight: bold; - margin-bottom: 20px; - color: #303133; - } - - .flow-content { - height: calc(100% - 40px); - overflow-y: auto; - - .el-form--inline .el-form-item { - margin-right: 83px; - } - } + .el-form--inline .el-form-item { + margin-right: 83px; + } } + } } .approval-content-card { - height: calc(100% - 100px) !important; - box-shadow: none !important; + height: calc(100% - 10px) !important; + box-shadow: none !important; } .header-title { - // display: flex; + // 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: 18px; - .header-title-left { - display: flex; - align-items: center; - gap: 13px; - margin-top: 18px; - - 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; - } - } - - 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; + } } + + 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; + } } .item-title { - padding-left: 25px; + padding-left: 25px; - span { - flex-shrink: 0; - font-weight: bold; - font-size: 14px; - color: #222222; - line-height: 27px; - font-family: "Source Han Sans CN Bold Bold"; - margin: 18px 0; + span { + flex-shrink: 0; + font-weight: bold; + font-size: 14px; + color: #222222; + line-height: 27px; + font-family: "Source Han Sans CN Bold Bold"; + margin: 18px 0; - &:before { - content: "*"; - color: #f56c6c; - margin-right: 4px; - } + &:before { + content: "*"; + color: #f56c6c; + margin-right: 4px; } + } } .approval-dialog-approve { - padding: 38px 20px; - // display: flex; - align-content: center; + padding: 28px 10px; + // display: flex; + align-content: center; - .status { - margin-right: 40px; - max-width: 60%; + .status { + margin-right: 40px; + max-width: 60%; + } + + // align-items: center; + .status-title { + color: #222222; + font-family: "SourceHanSansCN-Medium"; + line-height: 14px; + margin-bottom: 16px; + } + + .status-content { + display: flex; + align-items: center; + width: 100%; + gap: 16px; + background: #ffffff; + border-radius: 10px; + border: 1px solid rgba(4, 156, 154, 0.5); + + .resolve { + border-radius: 10px; + flex: 1; + font-size: 16px; + // padding: 5px 55px; + font-weight: 400; + color: #333333; + cursor: pointer; + line-height: 32px; + display: flex; + align-items: center; + justify-content: center; } - // align-items: center; - .status-title { - color: #222222; - font-family: "SourceHanSansCN-Medium"; - line-height: 14px; - margin-bottom: 16px; + .reject { + flex: 1; + border-radius: 10px; + font-size: 16px; + line-height: 32px; + // padding: 5px 55px; + font-weight: 400; + color: #333333; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; } - .status-content { - display: flex; - align-items: center; - width: 100%; - gap: 16px; - background: #ffffff; - border-radius: 10px; - border: 1px solid rgba(4, 156, 154, 0.5); - - .resolve { - border-radius: 10px; - flex: 1; - font-size: 16px; - // padding: 5px 55px; - font-weight: 400; - color: #333333; - cursor: pointer; - line-height: 32px; - display: flex; - align-items: center; - justify-content: center - } - - .reject { - flex: 1; - border-radius: 10px; - font-size: 16px; - line-height: 32px; - // padding: 5px 55px; - font-weight: 400; - color: #333333; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center - } - - .activeStatus { - background: #ebfefd; - color: #049c9a; - box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25); - border-radius: 10px; - } + .activeStatus { + background: #ebfefd; + color: #049c9a; + box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25); + border-radius: 10px; } + } - .remark-title { - color: #222222; - font-family: "SourceHanSansCN-Medium"; - line-height: 14px; - margin-bottom: 16px; - } + .remark-title { + color: #222222; + font-family: "SourceHanSansCN-Medium"; + line-height: 14px; + margin-bottom: 16px; + } } .dialog-footer { - align-items: center; - display: flex; - justify-content: center; - gap: 20px; + align-items: center; + display: flex; + justify-content: center; + gap: 20px; - button { - width: 150px; - } + button { + width: 150px; + } } </style> \ No newline at end of file -- Gitblit v1.7.1