<template>
|
<div>
|
<el-dialog v-model="isShow"
|
title="绑定物联设备"
|
width="600"
|
@close="closeModal">
|
<el-form label-width="100px"
|
:model="formState"
|
ref="formRef">
|
<el-form-item label="产品名称">
|
<el-input v-model="props.record.productName" disabled />
|
</el-form-item>
|
<el-form-item label="规格型号">
|
<el-input v-model="props.record.model" disabled />
|
</el-form-item>
|
<el-form-item label="批号">
|
<el-input v-model="props.record.batchNo" disabled />
|
</el-form-item>
|
<el-form-item label="物联设备"
|
prop="deviceIds"
|
:rules="[
|
{
|
required: false,
|
message: '请选择物联设备',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.deviceIds"
|
multiple
|
filterable
|
placeholder="请选择物联设备"
|
style="width: 100%">
|
<el-option v-for="item in deviceOptions"
|
:key="item.id"
|
:label="`${item.deviceName} (${item.deviceModel})`"
|
:value="item.id">
|
<span style="float: left">{{ item.deviceName }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.deviceModel }}</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted, getCurrentInstance } from "vue";
|
import { getLedgerPage } from "@/api/equipmentManagement/ledger.js";
|
import { createStockInventory } from "@/api/inventoryManagement/stockInventory.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
record: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "completed"]);
|
|
const { proxy } = getCurrentInstance();
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
const formRef = ref(null);
|
const submitLoading = ref(false);
|
const deviceOptions = ref([]);
|
|
const formState = ref({
|
deviceIds: [],
|
});
|
|
// 获取物联设备列表
|
const getDeviceOptions = async () => {
|
try {
|
const res = await getLedgerPage({
|
isIotDevice: 1,
|
page: 1,
|
size: 999,
|
});
|
if (res.data && res.data.records) {
|
deviceOptions.value = res.data.records;
|
}
|
} catch (error) {
|
console.error("获取物联设备列表失败:", error);
|
proxy.$modal.msgError("获取物联设备列表失败");
|
}
|
};
|
|
// 初始化已绑定设备
|
const initSelectedDevices = () => {
|
if (props.record.warehouse) {
|
// warehouse 字段存储的是逗号分隔的设备ID
|
const deviceIds = props.record.warehouse.split(",").map(id => Number(id.trim())).filter(id => !isNaN(id));
|
formState.value.deviceIds = deviceIds;
|
}
|
};
|
|
const closeModal = () => {
|
formState.value.deviceIds = [];
|
isShow.value = false;
|
};
|
|
const handleSubmit = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
submitLoading.value = true;
|
// 将设备ID数组转换为逗号分隔的字符串
|
const warehouse = formState.value.deviceIds.join(",");
|
// 使用库存新增/编辑接口，warehouse 字段传设备ID
|
const submitData = {
|
id: props.record.id,
|
productModelId: props.record.productModelId,
|
batchNo: props.record.batchNo,
|
qualitity: props.record.qualitity,
|
warehouse: warehouse,
|
};
|
createStockInventory(submitData)
|
.then(res => {
|
submitLoading.value = false;
|
proxy.$modal.msgSuccess("绑定成功");
|
closeModal();
|
emit("completed");
|
})
|
.catch(() => {
|
submitLoading.value = false;
|
});
|
}
|
});
|
};
|
|
onMounted(() => {
|
getDeviceOptions();
|
initSelectedDevices();
|
});
|
</script>
|
