yudao-dev/src/views/extend/processFlowView/components/ProcessBomList.vue

<!-- 
    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>