admin-fiveFollowing/src/views/systemManage/userManage/dialogComponent.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="640px"
    @close="closeDialog()"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline userManageDialog"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="用户名：" prop="nickName">
        <el-input
          v-model="form.nickName"
          :disabled="dialogTitle === '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="账号：" prop="userName">
        <el-input
          v-model="form.userName"
          :disabled="dialogTitle === '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="form.sex" :disabled="dialogTitle === '查看'">
          <el-radio label="1" value="1">男</el-radio>
          <el-radio label="2" value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号码：" prop="phonenumber">
        <el-input
          v-model="form.phonenumber"
          :disabled="dialogTitle === '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if="dialogTitle == '新增'">
        <el-input
          v-model="form.password"
          :disabled="dialogTitle === '查看'"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item
        label="创建时间："
        prop="createTime"
        style="margin-top: 0px"
      >
        <el-date-picker
          v-model="form.createTime"
          width="100%"
          type="datetime"
          placeholder="选择日期时间"
          :disabled="dialogTitle === '查看'"
        ></el-date-picker>
      </el-form-item> -->

      <el-form-item label="角色名称：" prop="roleName">
        <!-- <el-input v-model="form.roleName"></el-input> -->
        <el-select
          v-model="form.roleId"
          placeholder="请选择"
          clearable
          :disabled="dialogTitle === '查看'"
        >
          <el-option
            v-for="(item, index) in roleSelectData"
            :key="index"
            :label="item.roleName"
            :value="item.roleId"
          ></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('formInfo')"
          :disabled="isDisable"
        >
          确定
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, onMounted, watchEffect } from 'vue'
import * as api from '@/api/systemManage/userManage.js'
import { ElMessage } from 'element-plus'
import { parseTime, validatorPhone } from '@/utils'

export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    context

    const dialogVisible = ref(false)
    const formInfo = ref(null)
    const isDisable = ref(false)

    const form = ref([])
    const roleSelectData = ref([])

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.itemInfo.value
      console.log('form.value')
      console.log(form.value)
    }

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

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

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

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

    // 保存-修改操作
    const submitForm = () => {
      form.value.createTime = parseTime(new Date())

      formInfo.value.validate((valid) => {
        if (valid) {
          isDisable.value = true
           setTimeout(() => {
                  isDisable.value = false //点击一次时隔两秒后才能再次点击
                }, 2000)
          form.value.roleIds = [form.value.roleId] //roleIds 传给后台
          if (props.dialogTitle === '新增') {
            api.userAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                setTimeout(() => {
                  isDisable.value = false //点击一次时隔两秒后才能再次点击
                }, 2000)

                closeDialog()
              } else {
                alert(requset.msg)
                // ElMessage.error(requset.msg)
              }
            })
          } else {
            api.userUpdate(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
        }
      })
    }

    //角色下拉请求
    function optionselect() {
      api.optionselect().then((requset) => {
        if (requset.status === 'SUCCESS') {
          console.log('requset.data')
          console.log(requset.data)
          roleSelectData.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

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

    onMounted(() => {
      optionselect()
    })

    return {
      closeDialog,
      dialogVisible,
      options,
      roleValid,
      formInfo,
      form,
      roleSelectData,
      open,
      submitForm,
      resetForm,
      isDisable,
      rules: {
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,

            message: '用户名长度至少2个字符',
            trigger: 'blur',
          },
        ],
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            max: 10,
            message: '账号最多输入 10 个字符',
            trigger: 'blur',
          },
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        phonenumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: validatorPhone,
            message: '输入的电话号码不正确',
            trigger: 'blur',
          },
        ],
        createTime: [
          { required: true, message: '请输入创建时间', trigger: 'change' },
        ],
        roleId: [
          { required: true, message: '请选择角色名称', trigger: 'change' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 6,
            message: '长度在 3 到 6 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}
</style>
<style lang="scss">
</style>