admin-fiveFollowing/src/views/planOutage/dialogComponent.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="showDialog"
    width="640px"
    @open="open()"
    @close="closeDialog(0)"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline"
      label-width="150px"
      :rules="rules"
    >
      <el-form-item label="站点:" prop="siteId">
        <el-select
          v-model="form.siteId"
          placeholder="请选择"
          style="width: 240px"
          :disabled="dialogTitle === '编辑'"
        >
          <el-option
            v-for="item in store.state.siteList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始/结束停电时间:" prop="time">
        <el-date-picker
          style="width: 330px"
          v-model="form.time"
          type="datetimerange"
          :disabledDate="pickerEndDate"
          start-placeholder="Start Date"
          end-placeholder="End Date"
          :disabled="form.type === 2 || form.type === 3"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="联系方式:" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="联系人:" prop="contacts">
        <el-input v-model="form.contacts"></el-input>
      </el-form-item>
      <el-form-item label="状态:" prop="planType">
        <el-select
          v-model="form.planType"
          placeholder="请选择"
          style="width: 240px"
        >
          <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>

      <br />
      <br />
      <br />
      <div style="text-align: right">
        <el-button @click="closeDialog(0)">取消</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect } from 'vue'
import * as api from '@/api/planOutage/index'
import { ElMessage } from 'element-plus'
import { validatorPhone } from '@/utils'
export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    show_Dialog: Boolean,
    dialogTitle: String,
    itemInfo: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  setup(props, { emit }) {
    const store = useStore()
    const beginTime = ref('')
    const showDialog = ref(false)
    const form = ref([])
    const formInfo = ref(null)

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // 保存操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          var timeType = typeof form.value.time[0]
          if (timeType == 'object') {
            store.commit('TimeAll_function', form.value.time)
            const time = store.state.Time_Data
            form.value.startTime = time[0]
            form.value.endTime = time[1]
          } else {
            form.value.startTime = form.value.time[0]
            form.value.startTime = form.value.time[1]
          }
          if (props.dialogTitle === '新增') {
            api.plannedOutageAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.plannedOutageUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    const open = () => {
      form.value = props.itemInfo
    }

    // 关闭弹框
    const closeDialog = (flag) => {
      resetForm()
      showDialog.value = false
      emit('closeDialog', flag)
    }

    function resetForm() {
      formInfo.value.resetFields()
    }

    watchEffect((fn, options) => {
      fn, options
      showDialog.value = props.show_Dialog
    })

    //禁止选择以前的时间
    const pickerEndDate = (time) => {
      const timeRange = 1 * 24 * 60 * 60 * 1000

      return time.getTime() <= Date.now() - timeRange * 1
    }
    /**
     * 手机号校验
     */
    // var validatorPhone = function (rule, value, callback) {
    //   if (value === '') {
    //     callback(new Error('手机号不能为空'))
    //   } else if (!/^1\d{10}$/.test(value)) {
    //     callback(new Error('手机号格式错误'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      pickerEndDate,
      roleValid,
      submitForm,
      closeDialog,
      open,

      store,
      beginTime,
      showDialog,

      checked: true,
      form,
      formInfo,
      options: [
        {
          value: '选项1',
          label: '站点一',
        },
        {
          value: '选项2',
          label: '站点二',
        },
        {
          value: '选项3',
          label: '站点三',
        },
        {
          value: '选项4',
          label: '站点四',
        },
        {
          value: '选项5',
          label: '站点五',
        },
      ],

      rules: {
        siteId: [
          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
          { required: true, message: '请选择站点', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请选择开始停电时间', trigger: 'blur' },
        ],
        // startTime: [
        //   { required: true, message: '请选择开始停电时间', trigger: 'blur' },
        // ],
        // endTime: [
        //   { required: true, message: '请选择结束停电时间', trigger: 'change' },
        // ],
        // phone: [
        //   {
        //     required: true,
        //     message: '请输入电话号码',
        //     trigger: 'blur',
        //   },
        //   {
        //     validator: validatorPhone,
        //     message: '输入的电话号码不正确',
        //   },
        // ],
        phone: [
          {
            required: true,
            message: '请输入电话号码',
            trigger: 'blur',
          },
          {
            validator: validatorPhone,
            message: '输入的电话号码不正确',
            trigger: 'blur',
          },
        ],
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        planType: [
          { required: true, message: '请选择计划类型', trigger: 'blur' },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}

// label样式
.el-form-item__label {
  width: 150px;
}
.el-form-item__content {
  margin-left: 100px;
}
</style>
<style>
.demo-form-inline .el-form-item:not(.user-layout .el-form-item) {
  margin: 0 auto 20px 55px;
}
</style>