yudao-dev/src/views/equipment/base/inspection/Settings/add.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2024-04-22 14:56:03
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="150px">
		<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="departmentId"
					:rules="[{ required: false, message: '请选择部门', trigger: 'blur' }]">
					<el-select
						v-model="dataForm.departmentId"
						:placeholder="`请选择部门`"
						style="width: 100%">
						<el-option
							v-for="opt in departmentOptions"
							:key="opt.id"
							:label="opt.name"
							:value="opt.id" />
					</el-select>
				</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"
						:default-time="'8:00:00'"
						style="width: 100%" />
				</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="confirmTimeLimit">
					<el-input
						v-model="dataForm.confirmTimeLimit"
						:placeholder="`请输入确认时限`" />
				</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.id"
							:label="d.label"
							:value="d.label" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<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 basicAdd from '../../../../core/mixins/basic-add';
import {
	getCheckOrder,
	getOrderCode,
	createCheckOrder,
	updateCheckOrder,
} from '@/api/equipment/base/inspection/settings';
import { getDepartmentList } from '@/api/base/coreDepartment';
import { groupClassesListAll } from '@/api/monitoring/teamProduction';
import { getDictDataLabel } from '@/utils/dict';
// import { getEquipmentAll } from '@/api/base/equipment'

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getOrderCode,
				createURL: createCheckOrder,
				updateURL: updateCheckOrder,
				infoURL: getCheckOrder,
			},
			dataForm: {
				id: null,
				code: null,
				name: null,
				departmentId: null,
				planCheckTime: null,
				confirmTimeLimit: null,
				groupClass: null,
				remark: null,
				checkPeriod: null
			},
			groupOptions: [],
			departmentOptions: [],
			dataRule: {
				confirmTimeLimit: [
					{ required: true, message: '确认时限不能为空', trigger: 'blur' },
				],
				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),
					}
				]
      }
		};
	},
	created() {
		const currenttime = new Date();
		this.dataForm.planCheckTime = new Date(
			currenttime.getFullYear(),
			currenttime.getMonth(),
			currenttime.getDate(),
			8,
			0,
			0
		).getTime();
	},
	mounted() {
		this.getDict();
	},
	methods: {
		init(id) {
			this.dataForm.id = id || '';
			this.visible = true;
			if (this.urlOptions.getOption) {
				this.getArr();
			}
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				if (this.dataForm.id) {
					this.urlOptions.infoURL(id).then((response) => {
						this.dataForm = response.data;
						if (response.data?.groupClass === '') {
							this.dataForm.groupClass = [];
						} else {
							this.dataForm.groupClass =
								response.data?.groupClass?.split(',') || undefined;
						}
					});
				} else {
					if (this.urlOptions.isGetCode) {
						this.getCode();
					}
				}
			});
		},
		async getDict() {
			// 部门列表
			const res = await getDepartmentList();
			this.departmentOptions = res.data || [];
			const res1 = await groupClassesListAll();
			this.groupOptions =
				res1.data.map((item) => {
					item.label =
						item.name + ' - ' + getDictDataLabel('workshop', item.roomNameDict);
					return item;
				}) || [];
			// const res = await getEquipmentAll()
			// this.eqList = res.data
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				// 修改的提交
				if (this.dataForm.id) {
					this.urlOptions
						.updateURL({
							...this.dataForm,
							special: false,
							status: 0,
							groupClass: this.dataForm.groupClass?.join(','),
						})
						.then((response) => {
							this.$modal.msgSuccess('修改成功');
							this.visible = false;
							this.$emit('refreshDataList');
						});
					return;
				}
				// 添加的提交
				this.urlOptions
					.createURL({
						...this.dataForm,
						special: false,
						status: 0,
						groupClass: this.dataForm.groupClass?.join(','),
					})
					.then((response) => {
						this.$modal.msgSuccess('新增成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
			});
		},
	},
};
</script>