| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="负责人部门" prop="principalDepartmentId"> |
| | | <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" class="w100" |
| | | <el-tree-select v-model="ruleForm.principalDepartmentId" :data="newTreeList" class="w100" |
| | | :props="propse" clearable placeholder="请选择"/> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="相关附件" prop="fileList"> |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | class="upload-demo" |
| | | action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
| | | :on-change="handleChange" |
| | | > |
| | | <el-button type="primary">点击上传</el-button> |
| | | <template #tip> |
| | | <div class="el-upload__tip">添加相关附件</div> |
| | | </template> |
| | | </el-upload> |
| | | <uploaderFile :fileList="fileList" :systemName="'EMERGENCY'" :disabled="disabled" |
| | | @successUploader="successUploader"></uploaderFile> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <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" > |
| | | <el-button type="primary" size="default" @click="onAddEmergencyPersonnel" :disabled="disabled">新增 |
| | | <el-button type="primary" size="default" @click="onAddEmergencyPersonnel(ruleFormRef)" :disabled="disabled">新增 |
| | | </el-button> |
| | | <el-table |
| | | :data="tableData" |
| | |
| | | import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue" |
| | | import {contingencyApi} from "/@/api/contingencyManagement/contingency"; |
| | | import {goalManagementApi} from "/@/api/goalManagement"; |
| | | import uploaderFile from '/@/components/uploaderFile/index.vue'; |
| | | // import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan"; |
| | | |
| | | |
| | |
| | | components: { |
| | | AddEmergencyPersonnel, |
| | | DailogSearchUserManger, |
| | | uploaderFile |
| | | }, |
| | | setup(prop, {emit}) { |
| | | const isShowDialog = ref(false); |
| | |
| | | principalPhone: '', // 负责人手机 |
| | | telephoneNumber: '', // 固定电话 |
| | | teamDesc: '', //队伍描述 |
| | | fileList: [ |
| | | { |
| | | fileUrl: 'url', |
| | | fileName: 'name', |
| | | } |
| | | ], |
| | | fileList: [], |
| | | memberList: [] |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | const peopleInsertBtn = ref(false) |
| | | const teamId = ref() |
| | | // 打开弹窗 |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | |
| | | titles.value = title; |
| | | disabled.value = type; |
| | | teamId.value = id |
| | | //如果是新增 无法添加人员 |
| | | if(title == '新建应急队伍管理'){ |
| | | peopleInsertBtn.value = true |
| | | }else{ |
| | | peopleInsertBtn.value = false |
| | | } |
| | | if (title == '查看应急队伍管理' || title == '修改应急队伍管理') { |
| | | contingencyApi() |
| | | .seeEmergencyTeam(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | fileList.value = (res.data.data.fileList?res.data.data.fileList:[]) |
| | | initFileListData() |
| | | listApi() |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | // 上传附件 |
| | | const fileList = ref<UploadUserFile[]>([]) |
| | | const fileList = ref([]) |
| | | const initFileListData = async () => { |
| | | for(var a = 0;a<fileList.value.length;a++){ |
| | | fileList.value[a].name = fileList.value[a].fileName |
| | | } |
| | | } |
| | | // 上传成功组装数据 |
| | | const successUploader = (list) =>{ |
| | | fileList.value = list |
| | | const formFileList = [] |
| | | for(var a = 0;a<fileList.value.length;a++){ |
| | | formFileList.push( |
| | | { |
| | | fileName:fileList.value[a].fileName, |
| | | fileUrl:'' |
| | | } |
| | | ) |
| | | } |
| | | ruleForm.value.fileList = formFileList |
| | | } |
| | | //定义树形下拉框 |
| | | const principalDepartmentId = ref() |
| | | const data = ref() |
| | | |
| | | //部门树 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | |
| | | |
| | | //el-tree-select回显 |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | }; |
| | | const newTreeList = []; |
| | | //得到部门树 |
| | | const department = async () => { |
| | | await goalManagementApi() |
| | | .getTreedepartment() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | getTreeList(res.data.data, newTreeList); |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | //定义树形下拉框 |
| | | const principalDepartmentId = ref() |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | value: 'depId', |
| | | // 递归树状数据且修改字段名 |
| | | const getTreeList = (treeList, newTreeList) => { |
| | | treeList.map((c) => { |
| | | let tempData = { |
| | | depName: c.depName, |
| | | value: c.depId, |
| | | children: [], |
| | | }; |
| | | if (c.children && c.children.length > 0) { |
| | | tempData.children = []; |
| | | getTreeList(c.children, tempData.children); |
| | | } |
| | | newTreeList.push(tempData); |
| | | }); |
| | | }; |
| | | const data = ref() |
| | | onMounted(() => { |
| | | department(); |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | |
| | | } |
| | | }; |
| | | const onSubmit = async (title: string, formEl: FormInstance | undefined) => { |
| | | if(!ruleForm.value.fileList){ |
| | | ruleForm.value.fileList = [] |
| | | } |
| | | if (title == '新建应急队伍管理') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | contingencyApi() |
| | | .addEmergencyTeam(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(); |
| | | if(teamId.value==null||teamId.value==''){ |
| | | contingencyApi() |
| | | .addEmergencyTeam(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 { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: '添加成功', |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | |
| | | principalPhone: '', // 负责人手机 |
| | | telephoneNumber: '', // 固定电话 |
| | | teamDesc: '', //队伍描述 |
| | | fileList: [ |
| | | { |
| | | fileUrl: 'url', |
| | | fileName: 'name', |
| | | } |
| | | ], |
| | | fileList: [], |
| | | memberList: [] |
| | | }; |
| | | } |
| | |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | fileList.value = [] |
| | | tableData.value=[] |
| | | ruleForm.value = {} |
| | | }; |
| | | // 定义表格数据 |
| | | const tableData = ref([]); |
| | | //添加队伍负责人弹窗 |
| | | const addRef = ref(); |
| | | const onAddEmergencyPersonnel = () => { |
| | | //未添加队伍 无法修改人员 |
| | | if(peopleInsertBtn.value == true){ |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: '请先添加应急队伍', |
| | | type: 'warning', |
| | | }); |
| | | }else { |
| | | addRef.value.openDialog('新建应急队伍人员','',teamId.value); |
| | | const onAddEmergencyPersonnel = async (formEl: FormInstance | undefined) => { |
| | | if(!ruleForm.value.fileList){ |
| | | ruleForm.value.fileList = [] |
| | | } |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | // isShowDialog.value = false; |
| | | if(teamId.value == ''||teamId.value==null){ |
| | | ElMessageBox.confirm('确认添加此应急队伍?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | contingencyApi() |
| | | .addEmergencyTeam(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | teamId.value = res.data.data.id |
| | | addRef.value.openDialog('新建应急队伍人员','',teamId.value); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | } |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | |
| | | }else { |
| | | addRef.value.openDialog('新建应急队伍人员','',teamId.value); |
| | | } |
| | | |
| | | |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | }; |
| | | // 请求列表数据 |
| | | const listApi = async () => { |
| | |
| | | // 新增后刷新 |
| | | const onMyAdd = (e: object) => { |
| | | listApi(); |
| | | // console.log(e) |
| | | // item.value = e |
| | | // tableData.value.push(item.value) |
| | | // console.log(tableData) |
| | | }; |
| | | // 打开修改弹窗 |
| | | const onEdit = (val: string, row: object) => { |
| | |
| | | onEdit, |
| | | onRowDel, |
| | | department, |
| | | peopleInsertBtn, |
| | | teamId |
| | | teamId, |
| | | newTreeList, |
| | | successUploader, |
| | | initFileListData |
| | | }; |
| | | }, |
| | | }); |