From 44dae1108f8bc7134fbbc39a09c581bf3c4e0bb2 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: Thu, 04 Aug 2022 16:47:42 +0800
Subject: [PATCH] 数据对接
---
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue | 471 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 257 insertions(+), 214 deletions(-)
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
index f4cc6e1..91602c3 100644
--- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
@@ -1,8 +1,21 @@
<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">
@@ -19,15 +32,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 +48,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="事故气体吸收装置"></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>
@@ -62,7 +84,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,46 +101,69 @@
<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-form-item label="使用说明">
- <el-input v-model="ruleForm.useExplain" placeholder="请填写使用说明"></el-input>
+ <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">
@@ -126,8 +177,8 @@
</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>
@@ -138,37 +189,18 @@
</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 { 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";
+import {goalManagementApi} from "/@/api/goalManagement";
+
export default defineComponent({
name: 'openAdd',
components: {
@@ -176,21 +208,21 @@
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: '',
@@ -203,139 +235,48 @@
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('');
- // 可选择树
- 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: [
@@ -447,21 +388,97 @@
},
],
});
- // 表单提交验证必填项
- 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 = () => {
@@ -477,6 +494,28 @@
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 = () => {
@@ -489,14 +528,13 @@
return {
openDialog,
isShowDialog,
- onCancel,
responsibleDepartment,
data,
+ propse,
+ department,
Search,
ruleForm,
value1,
- treeSelect,
- tree,
daiInpt,
Shows,
ruleFormRef,
@@ -509,6 +547,11 @@
toggleFullscreen,
FullScreen,
full,
+ resetForm,
+ titles,
+ disabled,
+ emit,
+ dataList,
};
},
});
--
Gitblit v1.9.2