<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 :model="ruleForm" size="default" label-width="90px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="队伍名称">
|
<el-input v-model="ruleForm.teamName" :disabled="true"></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-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
|
<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="队伍负责人">
|
<el-input
|
v-model="ruleForm.teamLeader"
|
placeholder="Please input"
|
class="input-with-select"
|
:disabled="true"
|
>
|
<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="负责人部门">
|
<el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" :disabled="true" 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="负责人手机">
|
<el-input v-model="ruleForm.teamPhone" :disabled="true"></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.telephone" :disabled="true"></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" :disabled="true" maxlength="150"></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" disabled
|
>点击上传</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" disabled>新增</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>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- <AddTeamLeader ref="addRef" />-->
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
|
import type {
|
UploadUserFile,
|
TabsPaneContext,
|
} from 'element-plus'
|
import {
|
Search,
|
FullScreen
|
} from '@element-plus/icons-vue'
|
// import AddTeamLeader from '/@/views/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;
|
department: any;
|
phone: string;
|
telephone: string;
|
describe: string;
|
}
|
interface UserState {
|
isShowDialog: boolean;
|
ruleForm: RuleFormRow;
|
deptData: Array<DeptData>;
|
}
|
// 定义表格数据类型
|
interface User {
|
personnelName: string
|
jobNo: string
|
phone: string;
|
position: string;
|
}
|
// // 定义表格数据类型
|
// interface Team {
|
// personnelName: string
|
// teamLevel: string
|
// teamDescription: string
|
// teamPhone: string
|
// phone: string;
|
// describe: string;
|
// responsibleDepartment: string
|
// }
|
export default defineComponent({
|
name: 'openSee',
|
components: {
|
// Search,
|
},
|
setup() {
|
const state = reactive<UserState>({
|
isShowDialog: false,
|
ruleForm: {
|
teamName: '', // 队伍名称
|
teamLevel: '', // 队伍级别
|
teamLeader: '', //队伍负责人
|
department: [], // 负责人部门
|
phone: '', // 负责人手机
|
telephone: '', // 固定电话
|
describe: '', // 队伍描述
|
},
|
deptData: [], // 部门数据
|
});
|
// 打开弹窗
|
const openDialog = (row: RuleFormRow) => {
|
state.ruleForm = row;
|
state.isShowDialog = true;
|
};
|
// 关闭弹窗
|
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 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[] = [
|
{
|
personnelName: '张志刚',
|
jobNo: '1037',
|
position: '副组长',
|
phone: '13673321356',
|
},
|
{
|
personnelName: '张志刚',
|
jobNo: '1037',
|
position: '副组长',
|
phone: '13673321356',
|
},
|
{
|
personnelName: '张志刚',
|
jobNo: '1037',
|
position: '副组长',
|
phone: '13673321356',
|
},
|
{
|
personnelName: '张志刚',
|
jobNo: '1037',
|
position: '副组长',
|
phone: '13673321356',
|
}
|
]
|
|
// //添加队伍负责人
|
// const addRef = ref();
|
// //添加队伍负责人弹窗
|
// const onAddTeamLeader = () => {
|
// addRef.value.openDialog();
|
// };
|
//全屏
|
const full = ref(false);
|
const toggleFullscreen = () => {
|
if (full.value == false) {
|
full.value = true;
|
} else {
|
full.value = false;
|
}
|
};
|
return {
|
openDialog,
|
closeDialog,
|
onCancel,
|
fileList,
|
responsibleDepartment,
|
data,
|
activeName,
|
handleClick,
|
tableData,
|
multipleSelection,
|
Search,
|
// addRef,
|
// onAddTeamLeader,
|
...toRefs(state),
|
toggleFullscreen,
|
FullScreen,
|
full,
|
};
|
},
|
});
|
</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>
|
