From c21f3d6df8746ec55ab9e7a64e4e130577c49fea Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期一, 25 七月 2022 09:25:53 +0800
Subject: [PATCH] 接口对接
---
src/views/contingencyManagement/contingency/component/openAdd.vue | 227 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 157 insertions(+), 70 deletions(-)
diff --git a/src/views/contingencyManagement/contingency/component/openAdd.vue b/src/views/contingencyManagement/contingency/component/openAdd.vue
index 16c05f2..d88e035 100644
--- a/src/views/contingencyManagement/contingency/component/openAdd.vue
+++ b/src/views/contingencyManagement/contingency/component/openAdd.vue
@@ -1,11 +1,13 @@
<template>
<div class="system-edit-user-container">
<el-dialog
- title="新建应急队伍管理"
+ :title="title"
v-model="isShowDialog"
width="769px"
draggable
+ :fullscreen="full"
>
+ <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
<el-form
ref="ruleFormRef"
:model="ruleForm"
@@ -16,7 +18,7 @@
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="队伍名称" prop="teamName">
- <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
+ <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称" disabled="disabled"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -29,9 +31,9 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="队伍负责人" prop="teamLeader">
+ <el-form-item label="队伍负责人" prop="principalUid">
<el-input
- v-model="ruleForm.teamLeader"
+ v-model="ruleForm.principalUid"
placeholder="请选择"
class="input-with-select"
>
@@ -42,28 +44,28 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="负责人部门" prop="responsibleDepartment">
+ <el-form-item label="负责人部门" prop="principalDepartmentId">
<el-tree-select
- v-model="ruleForm.responsibleDepartment"
+ v-model="ruleForm.principalDepartmentId"
: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="teamPhone">
- <el-input v-model="ruleForm.teamPhone" placeholder="请填写负责人手机"></el-input>
+ <el-form-item label="负责人手机" prop="principalPhone">
+ <el-input v-model="ruleForm.principalPhone" 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="telephone">
- <el-input v-model="ruleForm.telephone" placeholder="请填写固定电话"></el-input>
+ <el-form-item label="固定电话" prop="telephoneNumber">
+ <el-input v-model="ruleForm.telephoneNumber" placeholder="请填写固定电话"></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-form-item label="队伍描述" prop="teamDesc">
<el-input
class="textarea"
- v-model="ruleForm.describe"
+ v-model="ruleForm.teamDesc"
type="textarea"
maxlength="150"
placeholder="请填写队伍描述"
@@ -71,7 +73,7 @@
</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="fileList">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
@@ -88,6 +90,9 @@
</el-upload>
</el-form-item>
</el-col>
+ </el-row>
+ </el-form>
+ <el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="应急队伍人员" name="first">
@@ -117,37 +122,40 @@
</el-tabs>
</el-col>
</el-row>
- </el-form>
<template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">关闭</el-button>
- <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
- </span>
+ <span class="dialog-footer">
+ <el-button @click="isShowDialog = !isShowDialog" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="onSubmit">确定</el-button>
+ </span>
</template>
</el-dialog>
- <AddEmergencyPersonnel ref="addRef" />
- <UserSelections ref="userRef"/>
+ <AddEmergencyPersonnel ref="addRef" />
+ <UserSelections ref="userRef"/>
</div>
</template>
<script lang="ts">
-import { reactive,
+import {
+ reactive,
ref,
- defineComponent
+ defineComponent,
+ toRefs,
} from 'vue';
-
+import { ElMessage } from 'element-plus';
import type {
UploadUserFile,
TabsPaneContext,
- FormInstance,
+ // FormInstance,
FormRules,
} from 'element-plus'
import {
- Search
+ Search,
+ FullScreen
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import UserSelections from "/@/components/userSelections/index.vue"
+import {contingencyApi} from "/@/api/contingency";
// 定义表格数据类型
interface User {
personnelName: string
@@ -155,43 +163,82 @@
phone: string;
position: string;
}
+
+
+
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+ id: number;
+ label: string;
+ children?: MenuDataTree[];
+}
+interface RoleState {
+ title:string,
+ // buttonName:string,
+ isShowDialog: boolean;
+ ruleForm: {
+ teamName: string;
+ teamLevel: string;
+ principalUid: number;
+ principalDepartmentId: number;
+ principalPhone: string;
+ telephoneNumber: string;
+ teamDesc: string;
+ fileList: string,
+ };
+ menuData: Array<MenuDataTree>;
+}
export default defineComponent({
name: 'openAdd',
components: {
AddEmergencyPersonnel,
UserSelections,
},
- setup() {
- const isShowDialog = ref(false)
-
- const ruleFormRef = ref<FormInstance>()
- //定义表单
- const ruleForm = reactive({
+ setup(prop,context) {
+ const state = reactive<RoleState>({
+ isShowDialog: false,
+ title:'',
+ // buttonName:'',
+ ruleForm: {
teamName: '', // 队伍名称
- teamLeader: '', //队伍负责人
- department: [], // 负责人部门
- phone: '', // 负责人手机
- telephone: '', // 固定电话
- describe: '', // 队伍描述
+ teamLevel: '', // 队伍级别
+ principalUid: 1, // 队伍负责人
+ principalDepartmentId: 2, //负责人部门
+ principalPhone: '', // 负责人手机
+ telephoneNumber: '', // 固定电话
+ teamDesc: '', //队伍描述
+ fileList: [],
+ },
+ menuData: [],
});
// 打开弹窗
- const openDialog = () => {
- // state.ruleForm = row;
- isShowDialog.value = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- isShowDialog.value = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
+ const openDialog = (type: string, value: any) => {
+ state.isShowDialog = true;
+ if(type === '新建'){
+ state.title = '新建应急队伍管理'
+ // state.buttonName = '新增'
+ state.ruleForm = {
+ teamName: '', // 队伍名称
+ teamLevel: '', // 队伍级别
+ principalUid: 1, // 队伍负责人
+ principalDepartmentId: 2, //负责人部门
+ principalPhone: '', // 负责人手机
+ telephoneNumber: '', // 固定电话
+ teamDesc: '', //队伍描述
+ fileList: [],
+ }
+ }else{
+ state.title = '修改应急队伍管理'
+ // state.buttonName = '确定'
+ state.ruleForm = JSON.parse(JSON.stringify(value))
+ }
};
// 上传附件
const fileList = ref<UploadUserFile[]>([])
//定义树形下拉框
- const responsibleDepartment = ref()
+ const principalDepartmentId = ref()
const data = [
{
value: '1',
@@ -274,28 +321,28 @@
trigger: 'change',
},
],
- teamLeader: [
+ principalUid: [
{
required: true,
message: '队伍负责人不能为空',
trigger: 'change',
},
],
- responsibleDepartment: [
+ principalDepartmentId: [
{
required: true,
message: '负责人部门不能为空',
trigger: 'change',
},
],
- teamPhone: [
+ principalPhone: [
{
required: true,
message: '负责人手机不能为空',
trigger: 'change',
},
],
- telephone: [
+ telephoneNumber: [
{
required: true,
message: '固定电话不能为空',
@@ -303,38 +350,77 @@
},
],
})
- // 表单提交验证必填项
- const submitForm = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
- } else {
- console.log('error submit!', fields)
+ //全屏
+ const full = ref(false);
+ const toggleFullscreen = () => {
+ if (full.value == false) {
+ full.value = true;
+ } else {
+ full.value = false;
+ }
+ };
+ // 新增
+ const onSubmit = async () => {
+ if(state.title === '新建应急队伍管理'){
+ let res = await contingencyApi().addEmergencyTeam(state.ruleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'队伍新增成功',
+ // duration:2000
+ })
+ state.isShowDialog = false
+ context.emit('refreshRoleList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
}
- })
- }
+ }
+ else{
+ let res = await contingencyApi().editEmergencyTeam(state.ruleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'队伍修改成功',
+ // duration:2000
+ })
+ state.isShowDialog = false
+ context.emit('refreshRoleList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+ };
return {
openDialog,
- closeDialog,
- isShowDialog,
- onCancel,
+ // closeDialog,
+ // isShowDialog,
+ // onCancel,
fileList,
- responsibleDepartment,
+ principalDepartmentId,
data,
activeName,
handleClick,
tableData,
multipleSelection,
Search,
- ruleForm,
- ruleFormRef,
- submitForm,
+ onSubmit,
+ // ruleForm,
+ // ruleFormRef,
rules,
addRef,
userRef,
openUser,
onAddEmergencyPersonnel,
+ toggleFullscreen,
+ FullScreen,
+ full,
+ ...toRefs(state),
};
},
});
@@ -349,4 +435,5 @@
::v-deep .el-table__cell {
font-weight: 400;
}
-</style>
\ No newline at end of file
+</style>
+
--
Gitblit v1.9.2