shj
2022-07-29 17c7c68a17e6502d09299ea385e01413595c17d4
src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue
@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急演练实施"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,12 +13,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="drillPlanId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.drillPlanId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -29,9 +30,9 @@
            </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="autualUser" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.autualUser"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -42,9 +43,9 @@
            </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"
                  v-model="ruleForm.processDesc"
                  placeholder="请填写演练目的"
                  class="textarea"
                  type="textarea"
@@ -52,9 +53,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="recordUserUid" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.recordUserUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -65,12 +66,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,8 +80,8 @@
      </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>
@@ -91,7 +93,7 @@
<script lang="ts">
import {
  reactive,
  // reactive,
  ref,
  defineComponent
} from 'vue';
@@ -100,7 +102,7 @@
  FormInstance,
  // FormRules,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
@@ -108,6 +110,7 @@
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import UserSelect from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue'
import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue'
import {emergencyDrillExecuteApi} from "/@/api/emergencyDrillExecute";
export default defineComponent({
  name: 'openAdd',
@@ -116,44 +119,127 @@
    UserCheckbox,
    RegionsDialog,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      drillRecordDate: '', // 演练记录时间
      drillPlanId: '', //演练计划ID
      recordUserUid: '', // 记录人ID
      processDesc: '', // 演练过程描述
      userList: [
        {
          userUid: '',
        },
        {
          userUid: '',
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    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;
      if (title == '查看应急演练实施' || title == '修改应急演练实施') {
        emergencyDrillExecuteApi()
            .seeEmergencyDrillExecute(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    const drillRecordDate = 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 submitForm = async (title: string, formEl: FormInstance | undefined) => {
      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
          recordUserUid: '', // 记录人ID
          processDesc: '', // 演练过程描述
          userList: [
            {
              userUid: '',
            },
            {
              userUid: '',
            }
          ]
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
@@ -180,12 +266,10 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      drillRecordDate,
      daiInpt,
      Shows,
      ruleFormRef,
@@ -198,6 +282,10 @@
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
});