File was renamed from culture/src/views/dataManagement/sampleManage/components/approvalDialog.vue |
| | |
| | | <template> |
| | | <el-dialog |
| | | :title="dialogTitle" |
| | | :visible.sync="visible" |
| | | width="80%" |
| | | :close-on-click-modal="false" |
| | | @close="handleClose" |
| | | > |
| | | <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" :close-on-click-modal="false" |
| | | @close="handleClose"> |
| | | <div class="approval-dialog"> |
| | | <!-- 左侧审批内容 --> |
| | | <div class="approval-content"> |
| | |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <span>项目课题方案信息</span> |
| | | <div>所属实验调度</div> |
| | | </div> |
| | | </div> |
| | | <el-form |
| | | ref="form" |
| | | :model="form" |
| | | :rules="rules" |
| | | inline |
| | | label-position="top" |
| | | style="margin-top: 38px" |
| | | > |
| | | <el-form-item prop="name" label="项目课题方案名称"> |
| | | <el-input v-model="form.name" placeholder="请输入" /> |
| | | </el-form-item> |
| | | <el-form-item prop="description" label="项目阶段"> |
| | | <el-input v-model="form.description" placeholder="请输入" /> |
| | | </el-form-item> |
| | | <el-form-item prop="description" label="项目课题方案编号"> |
| | | <el-input v-model="form.description" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>一 、实验目的</div> |
| | | </div> |
| | | </div> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>二 、实验拆料和设备</div> |
| | | </div> |
| | | </div> |
| | | <div class="item-title"> |
| | | <span>1.实验材料</span> |
| | | </div> |
| | | <div class="item-title"> |
| | | <span>2.实验设备</span> |
| | | </div> |
| | | <Table :data="groupTableData" :total="0" :height="null" class="groupTable"> |
| | | <el-table-column type="index" label="所属项目课题方案" width="80"></el-table-column> |
| | | <el-table-column prop="groupName" label="实验编号"></el-table-column> |
| | | <el-table-column prop="stage" label="实验名称"></el-table-column> |
| | | <el-table-column prop="creator" label="通知时间"></el-table-column> |
| | | <el-table-column prop="createTime" label="实验开始时间"></el-table-column> |
| | | <el-table-column prop="approver" label="实验结束时间"></el-table-column> |
| | | <el-table-column prop="approveTime" label="参加人员"></el-table-column> |
| | | <el-table-column prop="status" label="状态"> |
| | | </el-table-column> |
| | | </Table> |
| | | |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>三 、检测方法及开发</div> |
| | | <div>中止原因说明</div> |
| | | </div> |
| | | </div> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>四 、实验步骤</div> |
| | | </div> |
| | | </div> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>五 、数据采集及分析</div> |
| | | </div> |
| | | </div> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <div>六 、结果评估</div> |
| | | </div> |
| | | </div> |
| | | <div class="header-title"> |
| | | <div class="header-title-left"> |
| | | <img src="@/assets/public/headercard.png" /> |
| | | <span>注意事项</span> |
| | | </div> |
| | | </div> |
| | | <AiEditor ref="purposeEditor" v-model="form.purpose" height="200px" placeholder="请输入文字" /> |
| | | |
| | | </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 :status="form.status" :submit-time="form.createTime" :approver="form.approver" |
| | | :approve-time="form.approveTime" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="status"> |
| | | <div class="status-title">审批结果</div> |
| | | <div class="status-content"> |
| | | <div |
| | | class="resolve" |
| | | :class="status == '1' && 'activeStatus'" |
| | | @click.stop="status = 1" |
| | | > |
| | | <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1"> |
| | | 通过 |
| | | </div> |
| | | <div |
| | | class="reject" |
| | | :class="status == '2' && 'activeStatus'" |
| | | @click.stop="status = 2" |
| | | > |
| | | <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2"> |
| | | 驳回 |
| | | </div> |
| | | </div> |
| | | </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 select-member-footer"> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="handleClose">取 消</el-button> |
| | | <el-button type="primary" @click="handleApprove" v-if="type === 'approve'" |
| | | >通过</el-button |
| | | > |
| | | style="margin-left: 20px;">通过</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script> |
| | | import ApprovalProcess from '@/components/approvalProcess' |
| | | |
| | | import AiEditor from '@/components/AiEditor' |
| | | export default { |
| | | name: "ApprovalDialog", |
| | | components: { |
| | | ApprovalProcess |
| | | ApprovalProcess, AiEditor |
| | | }, |
| | | props: { |
| | | visible: { |
| | |
| | | }, |
| | | computed: { |
| | | dialogTitle() { |
| | | return this.type === "approve" ? "审批" : "审批详情"; |
| | | return this.type === "approve" ? "审批实验中止申请" : "实验中止申请审批详情"; |
| | | }, |
| | | }, |
| | | watch: { |
| | |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 13px; |
| | | margin-bottom: 38px; |
| | | |
| | | .header-title-left { |
| | | display: flex; |
| | |
| | | padding: 38px 20px; |
| | | display: flex; |
| | | align-content: center; |
| | | |
| | | .status { |
| | | margin-right: 40px; |
| | | } |
| | | |
| | | // align-items: center; |
| | | .status-title { |
| | | color: #222222; |
| | |
| | | line-height: 14px; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .status-content { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | background: #ffffff; |
| | | border-radius: 10px; |
| | | border: 1px solid rgba(4, 156, 154, 0.5); |
| | | |
| | | .resolve { |
| | | border-radius: 10px; |
| | | font-size: 16px; |
| | |
| | | color: #333333; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .reject { |
| | | border-radius: 10px; |
| | | font-size: 16px; |
| | |
| | | color: #333333; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .activeStatus { |
| | | background: #ebfefd; |
| | | color: #049c9a; |
| | |
| | | border-radius: 10px; |
| | | } |
| | | } |
| | | |
| | | .remark-title { |
| | | color: #222222; |
| | | font-family: "SourceHanSansCN-Medium"; |
| | |
| | | } |
| | | } |
| | | |
| | | .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> |