| | |
| | | <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"> |
| | | 添加项目 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" size="small" @click="exportExcel"> |
| | | 导出 |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | <div class="flex"> |
| | | <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog"> |
| | | 添加项目 |
| | | </el-button> |
| | | <!-- <el-button icon="el-icon-upload2" size="small" @click="exportExcel">--> |
| | | <!-- 导出--> |
| | | <!-- </el-button>--> |
| | | </div> |
| | | <limsTable |
| | | :column="columns" |
| | | :height="'25vh'" |
| | | :isSelection="true" |
| | | :table-data="tableData" |
| | | @pagination="pagination" |
| | | :page="page" |
| | | style="margin-top: 18px;" |
| | | > |
| | | <template v-slot:operation="scope"> |
| | | <el-button size="small" type="text" @click="deleteData(scope.row)">删除</el-button> |
| | | </template> |
| | | <template v-slot:table> |
| | | <limsTable |
| | | :column="columns" |
| | | :height="'25vh'" |
| | | :isSelection="true" |
| | | :table-data="tableData" |
| | | style="margin-top: 18px; padding: 0 15px;" |
| | | > |
| | | <template v-slot:operation="scope"> |
| | | <el-button size="small" type="text" @click="deleteData(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> |
| | | </TableCard> |
| | | </limsTable> |
| | | <AddProject ref="AddProjectRef" @submit="fetchData"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import TableCard from './index.vue'; |
| | | import limsTable from '@/components/Table/lims-table.vue' |
| | | import Edit from "./Edit.vue" |
| | | import AddProject from './AddProject.vue'; |
| | |
| | | } from "@/api/cnas/externalService/serviceAndSupplyPro/serviceAndSupplyPro"; |
| | | |
| | | export default { |
| | | components: { |
| | | TableCard, limsTable, Edit, AddProject |
| | | }, |
| | | components: {limsTable, Edit, AddProject}, |
| | | data() { |
| | | return { |
| | | columns: [ |
| | |
| | | } |
| | | ], |
| | | tableData: [], |
| | | pagination: { |
| | | page: { |
| | | current: 1, |
| | | pageSize: 20, |
| | | size: 20, |
| | | total: 0 |
| | | }, |
| | | listId: 0, |
| | |
| | | async fetchData() { |
| | | if (this.listId === 0) return |
| | | procurementSuppliesExpendlist({ |
| | | procurementSuppliesListId:this.listId |
| | | procurementSuppliesListId:this.listId, |
| | | ...this.page |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | this.tableData = res.data |
| | | } |
| | | }) |
| | | }, |
| | | pagination (page) { |
| | | this.page.size = page.limit |
| | | this.fetchData() |
| | | }, |
| | | showDialog() { |
| | | this.$refs.AddProjectRef.openDialog(this.row); |
| | |
| | | } |
| | | }) |
| | | }, |
| | | handleCurrent() { |
| | | }, |
| | | handleSize() { |
| | | }, |
| | | exportExcel() { |
| | | } |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | .flex { |
| | | display: flex; |
| | | } |
| | | |
| | | .action-box { |
| | | width: 100%; |
| | | padding-top: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | text-align: right; |
| | | } |
| | | |
| | | .pagination { |