<template>
|
<div class="system-add-menu-container">
|
<el-dialog :title="dialogState.title" :close-on-click-modal="false" v-model="dialogState.showSafetyGoodsAndEquipmentDialog" width="600px">
|
<el-form
|
:model="dialogState.safetyGoodsAndEquipmentForm"
|
:rules="dialogState.safetyGoodsAndEquipmentRules"
|
ref="safetyGoodsAndEquipmentRef"
|
size="default"
|
v-loading="dialogState.loading"
|
element-loading-text="Loading..."
|
label-width="120px">
|
<el-row>
|
<el-col :span="24" class="mb20">
|
<el-form-item label="物资大类" prop="bigClassifyId">
|
<el-select v-model="dialogState.safetyGoodsAndEquipmentForm.bigClassifyId" @change="changeSmallClassify(null)" placeholder="物资大类" class="input-add">
|
<el-option
|
v-for="item in dialogState.goodsBigClassifyList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.materialClassifyName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="5">-->
|
<!-- <el-button type="primary" @click="openAddGoods">添加物资</el-button>-->
|
<!-- </el-col>-->
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="物资小类" prop="smallClassifyId">
|
<el-select class="input-add" v-model="dialogState.safetyGoodsAndEquipmentForm.smallClassifyId" placeholder="请先选择物资大类">
|
<el-option
|
v-for="item in dialogState.goodsSmallClassifyList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.materialClassifyName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="部门" prop="depId">
|
<el-cascader
|
:disabled="true"
|
:options="dialogState.departmentList"
|
:props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
|
placeholder="请选择部门"
|
clearable
|
class="input-add"
|
v-model="dialogState.safetyGoodsAndEquipmentForm.depId">
|
</el-cascader>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
|
<!-- <el-form-item label="是否耗材" prop="consumable">-->
|
<!-- <el-select class="input-add" v-model="dialogState.safetyGoodsAndEquipmentForm.consumable" placeholder="是否耗材" clearable filterable>-->
|
<!-- <el-option-->
|
<!-- v-for="item in dialogState.consumableList"-->
|
<!-- :key="item.id"-->
|
<!-- :value="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- >-->
|
<!-- </el-option>-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogState.showSafetyGoodsAndEquipmentDialog = !dialogState.showSafetyGoodsAndEquipmentDialog" size="default">取 消</el-button>
|
<el-button type="primary" @click="submitSafetyGoodsAndEquipment" v-throttle size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<add-goods-dialog ref="addGoodsDialogRef" @refreshClassify="getAllSafetyEquipmentList"></add-goods-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {computed, nextTick, reactive, ref, watch} from 'vue'
|
import {
|
BigClassifyType,
|
DataType, DepartmentType,
|
isValidKey,
|
SafetyGoodsAndEquipmentDialogStateType, safetyGoodsAndEquipmentFormType
|
} from "/@/views/facilityManagement/safetyGoodsAndEquipment/index";
|
import { goodsAndEquipmentApi } from "/@/api/facilityManagement/safetyGoodsAndEquipment";
|
import {ElMessage} from "element-plus";
|
import AddGoodsDialog from "./addGoodsDialog.vue";
|
import {useUserInfo} from "/@/stores/userInfo";
|
|
const safetyGoodsAndEquipmentRef = ref();
|
const addGoodsDialogRef = ref();
|
const userInfo = useUserInfo()
|
|
const dialogState = reactive<SafetyGoodsAndEquipmentDialogStateType>({
|
safetyGoodsAndEquipmentForm: {
|
id: null,
|
bigClassifyId: null,
|
smallClassifyId: null,
|
depId: null,
|
// consumable: null,
|
},
|
safetyGoodsAndEquipmentRules: {
|
bigClassifyId: [{ required: true, message: '请选择物资大类', trigger: 'change' }],
|
smallClassifyId: [{ required: true, message: '请选择物资小类', trigger: 'change' }],
|
// depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
|
// consumable: [{ required: true, message: '请选择是否耗材', trigger: 'change' }],
|
},
|
showSafetyGoodsAndEquipmentDialog: false,
|
title: '',
|
loading: false,
|
depList: [],
|
goodsBigClassifyList: [],
|
goodsSmallClassifyList: [],
|
departmentList: [],
|
consumableList: [
|
{id: 0, name: '是'},
|
{id: 1, name: '否'},
|
],
|
});
|
|
watch(() => dialogState.safetyGoodsAndEquipmentForm.bigClassifyId ,(newVal, oldVal) => {
|
|
},);
|
|
// const openAddGoods = () => {
|
// addGoodsDialogRef.value.openAddGoodsDialog(dialogState.goodsBigClassifyList)
|
// }
|
|
const openSafetyGoodsAndEquipmentDialog =
|
(title: string, value: safetyGoodsAndEquipmentFormType, goodsBigClassifyList: BigClassifyType [], departmentList : DepartmentType []) => {
|
dialogState.title = title;
|
dialogState.showSafetyGoodsAndEquipmentDialog = true;
|
dialogState.goodsBigClassifyList = goodsBigClassifyList;
|
dialogState.departmentList = departmentList;
|
dialogState.safetyGoodsAndEquipmentForm = {
|
id: null,
|
bigClassifyId: null,
|
smallClassifyId: null,
|
depId: userInfo.userInfos.depId,
|
// consumable: null,
|
};
|
nextTick( () => {
|
safetyGoodsAndEquipmentRef.value.clearValidate();
|
})
|
if(title === '新增') {
|
dialogState.title = '新增'
|
}else {
|
dialogState.title = '编辑'
|
changeSmallClassify(value.bigClassifyId)
|
for(let key in dialogState.safetyGoodsAndEquipmentForm) {
|
if(isValidKey(key, dialogState.safetyGoodsAndEquipmentForm)){
|
dialogState.safetyGoodsAndEquipmentForm[key] = value[key];
|
}
|
}
|
}
|
};
|
|
const changeSmallClassify = (id: number | null) => {
|
dialogState.safetyGoodsAndEquipmentForm.smallClassifyId = null;
|
dialogState.goodsSmallClassifyList = dialogState.goodsBigClassifyList[dialogState.goodsBigClassifyList.
|
findIndex(item => item.id === (dialogState.safetyGoodsAndEquipmentForm.bigClassifyId ?? id))].childList as Array<BigClassifyType>;
|
}
|
|
const submitSafetyGoodsAndEquipment = () => {
|
safetyGoodsAndEquipmentRef.value.validate(async (valid: boolean) => {
|
if(valid){
|
dialogState.loading = true
|
if(dialogState.title === '新增') {
|
let res = await goodsAndEquipmentApi().addGoodsEquipment(dialogState.safetyGoodsAndEquipmentForm)
|
if(res.data.code === '200'){
|
dialogState.showSafetyGoodsAndEquipmentDialog = false
|
emit('refreshData')
|
ElMessage({
|
type: 'success',
|
message: '安全物资设备新增成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}else{
|
let res = await goodsAndEquipmentApi().updateGoodsEquipment(dialogState.safetyGoodsAndEquipmentForm)
|
if(res.data.code === '200'){
|
dialogState.showSafetyGoodsAndEquipmentDialog = false
|
emit('refreshData')
|
ElMessage({
|
type: 'success',
|
message: '安全物资设备编辑成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}
|
dialogState.loading = false
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息'
|
})
|
}
|
})
|
};
|
|
const getAllSafetyEquipmentList = async () => {
|
let res = await goodsAndEquipmentApi().getAllSafetyEquipment();
|
if(res.data.code === '200'){
|
dialogState.goodsBigClassifyList = res.data.data
|
}else{
|
ElMessage({
|
message:res.data.msg,
|
type:'warning'
|
})
|
}
|
};
|
|
const emit = defineEmits(['refreshData',])
|
|
defineExpose({
|
openSafetyGoodsAndEquipmentDialog,
|
});
|
|
</script>
|
|
<style scoped>
|
.input-length{
|
width: 100% !important;
|
}
|
</style>
|
