<template>
|
<div class="system-edit-user-container">
|
<el-dialog
|
title="新建应急队伍管理"
|
v-model="isShowDialog"
|
width="769px"
|
draggable
|
>
|
<el-form
|
ref="ruleFormRef"
|
:model="ruleForm"
|
size="default"
|
:rules="rules"
|
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="teamLevel">
|
<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="shang"></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="teamLeader">
|
<el-input
|
v-model="ruleForm.teamLeader"
|
placeholder="请选择"
|
class="input-with-select"
|
>
|
<template #append>
|
<el-button :icon="Search"/>
|
</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="responsibleDepartment">
|
<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="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-input v-model="ruleForm.telephone" 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-input
|
class="textarea"
|
v-model="ruleForm.describe"
|
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="相关附件">
|
<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-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">新增</el-button>
|
<el-table
|
:data="tableData"
|
style="width: 100%;margin-top: 15px;"
|
ref="multipleTableRef"
|
:header-cell-style="{background:'#f6f7fa',color:'#909399'}"
|
>
|
<el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="personnelName" 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="200" align="center">
|
<template #default="scope">
|
<el-button disabled size="small" text="plain" >查看
|
</el-button>
|
<el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
|
</el-button>
|
<el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="onCancel" size="default">关闭</el-button>
|
<el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<AddEmergencyPersonnel ref="addRef" />
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive,
|
ref,
|
defineComponent
|
} from 'vue';
|
|
import type {
|
UploadUserFile,
|
TabsPaneContext,
|
FormInstance,
|
FormRules,
|
} from 'element-plus'
|
|
import {
|
Search
|
} from '@element-plus/icons-vue'
|
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
|
// 定义表格数据类型
|
interface User {
|
personnelName: string
|
jobNo: string
|
phone: string;
|
position: string;
|
}
|
export default defineComponent({
|
name: 'openAdd',
|
components: {
|
AddEmergencyPersonnel
|
},
|
setup() {
|
const isShowDialog = ref(false)
|
|
const ruleFormRef = ref<FormInstance>()
|
//定义表单
|
const ruleForm = reactive({
|
teamName: '', // 队伍名称
|
teamLeader: '', //队伍负责人
|
department: [], // 负责人部门
|
phone: '', // 负责人手机
|
telephone: '', // 固定电话
|
describe: '', // 队伍描述
|
});
|
// 打开弹窗
|
const openDialog = () => {
|
// state.ruleForm = row;
|
isShowDialog.value = true;
|
};
|
// 关闭弹窗
|
const closeDialog = () => {
|
isShowDialog.value = false;
|
};
|
// 取消
|
const onCancel = () => {
|
closeDialog();
|
};
|
// 上传附件
|
const fileList = ref<UploadUserFile[]>([])
|
|
//定义树形下拉框
|
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: [],
|
},
|
],
|
},
|
]
|
//定义tabs切换
|
const activeName = ref('first')
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
console.log(tab, event)
|
}
|
|
//定义表格数据
|
const multipleSelection = ref<User[]>([])
|
const tableData: User[] = []
|
|
//添加队伍负责人弹窗
|
const addRef = ref();
|
const onAddEmergencyPersonnel = () => {
|
addRef.value.openDialog();
|
};
|
// 必填项提示
|
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)
|
}
|
})
|
}
|
return {
|
openDialog,
|
closeDialog,
|
isShowDialog,
|
onCancel,
|
fileList,
|
responsibleDepartment,
|
data,
|
activeName,
|
handleClick,
|
tableData,
|
multipleSelection,
|
Search,
|
ruleForm,
|
ruleFormRef,
|
submitForm,
|
rules,
|
addRef,
|
onAddEmergencyPersonnel,
|
};
|
},
|
});
|
</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>
|
