| | |
| | | <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-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-input v-model="form.experimentName" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="创建人:"> |
| | | <el-input v-model="form.creator" placeholder="请输入"></el-input> |
| | | <el-input v-model="form.createBy" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="创建时间:"> |
| | | <el-date-picker |
| | | v-model="form.createTime" |
| | | v-model="form.timeRange" |
| | | 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.planCode" placeholder="请输入"></el-input> |
| | | @change="handleTimeChange"> |
| | | </el-date-picker> |
| | | </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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getList } from './service' |
| | | |
| | | export default { |
| | | name: "ProjectList", |
| | | data() { |
| | | return { |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | experimentCode: "", |
| | | experimentName: "", |
| | | projectName: "", |
| | | createBy: "", |
| | | startTime: "", |
| | | endTime: "", |
| | | timeRange: [], |
| | | 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: "", |
| | | createBy: "", |
| | | startTime: "", |
| | | endTime: "", |
| | | timeRange: [], |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }; |
| | | this.handleSearch(); |
| | | }, |
| | | handleSearch() { |
| | | // 实现查询逻辑 |
| | | console.log("查询条件:", this.form); |
| | | this.getTableData(); |
| | | handleTimeChange(val) { |
| | | if (val) { |
| | | this.form.startTime = val[0]; |
| | | this.form.endTime = val[1]; |
| | | } else { |
| | | this.form.startTime = ""; |
| | | this.form.endTime = ""; |
| | | } |
| | | }, |
| | | handleDetail(row) { |
| | | async handleSearch() { |
| | | const params = { |
| | | experimentCode: this.form.experimentCode, |
| | | experimentName: this.form.experimentName, |
| | | projectName: this.form.projectName, |
| | | createBy: this.form.createBy, |
| | | startTime: this.form.startTime, |
| | | endTime: this.form.endTime, |
| | | 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); |
| | | } |
| | | }, |
| | | 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: "/dataManagement/delivery", |
| | | query: { |
| | | id: row.id, |
| | | type: "view", |
| | | }, |
| | | id: id, |
| | | type: 'detail' |
| | | } |
| | | }); |
| | | }, |
| | | 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> |