参数配置

zhouwx

2024-12-25 c53fc4edf8587a1ba44d5a57139baee3dcaba0b0

 src/views/basicDataManage/gasManage/component/gasDialog.vue

@@ -1,32 +1,32 @@
<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.title == '新增气体'  || state.title == '编辑气体'? state.gasFormRules : ''" label-width="110px">
                <el-form-item label="气体名称:" prop="gasName">
                    <el-input v-model.trim="state.gasForm.gasName" :disabled="state.disabled" ></el-input>
                </el-form-item>
                <el-form-item label="气体分子式:" prop="gasMolecularFormula">
                    <el-input v-model.trim="state.gasForm.gasMolecularFormula" :disabled="state.disabled"></el-input>
                </el-form-item>
                <el-form-item label="气体阈值:" prop="gasThreshold">
                    <el-input v-model.trim="state.gasForm.gasThreshold" :disabled="state.disabled"></el-input>
                </el-form-item>
                <el-form-item label="气体单位:" prop="gasUnit">
                    <el-input v-model.trim="state.gasForm.gasUnit" :disabled="state.disabled"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
  <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.title == '新增气体'  || state.title == '编辑气体'? state.gasFormRules : ''" label-width="110px">
        <el-form-item label="气体名称:" prop="gasName">
          <el-input v-model.trim="state.gasForm.gasName" :disabled="state.disabled" ></el-input>
        </el-form-item>
        <el-form-item label="气体分子式:" prop="gasMolecularFormula">
          <el-input v-model.trim="state.gasForm.gasMolecularFormula" :disabled="state.disabled"></el-input>
        </el-form-item>
        <el-form-item label="气体阈值:" prop="gasThreshold">
          <el-input v-model.trim="state.gasForm.gasThreshold" :disabled="state.disabled"></el-input>
        </el-form-item>
        <el-form-item label="气体单位:" prop="gasUnit">
          <el-input v-model.trim="state.gasForm.gasUnit" :disabled="state.disabled"></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>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
@@ -38,112 +38,112 @@
const gasRef = ref();
const emit = defineEmits(["getGasData"]);
const state = reactive<GasState>({
    disabled: false,
    title: '',
    isShowUserDialog: false,
    gasForm: {
        id: '',
        gasName: '',
        gasMolecularFormula: '',
        gasThreshold: '',
        gasUnit: ''
    },
    gasFormRules:{
        gasName: [{ required: true, message: '请填写气体名称', trigger: 'blur' }],
        gasMolecularFormula: [{ required: true, message: '请填写气体分子式', trigger: 'blur' }],
        gasThreshold: [{ required: true, message: '请填写阈值', trigger: 'blur' }],
        gasUnit: [{ required: true, message: '请选择气体单位', trigger: 'blur' }],
    },
  disabled: false,
  title: '',
  isShowUserDialog: false,
  gasForm: {
    id: '',
    gasName: '',
    gasMolecularFormula: '',
    gasThreshold: '',
    gasUnit: ''
  },
  gasFormRules:{
    gasName: [{ required: true, message: '请填写气体名称', trigger: 'blur' }],
    gasMolecularFormula: [{ required: true, message: '请填写气体分子式', trigger: 'blur' }],
    gasThreshold: [{ required: true, message: '请填写阈值', trigger: 'blur' }],
    gasUnit: [{ required: true, message: '请选择气体单位', trigger: 'blur' }],
  },
});
const openDialog = (type: string, value: any) => {
    state.isShowUserDialog = true;
    if (type === '新增') {
        state.disabled = false;
        state.title = '新增气体';
        state.gasForm = {
            id: '',
            gasName: '',
            gasMolecularFormula: '',
            gasThreshold: '',
            gasUnit: ''
        };
    } else if (type === '编辑'){
        state.disabled = false;
        state.title = '编辑气体';
        state.gasForm = JSON.parse(JSON.stringify(value));
    } else {
        state.disabled = true;
        state.title = '查看气体';
        state.gasForm = JSON.parse(JSON.stringify(value));
    }
  state.isShowUserDialog = true;
  if (type === '新增') {
    state.disabled = false;
    state.title = '新增气体';
    state.gasForm = {
      id: '',
      gasName: '',
      gasMolecularFormula: '',
      gasThreshold: '',
      gasUnit: ''
    };
  } else if (type === '编辑'){
    state.disabled = false;
    state.title = '编辑气体';
    state.gasForm = JSON.parse(JSON.stringify(value));
  } else {
    state.disabled = true;
    state.title = '查看气体';
    state.gasForm = JSON.parse(JSON.stringify(value));
  }
};
const onSubmit = async () => {
        if(state.title == '新增气体'){
            const valid = await gasRef.value.validate();
            if(valid) {
                const param = {
                    molecularFormula: state.gasForm.gasMolecularFormula,
                    name: state.gasForm.gasName,
                    unit: state.gasForm.gasUnit,
                    threshold: state.gasForm.gasThreshold
                }
                let res = await gasManageApi().addGas(param);
                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 param = {
              id: state.gasForm.id,
              molecularFormula: state.gasForm.gasMolecularFormula,
              name: state.gasForm.gasName,
              unit: state.gasForm.gasUnit,
              threshold: state.gasForm.gasThreshold
            }
            let res = await gasManageApi().editGas(param);
            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 = () => {
  if(state.title == '新增气体'){
    const valid = await gasRef.value.validate();
    if(valid) {
      const param = {
        molecularFormula: state.gasForm.gasMolecularFormula,
        name: state.gasForm.gasName,
        unit: state.gasForm.gasUnit,
        threshold: state.gasForm.gasThreshold
      }
      let res = await gasManageApi().addGas(param);
      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 param = {
        id: state.gasForm.id,
        molecularFormula: state.gasForm.gasMolecularFormula,
        name: state.gasForm.gasName,
        unit: state.gasForm.gasUnit,
        threshold: state.gasForm.gasThreshold
      }
      let res = await gasManageApi().editGas(param);
      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');
}

defineExpose({
    openDialog
  openDialog
});
</script>
<style scoped lang="scss">