<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
:title="t === 'add'? '新增危化品基础信息' : '编辑危化品基础信息'"
|
width="800px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
|
<el-form-item label="名称:" prop="name" >
|
<el-input v-model.trim="state.form.name" placeholder="请输入名称"></el-input>
|
</el-form-item>
|
<el-form-item label="产品编号:" prop="productSn" >
|
<el-input v-model.trim="state.form.productSn" placeholder="请输入产品编号"></el-input>
|
</el-form-item>
|
<el-form-item label="种类:" prop="kind" >
|
<el-select
|
v-model="state.form.kind"
|
placeholder="请选择种类"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in state.typeList"
|
:key="dict.id"
|
:label="dict.name"
|
:value="dict.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="CAS:" prop="cas" >
|
<el-input v-model.trim="state.form.cas" placeholder="请输入CAS"></el-input>
|
</el-form-item>
|
<el-form-item label="试剂类型:" prop="hazmatType">
|
<el-select
|
v-model="state.form.hazmatType"
|
placeholder="请选择试剂类型"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in state.hazmatTypeList"
|
:key="dict.id"
|
:label="dict.name"
|
:value="dict.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="危险性质:" prop="hazmatCharacter">
|
<el-select
|
v-model="state.characterList"
|
placeholder="请选择危险性质"
|
clearable
|
multiple
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in state.hazmatCharacterList"
|
:key="dict.id"
|
:label="dict.name"
|
:value="dict.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="供应商:" prop="supplier">
|
<el-input v-model.trim="state.form.supplier" placeholder="请输入供应商"></el-input>
|
</el-form-item>
|
<el-form-item label="厂家:" prop="manufacturer">
|
<el-input v-model.trim="state.form.manufacturer" placeholder="请输入厂家"></el-input>
|
</el-form-item>
|
<el-form-item label="规格:" prop="hazmatFormat">
|
<el-input v-model.trim="state.form.hazmatFormat" placeholder="请输入规格"></el-input>
|
</el-form-item>
|
<el-form-item label="包装数量:" prop="metering">
|
<el-input v-model.trim="state.form.metering" @input="requiredDurationEventMetering($event)" placeholder="请输入包装数量"></el-input>
|
</el-form-item>
|
<el-form-item label="包装单位:" prop="unit">
|
<el-select
|
v-model="state.form.unit"
|
filterable
|
allow-create
|
default-first-option
|
:reserve-keyword="false"
|
placeholder="请选择包装单位"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in state.unitOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="含税售价:" prop="price">
|
<el-input v-model.trim="state.form.price" @input="requiredDurationEvent($event)" placeholder="请输入含税售价"></el-input>
|
</el-form-item>
|
<el-form-item label="每箱数量:" prop="perBox">
|
<el-input v-model.trim="state.form.perBox" oninput="value=value.replace(/^\.+|[^\d]/g,'')" placeholder="请输入每箱数量"></el-input>
|
</el-form-item>
|
<el-form-item label="最小包装类型:" prop="minPackage">
|
<el-select
|
v-model="state.form.minPackage"
|
placeholder="请选择最小包装类型"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in state.unitList"
|
:key="dict.id"
|
:label="dict.name"
|
:value="dict.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="安全库存:" prop="safeNum">
|
<el-input v-model.trim="state.form.safeNum" placeholder="请输入安全库存" oninput="value=value.replace(/^\.+|[^\d]/g,'')"></el-input>
|
</el-form-item>
|
<el-form-item label="超期阈值（小时）:" prop="threshold">
|
<el-input v-model.trim="state.form.threshold" placeholder="请输入超期阈值" oninput="value=value.replace(/^\.+|[^\d]/g,'')"></el-input>
|
</el-form-item>
|
<el-form-item label="单次入库最大数量:" prop="maxEntry">
|
<el-input v-model.trim="state.form.maxEntry" placeholder="请输入单次入库最大数量" oninput="value=value.replace(/^\.+|[^\d]/g,'')"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from 'vue'
|
import {ElMessage} from "element-plus";
|
import {verifyPhone} from "@/utils/validate";
|
import {addBasic, editBasic,checkBasicName} from "@/api/hazardousChemicals/basicInfo";
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
const startUsername = ref('');
|
const startPhone = ref('');
|
|
const validateName = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入产品编号'))
|
}else if(title.value === '编辑' && value === startUsername.value){
|
callback()
|
}else{
|
let param = {}
|
if(title.value === '新增') {
|
param = {
|
name:value
|
}
|
}else if(title.value === '编辑'){
|
param = {
|
name:value,
|
id: state.form.id
|
}
|
}
|
checkBasicName(param).then((res)=>{
|
if(res.data == false){
|
callback(new Error('产品编号已被占用，请更换其他编号'))
|
}else{
|
callback()
|
}
|
})
|
}
|
}
|
|
const state = reactive({
|
form: {
|
id: '',
|
name: '',
|
cas: '',
|
hazmatCharacter: '',
|
hazmatFormat: '',
|
hazmatType: '',
|
manufacturer: '',
|
metering: null,
|
perBox: null,
|
price: null,
|
productSn: '',
|
supplier: '',
|
minPackage: '',
|
safeNum: null,
|
threshold: null,
|
kind: '',
|
maxEntry: null
|
},
|
characterList: [],
|
formRules:{
|
name: [{ required: true, trigger: "blur", message: '请输入危化品名称', }],
|
cas: [{ required: true, message: '请输入cas', trigger: 'blur' }],
|
hazmatCharacter: [{ required: true, message: '请输入危险性质', trigger: 'blur' }],
|
hazmatFormat: [{ required: true, message: '请输入试剂规格', trigger: 'blur' }],
|
hazmatType: [{ required: true, message: '请输入试剂类型', trigger: 'blur' }],
|
manufacturer: [{ required: true, message: '请输入厂家', trigger: 'blur' }],
|
metering: [{ required: true, message: '请输入包装数量', trigger: 'blur' }],
|
// perBox: [{ required: true, message: '请输入每箱数量', trigger: 'blur' }],
|
price: [{ required: true, message: '请输入含税价格', trigger: 'blur' }],
|
productSn: [{ required: true, validator: validateName, trigger: 'blur' }],
|
supplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
|
minPackage: [{ required: true, message: '请输入最小包装类型', trigger: 'blur' }],
|
safeNum: [{ required: true, message: '请输入安全库存', trigger: 'blur' }],
|
kind: [{ required: true, message: '请选择种类', trigger: 'blur' }],
|
threshold: [{ required: true, message: '请输入超期阀值', trigger: 'blur' }],
|
unit: [{ required: true, message: '请选择包装单位', trigger: 'blur' }],
|
maxEntry: [{ required: true, message: '请输入单次入库最大数量', trigger: 'blur' }],
|
|
},
|
typeList: [
|
{
|
id: 0,
|
name: '试剂'
|
},
|
{
|
id: 1,
|
name: '原料'
|
},
|
{
|
id: 2,
|
name: '半成品'
|
},
|
{
|
id: 3,
|
name: '成品'
|
},
|
{
|
id: 4,
|
name: '其他'
|
},
|
],
|
hazmatTypeList: [
|
{
|
id: 0,
|
name: '耗材'
|
},
|
{
|
id: 1,
|
name: '液态'
|
},
|
{
|
id: 2,
|
name: '液体'
|
},
|
{
|
id: 3,
|
name: '气态'
|
},
|
{
|
id: 4,
|
name: '固态'
|
},
|
],
|
unitList:[
|
{
|
id: 0,
|
name: '瓶'
|
},
|
{
|
id: 1,
|
name: '袋'
|
},
|
{
|
id: 2,
|
name: '桶'
|
},
|
{
|
id: 3,
|
name: '盒'
|
},
|
{
|
id: 4,
|
name: '箱'
|
},
|
{
|
id: 5,
|
name: '其他'
|
},
|
],
|
hazmatCharacterList: [
|
{
|
id: 0,
|
name: '腐蚀品'
|
},
|
{
|
id: 1,
|
name: '氧化品'
|
},
|
{
|
id: 2,
|
name: '有毒品'
|
},
|
{
|
id: 3,
|
name: '易燃品'
|
},
|
{
|
id: 4,
|
name: '非易燃品'
|
},
|
],
|
unitOptions: [
|
{
|
value: 'g',
|
label: 'g',
|
},
|
{
|
value: 'mg',
|
label: 'mg',
|
},
|
{
|
value: 'kg',
|
label: 'kg',
|
},
|
{
|
value: 'ml',
|
label: 'ml',
|
},
|
{
|
value: 'l',
|
label: 'l',
|
},
|
]
|
})
|
|
const t = ref('')
|
const openDialog = async (type, value) => {
|
t.value = type
|
title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '' ;
|
if(type === 'edit' || type === 'distribute') {
|
state.form = JSON.parse(JSON.stringify(value));
|
state.characterList = state.form.hazmatCharacter.split(',')
|
startUsername.value = value.productSn
|
}
|
dialogVisible.value = true;
|
}
|
|
const onSubmit = async () => {
|
state.form.hazmatCharacter = state.characterList.join(",")
|
const valid = await busRef.value.validate();
|
if(valid){
|
if(title.value === '新增'){
|
const {id, ...data} = JSON.parse(JSON.stringify(state.form))
|
const res = await addBasic(data)
|
if(res.code === 200){
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
}else{
|
ElMessage.warning(res.message)
|
}
|
emit("getList")
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
}else if(title.value === '编辑'){
|
const {...data} = JSON.parse(JSON.stringify(state.form))
|
const res = await editBasic(data)
|
if(res.code === 200){
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
});
|
}else{
|
ElMessage.warning(res.message)
|
}
|
emit("getList")
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
}
|
}
|
}
|
|
const handleClose = () => {
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const reset = () => {
|
state.form = {
|
id: '',
|
name: '',
|
cas: '',
|
hazmatCharacter: '',
|
hazmatFormat: '',
|
hazmatType: '',
|
manufacturer: '',
|
metering: null,
|
perBox: null,
|
price: null,
|
productSn: '',
|
supplier: '',
|
minPackage: '',
|
safeNum: null,
|
threshold: null,
|
kind: '',
|
maxEntry: null
|
}
|
state.characterList = []
|
}
|
defineExpose({
|
openDialog
|
});
|
const requiredDurationEvent =(value) =>{
|
let dat =
|
("" + value) // 第一步：转成字符串
|
.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
|
.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
|
.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
|
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
|
state.form.price = dat
|
}
|
const requiredDurationEventMetering =(value) =>{
|
let dat =
|
("" + value) // 第一步：转成字符串
|
.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
|
.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
|
.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
|
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
|
state.form.metering = dat
|
}
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
