| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog |
| | | :title="titles" |
| | | v-model="isShowDialog" |
| | | width="50%" |
| | | draggable |
| | | :fullscreen="full" |
| | | > |
| | | <el-dialog :title="titles" v-model="isShowDialog" @close="resetForm(ruleFormRef)" 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" |
| | | :disabled="disabled" |
| | | > |
| | | <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-input v-model="ruleForm.use" 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.areaId" placeholder="请选择" class="input-with-select">--> |
| | | <!-- <template #append>--> |
| | | <!-- <el-button :icon="Search" @click="regionsDialog" />--> |
| | | <!-- </template>--> |
| | | <!-- </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.areaId" placeholder="请选择" class="input-with-select">--> |
| | | <!-- <template #append>--> |
| | | <!-- <el-button :icon="Search" @click="regionsDialog" />--> |
| | | <!-- </template>--> |
| | | <!-- </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="model"> |
| | | <el-input v-model="ruleForm.model" placeholder="请填写物资型号"></el-input> |
| | |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="负责部门" prop="departmentId"> |
| | | <el-tree-select |
| | | v-model="ruleForm.departmentId" |
| | | check-strictly |
| | | :data="data" |
| | | :props="propse" |
| | | class="w100" |
| | | clearable |
| | | :render-after-expand="false" |
| | | placeholder="请选择" |
| | | /> |
| | | v-model="ruleForm.departmentId" |
| | | check-strictly |
| | | :data="data" |
| | | :props="propse" |
| | | class="w100" |
| | | clearable |
| | | :render-after-expand="false" |
| | | placeholder="请选择" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <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="事故气体吸收装置"></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="1"></el-option> |
| | | <el-option label="通讯设施" value="2"></el-option> |
| | | <el-option label="交通运输工具" value="3"></el-option> |
| | | <el-option label="照明装置" value="4"></el-option> |
| | | <el-option label="防护器材" value="5"></el-option> |
| | | <el-option label="其它" value="6"></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="productionDate"> |
| | | <el-date-picker |
| | | v-model="ruleForm.productionDate" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | 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="完好"></el-option> |
| | | <el-option label="维修" value="维修"></el-option> |
| | | <el-option label="完好" :value="1"></el-option> |
| | | <el-option label="维修" :value="2"></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-form-item label="检查周期月" prop="inspectPeriod"> |
| | | <el-input v-model.number="ruleForm.inspectPeriod" 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="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | <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-form-item label="使用说明"> |
| | | <el-form-item label="使用说明" prop="useExplain"> |
| | | <el-input v-model="ruleForm.useExplain" type="textarea" 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="inspectDate"> |
| | | <el-date-picker |
| | | v-model="ruleForm.inspectDate" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | 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" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | /> |
| | | 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-item label="负责人" prop="principalUserName"> |
| | | <el-input v-model="ruleForm.principalUserName" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="daiInpt" /> |
| | | </template> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <PersonInCharge ref="Shows" /> |
| | | <DailogSearchUser ref="Shows" @SearchUser="onUser"></DailogSearchUser> |
| | | <userSelections ref="userRef" /> |
| | | <RegionsCheckbox ref="openRef" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { reactive, ref, defineComponent,onMounted, } from 'vue'; |
| | | import { reactive, ref, defineComponent, onMounted } from 'vue'; |
| | | |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { ElMessage } from 'element-plus'; |
| | | |
| | | import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; |
| | | 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 {emergencySuppliesApi} from "/@/api/emergencyResources"; |
| | | import {goalManagementApi} from "/@/api/goalManagement"; |
| | | import { emergencySuppliesApi } from '/@/api/contingencyManagement/emergencyResources'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'openAdd', |
| | |
| | | PersonInCharge, |
| | | UserSelections, |
| | | RegionsCheckbox, |
| | | DailogSearchUser, |
| | | }, |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | | |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | //定义表单 |
| | | const ruleForm = ref ({ |
| | | const ruleForm = ref({ |
| | | productionDate: '', |
| | | useDate: '', |
| | | inspectDate: '', |
| | | nextInspectDate: '', |
| | | inspectPeiod: '', |
| | | inspectPeriod: '', |
| | | count: '', |
| | | usePeriod: '', |
| | | departmentId: '', |
| | | principalUserUid: '', |
| | | principalUserName: '', |
| | | status: '', |
| | | classification: '', |
| | | name: '', |
| | |
| | | place: '', |
| | | useExplain: '', |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | // 打开弹窗 |
| | | 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; |
| | | } |
| | | }); |
| | | } |
| | | 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(''); |
| | | //部门树 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | .getTreedepartment() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | //部门树 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | .getTreedepartment() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref(); |
| | | const data = ref() |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | value: 'depId', |
| | | }; |
| | | onMounted(() => { |
| | | department(); |
| | | }); |
| | | const data = ref(); |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | value: 'depId', |
| | | }; |
| | | onMounted(() => { |
| | | department(); |
| | | }); |
| | | // 必填项提示 |
| | | const rules = reactive<FormRules>({ |
| | | name: [ |
| | |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | inspectPeiod: [ |
| | | inspectPeriod: [ |
| | | { |
| | | required: true, |
| | | message: '检查周期月不能为空', |
| | |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | principalUserName:[], |
| | | useExplain:[] |
| | | }); |
| | | // 表单提交验证必填项 |
| | | 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 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); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | // 人名 |
| | | const Shows = ref(); |
| | | const daiInpt = () => { |
| | | Shows.value.openDailog(); |
| | |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | }; |
| | | const dataList = [ |
| | | { |
| | | maintainResult: '', |
| | | suppliesId: 'Tom', |
| | | maintainTime: '2016-05-02', |
| | | }, |
| | | { |
| | | maintainResult: '', |
| | | suppliesId: 'Tom', |
| | | maintainTime: '2016-05-02', |
| | | }, |
| | | { |
| | | maintainResult: '', |
| | | suppliesId: 'Tom', |
| | | maintainTime: '2016-05-02', |
| | | }, |
| | | { |
| | | maintainResult: '', |
| | | suppliesId: 'Tom', |
| | | maintainTime: '2016-05-02', |
| | | }, |
| | | ] |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | |
| | | full.value = false; |
| | | } |
| | | }; |
| | | const onUser = (e: any) => { |
| | | ruleForm.value.principalUserUid = e.uid; |
| | | ruleForm.value.principalUserName = e.realName; |
| | | }; |
| | | return { |
| | | openDialog, |
| | | isShowDialog, |
| | | responsibleDepartment, |
| | | data, |
| | | propse, |
| | | department, |
| | | propse, |
| | | department, |
| | | Search, |
| | | ruleForm, |
| | | value1, |
| | |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | resetForm, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | dataList, |
| | | resetForm, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | onUser |
| | | }; |
| | | }, |
| | | }); |