| | |
| | | <el-input v-model="form.createBy" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="创建时间:"> |
| | | <el-date-picker |
| | | v-model="form.createTime" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | <el-date-picker v-model="form.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="审批人:"> |
| | | <el-input v-model="form.auditPersonName" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-button type="default" @click="resetForm">重置</el-button> |
| | | <el-button type="primary" @click="handleSearch" style="margin-left: 20px;">查询</el-button> |
| | | <el-button type="primary" @click="handleSearch" style="margin-left: 20px">查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | <template #setting> |
| | | <div class="tableTitle"> |
| | | <div class="flex a-center"> |
| | | <div |
| | | class="title" |
| | | :class="{active:currentType === 'list'}" |
| | | @click="handleTypeChange('list')" |
| | | >项目课题方案列表</div> |
| | | <div |
| | | class="drafts" |
| | | :class="{active:currentType === 'draft'}" |
| | | @click="handleTypeChange('draft')" |
| | | >草稿箱</div> |
| | | <div class="title" :class="{ active: currentType === 'list' }" @click="handleTypeChange('list')"> |
| | | 项目课题方案列表 |
| | | </div> |
| | | <div v-if="isProcessEngineer" class="drafts" :class="{ active: currentType === 'draft' }" |
| | | @click="handleTypeChange('draft')"> |
| | | 草稿箱 |
| | | </div> |
| | | </div> |
| | | <el-button @click="handleAddPlan" class="el-icon-plus" type="primary"> |
| | | 新增项目课题方案</el-button |
| | | > |
| | | <el-button v-if="isProcessEngineer" @click="handleAddPlan" class="el-icon-plus" type="primary"> |
| | | 新增项目课题方案</el-button> |
| | | </div> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column |
| | | prop="projectCode" |
| | | label="项目课题方案编号" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="projectName" |
| | | label="项目课题方案名称" |
| | | ></el-table-column> |
| | | <el-table-column prop="stage" label="项目阶段"></el-table-column> |
| | | <el-table-column prop="createBy" label="创建人"></el-table-column> |
| | | <el-table-column prop="projectCode" label="项目课题方案编号"></el-table-column> |
| | | <el-table-column prop="projectName" label="项目课题方案名称"></el-table-column> |
| | | <el-table-column prop="projectStage" label="项目阶段"> |
| | | <template slot-scope="scope"> |
| | | {{ getProjectStageText(scope.row.projectStage) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="updateBy" label="创建人"></el-table-column> |
| | | <el-table-column prop="createTime" label="创建日期"></el-table-column> |
| | | <el-table-column prop="auditStatus" label="审批状态"> |
| | | <template slot-scope="scope"> |
| | |
| | | <el-table-column prop="auditTime" label="审批时间"></el-table-column> |
| | | <el-table-column label="操作" width="250"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | v-if="scope.row.auditStatus === 1" |
| | | type="text" |
| | | @click="handleApprove(scope.row)" |
| | | >审批</el-button |
| | | > |
| | | <el-button |
| | | v-if="scope.row.auditStatus === 2" |
| | | type="text" |
| | | @click="handleRevokeApprove(scope.row)" |
| | | >撤销审批</el-button |
| | | > |
| | | <el-button |
| | | v-if="scope.row.auditStatus === 3" |
| | | type="text" |
| | | @click="handleEdit(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | v-if="scope.row.auditStatus === 3" |
| | | type="text" |
| | | @click="handleDelete(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | <el-button type="text" @click="handleDetail(scope.row)" |
| | | >详情</el-button |
| | | > |
| | | <!-- 工艺工程师的按钮 --> |
| | | <template v-if="isProcessEngineer"> |
| | | <el-button v-if="scope.row.auditStatus === 1" type="text" |
| | | @click="handleRevokeApprove(scope.row)">撤销审批</el-button> |
| | | <el-button v-if="scope.row.auditStatus === 3" type="text" @click="handleEdit(scope.row)">编辑</el-button> |
| | | <el-button v-if="scope.row.auditStatus === 3" type="text" @click="handleDelete(scope.row)">删除</el-button> |
| | | <el-button v-if="scope.row.auditStatus !== 1" type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | </template> |
| | | <!-- 审批人和超级管理员的按钮 --> |
| | | <template v-else> |
| | | <el-button v-if="scope.row.auditStatus === 1" type="text" @click="handleApprove(scope.row)">审批</el-button> |
| | | <el-button v-if="scope.row.auditStatus !== 1" type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | </template> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCustom> |
| | | <!-- 审批弹窗 --> |
| | | <approval-dialog |
| | | :visible.sync="approvalDialogVisible" |
| | | :type="approvalDialogType" |
| | | :data="currentApprovalData" |
| | | @approve="handleApproveSubmit" |
| | | @reject="handleRejectSubmit" |
| | | /> |
| | | <approval-dialog :visible.sync="approvalDialogVisible" :type="approvalDialogType" :data="currentApprovalData" |
| | | @approve="handleApproveSubmit" @reject="handleRejectSubmit" /> |
| | | <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus" |
| | | @close="changeStatus = false" @confirm="handleChangeStatusConfirm" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import ApprovalDialog from './components/approvalDialog.vue' |
| | | import { getProposalList } from './service' |
| | | import ShowDelConfirm from "@/components/showDelConfirm/index.vue"; |
| | | import ApprovalDialog from "./components/approvalDialog.vue"; |
| | | import { getProposalList, upAndDown, deleteById } from "./service"; |
| | | |
| | | export default { |
| | | name: "ProjectList", |
| | | components: { |
| | | ApprovalDialog |
| | | ApprovalDialog, |
| | | ShowDelConfirm |
| | | }, |
| | | data() { |
| | | return { |
| | | currentType: 'list', // 当前显示类型:list-列表,draft-草稿箱 |
| | | currentType: "list", // 当前显示类型:list-列表,draft-草稿箱 |
| | | form: { |
| | | projectName: "", |
| | | projectCode: "", |
| | | createBy: "", |
| | | createTime: [], |
| | | auditPersonName: "", |
| | | auditStatus: 1, |
| | | auditStatus: '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | startTime: "", |
| | | endTime: "" |
| | | endTime: "", |
| | | }, |
| | | tableData: [], |
| | | total: 0, |
| | | // 模拟数据 |
| | | mockListData: [ |
| | | { |
| | | planCode: 'PLAN-2024-001', |
| | | planName: '2024年度实验室设备升级方案', |
| | | stage: '规划阶段', |
| | | creator: '张三', |
| | | createTime: '2024-03-15', |
| | | status: 'pending', |
| | | approver: '李四', |
| | | approveTime: '2024-03-16' |
| | | planCode: "PLAN-2024-001", |
| | | planName: "2024年度实验室设备升级方案", |
| | | stage: "规划阶段", |
| | | creator: "张三", |
| | | createTime: "2024-03-15", |
| | | status: "pending", |
| | | approver: "李四", |
| | | approveTime: "2024-03-16", |
| | | }, |
| | | { |
| | | planCode: 'PLAN-2024-002', |
| | | planName: '实验室安全管理制度更新方案', |
| | | stage: '实施阶段', |
| | | creator: '王五', |
| | | createTime: '2024-03-14', |
| | | status: 'approved', |
| | | approver: '赵六', |
| | | approveTime: '2024-03-15' |
| | | planCode: "PLAN-2024-002", |
| | | planName: "实验室安全管理制度更新方案", |
| | | stage: "实施阶段", |
| | | creator: "王五", |
| | | createTime: "2024-03-14", |
| | | status: "approved", |
| | | approver: "赵六", |
| | | approveTime: "2024-03-15", |
| | | }, |
| | | { |
| | | planCode: 'PLAN-2024-003', |
| | | planName: '实验室人员培训计划', |
| | | stage: '准备阶段', |
| | | creator: '孙七', |
| | | createTime: '2024-03-13', |
| | | status: 'rejected', |
| | | approver: '周八', |
| | | approveTime: '2024-03-14' |
| | | } |
| | | planCode: "PLAN-2024-003", |
| | | planName: "实验室人员培训计划", |
| | | stage: "准备阶段", |
| | | creator: "孙七", |
| | | createTime: "2024-03-13", |
| | | status: "rejected", |
| | | approver: "周八", |
| | | approveTime: "2024-03-14", |
| | | }, |
| | | ], |
| | | mockDraftData: [ |
| | | { |
| | | planCode: 'DRAFT-2024-001', |
| | | planName: '实验室设备采购计划(草稿)', |
| | | stage: '规划阶段', |
| | | creator: '张三', |
| | | createTime: '2024-03-16', |
| | | status: 'draft', |
| | | approver: '', |
| | | approveTime: '' |
| | | planCode: "DRAFT-2024-001", |
| | | planName: "实验室设备采购计划(草稿)", |
| | | stage: "规划阶段", |
| | | creator: "张三", |
| | | createTime: "2024-03-16", |
| | | status: "draft", |
| | | approver: "", |
| | | approveTime: "", |
| | | }, |
| | | { |
| | | planCode: 'DRAFT-2024-002', |
| | | planName: '实验室改造方案(草稿)', |
| | | stage: '准备阶段', |
| | | creator: '李四', |
| | | createTime: '2024-03-15', |
| | | status: 'draft', |
| | | approver: '', |
| | | approveTime: '' |
| | | } |
| | | planCode: "DRAFT-2024-002", |
| | | planName: "实验室改造方案(草稿)", |
| | | stage: "准备阶段", |
| | | creator: "李四", |
| | | createTime: "2024-03-15", |
| | | status: "draft", |
| | | approver: "", |
| | | approveTime: "", |
| | | }, |
| | | ], |
| | | approvalDialogVisible: false, |
| | | approvalDialogType: 'approve', |
| | | approvalDialogType: "approve", |
| | | currentApprovalData: null, |
| | | // 确认弹窗相关数据 |
| | | changeStatus: false, |
| | | changeStatusTitle: "", |
| | | changeStatusTip: "", |
| | | currentOperationType: "", // 当前操作类型:revoke-撤销审批,delete-删除 |
| | | currentOperationRow: null, // 当前操作的行数据 |
| | | }; |
| | | }, |
| | | computed: { |
| | | isProcessEngineer() { |
| | | const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}'); |
| | | return userInfo.roleType === 3; // 3是工艺工程师 |
| | | } |
| | | }, |
| | | created() { |
| | | this.getTableData(); |
| | |
| | | createBy: "", |
| | | createTime: [], |
| | | auditPersonName: "", |
| | | auditStatus: this.currentType === 'draft' ? -1 : 1, |
| | | auditStatus: this.currentType === "draft" ? -1 : '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | startTime: "", |
| | | endTime: "" |
| | | endTime: "", |
| | | }; |
| | | this.getTableData(); |
| | | }, |
| | | handleSearch() { |
| | | if (this.form.createTime && this.form.createTime.length === 2) { |
| | |
| | | }, |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | | 1: "warning", // 审批中 |
| | | 2: "success", // 已通过 |
| | | 3: "danger", // 已驳回 |
| | | 4: "info", // 已撤销 |
| | | 5: "info", // 已封存 |
| | | "-1": "info", // 草稿 |
| | | 1: "warning", // 审批中 |
| | | 2: "success", // 已通过 |
| | | 3: "danger", // 已驳回 |
| | | 4: "info", // 已撤销 |
| | | 5: "info", // 已封存 |
| | | "-1": "info", // 草稿 |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }, |
| | |
| | | }; |
| | | return statusMap[status] || "未知"; |
| | | }, |
| | | getProjectStageText(stage) { |
| | | const stageMap = { |
| | | 1: "实验室开发阶段", |
| | | 2: "中式试验阶段", |
| | | 3: "生产验证试验阶段" |
| | | }; |
| | | return stageMap[stage] || "未知阶段"; |
| | | }, |
| | | handleAddPlan() { |
| | | this.$router.push({ |
| | | path: "/dataManagement/addPlan", |
| | |
| | | }, |
| | | handleApprove(row) { |
| | | this.currentApprovalData = row; |
| | | this.approvalDialogType = 'approve'; |
| | | this.approvalDialogType = "approve"; |
| | | this.approvalDialogVisible = true; |
| | | }, |
| | | handleApproveSubmit(data) { |
| | | // 处理审批通过 |
| | | console.log('审批通过:', data); |
| | | console.log("审批通过:", data); |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批通过成功'); |
| | | this.$message.success("审批通过成功"); |
| | | this.getTableData(); |
| | | }, |
| | | handleRejectSubmit(data) { |
| | | // 处理审批驳回 |
| | | console.log('审批驳回:', data); |
| | | console.log("审批驳回:", data); |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批驳回成功'); |
| | | this.$message.success("审批驳回成功"); |
| | | this.getTableData(); |
| | | }, |
| | | handleRevokeApprove(row) { |
| | | // 实现撤销审批逻辑 |
| | | console.log("撤销审批数据:", row); |
| | | this.currentOperationType = "revoke"; |
| | | this.currentOperationRow = row; |
| | | this.changeStatusTitle = "确认要撤销这条审批吗?"; |
| | | this.changeStatusTip = "撤销后,审批人将无法收到此条审批信息"; // 这里可以根据实际需求修改提示文案 |
| | | this.changeStatus = true; |
| | | }, |
| | | handleEdit(row) { |
| | | // 实现编辑逻辑 |
| | | console.log("编辑数据:", row); |
| | | this.$router.push({ |
| | | path: "/dataManagement/addPlan", |
| | | query: { |
| | | id: row.id |
| | | } |
| | | }); |
| | | }, |
| | | handleDelete(row) { |
| | | // 实现删除逻辑 |
| | | console.log("删除数据:", row); |
| | | this.currentOperationType = "delete"; |
| | | this.currentOperationRow = row; |
| | | this.changeStatusTitle = "确认要删除这条信息吗?"; |
| | | this.changeStatusTip = "删除后信息无法找回"; // 这里可以根据实际需求修改提示文案 |
| | | this.changeStatus = true; |
| | | }, |
| | | handleDetail(row) { |
| | | this.currentApprovalData = row; |
| | | this.approvalDialogType = 'view'; |
| | | this.approvalDialogType = "view"; |
| | | this.approvalDialogVisible = true; |
| | | }, |
| | | handleTypeChange(type) { |
| | | this.currentType = type; |
| | | this.form.auditStatus = type === 'draft' ? -1 : ''; |
| | | this.form.auditStatus = type === "draft" ? -1 : ""; |
| | | this.getTableData(); |
| | | }, |
| | | getTableData() { |
| | |
| | | this.form.startTime = ""; |
| | | this.form.endTime = ""; |
| | | } |
| | | |
| | | |
| | | // 创建新的请求参数对象,排除createTime |
| | | const { createTime, ...requestParams } = this.form; |
| | | console.log(requestParams,'requestParams') |
| | | |
| | | getProposalList(requestParams).then(res => { |
| | | console.log(requestParams, "requestParams"); |
| | | getProposalList(requestParams).then((res) => { |
| | | console.log(res, "请求回来的数据"); |
| | | this.tableData = res.data.records; |
| | | this.total = res.data.total; |
| | | }); |
| | | }, |
| | | handleChangeStatusConfirm() { |
| | | if (this.currentOperationType === "revoke") { |
| | | // 处理撤销审批逻辑 |
| | | upAndDown({ |
| | | id: this.currentOperationRow.id, |
| | | status: 4 // 已撤销状态 |
| | | }).then(() => { |
| | | this.$message.success("撤销审批成功"); |
| | | this.changeStatus = false; |
| | | this.getTableData(); |
| | | }).catch(error => { |
| | | this.$message.error("撤销审批失败"); |
| | | }); |
| | | } else if (this.currentOperationType === "delete") { |
| | | // 处理删除逻辑 |
| | | deleteById({ |
| | | id: this.currentOperationRow.id |
| | | }).then(() => { |
| | | this.$message.success("删除成功"); |
| | | this.changeStatus = false; |
| | | this.getTableData(); |
| | | }).catch(error => { |
| | | this.$message.error("删除失败"); |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | .list { |
| | | height: 100%; |
| | | } |
| | | |
| | | .flex { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .tableTitle { |
| | | display: flex; |
| | | padding-bottom: 20px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .title { |
| | | background: #fafafc; |
| | | border-radius: 8px 8px 0px 0px; |
| | |
| | | width: unset; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .drafts { |
| | | padding: 16px 65px; |
| | | background: #fafafc; |
| | |
| | | margin-left: 16px; |
| | | cursor: pointer; |
| | | } |
| | | .active{ |
| | | |
| | | .active { |
| | | color: #049c9a; |
| | | background: #ffffff; |
| | | border-radius: 8px 8px 0px 0px; |