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

<!--
 * @Author: lb
 * @Date: 2024-2-23 09:16:25
 * @LastEditors: lb
 * @LastEditTime: 2024-2-23 09:16:25
 * @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>
				<el-form-item label="巡检单名称" prop="name">
					<el-input v-model="dataForm.name" placeholder="请输入巡检单名称" />
				</el-form-item>
			</el-col>
			<el-col>
				<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>
				<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>
				<el-form-item label="巡检人" prop="checkPerson">
					<el-select
						v-model="dataForm.checkPerson"
						:placeholder="`请选择巡检人`"
						multiple
						clearable
						filterable>
						<el-option
							v-for="opt in inspectorOptions"
							:key="opt.value"
							:label="opt.label"
							:value="opt.value" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col>
				<el-form-item label="巡检时间" prop="planCheckTime">
					<el-date-picker
						v-model="dataForm.planCheckTime"
						type="datetime"
						placeholder="请选择计划开始时间"
						value-format="timestamp"></el-date-picker>
				</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 {
	name: 'ContentAdd',
	data() {
		return {
			formLoading: false,
			dataForm: {
				id: null,
				name: null,
				departmentId: null,
				groupClass: [],
				checkPerson: [],
				planCheckTime: null,
				// special: true,
			},
			dataRule: {
				name: [
					{ required: true, message: '巡检单名称不能为空', trigger: 'blur' },
				],
			},
			equipmentOptions: [],
			groupOptions: [],
			departmentOptions: [],
			inspectorOptions: [],
		};
	},
	mounted() {
		this.initOptions();
	},
	methods: {
		reset() {
			this.dataForm = {
				id: null,
				name: null,
				departmentId: null,
				groupClass: [],
				checkPerson: [],
				planCheckTime: null,
				// special: true,
			};
		},

		async initOptions() {
			this.formLoading = true;
			const urls = [
				'/base/core-department/listAll',
				'/base/group-classes/listAll',
			];
			try {
				const [dpt, grp] = 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,
					}));
				}
				/** get user list and worker list */
				let inspectorList = [];
				const userlist = await this.$axios({
					url: '/system/user/page',
					params: { pageNo: 1, pageSize: 100 },
				});
				if (userlist.code == 0) {
					inspectorList = inspectorList.concat(
						(userlist.data?.list || []).map((item) => ({
							label: item.nickname,
							value: item.nickname,
						}))
					);
				}
				const workerlist = await this.$axios('/base/core-worker/listAll');
				if (workerlist.code == 0) {
					inspectorList = inspectorList.concat(
						workerlist.data.map((item) => ({
							label: item.name,
							value: item.name,
						}))
					);
				}
				this.inspectorOptions = inspectorList;
				/** endget */
				this.formLoading = false;
			} catch (err) {
				this.formLoading = false;
				console.error(err);
			}
		},

		async init(row) {
			if (!row || !row.id) {
				/** 新增 */
				this.dataForm.checkPerson = [this.$store.getters.nickname];
				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.split(',');
					}
				});
			}
		},

		getConfirmed() {
			return this.$confirm('是否直接确认保养记录', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			});
		},

		async dataFormSubmit() {
			let valid = false;
			try {
				valid = await this.$refs.form.validate();
			} catch (err) {}
			if (!valid) return;

			// let confirmed = false;
			// try {
			// 	confirmed = await this.getConfirmed();
			// } catch (err) {
			// 	confirmed = false;
			// }
			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: 1,
					// status: confirmed ? 2 : 1,
					groupClass: this.dataForm.groupClass?.join(','),
					checkPerson: this.dataForm.checkPerson?.join(','),
				},
			});
			if (res.code == 0) {
				this.$emit('refreshDataList');
				this.$message.success(this.dataForm.id ? '更新成功' : '创建成功');
				return res.data;
			}
			return null;
		},
	},
};
</script>

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