From c64c8f43ec1a3d88feb1f915fd488040b6358e7d Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期二, 09 八月 2022 19:04:12 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue | 419 ++++++++++++++++++++++++++++------------------------------- 1 files changed, 200 insertions(+), 219 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue index f4cc6e1..17defc0 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue @@ -1,8 +1,8 @@ <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" @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"> + <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"> @@ -19,15 +19,15 @@ <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> @@ -35,18 +35,27 @@ </el-col> <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" :data="data" class="w100" placeholder="请选择" /> + <el-tree-select + 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="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="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> @@ -62,7 +71,13 @@ </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"> @@ -73,49 +88,61 @@ <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="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="选择日期时间" /> + <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-input v-model="ruleForm.useExplain" placeholder="请填写使用说明"></el-input> + <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="选择日期时间" /> + <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-item label="负责人" prop="principalUserName"> + <el-input v-model="ruleForm.principalUserName" placeholder="请选择" class="input-with-select"> <template #append> <el-button :icon="Search" @click="daiInpt" /> </template> @@ -126,71 +153,54 @@ </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> - <PersonInCharge ref="Shows" /> + <DailogSearchUser ref="Shows" @SearchUser="onUser"></DailogSearchUser> <userSelections ref="userRef" /> <RegionsCheckbox ref="openRef" /> </div> </template> <script lang="ts"> -import { reactive, ref, defineComponent } 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 { 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/contingencyManagement/emergencyResources'; +import { goalManagementApi } from '/@/api/goalManagement'; + export default defineComponent({ name: 'openAdd', components: { PersonInCharge, UserSelections, RegionsCheckbox, + DailogSearchUser, }, - 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, + inspectPeriod: '', + count: '', + usePeriod: '', + departmentId: '', + principalUserUid: '', + principalUserName: '', status: '', classification: '', name: '', @@ -203,139 +213,48 @@ place: '', useExplain: '', }); + const titles = ref(); + const disabled = ref(); // 打开弹窗 - const openDialog = () => { - // state.ruleForm = row; + const openDialog = (title: string, id: number, type: boolean) => { isShowDialog.value = true; - }; - - // 取消 - const onCancel = (formEl: FormInstance | undefined) => { - isShowDialog.value = false; - if (!formEl) return; - formEl.resetFields(); + 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 treeSelect = ref(); - const tree = [ - { - value: '1', - label: 'Level one 1', - children: [ - { - value: '1-1', - label: 'Level two 1-1', - children: [ - { - value: '1-1-1', - label: 'Level three 1-1-1', - }, - ], - }, - ], - }, - { - value: '2', - label: 'Level one 2', - children: [ - { - value: '2-1', - label: 'Level two 2-1', - children: [ - { - value: '2-1-1', - label: 'Level three 2-1-1', - }, - ], - }, - { - value: '2-2', - label: 'Level two 2-2', - children: [ - { - value: '2-2-1', - label: 'Level three 2-2-1', - }, - ], - }, - ], - }, - { - value: '3', - label: 'Level one 3', - children: [ - { - value: '3-1', - label: 'Level two 3-1', - children: [ - { - value: '3-1-1', - label: 'Level three 3-1-1', - }, - ], - }, - { - value: '3-2', - label: 'Level two 3-2', - children: [ - { - value: '3-2-1', - label: 'Level three 3-2-1', - }, - ], - }, - ], - }, - ]; + //部门树 + 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 = [ - { - value: '1', - label: '广汇能源综合物流发展有限责任公司', - children: [ - { - value: 11, - label: '经营班子', - children: [], - }, - ], - }, - { - value: '2', - label: '生产运行部', - children: [ - { - value: '2-1', - label: '灌装一班', - children: [], - }, - { - value: '2-2', - label: '工艺四班', - children: [], - }, - ], - }, - { - value: '3', - label: '设备部', - children: [ - { - value: '3-1', - label: '仪表班', - children: [], - }, - { - value: '3-2', - label: '机修班', - children: [], - }, - ], - }, - ]; + const data = ref(); + const propse = { + label: 'depName', + children: 'children', + value: 'depId', + }; + onMounted(() => { + department(); + }); // 必填项提示 const rules = reactive<FormRules>({ name: [ @@ -417,7 +336,7 @@ trigger: 'change', }, ], - inspectPeiod: [ + inspectPeriod: [ { required: true, message: '检查周期月不能为空', @@ -446,23 +365,77 @@ trigger: 'change', }, ], + principalUserName:[], + useExplain:[] }); // 表单提交验证必填项 - 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); + } + }); + } }; - // 应急队伍弹窗 + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 人名 const Shows = ref(); const daiInpt = () => { Shows.value.openDailog(); @@ -486,17 +459,20 @@ full.value = false; } }; + const onUser = (e: any) => { + ruleForm.value.principalUserUid = e.uid; + ruleForm.value.principalUserName = e.realName; + }; return { openDialog, isShowDialog, - onCancel, responsibleDepartment, data, + propse, + department, Search, ruleForm, value1, - treeSelect, - tree, daiInpt, Shows, ruleFormRef, @@ -509,6 +485,11 @@ toggleFullscreen, FullScreen, full, + resetForm, + titles, + disabled, + emit, + onUser }; }, }); -- Gitblit v1.9.2