事故管理修改

zhaojiale

2022-08-10 d8215ff56e7bf39b43c52d7f27de5e7e427e67cf

 src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue

@@ -1,182 +1,275 @@
<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.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :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="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-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-date-picker
                  class="w100"
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
   <div class="system-edit-user-container">
      <el-dialog :title="titles" v-model="isShowDialog" width="50%" @close="resetForm(ruleFormRef)" draggable :fullscreen="full">
         <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
         <el-form ref="ruleFormRef" :rules="rules" :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="suppliesName">
                     <el-input v-model="ruleForm.suppliesName" placeholder="请选择" class="input-with-select">
                        <template #append>
                           <el-button :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="maintainResult">
                     <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="异常" value="2"></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="userName">
                     <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select">
                        <template #append>
                           <el-button :icon="Search" @click="openUser(0)" />
                        </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="maintainTime">
                     <el-date-picker
                        class="w100"
                        v-model="ruleForm.maintainTime"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="选择日期时间"
                     />
                  </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>
               <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
               <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <Material ref="showRef"/>
    <userSelections ref="userRef"/>
  </div>
         </template>
      </el-dialog>
      <EmergencySupplies ref="showRef" @SearchUser="onUser" />
      <DailogSearchUser ref="userRef" @SearchUser="onUsers" />
   </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import EmergencySupplies from '../../../../../components/emergencySupplies/index.vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { maintenanceEmergencyMaterialsApi } from '../../../../../api/contingencyManagement/maintenanceEmergencyMaterials';

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelections,
    Material,
  },
  setup() {
    const isShowDialog = ref(false)
   name: 'openAdd',
   components: {
      DailogSearchUser,
      EmergencySupplies,
   },
   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 showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
    };
  },
      const ruleFormRef = ref<FormInstance>();
      //定义表单
      const ruleForm = ref({
         suppliesId: '', // 物资ID
         maintainResult: '', //保养结果
         maintainTime: '', // 创建时间
         userList: [],
      });
      const titles = ref();
      const disabled = ref();
      // 打开弹窗
      const openDialog = (title: string, id: number) => {
         isShowDialog.value = true;
         titles.value = `${title}应急物资保养`;
         disabled.value = title == '查看' ? true : false;
         if (title == '查看' || title == '修改') {
            maintenanceEmergencyMaterialsApi()
               .seeMaintenanceEmergencyMaterials(id)
               .then((res) => {
                  if (res.data.code == 200) {
                     ruleForm.value = res.data.data;
                     let arr = [];
                     for (let i = 0; i < ruleForm.value.userList.length; i++) {
                        arr.push(ruleForm.value.userList[i].userName);
                     }
                     ruleForm.value.userName = arr.toString();
                  }
               });
         }
      };
      //日期选择器
      const maintainTime = ref('');
      // 表单提交验证必填项
      const submitForm = async (formEl: FormInstance | undefined) => {
         if (!formEl) return;
         await formEl.validate((valid, fields) => {
            if (valid) {
               if (titles.value == '新建应急物资保养') {
                  isShowDialog.value = false;
                  delete ruleForm.value.suppliesName
                  delete ruleForm.value.userName
                  maintenanceEmergencyMaterialsApi()
                     .addMaintenanceEmergencyMaterials(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);
                        }
                     });
               } else if (titles.value == '修改应急物资保养') {
                  isShowDialog.value = false;
                  delete ruleForm.value.suppliesName
                  delete ruleForm.value.userName
                  maintenanceEmergencyMaterialsApi()
                     .editMaintenanceEmergencyMaterials(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();
      };
      const resetForm = (formEl: FormInstance | undefined) => {
         isShowDialog.value = false;
         if (!formEl) return;
         formEl.resetFields();
      };
      const rules = reactive<FormRules>({
         nameTitle: [],
         maintainResult: [
            {
               required: true,
               message: '保养结果不能为空',
               trigger: 'change',
            },
         ],
         userName: [
            {
               required: true,
               message: '创建人不能为空',
               trigger: 'change',
            },
         ],
         maintainTime: [
            {
               required: true,
               message: '创建时间不能为空',
               trigger: 'blur',
            },
         ],
      });
      // 应急物资弹窗
      const showRef = ref();
      const daiInpt = () => {
         showRef.value.openDailog();
      };
      const onUser = (e: any) => {
         ruleForm.value.suppliesId = e.id;
         ruleForm.value.suppliesName = e.name;
      };
      // 编写人弹窗
      const userRef = ref();
      const openUser = (data: any) => {
         userRef.value.openDailog(data);
      };
      const onUsers = (val: any) => {
         let arr = [];
         for (let i = 0; i < val.length; i++) {
            arr.push(val[i].realName);
            ruleForm.value.userList.push({
               userUid: val[i].uid,
               userName: val[i].realName,
            });
         }
         ruleForm.value.userName = arr.toString();
      };
      //全屏
      const full = ref(false);
      const toggleFullscreen = () => {
         if (full.value == false) {
            full.value = true;
         } else {
            full.value = false;
         }
      };
      return {
         openDialog,
         isShowDialog,
         Search,
         ruleForm,
         maintainTime,
         daiInpt,
         onUser,
         onUsers,
         rules,
         showRef,
         ruleFormRef,
         submitForm,
         openUser,
         userRef,
         toggleFullscreen,
         FullScreen,
         full,
         resetForm,
         titles,
         disabled,
         emit,
      };
   },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
   height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
   height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
   font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
   height: 0;
   margin: 0;
   border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
   width: 100%;
}
</style>