| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog title="新建应急物资代码" v-model="isShowDialog" width="50%" draggable :fullscreen="full"> |
| | | <el-dialog |
| | | :title="titles" |
| | | v-model="isShowDialog" |
| | | width="50%" |
| | | draggable |
| | | :fullscreen="full" |
| | | > |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" size="default" label-width="120px"> |
| | | <el-form |
| | | ref="ruleFormRef" |
| | | :rules="rules" |
| | | :model="ruleForm" |
| | | size="default" |
| | | label-width="120px" |
| | | :disabled="disabled" |
| | | > |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="物资名称" prop="name"> |
| | |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="物资分类" prop="classification"> |
| | | <el-select v-model="ruleForm.classification" class="w100" placeholder="请选择"> |
| | | <el-option label="事故气体吸收装置" value="admin"></el-option> |
| | | <el-option label="通讯设施" value="common"></el-option> |
| | | <el-option label="交通运输工具" value="common"></el-option> |
| | | <el-option label="照明装置" value="common"></el-option> |
| | | <el-option label="防护器材" value="common"></el-option> |
| | | <el-option label="其它" value="common"></el-option> |
| | | <el-option label="事故气体吸收装置" value="事故气体吸收装置"></el-option> |
| | | <el-option label="通讯设施" value="通讯设施"></el-option> |
| | | <el-option label="交通运输工具" value="交通运输工具"></el-option> |
| | | <el-option label="照明装置" value="照明装置"></el-option> |
| | | <el-option label="防护器材" value="防护器材"></el-option> |
| | | <el-option label="其它" value="其它"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="生产日期" prop="productionDate"> |
| | | <el-date-picker v-model="ruleForm.productionDate" type="datetime" class="w100" placeholder="选择日期时间" /> |
| | | <el-date-picker |
| | | v-model="ruleForm.productionDate" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="物资状态" prop="status"> |
| | | <el-select v-model="ruleForm.status" class="w100" placeholder="请选择"> |
| | | <el-option label="完好" value="admin"></el-option> |
| | | <el-option label="维修" value="common"></el-option> |
| | | <el-option label="完好" value="完好"></el-option> |
| | | <el-option label="维修" value="维修"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="检查周期月" prop="inspectPeiod"> |
| | | <el-input v-model.number="ruleForm.inspectPeiod" type="" maxlength="4" placeholder="请填写使用期限"></el-input> |
| | | <el-input |
| | | v-model.number="ruleForm.inspectPeiod" |
| | | type="" |
| | | maxlength="4" |
| | | placeholder="请填写使用期限" |
| | | ></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="投用日期" prop="useDate"> |
| | | <el-date-picker v-model="ruleForm.useDate" type="datetime" class="w100" placeholder="选择日期时间" /> |
| | | <el-date-picker |
| | | v-model="ruleForm.useDate" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="检查日期" prop="inspectDate"> |
| | | <el-date-picker v-model="ruleForm.inspectDate" type="datetime" class="w100" placeholder="选择日期时间" /> |
| | | <el-date-picker |
| | | v-model="ruleForm.inspectDate" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="下次检查日期" prop="nextInspectDate"> |
| | | <el-date-picker v-model="ruleForm.nextInspectDate" type="datetime" class="w100" placeholder="选择日期时间" /> |
| | | <el-date-picker |
| | | v-model="ruleForm.nextInspectDate" |
| | | type="datetime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="经度(度)"> |
| | | <el-input v-model="ruleForm.longitude" placeholder="请填写经度(度)"></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-input v-model="ruleForm.latitude" placeholder="请填写纬度(度)"></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-input v-model="ruleForm.longitude" placeholder="请填写经度(度)"></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-input v-model="ruleForm.latitude" placeholder="请填写纬度(度)"></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-input v-model="ruleForm.principalUserUid" placeholder="请选择" class="input-with-select"> |
| | |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="onCancel(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> |
| | | <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | import { reactive, ref, defineComponent } from 'vue'; |
| | | |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { ElMessage } from 'element-plus'; |
| | | |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | import UserSelections from '/@/components/userSelections/index.vue'; |
| | | import PersonInCharge from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue'; |
| | | import RegionsCheckbox from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue'; |
| | | import { emergencyResourcesApi } from '/@/api/emergencyResources'; |
| | | interface From { |
| | | productionDate: string; |
| | | useDate: string; |
| | | inspectDate: string; |
| | | nextInspectDate: string; |
| | | inspectPeiod: number | null; |
| | | count: number | null; |
| | | usePeriod: number | null; |
| | | departmentId: number | null; |
| | | principalUserUid: number | null; |
| | | status: string; |
| | | classification: string; |
| | | name: string; |
| | | number: string; |
| | | model: string; |
| | | longitude: string; |
| | | latitude: string; |
| | | use: string; |
| | | areaId: number | null; |
| | | place: string; |
| | | useExplain: string; |
| | | } |
| | | import {emergencySuppliesApi} from "/@/api/emergencyResources"; |
| | | |
| | | export default defineComponent({ |
| | | name: 'openAdd', |
| | | components: { |
| | |
| | | UserSelections, |
| | | RegionsCheckbox, |
| | | }, |
| | | setup() { |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | | |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | //定义表单 |
| | | const ruleForm = reactive<From>({ |
| | | const ruleForm = ref ({ |
| | | productionDate: '', |
| | | useDate: '', |
| | | inspectDate: '', |
| | | nextInspectDate: '', |
| | | inspectPeiod: null, |
| | | count: null, |
| | | usePeriod: null, |
| | | departmentId: null, |
| | | principalUserUid: null, |
| | | inspectPeiod: '', |
| | | count: '', |
| | | usePeriod: '', |
| | | departmentId: '', |
| | | principalUserUid: '', |
| | | status: '', |
| | | classification: '', |
| | | name: '', |
| | |
| | | place: '', |
| | | useExplain: '', |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | // 打开弹窗 |
| | | const openDialog = () => { |
| | | // state.ruleForm = row; |
| | | isShowDialog.value = true; |
| | | }; |
| | | |
| | | // 取消 |
| | | const onCancel = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | | isShowDialog.value = true; |
| | | titles.value = title; |
| | | disabled.value = type; |
| | | if (title == '查看应急物资代码' || title == '修改应急物资代码') { |
| | | emergencySuppliesApi() |
| | | .seeEmergencySupplies(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | //日期选择器 |
| | | const value1 = ref(''); |
| | |
| | | label: 'Level one 1', |
| | | children: [ |
| | | { |
| | | value: '1-1', |
| | | value: '11', |
| | | label: 'Level two 1-1', |
| | | children: [ |
| | | { |
| | | value: '1-1-1', |
| | | value: '111', |
| | | label: 'Level three 1-1-1', |
| | | }, |
| | | ], |
| | |
| | | label: 'Level one 2', |
| | | children: [ |
| | | { |
| | | value: '2-1', |
| | | value: '21', |
| | | label: 'Level two 2-1', |
| | | children: [ |
| | | { |
| | | value: '2-1-1', |
| | | value: '211', |
| | | label: 'Level three 2-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2-2', |
| | | value: '22', |
| | | label: 'Level two 2-2', |
| | | children: [ |
| | | { |
| | | value: '2-2-1', |
| | | value: '221', |
| | | label: 'Level three 2-2-1', |
| | | }, |
| | | ], |
| | |
| | | label: 'Level one 3', |
| | | children: [ |
| | | { |
| | | value: '3-1', |
| | | value: '31', |
| | | label: 'Level two 3-1', |
| | | children: [ |
| | | { |
| | | value: '3-1-1', |
| | | value: '311', |
| | | label: 'Level three 3-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3-2', |
| | | value: '32', |
| | | label: 'Level two 3-2', |
| | | children: [ |
| | | { |
| | | value: '3-2-1', |
| | | value: '321', |
| | | label: 'Level three 3-2-1', |
| | | }, |
| | | ], |
| | |
| | | label: '生产运行部', |
| | | children: [ |
| | | { |
| | | value: '2-1', |
| | | value: '21', |
| | | label: '灌装一班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '2-2', |
| | | value: '22', |
| | | label: '工艺四班', |
| | | children: [], |
| | | }, |
| | |
| | | label: '设备部', |
| | | children: [ |
| | | { |
| | | value: '3-1', |
| | | value: '31', |
| | | label: '仪表班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '3-2', |
| | | value: '32', |
| | | label: '机修班', |
| | | children: [], |
| | | }, |
| | |
| | | }, |
| | | ], |
| | | }); |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | emergencyResourcesApi() |
| | | .emergencySuppliesAdd(ruleForm) |
| | | .then((res) => { |
| | | console.log(res); |
| | | }); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | }; |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (title: string, formEl: FormInstance | undefined) => { |
| | | if (title == '新建应急物资代码') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | emergencySuppliesApi() |
| | | .addEmergencySupplies(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | formEl.resetFields(); |
| | | }); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | } |
| | | else if (title == '修改应急物资代码') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | emergencySuppliesApi() |
| | | .editEmergencySupplies(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: '修改成功', |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | formEl.resetFields(); |
| | | }); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | formEl.resetFields(); |
| | | ruleForm.value = { |
| | | productionDate: '', |
| | | useDate: '', |
| | | inspectDate: '', |
| | | nextInspectDate: '', |
| | | inspectPeiod: '', |
| | | count: '', |
| | | usePeriod: '', |
| | | departmentId: '', |
| | | principalUserUid: '', |
| | | status: '', |
| | | classification: '', |
| | | name: '', |
| | | number: '', |
| | | model: '', |
| | | longitude: '', |
| | | latitude: '', |
| | | use: '', |
| | | areaId: null, |
| | | place: '', |
| | | useExplain: '', |
| | | } |
| | | } |
| | | } |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | // 应急队伍弹窗 |
| | | const Shows = ref(); |
| | | const daiInpt = () => { |
| | |
| | | return { |
| | | openDialog, |
| | | isShowDialog, |
| | | onCancel, |
| | | responsibleDepartment, |
| | | data, |
| | | Search, |
| | |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | resetForm, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | }; |
| | | }, |
| | | }); |