yudao-dev/src/views/specialEquipment/check/add.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2023-11-25 16:23:13
 * @Description:
-->
<template>
	<el-form
		ref="form"
		:model="dataForm"
		:rules="dataRule"
		@keyup.enter.native="dataFormSubmit()"
		label-width="128px"
		v-loading="formLoading"
		label-position="top">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="巡检单名称" prop="name">
					<el-input v-model="dataForm.name" placeholder="请输入巡检单名称" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="巡检单编码" prop="code">
					<el-input v-model="dataForm.code" placeholder="请输入巡检单编码" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="计划巡检时间" prop="planCheckTime">
					<el-date-picker
						v-model="dataForm.planCheckTime"
						type="datetime"
						:placeholder="`请选择计划巡检时间`"
						value-format="timestamp" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="巡检频率（天/次）" prop="checkPeriod">
					<el-input
						v-model="dataForm.checkPeriod"
						placeholder="请输入巡检频率(天/次)" />
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="部门" prop="departmentId">
					<el-select
						v-model="dataForm.departmentId"
						:placeholder="`请选择部门`">
						<el-option
							v-for="opt in departmentOptions"
							:key="opt.value"
							:label="opt.label"
							:value="opt.value" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="班次" prop="groupClass">
					<el-select
						v-model="dataForm.groupClass"
						filterable
						clearable
						multiple
						style="width: 100%"
						placeholder="请选择班次">
						<el-option
							v-for="d in groupOptions"
							:key="d.value"
							:label="d.label"
							:value="d.label" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="确认时限 (时)" prop="confirmTimeLimit">
					<el-input
						v-model="dataForm.confirmTimeLimit"
						:placeholder="`请输入确认时限`" />
					<!-- <el-date-picker
						v-model="dataForm.confirmTimeLimit"
						type="datetime"
						:placeholder="`请选择确认时限`"
						value-format="timestamp" /> -->
				</el-form-item>
			</el-col>

			<el-col>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import { groupConnectWorkshop } from '@/utils/equipment-module';

export default {
	data() {
		return {
			formLoading: false,
			dataForm: {
				id: null,
				code: null,
				name: null,
				departmentId: null,
				planCheckTime: null,
				confirmTimeLimit: null,
				groupClass: null,
				remark: null,
				// special: true,
			},
			dataRule: {
				confirmTimeLimit: [
					{ required: true, message: '确认时限不能为空', trigger: 'blur' },
					{
						type: 'number',
						message: '请输入正确的数字类型',
						trigger: 'blur',
						transform: (val) => Number(val),
					},
				],
				code: [
					{ required: true, message: '巡检单编码不能为空', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '巡检单名称不能为空', trigger: 'blur' },
				],
				planCheckTime: [
					{ required: true, message: '计划巡检时间不能为空', trigger: 'blur' },
				],
				checkPeriod: [
					{ required: true, message: '巡检频率不能为空', trigger: 'blur' },
					{
						type: 'number',
						message: '请输入正确的数字类型',
						trigger: 'blur',
						transform: (val) => Number(val),
					},
				],
			},
			equipmentOptions: [],
			groupOptions: [],
			departmentOptions: [],
		};
	},
	mounted() {
		this.initOptions();
	},
	methods: {
		reset() {
			this.dataForm = {
				id: null,
				code: null,
				name: null,
				departmentId: null,
				planCheckTime: null,
				confirmTimeLimit: null,
				groupClass: null,
				remark: null,
				checkPeriod: null
				// special: true,
			};
		},

		async initOptions() {
			this.formLoading = true;
			const urls = [
				'/base/core-department/listAll',
				'/base/group-classes/listAll',
				'/base/equipment-check-order/getCode',
			];
			try {
				const [dpt, grp, code] = await Promise.all(
					urls.map((url) => this.$axios(url))
				);
				if (dpt.code == 0) {
					this.departmentOptions = dpt.data.map((item) => ({
						label: item.name,
						value: item.id,
					}));
				}
				if (grp.code == 0) {
					this.groupOptions = grp.data.map((item) => ({
						label: groupConnectWorkshop(item.name, item.roomNameDict),
						value: item.id,
					}));
				}
				if (code.code == 0) {
					this.dataForm.code = code.data;
				}
				this.formLoading = false;
			} catch (err) {
				this.formLoading = false;
				console.error(err);
			}
		},

		async init(row) {
			if (!row || !row.id) {
				this.dataForm.planCheckTime = new Date().setHours(8, 0, 0, 0);
				return;
			}
			const res = await this.$axios({
				url: '/base/equipment-check-order/get?id=' + row.id,
			});
			if (res.code == 0) {
				Object.keys(this.dataForm).forEach((key) => {
					this.dataForm[key] = res.data[key];
					if (key == 'groupClass') {
						this.dataForm.groupClass =
							res.data.groupClass &&
							res.data.groupClass.trim() != '' &&
							res.data.groupClass.split(',');
					}
				});
			}
		},

		async dataFormSubmit() {
			let valid = false;
			try {
				valid = await this.$refs.form.validate();
			} catch (err) {}
			if (!valid) return;
			const res = await this.$axios({
				url:
					'/base/equipment-check-order' +
					(this.dataForm.id ? '/update' : '/create'),
				method: this.dataForm.id ? 'put' : 'post',
				data: {
					...this.dataForm,
					special: true,
					status: 0,
					groupClass: this.dataForm.groupClass.join(','),
				},
			});
			if (res.code == 0) {
				this.$emit('refreshDataList');
				this.$message.success(this.dataForm.id ? '更新成功' : '创建成功');
			}
		},
	},
};
</script>

<style scoped lang="scss">
.el-date-editor,
.el-select {
	width: 100%;
}
</style>