Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-card class="box-card">
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	5	<el-form-item label="文件编号" prop="fileCode">
	6	<el-input
	7	v-model="queryParams.fileCode"
	8	placeholder="请输入文件编号"
	9	clearable
	10	@keyup.enter.native="handleQuery"
	11	/>
	12	</el-form-item>
	13	<el-form-item label="文件名称" prop="fileName">
	14	<el-input
	15	v-model="queryParams.fileName"
	16	placeholder="请输入文件名称"
	17	clearable
	18	@keyup.enter.native="handleQuery"
	19	/>
	20	</el-form-item>
	21	<el-form-item label="文件地址" prop="fileAddress">
	22	<el-input
	23	v-model="queryParams.fileAddress"
	24	placeholder="请输入文件地址"
	25	clearable
	26	@keyup.enter.native="handleQuery"
	27	/>
	28	</el-form-item>
	29	<el-form-item style="float: right">
	30	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	31	<!-- <el-button type="warning" icon="el-icon-copy-document" size="mini" @click="advancedQuery">高级查询</el-button>-->
	32	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	33	</el-form-item>
	34	<el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="advancedShowSearch" label-width="68px">
	35	</el-form>
	36	</el-form>
	37	</el-card>
	38
	39	<el-card style="margin-top: 10px" class="box-card">
	40	<el-row :gutter="10" class="mb8">
	41	<el-col :span="1.5">
	42	<el-button
	43	type="primary"
	44	plain
	45	icon="el-icon-plus"
	46	size="mini"
	47	@click="handleAdd"
	48	v-hasPermi="['bs:processFile:add']"
	49	>新增</el-button>
	50	</el-col>
	51	<el-col :span="1.5">
	52	<el-button
	53	type="success"
	54	plain
	55	icon="el-icon-edit"
	56	size="mini"
	57	:disabled="single"
	58	@click="handleUpdate"
	59	v-hasPermi="['bs:processFile:edit']"
	60	>修改</el-button>
	61	</el-col>
	62	<el-col :span="1.5">
	63	<el-button
	64	type="danger"
	65	plain
	66	icon="el-icon-delete"
	67	size="mini"
	68	:disabled="multiple"
	69	@click="handleDelete"
	70	v-hasPermi="['bs:processFile:remove']"
	71	>删除</el-button>
	72	</el-col>
	73	<el-col :span="1.5">
	74	<el-button
	75	type="warning"
	76	plain
	77	icon="el-icon-download"
	78	size="mini"
	79	@click="handleExport"
	80	v-hasPermi="['bs:processFile:export']"
	81	>导出</el-button>
	82	</el-col>
	83	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	84	</el-row>
	85	<el-table border v-loading="loading" :data="processFileList" @selection-change="handleSelectionChange" v-if="processFileList.length > 0">
	86	<el-table-column type="selection" width="55" align="center" />
	87	<el-table-column label="产品编号" align="center" prop="productCode">
	88	</el-table-column>
	89	<el-table-column label="产品名称" align="center" prop="productName">
	90	</el-table-column>
	91	<el-table-column label="工序编号" align="center" prop="processesCode">
	92	</el-table-column>
	93	<el-table-column label="工序名称" align="center" prop="processesName">
	94	</el-table-column>
	95	<el-table-column label="文件编号" align="center" prop="fileCode">
	96	</el-table-column>
	97	<el-table-column label="文件名称" align="center" prop="fileName">
	98	</el-table-column>
	99	<el-table-column :show-overflow-tooltip='true' width="150" label="文件地址" align="center" prop="fileAddress">
	100	<template slot-scope="scope">
	101	<a :href="scope.row.fileAddress" target="_blank" style="color: #00afff" class="buttonText">{{scope.row.fileAddress}}</a>
	102	</template>
	103	</el-table-column>
	104	<el-table-column label="状态" align="center" prop="status">
	105	<template slot-scope="scope">
	106	<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
	107	</template>
	108	</el-table-column>
	109	<!-- <el-table-column label="创建人" align="center" prop="createUser">-->
	110	<!-- </el-table-column>-->
	111	<!-- <el-table-column label="更新人" align="center" prop="updateUser">-->
	112	<!-- </el-table-column>-->
	113	<el-table-column label="备注" align="center" prop="remarks">
	114	</el-table-column>
	115	<el-table-column fixed="right" width="300" label="操作" align="center" class-name="small-padding fixed-width">
	116	<template slot-scope="scope">
	117	<el-button
	118	size="mini"
	119	type="success"
	120	plain
	121	style="width: 72px"
	122	icon="el-icon-edit"
	123	@click="handleUpdate(scope.row)"
	124	v-hasPermi="['bs:processFile:edit']"
	125	>修改</el-button>
	126	<el-button
	127	size="mini"
	128	type="danger"
	129	plain
	130	style="width: 72px"
	131	icon="el-icon-delete"
	132	@click="handleDelete(scope.row)"
	133	v-hasPermi="['bs:processFile:remove']"
	134	>删除</el-button>
	135	<el-button
	136	size="mini"
	137	plain
	138	type="warning"
	139	style="width: 72px"
	140	icon="el-icon-download"
	141	@click="handleDownload(scope.row)"
	142	>下载</el-button>
	143	</template>
	144	</el-table-column>
	145	</el-table>
	146	<el-empty v-else>
	147	<span slot="description">暂无数据</span>
	148	</el-empty>
	149	</el-card>
	150
	151	<pagination
	152	v-show="total>0"
	153	:total="total"
	154	:page.sync="queryParams.pageNum"
	155	:limit.sync="queryParams.pageSize"
	156	@pagination="getList"
	157	/>
	158
	159	<!-- 添加或修改工艺文档对话框 -->
	160	<el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
	161	<span slot="title">
	162	<i class="el-icon-s-order"></i>
	163	{{titleName}}
	164	</span>
	165	<el-form ref="form" :model="form" :rules="rules" label-width="80px">
	166	<el-form-item label="产品编号" prop="productCode">
	167	<el-input v-model="form.productCode" placeholder="请选择产品" >
	168	<el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button>
	169	</el-input>
	170	<ItemSelect ref="itemSelect" @onSelected="onItemSelected" > </ItemSelect>
	171	</el-form-item>
	172	<el-form-item label="产品名称" prop="productName">
	173	<el-input disabled v-model="form.productName" placeholder="请输入产品名称" />
	174	</el-form-item>
	175	<el-form-item label="工序编号" prop="processesCode">
	176	<el-select style="width: 100%" @change="handleSelectChangeprocessesCode(form.processesCode)" v-model="form.processesCode" placeholder="请选择工序编号">
	177	<el-option
	178	v-for="item in options"
	179	:key="item.index"
	180	:label="item.processesName"
	181	:value="item.processesCode">
	182	</el-option>
	183	</el-select>
	184	</el-form-item>
	185	<el-form-item label="工序名称" prop="processesName">
	186	<el-input disabled v-model="form.processesName" placeholder="请输入工序名称" />
	187	</el-form-item>
	188	<!-- <el-form-item label="文件编号" prop="fileCode">-->
	189	<!-- <el-input v-model="form.fileCode" placeholder="请输入文件编号" />-->
	190	<!-- </el-form-item>-->
	191	<el-form-item label="文件名称" prop="fileName">
	192	<el-input v-model="form.fileName" disabled placeholder="请输入文件名称" />
	193	</el-form-item>
	194	<el-form-item label="文件地址" prop="fileAddress">
	195	<!-- <el-input v-model="form.fileAddress" placeholder="请输入文件地址" />-->
	196	<el-upload
	197	ref="upload"
	198	:limit="1"
	199	accept=".doc, .docx"
	200	:action="upload.url"
	201	:headers="upload.headers"
	202	:on-remove="removes"
	203	:file-list="upload.fileList"
	204	:on-progress="handleFileUploadProgress"
	205	:on-success="handleFileSuccess"
	206	:auto-upload="false">
	207	<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
	208	<el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
	209	<div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过10MB</div>
	210	</el-upload>
	211	</el-form-item>
	212
	213	<el-form-item label="状态" prop="status">
	214	<el-radio-group v-model="form.status">
	215	<el-radio
	216	v-for="dict in dict.type.sys_normal_disable"
	217	:key="dict.value"
	218	:label="dict.value"
	219	>{{dict.label}}</el-radio>
	220	</el-radio-group>
	221	</el-form-item>
	222	<el-form-item label="备注" prop="remarks">
	223	<el-input v-model="form.remarks" placeholder="请输入备注" />
	224	</el-form-item>
	225	</el-form>
	226	<div slot="footer" class="dialog-footer">
	227	<el-button type="primary" @click="submitForm">确定</el-button>
	228	<el-button @click="cancel">取消</el-button>
	229	</div>
	230	</el-dialog>
	231	</div>
	232	</template>
	233
	234	<script>
	235	import { getToken } from "@/utils/auth";
	236	import { listProcessFile, getProcessFile, delProcessFile, addProcessFile, updateProcessFile } from "@/api/main/bs/processFile/processFile";
	237	import {listProductBom} from "@/api/main/bs/ProductBom/ProductBom";
	238	import {listProcesses} from "@/api/main/bs/processes/processes";
	239	import ItemSelect from "@/components/itemSelect/single.vue";
	240	import {listTechnologyRoute} from "@/api/main/bs/technologyRoute/technologyRoute";
	241
	242
	243	export default {
	244	name: "ProcessFile",
	245	components: {ItemSelect},
	246	dicts: ['sys_normal_disable'],
	247	data() {
	248	return {
	249	// 上传参数
	250	upload: {
	251	// 是否禁用上传
	252	isUploading: false,
	253	// 设置上传的请求头部
	254	headers: { Authorization: "Bearer " + getToken() },
	255	// 上传的地址
	256	url: process.env.VUE_APP_BASE_API + "/common/upload",
	257	// 上传的文件列表
	258	fileList: []
	259	},
	260	// 遮罩层
	261	loading: true,
	262	titleName: "",
	263	// 选中数组
	264	ids: [],
	265	options: [],
	266	// 非单个禁用
	267	single: true,
	268	// 非多个禁用
	269	multiple: true,
	270	// 显示搜索条件
	271	showSearch: true,
	272	// 总条数
	273	total: 0,
	274	// 工艺文档表格数据
	275	processFileList: [],
	276	// 弹出层标题
	277	title: "",
	278	// 是否显示弹出层
	279	open: false,
	280	advancedShowSearch: false,
	281	// 查询参数
	282	queryParams: {
	283	pageNum: 1,
	284	pageSize: 10,
	285	productCode: null,
	286	productName: null,
	287	processesCode: null,
	288	processesName: null,
	289	fileCode: null,
	290	fileName: null,
	291	fileAddress: null,
	292	status: null,
	293	createUser: null,
	294	updateUser: null,
	295	remarks: null
	296	},
	297	productCodeQueryParams:{
	298	pageNum: 1,
	299	pageSize: 10,
	300	productCode: null,
	301	},
	302	processesCodeQueryParams:{
	303	pageNum: 1,
	304	pageSize: 10,
	305	processesCodes: null,
	306	},
	307	// 表单参数
	308	form: {},
	309	// 表单校验
	310	rules: {
	311	id: [
	312	{ required: true, message: "id不能为空", trigger: "blur" }
	313	],
	314	productCode: [
	315	{ required: true, message: "产品编号不能为空", trigger: "blur" }
	316	],
	317	processesCode: [
	318	{ required: true, message: "工序编号不能为空", trigger: "blur" }
	319	],
	320	}
	321	};
	322	},
	323	created() {
	324	this.getList();
	325	this.initProcesses();
	326	},
	327	methods: {
	328	// 文件下载处理
	329	handleDownload(row) {
	330	var name = row.fileName;
	331	var url = row.fileAddress;
	332	var suffix = url.substring(url.lastIndexOf("."), url.length);
	333	const a = document.createElement('a')
	334	a.setAttribute('download', name + suffix)
	335	a.setAttribute('target', '_blank')
	336	a.setAttribute('href', url)
	337	a.click()
	338	},
	339	// 文件提交处理
	340	submitUpload() {
	341	this.$refs.upload.submit();
	342	},
	343	// 文件上传中处理
	344	handleFileUploadProgress(event, file, fileList) {
	345	this.upload.isUploading = true;
	346	},
	347	// 文件上传成功处理
	348	handleFileSuccess(response, file, fileList) {
	349	console.log(response)
	350	this.upload.isUploading = false;
	351	this.form.fileAddress = response.url;
	352	this.form.fileName = response.originalFilename;
	353	this.$modal.msgSuccess(response.msg);
	354	},
	355	handleSelectChangeprocessesCode(selectedOption) {
	356	this.processesCodeQueryParams.processesCodes = selectedOption;
	357	listProcesses(this.queryParams).then(response => {
	358	this.form.processesName = response.rows[0].processesName;
	359	});
	360	},
	361	initProcesses(){
	362	listProcesses(this.queryParams).then(response => {
	363	this.options = response.rows;
	364	});
	365	},
	366	//物料选择弹出框
	367	onItemSelected(obj){
	368	if(obj !== undefined && obj !== null){
	369	let productCode = obj.materialCode;
	370	this.form.productCode = productCode;
	371	this.form.productName = obj.materialName;
	372	this.queryParams.productCode = productCode
	373	listTechnologyRoute(this.queryParams).then(response => {
	374	this.form.routeCode = response.rows[0].routeCode;
	375	});
	376	listProductBom(this.queryParams).then(response => {
	377	this.form.bomCode = response.rows[0].bomCode;
	378	});
	379	}
	380	},
	381	handleSelectProduct(){
	382	this.$refs.itemSelect.showFlag = true;
	383	},
	384
	385	advancedQuery(){
	386	this.advancedShowSearch = (this.advancedShowSearch) ? this.advancedShowSearch = false : this.advancedShowSearch = true;
	387	},
	388	/** 查询工艺文档列表 */
	389	getList() {
	390	this.loading = true;
	391	listProcessFile(this.queryParams).then(response => {
	392	this.processFileList = response.rows;
	393	this.total = response.total;
	394	this.loading = false;
	395	});
	396	},
	397	// 取消按钮
	398	cancel() {
	399	this.open = false;
	400	this.reset();
	401	},
	402	// 表单重置
	403	reset() {
	404	this.form = {
	405	id: null,
	406	productCode: null,
	407	productName: null,
	408	processesCode: null,
	409	processesName: null,
	410	fileCode: null,
	411	fileName: null,
	412	fileAddress: null,
	413	status: "0",
	414	createUser: null,
	415	createTime: null,
	416	updateUser: null,
	417	updateTime: null,
	418	spareField1: null,
	419	spareField2: null,
	420	spareField3: null,
	421	spareField4: null,
	422	remarks: null
	423	};
	424	this.resetForm("form");
	425	},
	426	/** 搜索按钮操作 */
	427	handleQuery() {
	428	this.queryParams.pageNum = 1;
	429	this.getList();
	430	},
	431	/** 重置按钮操作 */
	432	resetQuery() {
	433	this.resetForm("queryForm");
	434	this.handleQuery();
	435	},
	436	// 多选框选中数据
	437	handleSelectionChange(selection) {
	438	this.ids = selection.map(item => item.id)
	439	this.single = selection.length!==1
	440	this.multiple = !selection.length
	441	},
	442	/** 新增按钮操作 */
	443	handleAdd() {
	444	this.upload.fileList = [];
	445	this.reset();
	446	this.open = true;
	447	this.titleName = "添加工艺文档";
	448	},
	449	/** 修改按钮操作 */
	450	handleUpdate(row) {
	451	this.upload.fileList = [];
	452	if(row.fileAddress !== ""){
	453	this.upload.fileList = [{ name: row.fileName, url: row.fileAddress }];
	454	}
	455	// this.upload.fileList = [{ name: row.fileName, url: row.fileAddress }];
	456	this.reset();
	457	const id = row.id \|\| this.ids
	458	getProcessFile(id).then(response => {
	459	this.form = response.data;
	460	this.open = true;
	461	this.titleName = "修改工艺文档";
	462	});
	463	},
	464	/** 提交按钮 */
	465	submitForm() {
	466	this.$refs["form"].validate(valid => {
	467	if (valid) {
	468	if (this.form.id != null) {
	469	updateProcessFile(this.form).then(response => {
	470	this.$modal.msgSuccess("修改成功");
	471	this.open = false;
	472	this.getList();
	473	});
	474	} else {
	475	addProcessFile(this.form).then(response => {
	476	this.$modal.msgSuccess("新增成功");
	477	this.open = false;
	478	this.getList();
	479	});
	480	}
	481	}
	482	});
	483	},
	484	removes(){
	485	this.form.fileAddress = '';
	486	this.form.fileName = '';
	487	},
	488	/** 删除按钮操作 */
	489	handleDelete(row) {
	490	const ids = row.id \|\| this.ids;
	491	this.$modal.confirm('是否确认删除工艺文档编号为"' + ids + '"的数据项？').then(function() {
	492	return delProcessFile(ids);
	493	}).then(() => {
	494	this.getList();
	495	this.$modal.msgSuccess("删除成功");
	496	}).catch(() => {});
	497	},
	498	/** 导出按钮操作 */
	499	handleExport() {
	500	this.download('bs/processFile/export', {
	501	...this.queryParams
	502	}, `processFile_${new Date().getTime()}.xlsx`)
	503	}
	504	}
	505	};
	506	</script>