| | |
| | | label-position="top" |
| | | style="margin-top: 38px" |
| | | > |
| | | <el-form-item prop="name" label="项目课题方案名称"> |
| | | <el-input v-model="form.name" placeholder="请输入" /> |
| | | <el-form-item prop="projectName" label="项目课题方案名称"> |
| | | <el-input |
| | | v-model="form.projectName" |
| | | placeholder="请输入" |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item prop="description" label="项目阶段"> |
| | | <el-input v-model="form.description" placeholder="请输入" /> |
| | | <el-form-item prop="projectStage" label="项目阶段"> |
| | | <el-select |
| | | v-model="form.projectStage" |
| | | placeholder="请选择" |
| | | disabled |
| | | > |
| | | <el-option label="实验室开发阶段" :value="1" /> |
| | | <el-option label="中式试验阶段" :value="2" /> |
| | | <el-option label="生产验证试验阶段" :value="3" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item prop="description" label="项目课题方案编号"> |
| | | <el-input v-model="form.description" placeholder="请输入" /> |
| | | <el-form-item prop="projectCode" label="项目课题方案编号"> |
| | | <el-input |
| | | v-model="form.projectCode" |
| | | placeholder="请输入" |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="header-title"> |
| | |
| | | <div>一 、实验目的</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="purposeEditor" |
| | | :value="form.experimentObjective" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | |
| | | <div class="item-title"> |
| | | <span>1.实验材料</span> |
| | | </div> |
| | | <AiEditor |
| | | ref="materialEditor" |
| | | :value="form.experimentMaterial" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="item-title"> |
| | | <span>2.实验设备</span> |
| | | </div> |
| | | |
| | | <AiEditor |
| | | ref="equipmentEditor" |
| | | :value="form.experimentDevice" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>三 、检测方法及开发</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="methodEditor" |
| | | :value="form.experimentTestMethod" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>四 、实验步骤</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="stepsEditor" |
| | | :value="form.experimentProcedure" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>五 、数据采集及分析</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="dataAnalysisEditor" |
| | | :value="form.dataAcquisition" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>六 、结果评估</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="evaluationEditor" |
| | | :value="form.resultEvaluation" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <span>注意事项</span> |
| | | </div> |
| | | </div> |
| | | <AiEditor |
| | | ref="notesEditor" |
| | | :value="form.precautions" |
| | | height="200px" |
| | | :readOnly="true" |
| | | /> |
| | | </template> |
| | | <SelectMember ref="selectMember" /> |
| | | </Card> |
| | | </div> |
| | | <!-- 右侧审批流程 --> |
| | | <div class="approval-flow"> |
| | | <div class="flow-content"> |
| | | <approval-process |
| | | :status="form.status" |
| | | :submit-time="form.createTime" |
| | | :approver="form.approver" |
| | | :approve-time="form.approveTime" |
| | | /> |
| | | <approval-process :processData="form.processData" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="approval-dialog-approve"> |
| | | <div class="approval-dialog-approve" v-if="type === 'approve'"> |
| | | <div class="status"> |
| | | <div class="status-title">审批结果</div> |
| | | <div class="status-content"> |
| | |
| | | </div> |
| | | <div class="remark"> |
| | | <div class="remark-title">审批意见</div> |
| | | <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" /> |
| | | <el-input |
| | | type="textarea" |
| | | v-model="remark" |
| | | placeholder="请输入审批意见" |
| | | /> |
| | | </div> |
| | | </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 |
| | | type="primary" |
| | | style="margin-left: 20px" |
| | | @click="handleApprove" |
| | | v-if="type === 'approve'" |
| | | >通过</el-button |
| | | > |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import ApprovalProcess from '@/components/approvalProcess' |
| | | import ApprovalProcess from "@/components/approvalProcess"; |
| | | import { getDetailById, audit } from "../service"; |
| | | import AiEditor from "@/components/AiEditor"; |
| | | |
| | | export default { |
| | | name: "ApprovalDialog", |
| | | components: { |
| | | ApprovalProcess |
| | | ApprovalProcess, |
| | | AiEditor, |
| | | }, |
| | | props: { |
| | | visible: { |
| | |
| | | data() { |
| | | return { |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | stage: "", |
| | | creator: "", |
| | | projectName: "", |
| | | projectCode: "", |
| | | projectStage: "", |
| | | experimentObjective: "", |
| | | experimentMaterial: "", |
| | | experimentDevice: "", |
| | | experimentTestMethod: "", |
| | | experimentProcedure: "", |
| | | dataAcquisition: "", |
| | | resultEvaluation: "", |
| | | precautions: "", |
| | | auditStatus: "", |
| | | createTime: "", |
| | | approvalComment: "", |
| | | status: "pending", |
| | | approver: "", |
| | | approveTime: "" |
| | | approveTime: "", |
| | | processData: [], |
| | | }, |
| | | radio1: 1, |
| | | rules: {}, |
| | | status: "1", |
| | | remark: "", |
| | |
| | | }, |
| | | }, |
| | | watch: { |
| | | data: { |
| | | visible: { |
| | | handler(val) { |
| | | if (val) { |
| | | this.form = { ...val }; |
| | | console.log("visible", val, "22", this.data); |
| | | if (val && this.data && this.data.id) { |
| | | this.getDetail(this.data.id); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | }, |
| | | methods: { |
| | | // 获取详情 |
| | | getDetail(id) { |
| | | console.log("获取详情参数:", { id }); |
| | | getDetailById({ id }) |
| | | .then((res) => { |
| | | console.log("获取详情:", 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.auditStatus == 2 || res.auditStatus == 3) { |
| | | processData.push({ |
| | | type: |
| | | res.auditStatus === 2 |
| | | ? "primary" |
| | | : res.auditStatus === 3 |
| | | ? "danger" |
| | | : "warning", |
| | | mode: "list", |
| | | fields: [ |
| | | { |
| | | label: "审核结果:", |
| | | value: |
| | | res.auditStatus === 2 |
| | | ? "通过" |
| | | : res.auditStatus === 3 |
| | | ? "驳回" |
| | | : "待审批", |
| | | }, |
| | | { label: "审批意见:", value: res.auditRemark || "" }, |
| | | { label: "审核人:", value: res.auditPersonName || "" }, |
| | | { label: "审核时间:", value: res.auditTime || "" }, |
| | | ], |
| | | }); |
| | | }else{ |
| | | processData.push({ |
| | | type: "warning", |
| | | mode: "list", |
| | | fields: [ |
| | | { label: "等待审核"}, |
| | | ], |
| | | }); |
| | | } |
| | | // 如有卡片模式,按前述结构 push |
| | | |
| | | this.$nextTick(() => { |
| | | this.form.processData = processData; |
| | | }) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error("获取详情失败:", err); |
| | | this.$message.error("获取详情失败"); |
| | | }); |
| | | }, |
| | | handleClose() { |
| | | this.$emit("update:visible", false); |
| | | this.form.approvalComment = ""; |
| | | this.remark = ""; |
| | | this.status = "1"; |
| | | }, |
| | | handleApprove() { |
| | | if (!this.form.approvalComment) { |
| | | if (!this.remark) { |
| | | this.$message.warning("请输入审批意见"); |
| | | return; |
| | | } |
| | | this.$emit("approve", { |
| | | ...this.form, |
| | | status: "approved", |
| | | }); |
| | | }, |
| | | handleReject() { |
| | | if (!this.form.approvalComment) { |
| | | this.$message.warning("请输入审批意见"); |
| | | return; |
| | | } |
| | | this.$emit("reject", { |
| | | ...this.form, |
| | | status: "rejected", |
| | | }); |
| | | const params = { |
| | | id: this.form.id, |
| | | auditStatus: this.status === "1" ? 2 : 3, // 2-已通过,3-已驳回 |
| | | auditRemark: this.remark, |
| | | }; |
| | | console.log('审批请求参数:', params); |
| | | audit(params) |
| | | .then((res) => { |
| | | console.log('审批返回结果:', res); |
| | | if (res.code === 200) { |
| | | this.$message.success("审批成功"); |
| | | this.$emit("update:visible", false); |
| | | this.$emit("success"); |
| | | } else { |
| | | this.$message.error(res.msg || "审批失败"); |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error("审批失败:", err); |
| | | this.$message.error("审批失败"); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | } |
| | | } |
| | | |
| | | .dialog-footer{ |
| | | align-items: center; |
| | | display: flex; |
| | | justify-content: center; |
| | | button{ |
| | | width: 150px; |
| | | } |
| | | .dialog-footer { |
| | | align-items: center; |
| | | display: flex; |
| | | justify-content: center; |
| | | button { |
| | | width: 150px; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | .content-display { |
| | | padding: 10px 20px; |
| | | min-height: 100px; |
| | | background: #f5f7fa; |
| | | border-radius: 4px; |
| | | margin: 10px 0; |
| | | } |
| | | </style> |