Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut

shj

2022-08-03 96103611f97b412453ecf0948792987956e4f29f

 src/views/contingencyManagement/panManagement/component/openAdd.vue

@@ -1,66 +1,71 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急预案管理"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        width="40%"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          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 label="预案名称" prop="name">
              <el-input v-model="ruleForm.name" 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"
              v-model="ruleForm.treeSelect"
              :data="data"
              multiple
              :render-after-expand="true"
              :props="propse"
              show-checkbox
              clearable
              />
              <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-form-item label="预案类型" prop="type">
              <el-select v-model="ruleForm.type" class="w100" placeholder="请选择">
                <el-option label="综合应急预案" value="综合应急预案"></el-option>
                <el-option label="现场处置方案" value="现场处置方案"></el-option>
                <el-option label="专项应急预案" value="专项应急预案"></el-option>
                <el-option label="其他预案" value="其他预案"></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-form-item label="危险源关联" prop="associatedDanger">
              <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                <el-option :label="true">是</el-option>
                <el-option :label="false">否</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-form-item label="预案级别" prop="level">
              <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                <el-option label="公司级" value="公司级"></el-option>
                <el-option label="分厂级" value="分厂级"></el-option>
                <el-option label="车间级" value="车间级"></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-form-item label="编写人" prop="authorId" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.authorId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -71,33 +76,38 @@
            </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-form-item label="编写部门" prop="authorDeptId">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  v-model="ruleForm.authorDeptId"
                  check-strictly
                  :data="data"
                  class="w100"
                  :props="propse"
                  clearable
                  :render-after-expand="false"
                  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-form-item label="发布实施日期" prop="releaseDate">
              <el-date-picker
                  v-model="value1"
                  v-model="ruleForm.releaseDate"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </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-form-item label="应急队伍" prop="emergencyTeam">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.emergencyTeam"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="daiInpt" />
                </template>
              </el-input>
            </el-form-item>
@@ -121,9 +131,9 @@
            </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-form-item label="区域名称" prop="areaName">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.areaName"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -137,248 +147,227 @@
      </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>
               <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

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

import { ElMessage } from 'element-plus';
import {
  Search
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import CheckTemplate from '/@/components/checkTemplate/index.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {emergencyPlanApi} from "/@/api/emergencyPlan";
import {goalManagementApi} from "/@/api/goalManagement";

export default defineComponent({
  name: 'openAdd',
  components: {
    CheckTemplate,
    UserSelections,
    DailogSearchUser,
    RegionsDialog,
  },
  setup() {
    const isShowDialog = ref(false)
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleForm = ref({
      name: '', // 预案名称
      type: '', //预案类型
      associatedDanger: '', // 危险源关联
      level: '', // 预案级别
      authorId: '', // 编写人
      authorDeptId: '', // 编写部门
      releaseDate: '', // 发布实施日期
      fileList: [
        {
          fileUrl: 'url',
          fileName: 'name',
        }
      ],
      emergencyTeam: '', //应急队伍
      areaList: [
        {
          areaId: '',
        }
      ],  //区域列表
      areaName: '',  //区域名称
      teamList: [
        {
          teamId: '',
        }
      ],
      deptList: [
        {
          departmentId: '',
        }
      ]
    })
    const titles = ref();
    const disabled = ref();

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    });
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
    };
    //日期选择器
    const value1 = ref('')
    const releaseDate = ref('')
    // 上传附件
    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 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 trees = ref();
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    onMounted(() => {
      department();
    });
    // const tree = [
    //   {
    //     value: '1',
    //     label: 'Level one 1',
    //     children: [
    //       {
    //         value: '11',
    //         label: 'Level two 1-1',
    //         children: [
    //           {
    //             value: '111',
    //             label: 'Level three 1-1-1',
    //           },
    //         ],
    //       },
    //     ],
    //   },
    //   {
    //     value: '2',
    //     label: 'Level one 2',
    //     children: [
    //       {
    //         value: '21',
    //         label: 'Level two 2-1',
    //         children: [
    //           {
    //             value: '211',
    //             label: 'Level three 2-1-1',
    //           },
    //         ],
    //       },
    //       {
    //         value: '22',
    //         label: 'Level two 2-2',
    //         children: [
    //           {
    //             value: '221',
    //             label: 'Level three 2-2-1',
    //           },
    //         ],
    //       },
    //     ],
    //   },
    //   {
    //     value: '3',
    //     label: 'Level one 3',
    //     children: [
    //       {
    //         value: '31',
    //         label: 'Level two 3-1',
    //         children: [
    //           {
    //             value: '311',
    //             label: 'Level three 3-1-1',
    //           },
    //         ],
    //       },
    //       {
    //         value: '32',
    //         label: 'Level two 3-2',
    //         children: [
    //           {
    //             value: '321',
    //             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 data = ref();

    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急预案管理') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanApi()
              .addEmergencyPlan(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);
          }
        })
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
@@ -392,30 +381,49 @@
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.authorId=e.id
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      releaseDate,
      treeSelect,
      tree,
      // trees,
      propse,
      department,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      resetForm,
      onUser,
    };
  },
});