yudao-dev/src/views/product&recipe/recipe/index.vue

<!--
 * @Author: zwq
 * @Date: 2023-08-01 14:55:51
 * @LastEditors: zwq
 * @LastEditTime: 2025-11-28 14:34:11
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<el-table
			:data="tableData"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			style="width: 100%"
			ref="dataList">
			<el-table-column type="expand">
				<template slot-scope="scope">
					<product
						:processName="scope.row.processName"
						:processSize="scope.row.processSize"></product>
				</template>
			</el-table-column>
			<el-table-column prop="processName" label="配方型号" />
			<el-table-column prop="processSize" label="配方规格" />
			<el-table-column prop="processDesc" label="配方描述" />
			<el-table-column prop="createTime" label="创建时间" width="150">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						@click="handleClick({ data: { ...scope.row }, type: 'edit' })">
						<span class="iconfont icon-edit primary-color"></span>
					</el-button>
					<el-button
						size="mini"
						type="text"
						@click="handleClick({ data: { ...scope.row }, type: 'delete' })">
						<span class="iconfont icon-delete" style="color: #f56c6c"></span>
					</el-button>
					<el-button
						size="mini"
						type="text"
						@click="handleClick({ data: { ...scope.row }, type: 'detail' })">
						<span class="iconfont icon-detail primary-color"></span>
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
		<add-or-update
			v-if="addOrUpdateVisible"
			ref="addOrUpdate"
			@refreshDataList="getDataList" />
	</div>
</template>

<script>
import AddOrUpdate from './add-or-updata';
import product from './product-mini';
import basicPage from '@/mixins/basic-page';
import { parseTime } from '@/filter/code-filter';
import {
	deleteProcessList,
	getProcessPage,
	getProcessDetailPage,
} from '@/api/ssdl/product&recipe';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getProcessPage,
				deleteURL: deleteProcessList,
			},
			tableBtn: [
				{
					type: 'edit',
					btnName: '编辑',
				},
				{
					type: 'delete',
					btnName: '删除',
				},
				{
					type: 'detail',
					btnName: '详情',
				},
			].filter((v) => v),
			tableData: [],
			formConfig: [
				{
					type: 'input',
					label: '配方型号',
					placeholder: '配方型号',
					param: 'val1',
				},
				{
					type: 'input',
					label: '配方规格',
					placeholder: '配方规格',
					param: 'val2',
				},
				// {
				// 	type: 'input',
				// 	label: '物料型号',
				// 	placeholder: '物料型号',
				// 	param: 'val3',
				// },
				// {
				// 	type: 'input',
				// 	label: '物料编码',
				// 	placeholder: '物料编码',
				// 	param: 'val4',
				// },
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
				// {
				// 	type: 'separate',
				// },
				// {
				// 	type: 'button',
				// 	btnName: '重置',
				// 	name: 'reset',
				// },
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '新增',
					name: 'add',
					color: 'success',
					plain: true,
				},
				// {
				// 	type: 'separate',
				// 	type: this.$auth.hasPermi('base:product:create') ? 'separate' : '',
				// },
				// {
				// 	type: this.$auth.hasPermi('base:product:export') ? 'button' : '',
				// 	btnName: '导出',
				// 	name: 'export',
				// 	color: 'warning',
				// },
			],
		};
	},
	components: {
		AddOrUpdate,
		product,
	},
	created() {},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.listQuery.processName = val.val1 || null;
					this.listQuery.processSize = val.val2 || null;
					// this.listQuery.materialName = val.val3 || null;
					// this.listQuery.materialCode = val.val4 || null;
					this.getDataList();
					break;
				case 'reset':
					this.$refs.searchBarForm.resetForm();
					this.listQuery = {
						pageSize: 20,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '新增';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		otherMethods(val) {
			this.addOrUpdateVisible = true;
			this.addOrEditTitle = '详情';
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(val.data.id, true);
			});
		},
		// 删除
		deleteHandle(id, name, index, data) {
			this.$confirm(
				`是否确认删除${'配方型号为  ' + data.processName + '  '}的数据项?`,
				'系统提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
				.then(() => {
					// 获取物料的属性列表
					getProcessDetailPage({
						processName: data.processName,
						processSize: data.processSize,
						pageSize: 100,
						pageNo: 1,
						total: 1,
					}).then((response) => {
						const ids = response.data.map((i) => i.id);
						this.urlOptions.deleteURL(ids).then(({ data }) => {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.getDataList();
								},
							});
						});
					});
				})
				.catch(() => {});
		},
	},
};
</script>

<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
</style>