From 44dae1108f8bc7134fbbc39a09c581bf3c4e0bb2 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期四, 04 八月 2022 16:47:42 +0800 Subject: [PATCH] 数据对接 --- src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue | 1276 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 624 insertions(+), 652 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue index 9d994f4..238d4cd 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue @@ -1,202 +1,174 @@ <template> - <div class="system-edit-user-container"> - <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" - :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.name" 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="number"> - <el-input v-model="ruleForm.number" 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="use"> - <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="物资型号" prop="model"> - <el-input v-model="ruleForm.model" 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="departmentId"> - <el-tree-select v-model="ruleForm.departmentId" :data="data" 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="物资分类" 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-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="place"> - <el-input v-model="ruleForm.place" 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="count"> - <el-input v-model.number="ruleForm.count" maxlength="6" 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="productionDate"> - <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-form-item label="使用期限(天)" prop="usePeriod"> - <el-input v-model.number="ruleForm.usePeriod" maxlength="6" 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="status"> - <el-select v-model="ruleForm.status" class="w100" placeholder="请选择"> - <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-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-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" 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" - /> - </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="选择日期时间" - /> - </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"> - <template #append> - <el-button :icon="Search" @click="daiInpt" /> - </template> - </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-table--> -<!-- :data="dataList"--> -<!-- style="width: 100%"--> -<!-- highlight-current-row>--> -<!-- <el-table-column label="保养结果" prop="maintainResult" width="170">--> -<!-- <template slot-scope="scope">--> -<!-- <el-select size="mini">--> -<!-- <el-option value="is_hot_tag" label="热门标签"></el-option>--> -<!-- <el-option value="is_latest_track_tag" label="最新赛道"></el-option>--> -<!-- <el-option value="is_new_subhangye_tag" label="新体系子行业"></el-option>--> -<!-- </el-select>--> -<!-- </template>--> -<!-- </el-table-column>--> -<!-- <el-table-column label="创建人" prop="suppliesId" width="170"></el-table-column>--> -<!-- <el-table-column label="创建时间" prop="maintainTime" width="170"></el-table-column>--> -<!-- </el-table>--> -<!-- </el-form-item>--> -<!-- </el-col>--> - </el-row> - </el-form> - <template #footer> + <div class="system-edit-user-container"> + <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" :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.name" 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="number"> + <el-input v-model="ruleForm.number" 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="use"> + <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="物资型号" prop="model"> + <el-input v-model="ruleForm.model" 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="departmentId"> + <el-tree-select v-model="ruleForm.departmentId" :data="data" 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="物资分类" 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-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="place"> + <el-input v-model="ruleForm.place" 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="count"> + <el-input v-model.number="ruleForm.count" maxlength="6" 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="productionDate"> + <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-form-item label="使用期限(天)" prop="usePeriod"> + <el-input v-model.number="ruleForm.usePeriod" maxlength="6" 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="status"> + <el-select v-model="ruleForm.status" class="w100" placeholder="请选择"> + <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-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-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" 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" + /> + </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="选择日期时间" + /> + </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"> + <template #append> + <el-button :icon="Search" @click="daiInpt" /> + </template> + </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-table :data="dataList" style="width: 100%" highlight-current-row> + <el-table-column label="保养结果" prop="maintainResult" width="170"> + <template slot-scope="scope"> + <el-select size="mini" v-model="dataList.maintainResult"> + <el-option value="正常" label="正常"></el-option> + <el-option value="异常" label="异常"></el-option> + </el-select> + </template> + </el-table-column> + <el-table-column label="创建人" prop="userUid" width="170"></el-table-column> + <el-table-column label="创建时间" prop="maintainTime" width="170"></el-table-column> + </el-table> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> <span class="dialog-footer"> <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" /> - <userSelections ref="userRef" /> - <RegionsCheckbox ref="openRef" /> - </div> + </template> + </el-dialog> + <PersonInCharge ref="Shows" /> + <userSelections ref="userRef" /> + <RegionsCheckbox ref="openRef" /> + </div> </template> <script lang="ts"> @@ -206,478 +178,478 @@ 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 {emergencySuppliesApi} from "/@/api/emergencyResources"; +import UserSelections from '../../../../../components/userSelections/index.vue'; +import PersonInCharge from '../component/personInCharge.vue'; +import RegionsCheckbox from '../component/regionsCheckbox.vue'; +import { emergencySuppliesApi } from '../../../../../api/emergencyResources'; export default defineComponent({ - name: 'openAdd', - components: { - PersonInCharge, - UserSelections, - RegionsCheckbox, - }, - setup(props, { emit }) { - const isShowDialog = ref(false); + name: 'openAdd', + components: { + PersonInCharge, + UserSelections, + RegionsCheckbox, + }, + setup(props, { emit }) { + const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>(); - //定义表单 - const ruleForm = ref ({ - productionDate: '', - useDate: '', - inspectDate: '', - nextInspectDate: '', - inspectPeiod: '', - count: '', - usePeriod: '', - departmentId: '', - principalUserUid: '', - status: '', - classification: '', - name: '', - number: '', - model: '', - longitude: '', - latitude: '', - use: '', - areaId: null, - place: '', - useExplain: '', - }); - 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; - } - }); - } - }; - //日期选择器 - const value1 = ref(''); - // 可选择树 - const treeSelect = ref(); - const tree = [ - { - value: '1', - label: 'Level one 1', - children: [ - { - value: '11', - label: 'Level two 1-1', - children: [ - { - value: '111', - label: 'Level three 1-1-1', - }, - ], - }, - ], - }, - { - value: '2', - label: 'Level one 2', - children: [ - { - value: '21', - label: 'Level two 2-1', - children: [ - { - value: '211', - label: 'Level three 2-1-1', - }, - ], - }, - { - value: '22', - label: 'Level two 2-2', - children: [ - { - value: '221', - label: 'Level three 2-2-1', - }, - ], - }, - ], - }, - { - value: '3', - label: 'Level one 3', - children: [ - { - value: '31', - label: 'Level two 3-1', - children: [ - { - value: '311', - label: 'Level three 3-1-1', - }, - ], - }, - { - value: '32', - label: 'Level two 3-2', - children: [ - { - value: '321', - label: 'Level three 3-2-1', - }, - ], - }, - ], - }, - ]; - //定义树形下拉框 - const responsibleDepartment = ref(); - const data = [ - { - value: '1', - label: '广汇能源综合物流发展有限责任公司', - children: [ - { - value: 11, - label: '经营班子', - children: [], - }, - ], - }, - { - value: '2', - label: '生产运行部', - children: [ - { - value: '21', - label: '灌装一班', - children: [], - }, - { - value: '22', - label: '工艺四班', - children: [], - }, - ], - }, - { - value: '3', - label: '设备部', - children: [ - { - value: '31', - label: '仪表班', - children: [], - }, - { - value: '32', - label: '机修班', - children: [], - }, - ], - }, - ]; - // 必填项提示 - const rules = reactive<FormRules>({ - name: [ - { - required: true, - message: '物资名称不能为空', - trigger: 'change', - }, - ], - number: [ - { - required: true, - message: '物资编号不能为空', - trigger: 'change', - }, - ], - use: [ - { - required: true, - message: '物资用途不能为空', - trigger: 'change', - }, - ], - model: [ - { - required: true, - message: '物资型号不能为空', - trigger: 'change', - }, - ], - departmentId: [ - { - required: true, - message: '负责部门不能为空', - trigger: 'change', - }, - ], - classification: [ - { - required: true, - message: '物资分类不能为空', - trigger: 'change', - }, - ], - place: [ - { - required: true, - message: '存放位置不能为空', - trigger: 'change', - }, - ], - count: [ - { - required: true, - message: '存储数量不能为空', - trigger: 'change', - }, - { type: 'number', message: '请输入数字类型', trigger: 'change' }, - ], - productionDate: [ - { - required: true, - message: '生产日期不能为空', - trigger: 'change', - }, - ], - usePeriod: [ - { - required: true, - message: '使用期限不能为空', - trigger: 'change', - }, - { type: 'number', message: '请输入数字类型', trigger: 'change' }, - ], - status: [ - { - required: true, - message: '物资状态不能为空', - trigger: 'change', - }, - ], - inspectPeiod: [ - { - required: true, - message: '检查周期月不能为空', - trigger: 'change', - }, - { type: 'number', message: '请输入数字类型', trigger: 'change' }, - ], - useDate: [ - { - required: true, - message: '投用日期不能为空', - trigger: 'change', - }, - ], - inspectDate: [ - { - required: true, - message: '检查日期不能为空', - trigger: 'change', - }, - ], - nextInspectDate: [ - { - required: true, - message: '下次检查日期不能为空', - trigger: 'change', - }, - ], - }); - // 表单提交验证必填项 - 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 = () => { - Shows.value.openDailog(); - }; - // 选择区域弹窗 - const openRef = ref(); - const regionsDialog = () => { - openRef.value.openDailog(); - }; - // 打开用户选择弹窗 - const userRef = ref(); - 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 = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - isShowDialog, - responsibleDepartment, - data, - Search, - ruleForm, - value1, - treeSelect, - tree, - daiInpt, - Shows, - ruleFormRef, - submitForm, - rules, - openUser, - userRef, - regionsDialog, - openRef, - toggleFullscreen, - FullScreen, - full, - resetForm, - titles, - disabled, - emit, - dataList, - }; - }, + const ruleFormRef = ref<FormInstance>(); + //定义表单 + const ruleForm = ref({ + productionDate: '', + useDate: '', + inspectDate: '', + nextInspectDate: '', + inspectPeiod: '', + count: '', + usePeriod: '', + departmentId: '', + principalUserUid: '', + status: '', + classification: '', + name: '', + number: '', + model: '', + longitude: '', + latitude: '', + use: '', + areaId: null, + place: '', + useExplain: '', + }); + 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; + } + }); + } + }; + //日期选择器 + const value1 = ref(''); + // 可选择树 + const treeSelect = ref(); + const tree = [ + { + value: '1', + label: 'Level one 1', + children: [ + { + value: '11', + label: 'Level two 1-1', + children: [ + { + value: '111', + label: 'Level three 1-1-1', + }, + ], + }, + ], + }, + { + value: '2', + label: 'Level one 2', + children: [ + { + value: '21', + label: 'Level two 2-1', + children: [ + { + value: '211', + label: 'Level three 2-1-1', + }, + ], + }, + { + value: '22', + label: 'Level two 2-2', + children: [ + { + value: '221', + label: 'Level three 2-2-1', + }, + ], + }, + ], + }, + { + value: '3', + label: 'Level one 3', + children: [ + { + value: '31', + label: 'Level two 3-1', + children: [ + { + value: '311', + label: 'Level three 3-1-1', + }, + ], + }, + { + value: '32', + label: 'Level two 3-2', + children: [ + { + value: '321', + label: 'Level three 3-2-1', + }, + ], + }, + ], + }, + ]; + //定义树形下拉框 + const responsibleDepartment = ref(); + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: 11, + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '21', + label: '灌装一班', + children: [], + }, + { + value: '22', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '31', + label: '仪表班', + children: [], + }, + { + value: '32', + label: '机修班', + children: [], + }, + ], + }, + ]; + // 必填项提示 + const rules = reactive<FormRules>({ + name: [ + { + required: true, + message: '物资名称不能为空', + trigger: 'change', + }, + ], + number: [ + { + required: true, + message: '物资编号不能为空', + trigger: 'change', + }, + ], + use: [ + { + required: true, + message: '物资用途不能为空', + trigger: 'change', + }, + ], + model: [ + { + required: true, + message: '物资型号不能为空', + trigger: 'change', + }, + ], + departmentId: [ + { + required: true, + message: '负责部门不能为空', + trigger: 'change', + }, + ], + classification: [ + { + required: true, + message: '物资分类不能为空', + trigger: 'change', + }, + ], + place: [ + { + required: true, + message: '存放位置不能为空', + trigger: 'change', + }, + ], + count: [ + { + required: true, + message: '存储数量不能为空', + trigger: 'change', + }, + { type: 'number', message: '请输入数字类型', trigger: 'change' }, + ], + productionDate: [ + { + required: true, + message: '生产日期不能为空', + trigger: 'change', + }, + ], + usePeriod: [ + { + required: true, + message: '使用期限不能为空', + trigger: 'change', + }, + { type: 'number', message: '请输入数字类型', trigger: 'change' }, + ], + status: [ + { + required: true, + message: '物资状态不能为空', + trigger: 'change', + }, + ], + inspectPeiod: [ + { + required: true, + message: '检查周期月不能为空', + trigger: 'change', + }, + { type: 'number', message: '请输入数字类型', trigger: 'change' }, + ], + useDate: [ + { + required: true, + message: '投用日期不能为空', + trigger: 'change', + }, + ], + inspectDate: [ + { + required: true, + message: '检查日期不能为空', + trigger: 'change', + }, + ], + nextInspectDate: [ + { + required: true, + message: '下次检查日期不能为空', + trigger: 'change', + }, + ], + }); + // 表单提交验证必填项 + 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 = () => { + Shows.value.openDailog(); + }; + // 选择区域弹窗 + const openRef = ref(); + const regionsDialog = () => { + openRef.value.openDailog(); + }; + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + const dataList = ref() + // const dataList = [ + // { + // maintainResult: '1', + // suppliesId: 'Tom', + // maintainTime: '2016-05-02', + // }, + // { + // maintainResult: '1', + // 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 = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + isShowDialog, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + submitForm, + rules, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + resetForm, + titles, + disabled, + emit, + dataList, + }; + }, }); </script> <style scoped lang="scss"> .textarea { - height: 168px !important; + height: 168px !important; } .textarea ::v-deep .el-textarea__inner { - height: 168px !important; + height: 168px !important; } ::v-deep .el-table__cell { - font-weight: 400; + font-weight: 400; } .el-divider--horizontal { - height: 0; - margin: 0; - border-top: transparent; + height: 0; + margin: 0; + border-top: transparent; } .el-select { - width: 100%; + width: 100%; } </style> \ No newline at end of file -- Gitblit v1.9.2