| | |
| | | <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 |
| | |
| | | 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-select v-model="form.status" placeholder="请选择"> |
| | | <el-option label="全部" value=""></el-option> |
| | | <el-option label="已发送" :value="1"></el-option> |
| | | <el-option label="申请中止待审核" :value="2"></el-option> |
| | | <el-option label="申请中止已通过" :value="3"></el-option> |
| | | <el-option label="申请中止已驳回" :value="4"></el-option> |
| | | <el-option label="已封存" :value="5"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-button type="default" @click="resetForm">重置</el-button> |
| | |
| | | <div class="tableTitle"> |
| | | <div class="flex a-center flex-wrap"> |
| | | <div |
| | | class="title" |
| | | class="title" |
| | | :class="{active:currentType === 'list'}" |
| | | @click="handleTypeChange('list')" |
| | | >项目课题方案列表</div> |
| | | <div |
| | | class="drafts" |
| | | v-if="userRole == '3'" |
| | | 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="userRole == '3'" |
| | | @click="handleAddPlan" |
| | | class="el-icon-plus" |
| | | type="primary" |
| | | >新增实验方案</el-button> |
| | | </div> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column |
| | | prop="planName" |
| | | prop="projectName" |
| | | label="项目课题方案名称" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="planCode" |
| | | prop="experimentCode" |
| | | label="实验编号" |
| | | ></el-table-column> |
| | | <el-table-column prop="stage" label="实验名称"></el-table-column> |
| | | <el-table-column prop="testDate" label="试验日期"></el-table-column> |
| | | <el-table-column prop="tester" 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="experimentSchemePersons" label="实验员"></el-table-column> |
| | | <el-table-column prop="createTime" label="创建日期"></el-table-column> |
| | | <el-table-column prop="creator" 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-table-column> |
| | | <el-table-column label="操作" width="250"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | v-if="scope.row.status === 'rejected'" |
| | | type="text" |
| | | @click="handleEdit(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button type="text" @click="handleDetail(scope.row)" |
| | | >详情</el-button |
| | | > |
| | | <!-- 超级管理员(1)和审批人(2) --> |
| | | <template v-if="userRole == '1' || userRole == '2'"> |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | </template> |
| | | |
| | | <!-- 工艺工程师(3) --> |
| | | <template v-if="userRole == '3'"> |
| | | <el-button type="text" @click="handleEdit(scope.row)" v-if="scope.row.status == '4'">编辑</el-button> |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | </template> |
| | | |
| | | <!-- 实验员(5) --> |
| | | <template v-if="userRole == '5'"> |
| | | <el-button type="text" @click="handleEdit(scope.row)" v-if="scope.row.status == '4'">编辑</el-button> |
| | | </template> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | |
| | | |
| | | <script> |
| | | import ApprovalDialog from './components/approvalDialog.vue' |
| | | import {getList} from './service' |
| | | |
| | | export default { |
| | | name: "ProjectList", |
| | |
| | | return { |
| | | currentType: 'list', // 当前显示类型:list-列表,draft-草稿箱 |
| | | 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: '设备升级实验', |
| | | testDate: '2024-03-15', |
| | | tester: '张三', |
| | | creator: '张三', |
| | | createTime: '2024-03-15', |
| | | status: 'pending', |
| | | approver: '李四', |
| | | approveTime: '2024-03-16', |
| | | purpose: '<p>1. 研究新型催化剂的性能</p><p>2. 优化反应条件</p><p>3. 提高产品收率</p>', |
| | | processParameters: [ |
| | | { |
| | | '工艺参数': '反应温度', |
| | | '参数值': '25℃', |
| | | '操作人员': ['1', '2'], |
| | | updateTime: '2024-01-01 12:00:00' |
| | | }, |
| | | { |
| | | '工艺参数': '反应压力', |
| | | '参数值': '1.0MPa', |
| | | '操作人员': ['3'], |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ], |
| | | materials: [ |
| | | { |
| | | '材料名称': '催化剂A', |
| | | '规格': '工业级', |
| | | '数量': '100g', |
| | | updateTime: '2024-01-01 12:00:00' |
| | | }, |
| | | { |
| | | '材料名称': '溶剂B', |
| | | '规格': '分析纯', |
| | | '数量': '500ml', |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ], |
| | | steps: '<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>' |
| | | }, |
| | | { |
| | | planCode: 'PLAN-2024-002', |
| | | planName: '实验室安全管理制度更新方案', |
| | | stage: '安全测试实验', |
| | | testDate: '2024-03-14', |
| | | tester: '王五', |
| | | creator: '王五', |
| | | createTime: '2024-03-14', |
| | | status: 'approved', |
| | | approver: '赵六', |
| | | approveTime: '2024-03-15', |
| | | purpose: '<p>1. 评估现有安全管理制度</p><p>2. 制定新的安全规范</p><p>3. 进行安全培训</p>', |
| | | processParameters: [ |
| | | { |
| | | '工艺参数': '培训时间', |
| | | '参数值': '2小时', |
| | | '操作人员': ['1', '2', '3'], |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ], |
| | | materials: [ |
| | | { |
| | | '材料名称': '培训材料', |
| | | '规格': 'A4', |
| | | '数量': '50份', |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ], |
| | | steps: '<p>1. 安全评估</p><p>2. 制度更新</p><p>3. 人员培训</p><p>4. 效果评估</p>' |
| | | }, |
| | | { |
| | | planCode: 'PLAN-2024-003', |
| | | planName: '实验室人员培训计划', |
| | | stage: '培训效果实验', |
| | | testDate: '2024-03-13', |
| | | tester: '孙七', |
| | | 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 || ''; |
| | | |
| | | if (this.userRole == '4') { |
| | | this.$router.push('/403'); |
| | | return; |
| | | } |
| | | |
| | | 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" |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }, |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | pending: "待审批", |
| | | rejected: "已驳回", |
| | | approved: "已通过", |
| | | archived: "已封存", |
| | | draft: "草稿" |
| | | '-1': "草稿", |
| | | '1': "已发送", |
| | | '2': "申请中止待审核", |
| | | '3': "申请中止已通过", |
| | | '4': "申请中止已驳回", |
| | | '5': "已封存" |
| | | }; |
| | | return statusMap[status] || "未知"; |
| | | }, |
| | | 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.status = type === 'draft' ? -1 : ''; |
| | | this.form.pageNum = 1; |
| | | this.getTableData(); |
| | | }, |
| | | 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('获取列表数据失败'); |
| | | } |
| | | }, |
| | | handleAddPlan() { |
| | | this.$router.push({ |
| | | path: "/dataManagement/scheme-management/add", |
| | | }); |
| | | }, |
| | | 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) { |
| | | this.$router.push({ |
| | | path: "/dataManagement/scheme-management/add", |
| | | query: { |
| | | id: row.planCode, |
| | | id: row.id, |
| | | type: 'edit' |
| | | } |
| | | }); |
| | | }, |
| | | handleDelete(row) { |
| | | // 实现删除逻辑 |
| | | console.log("删除数据:", row); |
| | | }, |
| | | handleDetail(row) { |
| | | // 打开弹窗 |
| | | this.approvalDialogType = 'view'; |
| | | this.approvalDialogVisible = true; |
| | | |
| | | // 调用获取详情接口 |
| | | this.getPlanDetail(row.planCode); |
| | | this.getPlanDetail(row.id); |
| | | }, |
| | | // 获取方案详情 |
| | | async getPlanDetail(planCode) { |
| | | async getPlanDetail(id) { |
| | | try { |
| | | // TODO: 替换为实际的接口调用 |
| | | // const { data } = await this.$api.getPlanDetail({ planCode }); |
| | | |
| | | // 模拟接口返回数据 |
| | | const mockDetailData = { |
| | | planCode: planCode, |
| | | planName: '2024年度实验室设备升级方案', |
| | | stage: '设备升级实验', |
| | | testDate: '2024-03-15', |
| | | testTime: '2024-03-15 14:00:00', |
| | | tester: '张三', |
| | | creator: '张三', |
| | | createTime: '2024-03-15', |
| | | status: 'pending', |
| | | approver: '李四', |
| | | approveTime: '2024-03-16', |
| | | experimentPurpose: [ |
| | | { |
| | | id: 1, |
| | | type: 'richText', |
| | | data: { |
| | | content: '<p>1. 研究新型催化剂的性能</p><p>2. 优化反应条件</p><p>3. 提高产品收率</p>' |
| | | } |
| | | } |
| | | ], |
| | | processParameters: [ |
| | | { |
| | | id: 2, |
| | | type: 'customTable', |
| | | data: { |
| | | headers: [ |
| | | { name: '工艺参数', type: 'text' }, |
| | | { name: '参数值', type: 'text' }, |
| | | { name: '操作人员', type: 'user' } |
| | | ], |
| | | rows: [ |
| | | { |
| | | '工艺参数': '反应温度', |
| | | '参数值': '25℃', |
| | | '操作人员': ['1', '2'], |
| | | updateTime: '2024-01-01 12:00:00' |
| | | }, |
| | | { |
| | | '工艺参数': '反应压力', |
| | | '参数值': '1.0MPa', |
| | | '操作人员': ['3'], |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | materialsAndEquipment: [ |
| | | { |
| | | id: 3, |
| | | type: 'customTable', |
| | | data: { |
| | | headers: [ |
| | | { name: '材料名称', type: 'text' }, |
| | | { name: '规格', type: 'text' }, |
| | | { name: '数量', type: 'text' } |
| | | ], |
| | | rows: [ |
| | | { |
| | | '材料名称': '催化剂A', |
| | | '规格': '工业级', |
| | | '数量': '100g', |
| | | updateTime: '2024-01-01 12:00:00' |
| | | }, |
| | | { |
| | | '材料名称': '溶剂B', |
| | | '规格': '分析纯', |
| | | '数量': '500ml', |
| | | updateTime: '2024-01-01 12:00:00' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | operationSteps: [ |
| | | { |
| | | id: 4, |
| | | type: 'richText', |
| | | data: { |
| | | content: '<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>' |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | // 更新弹窗数据 |
| | | this.currentApprovalData = mockDetailData; |
| | | const { data } = await this.$api.getDetail({ id }); |
| | | this.currentApprovalData = data; |
| | | } catch (error) { |
| | | console.error('获取方案详情失败:', error); |
| | | this.$message.error('获取方案详情失败'); |
| | | this.approvalDialogVisible = false; |
| | | } |
| | | }, |
| | | handleTypeChange(type) { |
| | | this.currentType = type; |
| | | handleApproveSubmit(data) { |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批通过成功'); |
| | | 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; |
| | | } |
| | | }, |
| | | handleRejectSubmit(data) { |
| | | this.approvalDialogVisible = false; |
| | | this.$message.success('审批驳回成功'); |
| | | this.getTableData(); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |