101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive } from "vue";
|
||
|
|
import { ElMessage } from "element-plus";
|
||
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||
|
|
import { addSmartCabinet } from "@/api/cabinet/smart-cabinet";
|
||
|
|
import Confirm from "@iconify-icons/ep/check";
|
||
|
|
import type { FormRules } from 'element-plus';
|
||
|
|
import { CabinetImgMap } from "@/utils/cabinetImgMap";
|
||
|
|
|
||
|
|
export interface FormDTO {
|
||
|
|
cabinetName: string;
|
||
|
|
cabinetType: number;
|
||
|
|
templateNo: string;
|
||
|
|
lockControlNo: number;
|
||
|
|
location: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits(["update:visible", "refresh"]);
|
||
|
|
|
||
|
|
const formRef = ref();
|
||
|
|
const formData = reactive<FormDTO>({
|
||
|
|
cabinetName: "",
|
||
|
|
cabinetType: 1,
|
||
|
|
templateNo: "",
|
||
|
|
lockControlNo: 0,
|
||
|
|
location: 0
|
||
|
|
});
|
||
|
|
|
||
|
|
const rules = reactive<FormRules>({
|
||
|
|
cabinetName: [{ required: true, message: "柜体名称必填", trigger: "blur" }],
|
||
|
|
cabinetType: [{ required: true, message: "请选择柜体类型", trigger: "change" }],
|
||
|
|
templateNo: [{ required: true, message: "请选择模板编号", trigger: "change" }],
|
||
|
|
lockControlNo: [
|
||
|
|
{ required: true, message: "锁控板序号", trigger: "blur" }
|
||
|
|
],
|
||
|
|
location: [
|
||
|
|
{ required: true, message: "位置信息必填", trigger: "blur" },
|
||
|
|
{ type: 'number', min: 0, message: '位置编号不能为负数', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleConfirm = async () => {
|
||
|
|
try {
|
||
|
|
await formRef.value.validate();
|
||
|
|
await addSmartCabinet(formData);
|
||
|
|
ElMessage.success("新增成功");
|
||
|
|
emit("refresh");
|
||
|
|
closeDialog();
|
||
|
|
} catch (error) {
|
||
|
|
console.error("表单提交失败", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeDialog = () => {
|
||
|
|
formRef.value.resetFields();
|
||
|
|
emit("update:visible", false);
|
||
|
|
};
|
||
|
|
|
||
|
|
const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
|
||
|
|
label: item.name,
|
||
|
|
value
|
||
|
|
}));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<el-dialog title="新增智能柜" :model-value="visible" width="600px" @close="closeDialog">
|
||
|
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||
|
|
<el-form-item label="柜体名称" prop="cabinetName">
|
||
|
|
<el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="柜体类型" prop="cabinetType">
|
||
|
|
<el-select v-model="formData.cabinetType" placeholder="请选择类型">
|
||
|
|
<el-option label="主柜" :value="0" />
|
||
|
|
<el-option label="副柜" :value="1" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="模板编号" prop="templateNo">
|
||
|
|
<el-select v-model="formData.templateNo" placeholder="请选择模板编号">
|
||
|
|
<el-option v-for="option in templateOptions" :key="option.value" :label="option.label"
|
||
|
|
:value="option.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="closeDialog">取消</el-button>
|
||
|
|
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
|
||
|
|
确认
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|