修改

shj

2022-09-20 7df64634d3d7b292713eebfa008c40b3f5f9f65f

 src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue

@@ -1,11 +1,12 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急演练实施"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
@@ -13,12 +14,13 @@
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练名称" prop="teamName">
            <el-form-item label="演练名称" prop="drillName">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.drillName"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -28,10 +30,168 @@
              </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="实际到场人员" prop="telephone" >
        </el-row>


        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练地点" prop="drillAddress">
              <el-input :disabled="true" v-model="drillRuleForm.drillAddress" 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="主办部门"  placeholder="请选择" prop="departmentId">
              <el-tree-select
                      :disabled="true"
                      v-model="drillRuleForm.departmentId"
                      :data="deptData"
                      check-strictly
                      class="w100"
                      :props="propse"
                      clearable
                      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="drillWay">
              <el-select :disabled="true" v-model="drillRuleForm.drillWay" class="w100" placeholder="请选择">
                <el-option label="综合" :value="1"></el-option>
                <el-option label="桌面" :value="2"></el-option>
                <el-option label="专项" :value="3"></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="planName" >
              <el-input
                  v-model="ruleForm.teamLeader"
                      :disabled="true"
                      v-model="drillRuleForm.planName"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="daiInpt"/>
                </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="drillLevel">
              <el-select :disabled="true" v-model="drillRuleForm.drillLevel" class="w100" placeholder="请选择">
                <el-option label="公司级" :value="1"></el-option>
                <el-option label="分厂级" :value="2"></el-option>
                <el-option label="车间级" :value="3"></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="makingPlanDate">
              <el-date-picker :disabled="true" v-model="drillRuleForm.makingPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="drillPlanDate">
              <el-date-picker :disabled="true" v-model="drillRuleForm.drillPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="gmtModitify">
              <el-date-picker :disabled="true" v-model="drillRuleForm.gmtModitify"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="makingUserName">
              <el-input :disabled="true" v-model="drillRuleForm.makingUserName" 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="makingDepartmentId">
              <el-tree-select
                      :disabled="true"
                      v-model="drillRuleForm.makingDepartmentId"
                      check-strictly
                      :data="deptData"
                      class="w100"
                      :props="propse"
                      clearable
                      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="userListString" >
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.userListString"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="openUser(0)"/>
                </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="演练目的" prop="purpose">
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.purpose"
                      placeholder="请填写演练目的"
                      class="input-with-select textarea"
                      type="textarea"
              >
              </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="chargeUserListString" >
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.chargeUserListString"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="openUser(1)"/>
                </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="insuranceMeasures">
              <el-input :disabled="true" v-model="drillRuleForm.insuranceMeasures" 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="drillExpense">
              <el-input :disabled="true" v-model="drillRuleForm.drillExpense" 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="备注信息" prop="remark">
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.remark"
                      placeholder="请填写备注信息"
                      class="input-with-select textarea"
                      type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>




        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="实际到场人员" prop="autualUserListString" >
              <el-input
                  v-model="ruleForm.autualUserListString"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -42,19 +202,19 @@
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练过程描述" prop="telephone">
            <el-form-item label="演练过程描述" prop="processDesc">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写演练目的"
                  v-model="ruleForm.processDesc"
                  placeholder="请填写演练过程描述"
                  class="textarea"
                  type="textarea"
              />
            </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="recordUserName" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.recordUserName"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -65,12 +225,13 @@
            </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="drillRecordDate">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  v-model="ruleForm.drillRecordDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
@@ -78,96 +239,325 @@
      </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" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <UserSelect ref="Shows"/>
    <UserCheckbox ref="userRef"/>
    <RegionsDialog ref="openRef"/>
    <!--记录人-->
    <DailogSearchUser ref="Shows" @SearchUser="onUser"/>
    <!--到场人员-->
    <DailogSearchUser ref="userRef" @SearchUser="selectDCuser"/>
    <RegionsDialog ref="openRef" @SearchUser="onUsers"/>
  </div>
</template>

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

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

import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import UserSelect from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue'
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue'
import {emergencyDrillExecuteApi} from "/@/api/contingencyManagement/emergencyDrillExecute";
import {releaseDrillPlanApi} from "/@/api/contingencyManagement/emergencyDrillPlan";
import {goalManagementApi} from "/@/api/goalManagement";

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelect,
    DailogSearchUser,
    UserCheckbox,
    RegionsDialog,
  },
  setup() {
  setup(props, { emit }) {
    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 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 ruleForm = ref ({
      drillRecordDate: '', // 演练记录时间
      drillPlanId: '', //演练计划ID
      drillName:'',
      recordUserUid: '', // 记录人ID
      recordUserName:'',
      processDesc: '', // 演练过程描述

      autualUserListString:'',
      userList: [
        {
          userUid: '',
        },
        {
          userUid: '',
        }
      })
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急演练实施' || title == '修改应急演练实施') {
        emergencyDrillExecuteApi()
            .seeEmergencyDrillExecute(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
                ruleForm.value.autualUserListString=''
                for(var a = 0;a<res.data.data.userList.length;a++){
                  ruleForm.value.autualUserListString += res.data.data.userList[a].userName+';'
                }

                releaseDrillPlanApi()
                  .seeReleaseDrillPlan(res.data.data.drillPlanId)
                  .then((res1) => {
                    if (res1.data.code == 200) {
                      drillRuleForm.value = res1.data.data;

                      drillRuleForm.value.userListString=''
                      drillRuleForm.value.chargeUserListString=''
                      for(var a = 0;a<res1.data.data.userList.length;a++){
                        if(res1.data.data.userList[a].type==1){
                          drillRuleForm.value.userListString += res1.data.data.userList[a].userName+';'
                        }
                        // if(res.data.data.userList[a].type==2){
                        //   ruleForm.value.chargeUserListString += res.data.data.userList[a].userName+';'
                        // }
                      }
                      // alert(res.data.data.chargeUserList.length)
                      for(var a = 0;a<res1.data.data.chargeUserList.length;a++){
                        drillRuleForm.value.chargeUserListString += res1.data.data.chargeUserList[a].userName+';'
                      }
                    }
                  })
              }
            });
      }
    };
    const data =  [];
    const deptData = []
    //部门树
    // const department = () => {
    //   goalManagementApi()
    //           .getTreedepartment()
    //           .then((res) => {
    //             if (res.data.code == 200) {
    //               deptData.value = res.data.data;
    //               console.log('-------',deptData.value)
    //             } else {
    //               ElMessage.error(res.data.msg);
    //             }
    //           });
    // };
    //
    // const propse = {
    //   label: 'depName',
    //   children: 'children',
    //   value: 'depId',
    // };
    //el-tree-select回显
    const propse = {
      label: 'depName',
      children: 'children',
    };
    //得到部门树
    const department = async () => {
      await goalManagementApi()
              .getTreedepartment()
              .then((res) => {
                if (res.data.code == 200) {
                  data.value = res.data.data;
                  getTreeList(res.data.data, deptData);
                  console.log('deptData',deptData)
                } else {
                  ElMessage.error(res.data.msg);
                }
              });
    };
    // 递归树状数据且修改字段名
    const getTreeList = (treeList, deptData) => {
      treeList.map((c) => {
        let tempData = {
          depName: c.depName,
          value: c.depId,
          children: [],
        };
        if (c.children && c.children.length > 0) {
          tempData.children = [];
          getTreeList(c.children, tempData.children);
        }
        deptData.push(tempData);
      });
    };
    onMounted(() => {
      department();
    });
    //日期选择器
    const drillRecordDate = ref('')
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      delete ruleForm.value.drillName
      delete ruleForm.value.autualUserListString
      if (title == '新建应急演练实施') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyDrillExecuteApi()
                .addEmergencyDrillExecute(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);
          }
        });
      }
      else if (title == '修改应急演练实施') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyDrillExecuteApi()
                .editEmergencyDrillExecute(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      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);
          }
        });
        formEl.resetFields();
        ruleForm.value = {
          drillRecordDate: '', // 演练记录时间
          drillPlanId: '', //演练计划ID
          drillName:'',
          recordUserUid: '', // 记录人ID
          processDesc: '', // 演练过程描述
          userList: [
            {
              userUid: '',
            },
            {
              userUid: '',
            }
          ]
        };
      }
    }
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDialog()
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      drillRuleForm.value={}
      formEl.resetFields();
    };

    // 演练名称弹窗
    const openRef=ref()
    const regionsDialog=()=>{
    const regionsDialog = () => {
      openRef.value.openDailog()
    }
    //定义表单
    const drillRuleForm = ref ({})
    const onUsers = (e:any) => {
      console.log(e)
      releaseDrillPlanApi()
              .seeReleaseDrillPlan(e.id)
              .then((res) => {
                if (res.data.code == 200) {
                  drillRuleForm.value = res.data.data;

                  drillRuleForm.value.userListString=''
                  drillRuleForm.value.chargeUserListString=''
                    for(var a = 0;a<res.data.data.userList.length;a++){
                      if(res.data.data.userList[a].type==1){
                        drillRuleForm.value.userListString += res.data.data.userList[a].userName+';'
                      }
                      // if(res.data.data.userList[a].type==2){
                      //   ruleForm.value.chargeUserListString += res.data.data.userList[a].userName+';'
                      // }
                    }
                    // alert(res.data.data.chargeUserList.length)
                    for(var a = 0;a<res.data.data.chargeUserList.length;a++){
                      drillRuleForm.value.chargeUserListString += res.data.data.chargeUserList[a].userName+';'
                    }
                }
              })
      ruleForm.value.drillPlanId=e.id
      ruleForm.value.drillName=e.drillName
    };
    // 实际到场人员弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
      userRef.value.openDailog(0);
    };
    const selectDCuser = (e) => {
      ruleForm.value.autualUserListString=''
      ruleForm.value.userList=[]
      for(var a = 0;a<e.length;a++){
        ruleForm.value.userList.push(
                {
                  userName: e[a].realName,
                  userUid: e[a].uid,
                }
        )
        ruleForm.value.autualUserListString+=e[a].realName+';'
      }
    }
    // 演练记录人弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.recordUserUid=e.uid
      ruleForm.value.recordUserName=e.realName
    };
    //全屏
    const full = ref(false);
@@ -180,12 +570,10 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      drillRecordDate,
      daiInpt,
      Shows,
      ruleFormRef,
@@ -194,10 +582,22 @@
      openUser,
      userRef,
      regionsDialog,
      onUsers,
      onUser,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      selectDCuser,
      drillRuleForm,
      deptData,
      propse,
      data,
      department
    };
  },
});
@@ -226,4 +626,4 @@
.textarea ::v-deep .el-textarea__inner{
  height: 90px!important;
}
</style>
</style>