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 class="btn-create" icon="el-icon-plus">
				分配设备
			</el-button>
			<el-input
				icon="el-icon-search"
				placeholder="搜索"
				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: {},
	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,
			},
		};
	},
	computed: {},
	methods: {
		handleEmitFun() {},
		handleTableBtnClick() {},
		getList() {},
	},
};
</script>

<style scoped lang="scss">
.process-bom {
	position: relative;
    flex: 1;
	padding: 12px 20px;
	background: #fff;
	border-radius: 8px;
}
</style>