shj
2022-07-29 17c7c68a17e6502d09299ea385e01413595c17d4
src/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue
@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="title"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,17 +13,18 @@
          :model="ruleForm"
          size="default"
          :rules="rules"
          :disabled="disabled"
          label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="选择人员" prop="selectPeople">
            <el-form-item label="选择人员" prop="userUid">
              <el-input
                  v-model="ruleForm.selectPeople"
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -34,13 +35,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="personnelName">
              <el-input v-model="ruleForm.personnelName" 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="personnelGender">
              <el-radio-group v-model="ruleForm.personnelGender">
            <el-form-item label="人员性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
@@ -61,11 +62,12 @@
      <template #footer>
            <span class="dialog-footer">
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button>
               <el-button size="default" @click="onCancel">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
               <el-button size="default" @click="resetForm(ruleFormRef)">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)" >确定</el-button>
            </span>
      </template>
    </el-dialog>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
  </div>
</template>
@@ -80,25 +82,29 @@
  FormRules,
  FormInstance,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import {contingencyApi} from "/@/api/contingency";
export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
    DailogSearchUser
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
      selectPeople: '', // 选择人员
      jobNumber: '', //人员工号
      personnelName: '', // 人员名称
      personnelGender: '', // 人员性别
    const ruleForm = ref ({
      teamId: '',
      userUid: '',
      gender: '',
      jobNumber: '', // 人员工号
      name: '', // 人员名称
      phone: '', // 手机号码
      position: '', // 职位
    });
@@ -139,27 +145,107 @@
        },
      ],
    })
    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 titles = ref();
    const disabled = ref();
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急队伍人员') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            contingencyApi()
                .addEmergencyTeamPersonnel(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;
            contingencyApi()
                .editEmergencyTeam(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 = {
          teamId: '',
          userUid: '',
          gender: '',
          jobNumber: '', // 人员工号
          name: '', // 人员名称
          phone: '', // 手机号码
          position: '', // 职位
        };
      }
    }
    // 打开弹窗
    const openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急队伍人员' || title == '修改应急队伍人员') {
        contingencyApi()
            .seeEmergencyTeamPersonnel(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.userUid=e.id
    };
    //全屏
    const full = ref(false);
@@ -172,17 +258,24 @@
    };
    return {
      openDialog,
      closeDialog,
      // closeDialog,
      isShowDialog,
      ruleFormRef,
      submitForm,
      onCancel,
      // onCancel,
      ruleForm,
      rules,
      Search,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      openUser,
      userRef,
      onUser,
    };
  },
});