<template>
|
<el-dialog
|
v-model="visible"
|
:title="isEdit ? '编辑设备领用' : '新增设备领用'"
|
width="600px"
|
@close="handleClose"
|
>
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="150px">
|
<el-form-item label="领用人" prop="userId">
|
<el-select v-model="form.userId" placeholder="请选择" :disabled="isViewMode">
|
<el-option
|
v-for="item in userList"
|
:key="item.userId"
|
:label="item.nickName"
|
:value="item.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备名称" prop="equipmentId">
|
<el-select v-model="form.equipmentId" placeholder="请选择" :disabled="isViewMode">
|
<el-option
|
v-for="item in equipmentList"
|
:key="item.id"
|
:label="item.equipmentName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备库存" prop="equipmentStock">
|
<el-input
|
:value="
|
equipmentList.find((item) => item.id == form.equipmentId)
|
?.quantity || 0
|
"
|
disabled
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="领用数量" prop="usageQuantity">
|
<el-input-number
|
v-model="form.usageQuantity"
|
:min="1"
|
:max="maxQuantity || 999"
|
style="width: 100%"
|
:disabled="isViewMode"
|
/>
|
<span
|
v-if="maxQuantity !== null"
|
style="color: #999; font-size: 12px; margin-left: 8px"
|
>(最多{{ maxQuantity }}台)</span
|
>
|
</el-form-item>
|
<el-form-item label="使用状态" prop="equipmentStatus">
|
<el-select v-model="form.equipmentStatus" placeholder="请选择" :disabled="isViewMode">
|
<el-option label="使用中" :value="1" />
|
<el-option label="已归还" :value="0" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="使用开始时间" prop="usageStartTime">
|
<el-date-picker
|
v-model="form.usageStartTime"
|
type="datetime"
|
placeholder="选择开始时间"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
:disabled="isViewMode"
|
/>
|
</el-form-item>
|
<!-- <el-form-item label="使用结束时间" prop="usageEndTime">
|
<el-date-picker
|
v-model="form.usageEndTime"
|
type="datetime"
|
placeholder="选择结束时间"
|
style="width: 100%"
|
/>
|
</el-form-item> -->
|
<el-form-item label="备注" prop="remarks">
|
<el-input
|
v-model="form.remarks"
|
type="textarea"
|
placeholder="请输入备注"
|
:disabled="isViewMode"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="handleSubmit" v-if="!isViewMode">确定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, watch, computed, onMounted } from "vue";
|
import { ElMessage } from "element-plus";
|
import { getEquipmentList } from "@/api/publicApi/index.js";
|
import { addOrEditUsageRecord } from "@/api/equipment/requisition/index.js";
|
|
import useUserStore from "@/store/modules/user";
|
|
onMounted(() => {});
|
const userStore = useUserStore();
|
let userList = ref([]);
|
userStore.getUserList().then((res) => {
|
userList.value = res;
|
});
|
// 获取设备列表
|
const equipmentList = ref([]);
|
getEquipmentList().then((res) => {
|
equipmentList.value = res.data;
|
});
|
const props = defineProps({
|
modelValue: Boolean,
|
formData: {
|
type: Object,
|
default: () => ({}),
|
},
|
beforeClose: {
|
type: Function,
|
default: () => {},
|
},
|
addOrEdit: {
|
type: String,
|
default: "add",
|
},
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
const maxQuantity = computed(() => {
|
if (!form.value.equipmentId) return 0;
|
const eq = equipmentList.value.find(
|
(item) => item.id == form.value.equipmentId
|
);
|
// 防止为0或负数，最小为1
|
return eq && eq.quantity > 0 ? eq.quantity : 999;
|
});
|
const emit = defineEmits(["update:modelValue", "submit"]);
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (v) => emit("update:modelValue", v),
|
});
|
const isViewMode = computed(() => props.addOrEdit === "view" || props.addOrEdit === "viewRow");
|
|
const isEdit = computed(() => !!props.formData?.id);
|
const formRef = ref();
|
|
// 默认表单初始值
|
const defaultForm = {
|
userId: "",
|
equipmentId: "",
|
usageQuantity: 1,
|
equipmentStatus: 1,
|
usageStartTime: "",
|
remarks: ""
|
};
|
const form = ref({ ...defaultForm });
|
|
watch(
|
() => props.formData,
|
(val) => {
|
if (val && Object.keys(val).length > 0) {
|
form.value = { ...defaultForm, ...val };
|
} else {
|
// 新建时重置为初始值，防止脏数据
|
form.value = { ...defaultForm };
|
}
|
},
|
{ immediate: true }
|
);
|
|
const rules = {
|
userId: [{ required: true, message: "请输入领用人", trigger: "blur" }],
|
equipmentId: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
|
usageQuantity: [
|
{ required: true, message: "请输入领用数量", trigger: "blur" },
|
{ type: "number", min: 1, message: "至少领用1台", trigger: "blur" },
|
{
|
validator: (rule, value, callback) => {
|
if (maxQuantity.value !== null && value > maxQuantity.value) {
|
callback(new Error("领用数量不能大于设备数量"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
equipmentStatus: [
|
{ required: true, message: "请选择使用状态", trigger: "change" },
|
],
|
usageStartTime: [
|
{ required: true, message: "请选择开始时间", trigger: "change" },
|
],
|
};
|
|
function handleClose() {
|
emit("update:modelValue", false);
|
}
|
|
function handleSubmit() {
|
formRef.value.validate((valid) => {
|
if (!valid) return;
|
let res = addOrEditUsageRecord(form.value);
|
emit("submit", { ...form.value });
|
handleClose();
|
});
|
}
|
</script>
|
