| | |
| | | <template> |
| | | <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false" |
| | | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" |
| | | @close="handleClose"> |
| | | <div class="approval-dialog"> |
| | | <!-- 左侧审批内容 --> |
| | |
| | | <div>所属项目组</div> |
| | | </div> |
| | | </div> |
| | | <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange" |
| | | @sizeChange="handleSizeChange"> |
| | | <Table :height="null" :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="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"> |
| | | 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="reportTitle" label="报告标题"> |
| | | <el-input v-model="form.reportTitle" style="width: 100%;" placeholder="请输入报告标题" |
| | | disabled /> |
| | | </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="developPerson" label="制定人"> |
| | | <el-input v-model="form.developPerson" 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"> |
| | |
| | | <div>报告正文</div> |
| | | </div> |
| | | </div> |
| | | <el-form-item prop="name" style="margin-top: 38px"> |
| | | <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" /> |
| | | <el-form-item prop="reportText" style="margin-top: 18px"> |
| | | <ai-editor :value="form.reportText" style="width: 100%;" placeholder="请输入报告正文" |
| | | :readOnly="true" /> |
| | | </el-form-item> |
| | | <el-form-item prop="name" style="margin-top: 38px"> |
| | | <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"> |
| | | <el-button size="small" type="primary">点击上传</el-button> |
| | | <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> |
| | | <el-button size="small" type="primary" disabled>点击上传</el-button> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | <!-- 右侧审批流程 --> |
| | | <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'"> |
| | | <el-row :span="24"> |
| | | <el-col :span="12"> |
| | | <div class="status"> |
| | |
| | | </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> |
| | | <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' |
| | | |
| | | export default { |
| | | name: "ApprovalDialog", |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogVisible: false, |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | stage: "", |
| | | creator: "", |
| | | createTime: "", |
| | | approvalComment: "", |
| | | status: "pending", |
| | | approver: "", |
| | | approveTime: "" |
| | | reportCode: "", |
| | | reportTitle: "", |
| | | reportText: "", |
| | | developPerson: "", |
| | | developPersonName: "", |
| | | developDate: "", |
| | | reportType: 2, |
| | | status: 1, |
| | | teamId: "", |
| | | qaReportFiles: [], |
| | | commitPersonId: null, |
| | | processData:[] |
| | | }, |
| | | radio1: 1, |
| | | tableData: [], |
| | | fileList: [], // 附件列表 |
| | | rules: {}, |
| | | status: "1", |
| | | remark: "", |
| | |
| | | }, |
| | | computed: { |
| | | dialogTitle() { |
| | | return this.type === "approve" ? "审批" : "审批详情"; |
| | | return this.type == "approve" ? "审批" : "审批详情"; |
| | | }, |
| | | }, |
| | | watch: { |
| | | data: { |
| | | visible: { |
| | | handler(val) { |
| | | if (val) { |
| | | this.form = { ...val }; |
| | | this.dialogVisible = val; |
| | | if (val && this.data.id) { |
| | | this.getDetail(); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | methods: { |
| | | 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.projectTeam, staffName: res.staffNames }]; |
| | | 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('获取详情失败'); |
| | | }); |
| | | }, |
| | | handleClose() { |
| | | // this.$emit("update:visible", false); |
| | | this.$emit("close"); |
| | | this.form.approvalComment = ""; |
| | | }, |
| | | handleApprove() { |
| | | if (!this.form.approvalComment) { |
| | | if (this.status == "2" && !this.remark) { |
| | | this.$message.warning("请输入审批意见"); |
| | | return; |
| | | } |
| | | this.$emit("approve", { |
| | | ...this.form, |
| | | status: "approved", |
| | | 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() { |
| | |
| | | height: 40vh; |
| | | |
| | | .approval-content { |
| | | flex: 3; |
| | | flex: 2.5; |
| | | margin-right: 20px; |
| | | background: #ffffff; |
| | | box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); |
| | |
| | | .approval-flow { |
| | | padding: 40px 20px; |
| | | // width: 405px; |
| | | flex: 2; |
| | | flex: 1; |
| | | background: #ffffff; |
| | | box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08); |
| | | border-radius: 10px; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 13px; |
| | | margin-top: 38px; |
| | | margin-top: 18px; |
| | | |
| | | img { |
| | | width: 12px; |