Jcdm042-Mes.git

懒羊羊

2024-03-09 38b15031cc02a746bef74993da828ec441b040d5

提交 \| 用户 \| 时间
38b150	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="itemsCode">
	6	<el-input
	7	v-model="queryParams.itemsCode"
	8	placeholder="请输入项目编号"
	9	clearable
	10	@keyup.enter.native="handleQuery"
	11	/>
	12	</el-form-item>
	13	<el-form-item label="项目名称" prop="itemsName">
	14	<el-input
	15	v-model="queryParams.itemsName"
	16	placeholder="请输入项目名称"
	17	clearable
	18	@keyup.enter.native="handleQuery"
	19	/>
	20	</el-form-item>
	21	<!-- <el-form-item label="项目类型" prop="itemsType">-->
	22	<!-- <el-select v-model="queryParams.itemsType" placeholder="请选择项目类型" clearable>-->
	23	<!-- <el-option-->
	24	<!-- v-for="dict in dict.type.${dictType}"-->
	25	<!-- :key="dict.value"-->
	26	<!-- :label="dict.label"-->
	27	<!-- :value="dict.value"-->
	28	<!-- />-->
	29	<!-- </el-select>-->
	30	<!-- </el-form-item>-->
	31	<!-- <el-form-item label="是否启用" prop="status">-->
	32	<!-- <el-select v-model="queryParams.status" placeholder="请选择是否启用" clearable>-->
	33	<!-- <el-option-->
	34	<!-- v-for="dict in dict.type.${dictType}"-->
	35	<!-- :key="dict.value"-->
	36	<!-- :label="dict.label"-->
	37	<!-- :value="dict.value"-->
	38	<!-- />-->
	39	<!-- </el-select>-->
	40	<!-- </el-form-item>-->
	41	<el-form-item style="float: right">
	42	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	43	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	44	</el-form-item>
	45	</el-form>
	46	</el-card>
	47
	48	<el-card style="margin-top: 10px" class="box-card">
	49	<el-row :gutter="10" class="mb8">
	50	<el-col :span="1.5">
	51	<el-button
	52	type="primary"
	53	plain
	54	icon="el-icon-plus"
	55	size="mini"
	56	@click="handleAdd"
	57	v-hasPermi="['em:inspectionItems:add']"
	58	>新增</el-button>
	59	</el-col>
	60	<el-col :span="1.5">
	61	<el-button
	62	type="success"
	63	plain
	64	icon="el-icon-edit"
	65	size="mini"
	66	:disabled="single"
	67	@click="handleUpdate"
	68	v-hasPermi="['em:inspectionItems:edit']"
	69	>修改</el-button>
	70	</el-col>
	71	<el-col :span="1.5">
	72	<el-button
	73	type="danger"
	74	plain
	75	icon="el-icon-delete"
	76	size="mini"
	77	:disabled="multiple"
	78	@click="handleDelete"
	79	v-hasPermi="['em:inspectionItems:remove']"
	80	>删除</el-button>
	81	</el-col>
	82	<el-col :span="1.5">
	83	<el-button
	84	type="warning"
	85	plain
	86	icon="el-icon-download"
	87	size="mini"
	88	@click="handleExport"
	89	v-hasPermi="['em:inspectionItems:export']"
	90	>导出</el-button>
	91	</el-col>
	92	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	93	</el-row>
	94
	95	<el-table border v-loading="loading" :data="inspectionItemsList" @selection-change="handleSelectionChange">
	96	<el-table-column type="selection" width="55" align="center" />
	97	<el-table-column label="ID" align="center" prop="id" />
	98	<el-table-column label="项目编号" align="center" prop="itemsCode">
	99	</el-table-column>
	100	<el-table-column label="项目名称" align="center" prop="itemsName">
	101	</el-table-column>
	102	<el-table-column label="项目类型" align="center" prop="itemsType">
	103	</el-table-column>
	104	<el-table-column label="是否启用" align="center" prop="status">
	105	</el-table-column>
	106	<el-table-column label="标准" align="center" prop="standard">
	107	</el-table-column>
	108	<el-table-column label="项目内容" align="center" prop="itemsContent">
	109	</el-table-column>
	110	<el-table-column label="备注" align="center" prop="remark">
	111	</el-table-column>
	112	<el-table-column label="创建人" align="center" prop="createUser">
	113	</el-table-column>
	114	<el-table-column label="创建时间" align="center" prop="createTime">
	115	</el-table-column>
	116	<el-table-column label="更新人" align="center" prop="updateUser">
	117	</el-table-column>
	118	<el-table-column label="更新时间" align="center" prop="updateTime">
	119	</el-table-column>
	120	<el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
	121	<template slot-scope="scope">
	122	<el-button
	123	size="mini"
	124	type="success"
	125	plain
	126	style="width: 72px"
	127	icon="el-icon-edit"
	128	@click="handleUpdate(scope.row)"
	129	v-hasPermi="['em:inspectionItems:edit']"
	130	>修改</el-button>
	131	<el-button
	132	size="mini"
	133	type="danger"
	134	plain
	135	style="width: 72px"
	136	icon="el-icon-delete"
	137	@click="handleDelete(scope.row)"
	138	v-hasPermi="['em:inspectionItems:remove']"
	139	>删除</el-button>
	140	</template>
	141	</el-table-column>
	142	</el-table>
	143	</el-card>
	144
	145	<pagination
	146	v-show="total>0"
	147	:total="total"
	148	:page.sync="queryParams.pageNum"
	149	:limit.sync="queryParams.pageSize"
	150	@pagination="getList"
	151	/>
	152
	153	<!-- 添加或修改点检保养项目对话框 -->
	154	<el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
	155	<span slot="title">
	156	<i class="el-icon-s-order"></i>
	157	{{titleName}}
	158	</span>
	159	<el-form ref="form" :model="form" :rules="rules" label-width="80px">
	160	<el-form-item label="项目编号" prop="itemsCode">
	161	<el-input v-model="form.itemsCode" placeholder="请输入项目编号" />
	162	</el-form-item>
	163	<el-form-item label="项目名称" prop="itemsName">
	164	<el-input v-model="form.itemsName" placeholder="请输入项目名称" />
	165	</el-form-item>
	166	<el-form-item label="项目类型" prop="itemsType">
	167	<!-- <el-select v-model="form.itemsType" placeholder="请选择项目类型">-->
	168	<!-- <el-option-->
	169	<!-- v-for="dict in dict.type.${dictType}"-->
	170	<!-- :key="dict.value"-->
	171	<!-- :label="dict.label"-->
	172	<!-- :value="dict.value"-->
	173	<!-- ></el-option>-->
	174	<!-- </el-select>-->
	175	</el-form-item>
	176	<el-form-item label="是否启用" prop="status">
	177	<!-- <el-radio-group v-model="form.status">-->
	178	<!-- <el-radio-->
	179	<!-- v-for="dict in dict.type.${dictType}"-->
	180	<!-- :key="dict.value"-->
	181	<!-- :label="dict.value"-->
	182	<!-- >{{dict.label}}</el-radio>-->
	183	<!-- </el-radio-group>-->
	184	</el-form-item>
	185	<el-form-item label="标准" prop="standard">
	186	<el-input v-model="form.standard" placeholder="请输入标准" />
	187	</el-form-item>
	188	<el-form-item label="项目内容">
	189	<editor v-model="form.itemsContent" :min-height="192"/>
	190	</el-form-item>
	191	<el-form-item label="备注" prop="remark">
	192	<el-input v-model="form.remark" placeholder="请输入备注" />
	193	</el-form-item>
	194	</el-form>
	195	<div slot="footer" class="dialog-footer">
	196	<el-button type="primary" @click="submitForm">确定</el-button>
	197	<el-button @click="cancel">取消</el-button>
	198	</div>
	199	</el-dialog>
	200	</div>
	201	</template>
	202
	203	<script>
	204	import { listInspectionItems, getInspectionItems, delInspectionItems, addInspectionItems, updateInspectionItems } from "@/api/main/em/inspectionItems/inspectionItems";
	205
	206	export default {
	207	name: "InspectionItems",
	208	data() {
	209	return {
	210	// 遮罩层
	211	loading: true,
	212	titleName: "",
	213	// 选中数组
	214	ids: [],
	215	// 非单个禁用
	216	single: true,
	217	// 非多个禁用
	218	multiple: true,
	219	// 显示搜索条件
	220	showSearch: true,
	221	// 总条数
	222	total: 0,
	223	// 点检保养项目表格数据
	224	inspectionItemsList: [],
	225	// 弹出层标题
	226	title: "",
	227	// 是否显示弹出层
	228	open: false,
	229	// 查询参数
	230	queryParams: {
	231	pageNum: 1,
	232	pageSize: 10,
	233	itemsCode: null,
	234	itemsName: null,
	235	itemsType: null,
	236	status: null,
	237	},
	238	// 表单参数
	239	form: {},
	240	// 表单校验
	241	rules: {
	242	id: [
	243	{ required: true, message: "ID不能为空", trigger: "blur" }
	244	],
	245	}
	246	};
	247	},
	248	created() {
	249	this.getList();
	250	},
	251	methods: {
	252	/** 查询点检保养项目列表 */
	253	getList() {
	254	this.loading = true;
	255	listInspectionItems(this.queryParams).then(response => {
	256	this.inspectionItemsList = response.rows;
	257	this.total = response.total;
	258	this.loading = false;
	259	});
	260	},
	261	// 取消按钮
	262	cancel() {
	263	this.open = false;
	264	this.reset();
	265	},
	266	// 表单重置
	267	reset() {
	268	this.form = {
	269	id: null,
	270	itemsCode: null,
	271	itemsName: null,
	272	itemsType: null,
	273	status: null,
	274	standard: null,
	275	itemsContent: null,
	276	remark: null,
	277	createUser: null,
	278	createTime: null,
	279	updateUser: null,
	280	updateTime: null,
	281	spareField1: null,
	282	spareField2: null
	283	};
	284	this.resetForm("form");
	285	},
	286	/** 搜索按钮操作 */
	287	handleQuery() {
	288	this.queryParams.pageNum = 1;
	289	this.getList();
	290	},
	291	/** 重置按钮操作 */
	292	resetQuery() {
	293	this.resetForm("queryForm");
	294	this.handleQuery();
	295	},
	296	// 多选框选中数据
	297	handleSelectionChange(selection) {
	298	this.ids = selection.map(item => item.id)
	299	this.single = selection.length!==1
	300	this.multiple = !selection.length
	301	},
	302	/** 新增按钮操作 */
	303	handleAdd() {
	304	this.reset();
	305	this.open = true;
	306	this.titleName = "添加点检保养项目";
	307	},
	308	/** 修改按钮操作 */
	309	handleUpdate(row) {
	310	this.reset();
	311	const id = row.id \|\| this.ids
	312	getInspectionItems(id).then(response => {
	313	this.form = response.data;
	314	this.open = true;
	315	this.titleName = "修改点检保养项目";
	316	});
	317	},
	318	/** 提交按钮 */
	319	submitForm() {
	320	this.$refs["form"].validate(valid => {
	321	if (valid) {
	322	if (this.form.id != null) {
	323	updateInspectionItems(this.form).then(response => {
	324	this.$modal.msgSuccess("修改成功");
	325	this.open = false;
	326	this.getList();
	327	});
	328	} else {
	329	addInspectionItems(this.form).then(response => {
	330	this.$modal.msgSuccess("新增成功");
	331	this.open = false;
	332	this.getList();
	333	});
	334	}
	335	}
	336	});
	337	},
	338	/** 删除按钮操作 */
	339	handleDelete(row) {
	340	const ids = row.id \|\| this.ids;
	341	this.$modal.confirm('是否确认删除点检保养项目编号为"' + ids + '"的数据项？').then(function() {
	342	return delInspectionItems(ids);
	343	}).then(() => {
	344	this.getList();
	345	this.$modal.msgSuccess("删除成功");
	346	}).catch(() => {});
	347	},
	348	/** 导出按钮操作 */
	349	handleExport() {
	350	this.download('em/inspectionItems/export', {
	351	...this.queryParams
	352	}, `inspectionItems_${new Date().getTime()}.xlsx`)
	353	}
	354	}
	355	};
	356	</script>