gtqtOut.git - Gitblit

对比新文件
			@@ -0,0 +1,442 @@
			<template>
			<div class="system-edit-user-container">
			<el-dialog
			title="新建应急预案管理"
			v-model="isShowDialog"
			width="769px"
			draggable
			>
			<el-form
			ref="ruleFormRef"
			: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" 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="responsibleDepartment">
			<el-tree-select
			v-model="treeSelect"
			:data="tree"
			multiple
			:render-after-expand="true"
			show-checkbox
			/>
			<el-divider />
			</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-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="common"></el-option>
			<el-option label="其他预案" value="common"></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="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-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="teamPhone">
			<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="common"></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="telephone" >
			<el-input
			v-model="ruleForm.teamLeader"
			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="telephone">
			<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="telephone">
			<!-- <el-tree-select-->
			<!-- v-model="ruleForm.responsibleDepartment"-->
			<!-- :data="data" class="w100"-->
			<!-- placeholder="请选择"/>-->
			<el-date-picker
			v-model="value1"
			type="datetime"
			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="telephone" @click="daiInpt" >
			<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="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="12" :md="12" :lg="12" :xl="12" class="mb20">
			<el-form-item label="区域名称" prop="telephone">
			<el-input
			v-model="ruleForm.teamLeader"
			placeholder="请选择"
			class="input-with-select"
			>
			<template #append>
			<el-button :icon="Search" @click="regionsDialog"/>
			</template>
			</el-input>
			</el-form-item>
			</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>
			<DailogSearch ref="Shows"/>
			<userSelections ref="userRef"/>
			<RegionsDialog ref="openRef"/>
			</div>
			</template>

			<script lang="ts">
			import { reactive,
			ref,
			defineComponent
			} from 'vue';

			import type {
			UploadUserFile,
			FormInstance,
			// FormRules,
			} from 'element-plus'

			import {
			Search
			} from '@element-plus/icons-vue'
			import UserSelections from "/@/components/userSelections/index.vue"
			import DailogSearch from '/@/views/contingencyManagement/panManagement/component/DailogSearch.vue'
			import RegionsDialog from '/@/views/contingencyManagement/panManagement/component/regionsDialog.vue'

			export default defineComponent({
			name: 'openAdd',
			components: {
			DailogSearch,
			UserSelections,
			RegionsDialog,
			},
			setup() {
			const isShowDialog = ref(false)

			const ruleFormRef = ref<FormInstance>()
			//定义表单
			const ruleForm = reactive({
			teamName: '', // 队伍名称
			teamLeader: '', //队伍负责人
			department: [], // 负责人部门
			phone: '', // 负责人手机
			telephone: '', // 固定电话
			});
			// 打开弹窗
			const openDialog = () => {
			// state.ruleForm = row;
			isShowDialog.value = true;
			};
			// 关闭弹窗
			const closeDialog = () => {
			isShowDialog.value = false;
			};
			// 取消
			const onCancel = () => {
			closeDialog();
			};
			//日期选择器
			const value1 = ref('')
			// 上传附件
			const fileList = ref<UploadUserFile[]>([])
			// 可选择树
			const treeSelect = ref()
			const tree = [
			{
			value: '1',
			label: 'Level one 1',
			children: [
			{
			value: '1-1',
			label: 'Level two 1-1',
			children: [
			{
			value: '1-1-1',
			label: 'Level three 1-1-1',
			},
			],
			},
			],
			},
			{
			value: '2',
			label: 'Level one 2',
			children: [
			{
			value: '2-1',
			label: 'Level two 2-1',
			children: [
			{
			value: '2-1-1',
			label: 'Level three 2-1-1',
			},
			],
			},
			{
			value: '2-2',
			label: 'Level two 2-2',
			children: [
			{
			value: '2-2-1',
			label: 'Level three 2-2-1',
			},
			],
			},
			],
			},
			{
			value: '3',
			label: 'Level one 3',
			children: [
			{
			value: '3-1',
			label: 'Level two 3-1',
			children: [
			{
			value: '3-1-1',
			label: 'Level three 3-1-1',
			},
			],
			},
			{
			value: '3-2',
			label: 'Level two 3-2',
			children: [
			{
			value: '3-2-1',
			label: 'Level three 3-2-1',
			},
			],
			},
			],
			},
			]
			//定义树形下拉框
			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: [],
			},
			],
			},
			]
			// 必填项提示
			// 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)
			}
			})
			}
			// 应急队伍弹窗
			const Shows=ref()
			const daiInpt=()=>{
			Shows.value.openDailog()
			}
			// 选择区域弹窗
			const openRef=ref()
			const regionsDialog=()=>{
			openRef.value.openDailog()
			}
			// 打开用户选择弹窗
			const userRef = ref();
			const openUser = () => {
			userRef.value.openDialog();
			};
			return {
			openDialog,
			closeDialog,
			isShowDialog,
			onCancel,
			fileList,
			responsibleDepartment,
			data,
			Search,
			ruleForm,
			value1,
			treeSelect,
			tree,
			daiInpt,
			Shows,
			ruleFormRef,
			submitForm,
			// rules,
			openUser,
			userRef,
			regionsDialog,
			openRef,
			};
			},
			});
			</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;
			}
			.el-divider--horizontal{
			height: 0;
			margin: 0;
			border-top: transparent;
			}
			.el-select{
			width: 100%;
			}
			</style>