| | |
| | | <template> |
| | | <div class="list"> |
| | | <TableCustom :queryForm="form" :tableData="tableData" :total="total"> |
| | | <TableCustom :queryForm="form" :height="null" :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-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-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-input v-model="form.experimentName" placeholder="请输入"></el-input> |
| | | </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-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-button type="default" @click="resetForm">重置</el-button> |
| | | <el-button type="primary" @click="handleSearch">查询</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"> |
| | | 取样操作记录列表 |
| | | </div> |
| | | <div class="title active">取样操作记录列表</div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column |
| | | prop="planName" |
| | | label="所属项目课题方案" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="experimentNo" |
| | | label="实验编号" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="experimentName" |
| | | label="实验名称" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="sampleNo" |
| | | 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="sampleStatus" |
| | | label="样品总数/待送达/待接收/已接收" |
| | | ></el-table-column> |
| | | <el-table-column label="操作" width="100"> |
| | | <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" |
| | | :label="column.label"></el-table-column> |
| | | <el-table-column label="样品总数/待送达/待接收/已接收"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | {{ getSampleStatus(scope.row) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="150"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | |
| | | |
| | | <script> |
| | | // import ApprovalDialog from './components/approvalDialog.vue' |
| | | import { getList } from './service' |
| | | |
| | | export default { |
| | | name: "ProjectList", |
| | |
| | | data() { |
| | | return { |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | experimentCode: "", |
| | | experimentName: "", |
| | | projectName: "", |
| | | status: '', |
| | | 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", |
| | | }, |
| | | ], |
| | | columns: [ |
| | | { prop: 'projectName', label: '所属项目课题方案' }, |
| | | { prop: 'experimentCode', label: '实验编号' }, |
| | | { prop: 'experimentName', label: '实验名称' }, |
| | | { prop: 'samplingCode', label: '取样单编号' }, |
| | | { prop: 'createBy', label: '创建人' }, |
| | | { prop: 'createTime', label: '创建时间' } |
| | | ] |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | methods: { |
| | | resetForm() { |
| | | this.form = { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | experimentCode: "", |
| | | experimentName: "", |
| | | projectName: "", |
| | | status: '', |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }; |
| | | this.handleSearch(); |
| | | }, |
| | | handleSearch() { |
| | | // 实现查询逻辑 |
| | | console.log("查询条件:", this.form); |
| | | this.getTableData(); |
| | | async handleSearch() { |
| | | const params = { |
| | | experimentCode: this.form.experimentCode, |
| | | experimentName: this.form.experimentName, |
| | | projectName: this.form.projectName, |
| | | status: this.form.status, |
| | | pageNum: this.form.pageNum, |
| | | pageSize: this.form.pageSize |
| | | }; |
| | | try { |
| | | const res = await getList(params) |
| | | this.tableData = res.data.records || []; |
| | | this.total = res.data.total || 0; |
| | | } catch (error) { |
| | | console.error("查询失败:", error); |
| | | } |
| | | }, |
| | | handleDetail(row) { |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | | '-1': 'info', |
| | | '1': 'warning', |
| | | '2': 'success', |
| | | '3': 'info' |
| | | }; |
| | | return statusMap[status] || 'info'; |
| | | }, |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | '-1': '草稿箱', |
| | | '1': '待提交', |
| | | '2': '已提交', |
| | | '3': '已封存' |
| | | }; |
| | | return statusMap[status] || '未知'; |
| | | }, |
| | | handleDetail(id) { |
| | | this.$router.push({ |
| | | path: "/sampleManage/submission", |
| | | query: { |
| | | id: row.id, |
| | | type: 'view' |
| | | id: id, |
| | | type: 'detail' |
| | | } |
| | | }); |
| | | }, |
| | | handleEdit(id) { |
| | | this.$router.push({ |
| | | path: "/sampleManage/submission", |
| | | query: { |
| | | id: id, |
| | | type: 'edit' |
| | | } |
| | | }); |
| | | }, |
| | | getTableData() { |
| | | // 获取列表数据 |
| | | this.tableData = this.mockListData; |
| | | this.total = this.mockListData.length; |
| | | this.handleSearch(); |
| | | }, |
| | | handlePageChange(pageNum) { |
| | | this.form.pageNum = pageNum; |
| | | this.getTableData(); |
| | | }, |
| | | handleSizeChange(pageSize) { |
| | | this.form.pageSize = pageSize; |
| | | this.getTableData(); |
| | | }, |
| | | getSampleStatus(row) { |
| | | const send = row.sendCount || 0; |
| | | const receive = row.receiveCount || 0; |
| | | const received = row.receivedCount || 0; |
| | | const total = send + receive + received; |
| | | return `${total} / ${send} / ${receive} / ${received}`; |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | .list { |
| | | height: 100%; |
| | | } |
| | | |
| | | .flex { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .tableTitle { |
| | | display: flex; |
| | | padding-bottom: 20px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .title { |
| | | background: #ffffff; |
| | | border-radius: 8px 8px 0px 0px; |