<template>
|
<div class="system-add-gas-container">
|
<el-dialog
|
:title="state.title"
|
v-model="state.isShowUserDialog"
|
width="500px"
|
>
|
<el-form :model="state.gasForm" size="default" ref="gasRef" :rules="state.gasFormRules" label-width="110px">
|
<el-form-item label="方位:" prop="orientation">
|
<el-select
|
v-model="state.gasForm.orientation"
|
class="w100"
|
style="width: 100%"
|
size="default"
|
>
|
<el-option v-for="item in state.positionList" :key="item.label" :label="item.value" :value="item.label"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="本底浓度:" prop="concentration">
|
<el-input v-model.trim="state.gasForm.concentration" placeholder="请输入本底浓度" :disabled="state.disabled" @input="checkTextInput($event)"></el-input>
|
</el-form-item>
|
<el-form-item label="倍增系数:" prop="multiplication">
|
<el-input v-model.trim="state.gasForm.multiplication" placeholder="请输入倍增系数" :disabled="state.disabled" @input="state.gasForm.multiplication= state.gasForm.multiplication.replace(/[^0-9]/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">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref} from "vue";
|
import { GasState } from "/@/types/gasManage";
|
import {gasManageApi} from "/@/api/basicDataManage/gasManage";
|
import {ElMessage} from "element-plus";
|
import {verifyAndSpace, verifyNumberIntegerAndFloat} from "/@/utils/toolsValidate";
|
|
const gasRef = ref();
|
const emit = defineEmits(["getGasData"]);
|
const state = reactive<GasState>({
|
disabled: false,
|
title: '',
|
isShowUserDialog: false,
|
gasForm: {
|
id: null,
|
gasCategoryId: null,
|
orientation: '',
|
concentration: '',
|
multiplication: '',
|
},
|
gasFormRules:{
|
concentration: [{ required: true, message: '请填写本底浓度', trigger: 'blur' }],
|
multiplication: [{ required: true, message: '请填写倍增系数', trigger: 'blur' }],
|
orientation: [{ required: true, message: '请选择方位', trigger: 'blur' }],
|
},
|
positionList: [
|
{
|
value: '方位1',
|
label: 1
|
},
|
{
|
value: '方位2',
|
label: 2
|
},
|
{
|
value: '方位3',
|
label: 3
|
},
|
],
|
});
|
const openDialog = (type: string, value: any) => {
|
state.isShowUserDialog = true;
|
state.gasForm.gasCategoryId = value.id
|
if (type === '新增') {
|
state.disabled = false;
|
state.title = '新增参数配置';
|
state.gasForm = {
|
id: null,
|
gasCategoryId: value.id,
|
orientation: '',
|
concentration: '',
|
multiplication: '',
|
};
|
} else if (type === '编辑'){
|
state.disabled = false;
|
state.title = '编辑参数配置';
|
state.gasForm = JSON.parse(JSON.stringify(value));
|
}
|
};
|
const onSubmit = async () => {
|
if(state.title == '新增参数配置'){
|
const valid = await gasRef.value.validate();
|
if(valid) {
|
const {id,...data} = state.gasForm
|
let res = await gasManageApi().addGasConfig(data);
|
if (res.data.code === 100) {
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getGasData');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
}else if(state.title == '编辑参数配置') {
|
|
const valid = await gasRef.value.validate();
|
if(valid) {
|
const {...data} = state.gasForm
|
let res = await gasManageApi().editGasConfig(data);
|
if (res.data.code === 100) {
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
});
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getGasData');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
} else {
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getGasData');
|
}
|
};
|
|
const handleClose = () => {
|
gasRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
emit('getGasData');
|
}
|
|
const checkTextInput = (val:any) => {
|
state.gasForm.concentration = verifyNumberIntegerAndFloat(val);
|
}
|
defineExpose({
|
openDialog
|
});
|
</script>
|
<style scoped lang="scss">
|
|
</style>
|
