<!-- filename: ProcessBomList.vue author: liubin date: 2023-10-20 15:00:58 description: --> <template> <section class="process-bom"> <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" /> <div class="btns" style=" text-align: right; position: absolute; top: 20px; right: 20px; display: flex; "> <el-button type="primary" plain :disabled="currentDet == null" class="btn-create" icon="el-icon-plus"> 分配设备 </el-button> <el-input icon="el-icon-search" placeholder="搜索" v-model="searchText" style="margin-left: 20px"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input> </div> <!-- 列表 --> <base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list" @emitFun="handleEmitFun"> <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn" @clickBtn="handleTableBtnClick" /> </base-table> <!-- 分页组件 --> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> </section> </template> <script> export default { name: 'ProcessBom', components: {}, props: { currentDet: { type: Object, default: null } }, data() { return { searchBarFormConfig: [{ label: '工序下设备' }], tableProps: [ // { // prop: 'createTime', // label: '添加时间', // fixed: true, // width: 180, // filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), // }, { prop: 'name', label: '设备名称' }, { prop: 'code', label: '物料BOM' }, { prop: 'remark', label: '参数BOM' }, ], list: [], total: 0, tableBtn: [], queryParams: { pageNo: 1, pageSize: 10, }, searchText: '' }; }, watch: { currentDet: { handler(val) { if (val != null) { this.getList(val); } else { this.clearList(); } }, immediate: true, deep: true } }, methods: { handleEmitFun() { }, handleTableBtnClick() { }, put(payload) { return this.http(this.updateUrl, 'put', payload); }, post(payload) { return this.http(this.addUrl, 'post', payload); }, recv(payload) { return this.http(this.pageUrl, 'get', payload); }, info(payload) { return this.http(this.infoUrl, 'get', payload); }, http(url, method, payload) { return this.$axios({ url, method, params: method === 'get' ? payload : null, data: method !== 'get' ? payload : null, }) }, getList({ detId, detName, detDesc, flowId, sectionName } = {}) { console.log('get list') }, getList() { this.list = [ { name: '1', code: 'bomg-1', remark: 'Tochter' }, { name: '2', code: 'bomg-2', remark: 'Bruder' }, { name: '3', code: 'bomg-3', remark: 'Kalt' }, ] }, clearList() { this.list = []; } }, }; </script> <style scoped lang="scss"> .process-bom { position: relative; flex: 1; padding: 12px 20px; background: #fff; border-radius: 8px; } </style>