gtqtOut.git - Gitblit

对比新文件
			@@ -0,0 +1,450 @@
			<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="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="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"/>
			</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"></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"></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="jobNumber" 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 size="small" type="primary" text="plain" >查看
			</el-button>
			<el-button size="small" type="primary" text="plain" @click="onEditEmergencyPersonnel(scope.row)" style="margin-right: 5px;">编辑
			</el-button>
			<el-button size="small" type="primary" 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" />
			<EditEmergencyPersonnel ref="editRef" />

			</div>
			</template>

			<script lang="ts">
			import {
			reactive,
			toRefs,
			ref,
			onMounted,
			defineComponent
			} from 'vue';
			import type {
			UploadUserFile,
			TabsPaneContext,
			FormInstance,
			FormRules,
			ElTable,
			} from 'element-plus'
			import {
			Search
			} from '@element-plus/icons-vue'
			import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
			import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue";
			// 定义表格数据类型
			interface User {
			personnelName: string
			jobNumber: string
			phone: string;
			position: string;
			}
			// 定义接口来定义对象的类型
			interface TableDataRow {
			// userName: string;
			// userNickname: string;
			// roleSign: string;
			// department: string[];
			// phone: string;
			// email: string;
			}
			// 定义接口来定义对象的类型
			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: {
			AddEmergencyPersonnel,
			EditEmergencyPersonnel
			},
			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 onSubmit = () => {
			// 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 addRef = ref();
			const onAddEmergencyPersonnel = () => {
			addRef.value.openDialog();
			};

			//定义表格数据
			const multipleTableRef = ref<InstanceType<typeof ElTable>>()
			const multipleSelection = ref<User[]>([])
			const tableData: User[] = [
			{
			personnelName: '张志刚',
			jobNumber: '1037',
			position: '副组长',
			phone: '13673321356',
			},
			{
			personnelName: '张志刚',
			jobNumber: '1037',
			position: '副组长',
			phone: '13673321356',
			},
			{
			personnelName: '张志刚',
			jobNumber: '1037',
			position: '副组长',
			phone: '13673321356',
			},
			{
			personnelName: '张志刚',
			jobNumber: '1037',
			position: '副组长',
			phone: '13673321356',
			}
			]
			// 必填项提示
			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 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)
			}
			})
			}
			//表格编辑弹窗
			const editRef = ref();
			const onEditEmergencyPersonnel = (row: TableDataRow) => {
			editRef.value.openDialog(row);
			};
			return {
			openDialog,
			closeDialog,
			onCancel,
			// onSubmit,
			fileList,
			responsibleDepartment,
			data,
			activeName,
			handleClick,
			multipleSelection,
			onAddEmergencyPersonnel,
			onEditEmergencyPersonnel,
			addRef,
			editRef,
			submitForm,
			Search,
			rules,
			ruleFormRef,
			tableData,
			multipleTableRef,
			...toRefs(state),
			};
			},
			});
			</script>
			<style scoped lang="scss">
			.textarea{
			height: 168px!important;
			}
			.textarea ::v-deep .el-textarea__inner{
			height: 168px!important;
			}
			</style>