From ae0e1c96b6da4f4515bf449db45a4ee839d2c61f Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期四, 14 七月 2022 09:08:37 +0800 Subject: [PATCH] 添加修改页面 --- src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue | 220 +++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 172 insertions(+), 48 deletions(-) diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue index e612004..fc3be6a 100644 --- a/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue +++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue @@ -1,76 +1,200 @@ <template> <div class="system-add-menu-container"> - <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="769px"> - <el-form :model="ruleForm" size="default" label-width="80px"> + <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px"> + <el-form + :model="productionDeviceForm" + :rules="productionDeviceFormRules" + ref="productionDeviceFormRef" + size="default" + label-width="120px" + > <el-row :gutter="35"> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="生产装置名称"> - <el-input v-model="roleForm.produceDeviceName" placeholder="请输入生产装置名称" clearable></el-input> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="所属部门"> - <el-select v-model="roleForm.depName" placeholder="请选择所属部门" clearable filterable></el-select> + <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-form-item> </el-col> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-form-item label="风险等级"> - <el-select v-model="roleForm.riskLevel" placeholder="请选择风险等级"clearable filterable></el-select> + <el-form-item label="所属部门" prop="depId"> + <el-cascader + :options="departmentList" + :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" + 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-form-item> </el-col> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-form-item label="区域位置"> - <el-input v-model="roleForm.location" type="textarea" placeholder="请输入区域位置" maxlength="150"></el-input> + <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> + </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-form-item> </el-col> </el-row> </el-form> <template #footer> - <span class="dialog-footer"> - <el-button @click="onCancel" size="default">取 消</el-button> - <el-button type="primary" @click="onSubmit" 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, - depName: number | null, - riskLevel: number | null, - location: string, - } - } - import { reactive, toRefs } from 'vue' - export default { - name: "productionDeviceDialog", - setup() { - const state = reactive<stateType>({ - isShowProductionDeviceDialog: false, - productionDeviceForm: { - produceDeviceName: '', - depName: null, - riskLevel: null, - location: '', - }, +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' }] + } + }); + + //打开模态框 + 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 openProductionDeviceDialog = () => { - state.isShowProductionDeviceDialog = true; - }; + //新增修改提交 + 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 + }); + state.isShowProductionDeviceDialog = false; + context.emit('refreshProductionDevice'); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + } else { + ElMessage({ + type: 'warning', + message: '请完善基本信息' + }); + } + }); + }; - return{ - ...toRefs(state), - openProductionDeviceDialog, - }; - } + return { + ...toRefs(state), + productionDeviceFormRef, + submitProductionDevice, + openProductionDeviceDialog + }; } +}; </script> <style scoped> - +.input-length { + width: 85%; +} </style> -- Gitblit v1.9.2