<template>
|
<div>
|
<u-popup
|
v-model="dialogVisible"
|
:title="addOrEdit === 'edit' ? '编辑' : '新增' + '设备'"
|
mode="center"
|
:close-on-click-overlay="false"
|
:before-close="handleClose"
|
:border-radius="20"
|
width="90%"
|
>
|
<u-form
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
label-width="auto"
|
>
|
<view class="form-row">
|
<view class="form-col">
|
<u-form-item label="设备编号" prop="equipmentNo">
|
<u-input
|
v-model="formData.equipmentNo"
|
placeholder="请输入设备编号"
|
:disabled="isViewMode"
|
border="surround"
|
/>
|
</u-form-item>
|
</view>
|
<view class="form-col">
|
<u-form-item label="设备名称" prop="equipmentName">
|
<u-input
|
v-model="formData.equipmentName"
|
placeholder="请输入设备名称"
|
:disabled="isViewMode"
|
border="surround"
|
/>
|
</u-form-item>
|
</view>
|
</view>
|
<view class="form-row">
|
<view class="form-col">
|
<u-form-item label="是否为耗材" prop="consumables">
|
<u-select
|
v-model="formData.consumables"
|
:list="consumablesOptions"
|
placeholder="请选择是否为耗材"
|
:disabled="isViewMode"
|
/>
|
</u-form-item>
|
</view>
|
<view class="form-col">
|
<u-form-item label="规格型号" prop="specification">
|
<u-input
|
v-model="formData.specification"
|
placeholder="请输入规格型号"
|
:disabled="isViewMode"
|
border="surround"
|
/>
|
</u-form-item>
|
</view>
|
</view>
|
<view class="form-row">
|
<view class="form-col">
|
<u-form-item label="存放位置" prop="storageLocation">
|
<u-input
|
v-model="formData.storageLocation"
|
placeholder="请输入存放位置"
|
:disabled="isViewMode"
|
border="surround"
|
/>
|
</u-form-item>
|
</view>
|
<view class="form-col">
|
<u-form-item label="采购价格" prop="purchasePrice">
|
<u-input
|
v-model="formData.purchasePrice"
|
placeholder="请输入采购价格"
|
:disabled="isViewMode"
|
border="surround"
|
type="number"
|
/>
|
</u-form-item>
|
</view>
|
</view>
|
<view class="form-row">
|
<view class="form-col">
|
<u-form-item label="采购日期" prop="purchaseDate">
|
<u-datetime-picker
|
v-model="formData.purchaseDate"
|
mode="date"
|
placeholder="请选择采购日期"
|
:disabled="isViewMode"
|
/>
|
</u-form-item>
|
</view>
|
</view>
|
<view class="dialog-footer">
|
<u-button @click="cancelForm" type="default" size="normal">取消</u-button>
|
<u-button v-if="!isViewMode" @click="submitForm" type="primary" size="normal">确定</u-button>
|
</view>
|
</u-form>
|
</u-popup>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch, computed, reactive } from "vue";
|
import { addOrEditEquipment } from "@/api/equipment/management/index.js";
|
import { useToast } from "@/utils/uviewplus";
|
|
const { showToast } = useToast();
|
|
const props = defineProps({
|
beforeClose: {
|
type: Function,
|
default: () => {},
|
},
|
form: {
|
type: Object,
|
default: () => ({}),
|
},
|
addOrEdit: {
|
type: String,
|
default: "add",
|
},
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
|
const emit = defineEmits(["submit", "handleBeforeClose"]);
|
|
// 计算属性：统一控制是否禁用
|
const isViewMode = computed(() => props.addOrEdit === "viewRow");
|
|
// 表单引用和数据
|
const formRef = ref(null);
|
const formData = ref({});
|
const copyForm = defineModel("copyForm", {
|
required: true,
|
type: Object,
|
default: () => ({}),
|
});
|
|
// 弹窗可见性
|
const dialogVisible = defineModel("managementFormDialog", {
|
required: true,
|
type: Boolean,
|
});
|
|
// 耗材选项
|
const consumablesOptions = reactive([
|
{ label: "是", value: "1" },
|
{ label: "否", value: "0" }
|
]);
|
|
// 监听外部传入的表单数据变化，合并监听逻辑
|
watch(
|
[() => props.form, () => props.addOrEdit],
|
([newForm, newAddOrEdit]) => {
|
formData.value = { ...newForm };
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 提交表单
|
const submitForm = async () => {
|
if (!formRef.value) return;
|
|
try {
|
const valid = await formRef.value.validate();
|
if (!valid) return;
|
|
const result = await addOrEditEquipment({ ...formData.value });
|
const title = props.title.includes("新增") ? "新增" : "编辑";
|
|
if (result.code === 200 && result.msg) {
|
showToast({ title: `${title}成功：${result.msg}`, type: 'success' });
|
emit("submit", { title, ...formData.value, result });
|
closeDialog();
|
} else {
|
showToast({ title: `${title}失败：${result.msg}`, type: 'error' });
|
}
|
} catch (error) {
|
console.error("提交失败:", error);
|
showToast({ title: "提交失败，请重试", type: 'error' });
|
}
|
};
|
|
// 关闭弹窗的统一方法
|
const closeDialog = () => {
|
emit("update:managementFormDialog", false);
|
formData.value = {};
|
};
|
|
// 取消表单
|
const cancelForm = () => {
|
closeDialog();
|
};
|
|
// 重置表单
|
const resetForm = () => {
|
if (!formRef.value) return;
|
formData.value = JSON.parse(JSON.stringify(copyForm.value));
|
};
|
|
// 关闭弹窗
|
const handleClose = () => {
|
emit("handleBeforeClose");
|
closeDialog();
|
};
|
|
const rules = reactive({
|
equipmentNo: [
|
{ required: true, message: "请输入设备编号", trigger: "blur" },
|
],
|
equipmentName: [
|
{ required: true, message: "请输入设备名称", trigger: "blur" },
|
],
|
consumables: [
|
{ required: true, message: "请选择是否为耗材", trigger: "change" },
|
],
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.form-row {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
}
|
|
.form-col {
|
flex: 1;
|
margin-right: 20rpx;
|
}
|
|
.form-col:last-child {
|
margin-right: 0;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 40rpx;
|
flex-direction: row;
|
gap: 20rpx;
|
}
|
|
// 弹窗样式适配
|
:deep(.u-popup__content) {
|
padding: 30rpx;
|
}
|
|
:deep(.u-form-item) {
|
margin-bottom: 20rpx;
|
}
|
</style>
|
