| | |
| | | <template> |
| | | <div> |
| | | <TableCard :showTitle="false"> |
| | | <template slot="form"> |
| | | <div class="action-box"> |
| | | <div></div> |
| | | <div class="flex"> |
| | | <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)"> |
| | | 新建 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" size="small" @click="exportExcel"> |
| | | 导出Excel |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | <div class="flex"> |
| | | <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)"> |
| | | 新建 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" size="small" @click="exportExcel"> |
| | | 导出Excel |
| | | </el-button> |
| | | </div> |
| | | <limsTable :column="columns" :currentChange="rowClick" :height="'25vh'" :highlightCurrentRow="true" |
| | | :isSelection="false" :rowStyle="tableRowStyle" :table-data="tableData" rowKey="id" |
| | | @pagination="pagination" :page="page" style="margin-top: 18px;"> |
| | | <template v-slot:consumablesTypeSlot="{ row }"> |
| | | {{ findType(row.consumablesType) }} |
| | | </template> |
| | | <template v-slot:table> |
| | | <limsTable :column="columns" :currentChange="rowClick" :height="'25vh'" :highlightCurrentRow="true" |
| | | :isSelection="false" :rowStyle="tableRowStyle" :table-data="tableData" rowKey="id" |
| | | style="margin-top: 18px; padding: 0 15px;"> |
| | | <template v-slot:consumablesTypeSlot="{ row }"> |
| | | {{ findType(row.consumablesType) }} |
| | | </template> |
| | | <template v-slot:operation="scope"> |
| | | <el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button> |
| | | <el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button> |
| | | </template> |
| | | </limsTable> |
| | | <div class="pagination"> |
| | | <div></div> |
| | | <el-pagination :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 40]" :total="pagination.total" |
| | | layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrent" @size-change="handleSize"> |
| | | </el-pagination> |
| | | </div> |
| | | <template v-slot:operation="scope"> |
| | | <el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button> |
| | | <el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button> |
| | | </template> |
| | | </TableCard> |
| | | </limsTable> |
| | | <el-divider></el-divider> |
| | | <div> |
| | | <ConsumableProject ref="consumableProject"></ConsumableProject> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import TableCard from './index.vue'; |
| | | import Edit from "./Edit.vue" |
| | | import limsTable from '@/components/Table/lims-table.vue' |
| | | import { |
| | |
| | | |
| | | export default { |
| | | dicts: ["consumables_type"], |
| | | components: { |
| | | TableCard, limsTable, Edit, ConsumableProject |
| | | }, |
| | | components: {limsTable, Edit, ConsumableProject}, |
| | | props: { |
| | | contentsId: { |
| | | type: Number, |
| | |
| | | } |
| | | ], |
| | | tableData: [], |
| | | pagination: { |
| | | page: { |
| | | current: 1, |
| | | pageSize: 20, |
| | | size: 20, |
| | | total: 0 |
| | | }, |
| | | options: [], |
| | |
| | | }, |
| | | methods: { |
| | | async fetchData() { |
| | | procurementSuppliesList({ contentId: this.contentsId }).then(res => { |
| | | procurementSuppliesList({ contentId: this.contentsId, ...this.page }).then(res => { |
| | | if (res.code === 200) { |
| | | this.tableData = res.data.records |
| | | this.page.total = res.data.total |
| | | if (this.tableData.length > 0) { |
| | | this.rowClick(this.tableData[0]) |
| | | } |
| | |
| | | this.$download.saveAs(blob, '耗材列表.xlsx') |
| | | }) |
| | | }, |
| | | handleCurrent() { |
| | | }, |
| | | handleSize() { |
| | | pagination(page) { |
| | | this.page.size = page.limit |
| | | this.fetchData() |
| | | }, |
| | | handleDelete(row) { |
| | | deleteProcurementSuppliesList({ id: row.id }).then(res => { |
| | |
| | | this.$refs.consumableProject.fetchListId(row) |
| | | }, |
| | | tableRowStyle({ row }) { |
| | | if (row.currentAmount <= row.lowerLimit) { |
| | | if(row.currentAmount <= row.lowerLimit) { |
| | | return { background: '#ffcaca' } |
| | | } else { |
| | | return {} |
| | | return { background: '#fff' } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | .flex { |
| | | display: flex; |
| | | } |
| | | |
| | | .action-box { |
| | | width: 100%; |
| | | padding-top: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .pagination { |
| | | padding-top: 15px; |
| | | padding-right: 10px; |
| | | display: flex; |
| | | justify-content: space-between |
| | | text-align: right; |
| | | } |
| | | </style> |