From c4de6c18e4207fdd4d4d8c77498ae79fa057f868 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 21 七月 2022 18:27:17 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- .env.development | 2 src/api/contingency/index.ts | 26 src/api/emergencyPlan/index.ts | 13 src/views/contingencyManagement/panManagement/index.vue | 36 src/api/emergencyResources/index.ts | 21 src/views/contingencyManagement/contingency/index.vue | 157 +-- src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue | 976 ++++++++++++----------- src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue | 576 ++++++------- src/views/contingencyManagement/contingency/component/openAdd.vue | 203 +++- src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue | 396 +++++++++ 10 files changed, 1,460 insertions(+), 946 deletions(-) diff --git a/.env.development b/.env.development index edf9969..c1f8b28 100644 --- a/.env.development +++ b/.env.development @@ -5,6 +5,6 @@ #VITE_API_URL = 'http://192.168.0.76:8009' # VITE_API_URL = 'http://192.168.0.8:8008' - VITE_API_URL = 'http://192.168.0.35:8008' + VITE_API_URL = 'http://192.168.0.76:8009' # VITE_API_URL = 'http://192.168.0.10:8008' # VITE_API_URL = 'http://192.168.0.62:8008' diff --git a/src/api/contingency/index.ts b/src/api/contingency/index.ts index 2c46d39..b416ef2 100644 --- a/src/api/contingency/index.ts +++ b/src/api/contingency/index.ts @@ -8,6 +8,30 @@ method: 'post', data:params }) - } + }, + // v1 + addEmergencyTeam: (data: object) => { + return request({ + url: `/emergencyTeam/add`, + method: 'post', + data: data + }); + }, + // v1 + editEmergencyTeam: (data: object) => { + return request({ + url: `/emergencyTeam/update`, + method: 'post', + data: data + }); + }, + // v2 + deleteEmergencyTeam: (value?: object) => { + return request({ + url: `/emergencyTeam/batchDelete/{ids}`, + method: 'get', + data: value + }); + }, } } \ No newline at end of file diff --git a/src/api/emergencyPlan/index.ts b/src/api/emergencyPlan/index.ts new file mode 100644 index 0000000..41c42e8 --- /dev/null +++ b/src/api/emergencyPlan/index.ts @@ -0,0 +1,13 @@ +import request from '/@/utils/request'; + +export function emergencyPlanApi(){ + return{ + getEmergencyPlanList: (params: object) => { + return request({ + url: '/emergencyPlan/page/list', + method: 'post', + data:params + }) + }, + } +} \ No newline at end of file diff --git a/src/api/emergencyResources/index.ts b/src/api/emergencyResources/index.ts new file mode 100644 index 0000000..1d2e834 --- /dev/null +++ b/src/api/emergencyResources/index.ts @@ -0,0 +1,21 @@ +import { METHODS } from 'http'; +import request from '/@/utils/request'; + +export function emergencyResourcesApi(){ + return{ + emergencySuppliesList:(params:object)=>{ + return request({ + url:"/emergencySupplies/page/list", + method:'post', + data:params, + }); + }, + emergencySuppliesAdd:(params:object)=>{ + return request({ + url:"/emergencySupplies/add", + method:"post", + data:params + }) + } + } +} \ No newline at end of file diff --git a/src/views/contingencyManagement/contingency/component/openAdd.vue b/src/views/contingencyManagement/contingency/component/openAdd.vue index 3ee7941..7a3e369 100644 --- a/src/views/contingencyManagement/contingency/component/openAdd.vue +++ b/src/views/contingencyManagement/contingency/component/openAdd.vue @@ -1,7 +1,7 @@ <template> <div class="system-edit-user-container"> <el-dialog - title="新建应急队伍管理" + :title="title" v-model="isShowDialog" width="769px" draggable @@ -31,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" > @@ -44,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="请填写队伍描述" @@ -73,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="attachments"> <el-upload v-model:file-list="fileList" class="upload-demo" @@ -121,27 +121,29 @@ </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' @@ -151,6 +153,7 @@ } 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 @@ -158,43 +161,79 @@ 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; + }; + 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: '', //队伍描述 + }, + 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: '', //队伍描述 + } + }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', @@ -277,28 +316,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: '固定电话不能为空', @@ -306,17 +345,6 @@ }, ], }) - // 表单提交验证必填项 - 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 = () => { @@ -326,22 +354,59 @@ 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, @@ -350,6 +415,7 @@ toggleFullscreen, FullScreen, full, + ...toRefs(state), }; }, }); @@ -364,4 +430,5 @@ ::v-deep .el-table__cell { font-weight: 400; } -</style> \ No newline at end of file +</style> + diff --git a/src/views/contingencyManagement/contingency/index.vue b/src/views/contingencyManagement/contingency/index.vue index 4d71a26..3e66827 100644 --- a/src/views/contingencyManagement/contingency/index.vue +++ b/src/views/contingencyManagement/contingency/index.vue @@ -4,10 +4,10 @@ <div class="system-user-search mb15"> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item> - <el-input size="default" v-model="formInline.teamName" placeholder="队伍名称"> </el-input> + <el-input size="default" v-model="formInline.searchParams.teamName" placeholder="队伍名称"> </el-input> </el-form-item> <el-form-item> - <el-select size="default" v-model="formInline.teamType" placeholder="请选择队伍级别"> + <el-select size="default" v-model="formInline.searchParams.teamType" placeholder="请选择队伍级别"> <el-option label="公司" value="shanghai"></el-option> <el-option label="分厂-车间" value="beijing"></el-option> <el-option label="工序-班组等" value="beijing"></el-option> @@ -25,7 +25,7 @@ </div> <div class="button_Line"> <div class="button_Left"> - <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-button size="default" type="primary" @click="onOpenAdd('新建','')"> <el-icon> <Plus /> </el-icon>新建 @@ -42,17 +42,17 @@ </el-button> </div> <div class="button_Right"> - <el-button @click="upButton"> + <el-button size="default" @click="upButton"> <el-icon> <Upload /> </el-icon> </el-button> - <el-button> + <el-button size="default"> <el-icon> <Download /> </el-icon> </el-button> - <el-button> + <el-button size="default"> <el-icon> <Refresh /> </el-icon> @@ -70,8 +70,8 @@ /> <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip sortable></el-table-column> <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamDesc" label="队伍描述" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="principalPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column> <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip sortable></el-table-column> <el-table-column label="操作" width="200" align="center" fixed="right"> <template #default="scope"> @@ -80,7 +80,7 @@ <View /> </el-icon>查看 </el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)"> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenAdd('修改',scope.row)"> <el-icon style="margin-right: 5px;"> <EditPen /> </el-icon>修改 @@ -107,9 +107,9 @@ > </el-pagination> </el-card> + <OpenAdd ref="addRef" @refreshRoleList="initTableData"/> <OpenSee ref="seeRef" /> - <OpenAdd ref="addRef" /> - <OpenEdit ref="editRef" /> +<!-- <OpenEdit ref="editRef" />--> <upData ref="upShow"></upData> </div> </template> @@ -137,18 +137,19 @@ EditPen, } from '@element-plus/icons-vue' import OpenAdd from '/@/views/contingencyManagement/contingency/component/openAdd.vue'; -import OpenEdit from '/@/views/contingencyManagement/contingency/component/openEdit.vue'; +// import OpenEdit from '/@/views/contingencyManagement/contingency/component/openEdit.vue'; import OpenSee from '/@/views/contingencyManagement/contingency/component/openSee.vue'; import UpData from '/@/views/contingencyManagement/contingency/component/upData.vue'; import {contingencyApi} from "/@/api/contingency"; +import {useRoleApi} from "/@/api/system/role"; // 定义表格数据类型 interface User { teamName: string teamLevel: string - teamDescription: string - teamPhone: string + teamDesc: string + principalPhone: string telephone: string; describe: string; responsibleDepartment: string @@ -158,11 +159,7 @@ // 定义接口来定义对象的类型 interface TableDataRow { - // teamName: string; - // teamLevel: string; - // teamDescription: string; - // teamPhone: string; - // attachments: string; + } // @@ -171,10 +168,6 @@ data: Array<TableDataRow>; total: number; loading: boolean; - param: { - pageIndex: number; - pageSize: number; - } }; } export default defineComponent({ @@ -182,7 +175,7 @@ components: { OpenAdd, OpenSee, - OpenEdit, + // OpenEdit, View, EditPen, Plus, @@ -206,16 +199,16 @@ }) // 搜索按钮 const onSubmit = async () => { - // let res = await contingencyApi().getTeamManagementList(formInline) - // if(res.data.code === '200'){ - // state.tableData.data = res.data.data; - // state.tableData.total = state.tableData.data.length; - // }else{ - // ElMessage({ - // type:'warning', - // message:res.data.msg - // }) - // } + let res = await contingencyApi().getTeamManagementList(formInline) + if(res.data.code === '200'){ + state.tableData.data = res.data.data; + state.tableData.total = state.tableData.data.length; + }else{ + ElMessage({ + type:'warning', + message:res.data.msg + }) + } } const multipleTableRef = ref<InstanceType<typeof ElTable>>() @@ -247,84 +240,43 @@ }) } }; - // const tableData: User[] = [ - // { - // teamName: '应急救援组', - // teamLevel: '公司', - // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - // telephone: '051383830321', - // teamPhone: '13603812900', - // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - // '(2)负责现场被困人员、受伤人员抢救工作;\n' + - // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - // responsibleDepartment: '仪表班', - // teamLeader: '王磊', - // }, - // { - // teamName: '应急救援组', - // teamLevel: '公司', - // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - // telephone: '051383830321', - // teamPhone: '13603812900', - // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - // '(2)负责现场被困人员、受伤人员抢救工作;\n' + - // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - // responsibleDepartment: '仪表班', - // teamLeader: '王磊', - // }, - // { - // teamName: '应急救援组', - // teamLevel: '公司', - // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - // telephone: '051383830321', - // teamPhone: '13603812900', - // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - // '(2)负责现场被困人员、受伤人员抢救工作;\n' + - // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - // responsibleDepartment: '仪表班', - // teamLeader: '王磊', - // }, - // { - // teamName: '应急救援组', - // teamLevel: '公司', - // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - // telephone: '051383830321', - // teamPhone: '13603812900', - // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - // '(2)负责现场被困人员、受伤人员抢救工作;\n' + - // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - // responsibleDepartment: '仪表班', - // teamLeader: '王磊', - // } - // ] //查看用户弹窗 const seeRef = ref(); const onOpenSee = (row: TableDataRow) => { seeRef.value.openDialog(row); }; - // 打开新增用户弹窗 + // 打开新增应急队伍弹窗 const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); + const onOpenAdd = (type: string, value: any) => { + addRef.value.openDialog(type, value); }; // 打开修改用户弹窗 - const editRef = ref(); - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); - }; + // const editRef = ref(); + // const onOpenEdit = (row: TableDataRow) => { + // editRef.value.openDialog(row); + // }; // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + const onRowDel = (row: any) => { + ElMessageBox.confirm(`此操作将永久删除队伍名称:“${row}”,是否继续?`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }) - .then(() => { - ElMessage.success('删除成功'); + .then(async () => { + let res = await useRoleApi().deleteEmergencyTeam({roleId:row.roleId}) + if(res.data.code ==='200'){ + ElMessage({ + type:'success', + duration:2000, + message:'删除成功' + }) + await initTableData() + }else{ + ElMessage({ + type:'warning', + message:res.data.msg + }) + } }) .catch(() => {}); }; @@ -335,7 +287,6 @@ const onHandleCurrentChange = (val: number) => { formInline.pageIndex = val; }; - // // 分页改变 // 页面加载时 onMounted(() => { initTableData(); @@ -350,10 +301,11 @@ upButton, upShow, // tableData, + initTableData, onOpenSee, //查看 seeRef, - onOpenEdit, //编辑 - editRef, + // onOpenEdit, //编辑 + // editRef, onOpenAdd, //新增 addRef, onRowDel, @@ -377,6 +329,7 @@ display: flex; flex-direction: row; justify-content: space-between; + margin-bottom: 10px; } .pages{ padding-top: 20px; diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue index fb5a6a4..f4cc6e1 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue @@ -1,482 +1,534 @@ <template> - <div class="system-edit-user-container"> - <el-dialog - 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" - size="default" - label-width="120px" - > - <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-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-input v-model="ruleForm.responsibleDepartment" 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="teamLeader"> - <el-input v-model="ruleForm.teamLeader" 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.teamLeader" - 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="teamPhone"> - <el-input v-model="ruleForm.teamPhone" 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-tree-select - v-model="ruleForm.responsibleDepartment" - :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="telephone"> - <el-select v-model="ruleForm.teamLevel" 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-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="telephone"> - <el-input v-model="ruleForm.teamPhone" 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.teamPhone" 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-date-picker - v-model="value1" - type="datetime" - 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="telephone"> - <el-input v-model="ruleForm.teamPhone" 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-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> - <el-option label="完好" value="admin"></el-option> - <el-option label="维修" value="common"></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="telephone"> - <el-input v-model="ruleForm.teamPhone" 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-date-picker - v-model="value1" - type="datetime" - class="w100" - placeholder="选择日期时间" - /> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-form-item label="使用说明" prop="telephone"> - <el-input v-model="ruleForm.teamPhone" 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-date-picker - v-model="value1" - type="datetime" - 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="telephone"> - <el-date-picker - v-model="value1" - type="datetime" - 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="telephone"> - <el-input v-model="ruleForm.teamPhone" 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.teamPhone" 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.teamLeader" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search" @click="daiInpt"/> - </template> - </el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> + <div class="system-edit-user-container"> + <el-dialog title="新建应急物资代码" 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-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="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-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="选择日期时间" /> + </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="admin"></el-option> + <el-option label="维修" value="common"></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="选择日期时间" /> + </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> + </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-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-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-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> + <el-button @click="onCancel(ruleFormRef)" size="default">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(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"> -import { - reactive, - ref, - defineComponent -} from 'vue'; +import { reactive, ref, defineComponent } from 'vue'; -import type { - FormInstance, - // FormRules, -} from 'element-plus' +import type { FormInstance, FormRules } 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 { 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; +} export default defineComponent({ - name: 'openAdd', - components: { - PersonInCharge, - UserSelections, - RegionsCheckbox, - }, - setup() { - const isShowDialog = ref(false) + name: 'openAdd', + components: { + PersonInCharge, + UserSelections, + RegionsCheckbox, + }, + setup() { + const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = reactive({ - teamName: '', // 队伍名称 - teamLeader: '', //队伍负责人 - department: [], // 负责人部门 - phone: '', // 负责人手机 - telephone: '', // 固定电话 - }); - // 打开弹窗 - const openDialog = () => { - // state.ruleForm = row; - isShowDialog.value = true; - }; - // 关闭弹窗 - const closeDialog = () => { - isShowDialog.value = false; - }; - // 取消 - const onCancel = () => { - closeDialog(); - }; - //日期选择器 - 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 responsibleDepartment = ref() - const data = [ - { - value: '1', - label: '广汇能源综合物流发展有限责任公司', - children: [ - { - value: '1-1', - 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 rules = reactive<FormRules>({ - // teamName: [ - // { - // required: true, - // message: '队伍名称不能为空', - // trigger: 'change', - // }, - // ], - // teamLevel: [ - // { - // required: true, - // message: '队伍级别不能为空', - // trigger: 'change', - // }, - // ], - // teamLeader: [ - // { - // required: true, - // message: '队伍负责人不能为空', - // trigger: 'change', - // }, - // ], - // responsibleDepartment: [ - // { - // required: true, - // message: '负责人部门不能为空', - // trigger: 'change', - // }, - // ], - // teamPhone: [ - // { - // required: true, - // message: '负责人手机不能为空', - // trigger: 'change', - // }, - // ], - // telephone: [ - // { - // required: true, - // message: '固定电话不能为空', - // trigger: 'change', - // }, - // ], - // }) - // 表单提交验证必填项 - 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 Shows=ref() - const daiInpt=()=>{ - Shows.value.openDailog() - } - // 选择区域弹窗 - const openRef=ref() - const regionsDialog=()=>{ - openRef.value.openDailog() - } - // 打开用户选择弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDialog(); - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - closeDialog, - isShowDialog, - onCancel, - responsibleDepartment, - data, - Search, - ruleForm, - value1, - treeSelect, - tree, - daiInpt, - Shows, - ruleFormRef, - submitForm, - // rules, - openUser, - userRef, - regionsDialog, - openRef, - toggleFullscreen, - FullScreen, - full, - }; - }, + const ruleFormRef = ref<FormInstance>(); + //定义表单 + const ruleForm = reactive<From>({ + productionDate: '', + useDate: '', + inspectDate: '', + nextInspectDate: '', + inspectPeiod: null, + count: null, + usePeriod: null, + departmentId: null, + principalUserUid: null, + status: '', + classification: '', + name: '', + number: '', + model: '', + longitude: '', + latitude: '', + use: '', + areaId: null, + place: '', + useExplain: '', + }); + // 打开弹窗 + const openDialog = () => { + // state.ruleForm = row; + isShowDialog.value = true; + }; + + // 取消 + const onCancel = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + //日期选择器 + 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 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 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 (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 Shows = ref(); + const daiInpt = () => { + Shows.value.openDailog(); + }; + // 选择区域弹窗 + const openRef = ref(); + const regionsDialog = () => { + openRef.value.openDailog(); + }; + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + isShowDialog, + onCancel, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + submitForm, + rules, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + }; + }, }); </script> <style scoped lang="scss"> -.textarea{ - height: 168px!important; +.textarea { + height: 168px !important; } -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; +.textarea ::v-deep .el-textarea__inner { + height: 168px !important; } ::v-deep .el-table__cell { - font-weight: 400; + font-weight: 400; } -.el-divider--horizontal{ - height: 0; - margin: 0; - border-top: transparent; +.el-divider--horizontal { + height: 0; + margin: 0; + border-top: transparent; } -.el-select{ - width: 100%; +.el-select { + width: 100%; } </style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue new file mode 100644 index 0000000..06d5311 --- /dev/null +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue @@ -0,0 +1,396 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="查看应急物资代码" + v-model="isShowDialog" + width="769px" + > + <el-form + ref="ruleFormRef" + :rules="rules" + :model="ruleForm" + size="default" + label-width="120px" + > + <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"></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"></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="purpose"> + <el-input v-model="ruleForm.purpose"></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="area"> + <el-input v-model="ruleForm.area"></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"></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="department"> + <el-tree-select v-model="ruleForm.department" :data="data" class="w100"/> + </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"> + <el-option label="事故气体吸收装置" value="0"></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-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="storageLocation"> + <el-input v-model="ruleForm.storageLocation"></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="storageQuantity"> + <el-input v-model="ruleForm.storageQuantity"></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-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" /> + </el-form-item> + </el-col> + <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"></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="teamLevel"> + <el-select v-model="ruleForm.teamLevel" class="w100"> + <el-option label="完好" value="0"></el-option> + <el-option label="维修" value="1"></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="teamName"> + <el-input v-model="ruleForm.teamName"></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-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" /> + </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 + class="textarea" + v-model="ruleForm.describe" + type="textarea" + maxlength="150" + 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-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="下次检查日期"> + <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" /> + </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-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </el-input> + </el-form-item> + </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> + </template> + </el-dialog> + <userSelections ref="userRef"/> + <AddEmergencyPersonnel ref="addRef" /> + </div> +</template> + +<script lang="ts"> +import { + reactive, + toRefs, + ref, + onMounted, + defineComponent +} from 'vue'; +import type { + UploadUserFile, + FormInstance, + FormRules, +} from 'element-plus' +import { + Search +} from '@element-plus/icons-vue' +import userSelections from "/@/components/userSelections/index.vue" +import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue"; +// 定义接口来定义对象的类型 +interface DeptData { + deptName: string; + createTime: string; + status: boolean; + sort: number | string; + describe: string; + id: number; + children?: DeptData[]; +} +// 定义接口来定义对象的类型 +interface RuleFormRow { + // teamName: string; + // teamLevel: string; + // teamLeader: string; + // responsibleDepartment: any + // teamPhone: string; + // telephone: string; + // describe: string; + selectPeople:string + jobNumber: string; + personnelName: string; + personnelGender: string; + phone: string; + position: string; +} +interface UserState { + isShowDialog: boolean; + ruleForm: RuleFormRow; + deptData: Array<DeptData>; +} + +export default defineComponent({ + name: 'openEdit', + components: { + userSelections, + AddEmergencyPersonnel, + }, + setup() { + const state = reactive<UserState>({ + isShowDialog: false, + ruleForm: { + selectPeople:'111', //选择人员 + jobNumber: '', // 人员工号 + phone: '', // 手机号码 + personnelGender: '', //人员性别 + position: '', //职位 + personnelName: '', // 人员名称 + }, + deptData: [], // 部门数据 + }); + + // 关闭弹窗 + const closeDialog = () => { + state.isShowDialog = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + // 初始化部门数据 + const initTableData = () => { + state.deptData.push({ + deptName: 'vueNextAdmin', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '顶级部门', + id: Math.random(), + children: [ + { + deptName: 'IT外包服务', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '总部', + id: Math.random(), + }, + { + deptName: '资本控股', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '分部', + id: Math.random(), + }, + ], + }); + }; + // 页面加载时 + onMounted(() => { + initTableData(); + }); + + //定义树形下拉框 + const responsibleDepartment = ref() + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '1-1', + 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 rules = reactive<FormRules>({ + teamName: [ + { + required: true, + message: '队伍名称不能为空', + trigger: 'change', + }, + ], + teamLevel: [ + { + required: true, + message: '队伍级别不能为空', + trigger: 'change', + }, + ], + teamLeader: [ + { + required: true, + message: '队伍负责人不能为空', + trigger: 'change', + }, + ], + responsibleDepartment: [ + { + required: true, + message: '负责人部门不能为空', + trigger: 'change', + }, + ], + teamPhone: [ + { + required: true, + message: '负责人手机不能为空', + trigger: 'change', + }, + ], + telephone: [ + { + required: true, + message: '固定电话不能为空', + trigger: 'change', + }, + ], + }) + + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + + const ruleFormRef = ref<FormInstance>() + // 打开弹窗 + const openDialog = (row: RuleFormRow) => { + state.ruleForm = row; + state.isShowDialog = true; + }; + // 表单提交验证必填项 + 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) + } + }) + } + return { + openDialog, + closeDialog, + onCancel, + responsibleDepartment, + data, + submitForm, + Search, + rules, + ruleFormRef, + openUser, + userRef, + ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 50px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 50px!important; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue index e29772d..e405aae 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue @@ -1,336 +1,316 @@ <template> - <div class="system-user-container"> - <el-card shadow="hover"> - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> - <el-tab-pane label="待评价" name="first">User</el-tab-pane> - <el-tab-pane label="已评价" name="second">Config</el-tab-pane> - </el-tabs> - <div class="system-user-search mb15"> - <el-input size="default" placeholder="物资名称" style="max-width: 215px;"> </el-input> - <el-button size="default" type="primary" class="ml10"> - 查询 - </el-button> - <el-button size="default" class="ml10" @click="submitReset"> - 重置 - </el-button> - </div> - <div class="button_Line"> - <div class="button_Left"> - <el-button size="default" type="primary" @click="onOpenAdd('新建')"> - <el-icon> - <Plus /> - </el-icon>新建 - </el-button> - <el-button size="default" type="warning" plain disabled> - <el-icon> - <Edit /> - </el-icon>修改 - </el-button> - <el-button size="default" type="danger" plain disabled> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </div> - <div class="button_Right"> - <el-button @click="upButton"> - <el-icon> - <Upload /> - </el-icon> - </el-button> - <el-button> - <el-icon> - <Refresh /> - </el-icon> - </el-button> - </div> - </div> - <el-table - :data="tableData" - style="width: 100%" - ref="multipleTableRef" - > - <el-table-column - type="selection" - width="55" - /> - <el-table-column prop="teamName" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamLevel" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamDescription" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="materialClassification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="location" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="number" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="操作" width="200" align="center" fixed="right"> - <template #default="scope"> - <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>保养 - </el-button> - <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>检查 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <View /> - </el-icon>查看 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon> 修改 - </el-button> - <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="pageIndex" - v-model:page-size="pageSize" - :page-sizes="[10, 20, 30]" - :pager-count="5" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="40" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </el-card> - <Maintain ref="seeRef" /> - <OpenAdd ref="addRef" /> - <OpenEdit ref="editRef" /> - <upData ref="upShow"></upData> - </div> + <div class="system-user-container"> + <el-card shadow="hover"> + <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="待评价" name="first"></el-tab-pane> + <el-tab-pane label="已评价" name="second"></el-tab-pane> + </el-tabs> --> + <div class="system-user-search mb15"> + <el-input size="default" v-model="listQuery.searchParams.name" placeholder="物资名称" style="max-width: 215px" /> + <el-button size="default" type="primary" class="ml10" @click="listApi"> 查询 </el-button> + <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> <Plus /> </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> <Edit /> </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <el-icon> <Delete /> </el-icon>删除 + </el-button> + </div> + <div class="button_Right"> + <!-- <el-button @click="upButton"> + <el-icon> + <Upload /> + </el-icon> + </el-button> + <el-button> + <el-icon> + <Refresh /> + </el-icon> + </el-button> --> + </div> + </div> + <el-table :data="tableData" style="width: 100%" ref="multipleTableRef"> + <el-table-column type="selection" width="55" /> + <el-table-column prop="name" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="number" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="departmentId" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="classification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="place" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="count" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column label="操作" width="200" align="center" fixed="right"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> + <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>保养 + </el-button> + <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> + <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>检查 + </el-button> + <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> + <el-icon style="margin-right: 5px"> <View /> </el-icon>查看 + </el-button> + <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> + <el-icon style="margin-right: 5px"> + <EditPen /> + </el-icon> + 修改 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> <Delete /> </el-icon>删除 + </el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-if="tableData.length == 0 ? false : true" + v-model:currentPage="pageIndex" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 30]" + :pager-count="5" + + + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </el-card> + <Maintain ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> </template> <script lang="ts"> import { - // toRefs, - // reactive, - // onMounted, - ref, - defineComponent + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent, + reactive, + onMounted, } from 'vue'; +import { ElMessageBox, ElMessage, ElTable } from 'element-plus'; import { - ElMessageBox, - ElMessage, - ElTable, -} from 'element-plus'; -import { Plus, - Edit, - Delete, - Upload, - // Download, - Refresh, - View, - EditPen, -} from '@element-plus/icons-vue' + Plus, + Edit, + Delete, + Upload, + // Download, + Refresh, + View, + EditPen, +} from '@element-plus/icons-vue'; import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue'; -import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue'; +import OpenEdit from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue'; import Maintain from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue'; import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; - +import { emergencyResourcesApi } from '/@/api/emergencyResources'; // 定义表格数据类型 interface User { - teamName: string - teamLevel: string - teamDescription: string - location: string; - materialClassification: string - number: string + id: number; + name: string; + number: string; + departmentId: number; + classification: string; + place: string; + count: number; } // 定义接口来定义对象的类型 interface TableDataRow { - // userName: string; - // userNickname: string; - // roleSign: string; - // department: string[]; - // phone: string; - // email: string; - // sex: string; - // password: string; - // overdueTime: Date; - // // describe: string; - // createTime: string; + // userName: string; + // userNickname: string; + // roleSign: string; + // department: string[]; + // phone: string; + // email: string; + // sex: string; + // password: string; + // overdueTime: Date; + // // describe: string; + // createTime: string; } export default defineComponent({ - name: 'systemUser', - components: { - OpenAdd, - Maintain, - OpenEdit, - View, - EditPen, - Plus, - Edit, - Delete, - Upload, - // Download, - Refresh, - UpData - }, - setup() { - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) + name: 'systemUser', + components: { + OpenAdd, + Maintain, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + // Download, + Refresh, + UpData, + }, + setup() { + const multipleTableRef = ref<InstanceType<typeof ElTable>>(); + const multipleSelection = ref<User[]>([]); + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + name: '', + }, + }); + // 定义表格数据 + const tableData = ref([]); + // 请求列表数据 + const listApi = async () => { + let res = await emergencyResourcesApi().emergencySuppliesList(listQuery); + console.log(res); + if (res.data.code == 200) { + tableData.value = res.data.data; + pageIndex.value = res.data.pageIndex; + pageSize.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }; + //重置 + const submitReset = () => { + listQuery.searchParams.name = ''; + listApi(); + }; + onMounted(() => { + listApi(); + }); + // 上传 + const upShow = ref(); + const upButton = () => { + upShow.value.openDialog(); + }; - // 上传 - const upShow=ref() - const upButton=()=>{ - upShow.value.openDialog() - } - // 定义表格数据 - const tableData: User[] = [ - { - teamName: '消防安全绳', - teamLevel: 'YJWZ20210208104332', - teamDescription: '安全管理部', - materialClassification: '事故气体吸收装置', - location: '3#岗微型消防站', - number: '5', - }, - { - teamName: '消防安全绳', - teamLevel: 'YJWZ20210208104332', - teamDescription: '安全管理部', - materialClassification: '事故气体吸收装置', - location: '3#岗微型消防站', - number: '5', - }, - { - teamName: '消防安全绳', - teamLevel: 'YJWZ20210208104332', - teamDescription: '安全管理部', - materialClassification: '事故气体吸收装置', - location: '3#岗微型消防站', - number: '5', - }, - { - teamName: '消防安全绳', - teamLevel: 'YJWZ20210208104332', - teamDescription: '安全管理部', - materialClassification: '事故气体吸收装置', - location: '3#岗微型消防站', - number: '5', - } - ] - //查看用户弹窗 - const seeRef = ref(); - const onMaintain = (row: TableDataRow) => { - seeRef.value.openDialog(row); - }; - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); - }; - // 打开修改用户弹窗 - const editRef = ref(); - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); - }; - // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning', - }) - .then(() => { - ElMessage.success('删除成功'); - }) - .catch(() => {}); - }; - // 分页 - const pageIndex = ref(4); - const pageSize = ref(10); - // 分页改变 - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - // 分页未改变 - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; - return { - multipleSelection, - multipleTableRef, - upButton, - upShow, - tableData, - onMaintain, //保养 - seeRef, - onOpenEdit, //编辑 - editRef, - onOpenAdd, //新增 - addRef, - onRowDel, - pageIndex, - pageSize, - handleSizeChange, - handleCurrentChange, - // ...toRefs(state), - }; - }, + //查看用户弹窗 + const seeRef = ref(); + const onMaintain = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const editRef = ref(); + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页 + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); + // 分页条数 + const handleSizeChange = (val: number) => { + // console.log(`${val} items per page`); + listQuery.pageSize = val; + }; + // 分页数 + const handleCurrentChange = (val: number) => { + // console.log(`current page: ${val}`); + listQuery.pageIndex = val; + }; + return { + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onMaintain, //保养 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + pageIndex, + pageSize, + total, + handleSizeChange, + handleCurrentChange, + listQuery, + listApi, + onMounted, + submitReset, + // ...toRefs(state), + }; + }, }); </script> <style scoped lang="scss"> -.table_Box{ - padding: 20px; - background-color: #fff; +.table_Box { + padding: 20px; + background-color: #fff; } -.tableForm{ - margin-top: 10px; +.tableForm { + margin-top: 10px; } /*按钮行*/ -.button_Line{ - display: flex; - flex-direction: row; - justify-content: space-between; +.button_Line { + display: flex; + flex-direction: row; + justify-content: space-between; } //分页 -.pages{ - display: flex; - justify-content: flex-end; - margin-top: 15px; +.pages { + display: flex; + justify-content: flex-end; + margin-top: 15px; } ::v-deep .el-pagination .el-pager li { - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } ::v-deep .el-pagination .el-pager li.is-active { - background-color: #409eff; - color: #fff; + background-color: #409eff; + color: #fff; } ::v-deep .el-pagination .btn-prev { - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } -::v-deep .el-pagination button:disabled{ - color: #c0c4cc; +::v-deep .el-pagination button:disabled { + color: #c0c4cc; } -::v-deep .el-pagination .btn-next{ - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; +::v-deep .el-pagination .btn-next { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } </style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/index.vue b/src/views/contingencyManagement/panManagement/index.vue index 01a3981..1a1c7e7 100644 --- a/src/views/contingencyManagement/panManagement/index.vue +++ b/src/views/contingencyManagement/panManagement/index.vue @@ -2,19 +2,27 @@ <div class="system-user-container"> <el-card shadow="hover"> <div class="system-user-search mb15"> - <el-input size="default" placeholder="预案名称" style="max-width: 215px;"> </el-input> - <el-select size="default" v-model="value" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;"> - <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-select> - <el-button size="default" type="primary" class="ml10"> - 查询 - </el-button> - <el-button size="default" class="ml10" @click="submitReset"> - 重置 - </el-button> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item> + <el-input size="default" placeholder="预案名称" style="max-width: 215px;"> </el-input> + </el-form-item> + <el-form-item> + <el-select size="default" v-model="value" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;"> + <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-select> + </el-form-item> + <el-form-item> + <el-button size="default" type="primary" class="ml10"> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="submitReset"> + 重置 + </el-button> + </el-form-item> + </el-form> </div> <div class="button_Line"> <div class="button_Left"> @@ -176,7 +184,7 @@ import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue'; import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.vue'; import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; - +import {emergencyPlanApi} from "/@/api/emergencyPlan"; // 定义表格数据类型 interface User { teamName: string -- Gitblit v1.9.2