shuiwu/src/system/moduleNormal/userManage/modules/add.vue

<template>
  <div>
    <a-button type="primary" @click="showDrawer">新建</a-button>
    <a-drawer
      v-model:visible="visible"
      class="custom-class"
      title="创建用户"
      placement="right"
      width="600"
      :closable="false"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" size="small" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="选择角色" :rules="[{ required: true, message: '请选择角色' }]">
              <a-select
                ref="select"
                mode="multiple"
                v-model:value="form.roleids"
                placeholder="选择角色"
                style="width: 100%"
              >
                <a-select-option v-for="item in rolesOptions" :key="item.roleid" :value="item.roleid">{{item.rolename}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账号" name="accountno">
              <a-input v-model:value="form.accountno" placeholder="账号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号码" name="phonenumber" :rules="[{ required: true, message: '请输入手机号码'},{ validator: validatePhoneNumber, message: '请输入有效的手机号码' }]">
              <a-input v-model:value="form.phonenumber" placeholder="输入手机号码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户名称" name="name" :rules="[{ required: true, message: '请输入用户名称' }]">
              <a-input v-model:value="form.name" placeholder="输入用户名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户类型" name="usertype" :rules="[{ required: true, message: '请选择用户类型'}]">
              <a-select
                ref="select"
                v-model:value="form.usertype"
                placeholder="选择用户类型"
                style="width: 100%"
              >
                <a-select-option v-for="item in userTypeOptions" :key="item.value" :value="item.value">{{item.remarks}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button @click="onClose">关闭</a-button>
          <a-button type="primary" @click="submit">保存</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>

<script setup>
import {ref,defineEmits, onMounted} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
const emit = defineEmits(['onSuccess'])
const visible = ref(false)
const form = ref({
  userid: 0,
  remarks:'',
  usertype:undefined
})
let userTypeOptions = ref([])
const validatePhoneNumber = async (rule, value)=> {
  const phoneNumberPattern = /^1\d{10}$/;
  if (phoneNumberPattern.test(value)) {
    return Promise.resolve();
  }
  return Promise.reject('请输入有效的手机号码');
}
const showDrawer = ()=>{
  visible.value = true
  roles()
}
const onClose = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const formRef = ref()
const submit = async ()=>{
  try {
    const values = await formRef.value.validateFields();
    const res = await Api.requested({
      id:20230608104302,
      "content": form.value
    })
    utils.message(res,'创建成功',()=>{
      onClose()
      emit('onSuccess')
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}
const rolesOptions = ref([])
const roles = async ()=>{
  const res = await Api.optionstype('role')
  rolesOptions.value = res.data
}

onMounted(async () => {
  const res = await Api.optionstype('usertype')
  userTypeOptions.value = res.data
})


</script>
<style>
</style>