<template>
|
<div class="system-edit-user-container">
|
<el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="resetForm(ruleFormRef)">
|
<el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
|
<el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" 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="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="teamLevel">
|
<el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
|
<el-option label="公司" value="1"></el-option>
|
<el-option label="分厂-车间" value="2"></el-option>
|
<el-option label="工序-班组等" value="3"></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="principalName">
|
<el-input v-model="ruleForm.principalName" placeholder="请选择" class="input-with-select">
|
<template #append>
|
<el-button :icon="Search" @click="openUser"/>
|
</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="principalDepartmentId">
|
<el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" class="w100"
|
:props="propse" clearable 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="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="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="队伍描述" prop="teamDesc">
|
<el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" maxlength="150"
|
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="相关附件" 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>
|
</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" >
|
<el-button type="primary" size="default" @click="onAddEmergencyPersonnel" :disabled="disabled">新增
|
</el-button>
|
<el-table
|
:data="tableData"
|
style="width: 100%; margin-top: 15px"
|
ref="multipleTableRef"
|
:header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
|
:disabled="disabled"
|
>
|
<el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="name" label="人员名称" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
|
<el-table-column label="操作" width="250" align="center">
|
<template #default="scope">
|
<el-button :disabled="disabled" size="small" @click="onEdit('查看应急队伍人员',scope.row.id)">查看
|
</el-button>
|
<el-button :disabled="disabled" size="small" @click="onEdit('修改应急队伍人员',scope.row.id)"
|
style="margin-right: 5px">编辑
|
</el-button>
|
<el-button :disabled="disabled" size="small" @click="onRowDel(scope.row.id)"
|
style="margin-right: 5px">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
|
<el-button size="default" v-if="disabled == true ? false : true" type="primary"
|
@click="onSubmit(titles, ruleFormRef)">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<AddEmergencyPersonnel ref="addRef" @myAdd="onMyAdd"/>
|
<DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {
|
reactive,
|
ref,
|
defineComponent,
|
onMounted,
|
// toRefs,
|
} from 'vue';
|
import {
|
ElMessage,
|
ElMessageBox,
|
} from 'element-plus';
|
|
import type {
|
UploadUserFile,
|
TabsPaneContext,
|
FormInstance,
|
FormRules,
|
} from 'element-plus'
|
|
import {
|
Search,
|
FullScreen
|
} from '@element-plus/icons-vue'
|
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
|
import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
|
import {contingencyApi} from "/@/api/contingencyManagement/contingency";
|
import {goalManagementApi} from "/@/api/goalManagement";
|
// import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";
|
|
|
export default defineComponent({
|
name: 'openAdd',
|
components: {
|
AddEmergencyPersonnel,
|
DailogSearchUserManger,
|
},
|
setup(prop, {emit}) {
|
const isShowDialog = ref(false);
|
const ruleFormRef = ref<FormInstance>();
|
const ruleForm = ref({
|
teamName: '', // 队伍名称
|
teamLevel: '', // 队伍级别
|
principalUid: '', // 队伍负责人
|
principalName: '',
|
principalDepartmentId: '', //负责人部门
|
principalPhone: '', // 负责人手机
|
telephoneNumber: '', // 固定电话
|
teamDesc: '', //队伍描述
|
fileList: [
|
{
|
fileUrl: 'url',
|
fileName: 'name',
|
}
|
],
|
memberList: []
|
});
|
const titles = ref();
|
const disabled = ref();
|
const peopleInsertBtn = ref(false)
|
const teamId = ref()
|
// 打开弹窗
|
const openDialog = (title: string, id: number, type: boolean) => {
|
isShowDialog.value = true;
|
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;
|
listApi()
|
}
|
});
|
}
|
}
|
// 上传附件
|
const fileList = ref<UploadUserFile[]>([])
|
|
//部门树
|
const department = () => {
|
goalManagementApi()
|
.getTreedepartment()
|
.then((res) => {
|
if (res.data.code == 200) {
|
data.value = res.data.data;
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
//定义树形下拉框
|
const principalDepartmentId = ref()
|
const propse = {
|
label: 'depName',
|
children: 'children',
|
value: 'depId',
|
};
|
const data = ref()
|
onMounted(() => {
|
department();
|
});
|
// 打开用户选择弹窗
|
const userRef = ref();
|
const openUser = () => {
|
userRef.value.openDailog();
|
};
|
const onUser = (e: any) => {
|
ruleForm.value.principalUid = e[0].uid
|
ruleForm.value.principalName = e[0].realName
|
};
|
//定义tabs切换
|
const activeName = ref('first')
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
console.log(tab, event)
|
}
|
|
// 必填项提示
|
const rules = reactive<FormRules>({
|
teamName: [
|
{
|
required: true,
|
message: '队伍名称不能为空',
|
trigger: 'change',
|
},
|
],
|
teamLevel: [
|
{
|
required: true,
|
message: '队伍级别不能为空',
|
trigger: 'change',
|
},
|
],
|
principalUid: [
|
{
|
required: true,
|
message: '队伍负责人不能为空',
|
trigger: 'change',
|
},
|
],
|
principalDepartmentId: [
|
{
|
required: true,
|
message: '负责人部门不能为空',
|
trigger: 'change',
|
},
|
],
|
principalPhone: [
|
{
|
required: true,
|
message: '负责人手机不能为空',
|
trigger: 'change',
|
},
|
],
|
telephoneNumber: [
|
{
|
required: true,
|
message: '固定电话不能为空',
|
trigger: 'change',
|
},
|
],
|
})
|
//全屏
|
const full = ref(false);
|
const toggleFullscreen = () => {
|
if (full.value == false) {
|
full.value = true;
|
} else {
|
full.value = false;
|
}
|
};
|
const onSubmit = async (title: string, formEl: FormInstance | undefined) => {
|
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();
|
});
|
} else {
|
console.log('error submit!', fields);
|
}
|
});
|
} else if (title == '修改应急队伍管理') {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
isShowDialog.value = false;
|
contingencyApi()
|
.editEmergencyTeam(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 = {
|
teamName: '', // 队伍名称
|
teamLevel: '', // 队伍级别
|
principalUid: '', // 队伍负责人
|
principalDepartmentId: '', //负责人部门
|
principalPhone: '', // 负责人手机
|
telephoneNumber: '', // 固定电话
|
teamDesc: '', //队伍描述
|
fileList: [
|
{
|
fileUrl: 'url',
|
fileName: 'name',
|
}
|
],
|
memberList: []
|
};
|
}
|
};
|
const resetForm = (formEl: FormInstance | undefined) => {
|
isShowDialog.value = false;
|
if (!formEl) return;
|
formEl.resetFields();
|
tableData.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 listApi = async () => {
|
let res = await contingencyApi().getEmergencyTeamPersonnelList(teamId.value);
|
if (res.data.code == 200) {
|
tableData.value = res.data.data;
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
};
|
// 新增后刷新
|
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) => {
|
if (val == '查看应急队伍人员') {
|
addRef.value.openDialog('查看应急队伍人员', row,teamId.value, true);
|
} else {
|
addRef.value.openDialog('修改应急队伍人员', row,teamId.value, false);
|
}
|
};
|
// 删除
|
const onRowDel = (data: any) => {
|
ElMessageBox.confirm('确定删除所选项吗?', '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
contingencyApi()
|
.deleteEmergencyTeamPersonnel(data)
|
.then((res) => {
|
if (res.data.code == 200) {
|
ElMessage({
|
showClose: true,
|
message: res.data.msg,
|
type: 'success',
|
});
|
listApi()
|
} else {
|
ElMessage({
|
showClose: true,
|
message: res.data.msg,
|
type: 'error',
|
});
|
listApi()
|
}
|
});
|
})
|
.catch(() => {
|
});
|
};
|
return {
|
openDialog,
|
fileList,
|
principalDepartmentId,
|
data,
|
activeName,
|
handleClick,
|
tableData,
|
Search,
|
resetForm,
|
isShowDialog,
|
ruleFormRef,
|
ruleForm,
|
rules,
|
addRef,
|
userRef,
|
titles,
|
disabled,
|
propse,
|
emit,
|
onSubmit,
|
openUser,
|
onAddEmergencyPersonnel,
|
toggleFullscreen,
|
FullScreen,
|
full,
|
onUser,
|
onMyAdd,
|
listApi,
|
onEdit,
|
onRowDel,
|
department,
|
peopleInsertBtn,
|
teamId
|
};
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.textarea {
|
height: 168px !important;
|
}
|
|
.textarea ::v-deep .el-textarea__inner {
|
height: 168px !important;
|
}
|
|
::v-deep .el-table__cell {
|
font-weight: 400;
|
}
|
</style>
|
