| | |
| | | <template> |
| | | <div class="list"> |
| | | <TableCustom :queryForm="form" :tableData="tableData" :total="total"> |
| | | <TableCustom :queryForm="form" :tableData="tableData" :total="total" @handlePageChange="handlePageChange" @handleSizeChange="handleSizeChange"> |
| | | <template #search> |
| | | <el-form :model="form" labelWidth="auto" inline> |
| | | <el-form-item label="所属项目课题方案:"> |
| | | <el-input v-model="form.planName" placeholder="请输入"></el-input> |
| | | <el-form-item label="项目课题方案名称:"> |
| | | <el-input v-model="form.projectName" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="实验编号:"> |
| | | <el-input v-model="form.planCode" placeholder="请输入"></el-input> |
| | | <el-input v-model="form.experimentCode" 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" |
| | | @change="handleDateChange" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="状态"> |
| | | <el-input v-model="form.approver" placeholder="请输入"></el-input> |
| | | <el-form-item label="状态:"> |
| | | <el-select v-model="form.status" placeholder="请选择"> |
| | | <el-option label="全部" value=""></el-option> |
| | | <el-option label="待审核" :value="2"></el-option> |
| | | <el-option label="已通过" :value="3"></el-option> |
| | | <el-option label="已驳回" :value="4"></el-option> |
| | | </el-select> |
| | | </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: 10px;">查询</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="flex a-center flex-wrap"> |
| | | <div |
| | | class="title" |
| | | :class="{active:currentType == 'list'}" |
| | | @click="handleTypeChange('list')" |
| | | >申请中止试验方案列表</div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column> |
| | | <el-table-column prop="planName" 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="projectName" |
| | | label="项目课题方案名称" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="experimentCode" |
| | | label="实验编号" |
| | | ></el-table-column> |
| | | <el-table-column prop="experimentName" label="实验名称"></el-table-column> |
| | | <el-table-column prop="experimentDate" label="实验日期"></el-table-column> |
| | | <el-table-column prop="schemePersonName" label="实验员"></el-table-column> |
| | | <el-table-column prop="createTime" label="创建日期"></el-table-column> |
| | | <el-table-column prop="createBy" label="创建人"></el-table-column> |
| | | <el-table-column prop="status" label="当前状态"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="操作" width="250"> |
| | | <template slot-scope="scope"> |
| | | <el-button v-if="scope.row.status === 'pending'" type="text" |
| | | @click="handleApprove(scope.row)">审批</el-button> |
| | | |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | <!-- 超级管理员(1) --> |
| | | <template v-if="userRole == '1'"> |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | </template> |
| | | |
| | | <!-- 审批人(2) --> |
| | | <template v-if="userRole == '2'"> |
| | | <el-button |
| | | v-if="scope.row.status == 2" |
| | | type="text" |
| | | @click="handleApprove(scope.row)" |
| | | >审批</el-button> |
| | | <el-button v-else 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" |
| | | @close="handleClose" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import ApprovalDialog from './components/approvalDialog.vue' |
| | | import {getList} from './service' |
| | | |
| | | export default { |
| | | name: "ProjectList", |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | currentType: 'list', // 当前显示类型:list-列表,draft-草稿箱 |
| | | currentType: 'list', |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | projectName: "", |
| | | experimentCode: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | startTime: "", |
| | | endTime: "", |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | 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-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' |
| | | } |
| | | ], |
| | | mockDraftData: [ |
| | | { |
| | | 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: '' |
| | | } |
| | | ], |
| | | approvalDialogVisible: false, |
| | | approvalDialogType: 'approve', |
| | | approvalDialogType: 'view', |
| | | currentApprovalData: null, |
| | | userRole: '', |
| | | }; |
| | | }, |
| | | created() { |
| | | const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}'); |
| | | this.userRole = userInfo.roleType || ''; |
| | | this.getTableData(); |
| | | }, |
| | | methods: { |
| | | handlePageChange(page) { |
| | | this.form.pageNum = page; |
| | | this.getTableData(); |
| | | }, |
| | | handleSizeChange(size) { |
| | | this.form.pageSize = size; |
| | | this.form.pageNum = 1; |
| | | this.getTableData(); |
| | | }, |
| | | resetForm() { |
| | | this.form = { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | projectName: "", |
| | | experimentCode: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | startTime: "", |
| | | endTime: "", |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }; |
| | | this.getTableData(); |
| | | }, |
| | | handleSearch() { |
| | | // 实现查询逻辑 |
| | | console.log("查询条件:", this.form); |
| | | this.form.pageNum = 1; |
| | | this.getTableData(); |
| | | }, |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | | pending: "warning", |
| | | rejected: "danger", |
| | | approved: "success", |
| | | archived: "info", |
| | | draft: "info" |
| | | '-1': "info", |
| | | '1': "warning", |
| | | '2': "warning", |
| | | '3': "success", |
| | | '4': "danger", |
| | | '5': "info", |
| | | '6':'success' |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }, |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | pending: "待审批", |
| | | rejected: "已驳回", |
| | | approved: "已通过", |
| | | archived: "已封存", |
| | | draft: "草稿" |
| | | '-1': "草稿", |
| | | '1': "已发送", |
| | | '2': "待审核", |
| | | '3': "已通过", |
| | | '4': "已驳回", |
| | | '5': "已封存", |
| | | '6':'实验员已提交' |
| | | }; |
| | | return statusMap[status] || "未知"; |
| | | }, |
| | | handleAddPlan() { |
| | | this.$router.push({ |
| | | path: "/dataManagement/addPlan", |
| | | }); |
| | | }, |
| | | handleApprove(row) { |
| | | this.currentApprovalData = row; |
| | | this.approvalDialogType = 'approve'; |
| | | this.approvalDialogVisible = true; |
| | | }, |
| | | handleApproveSubmit(data) { |
| | | // 处理审批通过 |
| | | console.log('审批通过:', data); |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批通过成功'); |
| | | this.getTableData(); |
| | | }, |
| | | handleRejectSubmit(data) { |
| | | // 处理审批驳回 |
| | | console.log('审批驳回:', data); |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批驳回成功'); |
| | | this.getTableData(); |
| | | }, |
| | | handleRevokeApprove(row) { |
| | | // 实现撤销审批逻辑 |
| | | console.log("撤销审批数据:", row); |
| | | }, |
| | | handleEdit(row) { |
| | | // 实现编辑逻辑 |
| | | console.log("编辑数据:", row); |
| | | }, |
| | | handleDelete(row) { |
| | | // 实现删除逻辑 |
| | | console.log("删除数据:", row); |
| | | }, |
| | | handleDetail(row) { |
| | | this.currentApprovalData = row; |
| | | this.approvalDialogType = 'view'; |
| | | this.approvalDialogVisible = true; |
| | | handleDateChange(val) { |
| | | if (val) { |
| | | this.form.startTime = val[0]; |
| | | this.form.endTime = val[1]; |
| | | } else { |
| | | this.form.startTime = ''; |
| | | this.form.endTime = ''; |
| | | } |
| | | }, |
| | | handleTypeChange(type) { |
| | | this.currentType = type; |
| | | this.form.pageNum = 1; |
| | | this.getTableData(); |
| | | }, |
| | | getTableData() { |
| | | // 根据currentType请求不同的数据 |
| | | if (this.currentType === 'list') { |
| | | this.tableData = this.mockListData; |
| | | this.total = this.mockListData.length; |
| | | } else { |
| | | this.tableData = this.mockDraftData; |
| | | this.total = this.mockDraftData.length; |
| | | async getTableData() { |
| | | try { |
| | | const { data } = await getList(this.form); |
| | | this.tableData = data.records || []; |
| | | this.total = data.total || 0; |
| | | } catch (error) { |
| | | console.error('获取列表数据失败:', error); |
| | | this.$message.error('获取列表数据失败'); |
| | | } |
| | | }, |
| | | handleApprove(row) { |
| | | this.approvalDialogType = 'approve'; |
| | | this.approvalDialogVisible = true; |
| | | this.currentApprovalData = { |
| | | id: row.id |
| | | }; |
| | | }, |
| | | handleDetail(row) { |
| | | this.approvalDialogType = 'view'; |
| | | this.approvalDialogVisible = true; |
| | | this.currentApprovalData = { |
| | | id: row.id |
| | | }; |
| | | }, |
| | | handleClose(data) { |
| | | this.approvalDialogVisible = false; |
| | | this.getTableData(); |
| | | }, |
| | | handleRejectSubmit(data) { |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批驳回成功'); |
| | | this.getTableData(); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | border: 1px solid #049c9a; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |