<template>
|
<div class="system-add-menu-container">
|
<el-dialog :title="goodsDetailEditState.title" :close-on-click-modal="false" v-model="goodsDetailEditState.goodsDetailEditVisible" width="30%">
|
<el-form
|
:model="goodsDetailEditState.goodsDetailForm"
|
:rules="goodsDetailEditState.goodsDetailRules"
|
ref="goodsDetailFormRef"
|
size="default"
|
v-loading="goodsDetailEditState.loading"
|
element-loading-text="Loading..."
|
label-width="120px">
|
<el-row>
|
<el-col :span="24" class="mb20">
|
<el-form-item label="选择物资" prop="smId">
|
<el-row :gutter="6">
|
<!-- <el-col :span="8">-->
|
<!-- <el-select-->
|
<!-- filterable-->
|
<!-- placeholder="请选择部门"-->
|
<!-- clearable-->
|
<!-- @change="changeDepartment"-->
|
<!-- v-model="goodsDetailEditState.depId">-->
|
<!-- <el-option-->
|
<!-- v-for="item in goodsDetailEditState.departmentList"-->
|
<!-- :key="item.depId"-->
|
<!-- :value="item.depId"-->
|
<!-- :label="item.depName"-->
|
<!-- ></el-option>-->
|
<!-- </el-select>-->
|
<!-- </el-col>-->
|
<el-col :span="12">
|
<el-select v-model="goodsDetailEditState.classifyId" placeholder="选择分类" @change="changeClassify" filterable clearable>
|
<el-option
|
v-for="item in goodsDetailEditState.classifyList"
|
:key="item.materialClassifyId"
|
:value="item.materialClassifyId"
|
:label="item.materialClassifyName"
|
></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="12">
|
<el-select v-model="goodsDetailEditState.goodsDetailForm.smId" placeholder="选择物资" filterable clearable>
|
<el-option
|
v-for="item in goodsDetailEditState.goodsList"
|
:key="item.smId"
|
:value="item.smId"
|
:label="item.materialName"
|
></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" class="mb20">
|
<el-form-item label="按RFID标记:" prop="rfid">
|
<el-input v-model="goodsDetailEditState.goodsDetailForm.rfid" placeholder="选填">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" class="mb20">
|
<el-form-item label="有效期类型:" prop="validType">
|
<el-radio-group v-model="goodsDetailEditState.goodsDetailForm.validType">
|
<el-radio :label="0">长期</el-radio>
|
<el-radio :label="1">非长期</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" class="mb20" v-if="goodsDetailEditState.goodsDetailForm.validType === 1">
|
<el-form-item label="有效期至:" prop="validTime">
|
<el-date-picker
|
v-model="goodsDetailEditState.goodsDetailForm.validTime"
|
type="datetime"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="选择日期时间"
|
style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="goodsDetailEditState.goodsDetailEditVisible = !goodsDetailEditState.goodsDetailEditVisible" size="default">取 消</el-button>
|
<el-button type="primary" @click="submitGoodsDetail" v-throttle size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {reactive, ref, watch} from 'vue'
|
import {
|
BaseMaterialListType,
|
ClassificationListType,
|
DepartmentType,
|
GoodsDetailDataType,
|
GoodsDetailEditType
|
} from "/@/views/facilityManagement/goodsDetailManage/index";
|
import {isValidKey} from "/@/views/facilityManagement/safetyGoodsAndEquipment/index";
|
import {ElMessage} from "element-plus/es";
|
import {goodsDetailApi} from "/@/api/facilityManagement/goodsDetailManage";
|
import {useUserInfo} from "/@/stores/userInfo";
|
|
const goodsDetailFormRef = ref()
|
const userInfo = useUserInfo()
|
|
const goodsDetailEditState = reactive<GoodsDetailEditType>({
|
title: '编辑',
|
depId: null,
|
loading: false,
|
classifyId: null,
|
goodsDetailEditVisible: false,
|
goodsDetailForm: {
|
id: null,
|
smId: null,
|
rfid: null,
|
validType: null,
|
validTime: null,
|
},
|
goodsDetailRules: {
|
smId: [{ required: true, message: '请选择物资名称', trigger: 'change' }],
|
validType: [{ required: true, message: '请选择时间类型', trigger: 'change' }],
|
validTime: [{ required: true, message: '请选择有效时间', trigger: 'change' }],
|
},
|
departmentList: [],
|
classifyList: [],
|
goodsList: [],
|
})
|
|
// watch(() => goodsDetailEditState.depId ,(newVal, oldVal) => {
|
// goodsDetailEditState.classify = null
|
// goodsDetailEditState.goodsDetailForm.smId = null
|
// goodsDetailEditState.classifyList = goodsDetailEditState.departmentList.find(item => item.depId === newVal)?.classificationList as Array<ClassificationListType>
|
// },{immediate :false});
|
|
const openGoodsDetailEditDialog = async (title: string, value: GoodsDetailDataType, departmentList: DepartmentType []) => {
|
goodsDetailEditState.goodsDetailEditVisible = true;
|
goodsDetailEditState.departmentList = departmentList;
|
setTimeout(() => {
|
goodsDetailFormRef.value.clearValidate();
|
});
|
await changeDepartment(userInfo.userInfos.depId)
|
await changeClassify(value.bigClassifyId)
|
goodsDetailEditState.depId = value.depId
|
goodsDetailEditState.classifyId = value.bigClassifyId
|
for(let i in goodsDetailEditState.goodsDetailForm){
|
if(isValidKey(i, goodsDetailEditState.goodsDetailForm)) {
|
goodsDetailEditState.goodsDetailForm[i] = value[i];
|
}
|
}
|
|
|
}
|
|
const changeDepartment = (value: number | null) => {
|
goodsDetailEditState.classifyId = null
|
goodsDetailEditState.goodsDetailForm.smId = null
|
goodsDetailEditState.classifyList = JSON.parse(JSON.stringify(
|
(goodsDetailEditState.departmentList.find(item => item.depId === value) ?? {classificationList:[]})?.classificationList as Array<ClassificationListType>
|
))
|
}
|
|
const changeClassify = (value: number | null) => {
|
goodsDetailEditState.goodsDetailForm.smId = null
|
goodsDetailEditState.goodsList = goodsDetailEditState.classifyList.find(item => item.materialClassifyId === value)?.baseMaterialList as Array<BaseMaterialListType>
|
}
|
|
const submitGoodsDetail = () => {
|
goodsDetailFormRef.value.validate(async (valid: boolean) => {
|
if(valid){
|
goodsDetailEditState.loading = true
|
if(goodsDetailEditState.title === '新增入库') {
|
let res = await goodsDetailApi().addGoodsDetail(goodsDetailEditState.goodsDetailForm)
|
if(res.data.code === '200'){
|
goodsDetailEditState.goodsDetailEditVisible = false
|
emit('refreshData')
|
ElMessage({
|
type: 'success',
|
message: '物资新增成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}else{
|
let res = await goodsDetailApi().updateGoodsDetail(goodsDetailEditState.goodsDetailForm)
|
if(res.data.code === '200'){
|
goodsDetailEditState.goodsDetailEditVisible = false
|
emit('refreshData')
|
ElMessage({
|
type: 'success',
|
message: '物资编辑成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}
|
goodsDetailEditState.loading = false
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息'
|
})
|
}
|
})
|
}
|
|
const emit = defineEmits(['refreshData',])
|
|
defineExpose({
|
openGoodsDetailEditDialog
|
})
|
|
</script>
|
|
<style scoped>
|
|
</style>
|
