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
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="80px">
		<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="equipmentCategory"
					:rules="[
						{ required: true, message: '请选择设备大类', trigger: 'blur' },
					]">
					<el-select
						v-model="dataForm.equipmentCategory"
						:placeholder="`请选择设备大类`"
						@change="handleEqTypeChange">
						<el-option
							v-for="opt in equipmentTypeOptions"
							: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="equipmentId">
					<el-select
						v-model="dataForm.equipmentId"
						filterable
						style="width: 100%"
						placeholder="请选择设备名称"
						@change="setCode">
						<el-option
							v-for="d in equipmentOptions"
							:key="d.value"
							:label="d.label"
							:value="d.value" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="设备编码" prop="equipmentCode">
					<el-input
						v-model="dataForm.equipmentCode"
						disabled
						placeholder="请输入设备编码" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import {
	getEqCheck,
	getCode,
	createCheckConfig,
	updateCheckConfig,
} from '@/api/equipment/base/inspection/settings';
import { getEquipmentAll } from '@/api/base/equipment';

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getCode,
				createURL: createCheckConfig,
				updateURL: updateCheckConfig,
				infoURL: getEqCheck,
			},
			dataForm: {
				id: undefined,
				code: undefined,
				name: undefined,
				equipmentId: undefined,
				equipmentCode: undefined,
				equipmentCategory: undefined,
			},
			eqList: [],
			dataRule: {
				equipmentId: [
					{ required: true, message: '设备不能为空', trigger: 'blur' },
				],
				code: [
					{ required: true, message: '配置编码不能为空', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '配置名称不能为空', trigger: 'blur' },
				],
			},
			equipmentOptions: [],
			equipmentTypeOptions: [
				{ label: '安全设备', value: 1 },
				{ label: '消防设备', value: 2 },
				{ label: '特种设备', value: 3 },
			],
		};
	},
	mounted() {
		this.getDict();
	},
	methods: {
		async getDict() {
			// 设备列表
			const res = await getEquipmentAll();
			this.eqList = res.data;
			this.$nextTick(() => {
				this.handleEqTypeChange();
			});
		},
		setCode() {
			const chooseM = this.eqList.filter((item) => {
				return item.id === this.dataForm.equipmentId;
			});
			this.dataForm.equipmentCode = chooseM[0].code;
		},
		// handlers
		handleEqTypeChange(type) {
			this.dataForm.equipmentId = null;
			this.dataForm.equipmentCode = null;
			if (type) {
				this.equipmentOptions = this.eqList
					.filter((item) => item.special)
					.filter((item) => item.specialType === type)
					.map((item) => ({ label: item.name, value: item.id }));
			} else
				this.equipmentOptions = this.eqList
					.filter((item) => item.special)
					.map((item) => ({
						label: item.name,
						value: item.id,
					}));
			// this.$emit('update', this.form)
		},
	},
};
</script>

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