From fd285d6245ddd54c2eef8237eb878f573d665f94 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 07 七月 2022 18:27:39 +0800 Subject: [PATCH] lct --- src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue | 289 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 150 insertions(+), 139 deletions(-) diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue index 8c0a980..5fa3450 100644 --- a/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue +++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue @@ -1,189 +1,200 @@ <template> <div class="system-add-menu-container"> <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px"> - <el-form :model="productionDeviceForm" :rules="productionDeviceFormRules" ref="productionDeviceFormRef" size="default" label-width="120px"> + <el-form + :model="productionDeviceForm" + :rules="productionDeviceFormRules" + ref="productionDeviceFormRef" + size="default" + label-width="120px" + > <el-row :gutter="35"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-form-item label="生产装置名称" prop="produceDeviceName"> - <el-input class="input-length" v-model="productionDeviceForm.produceDeviceName" placeholder="请输入生产装置名称" clearable></el-input> + <el-input + class="input-length" + v-model="productionDeviceForm.produceDeviceName" + placeholder="请输入生产装置名称" + clearable + ></el-input> </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 - :options="departmentList" - :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }" - placeholder="请选择部门" - clearable - filterable - style="width:85%" - v-model="productionDeviceForm.depId" + :options="departmentList" + :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }" + placeholder="请选择部门" + clearable + filterable + style="width: 85%" + v-model="productionDeviceForm.depId" > </el-cascader> -<!-- <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>--> + <!-- <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></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="riskLevel"> - <el-select class="input-length" v-model="productionDeviceForm.riskLevel" placeholder="请选择风险等级" clearable filterable> - <el-option - v-for="item in levelList" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> + <el-select + class="input-length" + v-model="productionDeviceForm.riskLevel" + placeholder="请选择风险等级" + clearable + filterable + > + <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></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="location"> - <el-input class="input-length" v-model="productionDeviceForm.location" type="textarea" placeholder="请输入区域位置" maxlength="150"></el-input> + <el-input + class="input-length" + v-model="productionDeviceForm.location" + type="textarea" + placeholder="请输入区域位置" + maxlength="150" + ></el-input> </el-form-item> </el-col> </el-row> </el-form> <template #footer> - <span class="dialog-footer"> - <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button> - <el-button type="primary" @click="submitProductionDevice" size="default">确 实</el-button> - </span> + <span class="dialog-footer"> + <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button> + <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button> + </span> </template> </el-dialog> </div> </template> <script lang="ts"> - interface stateType{ - isShowProductionDeviceDialog:Boolean, - productionDeviceForm:{ - produceDeviceName: string, - depId: number | null, - riskLevel: number | null, - location: string, - }, - title: string, - departmentList: [], - levelList: Array<levelListState>, - productionDeviceFormRules:{} - } - interface levelListState { +interface stateType { + isShowProductionDeviceDialog: Boolean; + productionDeviceForm: { + produceDeviceName: string; + depId: number | null; + riskLevel: number | null; + location: string; + }; + title: string; + departmentList: []; + levelList: Array<levelListState>; + productionDeviceFormRules: {}; +} +interface levelListState {} +import { reactive, toRefs, ref } from 'vue'; +import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice'; +import { ElMessage } from 'element-plus'; +export default { + name: 'productionDeviceDialog', + setup(props: any, context: any) { + const productionDeviceFormRef = ref(); + const state = reactive<stateType>({ + title: '', + departmentList: [], + isShowProductionDeviceDialog: false, + levelList: [ + { id: 1, name: '低风险' }, + { id: 2, name: '一般风险' }, + { id: 3, name: '较大风险' }, + { id: 4, name: '重大风险' } + ], + productionDeviceForm: { + produceDeviceName: '', + depId: null, + riskLevel: null, + location: '' + }, + productionDeviceFormRules: { + produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }], + depId: [{ required: true, message: '请选择部门', trigger: 'change' }], + riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }], + location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }] + } + }); - } - import { reactive, toRefs, ref} from 'vue' - import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice'; - import { ElMessage } from 'element-plus'; - export default { - name: "productionDeviceDialog", - setup(props, context) { - const productionDeviceFormRef = ref(); - const state = reactive<stateType>({ - title:'', - departmentList: [], - isShowProductionDeviceDialog: false, - levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},], - productionDeviceForm: { + //打开模态框 + const openProductionDeviceDialog = (type: string, value: object, department: []) => { + state.isShowProductionDeviceDialog = true; + state.departmentList = department; + setTimeout(() => { + productionDeviceFormRef.value.clearValidate(); + }); + if (type === '新增') { + state.title = '新增生产装置'; + state.productionDeviceForm = { produceDeviceName: '', depId: null, riskLevel: null, - location: '', - }, - productionDeviceFormRules:{ - produceDeviceName: [ - { required: true, message: '请填写生产装置名称', trigger: 'blur' }, - ], - depId: [ - { required: true, message: '请选择部门', trigger: 'change' }, - ], - riskLevel: [ - { required: true, message: '请选择风险等级', trigger: 'change' }, - ], - location: [ - { required: true, message: '请填写区域位置', trigger: 'blur' }, - ], - } + location: '' + }; + } else { + state.title = '修改生产装置'; + state.productionDeviceForm = JSON.parse(JSON.stringify(value)); + } + }; - }); - - //打开模态框 - const openProductionDeviceDialog = (type: string, value: object, department: []) => { - state.isShowProductionDeviceDialog = true; - state.departmentList = department; - setTimeout(() => { - productionDeviceFormRef.value.clearValidate() - }) - if(type === '新增'){ - state.title = '新增生产装置'; - state.productionDeviceForm = { - produceDeviceName: '', - depId: null, - riskLevel: null, - location: '', - }; - }else{ - state.title = '修改生产装置'; - state.productionDeviceForm = JSON.parse(JSON.stringify(value)); - } - }; - - //新增修改提交 - const submitProductionDevice = async () => { - productionDeviceFormRef.value.validate( async (valid: Boolean) => { - if(valid){ - if(state.title === '新增生产装置'){ - let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm); - if(res.data.code === '200'){ - ElMessage({ - type:'success', - message:'生产装置新增成功', - duration:2000 - }); - state.isShowProductionDeviceDialog = false; - context.emit('refreshProductionDevice'); - }else{ - ElMessage({ - type:'warning', - message:res.data.msg - }); - } - }else{ - let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm); - if(res.data.code === '200'){ - ElMessage({ - type:'success', - message:'生产装置修改成功', - duration:2000 + //新增修改提交 + const submitProductionDevice = async () => { + productionDeviceFormRef.value.validate(async (valid: Boolean) => { + if (valid) { + if (state.title === '新增生产装置') { + let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '生产装置新增成功', + duration: 2000 }); state.isShowProductionDeviceDialog = false; context.emit('refreshProductionDevice'); - }else{ - ElMessage({ - type:'warning', - message:res.data.msg - }); - } + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); } - }else{ - ElMessage({ - type:'warning', - message:'请完善基本信息', - }); + } else { + let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '生产装置修改成功', + duration: 2000 + }); + state.isShowProductionDeviceDialog = false; + context.emit('refreshProductionDevice'); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } } - }) - - } + } else { + ElMessage({ + type: 'warning', + message: '请完善基本信息' + }); + } + }); + }; - return{ - ...toRefs(state), - productionDeviceFormRef, - submitProductionDevice, - openProductionDeviceDialog, - }; - } + return { + ...toRefs(state), + productionDeviceFormRef, + submitProductionDevice, + openProductionDeviceDialog + }; } +}; </script> <style scoped> -.input-length{ - width:85%; +.input-length { + width: 85%; } </style> -- Gitblit v1.9.2